- Tag DTD atau DOCTYPE.
- Tag HTML.
- Tag Head.
- Tag Body.
- Tag HTML.
- Tag Head.
- Tag Body.
Inilah yang merupakan keluarga inti atau struktur struktur paling dasar dari HTML, walaupun sebenarnya HTML tidak hanya berisi struktur struktur tersebut. karena masih banyak sanak family lainnya yang dimiliki HTML, seperti sepupu, kaka ipar dan lain lain. :)
Sekarang biar lo semua lebih mudah untuk memahaminya, silahkan coba buka code editor (phpDesigner), kalo belom punya bisa download di IndoNgoding. Setelah kita buka code editornya, kita buat halaman baru atau New File dan pilih HTML. Umum nya akan langsung tampil seperti kode berikut :
<!DOCTYPE HTML>
<html>
<head>
<title>Belajar Membuat Halaman HTML</title>
</head>
<body>
<p>Selamat Belajar dan Semangat, Salam IndoNgoding</p>
</body>
</html>
Kalo gak tampil, yaudah ketikkan kode di atas secara manual, lalu save file tersebut sebagai halaman.html dan jalankan file html tersebut, bisa dengan cara double klik file tersebut, atau klik kanan –> Open With –> Browser (Firefox/Chrome/Safari).
Dan hasilnya akan seperti gambar diatas ini guys
Sekarang saatnya kita jabarkan dan kita pahami siapa saja dan apa saja fungsi dari keluarga inti html ini.
1. Penggunaan DTD atau DOCTYPE pada HTML
Pertama, coba kita lihat Tag paling atas dulu bro, ada tag <!DOCTYPE HTML>, tag ini merupakan DTD atau DOCTYPE. DTD yang artinya Document Type Declaration. ini bisa kita artikan sebagai ayah dari html, Fungsinya adalah untuk memberi tahu kepada browser bahwa dokumen atau file yang akan diproses pada browser adalah HTML. DTD memiliki banyak versi tergantung kepada versi HTML yang akan digunakan. Pada contoh diatas, ane menggunakan DTD versi HTML 5 yang memang sangat singkat jelas dan mudah, yang pasti gampang untuk dijelaskan dan dimengerti.
2. Penggunaan Tag <html>
Setelah DTD, tag berikutnya ada tag <html>. tag ini bisa kita analogikan sebagai ibunya html, Ini adalah tag pembuka dari keseluruhan halaman web. Semua kode HTML harus berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>, nah umumnya dan masih banyak yang menggunakan atau mengetik <html> setalah DTD, tapi tanpa mengetikkan tag pembuka <html> setelah DTD juga bisa kok, dan itu juga banyak digunakan karena DTD atau DOCTYPE pada HTML 5 telah di deklarasikan juga sebagai tag HTML. contoh struktur tanpa tag html :
Nah ini merupakan elemen yang cukup penting loh dalam website, di dalam tag <head> inilah nanti akan berisi berbagai definisi halaman, seperti kode CSS, JavaScript, dan kode-kode lainnya atau sanak family html lainnya yang tidak tampil di browser. Untuk lebih jelasnya tentang Css dan JavaScript kita akan bahas setelah HTML. Di dalam element ini juga lah tag <title> ditulis. Title ini biasanya ditampilkan pada bagian paling atas web browser. Contohnya isi tag title pada halaman.html adalah ‘Belajar membuat Halaman HTML’ dan akan ditampilkan pada tab browser. seperti gambar dibawah ini
4. Penggunaan Tag <body>
Kalo ada pertanyaan dimana untuk tempat kita ngoding agar tampil dan dapat dilihat oleh user, Disinilah tempatnya, ini adalah Tag <body> atau tag yang akan berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf, tabel, link, gambar, dll. Tag body ini merupakan tag yang memiliki pasangan oleh karena itu tag ini juga wajib ditutup dengan tag penutup </body>. Dan ane yakin sebagian besar waktu kita dalam merancang web akan dihabiskan di dalam tag <body> ini. Karena ini lah yang akan dibaca dan dilihat oleh user yang melihat website kita. Untuk lebih jelas lagi, lihatlah area biru pada gambar dibawah ini, jika penempatan text,gambar atau lainnya di dalam tag <body> di dalam area biru itulah gambar atau teks tampil
Menurut ane untuk pembahasan kali ini tentang stuktur HTML cukup sederhana dan selesai. Sebuah halaman web bisa memiliki ratusan bahkan ribuan baris, yang ditulis dengan berbagai tag HTML.
Salam Indonesia Hebat
Pertama, coba kita lihat Tag paling atas dulu bro, ada tag <!DOCTYPE HTML>, tag ini merupakan DTD atau DOCTYPE. DTD yang artinya Document Type Declaration. ini bisa kita artikan sebagai ayah dari html, Fungsinya adalah untuk memberi tahu kepada browser bahwa dokumen atau file yang akan diproses pada browser adalah HTML. DTD memiliki banyak versi tergantung kepada versi HTML yang akan digunakan. Pada contoh diatas, ane menggunakan DTD versi HTML 5 yang memang sangat singkat jelas dan mudah, yang pasti gampang untuk dijelaskan dan dimengerti.
2. Penggunaan Tag <html>
Setelah DTD, tag berikutnya ada tag <html>. tag ini bisa kita analogikan sebagai ibunya html, Ini adalah tag pembuka dari keseluruhan halaman web. Semua kode HTML harus berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>, nah umumnya dan masih banyak yang menggunakan atau mengetik <html> setalah DTD, tapi tanpa mengetikkan tag pembuka <html> setelah DTD juga bisa kok, dan itu juga banyak digunakan karena DTD atau DOCTYPE pada HTML 5 telah di deklarasikan juga sebagai tag HTML. contoh struktur tanpa tag html :
<!DOCTYPE HTML>3. Penggunaan Tag <head>
<head>
<title>Belajar Membuat Halaman HTML</title>
</head>
<body>
<p>Selamat Belajar dan Semangat, Salam IndoNgoding</p>
</body>
</html>
Nah ini merupakan elemen yang cukup penting loh dalam website, di dalam tag <head> inilah nanti akan berisi berbagai definisi halaman, seperti kode CSS, JavaScript, dan kode-kode lainnya atau sanak family html lainnya yang tidak tampil di browser. Untuk lebih jelasnya tentang Css dan JavaScript kita akan bahas setelah HTML. Di dalam element ini juga lah tag <title> ditulis. Title ini biasanya ditampilkan pada bagian paling atas web browser. Contohnya isi tag title pada halaman.html adalah ‘Belajar membuat Halaman HTML’ dan akan ditampilkan pada tab browser. seperti gambar dibawah ini
Contoh hasil dari title akan ditampilkan seperti gambar di atas
4. Penggunaan Tag <body>
Kalo ada pertanyaan dimana untuk tempat kita ngoding agar tampil dan dapat dilihat oleh user, Disinilah tempatnya, ini adalah Tag <body> atau tag yang akan berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf, tabel, link, gambar, dll. Tag body ini merupakan tag yang memiliki pasangan oleh karena itu tag ini juga wajib ditutup dengan tag penutup </body>. Dan ane yakin sebagian besar waktu kita dalam merancang web akan dihabiskan di dalam tag <body> ini. Karena ini lah yang akan dibaca dan dilihat oleh user yang melihat website kita. Untuk lebih jelas lagi, lihatlah area biru pada gambar dibawah ini, jika penempatan text,gambar atau lainnya di dalam tag <body> di dalam area biru itulah gambar atau teks tampil
Menurut ane untuk pembahasan kali ini tentang stuktur HTML cukup sederhana dan selesai. Sebuah halaman web bisa memiliki ratusan bahkan ribuan baris, yang ditulis dengan berbagai tag HTML.
Salam Indonesia Hebat
Tidak ada komentar:
Posting Komentar