Elemen dan atribut HTML - Revision history

Unknown user: /* 1. Tag HTML */

2025-04-08T04:59:17Z

1. Tag HTML

← Older revision		Revision as of 04:59, 8 April 2025
Line 7:		Line 7:
	'''Contoh:'''		'''Contoh:'''

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

	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:'''		'''Contoh:'''

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

	==2. Elemen HTML==		==2. Elemen HTML==

Unknown user: /* 3. Atribut HTML */

2025-04-06T23:13:51Z

3. Atribut HTML

← Older revision		Revision as of 23:13, 6 April 2025
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.		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.		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==		==Pranala Menarik==

	* [[Web Programming]]		* [[Web Programming]]

Unknown user: /* 2. Elemen HTML */

2025-04-06T23:13:36Z

2. Elemen HTML

← Older revision		Revision as of 23:13, 6 April 2025
Line 38:		Line 38:
	</pre>		</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==		==3. Atribut HTML==

Unknown user: /* 2. Elemen HTML */

2025-04-06T23:13:19Z

2. Elemen HTML

← Older revision		Revision as of 23:13, 6 April 2025
Line 28:		Line 28:
	</pre>		</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:'''		'''Contoh elemen bersarang:'''

Unknown user: /* 2. Elemen HTML */

2025-04-06T23:12:58Z

2. Elemen HTML

← Older revision		Revision as of 23:12, 6 April 2025
Line 24:		Line 24:
	'''Contoh elemen dengan teks:'''		'''Contoh elemen dengan teks:'''

			<pre>
	<h1>Judul Utama</h1>		<h1>Judul Utama</h1>
			</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.
Line 31:		Line 32:
	'''Contoh elemen bersarang:'''		'''Contoh elemen bersarang:'''

			<pre>
	<div>		<div>
	<p>Paragraf dalam div.</p>		<p>Paragraf dalam div.</p>
	</div>		</div>
			</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.

Unknown user: /* 1. Tag HTML */

2025-04-05T04:16:55Z

1. Tag HTML

← Older revision		Revision as of 04:16, 5 April 2025
Line 17:		Line 17:
	<img src="gambar.jpg" alt="Deskripsi gambar">		<img src="gambar.jpg" alt="Deskripsi gambar">
	<br>		<br>


	==2. Elemen HTML==		==2. Elemen HTML==

Unknown user: 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]]