Struktur dasar dokumen HTML - Revision history

Onnowpurbo at 23:11, 6 April 2025

2025-04-06T23:11:58Z

Onnowpurbo at 23:10, 6 April 2025

2025-04-06T23:10:10Z

Onnowpurbo at 23:09, 6 April 2025

2025-04-06T23:09:31Z

Onnowpurbo at 23:08, 6 April 2025

2025-04-06T23:08:50Z

Onnowpurbo at 23:07, 6 April 2025

2025-04-06T23:07:35Z

Onnowpurbo: Created page with "HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat dan merancang halaman web. Setiap dokumen HTML memiliki struktur dasar yang terdiri dari be..."

2025-04-05T04:01:45Z

Created page with "HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat dan merancang halaman web. Setiap dokumen HTML memiliki struktur dasar yang terdiri dari be..."

New page

HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat dan merancang halaman web. Setiap dokumen HTML memiliki struktur dasar yang terdiri dari beberapa elemen penting. Berikut penjelasan mengenai struktur dasar tersebut beserta contohnya:

'''1. Deklarasi Tipe Dokumen (DOCTYPE)'''

Baris pertama dalam dokumen HTML adalah deklarasi tipe dokumen yang memberi tahu browser versi HTML yang digunakan. Untuk HTML5, deklarasinya adalah:

<!DOCTYPE html>

'''2. Elemen `<html>`'''

Semua konten HTML berada di dalam elemen `<html>`, yang menandai awal dan akhir dokumen HTML.

<html>
...
</html>

'''3. Elemen `<head>`'''

Bagian `<head>` berisi informasi meta tentang dokumen, seperti judul halaman, link ke stylesheet, dan metadata lainnya.

<head>
<title>Judul Halaman</title>

</head>

'''4. Elemen `<title>`'''

Di dalam `<head>`, elemen `<title>` menentukan judul halaman yang akan ditampilkan di tab browser.

<title>Judul Halaman</title>

'''5. Elemen `<body>`'''

Bagian `<body>` berisi semua konten yang akan ditampilkan kepada pengguna, seperti teks, gambar, tautan, dan elemen lainnya.

<body>

</body>

'''Contoh Lengkap Struktur Dasar HTML:'''

Berikut adalah contoh lengkap dari struktur dasar dokumen HTML:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Struktur Dasar HTML</title>
</head>
<body>
<h1>Selamat Datang di Halaman Web Saya</h1>
<p>Ini adalah paragraf pertama di halaman web saya.</p>
</body>
</html>

'''Penjelasan Contoh:'''

* '''`<!DOCTYPE html>`''': Mendeklarasikan bahwa dokumen ini menggunakan HTML5.
* '''`<html>`''': Elemen root yang membungkus seluruh konten HTML.
* '''`<head>`''': Berisi informasi meta tentang dokumen.
* '''`<title>`''': Menentukan judul halaman yang muncul di tab browser.
* '''`<body>`''': Berisi konten utama yang ditampilkan di halaman web.
* '''`<h1>`''': Elemen heading tingkat 1, biasanya digunakan untuk judul utama.
* '''`<p>`''': Elemen paragraf untuk teks.

Memahami struktur dasar HTML adalah langkah awal yang penting dalam pengembangan web. Dengan memahami elemen-elemen dasar ini, Anda dapat mulai membangun halaman web yang terstruktur dengan baik dan mudah dipahami.

==Pranala Menarik==

* [[Web Programming]]

@@ Line 62: / Line 62: @@
 '''Penjelasan Contoh:'''
-* '''<!DOCTYPE html>''': Mendeklarasikan bahwa dokumen ini menggunakan HTML5.
+<pre>
-* '''<html>''': Elemen root yang membungkus seluruh konten HTML.
+ <!DOCTYPE html> : Mendeklarasikan bahwa dokumen ini menggunakan HTML5.
-* '''<head>''': Berisi informasi meta tentang dokumen.
+ <html>  : Elemen root yang membungkus seluruh konten HTML.
-* '''<title>''': Menentukan judul halaman yang muncul di tab browser.
+ <head>  : Berisi informasi meta tentang dokumen.
-* '''<body>''': Berisi konten utama yang ditampilkan di halaman web.
+ <title> : Menentukan judul halaman yang muncul di tab browser.
-* <pre>'''<h1>''': Elemen heading tingkat 1, biasanya digunakan untuk judul utama.</pre>
+ <body>  : Berisi konten utama yang ditampilkan di halaman web.
-* '''<p>''': Elemen paragraf untuk teks.
+ <h1>    : Elemen heading tingkat 1, biasanya digunakan untuk judul utama.
 Memahami struktur dasar HTML adalah langkah awal yang penting dalam pengembangan web. Dengan memahami elemen-elemen dasar ini, Anda dapat mulai membangun halaman web yang terstruktur dengan baik dan mudah dipahami.

@@ Line 67: / Line 67: @@
 * '''<title>''': Menentukan judul halaman yang muncul di tab browser.
 * '''<body>''': Berisi konten utama yang ditampilkan di halaman web.
-* '''<pre><h1></pre>''': Elemen heading tingkat 1, biasanya digunakan untuk judul utama.
+* <pre>'''<h1>''': Elemen heading tingkat 1, biasanya digunakan untuk judul utama.</pre>
 * '''<p>''': Elemen paragraf untuk teks.

@@ Line 67: / Line 67: @@
 * '''<title>''': Menentukan judul halaman yang muncul di tab browser.
 * '''<body>''': Berisi konten utama yang ditampilkan di halaman web.
-* '''<h1>''': Elemen heading tingkat 1, biasanya digunakan untuk judul utama.
+* '''<pre><h1></pre>''': Elemen heading tingkat 1, biasanya digunakan untuk judul utama.
 * '''<p>''': Elemen paragraf untuk teks.

@@ Line 58: / Line 58: @@
   </body>
   </html>
-<\pre>
+</pre>
 '''Penjelasan Contoh:'''
-* '''`<!DOCTYPE html>`''': Mendeklarasikan bahwa dokumen ini menggunakan HTML5.
+* '''<!DOCTYPE html>''': Mendeklarasikan bahwa dokumen ini menggunakan HTML5.
-* '''`<html>`''': Elemen root yang membungkus seluruh konten HTML.
+* '''<html>''': Elemen root yang membungkus seluruh konten HTML.
-* '''`<head>`''': Berisi informasi meta tentang dokumen.
+* '''<head>''': Berisi informasi meta tentang dokumen.
-* '''`<title>`''': Menentukan judul halaman yang muncul di tab browser.
+* '''<title>''': Menentukan judul halaman yang muncul di tab browser.
-* '''`<body>`''': Berisi konten utama yang ditampilkan di halaman web.
+* '''<body>''': Berisi konten utama yang ditampilkan di halaman web.
-* '''`\<h1\>`''': Elemen heading tingkat 1, biasanya digunakan untuk judul utama.
+* '''<h1>''': Elemen heading tingkat 1, biasanya digunakan untuk judul utama.
-* '''`<p>`''': Elemen paragraf untuk teks.
+* '''<p>''': Elemen paragraf untuk teks.
 Memahami struktur dasar HTML adalah langkah awal yang penting dalam pengembangan web. Dengan memahami elemen-elemen dasar ini, Anda dapat mulai membangun halaman web yang terstruktur dengan baik dan mudah dipahami.