Scribd
Unggah
21 tayangan

Tag HTML

Diunggah oleh

hackermodz99999
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
21 tayangan

Tag HTML

Diunggah oleh

hackermodz99999
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 6

TAG HTML: FUNGSI DAN CONTOH LENGKAPNYA

Overview
Tag HTML adalah alat yang membentuk kata-kata dan kalimat, membantu kita mengkomunikasikan
pesan visual ke pengunjung situs. Dari menyusun teks dan gambar sampai menciptakan interaksi yang
dinamis, tag HTML ber ndak sebagai bahan baku yang mengubah konsep menjadi kenyataan dalam
tampilan browser.
Saat memasuki dunia pengembangan web, salah satu konsep kunci yang akan kamu temui
adalah tag HTML.
Dalam membuat website, tag HTML adalah elemen pen ng untuk membangun struktur dan tampilan
konten halaman web. Tag mengatur elemen-elemen seper judul, paragraf, gambar, dan video.
Se ap elemen dalam halaman web didefinisikan menggunakan tag HTML tertentu. Memahami
penggunaan tag HTML ini krusial menjadi dasar dari tampilan dan struktur konten pada halaman web.
Mari kita selami lebih dalam!

Penger an HTML Tag


Tag HTML adalah elemen dasar yang digunakan untuk membangun struktur dan format konten di
halaman web.
Bayangkan kamu sedang membaca sebuah buku. Ada judul, paragraf, gambar, dan mungkin juga
ku pan di dalamnya. Di dunia web, se ap komponen tersebut direpresentasikan dengan tag HTML
tertentu.
Sebagai contoh, judul direpresentasikan dengan tag < h1 > sampai < h6 >, sementara paragraf
dengan tag < p >. Ada banyak juga tag lainnya yang membantu kita mengatur dan menampilkan
konten web lebih rapi.

Fungsi Tag HTML


Tag HTML bukanlah sekedar kode yang ditulis di dalam dokumen HTML. Sebaliknya, tag HTML
memiliki fungsi yang sangat pen ng dalam pembuatan laman web. Berikut beberapa fungsi utama
dari tag HTML:
 Struktur dokumen: seper yang dijelaskan oleh FreeCodeCamp, tag HTML membantu dalam
menyusun struktur dokumen HTML. Mulai dari header sampai footer, se ap bagian dari
halaman web dikelilingi oleh tag tertentu. Hal ini membantu browser dalam menafsirkan dan
menampilkan konten secara tepat.
 Format konten: tag HTML dak hanya menyusun, tapi juga memformat konten.
Misalnya, tag seper < b > untuk tebal, < i > untuk miring, dan < u > untuk bergaris bawah
membantu kita untuk menonjolkan bagian tertentu dari teks.
 Menyisipkan media: tag HTML seper < img > dan < video > memungkinkan kita untuk
menyertakan gambar atau video dalam laman web. Fungsi ini membuat laman web menjadi lebih
interak f dan menarik.
 Pembuatan link: tag HTML juga ada yang digunakan untuk membuat hyperlink, sehingga kamu
dapat berpindah dari satu halaman ke halaman lain. Dengan fungsi ini, web menjadi dinamis dan
saling terhubung.
 Integrasi dengan CSS dan JavaScript: tag HTML juga berguna sebagai jembatan dengan CSS dan
JavaScript. Kita bisa menambahkan gaya dan fungsi interak f ke halaman web. Proses ini juga
membantu dalam meningkatkan user experience.
 Aksesibilitas: menurut TutorialsTonight, dengan menggunakan tag seper < alt > pada gambar,
kita dapat menjadikan laman web lebih mudah diakses oleh orang-orang yang memiliki
keterbatasan.
 Search Engine Op miza on (SEO): tag HTML membantu mesin pencari seper Google dalam
mengenali dan menilai konten laman web, sehingga memungkinkan laman tersebut muncul dalam
hasil pencarian yang relevan.

1. Tag HTML Dasar


Berikut sejumlah tag HTML dasar yang sering digunakan dalam pengembangan web:

Contoh penggunaan kode:


<!DOCTYPE html>
<html>
<head>
< tle>Contoh Web Sederhana</ tle>
</head>
<body>
<h1>Selamat Datang di Web Sederhana Saya</h1>
<p>Ini adalah contoh penggunaan tag HTML dasar.</p>
<a href="h ps://www.example.com">Klik di sini</a> untuk mengunjungi situs contoh.
<br>
<p>Jika Anda ingin mempelajari lebih lanjut,
silakan kunjungi <a href="h ps://www.learnhtml.com">LearnHTML</a>.</p>
</body>
</html>

2. Tag HTML untuk Forma ng


Tag HTML untuk forma ng dipakai untuk mengatur tampilan teks dan konten lain di
halaman web. Berikut beberapa tag forma ng yang umum digunakan:

Contoh penggunaan kode:


<!DOCTYPE html>
<h2>Penawaran Spesial</h2>
<p>Kini tersedia promo <strong>diskon 20%</strong> untuk semua produk!</p>
<p>Jangan lewatkan kesempatan ini untuk memperoleh perangkat berkualitas.</p>
<p><u>Berlaku hingga akhir bulan ini.</u></p>
</body>
</html>

3. Tag HTML untuk Membuat Image


Dalam HTML, tag yang khusus digunakan untuk menyisipkan gambar adalah tag < img
>. Tag ini memungkinkan kamu menambahkan gambar dalam berbagai format (seper JPEG,
PNG, GIF) ke dalam halaman web.
Berikut penjelasan tentang bagaimana tag ini digunakan:

Tag HTML untuk Gambar:


Tag < img > adalah tag kosong. Ar nya, tag ini dak memiliki tag penutup. Atribut-atribut
utama yang digunakan bersamanya adalah:

Contoh penggunaan kode:


<!DOCTYPE html>
<p>Temukan teknologi masa depan dalam genggaman Anda.</p>
<h2>Produk Terbaru</h2>
<div class="product">
<img src="phone.jpg" alt="Smartphone Futura X1"
width="300" height="200" tle="Futura X1">
<h3><a href="product1.html">Futura X1 Smartphone</a></h3>
<p>Alami masa depan dengan Futura X1 yang baru.</p>
</div>
</body>
</html>

4. Tag HTML untuk Membuat Link


Dalam HTML, tag yang digunakan untuk membuat link (tautan) adalah tag < a >. Tag ini
memungkinkan kamu menghubungkan satu halaman dengan halaman lain, baik dalam situs
yang sama maupun ke website lain.
Berikut cara menggunakannya:
Tag HTML untuk link: < a >
Tag < a > memiliki beberapa atribut utama yang dapat digunakan, seper :

Contoh penggunaan kode:


<!DOCTYPE html>
<h2>Ar kel Terbaru</h2>
<div class="ar cle">
<h3><a href="ar cle1.html" target="_blank" rel="nofollow">
Inovasi Terbaru di Dunia Smartphone</a></h3>
<p>Temukan fitur-fitur revolusioner dalam smartphone masa depan.</p>
<p class="read-more"><a href="ar cle1.html">Baca selengkapnya...</a></p>
</div>
</body>
</html>

5. Tag HTML untuk Membuat List


Tag HTML untuk membuat list memungkinkan kamu menyusun informasi dalam format yang
terstruktur dan mudah dibaca. Ada ga jenis list utama dalam HTML, yaitu da ar berurutan,
da ar tak berurutan. dan da ar deskripsi.
Berikut tag yang digunakan untuk membuat masing-masing jenis list tersebut:
Da ar berurutan (ordered list)

Contoh penggunaan kode:


<!DOCTYPE html>
<h2>Top 5 Berita Terpopuler</h2>
<ol>
<li><a href="news1.html">Revolu on X: Smartphone Masa Depan</a></li>
<li><a href="news2.html">Inovasi Baterai Quantum: Masa Depan Energi</a></li>
<li><a href="news3.html">Kota Pintar: Transformasi Urban</a></li>
<li><a href="news4.html">Kecerdasan Buatan Mengubah Industri</a></li>
<li><a href="news5.html">Era 5G: Masa Depan Komunikasi</a></li>
</ol>
</body>
</html>

Da ar tak berurutan (unordered list)


Contoh penggunaan kode:
<!DOCTYPE html>
<h2>Tren Teknologi Terkini</h2>
<ul>
<li><a href="trend1.html">Kecerdasan Buatan Mendominasi</a></li>
<li><a href="trend2.html">Transportasi Otonom Merambah Kota</a></li>
<li><a href="trend3.html">Era Internet of Things Telah Dimulai</a></li>
<li><a href="trend4.html">Kota Pintar dan Penggunaan Data</a></li>
</ul>
</body>
</html>

Da ar deskripsi (descrip on list)

Contoh penggunaan kode:


<!DOCTYPE html>
<h2>Is lah Teknologi Populer</h2>
<dl>
<dt>Ar ficial Intelligence</dt>
<dd>Ilmu komputer yang fokus pada penciptaan
sistem yang memiliki kecerdasan seper manusia.</dd>
<dt>Internet of Things</dt>
<dd>Konsep menghubungkan perangkat di seluruh dunia melalui
internet untuk berkomunikasi dan berbagi data.</dd>
<dt>Blockchain</dt>
<dd>Teknologi penyimpanan data terdesentralisasi yang digunakan dalam
kriptokurensi dan aplikasi lainnya.</dd>
</dl>
</body>
</html>

6. Tag HTML untuk Membuat Form and Input


Berikut beberapa tag HTML yang sering digunakan saat membuat form dan input dalam
desain web:

Contoh penggunaan kode:


<!DOCTYPE html>
<h1>Penda aran Workshop Desain Grafis</h1>
<form ac on="submit.php" method="post">
<label for="name">Nama Lengkap:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="experience">Pengalaman:</label>
<input type="radio" id="beginner" name="experience" value="beginner">
<label for="beginner">Pemula</label>
<input type="radio" id="intermediate" name="experience" value="intermediate">
<label for="intermediate">Menengah</label>
<input type="radio" id="advanced" name="experience" value="advanced">
<label for="advanced">Mahir</label>

<label for="comment">Harapan dari Workshop:</label>


<textarea id="comment" name="comment" rows="4" cols="50"></textarea>

<input type="submit" value="Da ar">


</form>
</body>
</html>

7. Tag HTML untuk Membuat Table


Berikut tag yang akan kamu gunakan saat membuat tabel:

Contoh penggunaan kode:


<h2>Da ar Produk Teknologi</h2>
<table>
<thead>
<tr>
<th>No</th>
<th>Nama Produk</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a href="product1.html">Smartphone Quantum X</a></td>
<td>Rp5.999.000</td>
</tr>
<tr>
<td>2</td>
<td><a href="product2.html">Laptop Infinity Z</a></td>
<td>Rp12.499.000</td>
</tr>
<tr>
</tbody>
</table>
</body>
</html>

8. Tag HTML untuk Style dan Programming


Tag HTML untuk style dan programming membantu kamu dalam mengatur tampilan dan
fungsi dari halaman web. Berikut beberapa tag pen ng dalam kategori ini:

Tag untuk style

Contoh penggunaan kode:


<html>
<head>
< tle>TechNews - Berita Teknologi</ tle>
<link rel="stylesheet" href="styles.css">
<style>
body{font:Arial,sans-serif;background:#f5f5f5;margin:0;padding:0;}
h1{color:#333;text-align:center;margin:20px 0;}
.ar cle{background:#fff;padding:20px;margin:10px;border-radius:
5px;box-shadow:0 2px 5px rgba(0,0,0,.1);}
</style>
</head>
<body>
<h1>Selamat Datang di TechNews</h1>
<div class="ar cle">
<h2>Judul Ar kel Pertama</h2>
<p>Isi ar kel pertama tentang perkembangan terbaru di dunia teknologi.</p>
</div>
<div class="ar cle">
<h2>Judul Ar kel Kedua</h2>
<p>Ar kel kedua membahas inovasi terbaru dalam industri gadget.</p>
</div>
</body>
</html>

Tag untuk programming

Contoh penggunaan kode:


<!DOCTYPE html>
<html>
<head>
< tle>TechBlog - Blog Teknologi</ tle>
<link rel="stylesheet" href="styles.css">
<script>
func on t() { var e = document.getElementById("comments");
e.style.display = "none" === e.style.display ? "block" : "none"; }
</script>
</head>
<body>
<h2>Judul Ar kel</h2>
<p>Isi ar kel tentang teknologi terbaru.</p>
<bu on onclick="t()">Komentar</bu on>
<div id="comments" style="display:none">
<h3>Komentar</h3>
<p>Komentar 1: Ar kel ini informa f!</p>
<p>Komentar 2: Saya suka ar kel ini!</p>
</div>
</body>
</html>

FAQ (Frequently Ask Ques on)


Apa itu atribut dalam Tag HTML?
Atribut adalah informasi tambahan yang bisa kamu tambahkan dalam tag HTML untuk mengontrol
perilakunya. Sebagai contoh, atribut src dalam tag < img > dipakai untuk menentukan sumber gambar.

Apa bedanya tag HTML dengan element HTML?


Tag HTML adalah kode yang digunakan untuk membuka dan menutup elemen. Di sisi lain, elemen
HTML adalah seluruh unit yang terdiri dari tag pembuka, konten, dan tag penutup. Contoh dari
elemen adalah < p >Ini adalah paragraf< /p >, dengan < p > sebagai tag pembuka dan < /p
> sebagai tag penutup.
Apa perbedaan tag < b >, < strong >, < i >, dan < em >?
Dalam HTML, keempat tag tersebut digunakan untuk memberikan penekanan pada teks, namun
masing-masing memiliki perbedaan dalam penggunaan dan makna.
 < b > dan < i >: secara visual, tag ini dipakai untuk mengubah style teks. Tag < b > akan
membuat teks menjadi tebal (bold), sementara tag < i > membuat teks menjadi miring (italic).
Penggunaan tag ini lebih ke arah styling saja dan dak menambah makna seman k atau
penekanan khusus pada konten tersebut.
 < strong > dan < em >: sama seper < b > dan < i >, tag < strong > akan membuat teks tebal
dan < em > akan membuat teks miring. Namun, berbeda dengan sebelumnya,
penggunaan tag ini juga menekankan makna seman k. Elemen yang diberi tag < strong
> atau < em > biasanya menjadi ide pokok dalam konten. Browser atau teknologi asis f lainnya
dapat menginterpretasikan penekanan ini dalam cara yang berbeda.

Penutup
Tag HTML adalah alat yang membentuk kata-kata dan kalimat, membantu kita mengkomunikasikan
pesan visual ke pengunjung situs. Dari menyusun teks dan gambar sampai menciptakan interaksi yang
dinamis, tag HTML ber ndak sebagai bahan baku yang mengubah konsep menjadi kenyataan dalam
tampilan browser.

Anda mungkin juga menyukai