Sama seperti surat resmi yang ditulis secara terstuktur mulai dari pembagian tanggal dokumen, nomor surat, perihal, dan lain sebagainya, maka demikian pulalah HTML. Baik menggunakan HTML 4 maupun HTML 5, Anda harus memahami bagaimana struktur script dibuat. Website yang tampil cantik di jendela browser ataupun website yang amat sederhana, juga harus mengikuti taat asas struktur HTML. Sebab jika tidak mengikuti struktur tersebut, script HTML yang Anda buat tidak akan mampu menciptakan output yang memuaskan di jendela browser.
Di dalam bab ini, Anda akan belajar memahami bagaimana struktur HTML dibuat. Tag-tag yang akan dipelajari di bagian ini pun belumlah kompleks. Anda baru akan memahami bagaimana urut-urutan tag disusun dalam struktur yang rapi.
1. Menentukan Document Type
Pertama-tama, saat bekerja dengan HTML 5, tulislah terlebih dahulu tag satu baris seperti berikut:
Lantas apa tujuan penulisan DOCTYPE di atas? Tag ini sebenarnya lebih merupakan jaminan bagi Anda bahwa tag-tag yang Anda buat sepenuhnya berjenis HTML murni, tanpa ada embel-embel tag lain yang mempengaruhinya.
Ketika browser menemui tag <!DOCTYPE HTML> ini, maka browser akan mengenali script tersebut sebagai 100% HTML.
Apakah ada bentuk DOCTYPE yang lain ketika menulis script HTML? Ketika menggunakan HTML 4.01 Anda bahkan harus menulis tag DOCTYPE secara lengkap seperti ini:
2. Membuat HTML, Head, dan Body
Setelah membuat tag DOCTYPE, maka selanjutnya Anda menyusun struktur berikut terdiri dari HTML, HEad, dan BOdy. Caranya adalah dengan menulis tag <html> ... </html>, <head> ... </head>, dan <body> ... </body>. Lihat tag-tag tersebut. Berbeda dengan DOCTYPE yang bersifat tunggal, penulisan tag untuk HTML, Head, dan Body haruslah bersifat two-sided tag. Jadi harus ada tag pembuka dan penutup. Dengan demikian terkesan, tag-tag tersebut sebagai "pembungkus" tag-tag lainnya yang ada di struktur lebih bawah.
Script HTML anda pada dasarnya terpecah menjadi dua bagian, yaitu Head dan Body. Bagian Head ini mempengaruhi penulisana page title atau judul halam website yang nanti akan muncul di jendela browser bagian atas (di area title bar) dan juga di taskbar..
Bagian Head ini juga kerap diisi dengan informasi-informasi teknis yang tidak disajikan di jendela browser, misalnya saja tag <meta> atau javaScript.
Bagian kedua adalah Body yang ditandai dengan kehadiaran two-sided tag <body> ... </body>. Semua informasi yang tampak di jendela browser diletakkan di dalam bagian Body ini.
Apapun yang anda buat di dalam "bingkai" <body>...</body> akan muncul di jendela browser. Pertama-tama, marilah kita mempelajari bagaimana caranya membuat teks yang muncul di jendela browser. Untuk menghadirkan teks, kita hadirkan terlebih dahulu paragraf yang diciptakan menggunakan two sided tag <p> ... </p>.
3.1 Menggunakan <br>
Setiap kali kita menulis teks di antara tag <p> dan </p>, teks itu akan dianggap sebagai paragraf baru. Salah satu ciri khas paragraf antara lain, terdapat sebuah jarak spasi antara satu paragraf dengan paragraf berikutnya. Jarak tersebut membuat satu paragraf dengan paragraf lainnya menjadi mudah terbaca dan gampang dibedakan.
Namun jika Anda membuat alamat, poin-poin sederhana, atau data diri di websitr Anda, maka jarak tersebut membuat desain Anda menjadi kurang menarik.
Untuk membuat desain menggunakan <br> misalkan seperti ini caranya:
Pada latihan sebelumnya kita telah memanfaatkan tag <title> yang secara umum fungsinya adalah untuk menampilakn judul pada page yang kita buat. Judul itu muncul di title bar browser dan juga di ikon aplikasi pada taskbar. Apabila anda ingin agar para pengunjung mudah menemukan page anda saat mereka melakukan multi tasking, maka manfaatkanlah tag <title> dengan sebaik-baiknya.
Menulis judul pada page sangatlah sederhana. Cukup tuliskan seperti ini saja:
Dalam prakteknya, kelompok <head> memiliki fungsi lain. Misalnya saja, kita bisa meletakkan tag <meta>. Ada beberapa fungsi tag <meta>. Yang paling umum adalah untuk mendata keyword (kata kunci) yang berkaitan erat dengan situs yang sedang Anda desain. Dengan begitu, search engine akan mudah menemukan situs Anda.
Bagaimana membuat kata kunci itu? Di sini, kita memanfaatkan atribut yang ada di dalam tag <meta>. Atribut itu adalah name dan content. Contohnya sebagai berikut.
Pada contoh di atas, kiata mencatatkan kata kunci yang berkaitan dengan page yang sedang kita desain. Kalau anda sendang mendesain page tentang toko hewan, maka kata kuncinya pun akan tampak berbeda.
Selain untuk mencatat kata kunci yang berkaitan dengan page yang sedang anda desain, tag <meta> juga memiliki fungsi lain. Misalnya saja, anda bisa menredirect (mengarahkan atau membawa) pengunjung ke situs lain. Sebagai contoh, anda bisa memanfaatkan tag ini untuk membawa pengunjung ke situs baru yang telah anda desain untuk menggantikan situs yang lama. Menulisnya seperti ini:
Di dalam bab ini, Anda akan belajar memahami bagaimana struktur HTML dibuat. Tag-tag yang akan dipelajari di bagian ini pun belumlah kompleks. Anda baru akan memahami bagaimana urut-urutan tag disusun dalam struktur yang rapi.
1. Menentukan Document Type
Pertama-tama, saat bekerja dengan HTML 5, tulislah terlebih dahulu tag satu baris seperti berikut:
<!DOCTYPE HTML>Penulisan tag DOCTYPE di atas memang unik dan spesifik. Pertama, Anda harus mengawalinya dengan tanda seru "!". Umumnya, tag-tag HTML 5 dilengkapi dengan tanda seru seperti DOCTYPE di atas. Lantas perbedaan kedua adalah penggunaan huruf kapital pada penulisan DOCTYPE. Sebaliknya, Anda menulis DOCTYPE menggunakan huruf kapital seluruhnya. Sedangkan untuk tag-tag lain dalam script HTML, tidak perlu harus menggunakan kapital semuanya.
Lantas apa tujuan penulisan DOCTYPE di atas? Tag ini sebenarnya lebih merupakan jaminan bagi Anda bahwa tag-tag yang Anda buat sepenuhnya berjenis HTML murni, tanpa ada embel-embel tag lain yang mempengaruhinya.
Ketika browser menemui tag <!DOCTYPE HTML> ini, maka browser akan mengenali script tersebut sebagai 100% HTML.
Apakah ada bentuk DOCTYPE yang lain ketika menulis script HTML? Ketika menggunakan HTML 4.01 Anda bahkan harus menulis tag DOCTYPE secara lengkap seperti ini:
<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html14/loose.dtd>Atau kalian Anda bekerja dengan menggunakan XHTML, Anda harus menuliskan seperti ini:
<!DOCTYPE HTML PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>Namun apabila Anda bekerja dengan HTML 5, penulisan DOCTYPE cukuplah sederhana seperti contoh di awal.
2. Membuat HTML, Head, dan Body
Setelah membuat tag DOCTYPE, maka selanjutnya Anda menyusun struktur berikut terdiri dari HTML, HEad, dan BOdy. Caranya adalah dengan menulis tag <html> ... </html>, <head> ... </head>, dan <body> ... </body>. Lihat tag-tag tersebut. Berbeda dengan DOCTYPE yang bersifat tunggal, penulisan tag untuk HTML, Head, dan Body haruslah bersifat two-sided tag. Jadi harus ada tag pembuka dan penutup. Dengan demikian terkesan, tag-tag tersebut sebagai "pembungkus" tag-tag lainnya yang ada di struktur lebih bawah.
Script HTML anda pada dasarnya terpecah menjadi dua bagian, yaitu Head dan Body. Bagian Head ini mempengaruhi penulisana page title atau judul halam website yang nanti akan muncul di jendela browser bagian atas (di area title bar) dan juga di taskbar..
Bagian Head ini juga kerap diisi dengan informasi-informasi teknis yang tidak disajikan di jendela browser, misalnya saja tag <meta> atau javaScript.
Bagian kedua adalah Body yang ditandai dengan kehadiaran two-sided tag <body> ... </body>. Semua informasi yang tampak di jendela browser diletakkan di dalam bagian Body ini.
Catatan :
Apakah struktur <html>, <head> dan <body> harus selalu kita buat dalam penyusunan HTML? Seringkali keberadaan tag-tag di atas bersifat ipsional, Namun akan lebih baik kalau Anda menyusunnya menggunakan tag-tag di atas supata tampak rapi dan profesional. Anda harus yakin bahwa struktur yang Anda buat mudah dipahami oleh oran lain.3. Membuat Paragraf Baru
Apapun yang anda buat di dalam "bingkai" <body>...</body> akan muncul di jendela browser. Pertama-tama, marilah kita mempelajari bagaimana caranya membuat teks yang muncul di jendela browser. Untuk menghadirkan teks, kita hadirkan terlebih dahulu paragraf yang diciptakan menggunakan two sided tag <p> ... </p>.
Catatan:
Apabila Anda bekerja dengan HTML, lupa menulis tag </p> bukanlah menjadi masalah serius.Sekarang, tulislah script di bawah ini menggunakan Notwpad dan simpanlah dalam bentuk file dengan paragraf.html
Uji coba script di atas menggunakan browser dan lihatlah bagaimana browser menyajikan paragraf tersebut.
<!DOCTYPE HTML>
<html><head><title>HTML Pertamaku</title></head>
<body><h1> Selamat Datang Dunia HTML</h1><p>Akhirnya saya bisa belajar HTML.</p><p>Dengan ini saya dapat menggunakan tag paragraf dan dapat membuat paragraf baru di web.</p></body></html>
3.1 Menggunakan <br>
Setiap kali kita menulis teks di antara tag <p> dan </p>, teks itu akan dianggap sebagai paragraf baru. Salah satu ciri khas paragraf antara lain, terdapat sebuah jarak spasi antara satu paragraf dengan paragraf berikutnya. Jarak tersebut membuat satu paragraf dengan paragraf lainnya menjadi mudah terbaca dan gampang dibedakan.
Namun jika Anda membuat alamat, poin-poin sederhana, atau data diri di websitr Anda, maka jarak tersebut membuat desain Anda menjadi kurang menarik.
Untuk membuat desain menggunakan <br> misalkan seperti ini caranya:
<p>Selamat datang di dunia HTML<br>4. Membuat Judul Page dan Metatags
Dengan ini saya dapat menggunakan tag paragraf dan dapat membuat paragraf baru di web</p>
Pada latihan sebelumnya kita telah memanfaatkan tag <title> yang secara umum fungsinya adalah untuk menampilakn judul pada page yang kita buat. Judul itu muncul di title bar browser dan juga di ikon aplikasi pada taskbar. Apabila anda ingin agar para pengunjung mudah menemukan page anda saat mereka melakukan multi tasking, maka manfaatkanlah tag <title> dengan sebaik-baiknya.
Menulis judul pada page sangatlah sederhana. Cukup tuliskan seperti ini saja:
Seperti terlihat pada contoh di atas, kita meletakkan two sided tag <title> di kelompok <head> ... </head> dan bukannya di kelompok <body>...</body> .
<head>
<title>HTML Pertamaku</title>
</head>
Dalam prakteknya, kelompok <head> memiliki fungsi lain. Misalnya saja, kita bisa meletakkan tag <meta>. Ada beberapa fungsi tag <meta>. Yang paling umum adalah untuk mendata keyword (kata kunci) yang berkaitan erat dengan situs yang sedang Anda desain. Dengan begitu, search engine akan mudah menemukan situs Anda.
Bagaimana membuat kata kunci itu? Di sini, kita memanfaatkan atribut yang ada di dalam tag <meta>. Atribut itu adalah name dan content. Contohnya sebagai berikut.
<meta name="keywords" content="HTML5, website, pemrograman">
Pada contoh di atas, kiata mencatatkan kata kunci yang berkaitan dengan page yang sedang kita desain. Kalau anda sendang mendesain page tentang toko hewan, maka kata kuncinya pun akan tampak berbeda.
Selain untuk mencatat kata kunci yang berkaitan dengan page yang sedang anda desain, tag <meta> juga memiliki fungsi lain. Misalnya saja, anda bisa menredirect (mengarahkan atau membawa) pengunjung ke situs lain. Sebagai contoh, anda bisa memanfaatkan tag ini untuk membawa pengunjung ke situs baru yang telah anda desain untuk menggantikan situs yang lama. Menulisnya seperti ini:
<meta http-equiv="refresh" content="5;url=http://jastrial.blogspot.com/">Pada script di atas, pengunjung akan dipindahkan ke situs jastrial.blogspot.com setelah 5 detik.
