Memahami Dasar HTML : Fondasi Dalam Membangun Situs Web

Dunia Web adalah arena tak terbatas di mana ide dan kreativitas mengalir bebas. Di balik semua itu, terdapat satu bahasa yang menjadi tulang punggung - HTML. Sebelum itu, sudah paham belum tentang apa sih itu HTML?

Apa itu HTML?

HTML merupakan singkatan dari Hyper-Text Markup Language yaitu bahasa (aturan) standar yang digunakan untuk menampilkan teks, gambar, video dan audio ke dalam halaman web yang disimpan dalam sebuah file dengan ekstensi *.html .

Pada HTML dikenal istilah Tag yang diapit oleh notasi kurang dari (<) dan lebih dari (>) seperti <html>, <head>, <body> dan seterusnya. Selain itu, terdapat beberapa tag yang memiliki pasangan ditandai dengan notasi garis miring (/) sebagai tag penutup misalnya </html>.

Mengenal Tag, Atribut, Value dan Element HTML!

Tag

Tag dalam HTML adalah kode yang digunakan untuk menandai atau menentukan jenis dan fungsi dari elemen tertentu dalam dokumen HTML. Tag HTML dimulai dengan tanda kurung siku pembuka (`<`) dan diakhiri dengan tanda kurung siku penutup (`>`). Tag ini memberi tahu browser bagaimana cara menampilkan konten yang terdapat di dalamnya. Sebagai contoh, `<p>` adalah tag untuk menandai awal paragraf teks, dan `</p>` adalah tag untuk menandai akhir paragraf teks. Dengan menggunakan tag, kita dapat mengorganisir dan mengatur struktur konten pada halaman web dengan jelas.

Attribute

Attribute dalam HTML adalah fitur tambahan yang ditempatkan di dalam tag untuk memberikan informasi tambahan atau mengontrol perilaku dari elemen HTML tersebut. Atribut memberikan detail lebih lanjut atau instruksi kepada browser web tentang bagaimana elemen harus ditampilkan atau berperilaku di halaman web. Contohnya adalah attribute `src` dalam tag `<img>` yang menunjukkan lokasi file gambar, atau atribut href dalam tag <a> yang menentukan URL tautan. Dengan menggunakan atribut, Anda dapat memberikan lebih banyak kontrol terhadap elemen-elemen HTML dalam hal tampilan dan fungsi.

Value

Value dalam HTML adalah informasi yang dimasukkan ke dalam suatu atribut untuk menentukan nilai tertentu atau input yang akan digunakan oleh elemen HTML. Misalnya, jika kalian memiliki sebuah kotak input teks, Anda dapat menentukan value awal yang akan ditampilkan di dalam kotak tersebut. Begitu juga, pada elemen-elemen seperti tombol atau checkbox, value menentukan nilai yang akan dikirimkan ke server saat elemen tersebut di-submit atau diaktifkan. Dengan kata lain, "\value memberikan nilai spesifik atau input kepada elemen HTML agar dapat berfungsi sesuai kebutuhan pada halaman web.

Element

Element dalam HTML adalah bagian dasar dari struktur sebuah halaman web yang digunakan untuk menampilkan konten. Setiap elemen HTML diawali dengan sebuah tag pembuka (`<tag>`) dan diakhiri dengan sebuah tag penutup (`</tag>`), kecuali untuk elemen-elemen yang bersifat mandiri seperti gambar atau tautan. Tag tersebut memberi tahu browser bagaimana cara menampilkan konten yang terdapat di dalamnya. Contoh elemen HTML adalah `<p>` untuk menampilkan paragraf teks, `<img>` untuk menampilkan gambar, dan `<a>` untuk membuat tautan ke halaman lain. Dengan menggunakan elemen-elemen ini, kita dapat membuat struktur dan konten yang terorganisir dengan baik di halaman web.

Perbedaan Tag, Attribute, Value, dan Element pada HTML

Mari kita bedah perbedaan antara tag, attribute, nilai (value), dan element dalam HTML :

1. Tag: Tag adalah kode yang mengelilingi teks atau elemen lain dalam HTML, yang menentukan jenis dan fungsi elemen tersebut. Misalnya, `<p>` adalah tag untuk menandai awal paragraf teks.

2. Atribut: Atribut adalah informasi tambahan yang diberikan kepada elemen HTML untuk memberikan detail tambahan atau mengontrol perilaku elemen tersebut. Contohnya, `src` adalah atribut pada tag `<img>` yang menentukan lokasi file gambar.

3. Nilai (Value): Nilai (value) adalah informasi yang dimasukkan ke dalam suatu atribut untuk menentukan nilai tertentu atau input yang akan digunakan oleh elemen HTML. Misalnya, "value" pada tag input menentukan teks awal yang akan ditampilkan di dalam kotak input.

4. Elemen: Elemen adalah gabungan dari tag, atribut, nilai, dan konten di dalamnya. Ini adalah keseluruhan dari apa yang dinyatakan oleh tag pembuka, tag penutup, serta semua informasi tambahan di dalamnya. Sebagai contoh, `<a href="https://www.example.com">Klik di sini</a>` adalah satu elemen yang terdiri dari tag `<a>`, atribut `href`, nilai "Klik di sini", dan konten tautan itu sendiri.

Dengan memahami perbedaan antara tag, atribut, nilai, dan elemen, Kalian akan memiliki dasar yang kuat untuk membangun dan memahami struktur HTML dengan lebih baik.

Macam - Macam Tag pada HTML

Berikut adalah beberapa tag HTML beserta fungsinya, dan termasuk tag untuk tabel (table), form (form), dan tautan (link):

<h1>, <h2>, ... , <h6> : Tag untuk membuat heading atau judul dengan tingkat kepentingan yang berbeda.
<p> : Tag untuk membuat paragraf teks.
<a> : Tag untuk membuat tautan atau hyperlink.
<img> : Tag untuk menampilkan gambar.
<ul> : Tag untuk membuat daftar tak berurutan.
<ol> : Tag untuk membuat daftar terurut.
<li> : Tag untuk menandai setiap item dalam daftar.
<div> : Tag untuk membuat divisi atau bagian dalam dokumen HTML.
<span> : Tag untuk menandai bagian teks atau inline dalam dokumen.
<table> : Tag untuk membuat tabel.
<tr> : Tag untuk menandai baris dalam tabel.
<td> : Tag untuk menandai sel data dalam tabel.
<th> : Tag untuk menandai sel kepala (header) dalam tabel.
<form> : Tag untuk membuat formulir.
<input> : Tag untuk menambahkan kontrol input ke dalam formulir.
<textarea> : Tag untuk menambahkan area teks multiline ke dalam formulir.
<button> : Tag untuk membuat tombol.
<label> : Tag untuk menandai label untuk kontrol formulir.
<select> : Tag untuk membuat dropdown list dalam formulir.
<option> : Tag untuk menandai opsi dalam dropdown list.
<fieldset> : Tag untuk mengelompokkan kontrol formulir yang terkait.
<legend> : Tag untuk memberi judul atau keterangan pada grup kontrol dalam fieldset.
<iframe> : Tag untuk menyematkan dokumen HTML lain ke dalam halaman web.
<b> : Tag untuk membuat teks tebal (deprecated, lebih disarankan menggunakan <strong>).
<i> : Tag untuk membuat teks miring (deprecated, lebih disarankan menggunakan <em>).
<strong> : Tag untuk membuat teks penting atau ditekankan.
<em> : Tag untuk menekankan teks.
<br> : Tag untuk membuat jeda baris.
<hr> : Tag untuk membuat garis horizontal.
<meta> : Tag untuk menyediakan informasi meta-data tentang dokumen HTML.

Setiap tag memiliki fungsinya masing-masing dalam membangun struktur dan konten halaman web.

Contoh Implementasi Tag HTML

Setelah kalian mengetahui tag pada HTML beserta fungsinya, berikut adalah contoh penggunaan dari tag tersebut :

1. Tag <h1> untuk heading atau judul utama :

<h1>Selamat Datang di Website Kami</h1>

2. Tag <img> untuk menampilkan gambar:

3. Tag <a> untuk membuat tautan atau hyperlink :

<a href="https://www.example.com">Klik di sini</a> untuk menuju ke situs web kami.

4. Tag <table>, <tr>, <td> untuk membuat tabel :

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

5. Tag <form>, <input>, <button> untuk membuat formulir dengan tombol :

<label for="email">Email:</label>

<button type="submit">Kirim</button>

</form>

Penggunaan Attribute pada Tag HTML

1. Tag <h1> - <h6> (Heading) :

- class : Menentukan kelas CSS yang akan diterapkan pada elemen.

- id : Memberikan identifikasi unik untuk elemen.

- style : Menentukan gaya CSS langsung untuk elemen.

2. Tag <p> (Paragraf) :

- class

- id

- style

- align (sekarang sudah deprecated, disarankan menggunakan CSS untuk pengaturan perataan teks).

3. Tag <a> (Tautan):

- href : Menentukan URL tautan.

- target : Menentukan di mana halaman tautan akan dibuka (contoh: `_blank` untuk membuka tautan di tab atau jendela baru).

- title : Memberikan judul atau tooltip ketika mouse mengarah ke tautan.

4. Tag <img> (Gambar):

- src : Menentukan lokasi file gambar.

- alt : Memberikan teks alternatif yang akan ditampilkan jika gambar tidak dapat dimuat.

- width : Menentukan lebar gambar dalam piksel.

- height : Menentukan tinggi gambar dalam piksel.

5. Tag <ul> (Daftar Tak Berurutan) :

- class

- id

- style

- type : Menentukan jenis tanda penomoran (contoh: disc, circle, square).

6. Tag <ol> (Daftar Terurut) :

- class

- id

- style

- type

7. Tag <li> (Item Daftar):

- class

- id

- style

- value: Menentukan nilai item dalam daftar terurut.

8. Tag <div> (Divisi):

- class

- id

- style

9. Tag <span> :

- class

- id

- style

10. Tag <table> (Tabel) :

- class

- id

- style

- border : Menentukan ketebalan garis batas tabel.

- cellspacing : Menentukan ruang antara sel-sel tabel.

- cellpadding`: Menentukan ruang dalam sel-sel tabel.

Menggabungkan Baris dan Kolom Table pada HTML

Dalam HTML, untuk menggabungkan baris dan kolom pada tabel, kalian dapat menggunakan attribute rowspan dan colspan di dalam tag <td> atau <th>.

1. rowspan : Atribut ini digunakan untuk menggabungkan sel-sel dalam baris yang berdekatan menjadi satu sel yang lebih besar secara vertikal. Nilai atribut ini menentukan jumlah baris yang akan digabungkan.

2. colspan : Atribut ini digunakan untuk menggabungkan sel-sel dalam kolom yang berdekatan menjadi satu sel yang lebih besar secara horizontal. Nilai atribut ini menentukan jumlah kolom yang akan digabungkan.

Contoh penggunaan atribut rowspan dan colspan dalam tabel HTML :

<table border="1">

<tr>

<th colspan="2">Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td rowspan="2">Baris 1, Kolom 1</td>

<td>Baris 1, Kolom 2</td>

<td>Baris 1, Kolom 3</td>

</tr>

<tr>

<td>Baris 2, Kolom 2</td>

<td>Baris 2, Kolom 3</td>

</tr>

</table>

Dalam contoh di atas, <th colspan="2">Header 1</th> menggabungkan dua kolom pada baris pertama, sedangkan <td rowspan="2">Baris 1, Kolom 1</td> menggabungkan dua baris pada kolom pertama.

Suaraku di Kampus

Cari Blog Ini