TEORI DASAR
Pendahuluan
HTML merupakan bahasa pemrograman yang harus dikuasai oleh pembuat
website. Dengan menggunakan menu view source pada browser, dapat dilihat kode/skrip yang digunakan untuk menampilkan halaman.
Misalkan skrip source code dipindahkan (copy paste) pada notepad
atau dreamweaver, kemudian simpan dalam format html (misalkan
tentangkami.html). Selanjutnya file tersebut panggil kembali pada browser, maka
hasilnya akan tampak seperti gambar tampilan browser sebelumnya.
Membaca referensi HTML yang lengkap memang diperlukan. Tetapi, bagi
beberapa orang terkadang membuat pusing. Apalagi menghafal seluruh tag
HTML memerlukan banyak waktu. Sebagai contoh, perhatikan tag berikut ini:
(Memahami “HTML itu mudah)”
(Memahami “HTML itu mudah
(Memahami “HTML” itu mudah)
Ketiga teks di atas dapat dibaca, tetapi terdapat perbedaan dalam penggunaan
tanda kurung dan tanda petik. Kaidah penulisan teks nomor tiga tentu saja yang
paling benar.
Contoh di atas dapat diterapkan untuk lebih memahami HTML. Sebaiknya tag
HTML ditulis secara sistematis seperti bentuk berikut:
</tag-1>
</tag-2>
</tag-3>
</tag-3>
</tag-2>
</tag-1>
Beberapa tag pada HTML memiliki atribut, yang digunakan untuk menentukan
warna, jenis huruf, ukuran, style, dan lain sebagainya.
Tag Dasar HTML
Tag pada HTML dapat dikelompokkan menjadi lima bagian, yaitu: Document
Type Definition( DTD/DocType), html, head, title, dan body.
<!DOCTYPE
Untuk menjelaskan versi HTML pada skrip yang kita buat ditulis pada bagian
atas. Contoh penulisan adalah sebagai nerikut:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/html4-transitional.dtd”>
Kode diatas menunjukkan bahwa kita menggunakan HTML versi 4.01. sebetulnya
tanpa menyertalan doctype, halaman website masih bisa dibuka. W3C (Word
Wide Web Consortium) sebagai penyedia pembangunan teknologi yang
berhubungan dengan web, menganjurkan untuk selalu menggunakan tag tersebut
di awal halaman web.
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
<html> … </html>
Digunakan untuk membuka dan menutup dokumen HTML.
<head> … </head>
Digunakan untuk menuliskan keterangan dokumen HTML, misalnya judul
halaman.
<title> … </title>
Digunakan untuk menulisakn judul halaman. Sebagai contoh:
<title>Kerudung Original</title>
<body> … </body>
Digunakan untuk menuliskan tag-tag yang akan menjadi konten website. Berikut
adalah beberapa atribut untuk tag body:
| Taq | Kegunaan |
| <body bgcolor=?> | Menentukan warna latar |
| <body text=?> | Menentukan warna teks |
| <body link=?> | Menentukan warna link sebelum di klik |
| <body vlink=?> | Menentukan warna link setelah di klik |
| <body alink=?> | Menentukan warna link ketika sedang di klik |
Berikut adalah atribut Tag untuk teks:
| Tag | Kegunaan |
| <h1></h1>, <h2></h2> <h3></h3>, <h4></h4> <h5></h5>, <h6></h6> | Untuk membuat heading teks dari yang terbesah (h1) sampai terkecil (h6) |
| <b></b> | Untuk membuat huruf tebal |
| <i></i> | Untuk membuat huruf miring |
| <tt></tt> | Untuk membuat huruf seperti font pada mesin tik |
| <em></em> | Untuk membuat huruf miring |
| <strong></strong> | Untuk membuat huruf tebal |
| <font size=?></font> | Untuk menentukan besar huruf |
| <font color=?></font> | Untuk menentukan warna huruf |
Berikut adalah atribut tag untuk format teks:
| Tag | Kegunaan |
| <p></p> | Membuat paragraph |
| <p align=?> | Menentukan perataan teks, rata kiri, kanan, atau tengah |
| <br> | Membuat baris baru |
| <ol></ol> | Membuat daftar item dengan nomor urut |
| <ul></ul> | Membuat daftar item tanpa nomor urut |
| <li></li> | Menentukan awal dan akhir setiap baris pada daftar item |
Berikut tag untuk gambar:
| Tag | Kegunaan |
| <img src=”file”> | Menentukan lokasi file gambar |
| <img src=”file” align=?> | Menentukan penempatan gambar: kiri, kanan, bawah, atas |
| <img src=”file” border=?> | Menentukan border gambar |
| <img src=”file” alt=”nama”> | Menentukan nama alternative untuk gambar. Diperlukan jika browser tidak mengaktifkan gambar. |
Berikut tag untuk Tabel:
| Tag | Kegunaan |
| <tabel></tabel> | Membuat awal dan akhir sebuah tabel |
| <tr></tr> | Menentukan sebuah baris pada tabel |
| <td></td> | Membuat sel data pada tabel |
| <th></th> | Membuat judul kolom |
TUGAS
Buatlah dokumen HTML untuk menampilkan informasi kelas Anda sebagai berikut :
- Title : Informasi Mahasiswa Baru
- Teks Judul format H1 : Informasi Mahasiswa Baru
- Teks Judul format H2 : Daftar Mahasiswa Baru
- Buatlah paragraph pendahuluan.
- Table mahasiswa yang terdiri dari 3 kolom yaitu Nomor, Nama dan NPM
- Informasi data mahasiswa diisi dengan sebanyak 5 orang data mahasiswa pada table tersebut.
- Teks Judul format H2 : Petunjuk Daftar Ulang
- Buatlah paragraph pendahuluan.
- Buatlah list informasi petunjuk daftar ulang sebanyak 5 point.
- Jawaban dikirimkan melalui link upload yang akan diberikan melalui wag.
Selamat mengerjakan!