Struktur Dasar HTML dan Penjelasannya

Gambar Struktur Dasar HTML dan Penjelasannya

Struktur dasar HTML ini biasanya selalu ada dalam setiap file HTML. Penulisan struktur dasar HTML dasar juga harus berurutan atau mengikuti standar struktur HTML yang ada. Struktur dasar HTML terdiri beberapa tag-tag HTML, setiap tag HTML bisa memiliki tag pembuka dan penutup, tapi ada juga yang tidak memiliki tag penutup.

Contohnya tag yang memiliki tag pembuka dan penutup misalnya tag title, dibuka dengan <title>, dan di tutup dengan </title>. Perbedaannya antara tag pembuka dan tag penutup yaitu terdapat tanda “/” pada tag penutup (tanpa tanda kutip). Sedangakan contoh tag yang tidak memiliki tag penutup misalnya tag img yang ditulis dengan <img src=”gamabr.jpg”>. Tentunya kamu tidak perlu pusing terlebih dahulu apa kegunaan tag img tersebut, karena poinnya disini saya hanya ingin menyampaikan bahwa tag html bisa memiliki tag pembuka dan tag penutup, serta ada yang tidak memiliki tag penutup. Untuk penulisan lengkapnya dapat kamu lihat pada contoh struktur dasar HTML pada latihan di bawah.

Menulis Struktur dasar HTML

Untuk menulis kode-kode atau struktur dasar HTML kamu memerlukan sebuah aplikasi yaitu text editor, pada seri persiapan menulis HTML kita sudah menginstall Notepad++. Sekarang silakan buka Notepad++ tersebut, bagi yang belum mengetahui caranya silakan klik Windows (lihat gambar di bawah, terutama bagian yang ditandai kotak merah).

Kemudia ketik Notepad++ pada kolom pencarian. Setelah Notepad++ ketemu silakan diklik untuk membukanya, dan Notepad++ akan terbuka.

Sekarang coba tulis struktur dasar HTML berikut ini pada Notepad++ :

Setelah kamu selesai menulisnya jangan lupa untuk menyimpan latihan tersebut, dengan cara klik ikon disket (save) lebih tepatnya pada bagian yang saya tandai kotak merah pada gambar dibawah.

Gambar Menulis Struktur Dasar HTML - 1

Kemudian simpan di dalam folder yang mudah kamu ingat, dan pada bagian file name silakan diisi sesuka kamu. Yang paling penting adalah pada bagian Save as type, silakan pilih Hyper Text Markup Language(*.html). Untuk lebih jelasnya kamu bisa lihat gambar dibawah ini :

Gamabar Menulis Struktur Dasar HTML - 2

Setelah file latihan disimpan silakan buka file tersebut pada browser, dengan cara klik Run > Launch in Chrome (karena saya menggunakan browser Chrome). Kamu bisa memilih browser yang lainnya sesuai keinginan kamu, namun yang perlu di ingat browser yang kamu pilih harus sudah terinstall di PC atau Laptop kamu.

Gambar Menulis Struktur Dasar HTML - 3

Dan Ini adalah tampilan dari file latihan struktur dasar HTML yang kita buat.

Gambar Menulis Struktur Dasar HTML - 4

Selain itu untuk membuka file latihan HTML ada beberapa cara, salah satunya adalah dengan cara klik ganda pada file latihan HTML tersebut.

Gambar Menulis Struktur Dasar HTML - 5

Penjelasan Struktur Dasar HTML

Pada baris pertama yaitu <!DOCTYPE html> fungsinya untuk memberi tahu browser bahwa file tesebut adalah file HTML, atau untuk mendeklarasi dari dokument HTML.

Pada baris nomor 3 terdapat tag pembuka HTML yaitu <html>, dan pada baris nomor 9 terdapat tag penutup HTML yaitu </html>. Tag ini menjadi wadah dari semua tag-tag HTML yang akan ditulis, atau ketika kamu akan menulis tag HTML lain harus berada didalam tag HTML ini.

Pada baris ke 3 terdapat tag header yaitu <head>, dan penutupnya terdapat pada baris ke 5 yaitu </head>. Tag head menjadi tempat untuk menempatan informasi-informasi yang ada atau digunakan didalam file html tersebut, misalnya seperti title, meta, script, dan lain sebagainya.

Pada baris nomor 4 terdapat tag title yaitu <title>Cara Kode – Ini tampil di tab bar / title bar</title>. Tag title ini akan tampil pada bagian tab bar atau title bar pada browser, contohnya seperti gambar dibawah ini pada bagian yang ditandai kotak merah :

Gambar Menulis Struktur Dasar HTML - Contoh header

Pada baris ke 6 terdapat tag body yaitu <body>, dan penutupnya terletak pada baris ke 8 yaitu </body>. Dalam tag body ini dapat digambarkan sebagai tubuh dalam HTML, dalam tag body ini akan ditampilkan dalam halaman browser.

Dan pada baris nomor 7 terdapat tulisan “Selamat belajar HTML, ini bagian yang tampil dalam browser”, ini merupakan tulisan bisa (tanpa tag) dan tampil di browser sebagai text biasa juga.

Jika diperhatikan dari file latihan HTML tersebut dapat dilihat setiap sepasang tag yang ada di dalamnya agak menjorok ke kanan, itu bertujuan supaya kode HTML kita terlihat lebih rapi dan mudah dibaca.

Saya rasa cukup untuk penjelasan struktur dasar HTML ini, jika ada pertanyaan silakan sampaikan pada kolom komentar. Dan pada seri selanjutnya kita akan belajar Cara menggunakan tag paragraf pada HTML.


Kolom Komentar

Related Post