Sekilas Tentang HTML
HTML adalah singkatan dari hypertext markup language. Fungsi HTML di dalam sebuah dokumen web
adalah untk mengatur struktur tampilan dokumen tersebut dan juga untuk
menampilkan link atau smabungan ke halaman web lain yang ada di internet.
Bisanya sebuah dokumen html disimpan dalam extesi .html. HTML disebut dengan markup language karena HTML befungsi
untuk memprindah file tulisan (text) biasa untuk dapat dilihat pada sebuah web
browser.
Untuk membuat HTMl, anda cukup menggunakan notepad, walaupun
sebenarnya banyak sekali seoftware-software yang memudahkan kita dalam membuat
dokumen HTML ini.
Sintak Dasar HTML
Berikut ini adalah struktur HTML.
Tulislah contoh berikut menggunakan notepad kemudian
simpanlah dalam format .html.
<html>
<head>
<title>Ini HTML</title>
</head>
<body>
Ini adalah dokumen HTML pertamaku
</body
</html>
Skrip di atas adlah file HTML yang paling sederhana. Setiap
tag HTML selalu memiliki tag pembuka dan tag penutup. Pada contoh diatas,
misalnya tag <head> maka penutupnya </head>. Coba perhatikan, ada
tanda ”/” pada setiap tag penutup.
Manipulasi Text
Gunakan notepad untuk menuliskan sntaks berikut ini dan
simpan dengan ektensi .html.
<html>
<head>
<title>Manipulasi text</title>
</head>
<body>
<b>huruf tebal atau bold</b? <br>
<i>huruf miring atau italic</i> <br>
<u>garis bawah atau underline</u> <br>
<font color=”green”>ini warna hijau</font>
<br>
<font color=”blue”>ini warna biru</font>
<br>
<font color=”brown”>ini warna coklat</font>
<br>
</body>
</html>
Untuk kode warna biasanya menggunakan beberapa kode tertentu
dengan huruf atau angka atau gabungan keduanya.berikut ini standar koe warna
dan jenis warna yang dihasilkan.
|
Warna
|
Hex 6
|
RGB
|
|
Gray
|
#808080
|
128,128,128
|
|
White
|
#FFFFFF
|
255,255,255
|
|
Maroon
|
#FF0000
|
128,0,0
|
|
Red
|
#FF0000
|
255,0,0
|
|
Purple
|
#800080
|
0,128,0
|
|
Fuchsia
|
#FF00FF
|
255,0,255
|
|
Green
|
#008800
|
0,128,0
|
|
Lime
|
#00FF00
|
0,255,0
|
|
Olive
|
#808000
|
128,128,0
|
|
Yellow
|
#FFFF00
|
255,255,0
|
|
Navy
|
#000080
|
0,0,128
|
|
Blue
|
#0000FF
|
0,0,255
|
|
Teal
|
#008080
|
0,128,255
|
|
Aqua
|
#00FFFF
|
0,255,255
|
|
Black
|
#000000
|
0,0,0
|
|
Silver
|
#C0C0C0
|
192,192,192
|
Ada beberapaaturan lain yang sigunakan untuk teks. Berikut
contoh beberapa aturan tersebut.
<html>
<head
<title>Manipulasi Text</title>
<body
<b>huruf tebal atau bold</b? <br>
<i>huruf miring atau italic</i> <br>
<u>garis bawah atau underline</u> <br>
<font size=”1”>ini huruf dengan ukuran 1</font>
<br>
<font size=”3”>ini huruf dengan ukuran 3</font>
<br>
<font size=”5”>ini huruf dengan ukuran 5</font>
<br>
</body>
</html>
Pengaturan Paragraf
Untuk mengatur sebuah paragraf, gunakan sintax berikut
Html>
<head>
<title>mengatur sebuah paragraf</title>
</head>
<body
<p align=”left”>tulisan ini posisinya rata
kiri</p>
<p align=”right”>tulisan ini posisinya rata
kanan</p>
<p align=”justify”>tulisan ini posisinya rata kiri dan
kanan</p>
</body>
</html>
Hyperlink
Hyperlink atau lik adalah sambungan yang akan menghubungkan
suatu web dengan web lainnya di Internet. Sebagai contoh, kita akan membuat
link yang akan menuju ke halaman utama Google maka perhatikan contoh dibawah
ini.
<html>
<head>
<title>membuat hyperlink</title>
</head>
<body>
Kliklah tulisan ini untuk pergi ke google <a
href=http://google.co.id/>Halaman utama Google</a>. Terima kasih.
</body>
</html>
Images
Untuk memunculkan gambar pada halaman web, kita hanya
tinggal menambahkan sintaks HTML berikut.
<img src=”target_atau_url_gambar”>
Contoh:
<html>
<head>
<title>gambar</title>
</head>
<body>
<img src=”angel_evil.jpg”>
</body>
</html>
Pada contoh diatas, pastikan bahwa gambar berada pada folder
yang sama dengan file HTML yang telah dibuat. Jika anda menyimpan gambar itu
pada sebuah folder, misalnya nama folde itu adalah “images”, maka kode di atas
akan menjadi:
<html>
<head>
<title>gambar</title>
</head>
<body>
<img src=”angel_evil.jpg”>
</body>
