Belajar HTML & CSS

 Memulai dengan HTML & CSS

   Selamat datang di dunia HTML & CSS yang seru!

Pada pelajaran kali ini,kita akan membuat situs web yang ditampilkan pada gambar dibawah.

Kelihatannya mungkin sulit,tapi jangan khawatir! Kami akan memandu Anda disetiap langkahnya.

https://sandisitorus.github.io/project1.github.io/kerangkaweb.html

Web diatas adalah contoh web paling sederhana dalam HTML & CSS.

Cara kerja HTML

Mari kita mulai pelajaran kita dengan HTML!

Aturan pertama penulisan code HTML adalah mengapit teks dengan tag. Tag dapat memberikan arti seperti judul atau tautan pada teks.

Tag Pembuka dan Penutup

Sebagian besar element HTML memerlukan sepasang tag, tag pembuka dan tag penutup, dengan teks disisipkan di antara keduanya.

Saat menggunakan tag penutup, pastikan untuk meletakkan /.

Tag Judul

Tag judul digunakan untuk memformat element judul.

Tag ini bervariasi mulai dari <h1> hingga <h6>, <h1> menjadi yang terbesar dan <h6> menjadi yang terkecil (※ h mewakili heading (judul)).

Tag Paragraf

Tag <p> menentukan paragraf (※ p mewakili paragraf).

Teks yang diapit oleh tag seperti <h2> dan <p> dimulai di baris baru.

Menggunakan Judul dan Paragraf

Tag <h1>...<h6> digunakan sesuai ukuran dan signifikansi judul seperti ditunjukkan di bawah. Untuk teks yang bukan merupakan judul, gunakan tag <p>.

Komentar

Teks yang diapit oleh <!-- --> menjadi komentar.

Komentar tidak ditampilkan di browser. Komentar sangat berguna untuk menjelaskan code Anda.

Tag Tautan(1)

Anda dapat dengan mudah membuat tautan dengan tag <a> (※ a mewakili anchor (penambat)).

Teks dalam tag <a> ditampilkan di browser sebagai teks tautan.

Tag Tautan(2)

Setiap tautan memiliki tujuan. Jadi, agar tautan berfungsi, Anda harus menentukan URL tujuan di element <a> dengan menambahkan atribut href. Seperti yang ditampilkan pada gambar di sisi kiri, URL tujuan masuk ke bagian url dari <a href="url">.

Atribut HTML

Pada HTML, Anda dapat menentukan atribut seperti href di tag pembuka (※ lihat gambar di sisi kiri).

Selalu letakkan nilai atribut dalam tanda kutip ganda ".

Tag Gambar

Tag <img> digunakan untuk menampilkan gambar.

Kita dapat menetapkan gambar dengan menentukan url di atribut src seperti berikut: <img src="url">. Perhatikan bahwa tag <img> tidak memerlukan tag penutup karena tidak ada teks yang diapit.

Daftar(1)

Anda dapat membuat daftar dengan mengapit teks dengan tag <li>.

Jangan khawatir, kita akan membahas tag <ul> di slide berikutnya.

Daftar(2)

Jenis daftar akan berubah tergantung pada tag yang Anda gunakan.

Dengan tag <ul> Anda dapat membuat daftar dengan bullet.

Jika element Anda "bersarang" seperti gambar dikiri bawah ini, element yang menutupi akan menjadi induk dan element yang ditutupi akan menjadi anak-nya.

Indentasi

Untuk element bersarang, praktik yang baik adalah mensejajarkan code dengan indentasi. Meskipun tidak diperlukan, indentasi dapat memudahkan Anda untuk melihat hubungan induk-anak, terutama pada saat code Anda sudah mulai banyak dan rumit

(※ untuk membuat indentasi, tekan tombol "tab" di awal baris).