PRAKTIK PW : TAG HATML

A. Pendahuluan

HTML (HyperText Markup Language) adalah bahasa dasar yang digunakan untuk membuat halaman web. HTML menggunakan tag (penanda) untuk memberitahu browser cara menampilkan konten.

B. Struktur Dasar HTML

<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Selamat Datang</h1>
    <p>Ini adalah paragraf pertama.</p>
  </body>
</html>

Penjelasan:

<!DOCTYPE html> : Menandakan bahwa ini adalah dokumen HTML5.
<html> : Elemen root dari halaman web.
<head> : Berisi informasi metadata (judul, link CSS, charset, dll).
<title> : Judul halaman yang tampil di tab browser.
<body> : Berisi konten utama yang akan ditampilkan di browser.

C. Jenis-Jenis Tag HTML Penting

1. Tag Heading

Digunakan untuk membuat judul dan subjudul.

<h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Sub-subjudul</h3>

Heading memiliki tingkatan dari <h1> sampai <h6>.

2. Tag Paragraf

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

3. Tag Teks Tambahan

Bold (tebal): <b> atau <strong>
Italic (miring): <i> atau <em>
Garis bawah: <u>
Garis horizontal: <hr>
Baris baru: <br>

<p><strong>Teks tebal</strong> dan <em>teks miring</em></p>

D. Tag Gambar dan Link

1. Menampilkan Gambar

<img src="gambar.jpg" alt="Deskripsi Gambar" width="300">

2. Membuat Link

<a href="https://www.google.com">Kunjungi Google</a>

E. Tag Daftar

1. Daftar Tidak Terurut (Bullet List)

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

2. Daftar Terurut (Angka)

<ol>
  <li>Login</li>
  <li>Input Data</li>
  <li>Logout</li>
</ol>

F. Tag Formulir (Form)

<form action="/submit.php" method="post">
  Nama: <input type="text" name="nama"><br>
  Email: <input type="email" name="email"><br>
  <input type="submit" value="Kirim">
</form>

Form digunakan untuk mengirim data ke server.

G. Tag Tabel

<table border="1">
  <tr>
    <th>No</th>
    <th>Nama</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Budi</td>
  </tr>
</table>

<table> untuk membuat tabel, <tr> untuk baris, <td> untuk kolom, <th> untuk kolom judul.

H. Warna pada Tulisan

Kita bisa memberi warna menggunakan atribut style dengan CSS inline:


<p style="color:red;">Teks ini berwarna merah.</p>
<p style="color:#00ff00;">Teks ini berwarna hijau terang (kode heksadesimal).</p>
<font color="#ee82ee">TEKS BERWARNA</font>

I. Menyisipkan Simbol (Karakter Khusus HTML)

HTML memiliki kode khusus untuk simbol:

Simbol	Kode HTML	Hasil
©	`©`	©
®	`®`	®
&	`&`	&
<	`<`	<
>	`>`	>
♥	`&hearts;`	♥
★	`★`	★

Contoh dalam kode:

<p>Hak Cipta &copy; 2025 SMKN 1 Lelea</p>
<p>Saya ♥ HTML</p>

J. Tulisan Bergerak

Gunakan tag <marquee> (catatan: tidak disarankan untuk produksi modern, tapi tetap bisa digunakan untuk belajar dasar):

<marquee>Selamat Datang di Website Kami</marquee>
<marquee direction="right">Tulisan ke Kanan</marquee>

Tx - Rx