HTML - Lanjut
Pada post sebelumnya (HTML – Awal), sudah diperkenalkan beberapa tag HTML yang biasa digunakan dalam suatu halaman website. Pada post kali ini, akan diperkenalkan cara menggunakan tag-tag tersebut dengan lebih detil.
A. Tag <html>…</html>, Tag <head>…</head>, dan Tag <body>…</body>
Tag-tag ini merupakan kerangka utama dalam pembuatan suatu halaman website. Tag <html>…</html> menjadi fondasi bagi halaman website yang dibuat. Tag <head>…</head> menjadi wadah dimana informasi dasar mengenai halaman website ditampung. Tag <body>…</body> menjadi tempat bernaungnya konten/isi dari suatu halaman website. Cara penulisannya :
<html>
<!-fondasi halaman website->
<head>
<!-informasi dasar halaman website->
</head>
<body>
<!-konten halaman website->
</body>
</html>
B. Tag <title>…</title>
Tag ini digunakan untuk memberikan judul dari suatu halaman website. Tag ini diletakkan didalam naungan tag <head>…</head>. Ingat! Judul halaman website berbeda dengan judul konten. Judul suatu halaman website biasanya terlihat pada baris judul atau tab dari suatu web browser. Contoh penulisan :
<head>
<title>Judul Halaman Website</title>
</head>
C. Tag <p>…</p>
Tag ini merupakan tag yang digunakan untuk membuat paragraph didalam tubuh (body) suatu halaman website. Untuk mengatur tipe paragraph yang diinginkan (left, right, center, justify), kita dapat menambahkan atribut align didalam tag <p>…</p>. Contoh penulisan :
<body>
<p align=”justify”>Contoh paragraph dengan tipe pengaturan justify</p>
</body>
D. Tag <font>…</font>
Tag ini berfungsi untuk mengatur jenis, ukuran, maupun warna huruf yang ada didalam naungan tag tersebut. Contoh penulisan :
<body>
<p align=”justify”>
<font face=”Comic Sans MS” size=”12” color=”red”>Contoh tulisan dengan font Comic Sans MS berwarna merah berukuran 12pt</font>
</p>
</body>
E. Tag <br>
Tag ini digunakan untuk berganti baris. Fungsinya sama dengan menekan tombol Enter pada text editor. Contoh penulisan:
<body>
<p align=”justify”>
<font face=”Comic Sans MS” size=”12” color=”red”>
Baris 1<br>
Baris 2<br>
Baris 3
</font>
</p>
</body>
F. Tag <a>…</a>
Tag ini digunakan untuk membuat link ke dokumen atau website lainnya. Setiap tulisan yang diapit/dinaungi oleh tag ini akan dianggap link oleh web browser. Untuk membuat link ke halaman website lain, kita gunakan atribut href. Contoh penulisan :
<body>
<p align=”justify”>
<font face=”Comic Sans MS” size=”12” color=”red”>
<a href=”http://www.youtube.com”>Contoh link ke youtube.com</a>
</font>
</p>
</body>
G. Tag <img>
Tag ini digunakan untuk menyisipkan gambar kedalam konten halaman website. Tag ini memiliki beberapa atribut untuk melakukan pengaturan pada gambar yang ingin disisipkan, seperti src (untuk mencari letak file gambar yang ingin disisipkan), border (untuk mengatur tebal bingkai gambar), height (untuk mengatur tinggi gambar), dan width (untuk mengatur lebar gambar). Contoh penulisan:
<body>
<img src=”images/contoh_gambar.png” border=”1” height=”80” width=”90”>
</body>
H. Tag <table>…</table>
Tag ini digunakan untuk membuat table didalam tubuh (body) halaman website. Sebelum hadirnya CSS, tag ini merupakan tag kunci untuk mengatur tata letak konten dari suatu halaman website. Untuk menambahkan baris baru kedalam tabel, kita tambahkan tag <tr>…</tr> didalam naungan tag <table>…</table>. Untuk menambahkan kolom baru kedalam tabel, kita tambahkan tag <td>…</td> didalam naungan tag <tr>…</tr>. Isi dari cell suatu table diletakkan didalam naungan tag <td>…</td>. Contoh penulisan :
<body>
<table>
<tr>
<td>
Baris 1 Kolom 1
</td>
<td>
Baris 1 Kolom 2
</td>
</tr>
<tr>
<td>
Baris 2 Kolom 1
</td>
<td>
Baris 2 Kolom 2
</td>
</tr>
</table>
</body>
0 komentar:
Posting Komentar