Dasar-Dasar HTML
Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML
bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi
perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan
tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar
HTML kita dapat di akses oleh browser. Mendesain HTML adalah adalah sebuah seni
tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari
orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para
pengunjung homepage yang kita buat merasa senang dan bermanfaat.
Mendesain
HTML dapat dilakukan dengan dua cara:
1.
Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain. Dapatkan editor
HTML lainnya disini.
2.
Dengan cara menuliskan sendiri secara manual
satu persatu tag-tag HTML ke dalam dokumen HTML.
Ada kelebihan
dan kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah HTML
Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan
editing bahkan mem-publish ke internet.
Dengan kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen
HTML maka cara ini sangat disukai oleh para pemula dan desainer yang tidak
ingin belajar lebih mendalam mengenai HTML. Sedangkan cara kedua adalah
menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat disarakan
sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya,
ditambah lagi Anda harus melakukan cara-cara konvensional untuk melihat
hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala
bentuk HTML yang akan Anda pelajari, karena dengan cara itulah Anda akan lebih
paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa
HTML.
1. Struktur
dasar HTML
HTML
merupakan sebuah bahasa pemrograman yang berisikan perintah kepada browser yang
telah terinstal pada computer client, Untuk pemahaman dan sejarah HTML silahkan
baca “Pengertian dan sejarah HTML”, Bahasa pemograman ini terdapat sebuah
elemen, tag dan attribute didalam perintahnya.
Secara umum Web dokumen
terdiri dari menjadi dua elemen ataupun section yaitu head dan body, kedua
elemen tersebut dipisahkan oleh beberapa tag, untuk lebih jelasnya dapat anda
lihat sebuah pola dasar HTML dibawah ini
<html>
<head>
“Informasi Tentang Dokumen HTML”
“Informasi Tentang Dokumen HTML”
</head>
<body>
“Informasi yang akan ditampilkan dalam web Browser”
“Informasi yang akan ditampilkan dalam web Browser”
</body>
</html>
Dari pola diatas dapat
digambarkan adanya sebuah dokumen HTML mulai dari tag pembuka <html>
sampai tag penutup </html>, sedangkan isi dari dokumen html tersebut
adalah dua buah elemen atau section yaitu
• “HEAD”
yang dimulai dari tag pembukanya <head> sampai tag penutup head
</head>,
Pada elemen ini biasanya
berisikan
– Title,
merupakan judul dokumen
– Meta tag,
informasi yang akan diberikan oleh pengunjung tentang isi halaman web
Dalam Meta Tag dapat kita
isikan beberapa atribut penjelasan antara lain, Content, Name, URL. Sedangkan
dalam atribut tersebut terdapat sebuah value, adapun beberapa value yang dapat
kita isikan antara lain abstract, author, copyright, description, distribution,
expires, keywords, revist, refresh maupun language
– Script
java, CSS dan beberapa perintah lain yang nantinya akan diesekusi browser tanpa
ditampilkan oleh browser untuk sebagian besar, dengan kata lain pada elemen ini
kebanyakan hanya mengatur informasi dan visualisasi web tersebut, untuk elemen
keduanya adalah
– “BODY” mulai dari tag
pembuka <body> sampai tag penutupnya </body> pada elemen ini
berisikan informasi dan pengaturannya yang akan ditampilkan dalam browser.
Di dalam bahasa
pemrograman HTML terdapat beberapa atributh yang perlu kita pelajari, adapun
contoh atributh dan kegunaannya sebagai berikut,
•
<DFN>, untuk menandai sebuah subdefinisi dari daftar ataupun table
definisi
•
<STRONG>, Untuk menandai bagian text ataupun kata dari penting dari
sebuah kalimat, paragraph ataupun dokumen
• <VAR>, untuk menampilkan
nama variable
• <CITE>, Menandai
kutipan
• <CODE>, Menampilakan
sebuah kode pemrograman
• <EM>, Penekanan sebuah
kalimat
• <SAMP>, untuk membuat
contoh ataupun sample didalam sebuah dokumen
• <KBD>, menandai suatu text dimana text
tersebut harus dimasukan oleh user melalui keyboard
• <B>, Bold membuat
tampilan tebal huruf, kata ataupun kalimat
• <I>, Italic membuat
tampilan miring
• <U>, Underline membuat
tampilan garis bawah
• <TT>, Membuat tampilan
jenis huruf menyerupai huruf mesin ketik
• <STRIKE>, membuat garis
tengah pada sebuah kalimat
• <BIG>, memperbesar
ukuran huruf
• <SMALL>, memperkecil
ukuran huruf
• <SUP>, menampilkan
superscript
• <SUB>, menampilkan
subscript
• <FONT>, merupakan
sebuah pengaturan huruf, kata ataupun kalimat bahkan paragraph di mana dalam
atribut ini terdapat value yang mengatur tampilan huruf tersebut seperti color.
Size, style dan lainnya
• <P>, Paragrah untuk
membuat sebuah paragraph
• <BR>, Line break
berfungsi untuk mengganti baris
•
<H1>,<H2>,<H3>,<H4>,<H5>,<H6> merupakan
sebuah header dimana dari keenam jenis tersebut mempunyai perbedaan ketebalan
dan ukuran huruf
• <PRE> Preformatted Text
berfungsi menampilkan text apa adanya
• <CENTER> membuat sebuah
text berada di posisi tengah
• <LEFT> membuat sebuah
text berada di posisi kiri
• <RIGHT> membuat sebuah
text berada di posisi kanan
• <Basefont
size=”pixel”>mengubah ukuran sebuah huruf
• <HR> Horizontal rule
berfungsi untuk membuat garis bawah
• <OL>, membuat penomoran
pada daftar
• <UL>, Membuat sebuah
tanda pada daftar tanpa nomor (bullet)
• <LI>, tag yang berada
di dalam attribute UL ataupul OL digunakan untuk memisah baris daftar yang akan
di beri penomoron ataupun tanda bullet
• <TABLE>, membuat sebuah
table
• <TR>, Membuat row atau
baris didalam table <TH>, membuat judul kolom di table <TD> membuat
isi pada kolom table, ketiga tag ini diisikan pada atribut table
• Rowspan, Colspan merupakan
pengaturan merge cell pada atribut table
• <FORM> untuk membuat
form
• <A HREF=”url
link”>Hypertext</A> Hyper Link
• <IMG SRC=”url img”>
insert image
Inilah beberapa atributh dasar yang digunakan
dalam pemrograman HTML, pada atribut diatas merupakan sebuah tag pembuka yang
pada akhir atribut tersebut harus ditutup dengan tag penutup atributh tersebut
</…..>, untuk lebih jelasnya dilain waktu saya akan mencoba bahas satu
persatu atributh tersebut dan akan saya lengkapi dengan syntax dan contohnya
kompleksnya.
Secara sederhana HTML terdiri dari dua bagian
yaitu Header dan Body. Struktur HTML
diapit oleh tag awal <HTML> dan tag akhir </HTML>. Standar
penulisannya adalah:
<HTML>
<HEAD>
Deskrisi dokumen
<HEAD>
Deskrisi dokumen
</HEAD>
<BODY>
Isi dokumen
<BODY>
Isi dokumen
</BODY>
</HTML>
</HTML>
Keterangan:
·
Tag <TITLE> digunakan untuk memberi judul
dokumen HTML. Judul ini dapat
Anda lihat pada pojok kiri atas (title bar) browser. Ketika orang akan
mem-bookmark web Anda, maka judul inilah yang akan disimpan.
Untuk melihat hasilnya, silakan jalankan browser
favorit Anda, seperti contoh di bawah ini digunakan Microsoft Internet Explorer.
Referensi Tag HTML
1. Heading
Heading adalah sekumpulan kata yang menjadi judul
atau subjudul dalam suatu dokumen HTML. Heading berbeda dengan tag
<TITLE> yang tidak bisa muncul dalam halaman web. HTML menyediakan enam
tingkatan heading. Heading level 1 biasanya untuk judul utama.
Contoh:
<HTML>
<HEAD>
<TITLE>Headings</TITLE>
2. Paragraf
Untuk membuat paragraf digunakan tag <P>.
Setelah tag <P> Anda bisa menulis isi paragraf dan paragraf tersebut
harus diakhiri dengan penutup </P>. Anda bisa mengatur posisi paragraf
dengan attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan.
LEFT untuk rata kiri, CENTER untuk rata tengah dan RIGHT untuk rata kanan.
Contoh:
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN=”right”>
3. Blockquote
Perintah tag <BLOCKQUOTE> digunakan untuk
menulis kutipan teks. Dengan perintah ini browser akan menampilkan teks
menjorok ke dalam (meng-identasi teks) atau menampilkan teks dalam bentuk huruf
miring.
Contoh:
<HTML>
<HEAD>
<TITLE>BLOCKQUOTE</TITLE>
</HEAD>
4. Preformatted Text
Preformatted Text (PRE) digunakan untuk
menampilkan teks sama seperti yang Anda ketikkan dalam dokumen HTML. Browser akan menampikan
teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang
tampilkan oleh aplikasi berbasis teks (misalnya telnet).
Contoh:
<HTML>
<HEAD>
<TITLE>Preformatted Text</TITLE>
5. Begin Row (BR)
Tag ini digunakan untuk menulis teks pada baris
berikutnya. Tag <BR> membuat baris baru tanpa memberi baris kosong di
bawahnya.
Contoh:
<HTML>
<HEAD>
<TITLE>Begin Row</TITLE>
<P>Banyak cara yang dapat digunakan untuk
melakukan instalasi FreeBSD. Namun ada tiga cara yang paling sering dilakukan
,yaitu:
<BR>Instalasi melalui FTP
<BR>Instalasi melalui CDROM
<BR>Instalasi melalui partisi DOS
6. Ukuran Font
Untuk mengatur huruf dokumen HTML digunakan tag <FONT
SIZE>. Tag <FONT SIZE> memiliki beberapa atribut untuk mengatur ukuran
huruf yang akan digunakan.
Contoh:
<HTML>
<HEAD>
<TITLE>Ukuran font</TITLE>
</HEAD>
<BODY>
</HTML>
7. Jenis Font
Atribut FACE digunakan untuk mengatur jenis huruf
yang diinginkan. Atribut FACE harus diisi dengan string jenis font seperti
Arial, Times New Roman,Verdana, dan sebagainya.
Contoh:
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
8. Warna Font
Atribut COLOR digunakan untuk mengatur warna font
yang akan digunakan. Untuk memberi nilai pada atribut color, ada dua cara. Cara
pertama dengan menuliskan nama warna seperti Red, Blue, Yellow, White, dll.
Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari
suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF untuk
Blue.
Contoh:
<HTML>
<HEAD>
<TITLE>Warna Font</TITLE>
<FONT SIZE=5>
<FONT COLOR = “red”>PSM Makassar<P>
<FONT COLOR = “#FF0000″>tetap PSM Makassar
kan?<P>
<FONT COLOR = “#00FF00″>Ini baru
Persebaya<P>
9. Link
Perintah anchor <A> digunakan untuk membuat
suatu link. Untuk membuat link ke dokumen HTML lain digunakan perintah
<A HREF = “nama_dokumen”>Teks pada browser</A>.
Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu
dipersiapkan nama anchor lokasi tujuan dari link tersebut. Nama anchor
dibuat dengan menambahkan atribut NAME pada tag <A>. Misalnya <A NAME
= “Bugs”</A>. Cara melakukan link ke bagian tersebut adalah <A HREF =
“#nama_anchor”>teks pada browser</A>.
Contoh:
<HTML>
<HEAD>
<TITLE>Link</TITLE>
</HEAD>
Membuat Kode
Dasar HTML Table
Untuk Belajar HTML Table dan membuat
website sendiri, maka kita harus membuat persiapan lebih dulu. Pertama kita
buka notepad. Kemudian ketik di notepad ini kode html seperti dibawah ini:
<table>
<head>
<title> </title>
</head>
<body>
</b
ody>
</html>
Kemudian sisipkan kalimat Belajar HTML Table
diantara <title> dan </title> sehingga kode html nya
sekarang menjadi:
<table>
<head>
<title>Belajar HTML Table</title>
</head>
<body>
</body>
</html>
a. Menambah heading dan paragraf
Bila anda pernah menggunakan Microsoft Word, anda
akan terbiasa dengan style yang ada untuk heading dengan tingkat kepentingan
yang berbeda. Pada HTML ada enam tingkatan heading. H1 adalah yang paling
penting, H2 lebih sedikit kurang penting, seterusnya hingga H6, yang paling
tidak penting.
Berikut adalah cara menambah sebuah heading yang
penting:
<h1>Sebuah heading yang penting</h1>
<h2>Sebuah heading yang sedikit kurang
penting</h2>
Setiap paragraf yang anda tulis harus diawali
dengan tag <p>. Tag </p> merupakan opsi, tidak seperti end
tag untuk elemen seperti heading. Sebagai contoh:
<p>Ini adalah paragraf pertama.</p>
<p>Ini adalah paragraf kedua.</p>
b. Menambahkan link ke halaman lain.
Apa yang membuat Web sangat efektif adalah
kemampuan untuk membuat link dari satu halaman ke halaman yang lain, dan
mengikutinya hanya dengan sebuah klik. Sebuah klik dapat membawa anda langsung
ke seberang dunia!
Link didefinisikan dengan tag <a>. Mari
membuat sebuah link pada file “peter.html”
di folder/direktori yang sama dengan file HTML yang sedang anda edit::
Ini adalah link ke <a href=”peter.html”>halamannyater</a>.
Teks antara <a> dan </a> digunakan
sebagai keterangan dari link. Adalah hal yang umum bagi keterangan tersebut
untuk diberi garis bawah berwarna biru.
Bila file yang anda link adalah direktori asal
(parent directory), anda perlu menambahkan “../” sebelumnya, sebagai contoh:
<a href=”../mary.html”>halamannya
Mary</a>
Bila file yang dilink adalah sebuah sub
direktori, anda perlu memberikan nama dari subdirektori tersebut diikuti
sebuah “/” setelahnya, sebagai contoh:
<a href=”friends/sue.html”>halamannya
Sue</a>
Penggunaan relative path memungkinkan anda melink
sebuah file dengan pergi naik atau turun direktori sesuai kebutuhan, sebagai
contoh”:
<a href=”../college/friends/john.html”>halamannya
John</a>
Di mana pertama kali akan dicari pada direktori
asal, dari sebuah direktori lain bernama “college”, dan kemudian sebuah
subdirektori dengan nama “friends” untuk sebuah file dengan nama “john.html”.
Untuk melink ke sebuah halaman atau situs Web
lain anda perlu memberikan alamat lengkap Web (umumnya dinamakan URL), sebagai
contoh untuk melink ke www.w3.org
anda perlu menuliskan:
Ini adalah sebuah link menuju<a href=”http://www.w3.org/”>W3C</a>.
Anda dapat mengubah sebuah gambar menjadi sebuah
link hypertext, sebagai contoh, berikut ini memungkinkan anda untuk
mengklik pada logo perusahaan untuk pergi ke halaman utama / depan:
<a href=”/”><img src=”logo.gif”
alt=”home page”></a>
Contoh ini menggunakan “/” untuk menghubungi
direktori asal, yang mana adalah home page.
c. Tiga jenis daftar
HTML mendukung tiga jenis daftar. Jenis yang
pertama adalah daftar dengan bullet (bulletted list), atau sering disebut unordered
list. Yang menggunakan tag <ul> dan <li>, sebagai contoh:
<ul>
<li>list item pertama</li>
<li>list item kedua</li>
<li>list item ketiga</li>
</ul>
Catatan bahwa anda perlu mengakhiri daftar dengan
tag </ul>, tetapi tag </li> merupakan opsi dan dapat di
hiraukan. Jenis daftar kedua adalah daftar dengan nomor, yang sering juga
disebut ordered list. Hal tersebut menggunakan tag <ol> dan
<li>. Sebagai contoh:
<ol>
<li>list item pertama</li>
<li>list item kedua</li>
<li>list item ketiga</li>
</ol>
Seperti juga bulletted lists, anda perlu
mengakhiri daftar dengan tag </ol>, tetapi tag penutup </li>
merupakan opsi dan dapat di hiraukan.
Yang ketiga dan yang terakhir adalah daftar
definisi. Daftar ini memungkinkan anda untuk membuat daftar suatu hal dan
penjelasannya. Daftar ini diawali dengan sebuah tag <dl> dan diakhiri
dengan </dl> Tiap hal diawali dengan sebuah tag <dt> dan tiap
penjelasannya diawali dengan sebuah tag <dd>. Sebagai contoh:
<dl>
<dt>hal pertama</dt>
<dd>penjelasannya</dd>
<dt>hal kedua</dt>
<dd>penjelasannya</dd>
<dt>hal ketiga</dt>
<dd>penjelasannya</dd>
</dl>
Tag penutup </dt> dan </dd> merupakan
opsi dan dapat diabaikan. Perlu dicatat bahwa daftar ini bisa saling
disisipkan, satu diantari yang lain. Sebagai contoh:
<ol>
<li>list item pertama</li>
<li>
list item kedua
<ul>
<li>list
pertama yang disisipkan</li>
<li>list
kedua yang disisipkan</li>
</ul>
</li>
<li>list item ketiga</li>
</ol>
Anda juga dapat menggunakan paragrapf dan heading
dsb. untuk daftar hal yang lebih panjang..
d. HTML memiliki sebuah head dan body
Bila anda menggunakan fitur view source dari web
browser anda (lihat menu View atau File) anda dapat melihat struktur dari
halaman HTML. Dokumen tersebut biasanya dimulai dengan sebuah perrnyataan versi
HTML yang digunakan HTML, dan kemudian diawali dengan sebuah tag <html>
dikuti dengan tag <head> dan diakhiri dengan </html>. Tag
<html> … </html> berfungsi sebagai sebuah kontainer untuk dokumen
tersebut. Tag <head> … </head> mengandung judul, dan informasi
style dan script, sementara <body> … </body> mengandung markup dari
isi yang terlihat. Berikut adalah sebuah pola yang dapat anda copy dan paste ke
text editor untuk menciptakan halaman anda sendiri:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01
Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title> ganti dengan judul
dokumen anda </title>
</head>
<body>
ganti dengan isi dokumen anda
</body>
</html>
Apa pendapat anda...