Skript HTML
1.1 Tag / Sript HTML
Salah satu ciri dokumen HTML adalah adanya tag-tag. Tag-tag tersebut fungsinya adalah memberi instruksi kepada browser bagaimanakah seharusnya isi dari dokumen tersebut ditampilkan. Baik itu dalam menampilkan teks, gambar, animasi dan sebagainya.
1.2 Aturan-aturan Dasar Tag / Skript HTML
Penulisan tag HTML harus mengikuti aturan yang ada. Jika penulisan tag keliru atau tidak mengikuti aturan, maka browser akan mengabaikan tag tersebut. Berikut adalah beberapa aturan dasar dalam menuliskan tag HTML:
• Setiap tag HTML harus diapit oleh tanda lebih kecil dan tanda lebih besar atau tanda kurung siku miring. < … >.
• Penulisan tag tidak case sensitive yang artinya penulisan dengan huruf kecil dan huruf besar adalah sama.
• Tag HTML ada yang tunggal dan ada yang berpasangan. Untuk tag yang berpasangan, tag pembuka dan tag penutup harus selalu ada, bila hanya terdapat salah satu saja, maka browser tidak akan memprosesnya.
• Spasi dan baris baru yang terdapat di dalam tag akan diabaikan oleh browser.
• Semua dokumen HTML harus disimpan sebagai teks murni, yaitu dokumen yang menggunakan format ASCII. Jenis ekstensi yang digunakan bisa htm dan html.
1.1 Struktur Dokumen HTML
Dalam dokumen HTML, terdapat tiga buah tag utama. Tag tersebut diantaranya adalah HTML, HEAD dan BODY. Ketiga tag inilah yang membentuk dokumen HTML. Berikut adalah penjelasan singkatnya:
• Tag HTML berfungsi untuk memberikan pengenal pada dokumen tersebut. Tag HTML ini adalah tag yang harus ada dalam setiap dokumen HTML.
• Tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML tersebut, misalnya informasi judul.
• Tag BODY berfungsi untuk menyimpan berbagai informasi atau data-data yang akan ditampilkan di browser.
1.4 Membuat Dokumen HTML
Kita bisa membuat dokumen HTML hanya dengan skrip sederhana atau dengan skrip yang komplek. Berikut ini adalah penjelasananya masing-masing.
1.4.1 Paling Sederhana
Membuat dokumen HTML paling sederhana adalah dengan hanya menggunakan tag HTML seperti berikut.
<HTML> … </HTML>
Berikut adalah contohnya.
<HTML>
Halo… perkenalkan, saya adalah dokumen HTML…
</HTML>
Tag HTML adalah tag yang berpasangan. Kita harus mengawali dengan tag pembuka di awal dokumen yaitu <HTML> dan mengakhiri dengan </HTML> di akhir dokumen.
1.4.4 Lebih Lengkap
Selain hanya dengan cara paling sederhana, kita juga bisa membuat dokumen HTML dengan cara yang lebih lengkap berikut.
<HTML>
<HEAD> .. </HEAD>
<BODY>
..
</BODY>
</HTML>
1.5 Blok HEAD
Blok HEAD adalah daerah pada dokumen HTML yang digunakan untuk menyimpan informasi tentang dokumen HTML tersebut. Tag yang dapat disertakan dalam blok HEAD adalah TITLE, BASE, ISINDEX, META, NEXTID, STYLE, dan LINK.
1.5.1 TITLE
<TITLE> ..</TITLE> adalah tag yang digunakan untuk membuat judul dokumen HTML. Tag ini hanya boleh berada di dalam blok HEAD yang merupakan bagian untuk menaruh informasi dari dokumen HTML tersebut. Teks di dalam blok TITLE merupakan nama default jika kita ingin menyimpan dokumen HTML yang telah kita buka dengan browser. Berikut adalah cara penulisan TITLE.
<HEAD>
<TITLE> Judul Dokumen HTML </TITLE>
</HEAD>
Berikut ini adalah poin-poin yang harus diketahui untuk membuat judul dokumen HTML:
• Tag TITLE hanya boleh berada di dalam blok/bagian HEAD.
• TITLE bukan merupakan bagian isi dari dokumen, TITLE hanya sebagai bagian informasi dari dokumen, sehingga tidak boleh ada tag lain di blok TITLE. Di dalam Blok TITLE hanya boleh terdapat teks biasa.
• TITLE tidak ditampilkan di jendela browser, namun TITLE akan ditampilkan di title bar jendela browser seperti gambar berikut.
• Judul dibatasi sampai 64 karakter. Apabila judul yang dibuat melebihi 64 karakter, judul tersebut oleh browser akan dipotong pada 64 karakter pertama.
• Judul dapat dijadikan bookmark dalam browser.
1.5.2 META
<META> ..</META> adalah tag HTML yang digunakan untuk menspesifikasikan informasi dari suatu dokumen yang tidak terkait dengan <BODY>. META Banyak digunakan untuk mendeskripsikan dokumen yang isinya adalah keyword untuk menemukan dokumen tersebut. Kebanyakan mesin pencari / search engine menggunakan informasi yang terdapat dalam META untuk mengindeks dokumen tersebut dalam database mereka. Entah mesin pencari terkenal seperti Google menggunakan META atau tidak penulis kurang tahu, itu adalah rahasia dari pihak Google. Yang jelas META dalam kebanyakan kegunaanya adalah digunakan untuk mengindeks dan memberi informasi pada mesin pencari. Format dan letak penulisan META adalah sebagai berikut.
<HEAD>
<TITLE> … </TITLE>
<META NAME =”…” CONTENT =” … “>
</HEAD>
Berikut adalah contoh penggunaan META.
<head>
<title>Tohari sang programmer…</title>
<meta name=”description” content=”Ahmad Tohari adalah programmer VB cap ikan teri, cap uget-uget..”/>
<meta name=”keywords” content=”programmer, visual basic, ahmad tohari”/>
</head>
1.6 Blok BODY
Blok BODY adalah blok atau daerah di mana isi dari dokumen HTML di tempatkan. Pada daerah BODY inilah yang pada nantinya ditampilkan pada halaman browser. Pada bagian BODY ini pula sebagian besar dokumen HTML berada. Pada bagian sebelumnya, yaitu pada bagian HEAD kita hanya bisa menempatkan dokumen teks, tidak demikian pada bagian BODY. Pada bagian BODY ini kita bisa menempatkan suara, animasi, video, gambar, form, frame dan lain-lain.
Bab IV
Memformat Dokumen HTML
Dokumen HTML yang telah kita buat dan kita letakkan di blok BODY, dapat kita format sesuai keinginan dengan meletakkan tag-tag yang sesuai. Berikut dijelaskan masing-masing tag yang dapat digunakan untuk memformat tampilan dokumen HTML di browser. Perlu diingat bahwa browser yang digunakan untuk menampilkan adalah browser setandar komputer seperti Internet Explorer, Mozila Firefox, Opera dan lain-lain, bukan browser sederhana yang terdapat di PDA atau handphone.
4.1 Heading
Heading digunakan untuk membuat judul dalam dokumen HTML. Kita bisa memilih ukuran huruf dan posisinya. Ukuran huruf yang ditawarkan adalah ukuran 1 sampai dengan 6. Ukuran 1 adalah ukuran yang paling besar, ukuran 6 adalah ukuran yang paling kecil. Format penulisanya adalah sebagai berikut.
<h1> … </h1>
<h2> … </h2>
<h1> … </h1> <h4> … </h4>
<h5> … </h5>
<h6> … </h6>
Heading mempunyai atribut align yang bisa kita gunakan untuk menentukan rata kiri, rata tengah atau rata kanan. Berikut adalah format penulisanya.
<h1 align =”..”> .. </h1>
<h2 align =”..”> .. </h2>
<h1 align =”..”> .. </h1>
<h4 align =”..”> .. </h4>
<h5 align =”..”> .. </h5>
<h6 align =”..”> .. </h6>
Keterangan:
Align bisa diisi dengan:
○ right
○ center
○ left
☼ Apabila align tidak disertakan, maka secara default heading akan rata kiri (left).
Berikut adalah contoh penggunaan fungsi heading.
<html>
<body>
<h1 align=”center”> Halu, aku judul paling besar!!.. </h1>
</body>
</head>
4.2 Paragraf
Untuk membuat paragraf baru, tag yang digunakan adalah <P>. Tag <P> bisa digunakan secara tunggal ataupun berpasangan. Yang mana, kita bisa menuliskan tag tersebut satu saja yaitu <P> atau berpasangan yaitu <P> …</P>. Tentu saja, bila kita ingin segera mengakhiri paragraf untuk membentuk baris baru, kita harus mengakhirinya dengan tag penutup. Berikut adalah format penulisan format paragraf.
<P> … </P>
Atau bisa juga cukup dengan <P> …
Format penulisan paragraf yang lebih lengkap adalah sebagai berikut:
<P ALIGN=”..”> … </P>
Keterangan:
Align digunakan untuk menentukan posisi paragraf yang dibuat. Posisi yang bisa dipilih adalah sebagai berikut:
○ right
○ center
○ left
4.1 Baris Baru / Line Break
Garis baru dalam HTML bisa kita buat dengan menuliskan tag <BR>. Tag <BR> adalah tag tunggal sehingga kita tidak perlu menutupnya di akhir sesi. Fungsi dari tag <P> dan tag <BR> mempunyai sedikit kemiripan. Keduanya akan membentuk baris baru, namun pada <P> sebelum baris baru tersebut selalu disertakan dengan baris kosong, sedangkan <BR> tidak menyertakan baris kosong.
4.4 Garis Horisontal / Horisontal Rule
Garis horisontal bisa dibentuk dengan tag <HR>. Tag <HR> adalah tag tunggal, sehingga kita tidak perlu menutup tag tersebut diakhir sesi. Tag <HR> akan membentuk garis horisontal sepanjang browser. Namun dengan berbagai atribut tambahan, kita bisa mengatur garis horisontal tersebut sesuai kebutuhan.
Penulisan tag <HR> yang sederhana adalah sebagai berikut:
<HR>
Keterangan: Tag ini akan membentuk garis horisontal sepanjang browser.
Penulisan tag <HR> yang lebih lengkap adalah sebagai berikut:
<HR ALIGN=”..” SIZE=”..” WIDTH=”..” COLOR=”..”>
Berikut adalah contoh penggunaan tag <HR>.
<html>
<body>
<hr size=”6″ width=”50″ align=”left” color=”green”>
</body>
</html>
4.5 Spasi
Membuat spasi yang lebih dari satu spasi di dokumen HTML tidak semudah kita menspasi tag atau dokumen yang kita ketik. Kalaupun kita sudah memberi spasi panjang dari dokumen yang kita ketik, tetap saja browser mengabaikan dan hanya memberi satu spasi. Untuk memberi spasi yang lebih dari satu berturut-turut atau spasi panjang dari dokumen HTML kita, kita bisa menggunakan teknik yang berlaku sekarang. Pada mulanya, untuk memberi sapsi ganda kita bisa menggunakan tag <spacer type=”..” size=”..”>, namun itu hanya berlaku untuk browser Netscape dan itupun sekarang sudah tidak berlaku. Untuk membuat spasi ganda, kita bisa menggunakan tag atau keyword sebagai berikut:
Penggunaan tag tersebut adalah sebagai berikut. Bila kita membuat satu spasi, kita cukup menspasi langsung dengan menekan tombol spasi di keyboard. Bila kita membutuhkan dua spasi, maka kita bisa menspasi dengan satu spasi dengan menekan keyboard dan spasi yang satunya lagi dengan satu tag diatas. Bila kita ingin dokumen HTML kita mempunyai 1 spasi berturut-turut, maka kita bisa membuat spasi yang pertama dengan menekan tombol spasi di keyboard dan spasi kedua dan ketiga dengan mengetikkan tag dua kali. Begitu juga seterusnya jika kita ingin membuat spasi yang panjang, kita bisa menggunakan cara di atas.
4.6 Format Font
Dalam membuat dokumen teks, kita selalu memerlukan pemformatan teks yang kita buat tersebut agar menjadi indah, mudah di baca dan sesuai kebutuhan. Untuk memformat teks atau font yang kita ketik, kita bisa menggunakan tag <FONT> dan memformatnya dengan berbagai atribut yang didukung oleh tag tersebut. Tag <FONT> adalah tag berpasangan sehingga kita harus menutupnya dengan tag penutup tersebut </FONT>. Bila tidak kita tutup, browser akan mengabaikan tag kita tersebut. Berikut adalah format penulisanya.
<FONT> … </FONT>
Tag <FONT> bisa kita tambahi dengan beberapa atribut yang didukungnya, diantaranya atribut size yang digunakan untuk menentukan ukuran font, atribut face yang digunakan untuk menentukan jenis font, dan atribut color untuk menentukan warna dari font yang kita ketik. Berbagai atribut tersebut bisa kita gunakan beberapa atau semuanya. Format penulisanya adalah sebagai berikut.
<FONT SIZE=”..” FACE=”..” COLOR=”..”> … </FONT>
Keterangan: □ SIZE, digunakan untuk menentukan ukuran sebuah teks dengan ukuran 1 sampai dengan 7. Ukuran 1 untuk menampilkan teks paling kecil, ukuran 7 untuk menampilkan teks paling besar.
□ FACE digunakan untuk menentukan jenis font / huruf dari dokumen HTML Anda di browser.
□ COLOR digunakan untuk menentukan warna dari font / huruf dokumen HTML. Ada dua cara memberi nilai pada atribut COLOR ini, yaitu dengan menunjuk langsung nama warna yang di maksud dalam bahasa Inggris, atau bisa juga dengan kumpulan warna RGB. Jika menggunakan RGB, nilai yang diberikan harus selalu diawali dengan tanda pagar (#).
Berikut adalah contoh penggunaan tag <FONT>.
<html>
<body>
<font size=”6″ face=”arial” color=”blue”>Halu super tohari!!, aku memanggil kamu…</font>
<br>
<font size=”5″ face=”times new roman” color=”#99CC77″>Hai cewek, nama km sapa?? Kenalan yuuk..</font>
</body>
</html>
4.7 Memodifikasi Font
Teks yang kita ketik bisa kita modifikasi perwajahanya dengan tag-tag yang dimiliki oleh HTML. Berbagai modifikasi yang dilakukan untuk memanipulasi tampilan font cukup dengan tag-tag yang digolongkan dengan tag fisik sebagai berikut.
Tag Keterangan
<B> … </B> Membuat huruf tebal
<U> … </U> Membuat teks dengan garis bawah
<I> … </I> Membuat teks miring / italic
<S> … </S> Membuat teks yang ada coretan ditengahnya
<STRIKE> … </STRIKE> Membuat teks yang tercoret
<TT> … </TT> Membuat teks seperti diketik di mesin ketik tradisional
<SUB> … </SUB> Membuat teks subskript
<SUP> … </SUP> Membuat teks superskript
<SMALL> … </SMALL> Membuat teks cetak kecil
<BIG> … </BIG> Membuat teks cetak besar
<BLINK> … </BLINK> Membuat teks berkedip-kedip – Berlaku untuk browser Mozilla Firefox dan Opera – Tidak berlaku pada browser Internet Explorer, untuk browser lain penulis belum mencobanya.
4.8 Background
Pada tulisan sebelumnya telah dijelaskan bahwa dokumen HTML yang di tampilkan di jendela browser adalah dokumen yang terdapat di blok BODY. Pada tag <BODY>, kita bisa menambahkan atribut untuk menentukan background / latar belakang dari dokumen kita. Ada dua pilihan untuk menentukan background, yaitu dengan gambar atau hanya dengan warna. Bila kita menentukan background dengan gambar, kita harus terlebih dahulu menyiapkan file gambar yang akan kita jadikan latar belakang. File gambar yang dapat dijadikan latar belakang diantaranya adalah JPG, BMP dan GIF. Bila kita hanya ingin latar belakang dokumen HTML kita berupa warna, kita bisa memberi nilai warna yang kita maksud dengan menunjuk nama warnanya dalam bahasa Inggris atau dengan kode RGB. Berikut adalah format penulisanya.
Format penulisan background dengan gambar.
<BODY BACKGROUND=” … “> … </BODY>
Berikut adalah contoh dokumen HTML yang menggunakan background / latar belakang gambar dengan nama file Mawar_merah.jpg.
<html>
<body background=”Mawar_merah.jpg”>
Halu temen2, aku punya latar belakang bunga cantik…
</body>
</html>
Berikut ini adalah format penulisan background dengan warna.
<BODY BGCOLOR=” … “> … </BODY>
Untuk menentukan warna, kita bisa memberi nilai dengan nama warna langsung, misalnya green, yellow, blue, red dan lain-lain. Selain itu, kita juga bisa memberi nilai dengan kumpulan warna RGB. Untuk memberi warna dengan RGB, kita diharuskan mengawali niali RGB tersebut dengan tanda pagar (#).
Berikut adalah teknis dari warna RGB.
R G B
xx xx xx
xx adalah nilai dari hexadesimal. Yang mana kita bisa mengisi dari 00 sampai 99 dan dari AA sampai FF
Contoh:
Nama warna Kode RGB
Hitam #000000
Aqua #00FFFF
Biru #0000FF
Lime #00FF00
Maroon #800000
Fichsia #FF00FF
Abu-abu #808080
Nama warna Kode RGB
Putih #FFFFFF
Hijau #008000
Navy #000080
Olive #808000
Purple #800080
Merah #FF0000
Kuning #FFFF00
Berikut adalah contoh dokumen HTML yang menggunakan latar belakang warna yang ditentukan dengan menyebut langsung warnanya.
<html>
<body bgcolor=”green”>
Hai,aku hijau, cool nich..
</body>
</html>
Berikut ini adalah contoh dokumen HTML yang menggunakan latar belakang warna yang ditentukan dengan menggunakan warna RGB.
<html>
<body bgcolor=”#AABBCC”>
Aku warna biru agak kelabu nich..
</body>
</html>
4.9 Preformated
Dalam tulisan sebelumnya telah dijelaskan bahwa browser akan mengabaikan spasi yang panjang dan hanya di baca satu spasi, mengabaikan baris baru atau enter dan juga mengabaikan tab. Walaupun browser mengabaikan itu semua, kita masih bisa menampilkan dokumen HTML kita sesuai format dan bentuk ketika kita membuatnya di editor. Kita bisa menggunakan tag <PRE> untuk keperluan ini. Tag <PRE> adalah tag yang berpasangan sehingga kita harus menutupnya dengan </PRE> di akhir dokumen yang kita format sesuai dengan editornya tersebut. Berikut adalah format penulisanya.
<PRE> … </PRE>
Berikut adalah contoh dokumen HTML yang menggunakan tag <PRE>.
<html>
<body>
<pre>
I0000000I |B|B|B|B|B|B|B|
I0 0I I8I
I0 0I I8I http://www.tohari.cjb.net
I0IIIII0I I8I
I0 0I I8I Ahmad Thohari 2009
II0I I0II II8II
</pre>
</body>
</html>
Tampilan di browser:
Pada contoh tersebut apa yang diketikkan di editor, dalam blok body yang terdapat di blok <pre> … </pre>, akan ditampilkan di browser sama persis dengan yang di lihat di editor. Salah satu kelemahan dari tag <pre> adalah huruf yang digunakan adalah huruf standar, kita tidak bisa memilih huruf yang kita inginkan.
4.10 Karakter Khusus
Dalam dunia matematika (yang mana ini adalah jurusan kuliah penulis, yaitu Pendidikan Matematika Universitas Negeri Malang), banyak sekali dijumpai karakter khusus yang tidak terdapat di keyboard. Bila kita ingin mengetikkan simbol khusus misalnya dalam rumus, kita harus menggunakan kode yang sudah ditetapkan oleh W1C. Berikut adalah tabel beberapa simbol khusus yang paling sering digunakan yang saya ambil dari buku SAMS Teach Yourself HTML and CSS in 24 Hours, SEVENTH EDITION karangan Dick Oliver, Michael Morrison.
Character Numeric Code Code Name Description
” " " Quotation mark
& & & Ampersand
< < < Less than
> > > Greater than
¢ ¢ ¢ Cent sign
£ £ £ Pound sterling
| ¦ ¦or &brkbar; Broken vertical bar
§ § § Section sign
© © © Copyright
® ® ® Registered trademark
° ° ° Degree sign
± ± ± Plus or minus
2 ² ² Superscript two
1 ³ ¹ Superscript three
. • · Middle dot
1 ¹ ¹ Superscript one
¼ ¼ ¼ Fraction one-fourth
½ ½ ½ Fraction one-half
¾ ¾ ¼ Fraction three-fourths
Æ Æ Æ Capital AE ligature
æ æ æ Small ae ligature
É É É Accented capital E
é é é Accented small e
x × × Multiplication sign
÷ ÷ ÷ Division sign
Perhatikan contoh penggunaanya berikut ini.
Kita ingin mengetikkan berikut ini di dokumen HTML:
Copyright © Tohari 2009 & Copyleft and Registered ® Super Tohari 2009
Maka dalam mengetikkanya di HTML adalah sebagai berikut.
<html>
<body>
Copyright © Tohari 2009 & Copyleft and Registered ® Super Tohari 2009
</body>
</html>
Tampilan di browser:
4.11 Membuat Daftar / List
Dalam dokumen HTML kita bisa membuat daftar atau list dengan lima macam cara. Lima macam cara itu adalah: Unordered list, ordered list, definition list, directory list, dan menu list. Berikut dijelaskan masing-masing dari daftar-daftar tersebut.
4.11.1Unordered List
Unordered list adalah bulet yang mana bulet adalah suatu karakter tertentu, berupa sebuah tanda. Tanda tersebut bisa berupa apa saja, bisa berbentuk lingkaran, kotak, wajik, kaper, daun waru dan sebagainya. Daftar dengan bulet bisa dibuat dengan tag <UL> (unordered list) untuk pembukanya dan </UL> untuk penutupnya. Setiap item di dalam list harus didahului dengan tag <LI> (list item). <LI> adalah tag tunggal sehingga tidak memerlukan penutup, tetapi seandainya diberi penutup juga tidak masalah. Berikut adalah format penulisanya.
<UL TYPE=” …”>
<LI> … </LI>
<LI> … </LI>
…
</UL>
Type yang bisa digunakan diantaranya:
disk, circle, square
Berikut adalah contoh penggunaan unordered list.
<html>
<body>
Daftar materi kuliah Desain Web
<ul type=”circle”>
<li>Pengenalan HTML</li>
<li>Memakai Xara Webstyle</li>
<li>Menggunakan Swishmax</li>
<li>Memakai Frontpage</li>
<li>lain-lain</li>
</ul>
</body>
</html>
4.11.2 Ordered List
Daftar dengan model ordered list adalah daftar dengan tiap itemnya disertai dengan nomor urut. Berikut adalah format penulisanya.
<OL TYPE= …>
<LI> … </LI>
<LI> … </LI>
…
</OL>
Type yang bisa digunakan diantaranya:
1,2,1 → Nomor urut (default)
A,B,C → Huruf kapital
a,b,c → Huruf kecil
i,ii,iii → Romawi kecil
I,II,III → Romawi besar
Berikut adalah contoh penggunaan ordered list
<html>
<body>
Daftar software untuk membuat software:
<ol type=a>
<li>Visual C++</li>
<li>Visual Basic</li>
<li>Visual C#</li>
<li>Borland Delphi</li>
<li>Gambas</li>
<li>Kylik</li>
<li>J2ME Builder</li>
<li>Borland C++</li>
<li>Lain-lain</li>
</ol>
</body>
</html>
4.12 Menampilkan Gambar
Halaman web yang kita buat dapat kita sisipi gambar untuk berbagai keperluan. Diantaranya untuk memeperindah tampilan, atau memang gambar tersebut perlu ditampilkan. Untuk menampilkan gambar di halaman web dalam dokumen HTML berikut pertimbanganya.
► Format gambar yang bisa digunakan diantaranya JPG, GIF, BMP, PNG.
► Ukuran file sebaiknya tidak terlalu besar. Saran yaitu ukurannya tidak lebih dari 100Kb.
► Bila ukuran gambar cukup besar, sebaiknya gambar dipotong dengan ukuran yang kecil-kecil untuk mempercepat waktu loading.
Berikut adalah format penulisan untuk menampilkan gambar di halaman web.
<IMG BORDER=”..” SRC=”..” WIDTH=”..” HEIGHT=”..” ALT=”..”>
Keterangan: SRC → Digunakan untuk menunjuk path dan nama file gambar.
ALT → Digunakan untuk memberi tulisan ketika gambar tidak berhasil dimuat.
WIDTH → Digunakan untuk menentukan lebar gambar, dalam satuan piksel.
HIGHT → Digunakan untuk menentukan tinggi gambar dalam satuan piksel.
Berikut adalah contoh penggunaan tag IMG untuk menampilkan gambar.
<html>
<body>
<img border=”0″ src=”tohari.jpg” width=”720″ height=”480″ alt=”hai, ini dia foto tohari, gambar belum berhasil dimuat”>
</body>
</html>
Tampilan di browser:
4.11 Hiperlink
Salah satu kelebihan dokumen HTML dibanding dokumen lainya adalah adanya hiperlink. Dengan hiperlink kita bisa menuju dari dokumen 1 ke dokumen lainya cukup dengan menunjuk link tersebut. Tag yang digunakan untuk membuat hiperlink adalah <A HREF=..> dan diakhiri dengan </A>. Berikut adalah format penulisanya.
<A HREF=”…” TARGET=”…”> … </A>
Keterangan: <A>…</A> → Menunjuk pada sesuatu yang bisa diklik untuk menuju link yang dimaksud
HREF → Hypertext REFerence, yaitu untuk menuju alamat / URL yang dimaksud.
TARGET → Digunakan untuk menentukan apakah link dibuka di jendela di mana link di klik ataukan dibuka di jendela baru.
_BLANK = Link dibuka dijendela baru
_PARENT = Link dibuka di jendela tempat link diklik
_SELF = Menampilkan link target pada frame yang sama
_TOP = Link dibuka di jendela tempat link di klik
Berikut adalah contoh penggunaan hiperlink dalam dokumen HTML.
<html>
<body>
<a href=”http://www.tohari.cjb.net” target=”_blank”> official website </a>
</body>
</html>
4.14 Membuat Tabel
Membuat table di HTML cukup mudah, Anda hanya memerlukan tiga buah tag yang berpasangan, artinya tiap-tiap tag memerlukan tag pembuka dan tag penutup. Tag- tag tersebut yaitu <TABLE>, <TR>, dan <TD>. Berikut adalah format penulisanya.
<TABLE>
<TR>
<TD> … </TD>
<TD> … </TD>
…
</TR>
</TABLE>
Keterangan:
<TR> adalah Table Row yaitu untuk membuat baris.
<TD> adalah Table Data yaitu untuk membuat kolom.
Selain penulisan seperti di atas, tag <TABLE> juga bisa ditambahi dengan beberapa atribut seperti berikut ini.
<TABLE BORDER=”..” WIDTH=”..” HEIGHT=”..” BACKGROUND=”..”>
<TR>
<TD WIDTH=”..” HEIGHT=”..” BACKGROUND=”..”> … </TD>
<TD WIDTH=”..” HEIGHT=”..” BACKGROUND=”..”> … </TD>
…
</TR>
</TABLE>
Selain tambahan beberapa atribut di atas, masih ada beberapa atribut lain yang didukung oleh tag <TABLE>. Cara penggunaan beberapa atribut lainya adalah sama dengan beberapa atribut di atas. Beberapa atribut tersebut adalah:
Atribut Keterangan
ROWSPAN Menggabungkan beberapa baris menjadi satu
COLSPAN Menggabungkan beberapa kolom menjadi satu.
CELLSPASING Mengatur spasi antara kolom dan tabel
CELLPADDING Mengatur teks dengan batas dalam
ALIGN Mengatur perataan dalam tabel secara horisontal
VALIGN Mengatur perataan dalam tabel secara vertikal
BGCOLOR Mengatur latar belakang tabel
NOWRAP Membuat isi dalam tabel memanjang dalam satu baris
Berikut adalah contoh penggunaan tabel.
<html>
<body>
Jadwal kegiatan Ahmad Thohari hari Minggu
<table>
<tr><td>Jam</td><td>Kegiatan</td></tr>
<tr><td>07.00</td><td> Bangun pagi terus sarapan </td></tr>
<tr><td>08.00</td><td> Mandi di kamar mandi </td></tr>
<tr><td>09.00</td><td> Membantu orang tua </td></tr>
<tr><td>10.00</td><td> Nonton TV </td></tr>
<tr><td>20.00</td><td> Belajar malam </td></tr>
</table>
</body>
</html>
4.15 Membuat Frame
Frame adalah salah satu kemampuan HTML untuk membagi jendela browser menjadi beberapa bagian. Walaupun konsep frame dapat membagi jendela browser menjadi bagian-bagian kecil yang banyak, dalam praktek kebanyakan frame hanya digunakan untuk membagi layar menjadi 2 atau 1 bagian. Sebab bila kita membagi dengan frame yang terlalu banyak, hal itu bisa membuat kita binggung dan juga pengunjung pun pada akhirnya juga ikut bingung.
Membuat frame di HTML berarti kita harus mempunyai lebih dari satu dokumen yang ditampilkan dalam satu layar. Satu dokumen untuk membagi layar, sedangkan dokumen lainya untuk isi dari jendela yang kita bagi tersebut.
Berikut adalah format penulisan frame yang paling dasar.
<HTML>
<FRAMESET ROWS=”..” COLS=”..”>
<FRAMENAME=”..” SRC=”..”>
<FRAMENAME=”..” SRC=”..”>
…
</FRAMESET>
</HTML>
Keterangan:
ROWS dan COLS bisa kita beri nilai dengan prosentase (%).
☼ Catatan: Tag <BODY> harus kita hilangkan bila kita membuat frame.
Berikut ini adalah contoh penggunaan frame dengan membagi jendela browser menjadi 2 bagian secara horisontal.
<html>
<frameset rows=”*,80%”>
<frame name=”atas” src=”atas.htm”>
<frame name=”bawah” src=”bawah.htm”>
</frameset>
</html>
4.15.1 Membagi Frame Menjadi Beberapa Baris
Frame dapat kita bagi menjadi beberapa baris seperti berikut ini.
<HTML>
<FRAMESET ROWS=”..”>
<FRAME NAME=”..”>
<FRAME NAME=”..”>
…
</FRAMESET>
</HTML>
4.15.2 Membagi Frame Menjadi Kolom
Frame dapat kita bagi menjadi beberapa kolom seperti berikut ini.
<HTML>
<FRAMESET COLS=”..”>
<FRAME NAME=”..”>
<FRAME NAME=”..”>
…
</FRAMESET>
</HTML>
4.15.1 Membagi Frame Menjadi Baris dan Kolom
Frame dapat kita bagi menjadi beberapa baris dan kolom seperti berikut ini.
<HTML>
<FRAMESET ROWS=”..” COLS=”..”>
<FRAME NAME=”..”>
<FRAME NAME=”..”>
…
</FRAMESET>
</HTML>
Berikut ini adalah contoh penggunaan frame dengan membagi jendela menjadi 4 bagian, yaitu secara vertikal dan secara horisontal.
<html>
<frameset rows=”10%,*” cols=”20%,*”>
<frame name=”atas_kiri” src=”atas_kiri.htm”>
<frame name=”atas_kanan” src=”atas_kanan.htm”>
<frame name=”bawah_kiri” src=”bawah_kiri.htm”>
<frame name=”bawah_kanan” src=”bawah_kanan.htm”>
</frameset>
</html>
4.15.4 Mengatur Border dan Scrolling pada Frame
Halaman HTML yang lebar atau tinggi yang lebar atau tingginya melebihi jendela bowser akan ditampilkan dengan layar penggulung (scrollbar). Hal ini adalah pengaturan setandar bila kita tidak menambahkan atribut SCROLLING. Untuk mengatur hal tersebut, yang mana kita bisa mengatur apakah scrollbar (penggulung layar) ditampilkan atau tidak kita bisa memformat penulisan frame seperti berikut ini.
<HTML>
<FRAMESET ROWS=”..” COLS=”..” BORDER=”..”>
<FRAME NAME=”..” SRC=”..” SCROLLING=”..”>
<FRAME NAME=”..” SRC=”..” SCROLLING=”..”>
…
</FRAMESET>
</HTML>
Keterangan:
SCROLLING bisa diisi dengan: YES, NO, AUTO.
Bab V
Form
5.0 Form / Formulir
Form pada HTML fungsinya adalah untuk membuat komunikasi dua arah antara Anda sebagai webmaster dan para pengunjung website Anda. Tidak hanya itu form juga bisa dikreasikan untuk berbagai keperluan, misalnya untuk mendukung e-Comerce. Berikut adalah format penulisanya.
<FORM NAME=”..” METHOD=”..” ACTION=”..”>
</FORM>
METHOD bisa diisi dengan:
POST = Mengirimkan data terpisah pada suatu standar input
GET = Browser mengirimkan informasi yang dikumpulkan oleh form sebagai sebuah string yang ditambahkan URL dari halaman yang diminta
5.1 Kontrol-kontrol Form
Seperti layaknya bahasa pemrograman tingkat tinggi, seperti Visual Basic, Visual C++, Delphi dan lain-lain yang mereka sudah terdapat kontrol-kontrol input, HTML juga mempunyai fasilitas tersebut. Berikut adalah fasilitas kontrol-kontrol yang dimiliki HTML.
5.2 Text Box / Form Input Tipe Teks
Text box fungsinya untuk mengumpulkan informasi string yang tidak terlalu panjang, seperti nama, alamat, dan lain-lain. Berikut adalah format penulisanya.
<INPUT TYPE=”TEXT” NAME=”..” SIZE=”..” MAXLENGTH=”..”>
Keterangan: NAME diisi dengan nama text box kita.
SIZE diisi dengan panjang text box yang kita inginkan.
MAXLENGTH diisi dengan panjang maksimal karakter yang dibolehkan dimaksukkan dalam text box.
Berikut adalah contoh penggunakan input type teks.
<html>
<body>
<pre>
<form name=”formku” method=”post” action=”https://sembodoo.blogspot.com/;
Nama: <input type=”text” name=”teks” size=”20″ maxlength=”15″>
</pre>
</body>
</html>
5.1 Submit, Button and Reset
Submit dan reset adalah tombol dalam HTML yang digunakan untuk memproses input yang telah dimasukkan ke dalam form. Tombol reset untuk membatalkan semua input yang telah diberikan, sedangkan tombol submit untuk memproses input yang telah dimasukkan. Berikut adalah format penulisanya.
<FORM TYPE=”SUBMIT”>
<FORM TYPE=”BUTTON”>
<FORM TYPE=”RESET”>
Pada penulisan di atas tombol akan ditampilkan standar, yaitu tombol bertuliskan submit dan reset. Kita masih bisa menuliskan atribut tambahan seperti berikut ini.
<FORM TYPE=”SUBMIT” NAME=”..” VALUE=”..”>
<FORM TYPE=”BUTTON” NAME=”..” VALUE=”..”>
<FORM TYPE=”RESET” NAME=”..” VALUE=”..”>
5.4 Radio Buttons
Radio button adalah tombol yang memungkinkan kita hanya bisa memilih salah satu dari sejumlah pilihan yang ada. Untuk membuat radio button, berikut adalah format penulisanya.
<INPUT TYPE=”RADIO” NAME=”..” VALUE=”..” CHECKED>
Atribut CHECKED hanya dibolehkan terdapat satu buah pada sekelompok pilihan yang ada. Pada pilihan yang diberi atribut CHECKED menndakan pilihan tersebut merupakan pilihan default. Misalnya semua tidak ada atribibut CHECKED tidak masalah.
Berikut adalah contoh penggunaan radio.
<html>
<body>
<pre>
<form name=”formku” method=”post” action=”https://sembodoo.blogspot.com/;
Pilihlah apa software editing video kesukaan kamu!
<input type=”radio” name=”Software” value=”Adobe_Premiere”>Adobe Premiere
<input type=”radio” name=”Software” value=”Adobe_After Effect” checked>Adobe After Effect
<input type=”radio” name=”Software” value=”Ulead_Media_Studio_Pro”>Ulead Media Studio Pro
<input type=”radio” name=”Software” value=”Sony_Vegas”>Sony Vegas
<input type=”radio” name=”Software” value=”Cannopus”>Cannopus
<input type=”radio” name=”Software” value=”Corel_VideoStudio”>Corel VideoStudio
<input type=”radio” name=”Software” value=”Pinnacle”>Pinnacle
<input type=”radio” name=”Software” value=”Combasen”>Combasen
<input type=”radio” name=”Software” value=”Matrox_Studio”>Matrox Studio
</pre>
</body>
</html>
5.5 Check Boxes
Checkbox adalah tombol pilihan yang memungkinkan kita memilih lebih dari satu dari sekelompok pilihan yang ada. Untuk membuat checkbox, berikut adalah format penulisanya.
INPUT TYPE=”CHECKBOX” NAME=”..” VALUE=”..” CHECKED>
Atribut CHECKED bole ada atau tidak. Bila ada menandakan pilihan yang dimaksud secara default terpilih. Bila tidak ada atribut CHECKED berarti pilihan tersebut secara default tidak terpilih.
Berikut adalah contoh penggunaan check box
<html>
<body>
<pre>
<form name=”formku” method=”post” action=”https://sembodoo.blogspot.com/;
Apa yang membuat seorang cewek bisa kelihatan cantik?
<input type=”checkbox” name=”tampang” value=”Wajahnya_cantik” checked>Wajahnya cantik
<input type=”checkbox” name=”tampang” value=”Wajahnya_manis”>Wajahnya manis
<input type=”checkbox” name=”tampang” value=”Baik_hati”>Baik hati
<input type=”checkbox” name=”tampang” value=”Montok”>Montok
<input type=”checkbox” name=”tampang” value=”Semok”>Semok
<input type=”checkbox” name=”tampang” value=”Lainya”>Lainya
</pre>
</body>
</html>
5.6 Password Boxes / Form Input Tipe Pasword
Password boxes adalah kontrol input mirip text box namun huruf yang dimasukkan dirahasiakan oleh browser dengan menampilkanya sebagai bullet, asterik atau lainya. Fungsi dari password box adalah untuk mengumpulkan informasi password dari user yang memasukkan. Berikut adalah format penulisan untuk membuat password boxes.
<INPUT TYPE=”PASSWORD” NAME=”..” SIZE=”..” MAXLENGTH=”..”>
Berikut adalah contoh penggunakan input type password.
<html>
<body>
<pre>
<form name=”formku” method=”post” action=”https://sembodoo.blogspot.com/;
Password <input type=”password” name=”kata_kunci” size=”20″ maxlength=”15″>
</pre>
</body>
</html>
5.7 Text Block / Form Area Teks
Text Block Area adalah form input berupa teks atau string yang daerah luasnya bisa kita tentukan. Dengan kontrol ini pengunjung bisa secara leluasa memasukkan input teks karena yang pada umumnya areanya adalah luas. Berikut adalah format penulisan untuk membuat text block area.
<TEXTAREA NAME=”..” COLS=”..” ROWS=”..”>
</TEXTAREA>
Berikut adalah contoh penggunakan input type tekt area.
<html>
<body>
<pre>
<form name=”formku” method=”post” action=”https://sembodoo.blogspot.com/;
Komentar:<textarea name=”komentar” cols=”10” rows=”5”>
</textarea>
</pre>
</body>
</html>
5.8 Menu / Tombol Select
Menu adalah kontrol HTML yang memperbolehkan pemakai untuk memilih dari sejumlah pilihan yang telah ditentukan. Berikut adalah format penulisan untuk membuat menu.
<SELECT NAME=”..”>
<OPTION VALUE=”..” SELECTED> .. </OPTION>
<OPTION VALUE=”..”> .. </OPTION>
<OPTION VALUE=”..”> .. </OPTION>
…
</SELECT>
Berikut adalah contoh penggunakaan menu.
<html>
<body>
<form name=”formku” method=”post” action=”https://sembodoo.blogspot.com/;
Bajakan atau legalkah software kamu?
<select name=”legalitas”>
<option value=”Legal” selected>Legal</option>
<option value=”Bajakan”>Bajakan</option>
</select>
</body>
</html>
5.9 Form Input Type Image
Form input type image adalah kontrol dalam HTML yang digunakan untuk memilih gambar. Berikut adalah format penulisanya.
<INPUT TYPE=”IMAGE” NAME=”..” VALUE=”..” SRC=”..” ALT=”..” WIDTH=”..” HEIGHT=”..”>
5.10 Form Input Type File
Form input type file adalah kontrol HTNL yang digunakan untuk memilih file. Berikut adalah format penulisanya.
<INPUT TYPE=”FILE” NAME=”..” SIZE=”..” MAXLENGTH=”..”>
.jpg "sembodoo")
