Scribd Logo
Unggah

Selamat datang di Scribd!

  • Mini Task SE - HTML Februari

    Diunggah oleh

    Siwo Honkai
    144 tayangan12 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPTX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    144 tayangan12 halaman

    Mini Task SE - HTML Februari

    Diunggah oleh

    Siwo Honkai

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 12

    Petunjuk Pengerjaan

    Dokumen ini memang tidak open access untuk edit, maka download lah file ini lalu kerjakanlah pada device
    masing-masing, dengan cara klik file pada pojok kiri, pilih download, dan pilihlah Microsoft Powerpoint
    .pptx. Untuk mengerjakan, perhatikan perintah dibawah ini:
    1. Buatlah rangkuman untuk materi yang kamu pelajari hari ini pada slide 3, jika tidak cukup, boleh kamu
    tambahkan slide.
    2. Akses lah web https://www.w3schools.com/ dan https://codepen.io/ lalu ikutilah practice yang
    dilakukan oleh tutor pada sesi kelas. Jika kamu ingin mempelajari kembali setelah kelas, kamu dapat
    mengakses recording kelas pada link https://www.youtube.com/live/Osq8zxlvsJY?feature=share
    3. Screenshot-lah hasil dari practice di web tersebut, dan tempatkan screenshot tersebut pada slide 4
    4. Uploadlah hasil pekerjaanmu pada template ini di salah satu atau lebih media sosialmu
    (linkedin/twitter/instagram story/instagram feeds/facebook/lainnya). Yang di upload boleh berupa file
    ppt maupun file screenshot dari file ini dari slide 3-6.
    5. Link postingan social mediamu bisa kamu input di https://bit.ly/ClaimSertifSCSoftEngineerFeb23
    maksimal pada hari Senin, 13 Februari 2023 pukul 12.00 WIB (siang), link tersebut diisi sebagai absen
    dan sebagai cara kamu untuk mendapatkan sertifikat nantinya (sertifikat maksimal akan dikirim
    maksimal H+7)
    Membuat Dokumen HTML
    Buat dokumen HTML di codepen.io dengan
    spesifikasi sebagai berikut:
    - Terdapat 1 <img> berisi gambar
    bebas.
    - Terdapat 1 <h1> berisi nama.
    - Terdapat 1 <h2> berisi teks
    Perkenalan.
    - Terdapat 1 <p> berisi deskripsi diri
    kamu.
    - Terdapat 1 <h2> berisi Kenapa Saya Ingin
    Belajar Membuat Website?
    - Terdapat 1 <ol> berisi alasan ingin belajar
    membuat website
    - Terdapta 1 <a> berisi link menuju LinkedIn
    kamu.
    #RintisKarirImpia
    n
    SHORT CLASS

    SOFTWARE
    ENGINEERING

    Learning Basic HTML


    for Web
    Development
    Oleh : (Nama Kamu)

    JOIN THE BEST UPSKILLING COMMUNITY


    WITH ME at myskill.id/bootcamp MINI TASK
    Course Summary – HTML Introduction
    • HTML (HyperText Markup Language) adalah building block pembuatan halaman untuk menampilkan dokumen web di browser yang
    bereksitensi .html contohnya (.index).
    • Sebuah website umumnya terdiri dari HTML, CSS, dan Javascript
    • HTML berfungsi sebagai kerangka / struktur halaman web (ibarat kerangka mobil).
    • CSS berfungsi sebagai styling / tampilan halaman web (panel mobil yang didesain).
    • Javascript berfungsi untuk mengatur interaksi dalam halaman web (mesin yang membuat mobil bisa jalan).
    • Struktur dokumen HTML yaitu (DOCTYPE, HTML, Elemen Head, Elemen Body).
    • DOCTYPE adalah deklarasi tipe dokumen html yang berfungsi untuk mendefinisikan jenis / versi dokumen html.
    • HTML (elemen root html) adalah pembungkus dokumen html yang berfungsi sebagai penanda awal dan akhir dokumen HTML.
    • Head adalah penampung elemen non visual dari dokumen HTML, contoh : judul, metadata, dst.
    • Body adalah penampung elemen visual dari dokumen HTML, contoh : tombol, paragraph, heading, dst.

    #RintisKarirImpia
    n
    Gambar.1 struktur dokumen html Gambar.2 syntax doctype Gambar.3 Versi HTML

    Gambar.4 Elemen html Gambar.5 Elemen head Gambar.6 Elemen body


    Course Summary-Jenis Elemen HTML
    • Elemen adalah satuan komponen yang membentuk dokumen. Elemen terdiri dari tag pembuka, tag penutup, dan konten.
    • Atribut adalah bagian informasi lain dari sebuah elemen HTML.. Atribut yang digunakan bisa berbeda tergantung jenis elemen. Atribut dapat
    memuat informasi tambahaan seperti halnya link
    a) Elemen <a dan </a> = anchor, berfungsi sebagai elemen link
    b) Elemen <a dan </a> memiliki atribut href berfungsi untuk memberi informasi tujuan link
    • Elemen title adalah elemen non visual yang berfungsi untuk mendefinisikan judul halaman web. Elemen ini hanya bisa digunakan di dalam
    <head>
    • Elemen <p> adalah elemen visual (ditampilkan di halaman web) yang berfungsi untuk menampilkan paragraph. Elemem ini hanya bisa digunakan
    di dalam <body>.
    • Elemen <h1>, <h2>, …, <h6> disebut juga sebagai elemen heading (sub judul) yang berfungsi untuk menampilkan heading / teks judul. Terdiri
    dari h1, h2, h3, h4, h5, dan h6. Elemen ini hanya bisa digunakan di dalam <body>.
    • Elemen List<ol>, <ul>, <li> di dalam elemen list, baik <ol> ataupun <ul>, setiap item list dismpan sebagai elemen <li> (list item) yang berfungsi
    untuk menampilkan dan menyimpan item-item pada list nya
    • Elemen <a> disebu juga sebagai anchor yang berfungsi untuk membuat link ke halaman web lain. Atribut paling pentinf pada <a> adalah hreef,
    yamh berisi URL tujuan link tersebut.
    • Elemen <img> meruapakan salah satu elemen HTML yang tidak memiliki tag penutup. berfungsi untuk menampilkan gambar halaman web.
    a) src : berisi URL gambar
    b) alt : berisi deksripsi gambar
    c) height : berisi tinggi gambar dalam pixel
    d) width : berisi lebar gambar dalam pixel
    Gambar.7 Elemen paragraph dan anchor Gambar.8 Elemen title Gambar.9 Elemen paragraph di dalam body

    Gambar.10 Elemen heading Gambar.11 Elemen order list dan unordered list
    Gambar.12 Elemen item list (order list dan unordered list) Gambar.13 anchor dan atribut href

    Gambar.14 Elemen image


    Course Summary-Membuat Dokumen HTML

    Gambar.15 Mini Task MySkill


    Hasil Practice HTML

    Gambar.16 syntax Codepen.io


    Link : https://codepen.io/sihonkai/pen/mdGbRwG
    Hasil Practice HTML

    Gambar.17 Output Program HTML membuat dokumen website


    Follow me!
    Instagram : sihonkai
    Twitter : @Hosihonkai
    LinkedIn : Bintang Bima
    (Di Follow yak!)

    Short Class Software Engineering


    by @myskill.id

    Anda mungkin juga menyukai