Pembelajaran HTML 03 Pengenalan Struktur Dasar
Pada artikel ketiga yang membahas html ini, saya akan sedikit menyingung mengenai perbandingan antara html 5 dengan html versi sebelumnya serta saya akan menjelaskan mengenai fungsi-fungsi dari beberapa tag yang sering digunakan. Bagi kamu yang belum membaca artikel sebelumnya mengenai Pembelajaran HTML 02 Struktur Dasar Tag Atribur dan Element bisa lanngsung dicek sebagai bahan dan dasar pembelajaranmu.
1. File halo.html
Kamu bisa melihat file halo.html dibawah ini dan coba kamu perhatikan sourcode atau kodingannya, sebagai berikut ini :
<!DOCTYPE html> <!--- Perhatikan kode ini --><html lang="en"><head><meta charset="UTF-8"> <!--- Perhatikan kode ini --><meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--- Perhatikan kode ini --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--- Perhatikan kode ini --><title>Alodospem | Pembelajaran HTML 03 Pengenalan Struktur Dasar</title></head><body><h1>Belajar HTML Pemula</h1><p>Helo Dunia</p></body></html>
Kamu perhatikan bahwa rata-rata tag diatas itu memiliki pasangan seperti <body> dan </body>, <title> dan </title> dan sebagainya. Hanya saya untuk tag yang saya berikan komentar <!--- Perhatikan kode ini --> baik itu <!DOCTYPE html> dan <meta charset="UTF-8"> tidak memiliki pasangan sama sekali alias jomblo. Baiklah saya coba bahas satu persatu ya dari paling atas
DTD: Document Type Declaration
Kamu lihat kembali pada baris pertama file halo.html diatas, terdapat tag <!DOCTYPE html>. Tag yang dibuat khusus ini dikenal dengan sebutan DTD (Document Type Declaration) atau doctype. DTD berfungsi sebagai penyedian informasi web browser tentang aturan penulisan dari suatu dokumen. DTD itu sendiri berasal dari sistem SGML (bahasa markup dimana HTML berasal). Di dalam SGML, setiap dokumen harus berisi penjelasan mengenai tipe dan jenisnya, dan harus ditulis pada baris pertama.
Sebelum HTML5 dirilis, dalam proses penulisan DTD di dalam HTML sangat panjang dan sangat sulit untuk dihafal. Sebagai contoh, berikut adalah DTD untuk HTML 4.01:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Kode diatas adalah untuk html 4, sedangkan untuk saat ini terutama pada artikel pembelajaran ini berfokus kepada html 5 yang tentunya dari segi kepraktisan jauh lebih praktis ketimbang dengan html dibawahnya (seperti contoh script pada file helo.html diatas sudah menggunakan html5).
Pengembang HTML5 (organisasiWHATWG) memberikan sebuah dampak bahwa HTML5 akan sepenuhnya terlepas dari aturan SMGL. Yang berarti, bahwa HTML5 tidak lagi bagian dari SMGL, dan merupakan bahasa markup yang sepenuhnya berdiri sendiri. Sehingga, penulisan DTD sudah tidak lagi diperlukan.
Hanya saja, dalam hal penghapusan DTD dari HTML terkendala dengan sebuah mekanisme di dalam web browser yang dinamakan quirks mode.
Quirks mode adalah sebuah proses dalam menampilkan sebuah tampilan pada browser ketika kode html tersebut tidaklah standar. Biasanya, halaman tersebut berasal dari situs lawas atau sudah tua.
Untuk membedakan apakah sebuah halaman web termasuk standar atau tidak, web browser akan melihat apakah di dalam dokumen terdapat DTD atau tidak. Jika tidak ditemukan, web browser akan tampil dalam quirks mode.
Ketika sebuah dokumen di proses dalam quirks mode, web browser akan membuat beberapa perlakuan khusus. Misalnya, menampilkan web dengan tampilan yang berbeda. Ini akan menjadi masalah karena desain web yang telah dirancang bisa jadi berantakan. Sebagai web developer, sedapat mungkin kita harus menghindari hal ini.
Pihak WHATWG kemudian mencari solusi dengan membuat DTD sesingkat mungkin agar web browser tidak masuk ke dalam quirks mode. Caranya adalah dengan menggunakan penulisan DTD: <!DOCTYPE html>. Dengan demikian, web browser tetap menggunakan mode normal yang dinamakan Standards Compliance Mode.
Posisi DTD juga harus ditulis pada baris paling awal. Beberapa web browser (terutama IE versi awal) akan masuk ke dalam quirks mode jika ditemukan ada karakter lain sebelum penulisan DTD (walaupun itu adalah sebuah spasi).
2. Penjelasan Jenis-jenis Tag
Tag <html>
Tag html yang saya jelaskan ini adalah html 5 dikarekan setelah penulisan DTD, struktur halaman HTML kemudian diikuti dengan tag <html>. Coba kamu perhatikan bahwa tag <html> akan menggurung semua kode-kode HTML lainnya.
Tag pembuka <html> berada di posisi barus kedua atas setelah <!DOCTYPE html>, dan tag penutup </html> berada di baris paling akhir dari kode HTML. Seluruh tag HTML lain harus berada di dalam tag ini.
Di dalam tag <html>, bisa diletakkan atribut lang. Atribut ini diisi dengan dua digit kode bahasa yang akan digunakan untuk isi website. Sebagai contoh, jika kita membuat website dengan bahasa indonesia, bisa menulis tag <html> sebagai: <html lang="id">. Atau <html lang="en">jika akan membuat website dengan bahasa inggris.
Atribut lang atau singkatan dari language (bahasa) ini sepenuhnya opsional (boleh ditulis, boleh juga tidak). Tetapi kamu nantinya akan sering menemukan atribut ini, apalagi buat kamu yang suka download tamplate html gratis biasanya akan ada jenis penulis atribut lang. Untuk daftar lengkap kode langnya bisa kamu cek sendiri di wikipedia.
Tag <head>
Tag <head> berfungsi sebagai "penampung" berbagai tag yang umumnya tidak akan terlihat dalam web browser. Tag-tag di dalam bagian <head> berfungsi untuk memberikan informasi tambahan mengenai halaman yang sedang diproses, atau menyediakan referensi ke file lain (seperti file CSS atau JavaScript). Beberapa tag HTML lain yang biasa terdapat pada bagian <head> adalah: <meta>, <title>, dan <link>.
Tag <meta>
Tag <meta>merupakan singkatan dari metadata. Metadata adalah data yang berisi informasi tentang suatu dokumen. Tag <meta> berisi informasi/instruksi mengenai halaman HTML yang sedang dijalankan. Salah satu tag <meta> yang terdapat dalam struktur diatas adalah <meta charset="UTF-8">. Tag ini akan menginstruksikan web browser untuk menggunakan karakter set UTF-8 dalam memproses halaman HTML.
Tag <title>
Tag <title> merupakan satu dari sedikit tag yang bisa terlihat di web browser yang berada pada bagian <head>. Sesuai dengan namanya, tag ini berfungsi untuk membuat title dari sebuah halaman. Title adalah teks yang ditampilkan pada bagian atas jendela web browser. Selain itu, jika kita men-bookmark sebuah halaman, title inilah yang akan menjadi nama bookmark tersebut.
Tag <body>
Tag <body> berfungsi sebagai penampung (container) dari seluruh kode HTML yang tampil di dalam web browser. Disinilah terletak 90% tag-tag HTML yang akan kita tulis nantinya.
Tag <h1> dan <p>
Tag <h1> merupakan singkatan dari "header1", yang digunakan untuk membuat struktur judul di dalam HTML. HTML menyediakan 6 tipe header, mulai dari <h1>, <h2>, sampai dengan <h6>. Tag <p> adalah singkatan dari "paragraf" yang digunakan untuk membuat paragraf. Saya akan membahas tag <h1> dan tag <p> dengan lebih detail dalam bab selanjutnya.
Pembelajaran Selanjutnya?
Hore tak disangka ternyata sudah 3 artikel membahas mengenai pembelajaran html 5 ini. Bagi kamu yang masih semangat belajarnya bisa nih cek pembelajaran selanjutnya mengenai :
Refrensi
Pembaca yang baik selalu meninggalkan jejak atau hanya sekedar reaction pada kolom komentar, agar saya sebagai penulis juga semangat dalam melanjutkan artikel ini. Berkomentarlah dengan baik dan sopan dan saling menghargai
Artikel Terbaru
Programmer Harus Tahu Aplikasi Yang Cocok Buat Skripsi Bertema Pelayanan Kesehatan
13 May 2023
Pembelajaran PHP 03 Pengenalan Text Editor 2023
29 April 2023
Woow Gaji Programmer Bisa Sampai 30 Juta Per Bulan
23 April 2023
Biaya Geospasial 2023 Google Maps
16 April 2023Pembelajaran CSS 09 Inline Internal dan External
06 May 2022.png)
Pembelajaran CSS 08 Membuat Komentar
06 May 2022