Dasar Dasar HTML
Dasar Dasar HTML
Mengenal HTML
HTML (HyperTex Markup Language) adalah standar
informasi yang berbasis hypertext yang dipakai di web.
Berdasarkan standar inilah Web Browser bisa
memahami isi suatu dokumen yang berasal dari web
server. HTML bekerja dengan menggunakan HTTP
(HyperText Transfer Protocol), yaitu protokol komunikasi
yang memungkinkan web server berkomunikasi dengan
web browser.
Kode HTML berupa sebuah berkas teks dengan akhiran
berupa .HTML, .html, .HTM, atau .htm.
Contoh kode HTML:
<HTML>
<HEAD>
<TITLE>Latihan HTML</TITLE>
</HEAD>
<BODY>
Selamat Belajar HTML
</BODY>
</HTML>
Tag <BR>
Salah satu tag yang biasa digunakan dalam kode HTML
yaitu <BR>. Sebagai contoh:
<HTML>
<HEAD>
<TITLE>Tag BR</TITLE>
</HEAD>
<BODY>
Selamat Belajar HTML<BR>
Semoga Sukses!
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Contoh Paragraf</TITLE>
<BODY>
Musik Jaz<P>
Musik Jazz banyak disukai oleh<BR>
Mereka yang menyukai keindahan dan<BR>
Kedinamisan bunyi.<BR>
</BODY>
</HTML>
Menggunakan Tag Judul
HTML menyediakan 6 buah tag yang digunakan untuk
mengatur ukuran teks yang dijadikan sebagai judul
dalam badan dokumen. Tag-tag judul ini berupa <H1> …
</H1>, <H2> … </H2>, <H3> … </H3>, <H4> … </H4>,
<H5> … </H5>, <H6> … </H6>. Contoh:
<HTML>
<HEAD>
<TITLE>Contoh Judul</TITLE>
</HEAD>
<BODY>
<H1>Musik Jazz</H1><P>
Musik Jazz banyak disukai oleh<BR>
Mereka yang menyukai keindahan dan<BR>
Kedinamisan bunyi.<BR>
</BODY>
</HTML>
Contoh lain:
<HTML>
<HEAD
<TITLE>Tag H1-H6</TITLE>
</HEAD>
<BODY>
<H1>Tag H1</H1>
<H1>Tag H1</H1>
<H1>Tag H1</H1>
<H1>Tag H1</H1>
<H1>Tag H1</H1>
<H1>Tag H1</H1>
</BODY>
</HTML>
Sebagaimana telah dijelaskan di depan, kebanyakan
tag memiliki atribut. Begitu juga halnya tag judul
seperti <H1>. Salah satu atribut yang bisa digunakan
adalah ALIGN, yang berfungsi untuk mengatur
penempatan teks di dalam baris. Salah satu nilai
yang dapat diberikan ke ALIGN adalah CENTER,
yang berarti judul ditempatkan di tengah-tengah
layar pada baris yang bersangkutan. Contoh:
<HTML>
<HEAD>
<TITLE>Tag HR</TITLE>
</HEAD>
<BODY>
<H1>Grup Jazz:</H1>
<HR>
Rippingtons
<HR>
Spyro Gyra
<HR>
Fourplay
<HR>
Casiopea
<HR>
</BODY>
</HTML>
Menggunakan Tag <CENTER>
Untuk menengahkan suatu teks, bisa digunakan tag
<CENTER>. Tentu saja untuk mengakhiri penengahan
teks (agar teks berikutnya tidak ditengahkan), perlu
disertakan </CENTER>
<HTML>
<HEAD>
<TITLE>Tag CENTER</TITLE>
</HEAD>
<BODY>
<CENTER>
<H2>Group Jazz Terkenal : </H2>
Rippingtons <BR>
Spyro Gyra <BR>
Fourplay <BR>
Casiopea <BR>
</CENTER>
*****
</BODY>
</HTML>
Memformat Teks
HTML menyediakan sejumlah tag yang berguna
untuk mengatur bentuk teks secara fisik. Lihat tabel
berikut:
Daftar tag untuk mengatur teks secara fisik
Pemakaian Tag Keterangan
<B>Teks</B> Teks ditampilkan dalam keadaan
ditebalkan
<HTML>
<HEAD>
<TITLE>Format Teks</TITLE>
</HEAD>
<BODY>
Normal <BR>
<B>Tebal</B><BR>
<BIG>Big</BIG><BR>
<I>Miring</I><BR>
<U>Digarisbawahi</U><BR>
<I><B>Miring dan tebal</B></I><BR>
X<SUB>n</SUB><SUP>2</SUP>
</BODY>
</HTML>
Teks Praformat
Contoh:
<HTML>
<HEAD>
<TITLE>Praformat</TITLE>
</HEAD>
<BODY>
<H1>Menu:</H1>
<PRE>
Nasi Goreng Spesial ........... 15.000
Nasi Rawon .................... 8.500
Nasi Gudeg Lengkap ............ 8.500
Nasi Langgi ................... 8.500
Nasi Soto Madura .............. 5.000
<PRE>
Selamat menikmati.
</BODY>
</HTML>
Pengaturan Font
Tag <FONT>...</FONT> berguna untuk mengatur
jenis, ukuran, maupun warna font.
* Jenis Font
Untuk menentukan jenis font, bisa digunakan atribut
FACE. Contoh:
Contoh:
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
Normal: 012345ABCD<BR>
<FONT FACE = “Arial”>Arial: 012345ABCD</FONT>
<BR>
<FONT FACE = “Lucida”>Lucida: 012345ABCD</FONT>
<BR>
<FONT FACE = “Courier”>Courier: 012345ABCD</FONT>
<BR>
<FONT FACE = “Verdana”>Verdana: 012345ABCD
</FONT>
<BR>
</BODY>
</HTML>
* Ukuran Font
Ukuran font ditentukan oleh atribut SIZE. Contoh:
* Warna Font
Atribut pada tag <FONT> yang berkaitan dengan warna teks
yaitu COLOR, yang berguna untuk menentukan warna latar
belakang teks.
Adapun kalau warna latar belakang teks yang akan
diatur, pengaturan perlu dilakukan melalui tag
<BODY> dengan properti berupa BGCOLOR. Perlu
juga diketahui, tag BODY juga memiliki atribut
bernama TEXT yang dapat digunakan untuk
mengatur warna teks pada keseluruhan tubuh
dokumen.
Nilai yang diberikan pada atribut COLOR,
BGCOLOR, dan TEXT tersebut berupa:
1. nama warna, atau
2. nilai RGB (Red-Green-Blue) yang dinyatakan
dengan “#RRGGBB”.
Daftar nama warna pada atribut penentu
warna
Nama
RGB Nama Warna RGB
Warna
aqua 00FFFF navy 000080
black 000000 olive 808000
blue 0000FF purple 800080
fuchsia FF00FF red FF0000
gray 808080 silver C0C0C0
green 008000 teal 008080
lime 00FF00 yellow FFFF00
maroon 800000 white FFFFFF