Elemen dan atribut HTML - Revision history

Onnowpurbo: /* 1. Tag HTML */

2025-04-08T04:59:17Z

1. Tag HTML

Onnowpurbo: /* 3. Atribut HTML */

2025-04-06T23:13:51Z

3. Atribut HTML

Onnowpurbo: /* 2. Elemen HTML */

2025-04-06T23:13:36Z

2. Elemen HTML

Onnowpurbo: /* 2. Elemen HTML */

2025-04-06T23:13:19Z

2. Elemen HTML

Onnowpurbo: /* 2. Elemen HTML */

2025-04-06T23:12:58Z

2. Elemen HTML

Onnowpurbo: /* 1. Tag HTML */

2025-04-05T04:16:55Z

1. Tag HTML

Onnowpurbo: Created page with "Dalam pemrograman web, khususnya dalam HTML (HyperText Markup Language), terdapat tiga komponen utama yang perlu dipahami: '''tag''', '''elemen''', dan '''atribut'''. Memahami..."

2025-04-05T04:16:32Z

Created page with "Dalam pemrograman web, khususnya dalam HTML (HyperText Markup Language), terdapat tiga komponen utama yang perlu dipahami: '''tag''', '''elemen''', dan '''atribut'''. Memahami..."

New page

Dalam pemrograman web, khususnya dalam HTML (HyperText Markup Language), terdapat tiga komponen utama yang perlu dipahami: '''tag''', '''elemen''', dan '''atribut'''. Memahami ketiganya akan membantu dalam membangun struktur halaman web yang baik dan fungsional.

==1. Tag HTML==

'''Tag''' adalah penanda yang digunakan untuk memberitahu browser bagaimana suatu konten harus ditampilkan. Tag biasanya ditulis dalam kurung sudut (`< >`) dan umumnya berpasangan: tag pembuka dan tag penutup. Tag pembuka menandai awal elemen, sedangkan tag penutup menandai akhir elemen dengan tambahan garis miring (`/`) sebelum nama tag.

'''Contoh:'''

<p>Ini adalah sebuah paragraf.</p>

Pada contoh di atas, `<p>` adalah tag pembuka untuk paragraf, dan `</p>` adalah tag penutupnya.

Beberapa tag bersifat '''self-closing''' atau tidak memerlukan tag penutup, seperti `<img>` untuk menampilkan gambar dan `<br>` untuk pindah baris.

'''Contoh:'''

<img src="gambar.jpg" alt="Deskripsi gambar">
<br>

==2. Elemen HTML==

'''Elemen''' merupakan keseluruhan dari tag pembuka, isi, dan tag penutup. Elemen dapat berisi teks, elemen lain (disebut sebagai nested elements), atau bisa juga kosong (seperti elemen self-closing).

'''Contoh elemen dengan teks:'''

<h1>Judul Utama</h1>

Dalam contoh ini, `<h1>` adalah tag pembuka, `Judul Utama` adalah isi elemen, dan `</h1>` adalah tag penutup.

'''Contoh elemen bersarang:'''

<div>
<p>Paragraf dalam div.</p>
</div>

Di sini, elemen `<div>` berisi elemen `<p>`, menunjukkan bahwa elemen dapat bersarang satu sama lain.

==3. Atribut HTML==

'''Atribut''' memberikan informasi tambahan tentang suatu elemen dan dituliskan di dalam tag pembuka. Atribut terdiri dari pasangan nama dan nilai, dengan format `nama="nilai"`.

'''Contoh penggunaan atribut:'''

<a href="https://www.contoh.com" target="_blank">Kunjungi Situs</a>

Pada contoh di atas:

* `<a>` adalah tag untuk membuat hyperlink.
* `href="https://www.contoh.com"` adalah atribut yang menentukan URL tujuan.
* `target="_blank"` adalah atribut yang menentukan bahwa link akan dibuka di tab atau jendela baru.

Beberapa atribut umum dalam HTML meliputi:

* '''`href`''': Menentukan URL tujuan pada tag `<a>`.
* '''`src`''': Menentukan sumber file pada tag seperti `<img>` atau `<script>`.
* '''`alt`''': Memberikan teks alternatif pada tag `<img>`, berguna jika gambar tidak dapat ditampilkan.
* '''`style`''': Menambahkan gaya CSS langsung pada elemen.
* '''`id`''': Memberikan identitas unik pada elemen.
* '''`class`''': Mengelompokkan elemen dengan kelas yang sama untuk styling atau scripting.

'''Contoh penggunaan atribut lainnya:'''

<img src="logo.png" alt="Logo Perusahaan" width="200" height="100">

Di sini, tag `<img>` memiliki atribut `src` untuk menentukan lokasi gambar, `alt` untuk deskripsi gambar, serta `width` dan `height` untuk menentukan ukuran gambar.

Dengan memahami tag, elemen, dan atribut dalam HTML, Anda dapat membangun struktur dokumen web yang terorganisir dan mudah dipahami, baik oleh browser maupun oleh pengembang lain.

==Pranala Menarik==

* [[Web Programming]]

@@ Line 7: / Line 7: @@
 '''Contoh:'''
   <p>Ini adalah sebuah paragraf.</p>
-Pada contoh di atas, `<p>` adalah tag pembuka untuk paragraf, dan `</p>` adalah tag penutupnya.
+Pada contoh di atas, `< p >` adalah tag pembuka untuk paragraf, dan `< /p >` adalah tag penutupnya.
-Beberapa tag bersifat '''self-closing''' atau tidak memerlukan tag penutup, seperti `<img>` untuk menampilkan gambar dan `<br>` untuk pindah baris.
+Beberapa tag bersifat '''self-closing''' atau tidak memerlukan tag penutup, seperti `< img >` untuk menampilkan gambar dan `< br >` untuk pindah baris.
 '''Contoh:'''
   <img src="gambar.jpg" alt="Deskripsi gambar">
   <br>
 ==2. Elemen HTML==

@@ Line 69: / Line 69: @@
 Di sini, tag `<img>` memiliki atribut `src` untuk menentukan lokasi gambar, `alt` untuk deskripsi gambar, serta `width` dan `height` untuk menentukan ukuran gambar.
 Dengan memahami tag, elemen, dan atribut dalam HTML, Anda dapat membangun struktur dokumen web yang terorganisir dan mudah dipahami, baik oleh browser maupun oleh pengembang lain.
 ==Pranala Menarik==
 * [[Web Programming]]

@@ Line 38: / Line 38: @@
 </pre>
-Di sini, elemen `<div>` berisi elemen `<p>`, menunjukkan bahwa elemen dapat bersarang satu sama lain.
+Di sini, elemen `< div >` berisi elemen `< p >`, menunjukkan bahwa elemen dapat bersarang satu sama lain.
 ==3. Atribut HTML==

@@ Line 28: / Line 28: @@
 </pre>
-Dalam contoh ini, `<h1>` adalah tag pembuka, `Judul Utama` adalah isi elemen, dan `</h1>` adalah tag penutup.
+Dalam contoh ini, `< h1 >` adalah tag pembuka, `Judul Utama` adalah isi elemen, dan `</ h1 >` adalah tag penutup.
 '''Contoh elemen bersarang:'''

@@ Line 24: / Line 24: @@
 '''Contoh elemen dengan teks:'''
   <h1>Judul Utama</h1>
+</pre>
 Dalam contoh ini, `<h1>` adalah tag pembuka, `Judul Utama` adalah isi elemen, dan `</h1>` adalah tag penutup.
@@ Line 31: / Line 32: @@
 '''Contoh elemen bersarang:'''
   <div>
       <p>Paragraf dalam div.</p>
   </div>
 Di sini, elemen `<div>` berisi elemen `<p>`, menunjukkan bahwa elemen dapat bersarang satu sama lain.