DASAR-DASAR HTML
1. Struktur Dokumen HTML
Setiap dokumen HTML harus diawali dengan tag <html> dan diakhiri dengan tag </html>. Tag adalah penanda bagian dokumen html. Jenis-jenis tag misalnya:
a. Tag <head> dan </head> digunakan untuk menyatakan informasi mengenai dokumen html.
b. Tag <title> dan </title> digunakan untuk menambahkan title/judul di title bar web browser.
c. Tag <body> dan </body> digunakan untuk melingkupi semua teks yang terdapat di halaman html.
d. Tag <br> digunakan untuk pergantian baris. e. Tag <p> digunakan untuk pergantian paragraf.
2. Latihan Membuat Dokumen HTML
Petunjuk praktikum: a. Buka program Dreamweaver
b. Simpan File-Save All dokumen html dengan nama “latihan1.html” c. Ketikkan kode berikut di dalam bagian “Code”
<html> <head>
<title> Ini adalah judul dokumen </title> </head>
<body>
Ini adalah bagian badan dokumen html. <br>
Anda dapat mengetikkan teks apapun disini. </body>
</html>
d. Lalu simpan dengan Ctrl+S kemudian lihat pada bagian “Design”
e. Tekan F12 dari keyboard untuk melihat preview halaman web di Mozilla Firefox atau Internet Explorer.
3. Tugas dikumpulkan
4. Format Teks a. Heading
Heading teks dapat ditampilkan dalam berbagai ukuran huruf. Heading
didefinisikan menggunakan tag <hn> dan diakhiri dengan </hn> dimana n menyatakan tipe dengan nilai 1-6.
Kode HTML heading:
<body>
<h1> Heading 1 </h1> <h2> Heading 2 </h2> <h3> Heading 3 </h3> <h4> Heading 4 </h4> <h5> Heading 5 </h5> <h6> Heading 6 </h6> </body>
b. Paragraf
Paragraf direpresentasikan dengan tag <p>. Tag <p> kerap kali digunakan tanpa akhiran tag </p>.
Kode HTML:
<body>
<p> Ini paragraf pertama ……….
<p> Ini paragraf kedua …………...
</body>
Untuk mengatur posisi paragraf, gunakan kode HTML: - <p align=”center”> untuk paragraf rata tengah
- <p align=”justify”> untuk paragraf rata kanan kiri
- <p align=”right”> untuk paragraf rata kanan
- <p align=”left”> untuk paragraf rata kiri
Praktikum:
<html> <head>
<title> Latihan Format Paragraf </title> </head>
<body>
<p align=”justify”> Ini adalah paragraf rata kanan kiri. ………. <p align=”right”> Ini adalah paragraf rata kanan. ………. <p align=”left”> Ini adalah paragraf rata kiri. ………. </body>
</html> c. Fontase
Fontase pengaturan font seperti huruf tebal, huruf miring, garis bawah, dll. Kode HTML:
<body>
<b> Tag untuk huruf tebal </b> <br> <strong> Tag untuk huruf tebal </b> <br> <i> Tag untuk huruf miring </i> <br> <em> Tag untuk huruf miring </em> <br> <u> Tag untuk garis bawah </u> <br>
<strike> Tag untuk mencoret huruf </strike> <br> </body>
5. Garis Horizontal
Garis horizontal dapat dibuat dengan menggunakan tag <hr/>
Praktikum:
<body>
Membuat garis horizontal <hr/> </body>
6. Memberikan warna background dan font/huruf
Praktikum:
<body bgcolor=”aqua” >
<font color=”red”> Font berwarna merah </font> <br>
<font color=”#FF0000”> Font berwarna merah (menggunakan nilai heksa) </font> <br> </body>
Untuk memberikan warna, jenis dan ukuran huruf, dapat juga menggunakan kombinasi tag:
<font face=”jenis huruf” size=”ukuran huruf” color=”warna huruf”> isikan teks yang akan diubah hurufnya </font>
Contoh praktikum:
<font face=”verdana, arial, times new roman” size=”2” color=”blue”> Ini adalah huruf dengan ukuran 2 dan warna biru </font>
Keterangan:
- Size merupakan ukuran huruf. Size 1 = 8 pt, 2 = 10 pt, 3 = 12 pt, 4 = 14 pt, 5 = 18 - Color menyatakan warna huruf
7. Menggunakan List
List (urutan) yang disediakan oleh HTML antara lain:
<body> Ordered List <ol>
<li> Satu </li> <li> Dua </li> </ol>
<br>
Unordered List <ul>
<li> Satu </li> <li> Dua </li> </ul>
<br>
Definition List <dl>
<dt> Satu </dt> <dd> Satu Satu </dd> <dt> Dua </dt> <dd> Dua Dua </dd> </dl>
</body>
Praktikkan kode di atas lalu bedakan hasil tampilannya!
8. Memberikan Link/Tautan
Link untuk mengaitkan satu dokumen dengan dokumen-dokumen lainnya. Kode HTML:
<body>
<a href=”http://www.google.com/”> Ini adalah link menuju Google </a> </body>
9. Menyisipkan Gambar ke dalam HTML
Kode HTML:
<body>
<img src=”komputer.jpg” />
<br> komputer.jpg merupakan nama file gambar yang akan disisipkan </body>
Bila ingin mengganti ukuran gambar yang akan ditampilkan di browser, maka gunakan kode:
<img src=”komputer.jpg” width=”400” height=”100” border=”0” alt=”logo webku”/>
Keterangan:
- komputer.jpg adalah nama file gambar
- width = 400 menyatakan lebar gambar yang akan ditampilkan - height = 100 menyatakan panjang gambar yang akan ditampilkan - border = 0 artinya gambar tersebut tidak memerlukan border
- alt = logo webku merupakan teks yang akan tampil di browser bila mouse diarahkan pada gambar tersebut.
10. Membuat Tabel
Tabel diawali dengan tag <table> dan diikuti oleh tiga tag dasar yaitu: - Tag <th> atau tabel heading berfungsi mendefinisikan header/kepala table - Tag <tr> atau tabel row berfungsi mendefinisikan baris
- Tag <td> atau tabel data berfungsi mendefinisikan sel (isi masing-masing kolom) Kode HTML:
<body>
<table border=1>
<caption> Label dari tabel </caption> <tr>
<th> No </th> <th> Nama </th> <th> Alamat </th> </tr>
<tr>
<td> 1 </td> <td> Budi </td> <td> Karangan </td> </tr>
</table> </body>
No Nama Alamat
1 Budi Karangan
