Struktur Dasar HTML lengkap beserta penjelasannya
Hallo sobat Dunia Virtual. Pada Artikle kali ini saya akan memberikan wawasan mengenai struktur dasar pada HTML.
Apa saja yang terdapat di dalam sebuah HTML? Cus simak penjelasan berikut.
Struktur dasar pada HTML sederhana, didalam sebuah HTML harus ada elemen atau tag sebagai berikut:
1. <!DOCTYPE> - untuk menunjukkan versi html
2. <html> - Wadah utama untuk halaman HTML
3. <head> - Wadah untuk informasi header halaman
4. <title> - Judul halaman
5. <body> - Bagian utama halaman
sebelum tag pembuka <html> , haruslah ada sebuah tag XHTML yang berisi penjelasan pilihan XML ,tag ini harus berisi deklarasi DOCTYPE yang menunjukkan versi XHTML mana yang akan digunakan.
Nah Selanjutnya saya akan menjelaskan masing-masing tag tersebut satu per satu. Silahkan simak penjelasannya berikut.
Elemen <html>
Elemen <html> adalah elemen yang memuat seluruh dokumen HTML. Setiap dokumen HTML harus memiliki satu <html> dan setiap dokumen harus diakhiri dengan tag penutup </html>.
Dua elemen berikut ini adalah contoh dari anak elemen <html>:
•<Head>
•<Body>
Dengan demikian, tag < HTML > diawal dan akhir yang berfungsi sebagai wadah semua tag HTML lain yang Anda gunakan untuk mendeskripsikan halaman Web.
Elemen <head>
Elemen <head> hanyalah wadah untuk semua elemen header lainnya. Elemen head selalu terlihat di atas sebagai judul sebuah website. Tag head tertulis setelah tag pembuka HTML.
Setiap tag <head> harus berisi tag <title> untuk menunjukkan judul dokumen/website, biasanya juga berisi kombinasi elemen elemen untuk menambah sesuatu yang ingin di tampilkan. elemen elemen tersebut adalah sebagai berikut:
1. Tag <base> digunakan untuk membuat url "dasar" untuk semua tautan di halaman.
2. Tag <object> digunakan untuk menyertakan gambar, objek JavaScript, animasi Flash, file MP3, film QuickTime, dan komponen halaman lainnya.
3. Tag <link> digunakan untuk menautkan ke dokumen/ website lain.
4. Tag <style> digunakan untuk memasukkan kode CSS di dalam dokumen.
5. Tag <script> digunakan untuk memasukkan JAVAScript atau VBScript di dalam dokumen.
6. Tag <meta> mencakup informasi tentang dokumen seperti kata kunci dan deskripsi, yang sangat membantu untuk aplikasi pencarian.
Contoh:
Berikut adalah contoh tag kepala.
<head>
<title>HTML Basic tags</title>
<meta name="Keywords" content="HTML, Web Pages" />
<meta name="description" content="HTML Basic Tags" />
<base href="http://www.tutorialspoint.com" />
<link rel="stylesheet" type="text/css" href="tp.css" />
<script type="text/javascript">
_uacct = "UA-232293";
urchinTracker();
</script>
</head>
Elemen <title>
Untuk menjelaskan tentang apa websitemu anda hatus memberikan sebuah judul. Anda dapat menuliskan judul dalam tag <title>. Elemen ini adalah anak dari elemen <head>. Ini digunakan dalam beberapa cara:
Tag Ini ditampilkan di bagian paling atas jendela browser.
Ini digunakan sebagai nama default untuk bookmark di browser seperti IE dan Netscape.
Tag Ini digunakan oleh mesin pencari yang menggunakan kontennya untuk membantu mengindeks halaman.
Oleh karena itu penting untuk menggunakan judul yang benar-benar menggambarkan isi situs Anda. Elemen <title> hanya boleh berisi teks untuk judul dan tidak boleh mengandung elemen lain.
Contoh:
Berikut adalah contoh penggunaan tag judul.
<head>
<title>HTML Basic tags</title>
</head>
Elemen <body>
Elemen <body> muncul setelah elemen <head> dan berisi bagian utama dari halaman Web yang sebenarnya Anda lihat di jendela browser utama, yang terkadang disebut sebagai konten isi.
Elemen <body> dapat berisi apa saja mulai dari beberapa paragraf di bawah judul hingga tata letak yang lebih rumit yang berisi formulir dan tabel.
Contoh:
Berikut adalah contoh penggunaan tag tubuh.
<body>
<p>This is a paragraph tag.</p>
</body>
Menyimpulkan kesemuanya.
Sekarang jika kita akan menempatkan semua tag ini bersama-sama, itu akan membentuk dokumen HTML lengkap sebagai berikut:
<html>
<head>
<title>HTML Basic tags</title>
<meta name="Keywords" content="HTML, Web Pages" />
<meta name="description" content="HTML Basic Tags" />
<base href="http://www.tutorialspoint.com" />
<link rel="stylesheet" type="text/css" href="tp.css" />
<script type="text/javascript">
_uacct = "UA-232293";
urchinTracker();
</script>
</head>
<body>
<p>This is a paragraph tag.</p>
</body>
</html>
Dan itulah struktur sederhana dari sebuah HTML. Gimana mudah bukan. Akan jauh lebih mudah jika langsung anda praktekan. Selamat mencoba.