html

Belajar HTML Bagian 3 : Struktur Dasar HTML

Belajar HTML Bagian 3 : Struktur Dasar HTML

Pada bab sebelumnya kita sudah membahas mengenai cara memilih text editor yang cocok untuk digunakan menurut ngodeinweb.com. Jika kamu ingin membacanya, kamu bisa membacanya di Belajar HTML Bagian 2: Memilih Text Editor.

Setelah kamu memilih text editor yang cocok untuk kamu gunakan, sekarang saatnya untuk mulai menulis code program (istilah kerennya ngoding) menggunakan bahasa pemrogramman HTML.

Sebelum mulai ngoding pastikan kamu sudah menyiapkan sebuah text editor dan web browser. Kamu bebas menggunakan jenis web browser apa saja, namun kami menyarankan agar memilih web browser modern misalnya Mozilla Firefox atau Google Chrome.

Oke sekarang kita masuk ke inti pembahasan. Silahkan ketik code program atau salin code program ini ke text editormu.

Baris code tersebut adalah contoh dari pemrogramman HTML yang disebut sebagai struktur dasar HTML. Untuk dapat melihat tampilan yang dihasilkan dari code tersebut, kamu harus menyimpannya dengan ekstensi .html (dibaca: dot html). Nah sekarang silahkan simpan (save) code tersebut dan beri nama index.html .

Apakah harus menggunakan nama index.html?

Sebenarnya kamu bisa menyimpannya dengan nama lain atau sesuai keinginanmu, misalnya belajar.html, code.html, hello_world.html maupun yang lainnya. Namun agar lebih mudah diingat kami menggunakan nama index.html.

Silahkan buka file code HTML yang baru saja kamu buat (index.html), dengan cara double clik pada file tersebut atau klik kanan > open with > pilih web browser yang akan kamu gunakan.

Kurang lebih akan muncul tampilan seperti ini:

struktur dasar html

Penjelasan code program :

Baris code pertama disebut sebagai Document Type Declaration (DTD), yang berfungsi untuk memberitahu web browser bahwa file atau dokumen tersebut berisi HTML.

 

Baris code ini disebut sebagai Tag <html>. Tag ini <html> harus ditulis setelah penulisan code <!DOCTYPE html>.

Terlihat bahwa terdapat dua tag html yaitu tag html pembuka <html> dan tag html penutup </html> (Hanya dibedakan dengan tanda miring( / ) ). Semua tag HTML yang lain harus berada di dalam tag ini.

 

Tag ini disebut sebagai tag head (kepala) yang umumnya tidak akan ditampilkan di web browser. Sama seperti tag html, tag head juga memiliki pasangan tag penutup yaitu </head>.

 

Tag ini disebut sebagai tag title (judul) yang akan tampil diatas atau dibagian tab browser. Kamu bisa mengubah isi dari tag ini sesuai keinginanmu. Tag title ini juga memiliki pasangan penutup yaitu tag </title>.

 

Tag meta (metadata) berisi tentang informasi halaman atau dokumen. Salah satu isi yang kamu bisa tambahkan adalah “utf-8”. Ini berarti bahwa web browser akan memproses halaman html tersebut dengan karakter utf-8.

 

Tag ini <body> digunakan untuk menampung hampir seluruh tag lain. Didalam tag body inilah konten atau isi yang akan kamu tampilkan ditulis. Tag body juga memiliki pasangan tag penutup yaitu tag </body>.

 

Tag <h1> merupakan tag yang digunakan untuk memberikan judul pada halaman atau artikel yang kamu tulis. Tag heading ini terdiri dari enam jenis yaitu <h1> sampai <h6>. Perbedaannya adalah pada ukuran huruf yang dihasilkan. <h1> akan menghasilkan ukuran text yang paling besar, dan <h6> akan menghasilkan ukuran text yang paling kecil. Tag heading ini juga memiliki pasangan tag penutup.

Sedangkan tag <p> merupakan tag yang digunkan untuk membuat paragraf <p>. Tag ini juga memiliki pasangan tag penutup yaitu tag </p>.

 

Sekian untuk pembahasan mengenai Struktur Dasar HTML. Jika terjadi error atau hasil yang ditampilkan tidak sama, silahkan cek kembali penulisan code programnya.  Lanjut ke Belajar HTML Bagian 4 : Perbedaan Tag dan Atribut dalam HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *