Struktur Dasar HTML
Dalam perkembangannya, penyajian dokumen web yang lebih menarik akan ditangani oleh CSS (Cascade Style Sheet). Generasi HTML pun telah memasuki versi HTML 5.
Tag dan Elemen
Tag pada HTML merupakan suatu keyword yang dimulai tag pembuka dan tag penutup seperti yang diperlihatkan oleh gambar.1 dibawah ini:
 |
| Gambar.1 Tag dan Elemen HTML |
Pada gambar diatas terdapat tag <h1>...</h1> yang berfungsi sebagai heading. Secara umum setiap tag berpasangan : memiliki Opening tag (tag pembuka) dan Closing tag (tag penutup). Namun ada juga tag yang tidak memiliki penutup, seperti tag <br> yang berfungsi untuk pindah baris.
Elemen pada HTML merupakan gabungan dari opening tag, closing tag beserta konten yang diapit oleh kedua tag seperti yang ditunjukkan oleh gambar 1 diatas.
Elemen pada HTML merupakan gabungan dari opening tag, closing tag beserta konten yang diapit oleh kedua tag seperti yang ditunjukkan oleh gambar 1 diatas.
Struktur HTML
Untuk memahami struktur sebuah dokumen HTML, perhatikan contoh 1 berikut :Contoh 1 :
<!DOCTYPE html> <html> <head> <title>Struktur Dasar HTML</title> </head> <body> <h1>Dokumen HTML</h1> <p align="center">Dokumen HTML yang biasa disebut webpage telah mengalami perkembangan yang begitu pesat.</p> </body> </html>
DOCTYPE
Tag <!DOCTYPE> mendefinisikan jenis dokumen HTML versi keberapa. Pertama kali yang akan dibaca oleh sebuah browser web adalah tag <!DOCTYPE>. Pada contoh diatas kita mendeklarasikan HTML5.
Jika kita ingin menggunakan HTML versi.4.01 Strict, maka DOCTYPE terlihat seperti berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML
Tag <html>..</html> disebut juga root element, tempat melekatnya beberapa tag lain.Dalam tag ini terdapat tag head dan tag body.HEAD
Tag <head>..</head> berisikan informasi metada dokumen web itu sendiri atau berkomunikasi dengan suatu resource seperti sytle dan script. Yang paling umum kita jumpai, tag <title>...<title> yang berada diantara <head>...</head> seperti yang ditunjukkan oleh Contoh 1. Selain tag title, pada head dapat mengandung tag seperti:
base
<!DOCTYPE html> <html> <head> <title>Contoh Base</title> <base href="http://www.namadomain.com/nama_folder/" /> </head> <body> <p><a href="about.html">Halaman</a> ini akan melakukan link ke http://www.namadomain.com/nama_folder/about.html.</p> <div><img src="logo.jpg"/></div> <p> Image logo berada pada http://www.namadomain.com/nama_folder/logo.jpg.</p> </body> </html>
<!DOCTYPE html > <html> <head> <title>Contoh link pada head</title> <link rel="stylesheet" href="css/layout.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script> </head> <body> <div class ="wrapper col0"> <div id="header"> <div id="logo"> <img src="images/logo.jpg"> <p>Detailed Techonology Center</p> </div> </div> </div> </body> </html>
style
<!DOCTYPE html > <html> <head> <title>Contoh style pada head</title> <style type="text/css"> body { color:red; } </style> </head> <body> <p>Detailed Techonology Center</p> </body> </html>
meta
<!DOCTYPE html > <html> <head> <title>Contoh meta pada head</title> <!-- Defining the charset in HTML4 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- In HTML5 --> <meta charset="utf-8"> </head> <body> <p>Detailed Techonology Center</p> </body> </html>
