Ekskul Coding Web Development · SMPIT Dar El-Iman

Atribut HTML dan Jago Komputer

Hari ini kamu menyiapkan ruang kerja sendiri, mengenal atribut HTML, lalu membuat halaman web tentang hal yang kamu suka.

±60 menit
Tanpa install
Cukup browser

Mulai belajar

Rencana hari ini

Empat langkah. Centang kotak kecil di tiap bagian untuk melihat kemajuanmu di bilah atas.

10 menit

Siapkan folder dan file di komputer
Ke bagian Siapkan
15 menit

Kenalan dengan atribut HTML dan style
Ke bagian Atribut
10 menit

Cari dan unduh gambar gratis
Ke bagian Gambar
25 menit

Praktik Halaman Favoritku, lalu pamer
Ke bagian Praktik

Siapkan ruang kerja

Sebelum menulis kode, kita siapkan tempat menyimpannya. Ini keterampilan komputer yang akan kamu pakai terus.

1. Buat folder `eskul-coding` di Desktop

Klik kanan di Desktop, pilih New (Baru), lalu Folder.
Beri nama eskul-coding: huruf kecil dan tanpa spasi.
Klik dua kali untuk memastikan folder bisa dibuka.

2. Buka vscode.dev dan pilih foldernya

Buka Chrome atau Edge, lalu ketik vscode.dev.
Klik File, lalu Open Folder.
Pilih folder eskul-coding.
Klik Allow (Izinkan) saat browser bertanya.
Klik ikon kertas bertanda + (New File) untuk membuat file baru.

3. Nama file harus berakhiran `.html`

Benar

favorit.html

Salah

favorit.html.txt

Windows sering menyembunyikan ekstensi file. Aktifkan lewat View, Show, File name extensions di File Explorer.

4. Enam shortcut wajib dikuasai

Daftar shortcut keyboard dan fungsinya
Shortcut	Fungsi
Ctrl + C	Salin (copy)
Ctrl + V	Tempel (paste)
Ctrl + X	Potong (cut)
Ctrl + Z	Batalkan ketikan terakhir
Ctrl + S	Simpan file
F5	Segarkan (refresh) halaman di browser

5. Tulis, simpan, refresh, ulangi

Tulis
kode
→
Simpan
Ctrl + S
→
Refresh
F5

Lupa Ctrl + S adalah penyebab nomor satu "kodenya tidak jalan".

Aku sudah bisa

Membuat folder eskul-coding di Desktop
Membuka vscode.dev dan memilih folder itu
Membuat file favorit.html dan menyimpannya dengan Ctrl + S

Atribut HTML

Tag adalah bendanya. Atribut adalah keterangan tambahan tentang benda itu, seperti "tas" dan "tas warna biru".

Tag saja: browser belum tahu gambar yang mana

<img>

Tag + atribut: sekarang jelas

<img src="kucing.svg" width="200">

Atribut punya nama dan nilai

<a href="https://google.com">Buka Google</a>

href: Nama atribut: apa yang diatur (tujuan link).
"https://google.com": Nilai: isinya, selalu diapit tanda kutip.
Buka Google: Teks yang dilihat orang di halaman.

Lima atribut untuk hari ini

Lima atribut HTML, tag tempat dipakainya, dan fungsinya
Atribut	Dipakai di	Fungsinya
href	<a>	Alamat tujuan link
src	<img>	Lokasi file gambar
alt	<img>	Teks pengganti jika gambar gagal tampil, dibaca oleh pembaca layar
width	<img>	Lebar gambar dalam piksel
style	Semua tag	Warna, ukuran huruf, dan gaya lain

Aku sudah bisa

Menjelaskan beda tag dan atribut dengan kata-kataku sendiri
Menulis atribut dengan nama, tanda sama dengan, dan nilai dalam tanda kutip

Style mempercantik halaman

Atribut style mengubah tampilan sebuah tag. Isinya pasangan properti:nilai;, dan boleh lebih dari satu.

Properti style dasar, fungsi, dan contoh nilainya
Properti	Fungsi	Contoh nilai
color	Warna huruf	purple
background-color	Warna latar	#fff0f5
font-size	Ukuran huruf	24px
font-family	Jenis huruf	Georgia
text-align	Rata teks	center

<h1 style="color:purple;
  text-align:center;">
  Kucing Kesayanganku
</h1>

Aturan

Tulis properti:nilai;
Akhiri tiap properti dengan titik koma.
Beberapa properti boleh dalam satu style.

Cari kode warna

Pilih warna di pemilih warna W3Schools, lalu salin kode HEX-nya (contoh: #fff0f5).

Buka pemilih warna

Baca sendiri properti lainnya

Bab HTML Styles, ada contoh yang bisa dicoba
w3schools.com/html/html_styles.asp (tab baru)
Aturan menulis atribut style
w3schools.com/tags/att_global_style.asp (tab baru)
Semua properti CSS (cari: text-shadow, opacity)
w3schools.com/cssref/index.php (tab baru)

Aku sudah bisa

Menulis style dengan dua properti atau lebih
Mengambil kode warna dari pemilih warna

Cari dan simpan gambar gratis

Laptop lab belum punya banyak gambar, jadi kita ambil dari situs yang gambarnya boleh dipakai gratis. Pilih gambar benda, hewan, makanan, atau tempat.

Tiga situs gambar gratis

Pexels
pexels.com (tab baru)
Foto gratis, tanpa akun untuk mengunduh.
Unsplash
unsplash.com (tab baru)
Foto berkualitas tinggi, tanpa akun.
Pixabay
pixabay.com (tab baru)
Foto dan ilustrasi. Ukuran besar perlu akun.

Kata kunci: ketik nama bendanya saja, misalnya cat rabbit nasi goreng mosque flower. Kalau hasilnya memuat foto orang, lewati dan pilih yang lain.

Cara menyimpan gambar ke folder

Cari gambar, lalu klik tombol Download.
Pilih ukuran Small atau Medium supaya file ringan.
Buka folder Downloads di File Explorer.
Tekan Ctrl + C pada gambar, buka folder eskul-coding, lalu Ctrl + V.
Klik kanan gambar, pilih Rename, lalu beri nama sederhana, misalnya kucing.jpg.

Gambar siap pakai

Internet lambat atau belum ketemu gambar yang cocok? Simpan salah satu gambar di bawah ke folder eskul-coding, lalu tulis nama filenya di src.

kucing.svg
Unduh kucing.svg
apel.svg
Unduh apel.svg
masjid.svg
Unduh masjid.svg
bunga.svg
Unduh bunga.svg
ikan.svg
Unduh ikan.svg

Aku sudah bisa

Mengunduh satu gambar gratis
Memindahkan gambar itu ke folder eskul-coding dan memberi nama sederhana

Coba langsung di sini

Ubah kode di kiri, hasilnya langsung tampil di kanan. Ini hanya tempat bermain. Halaman untuk tugasmu tetap dibuat di vscode.dev.

Mulai dari contoh

Kode HTML

Hasil

Klik di dalam tanda kutip pada style="...", lalu klik properti di bawah untuk menambahkannya.

Praktik: Halaman Favoritku

Buat satu halaman tentang hewan, makanan, atau tempat yang kamu suka. Tulis di vscode.dev dalam file favorit.html, lalu lihat hasilnya di browser. Waktu sekitar 25 menit.

Yang harus ada

Judul <h1> berisi nama favoritmu
<img> dengan src, alt, dan width
Paragraf alasan kamu menyukainya, dengan warna huruf lewat style
Satu link <a href> ke sumber informasi
Sudah Ctrl + S, lalu F5 untuk melihat hasil

<!doctype html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Favoritku</title>
  </head>
  <body>
    <!-- 1. Judul: nama favoritmu -->
    <!-- 2. Gambar: src, alt, width -->
    <!-- 3. Paragraf alasan: beri style -->
    <!-- 4. Link sumber informasi -->
  </body>
</html>

Tanda berhasil: judul, gambar, paragraf berwarna, dan link tampil di browser, dan link-nya bisa diklik.

Tantangan: hias halamanmu

Sudah selesai? Coba properti ini. Kamu bisa mencobanya dulu di tempat bermain.

background-color

Warna latar halaman. Pasang di <body>.
border

Bingkai gambar. Contoh: 4px solid purple
border-radius

Sudut membulat. 50% membuat gambar bulat.
padding

Ruang di dalam kotak. Contoh: 20px

Selesai? Tunjukkan halamanmu ke teman di sebelah, lalu ke guru.

Cek ini kalau hasilnya tidak sesuai

Perubahan tidak terlihat

Sudah Ctrl + S di vscode.dev, lalu F5 di tab browser?

Gambar tidak muncul

Apakah nama file sama persis dengan yang ditulis di src, termasuk huruf besar-kecil dan akhiran .jpg atau .svg? Apakah gambarnya satu folder dengan file HTML?

Link tidak bisa dibuka

Apakah href diawali https://?

Tampilan berantakan

Apakah tanda kutip dan tag penutup (misalnya </h1>) sudah lengkap? Apakah tiap properti style diakhiri titik koma?

Cek pemahamanmu

Rekap hari ini

Membuat folder dan file .html sendiri
Memakai shortcut Ctrl + C, V, dan S
Menulis atribut href, src, alt, width, dan style
Mengunduh gambar gratis ke folder eskul-coding

Tugas kecil (opsional): ganti gambarnya dan tambahkan dua properti style baru.

Atribut HTML dan Jago Komputer

Rencana hari ini

Siapkan ruang kerja

1. Buat folder eskul-coding di Desktop

2. Buka vscode.dev dan pilih foldernya

3. Nama file harus berakhiran .html

4. Enam shortcut wajib dikuasai

5. Tulis, simpan, refresh, ulangi

Atribut HTML

Atribut punya nama dan nilai

Lima atribut untuk hari ini

Style mempercantik halaman

Baca sendiri properti lainnya

Cari dan simpan gambar gratis

Tiga situs gambar gratis

Cara menyimpan gambar ke folder

Gambar siap pakai

Coba langsung di sini

Praktik: Halaman Favoritku

Tantangan: hias halamanmu

Cek ini kalau hasilnya tidak sesuai

Cek pemahamanmu

Rekap hari ini

1. Buat folder `eskul-coding` di Desktop

3. Nama file harus berakhiran `.html`