HTML adalah bahasa pemformatan untuk membuat halaman web. Dokumen HTML disimpan dalam format teks dan mengandung tag-tag yang mengatur tampilan konten. Struktur dasar dokumen HTML terdiri dari elemen html, head, dan body. Tabel, daftar terurut dan tidak terurut, serta atribut warna latar belakang dapat digunakan untuk mendesain tampilan halaman web.
3. Program untuk menyunting dan menyimpan
script HTML adalah program teks editor seperti:
notepad, wordpad (untuk OS Windows), Text
editor, Gedit (untuk OS Linux), TextEdit,
TextMate (untuk OS MAC)
4. Persiapan membuat HTML
• Buat folder khusus. Folder ini adalah tempat
kamu meletakkan file induk, yaitu file html
dan file pendukung seperti foto, gambar,
musik, dan lain-lain.
• Ketika menyimpan file di program teks editor,
jangan lupa tambahkan format htm atau html.
Contoh: danisa.htm atau danisa.html
5. Struktur dasar dokumen HTML
Dokumen HTML disimpan dalam format teks
reguler dan mengandung tag-tag.
Tag-tag ini berfungsi untuk memerintahkan web
browser menjalankan perintah yang telah
ditetapkan.
6. Struktur Penulisan HTML
• Dalam struktur penulisan HTML ada 3 elemen
dasar, yaitu: html, head, dan body.
<html>
<head>
<title>ini adalah judul dokumen HTML</title>
</head>
<body>
Disini penulisan semua konten web
</body>
</html>
7. Keterangan
• Element (p, b, a, h1)
Elemen a digunakan untuk membuat hyperlink ke
halaman lain <a>
• Tag
Sebuah elemen direpresentasikan oleh tag.
Tag ditandai oleh dua karakter “<“ dan “>”
Contoh: <a>
8. tag umumnya ditulis berpasangan, terdiri dari
tag pembuka dan tag penutup dengan
tambahan karakter “/”
contoh:
<font face=”arial” color=”yellow”>My
Blog</font>
9. • Attribute
adalah informasi tambahan untuk elemen
terdiri atas nama dan nilai
umumnya nilai attribute harus berada dalam
tanda petik satu atau dua
<font face=”arial” color=”yellow”>
artinya, jenis huruf yang kita inginkan (nama)
adalah arial (nilai)
warna huruf (nama) kuning (nilai)
Setiap elemen memiliki atribut yang berbeda,
meskipun terdapat juga atribut standar yang dapat
digunakan oleh semua elemen.
10. • jika menginginkan latar belakang halaman web
dengan warna, contoh scriptnya:
<body bgcolor=”blue”> atau
<body bgcolor=”#ffccdd”>
catatan: warna dengan kode #ffccdd seperti
contoh di atas dapat dilihat melalui bantuan
program editing Photoshop.
• Jika latar belakang halaman web yang diinginkan
berupa gambar, scriptnya adalah:
<body background=”nama file”>
contoh
<body background=”images.gif”>
12. 1. Ordered List
Ordered List (OL) adalah daftar keterangan yang memiliki
nomor secara urut dalam sebuah daftar. Misal: A,B,C ;
a,b,c ;1,2,3 dan I,II,III dst
Script OL adalah <ol> dan diakhiri dengan </ol>
script untuk menuliskan daftarnya adalah <li>
contoh:
<ol>Jenis Kucing
<li>Persian Cat
<li>Siamese Cat
<li>Abyssinian cat
Tampilannya menjadi seperti ini:
Jenis Kucing
1. Persian Cat
2. Siamese Cat
3. Abyssinian cat
13. Jika ingin daftar listnya diubah menjadi huruf a,b,c
dstnya; A,B,C atau I,II,III dan i,ii,iii maka tambahkan
teks “type=”karakter”>
contoh:
<ol type=”a”>Jenis Kucing
<li>Persian Cat
<li>Siamese Cat
<li>Abyssinian Cat
tampilan di web akan seperti ini:
Jenis Kucing
a. Persian Cat
b. Siamese Cat
c. Abyssinian Cat
14. 2. Unordered List
Unordered List (UL) adalah daftar keterangan berupa
lambang atau gambar. Misal: lingkaran, kotak, titik.
Script UL adalah <ul> dan diakhiri dengan </ul>
script untuk menuliskan daftarnya adalah <li>
contoh:
<ul type=”circle”>Jenis Kucing
<li>Persian Cat
<li>Siamese Cat
Tampilan di web:
• Jenis Kucing
• Persian Cat
• Siamese Cat
16. Untuk apa Tabel?
Dengan tabel, kita bisa memodifikasi agar
tampilan web lebih menarik dan rapi.
1 kolom
2 kolom
17. Foto blog di atas memiliki desain tabel sebagai
berikut:
Baris pertama berisi 1 kolom, berupa header image
Baris kedua terdiri dari 2 kolom, dengan ketentuan:
Kolom pertama berisi postingan artikel
Kolom kedua dapat berisi informasi seputar
kategori tulisan, form pencarian, kalendar, dan lain-
lain.
18. Tag yang digunakan untuk membuat tabel di HTML adalah:
<html>
<head>
<title>Membuat table</title>
</head>
<body>
<table>
<tr>
<td> . . . </td>
</tr>
</table>
</body>
</html>
Keterangan:
<table>, adalah tag yang digunakan untuk membuat tabel di html
<tr>, atau table row untuk menentukan baris
<td>, atau table data berguna untuk menampilkan data pada setiap sel tabel
atau untuk membuat kolom baru.