Pada awal perjalanan pembuatan halaman web, salah satu konsep dasar yang penting untuk dipahami adalah tag HTML. Tag merupakan elemen kunci dalam struktur sebuah halaman web karena mereka memberikan instruksi kepada browser tentang bagaimana menampilkan konten.
Pengertian
Tag HTML merupakan elemen dasar yang digunakan untuk membangun struktur dan format konten di halaman web. Mereka memberikan instruksi kepada browser tentang bagaimana menampilkan berbagai jenis konten, seperti teks, gambar, tautan, dan lainnya. Setiap tag HTML terdiri dari sebuah tanda kurung siku (< >) yang mengelilingi nama tag, dan biasanya ada tag penutup yang menandakan akhir dari elemen (misalnya, </nama_tag>). Beberapa tag, seperti tag untuk gambar atau tautan, mungkin tidak memerlukan tag penutup.
Selain tag, HTML juga menggunakan atribut untuk memberikan informasi tambahan tentang elemen tertentu. Atribut didefinisikan di dalam tag dan memberikan nilai spesifik kepada elemen. Misalnya, dalam tag gambar (<img>), atribut src digunakan untuk menentukan lokasi atau URL gambar yang akan ditampilkan. Contoh lainnya adalah atribut href dalam tag tautan (<a>) yang menentukan URL yang akan dituju ketika tautan diklik.
Pembagian
Di bawah ini, saya akan membagi beberapa tag HTML berdasarkan fungsi yang sering digunakan dalam pembuatan halaman web:
- Tag Dasar
- Tag untuk formatting
- Tag untuk membuat gambar
- Tag untuk membuat list
- Tag untuk styling dan programing
- Tag untuk membuat form
Penjelasan berdasarkan pembagian
Tag Dasar
Tentang tag-tag dalam kategori Tag Dasar, berikut adalah penjelasannya:
<html>:
Digunakan untuk mendifinisikan seluruh dokumen HTML.
<html> <!-- Didalam Tag HTML ada tag <head> dan <body> --> <head></head> <body></body> </html>
<head>:
Berisi informasi meta tentang dokumen, seperti judul, link ke file CSS, dan lainnya.
<head> <!-- Konten dari elemen <head> --> </head>
<title>:
Dipakai dalam elemen <head> untuk menetapkan judul halaman web yang akan ditampilkan pada tab browser. Penting untuk diingat bahwa dalam satu dokumen HTML, hanya akan diterima satu tag <title> saja.
<head> <title>Pejuang Pemrograman</title> </head>
<body>:
Merupakan bagian utama dari web, di mana berisi semua konten yang ingin ditampilkan pada audiens atau pengunjung website.
<body> <!-- konten dari body --> </body>
<h1> - <h6>:
Digunakan untuk judul dan subjudul, dengan <h1> sebagai judul utama dan <h6> sebagai judul terkecil.
<body> <h1>Tag & Atribut HTML</h1> </body>
<p>:
Berfungsi untuk paragraf teks.
<body> <h1>Tag & Atribut HTML</h1> <p>Pada awal perjalanan pembuatan halaman web, salah satu konsep dasar yang penting untuk dipahami adalah tag HTML.</p> </body>
<a>:
Digunakan untuk membuat hyperlink ke halaman web lain.
<body> <h1>Tag & Atribut HTML</h1> <p>Pada awal perjalanan pembuatan halaman web, salah satu konsep dasar yang penting untuk dipahami adalah tag HTML.</p> <a href="https://alamat-url">Selengkapnya</a> </body>
<br>:
Digunakan untuk membuat jeda baris dalam teks.
<body> <h1>Tag & Atribut HTML</h1> <p>Pada awal perjalanan pembuatan halaman web, salah satu <br> konsep dasar yang penting untuk dipahami <br> adalah tag HTML.</p> <a href="https://alamat-url">Selengkapnya</a> </body>
<hr>:
Dipakai untuk membuat garis horizontal. Biasanya sering digunakan sebagai pemisah konten.
<body> <h1>Tag & Atribut HTML</h1> <hr> <p>Pada awal perjalanan pembuatan halaman web, salah satu <br> konsep dasar yang penting untuk dipahami <br> adalah tag HTML. </p> <a href="https://alamat-url">Selengkapnya</a> </body>
<div>:
Merupakan tag untuk mengelompokkan elemen lainnya, sehingga memungkinkan kontrol yang lebih baik terhadap style dan layout. <div> adalah block-level element yang akan membuat baris baru saat dibuat.
<body> <div> <h1>Tag & Atribut HTML</h1> <!-- implementasi tag <br> didalam elemen paragraf --> <p>Pada awal perjalanan pembuatan halaman web, salah satu <br> konsep dasar yang penting untuk dipahami <br> adalah tag HTML.</p> <a href="https://alamat-url">Selengkapnya</a> </div> </body>
<span>:
Tag untuk mengelompokkan elemen lainnya, tetapi sebagai inline element. Tidak akan membuat baris baru saat dibuat.
<body> <div> <h1>Tag & Atribut HTML</h1> <p>Pada awal perjalanan pembuatan halaman web, salah satu <br> konsep dasar yang penting untuk dipahami <br> adalah tag HTML.</p> <span>Senin, 13 Mei 2024</span> <a href="https://alamat-url">Selengkapnya</a> </div> </body>
Tag untuk membuat gambar
Tag untuk membuat gambar memiliki beberapa atribut, berikut adalah penjelasannya:
src:
Atribut ini menentukan URL dari gambar yang ingin ditampilkan. URL bisa berupa alamat web lengkap atau alamat relatif ke file dalam struktur folder situs web kamu.
<!-- alamat lengkap web --> <img src="https://contoh.com/gambar.jpg"> <!-- alamat relatif --> <img src="gambar.jpg">
alt:
Menyediakan teks alternatif yang akan ditampilkan jika gambar tidak dapat dimuat. Teks ini juga membantu dalam aksesbilitas, memungkinkan untuk mendeskripsikan gambar kepada audiens tunanetra.
<!-- contoh penggunaan atribut `alt` --> <img src="https://contoh.com/gambar.jpg" alt="Deskripsi Gambar">
width dan height:
Digunakan untuk menentukan lebar dan tinggi gambar. Kamu bisa menentukan ukuran dalam piksel atau presentase.
<!-- contoh penggunaan atribut `width` dan `height` --> <img src="https://contoh.com/gambar.jpg" alt="Deskripsi Gambar" width="300" height="200">
title:
Menambahkan teks tooltip yang muncul ketika audiens mengarahkan kursor ke gambar.
<!-- contoh penggunaan atribut `title` --> <img src="https://contoh.com/gambar.jpg" alt="Deskripsi Gambar" title="Contoh">
Tag untuk membuat list
Tentang tag-tag dalam kategori Tag untuk membuat list, berikut adalah penjelasannya:
Daftar berurutan (ordered list)
<ol>:
Digunakan untuk membuat daftar berurutan, di mana setiap item diberi nomor. dan <li> digunakan dalam <ol> untuk menentukan setiap item dalam daftar.
<ol> <li>Item Satu</li> </ol>
Daftar tak berurutan (unordered list)
<ul>:
Digunakan untuk membuat daftar tidak berurutan, di mana setiap item diberi nomor. dan <li> digunakan dalam <ul> untuk menentukan setiap item ditandai simbol.
<ul> <li>Item Satu</li> </ul>
Tag untuk styling dan prgramming
Tentang tag-tag untuk styling dan programming, berikut adalah penjelasannya:
Tag untuk styling
<style>:
Mendifinisikan CSS dalam dokumen HTML.
<style> <!-- perintah css --> </style>
<link>:
Menghubungkan file CSS eksternal ke halaman web.
<link rel="stylesheet" href="style.css">
Tag untuk programming
<script>:
Digunakan untuk menulis atau menghubungkan kode JavaScript, sehingga membantu kamu menambahkan interaktivitas dan logika ke halaman web. Kamu bisa menulis kode JavaScript langsung di dalam tag ini atau menggunakan atribut src untuk menghubungkan file JavaScript eksternal.
<!-- contoh langsung menulis kode js di dalam dokumen html --> <script> <!-- kode javascript --> </script> <!-- contoh menghubungkan file js eksternal --> <script src="script.js"></script>
<noscript>:
Membantu menampilkan pesan khusus jika browser pengunjung tidak mendukung atau menonaktifkan JavaScript.
<noscript>Browser anda tidak mendukung JavaScript!</noscript>
<meta>:
Meskipun bukan khusus untuk pemrograman, tag ini sangat penting dalam menyediakan metadata tentang halaman, seperti deskripsi, kata kunci, dan hal lain yang berkaitan dengan SEO.
<head> <meta charset="UTF-8"> <meta name="description" content="Tag & Atribut HTML"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="Pejuang Pemrograman"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
Tag untuk membuat form
Tag <form> adalah elemen dasar dalam HTML yang digunakan untuk membuat formulir interaktif di halaman web. biasanya di gunakan pendaftaran atau login pada aplikasi website:
<form>:
Mengelompokkan elemen-elemen terkait dalam forum.
<form action="/action_page.php" method="get"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form>
<input type="text">:
Kotak input teks.
<form action="/login" method="post"> <label for="username">Username</label> <input type="text" id="username" name="username"><br><br> </form>
<input type="password">:
Kotak input untuk memasukkan teks namun disembunyikan (biasanya digunakan input password pada fitur login).
<form action="/login" method="post"> <label for="user">Username</label> <input type="text" id="user" name="user"><br><br> <label for="userpassword">Password</label> <input type="password" id="userpassword" name="userpassword"><br><br> </form>
<input type="radio">:
Pilihan tunggal dalam sekumpulan opsi.
<form action="/login" method="post"> <label for="user">Username</label> <input type="text" id="user" name="user"><br><br> <label for="userpassword">Password</label> <input type="password" id="userpassword" name="userpassword"><br><br> <input type="radio" id="remember" name="remember" value="true"> <label for="remember">Remember My Account</label><br><br> </form>
<input> untuk checkbox:
Pilihan ganda pada sekumpulan opsi.
<input type="checkbox" id="bahasa1" name="bahasa1" value="JavaScript"> <label for="vehicle1">Saya Bisa JavaScript</label><br> <input type="checkbox" id="bahasa2" name="bahasa2" value="Python"> <label for="vehicle1">Saya Bisa Python</label><br> <input type="checkbox" id="bahasa3" name="bahasa3" value="C"> <label for="vehicle1">Saya Bisa C</label><br>
<input type="submit">:
Tombol untuk mengirimkan form. (seperti tombol login dan sign up)
<form action="/login" method="post"> <label for="user">Username</label> <input type="text" id="user" name="user"><br><br> <label for="userpassword">Password</label> <input type="password" id="userpassword" name="userpassword"><br><br> <input type="radio" id="remember" name="remember" value="true"> <label for="remember">Remember My Account</label><br><br> <input type="submit" value="Login"> </form>
<textarea>:
Input teks multi-baris, seperti komentar atau pesan.
<textarea rows="4" cols="50"> Pejuang Pemrograman tempat belajar koding lengkap bahasa Indonesia. </textarea>
<select> &
Dropdown list dengan pilihan list.
<select> <option value="satu">Pilihan Satu</option> <option value="dua">Pilihan Dua</option> <option value="tiga">Pilihan Tiga</option> </select>
<input type="date">:
Memungkinkan audiens memilih tanggal dari kalender.
<label for="ttl">Tanggal Lahir:</label> <input type="date" id="ttl" name="ttl">
<input type="email">:
Input alamat email dengan validasi format.
<label for="email">Alamat Email:</label> <input type="email" id="email" name="email">
<input type="file">:
Memungkinkan audiens memilih file dari sistem mereka.
<label for="foto">Pilih Foto:</label> <input type="file" id="foto" name="foto">
<label>:
Menambahkan label ke input lain dan meningkatkan aksesbilitas.
<form action="/login" method="post"> <label for="username">Username</label> <input type="text" id="username" name="username"><br><br> </form>