DASAR DASAR HTML
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.
2. Latihan Membuat Dokumen HTML
<br> Anda dapat mengetikkan teks apapun disini. </body> </html>
Buatlah narasi biodata anda menggunakan format dokumen html. Kerjakan di buku tulis masing-masing individu. Tugas ini akan dipraktikkan pada pertemuan berikutnya.
e. Tekan F12 dari keyboard untuk melihat preview halaman web di Mozilla Firefox atau Internet Explorer.
d. Lalu simpan dengan Ctrl+S kemudian lihat pada bagian “Design”
<html> <head> <title> Ini adalah judul dokumen </title> </head> <body> Ini adalah bagian badan dokumen html.
b. Tag <title> dan </title> digunakan untuk menambahkan title/judul di title bar web browser.
c. Ketikkan kode berikut di dalam bagian “Code”
b. Simpan File-Save All dokumen html dengan nama “latihan1.html”
a. Buka program Dreamweaver
Petunjuk praktikum:
e. Tag <p> digunakan untuk pergantian paragraf.
d. Tag <br> digunakan untuk pergantian baris.
c. Tag <body> dan </body> digunakan untuk melingkupi semua teks yang terdapat di halaman html.
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 - untuk paragraf rata kiri
- <p align=”left”>
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=> Ini adalah link menuju Google </a> </body>
9. Menyisipkan Gambar ke dalam HTML Untuk menyisipkan gambar digunakan tag <img> diikuti dengan nama gambar.
Untuk memudahkan penyisipan, simpan file gambar yang akan disisipkan menjadi satu
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
11. Tugas Akhir Buatlah web statis menggunakan format HTML yang berisi narasi, gambar dan
fungsi-fungsi semua tag HTML yang sudah dipelajari. Isi narasi dan gambar bebas asalkan
masih dalam lingkup pendidikan. Tugas dikumpulkan satu minggu sebelum ujian akhir semester dalam bentuk softcopy!