INFORMATIKA

Dasar-dasar Design Web L I C E N C E
Judul : Dasar-dasar Design Web
Penulis : Komarudin Surya
Copyright : Suryatekno © 2008
Aturan : Materi ini boleh Anda Copy hanya untuk kepentingan Pribadi. Tidak
boleh diperjual-belikan, atau dimanfaatkan untuk kepentingan Komersial.
Pengutipan atau pemindahan sebagian atau keseluruhan materi ke situs
ataupun Media Lain, tidak di ijinkan dengan alasan apapun tanpa seijin
dari Penulis cq: Komarudin Surya.
P E N D A H U L U A N
Kata-kata Web sebenarnya penyederhanaan dari sebuah istilah dalam dunia komputer
yaitu WORLD WIDE WEB yang merupakan bagian dari tekhnologi Internet. World
wide Web atau disingkat dengan nama www, merupakan sebuah sistem jaringan
berbasis Client-Server yang mempergunakan protokol HTTP (Hyperteks Transfer
Protocol) dan TCP/IP (Transmisson Control Protocol / Internet Protocol) sebagai
medianya. Karena kedua sistem ini sedemikian erat hubungan nya, maka untuk saat
ini sulit untuk membedakan antara HTTP dengan WWW, mungkin Anda punya
pengertian yang lebih spesifik mengenai kedua istilah tersebut..?, Bila demikian
berbagilah dengan yang lain melalui SSC Forum.
Pada awalnya Internet atau WEB hanya dipergunakan untuk kepentingan Militer yaitu
suatu tekhnologi yang dipergunakan untuk mengirimkan pesan rahasia melalui satelit.
Akan tetapi lama kelamaan tekhnologi tersebut akhirnya meluas, dan bahkan Internet
pada saat ini sudah sama populernya dengan Telephone. Informasi yang dikirimkan
lewat Internet dapat diakses keseluruh dunia hanya dalam hitungan menit bahkan
detik. Sehingga tekhnologi ini menjadi sangat populer dan cepat sekali perkembangan
nya. Boleh dikatakan saat ini Internet sudah tidak menjadi istilah yang asing lagi
ditelinga. Suatu Informasi yang dikirimkan lewat Internet dapat berupa Teks, gambar
maupun multimedia sehingga Internet juga dimanfaatkan oleh perusahaan-perusahaan
untuk mempromosikan Produk-produknya dengan cepat dan mudah.

Informasi dari Internet dapat diakses
Keseluruh dunia hanya dalam hitungan detik. Bahasa dasar dari pemrograman web yaitu HTML (Hyperteks Markup Language).
Jadi sebelum Anda mempelajari bahasa pemrograman Internet yang lain seperti,
PEARL, PHP, JAVASCRIPT, ASP dan lain sebagainya. Anda diharuskan menguasai
dahulu teknik-teknik dasar pemrograman web yaitu HTML.
Untuk mempelajari HTML tidaklah begitu sulit, Karena HTML hanyalah sebuah
bahasa yang berbasis teks dengan perintah-perintah yang mudah di ingat dan
dimengerti oleh kita. Sehingga Anda tidak memerlukan sebuah Compiler (penerjemah
bahasa pemrograman ke bahasa mesin) seperti bahasa-bahasa pemrogaman yang lain.
Anda cukup menuliskan program-program HTML dengan teks editor apa saja seperti
NOTEPAD atau yang sejenisnya, kemudian file itu Anda beri akhiran HTM atau
HTML dan dijalankan atau dipanggil melalui sebuah program browser seperti,
Internet Explorer, FireFox, Opera, Netscape dan sebagainya. File tersebut langsung
diterjemahkan dan ditampilkan di monitor melalui program browser tersebut.
S E B U A H P E R M U L A A N
Anda tentunya sudah tidak sabar lagi untuk segera mempelajari dasar-dasar design
web, dan enggan untuk membaca pengantar-pengantar yang membosankan. Bila
demikian OK kita langsung saja pada pokok bahasan kita yaitu mempelajari teknik
dasar pemrograman web dengan HTML, yang tentunya bila dasar-dasar HTML ini
sudah dikuasai akan mudah mempelajari Bahasa pemrogrman web yang lainnya yaitu
JavaScript, PHP, Perl, ASP, Ruby dan sebagainya.
Sekarang siapkan Program text editor Anda, bila Anda pengguna WINDOWS
jalankan program Notepad atau klik kanan area kosong pada dekstop Komputer Anda
pilih NEW -- TEXT DOCUMENT maka file newtext document.txt akan terbentuk
dengan sendirinya. Klik dua kali file itu maka Anda akan masuk di text editor dari
Notepad dan siap untuk mengetikan perintah-perintah dari program HTML.
Bila Anda pengguna LINUX, OS2, MACHINTHOS dan lainnya, Anda dapat
menjalankan program text editor yang ada pada Operating System tersebut. atau Anda
Dapat mendownload program NOTEPAD++ dari http://www.sourceforge.net, Link
untuk mendownload NOTEPAD PLUS ada di pilar kiri situs ini. NOTEPAD PLUS
ini bisa juga berjalan di WINDOWS, dan sangat dianjurkan oleh saya untuk memakai
NOTEPAD PLUS. sebab program ini selain FREEWARE juga mempunyai fasilitas
dan perlengkapan yang lebih baik dari teks editor yang disediakan oleh Operating
system.
PROGRAM PERTAMA

OK saya anggap anda sudah siap untuk mengetikan program-program HTML di text
editor. Perintah HTML diawali dengan menuliskan tag/perintah <html> dan diakhiri
oleh tag/perintah </html>. Penulisan perintah boleh memakai huruf kecil maupun
huruf besar, tak akan ada pengaruhnya. Akan tetapi untuk memudahkan sebaiknya
Anda gunakan huruf kecil saja. Sekarang Anda ketik perintah dibawah ini di text
editor Anda.
<html>
<body> Ini adalah program HTML pertamaku.
</body>
</html>
Simpan file tersebut dan beri nama file tersebut dengan nama latihan1.html, lalu
jalankan program tersebut dengan browser Anda, kemudian Anda lihat hasilnya, bila
Anda menggunakan NOTEPAD++ Anda dapat memilih perintah RUN kemudian
pilih Launch in IE bila Anda memakai Internet Explorer sebagai browser Anda, Pilih
FireFox bila Anda menggunakan FireFox sebagai browser Anda, atau pilih browser
yang Anda inginkan untuk menjalankan file tersebut.
Mudah..., Hmm memang mudah. Anda dapat membuat teks diatas lebih panjang lagi
kalau Anda mau. Pada Latihan diatas, terdapat perintah <body> dan </body>, peritah
yang ada diantara tag itu adalah content atau isi yang ditampilkan di browser.
sedangkan tag <html> dan </html> hanya sebagai penanda bahwa file tersebut adalah
file HTML, bisakah tag <html> dan tag </html> dihilangkan..?. Hmm.. Bisa saja.
bahkan tag <body> dan tag </body> juga bisa Anda hilangkan. Kalau tidak percaya
coba hapus semua tag yang ada pada latihan1 diatas, kemudian Anda simpan file
tersebut kembali setelah itu Anda jalankan di Browser. Wow.., ternyata bisa juga toh.
Lalu untuk apa perintah tersebut dipasang kalau tanpa perintah itu juga hasilnya
sama.?
Dalam dunia internet terdapat kesimpang siuran dalam hal kompatibelitas antara
operating system yang satu dengan yang lainnya, dan antara browser yang satu
dengan yang lainnya. Nah karena masalah kampatiblitas inilah maka ada suatu badan
atau biro yang memberikan aturan mengenai kompatibelitas dalam penulisan kode-
kode HTML Biro tersebut di dibentuk dengan nama W3C. (World Wide Web
Consortium), Biro ini yang menentukan apakah suatu document HTML itu valid atau
tidak valid. Selain itu biro ini mempunyai hak untuk mengeluarkan aturan mengenai
kode-kode HTML.
Jadi Walaupun pada dasarnya program browser mengerti dan tetap menjalankan file
HTML tanpa adanya tag / perintah <html>, </html>, <body> dan </body> ,
mengingat masalah kompatibelitas ini penting jadi yah tetap saja Anda harus memulai
sebuah file HTML dengan tag <html>, kemudian mengakhiri file HTML dengan tag
</html>.
Mengenai W3C ini saya pribadi masih sedikit bingung dan sedikit agak ragu, masalah
nya begini ; Pada suatu waktu saya mencoba mengecek file HTML yang saya buat
melalui W3C ini, dengan mengirimkan file saya ke http://www.w3c.org/. setelah saya
kirimkan file saya ke situs nya W3C tersebut, kemudian didapatkan hasil dari validasi
file yang saya kirimkan tersebut. pada hasil result tersebut, didapat bahwa file yang
saya kirimkan ke W3C banyak terdapat error. Disana dituliskan baris-baris File
HTML yang saya kirimkan tersebut beserta error result nya. Setelah mengetahui hal
itu saya mencoba mengecek kembali file HTML saya dan saya perbaiki menurut
ketentuan W3C tersebut kemudian saya kirimkan lagi. Setelah dikirimkan lagi untuk
yang kedua kalinya, hasil result nya juga sama masih banyak yang error tetapi sedikit
berkurang. Saya merasa bingung dan sekaigus heran. Padahal saya sudah mengecek semua tag-
tag file HTML yang saya buat itu berdasarkan ketentuan yang diberlakukan oleh W3C
tersebut, bahkan saya sempat menggunakan sebuah program utility untuk HTML
yaitu HTML TIDY yang saya download dari gudang Open Source
http://www.sourceforge.net, setelah di cek oleh program tersebut ternyata file yang
saya buat valid dan memenuhi standar W3C, tetapi begitu saya kirimkan kembali file
tersebut masih saja terdapat error. Karena penasaran kemudian saya mencari situs-
situs yang memasang logo W3C pada situsnya. Konon bila sebuah situs memasang
logo tersebut Halaman-Halaman Web nya telah mendapat pengakuan dari biro
tersebut. Iseng-iseng saya lihat source file nya. Dimanakah gerangan kesalahan saya
tersebut, dengan membandingkan dengan source file dari situs tersebut. Hmm...,
setelah saya bandingkan secara teliti ternyata toh tak ada yang istimewa dari situs
tersebut, perintah-perintah HTML nya sama saja dengan yang saya buat.
Lebih iseng lagi saya mencoba mengirimkan source file yang saya download dari
situs tersebut ke situsnya W3C untuk mengecek validasinya, dan Wooooow..!, suatu
hal yang sudah saya duga sebelumnya, file HTML tersebut pun masih terdapat error
result dari W3C, Nah Loh..!. Bagaimana mungkin situs tersebut berani memasang
logo tervalidasi oleh W3C, bila file-file HTML nya pun masih terdapat error result
dari W3C. Masih penasaran , Kemudian saya download source file dari situsnya
W3C sendiri.., kemudian saya kirimkan kesitus nya sendiri untuk divalidasi. Dan....
Senjata makan Tuan..., file nya juga dilaporkan masih terdapat error result. Wew..
wong file dari situsnya sendiri saja masih ada error result, apalagi file orang lain,
begitu pikir saya berprasangka buruk. Entahlah.. mengapa bisa demikian, ada yang
tahu..?, tolonglah sekali lagi berbagi di SSC Forum Mengenai hal ini. Ok mari kita
lanjutkan materi kita, untuk sementara lupakan saja cerita histeris ini, mungkin nanti
Akan saya Lanjutkan lagi mengenai bug atau kesalahan apa dan bagaimana solusinya
pada akhir cerita saya nanti.
Sampai dimana yah tadi.., Oh iya mengenai tag <html> dan </html>, Jadi pada
umumnya sebuah file HTML mempunyai urutan-uratan perintah sebagai berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Perintah ini sebagai penanda bahwa dokumen yang kita buat berdasarkan aturan yang
dikeluarkan oleh W3C dan sesuai dengan perintah HTML 4.0. Perintah ini wajib
Anda tuliskan diatas file HTML bila Anda ingin mem validasi kan file Anda ke W3C.
Tanpa adanya perintah ini file HTML Anda dijamin akan error 100% bila dikirimkan
ke W3C.
<html>
<head>
Isi dari Header atau pembuka yang berisi tag-tag berikut:
<title> Judul Halaman Web </title>
<meta name="author" content="Nama programer atau pembuat file HTML">
<meta name="description" content="Keterangan mengenai isi dari halaman Web">
<meta name="keywords" content="Kata Kunci yang ada pada Halaman Web">
Dan sederetan perintah META lainnya yang akan dibahas nanti.
<link rel="stylesheet" type="text/css" href="lokasi file CSS">
Bila Anda memakai file CSS External perintah diatas dituliskan disini
Untuk perintah CSS (Cascading Style Sheet) akan dibahas nanti. </head>

<body>
Isi dari Halaman Web yang akan ditampilkan oleh browser.
</body>
</html>
Perlu diketahui bahwa, program HTML tidak seperti Bahasa pemrograman yang lain
yang mengenal perintah JUMP (melompat dari perintah yang satu keperintah yang
lainnya), jadi program HTML akan dikerjakan oleh Browser dari atas kebawah dan
tidak bisa balik lagi keatas. Dan juga dalam pembuatan file HTML sedapat mungkin
hindari karakter-karakter yang merupakan ciri khas dari perintah-perintah HTML
seperti, karakter < , > dan ; .
Sekarang kita kembali pada latihan1.html yang telah kita buat sebelumya tadi. Pada
file latihan1.html yang telah Anda buat di muka tadi hanya bentuk perkenalan, setelah
Anda mengetahui urut-urutan perintah HTML sekarang coba Anda rubah file
latihan1.html tadi menjadi seperti dibawah ini.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Latihan Membuat File HTML</title>
<meta name="author" content="Malih Tongtong">
<meta name="description" content="Uji coba pembuatan file HTML yang
sederhana">
<meta name="keywords" content="Latihan,HTML,Malih,berjalan,baik,atau,tidak">
</head>

<body>
Ini adalah program HTML pertamaku.
</body>
</html>
Setelah Anda simpan file diatas, sekarang Anda coba lagi menjalankan nya dengan
browser. Apakah Anda melihat perbedaan nya..?, Bila Anda jeli tentunya Anda akan
melihat sedikit perbedaan pada tampilan browser Anda, dimana..?.
Tampilan dari file latihan1.html sebelum mengikuti aturan
Sudah menemukan perbedaan nya..?, yah memang ada sedikit perbedaan tampilan
pada browser antara file yang pertama kali dibuat dengan yang terakhir ini. Perbedaan
nya ada pada bagian atas browser Anda. Pada file pertama sebelum diberi tag <title> ,
tulisan pada bagian atas browser hanya menyatakan lokasi dari file latihan1.html
ditaruh. Sedangkan pada file yang terakhir dibuat setelah memasukan perintah <title>
, maka tulisan diatas browser menjadi kata-kata yang dituliskan diantara tag <title>
dan </title>. Pada contoh diatas tulisan nya menjadi Latihan Membuat File HTML.
Anda dapat merubah judul Halaman ini sesuka hati Anda, yang penting judul tersebut
harus ada diantara tag <title> dan </title>. serta penulisan perintahnya harus ada
diantara tag <head> dan </head>.
Arti dari perintah-perintah META

Setelah Anda mengenal perintah <title> serta </title> dan mengetahui fungsinya,
selanjutnya mungkin Anda akan menanyakan arti dari perintah <meta> . Pengertian
META itu sendiri dalam HTML dapat berarti perintah yang tersembunyi, perintah
yang menjadi acuan, perintah yang menjadi standar baku, dan sebagainya, sehingga
bila diterjemahkan dalam konteks bahasa sedikit sulit menjelaskannya makna dari
kata META ini.
Perintah meta dibedakan dari nama (name) yang tertulis, dan isi/arti dari perintah itu
(content). Jadi perintah META harus mempunyai atribut NAME dan atribut
CONTENT dalam penulisannya. Adapun nama-nama dari perintah META yang
sering dipergunkana oleh kebanyakan situs antara lain:
author : Atribut yang menyatakan tentang pembuat atau programer file
tersebut.
audience : Atribut yang digunakan untuk mengaktifkan pilihan multimedia yang ada pada halaman web itu. Biasanya isi content dari perintah
meta ini cuma kata ALL atau DISABLE
copyright : Atribut yang menyatakan tentang hak cipta dari file tersebut.
content-
type
: Berbeda dengan perintah meta yang lain, perintah meta ini
digunakan sebagai pemberitahuan kepada browser tentang standar
baku dari format bahasa dan kode yang digunakan, beberapa
standar kode yang berlaku antara lain : ANSI, iso-8859-1, UTF-8
dan sebagainya. Penulisan perintah meta ini boleh dikatakan wajib
bila kita menggunakan karakter-karakter tertentu yang akan di
tampilkan di browser misalnya karakter huruf Arab, jepang, china,
dsb. contoh format penulisannya sebagai berikut :
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
description : Atribut yang digunakan untuk menerangkan isi dari suatu halaman
web atau keterangan mengenai maksud dan tujuan situs itu sendiri
bisa juga sebagai penjelasan dari suatu produk dan sebagainya.
generator : Atribut yang digunakan sebagai pemberitahuan bahwa file ini
dibuat oleh suatu software atau program yang disebutkan di dalam
isi content.
keywords : Atribut yang digunakan sebagai kata kunci untuk pencarian kata
pada file tersebut, masing-masing kata kunci dipisahkan dengan
tanda koma.
robots : Atribut yang digunakan sebagai pemberitahuan kepada Search
Engine seperti GOOGLE, agar semua kata yang akan di index
mengikuti link-link yang ada pada halaman tersebut, isi content
dari perintah meta ini hanya kata ALL yang berarti Semuanya.
revisit-
after
: Atribut yang digunakan sebagai pemberitahuan kepada Search
Engine seperti GOOGLE, agar kembali mengecek dan mengindex
halaman web ini dalam waktu yang ditentukan. isi content nya
menunjukan lamanya waktu, Contoh : < meta name="revisit-after"
content="2 days"> , untuk menyatakan 2 hari.
Masih banyak lagi perintah-perintah dari META ini, daftar diatas adalah beberapa
perintah META yang sering dipergunakan oleh kebanyakan situs-situs terkenal.
Perintah META boleh dituliskan boleh juga tidak, saya hanya menyarankan sebaiknya
perintah meta itu tidak dituliskan semuanya karena akan sedikit memperlambat akses
dari pembacaan file. Seperti yang telah diberitahukan pada paragraf diatas, bahwa
program HTML dikerjakan oleh browser mulai dari bagian atas file secara ber-urutan
sampai ke bawah. Sehingga semakin banyak perintah META yang ditulikan diatas
maka akan semakin lama juga akses pemuatan file tersebut di browser.

K E L A H I R A N S E O R A N G D E S I G N E R S E J A T I

Seorang designer Web yang mempunyai rasa seni yang tinggi
akan berpikir, bagaimana caranya membuat suatu tampilan web
agar enak dipandang dan tidak monoton serta tidak
membosankan. Walaupun Seperti yang telah disinggung pada
halaman sebelumnya, bahwa Anda dapat dengan begitu saja
menuliskan informasi yang akan disampaikan pada halaman
web tanpa adanya embel-embel kode, tetapi saya yakin bahwa
Anda tidak puas dengan penampilan teks yang monoton dan
tidak informatif, sebab semua orang tentunya mempunyai rasa
seni dan menyukai keindahan. Nah dari sinilah inspirasi untuk
membuat tampilan web cantik, indah dan tidak menjemukan
terlahir dari diri Anda, sehingga tentunya Anda akan berusaha
bagaimana caranya membuat suatu tampilan web itu semenarik
mungkin.
Untuk membuat suatu tampilan web itu menarik, Anda harus menguasai betul tata
letak, jenis huruf, image-image yang menarik, animasi dan sebagainya. Selain itu
yang penting bagi Anda saat ini adalah menguasai perintah/tag dari HTML untuk
mewujudkan inspirasi Anda itu.
( Image adapted from faboulus game, Copyright © 1999
http://www.dynamicdrive.com )
Thank's for these Game, I really liked it.
Tag / Kode / Perintah dari HTML

Pada Halaman sebelumnya, Anda sudah diperkenalkan tata cara atau aturan penulisan
kode HTML beserta urutan-urutannya. Nah setelah Anda paham mengenai tata cara
penulisan kode-kode HTML sekarang saatnya bagi Anda untuk dibawa lebih jauh
mengenai tag atau perintah yang berlaku pada HTML. Tak perlu banyak pengantar
lagi, sekarang saya akan menjelaskan mengenai TAG HTML ini satu persatu.
1. <center> dan </center>
Tag ini mempunyai fungsi untuk membuat suatu objek berada di tengah suatu bidang
yang ditentukan. Objek itu dapat berupa teks, image maupun tabel. Suatu objek akan
tetap berada di tengah sampai Tag penutup </center> ditemukan. Jadi setelah Anda
memberi Tag <center> jangan lupa untuk memberikan Tag penutupnya yaitu
</center> pada akhir dari objek yang akan diposisikan pada tengah suatu bidang.
Contoh : modifikasi dari latihan1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Latihan Membuat File HTML</title>
<meta name="author" content="Malih Tongtong">
<meta name="description" content="Uji coba pembuatan file HTML yang
sederhana">
<meta name="keywords" content="Latihan,HTML,Malih,berjalan,baik,atau,tidak"> </head>

<body>
<center>
Ini adalah program HTML pertamaku.
</center>
</body>
</html>
Pada file latihan1.html yang belum ditambahkan tag <center> teks berada pada
keadaan default yaitu rata kiri, sedangkan setelah diberi tag <center> maka teks akan
berada pada tengah layar monitor.

2. <b> dan </b>

Tag ini mempunyai fungsi untuk membuat huruf atau karakter yang ditampilkan
menjadi tebal (BOLD).

Contoh penggunaan nya di dalam program :
Ini adalah <b>program HTML</b> pertamaku.
Ini adalah program HTML pertamaku.
Pada contoh diatas, kalimat program HTML diapit dengan tag <b> dan </b> , maka
ketika Anda jalankan di browser kalimat tersebut akan tercetak dengan huruf tebal.

3. <font> dan </font>
Tag ini berfungsi untuk mengatur tampilan jenis, warna, dan ukuran suatu karakter
atau huruf (font), Anda lihat huruf-huruf yang ada pada tutorial ini, warna-warna dari
huruf-huruf itu sengaja saya buat demikian agar Anda dapat membedakan yang mana
Objek, keterangan, dan subjek nya. Huruf pada Objek ini ditandai dengan huruf
berwarna merah, keterangan ditandai dengan huruf hitam dan subjek dengan warna
biru.
Atribut dari Tag <font> ini ada beberapa jenis antara lain :
a.
color
: Untuk merubah warna dari huruf atau karakter.
b.
size
: Untuk merubah ukuran huruf, besar kecilnya ukuran
huruf di deklarasikan dengan angka 1 sampai 6.
c.
face
: Untuk merubah jenis dari huruf yang akan kita gunakan
seperti Arial, Times New Roman, Verdana dan
sebagainya. Atribut color :
contoh penggunaan nya di dalam program :

<font color="black">Tulisan ini berwarna hitam</font>
<font color="red">Tulisan ini berwarna merah</font>
<font color="blue">Tulisan ini berwarna biru</font>
<font color="green">Tulisan ini berwarna hijau</font>
<font color="white">Tulisan ini berwarna putih</font>
Anda dapat merubah warna dari huruf atau karakter sesuka hati Anda, contoh diatas
hanya beberapa warna saja yang di sajikan. Selain dengan nama warna dalam bahasa
inggris, Anda juga dapat menggunakan kode HEXA seperti pada table dibawah ini.
DAFTAR WARNA - WARNA DAN KODE NYA
#000000 #333300 #003366 #333399
#800000 #808000 #008080 #666699
#FF0000 #99CC00 #33CCCC #800080
#FF00FF #FFFF00 #00FFFF #993366
#FF99CC #FFFF99 #CCFFFF #CC99FF
#993300 #003300 #000080 #333333
#FF6600 #008000 #0000FF #808080
#FF9900 #339966 #3366FF #969696
#FFCC00 #00FF00 #00CCFF #C0C0C0
#FFCC99 #CCFFCC #99CCFF #FFFFFF
Atribut size :
Contoh penggunaan nya di dalam program :

<font size="1">Huruf ini mempunyai ukuran 1</font>
<font size="2">Huruf ini mempunyai ukuran 2</font>
<font size="3">Huruf ini mempunyai ukuran 3</font>
<font size="4">Huruf ini mempunyai ukuran 4</font>
<font size="5">Huruf ini mempunyai ukuran 5</font>
Selain dengan angka, Anda juga dapat mendeklarasikan ukuran huruf dengan
besarnya PIXEL contoh : <font size="1px">

Atribut face :
Contoh penggunaan nya di dalam program :

<font face="arial">Huruf ini type ARIAL</font>
<font face="times new roman">Huruf ini type TIMES NEW ROMAN</font> <font face="verdana">Huruf ini type VERDANA</font>
<font face="tahoma">Huruf ini type TAHOMA</font>

4. <u> dan </u>
Tag ini berfungsi untuk memberikan efek garis bawah (underlines) pada suatu huruf
atau karakter.

Contoh penulisannya di dalam program :

Menteri Pendidikan Nasional <u>memberikan sumbangan </u> untuk kaum miskin.

Menteri Pendidikan Nasional memberikan sumbangan untuk kaum miskin.
Pada contoh kalimat diatas kalimat MEMBERIKAN SUMBANGAN diapit oleh tag
<u> dan </u> bila dijalankan pada browser maka kalimat yang di apit oleh tag itu
akan diberi tanda garis bawah (underlines).

5. <br>
Tag ini berfungsi untuk berpindah baris ke baris berikutnya. Misalkan Anda membuat
sebuah karya tulis yang tentunya tulisan itu cukup panjang untuk dibaca, atau Anda
mennginginkan sesuatu kalimat harus berada dibawahnya walaupun kalimat itu hanya
terdiri dari beberapa kata, Anda dapat menggunakan tag <br> untuk memisahkannya.
Untuk Tag <br> tidak perlu ditutup seperti halnya tag-tag yang telah disinggung
diatas. jadi cukup Anda berikan tag <br> dimana Anda menginginkannya.
Contoh penggunaanya dalam program :

Ini baris kesatu, <br>Ini baris kedua, <br>Ini baris ketiga.
Setelah Anda menjalankannya di Browser, maka Kalimat diatas akan menjadi seperti
ini.

Ini baris kesatu,
Ini Baris kedua,
Ini baris ketiga.

6. <p>
Tag ini mempunyai fungsi untuk membuat sebuah paragraf baru. Didalam sebuah
artikel tentunya banyak sekali paragraf-paragraf untuk memisahkan pokok pikiran
yang terkandung dalam kumpulan kalimat tersebut, untuk memisahkan paragraf yang
satu dengan yang lainnya, maka Tag <p> ini digunakan. Atribut dari Tag <p> ini ada
3 jenis yaitu Rata kanan ( align="right" ) , rata kiri ( align="left" ), rata kanan kiri (
align="justify" ). dan rata tengah ( align="center" ). Contoh penggunaan nya di dalam program :
Rata kiri <p align="left">
paragraf yang ada di bagian ini akan disusun berdasarkan
paragraf dengan aturan rata kiri, sehingga semua huruf yang
berada di bagian kiri halaman akan terlihat rapi.
Rata kanan <p align="right">
paragraf yang ada di bagian ini akan disusun berdasarkan
paragraf dengan aturan rata kanan, sehingga semua huruf
yang berada di bagian kanan halaman akan terlihat rapi.
Rata kanan-kiri <p align="justify">
paragraf yang ada di bagian ini akan disusun berdasarkan
paragraf dengan aturan rata kanan-kiri, sehingga semua
huruf yang berada di bagian kanan dan kiri halaman akan
terlihat rapi.
Rata tengah <p align="center">
paragraf yang ada di bagian ini akan disusun berdasarkan
paragraf dengan aturan rata tengah, sehingga semua huruf
akan terpusatkan dibagian tengah.

7. <sub> dan </sub>
Tag ini mempunyai fungsi untuk membuat sebuah huruf atau karakter berada sedikit
kebawah dari huruf atau karakter yang lain. Misalnya kita ingin menuliskan rumus
suatu senyawa kimia, maka tag <sub> ini diperlukan.

Contoh penggunaan nya di dalam program :

H<sub>2</sub>O tampilan di browser : H2O
FeCl<sub>3</sub> tampilan di browser : FeCl3
CO<sub>2</sub> tampilan di browser : CO2

8. <sup> dan </sup>
Tag ini merupakan kebalikan dari tag <sub>, bila kita ingin membuat suatu huruf atau
karakter agak sedikit keatas maka tag <sup> ini diperlukan. Misalnya kita ingin
menuliskan suatu persamaan matematika maka kita gunakan tag ini untuk membuat
suatu karakter atau huruf berada sedikit diatas yang lainnya.

Contoh penggunaan nya di dalam program :
X <sup>2</sup> + Y <sup>2</sup> + X + Y + 1 = 0
tampilan di browser : X
2
+ Y
2
+ X + Y + 1 = 0

9. <i> dan </i>
Tag <i> ini berfungsi untuk membuat huruf atau karakter menjadi ITALIC.

Contoh penggunaan nya di dalam program :

Menteri Pendidikan Nasional <i>memberikan santunan</i> untuk anak yatim piatu

Kalimat diatas bila di jalankan pada browser menjadi seperti berikut ini :
Menteri Pendidikan Nasional memberikan santunan untuk anak yatim piatu

10. <hr>
Tag ini berfungsi untuk memberikan garis batas. Anda lihat Halaman web ini, Untuk
memisahkan Materi yang satu dengan yang lain saya memberi batas dengan garis.
Yah itulah kegunaan dari tag <hr>

11. <ol>, <li>, </li> dan </ol>
Terkadang suatu tulisan perlu diberi penjelasan dengan tanda-tanda tertentu, agar si
pembaca memahami bahwa tulisan itu merupakan satu kesatuan yang terdiri dari
beberapa point. Sebagai contoh sekali lagi Anda perhatikan Halaman web ini. Untuk
memperjelas sesuatu bagian dari pokok pembahasan, saya menggunakan angka-angka
yang merupakan point-point dari suatu bahasan dalam satu kesatuan. Tag ini saya beri
nomor urut ke 11. Dengan perintah atau tag <ol> ini maka nomor urut akan dibuat
secara otomatis.>

Contoh penggunaan nya di dalam program :
Jadwal kegiatan untuk hari ini :
<ol>
<li>Mandi.</li>
<li>Sarapan pagi.</li>
<li>Berangkat ke Kantor.</li>
<li>Meeting dengan Kepala Bagian.</li>
<li>Pulang dari Kantor.</li>
<li>Mandi Sore.</li>
<li>Istirahat.</li>
</ol>
Maka setelah dijalankan pada browser akan tampak sepertidi bawah ini :

Jadwal kegiatan untuk hari ini :
1. Mandi
2. Sarapan pagi
3. Berangkat ke Kantor
4. Meeting dengan Kepala Bagian 5. Pulang dari Kantor
6. Mandi Sore
7. Istirahat
Perhatikan.., setiap item di apit oleh tag <li> dan </li>, dan Tag <li> , </li> ini harus
berada diantara Tag <ol> dan </ol> .

12. <ul>, <li>, </li> dan </ul>
Tag ini hampir mirip dengan tag <ol> diatas, bedanya adalah item-item nya bukan
ditandai dengan angka melainkan ditandai dengan titik atau DOT yang besar.
Contoh penggunaan nya di dalam program :
Jadwal kegiatan untuk hari ini :
<ul>
<li>Mandi</li>
<li>Sarapan pagi</li>
<li>Berangkat ke Kantor</li>
<li>Meeting dengan Kepala Bagian</li>
<li>Pulang dari Kantor</li>
<li>Mandi Sore</li>
<li>Istirahat</li>
</ul>

Maka setelah dijalankan di Browser akan terlihat seperti dibawah ini.

Jadwal kegiatan untuk hari ini :
• Mandi
• Sarapan pagi
• Berangkat ke Kantor
• Meeting dengan Kepala Bagian
• Pulang dari Kantor
• Mandi Sore
• Istirahat

Wow...! Sampai disini, bila Anda menguasai tag-tag yang telah disajikan diatas. Saya
ucapkan selamat..!, sebab dengan beberapa TAG itu KELAHIRAN SEORANG
DESIGNER SEJATI dimulai.

D E S I G N E R S E J A T I T U M B U H D E W A S A
Waktu pun terus berlalu, setapak-demi setapak di hadapinya.
Kini sang designer mulai memikirkan cara bagaimana
membuat sesuatu yang bermanfaat akan tetapi disukai oleh
banyak orang. Untuk mencari Inspirasi dia berjalan-jalan
keliling kota. Ketika diperjalanan dia melihat banyak sekali
iklan-iklan yang bertebaran di sudut-sudut Kota, mulai dari
spanduk, reklame, sampai neon-neon yang berkelap-kelip.
Aha...!, Saya rasa mungkin tampilan Web akan lebih indah
kalau ditaruh gambar-gambar seperti itu guman nya dalam
hati. Yah betul..! teriaknya kegirangan, sampai tak menyadari
kalau semua penumpang dalam bis kota
yang ia tumpangi memperhatikan nya. Karena merasa diperhatikan oleh semua orang,
dia jadi malu sendiri. Akhirnya dia memutuskan untuk turun saja dari bis kota itu, dan
kembali ke rumahnya untuk meng-aplikasikan pengalaman nya itu.
Image adapted from http://www.designart.com/ with permittion
Dari pengalaman tongtong diatas, ada baiknya kalau kita mengambil hikmahnya. Yah
tentu suatu design Web akan terlihat lebih indah dan menarik bila kita sajikan gambar
atau images disamping teks-teks yang ada. bukankah Anda sendiri suka akan ke-
indahan..?, kalau begitu marilah kita lanjutkan materi kita dengan fokus penempatan
image, animasi dan flash pada design Web kita.
Untuk menempatkan images dalam suatu document HTML tidaklah sulit, Anda
tinggal mengetikan TAG, dan lokasi dari file image itu berada. Image yang dapat
Anda masukan ke Document HTML dapat berjenis BMP, JPG, JPEG, GIF, TIFF, dan
lain sebagainya. Bila Anda ingin memasukan images yang berupa animasi, Anda
dapat memasukan file images berektensi GIF. Tapi saya sarankan kepada Anda,
jangan memasukan file image yang berukuran besar, sebab itu akan mempengaruhi
proses pemuatan file di Browser. Sebaiknya bila Anda ingin menampilkan images
yang berukuran besar harus disediakan Halaman khusus untuk menampilkannya,
dalam arti image tersebut ditampilkan secara tersendiri tanpa ada tag-tag yang lain.
Sebagai contoh Anda dapat membuka Halaman World of Electronics, sesi ANEKA
PROJECT. disitu ada beberapa image yang saya tempatkan pada Halaman tersendiri,
agar tidak mempengaruhi loading file tersebut. Atau Anda juga dapat menggunakan
Tool peng-edit gambar seperti ADOBE PHOTOSHOP, untuk memperkecil ukuran
file tersebut.
Penempatan Images, Animasi dan Flash pada Halaman HTML

Tag untuk menempatkan images pada document HTML sebagai berikut :

<img src="lokasi file" alt="keterangan gambar" border="tebalnya bingkai">

Pada tag diatas ada beberapa atribut yang harus Anda tuliskan untuk menampilkan
suatu image pada Dokumen HTML. Antara lain :
img : Tag ini merupakan inti dari perintah untuk menampilkan image pada Halaman Web.
src : Atribut ini merupakan bagian dari tag yang berfungsi untuk memberitahu
kan kepada browser tentang nama file image yang akan ditampilkan serta
lokasi dari file image itu berada. Misalkan nama file image yang akan
ditampilkan adalah gambar1.jpg dan lokasi file tersebut Anda simpan
pada folder: C:\my document\gambar\, maka penulisannya seperti
berikut ini :
src="file:///C:/my document/gambar/gambar1.jpg"
Anda juga dapat menggunakan url dari situs yang lain, misal gambar
tersebut Anda simpan di http://www.test.com/test-juga. maka penulisan
atribut src nya menjadi seperti berikut ini:
src="http://www.test.com/test-juga/gambar1.jpg"
Agar memudahkan penulisan dan pemanggilan image, saya menyarankan
agar file image tersebut disimpan menjadi satu folder dengan document
HTML yang memanggil file image tersebut, sehingga penulasan atribut src
nya menjadi seperti ini : src="gambar1.jpg"
alt : Atribut ini digunakan untuk memberikan keterangan terhadap images
tersebut. teks yang dituliskan pada atribut ini akan ditampilkan oleh
browser dengan latar belakang kuning ketika mouse mendekati gambar
tersebut.
border : Atribut ini untuk memberikan efek garis tepi, yang besarnya dapat kita
tentukan dengan ukuran pixel, misalnya kita ingin memberikan efek garis
tepi sebesar 2 pixel pada file image, maka penulisannya menjadi seperti ini
: border="2"
contoh penggunaan nya dalam program :
<img src="images/tongtong1.gif" alt="Contoh ke 1" border="0">
<img src="images/tongtong1.gif" alt="Contoh ke 2" border="2">
<img src="images/tongtong1.gif" alt="Contoh ke 3" border="4">

Maka setelah dijalankan di browser akan tampak seperti dibawah ini :

Border = 0 Border = 2 Border = 4
Pada paragraf diatas disebutkan bahwa selain images kita juga dapat menampilkan
animasi pada dokumen HTML. Animasi itu dapat berupa images dengan
Compuserver file yang biasanya ber-ekstensi GIF, Flash animation yang biasanya
berekstensi SWF, Java Applet yang biasanya berekstensi CLASS, dan sebagainya. Untuk file animasi berjenis GIF, penulisan tag nya sama dengan penulisan images
biasa seperti pada ketiga contoh diatas. Sedangkan untuk FLASH dan JAVA
APPLET, diperlukan beberapa tag dan atributnya seperti di bawah ini:

Contoh penulisan TAG HTML untuk menampilkan Animasi Flash :
<object width=384 height=59
classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000"
codebase="http://download.macromedia.com/pub
/shockwave/cabs/flash/swflash.cab">
<param name="movie" value="flash/top.swf">
<param name="quality" value="high">
<param name="loop" value="1">
<param name="menu" value="false">
<param name="wmode" value="window">
<embed src="flash/top.swf"
width=384 height=59
quality=high
menu=false
TYPE=application/x-shockwave-flash
wmode=window
pluginspage="http://www.macromedia.com/shockwave/download
/index.cgi?P1_Prod_Version=ShockwaveFlash">
</embed>
</object>
Uhh..panjang sekali...!, apa ada yang lebih ringkas..?. Hmm.., dalam hal ini memang
saya pernah membaca sebuah Artikel berbahasa inggris yang ditulis oleh : Drew
McLellan dengan judul : Embedding Flash While Supporting Standards. Pada
artikel itu dia berusaha untuk membuat suatu standard penulisan sebuah kode HTML
untuk menampilkan animasi Flash. Akan tetapi hasil penelitian nya belum
mendapatkan standarisasi dari W3C, walaupun di beberapa browser kode HTML hasil
penelitiannya berjalan dengan mulus. Bila Anda punya kesempatan silahkan Anda
membaca Artikel tersebut secara langsung di sini.
Dari hasil kerja Drew McLellan itulah, maka kode atau tag HTML untuk
menampilkan animasi flash menjadi sedikit lebih ringkas, akan tetapi karena Anda
sedang mempelajari dasar-dasar design web, maka Anda juga harus mengerti tentang
tag-tag serta atribut yang digunakan. Jadi ada baiknya Anda mencoba terlebih dahulu
tag HTML untuk flash terdahulu yang sedikit menyeramkan, Itung-itung latihan lah.
Adapun tag ringkas hasil kerja Drew McLellan untuk maksud yang sama seperti tag
HTML sebelumnya, menjadi seperti dibawah ini :
<object type="application/x-shockwave-flash" data="flash/top.swf"
width="384" height="59" title="Surya Science Club">
<param name="movie" value="flash/top.swf">
<a href="http://www.suryascience.co.nr/">Surya Science Club</a>
</object> Setelah di jalankan pada browser maka tag pertama dan yang terakhir ini akan
menampilkan animasi flash yang sama seperti dibawah ini:
Tag HTML untuk menampilkan animasi flash terdiri dari beberapa atribut yang perlu
Anda ketahui antara lain :
object : Tag ini merupakan penanda untuk Browser Internet explorer (IE) dan
kompatibelnya, agar dapat menjalankan flash dengan plugins yang ada.
Untuk Netscape (N) dan kompatibelnya Tag ini tidak berfungsi atau di
abaikan.
width : Atribut ini untuk menentukan lebar dari animasi Flash yang akan
ditampilkan oleh Browser
height : Atribut ini untuk menentukan tinggi dari animasi Flash yang akan
ditampilkan oleh Browser
classid : Atribut ini merupakan penanda atau ID yang di gunakan oleh
Macromedia. Atribut ini tidak perlu disetting biarkan saja seperti itu.
codebase : Atribut ini merupakan kode lokasi yang digunakan oleh Macromedia.
Atribut yang ini juga tidak perlu Anda rubah-rubah biarkan apa adanya,
kecuali Anda sudah seperti McLellan
param : Atribut ini digunakan untuk men-set parameter dari file flash yang
digunakan, atribut param mempunyai beberapa bagian antara lain :
movie Lokasi dari file flash yang akan ditampilkan
quality Kualitas dari file flash yang akan ditampilkan. Pilihannya bisa high,
medium atau low.
loop Untuk menentukan apakah file flash akan diputar ulang setelah selesai. 1
diulang, 0 tidak diulang.
menu Untuk menset menu dari file flash ketika di klik kanan pada file tersebut.
True - menu enable, false - menu disable.
Dan masih banyak lagi yang lainnya, tapi itu sudah cukup untuk sekedar Anda
ketahui.
embed : Atribut ini digunakan oleh Netscape dan kompatibel nya untuk
menjalankan file flash. Sedangkan untuk IE dan kompatibelnya,
parameter ini diabaikan. Parameter ini bukan tag standar yang
divalidkan oleh W3C.
Setelah Anda mengetahui hirarki dari tag HTML untuk Flash, sekarang Anda tinggal
membuat Animasi flash untuk menyemarakan design web Anda. Tidak Bisa..!,
Belajar dong...!, Dimana...? Disini juga ada. Klik aja ini. Setelah Anda cukup pandai
membuat flash tentunya Anda akan sedikit bersemangat untuk mendesign web yang
Anda idamkan, dengan demikan maka Anda sudah cukup dewasa untuk lebih
memperdalam lagi mengenai design web ini. Perlu juga Anda ketahui bahwa bila
Anda sudah mahir dengan pembuatan flash, maka dengan mudah juga Anda dapat
membuat suatu design web yang Trendy. Uh..., ternyata cukup panjang juga materi ini yah. Apa sudah cukup..?. tentu saja
belum karena masih ada satu lagi tatacara penulisan tag HTML untuk animasi yang
lain, yaitu tag untuk menampilkan animasi yang menggunakan Java Applet, yang
biasanya berekstensi CLASS. Untuk yang satu ini, cukup banyak parameter-
parameter yang harus di deklarasikan, tergantung dari jenis program dan keinginan
dari si pembuat animasi tersebut. Selain itu pada browser komputer client harus di
install plugins untuk JAVA APPLET yaitu JAVA 2 RUNTIME ENVIRONTMENT
(J2RE). Bila browser di komputer client tidak di Install J2RE maka Applet tersebut
tidak akan bisa dijalankan.
Kelebihan dari JAVA APPLET ini adalah bersifat OPEN SOURCE, sehingga kita
dapat dengan mudah mencari sumber-sumber yang kita perlukan. Kekurangan nya
adalah animasi ini membutuhkan spesifikasi komputer yang cukup baik, karena bila
tidak tampilan animasi nya akan telihat patah-patah. Saya pernah mencoba
membandingkan antara animasi yang dibuat dengan Flash dan Java Applet ini pada
komputer dengan spesifikasi : Pentium 233 MHZ, memori 64 MB, dan grafik video
sebesar 4 MB. Hasilnya adalah : Flash berjalan normal seperti pada komputer yang
mempunyai spesifikasi lebih tinggi, sedangkan Java Applet bisa jalan tapi terlihat
gejala yang tidak normal. Baru pada komputer dengan speed 400 Mhz applet dapat
berjalan dengan Normal. Jadi menurut saya itulah salah satu penyebab Flash lebih
populer dibandingkan Java Applet. Selain itu untuk dapat membuat animasi dengan
java applet Anda harus mahir dengan bahasa pemrograman JAVA, yang mungkin
bagi seorang pemula akan terasa sedikit kesulitan.
Contoh penulisan TAG HTML untuk menampilkan Animasi Java Applet :
<applet code="jumpingtitle.class" width="400" height="90">
<param name="demicron" value="www.demicron.se">
<param name="reg" value="A00024">
<param name="background" value="ffffff">
<param name="foreground" value="3000ff">
<param name="step" value="2">
<param name="sleeptime" value="50">
<param name="amplitude" value="50">
<param name="tailsize" value="20">
<param name="width" value="400">
<param name="height" value="90">
<param name="font" value="TimesRoman">
<param name="fontsize" value="36">
<param name="italic" value="No">
<param name="bold" value="Yes">
<param name="text" value="Surya Science Club">
</applet>
Tampilan di browser :
( Animasi tidak ditampilkan bila browser Anda belum di install J2RE )
Applet writen by : Anibal Wainstein, copyright © http://www.demicron.se, you can
download these free applet from http://www.javafile.com
Seperti yang Anda lihat diatas, penulisan tag HTML untuk applet ini sebenarnya
cukup mudah di ingat ketimbang flash, selain itu kita dapat merubah dengan cepat
parameter-parameter yang kita inginkan. Seperti pada contoh diatas, tag utama untuk
meng-embed java applet cukup dengan memakai tag < applet + atribut nya > ,
dilanjutkan dengan parameter-parameter yang berlaku kemudian menutupnya dengan
tag </applet>.

Adapun fungsi dan kegunaan dari atribut dan parameternya sedikit mirip dengan flash
hanya saja pen-deklarasian parameter pada JAVA APLLET ini saya rasa Anda juga
tentunya akan lebih mudah untuk membaca nya dan mengerti maksud dari parameter-
parameter yang dituliskan itu. Dengan demikian maka kedewasaan sang designer
akan terlihat bila dia sudah mengerti akan maksud dan tujuan dari pendeklarasian
parameter tersebut.
SANG DESIGNER DAN SEORANG AKUNTING
Suatu ketika sang designer kita ini bertemu dengan seorang wanita cantik yang
meminta bantuannya untuk dibuatkan sebuah katalog untuk promosi perusahaan nya.
Kebetulan sekali wanita cantik yang ditemui nya itu adalah seorang Akuntan
merangkap sebagai sekretaris, maklumlah namanya juga wanita cantik jadi tidak
heran kalau pekerjaan rangkap di embannya.
Karena begitu cantik nya wanita itu maka sang designer kita ini dengan senang hati
membantu, sekaligus memamerkan keahlian nya dengan maksud mengambil hati
wanita itu. Tapi ooh..., untuk membuat katalog itu diperlukan sebuah keahlian menata
tempat dari obyek-obyek yang diperlukan, selain itu dalam katalog yang akan
dikerjakan nya itu diperlukan sebuah TABEL untuk merinci mengenai produk-produk
yang ada. Bukan itu saja, dalam katalog itu juga dibutuhkan suatu FORM ISIAN
untuk kostumer yang akan memilih jenis produk yang di inginkan.
Akhirnya sang designer kita ini berpikir keras, bagaimana
caranya untuk menyelesaikan katalog itu, sambil merenung dia
bertanya-tanya dalam hati. Dapatkah sebuah dokumen HTML
dibuat seperti itu ?, desahnya. Tabel, Form, Tata letak...!, uh...
sulit sekali, keluhnya.
Kini saatnya untuk Anda membantu sang designer kita yang
sedang kebingungan ini. Penempatan obyek, Form dan tabel
dapat dilakukan oleh dokumen HTML, dengan beberapa TAG
dan Atribut. Beritahu kepadanya bahwa pembuatan katalog itu
dapat dia kerjakan dengan baik dan dapat ditampilkan dengan
sempurna. Dan katakan juga padanya bahwa dia tidak perlu
putus asa untuk mendapatkan apa yang dia mau.

PEMBUATAN TABEL, TATA LETAK SUATU OBYEK DAN FORM
Tabel merupakan hal yang paling penting untuk dikuasai oleh seorang designer web.
Karena dengan tabel inilah hampir semua design web dari situs-situs terkenal menggunakannya. Situs ini juga menggunakan tabel dalam hal penempatan obyek-
obyek yang dibutuhkan, sebagai contoh coba Anda perhatikan setiap halaman dalam
tutorial ini. Disitu Anda melihat ilustrasi Gambar dan keterangan Teks di
kolaborasikan antara satu dengan yang lain dengan menggunakan tabel. Dapatkah kita
menggunakan tata letak suatu objek dalam format HTML selain tabel..?, jawabnya
bisa. Selain tabel kita juga dapat meletakkan suatu obyek yang kita inginkan dengan
menggunakan system CASCADING STYLE SHEET, yang biasanya digunakan oleh
program-program WYSIWYG HTML BUILDER, tetapi system ini terkadang tidak
kompatibel dengan beberapa browser. Jadi mungkin saja di browser A tata letak nya
sudah sesuai, tetapi di browser B tata letak nya berbeda lagi, selain itu system ini juga
menggunakan atribut-atribut yang tidak praktis dan cukup membuat pusing, sebab
kita harus menguasai betul pixel-pixel dari suatu browser. Contoh : kita akan
menempatkan suatu obyek katakanlah itu huruf A di pojok sebelah kanan pada baris
ke 5 dari browser. maka penulisan nya menjadi seperti berikut ini :
<div id="text1" style="position: absolute; overflow: hidden; left: 893px; top: 36px;
width: 18px; height: 23px; z-index: 0; ">
<div class="contoh">
<div><font class="contoh1"><b>A</b></font></div>
</div>
</div>
Bisa Anda bayangkan, bahwa untuk menempatkan satu obyek saja sudah begitu
rumit, apalagi harus membuat satu halaman penuh obyek-obyek yang berlainan
posisinya. Memang bila Anda menggunakan Program HTML BUILDER hal itu tidak
terasa kesulitan nya, tapi itu akan membuat Anda menjadi tidak kreatif dan tidak tahu
bagaimana jalannya program dari design yang kita buat sendiri, selain itu penempatan
objek nya menjadi statis tidak dinamis.
Oleh karena itulah penggunaan system ini kurang populer, jadi tetap saja orang
kembali menggunakan tabel untuk menempatkan objek-objek yang dibutuhkan.
Karena semua browser akan menampilkan tata letak yang sama dengan menggunakan
tabel ini. Dan yang terpenting adalah selain kita tahu dimana letak obyek tersebut juga
mudah bagi kita untuk merubahnya bila ada yang akan kita rubah di lain hari.
TAG untuk membuat TABEL yang wajib dikuasai.
<table> : Tag ini merupakan inti dari perintah untuk membuat tabel pada
dokumen HTML
</table> : Tag ini merupakan penutup dari perintah untuk membuat tabel pada
dokumen HTML
<thead> : Tag ini merupakan bagian dari perintah pembuatan tabel. Biasanya
Tag ini digunakan untuk menandakan bahwa tabel yang dibuat
adalah HEADER atau Bagian yang paling atas dari sebuah tabel. dan
dituliskan setelah Tag <table> kemudian harus ditutup dengan
perintah </thead>
<tbody> : Tag ini merupakan bagian dari perintah pembuatan tabel. Biasanya
Tag ini digunakan untuk menandakan bahwa tabel yang dibuat
adalah BODY atau badan dari suatu tabel, bisa juga isi dari suatu table. dan dituliskan setelah Tag <table> kemudian harus ditutup
dengan perintah </tbody>
<tfoot> : Tag ini merupakan bagian dari perintah pembuatan tabel. Biasanya
Tag ini digunakan untuk menandakan bahwa tabel yang dibuat
adalah FOOTER atau bagian akhir dari suatu tabel, bisa juga
merupakan sebuah penutup dari suatu table. dan dituliskan setelah
Tag <table> kemudian harus ditutup dengan perintah </tfoot>
<tr> : Tag ini digunakan untuk membuat BARIS pada suatu tabel, dan
merupakan satu kesatuan dengan perintah <table>, penulisan nya
pun harus setelah Tag ini. Setiap perpindahan BARIS harus ditutup
dengan perintah </tr>
<td> : Tag ini digunakan untuk membuat KOLOM pada suatu tabel, dan
merupakan satu kesatuan dengan perintah <table>, penulisan nya
pun harus setelah Tag ini. Setiap perpindahan KOLOM harus ditutup
dengan perintah </td>
<th> : Tag ini fungsinya hampir sama dengan tag <td> hanya bila kita
menggunakan tag ini, maka border (garis luar) dari tabel tidak
ditampilkan, dan karakter yang ada dalam perintah ini akan di
anggap Header sehingga hurufnya menjadi agak besar dan dicetak
tebal oleh browser. Tag ini merupakan bagian dari tag <tr>,
penulisan nya pun harus sesudah tag <tr>. Atribut dari tag ini adalah
: scope dengan value nya col untuk KOLOM dan row untuk BARIS.
(lihat contoh penggunaannya dibagian bawah)
Untuk atribut-atribut dari tabel akan dibahas pada bagian tersendiri.

Urutan penulisan tabel pada umumnya seperti dibawah ini

<table>
<thead>
<tr>
<td>
isi header atau pembuka dari tabel
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
isi badan atau materi dari tabel
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
isi footer atau penutup dari tabel
</td>
</tr>
</tfoot> </table>
Contoh penulisan nya dalam program
<table cellpadding="5" cellspacing="0" border="1">
<thead>
<tr>
<td colspan="3" align="center">Ini adalah bagian HEADER dari TABEL
</td>
</tr>
</thead>
<tbody>
<tr>
<td>BARIS ke 1 KOLOM ke 1</td>
<td>BARIS ke 1 KOLOM ke 2</td>
<td>BARIS ke 1 KOLOM ke 3</td>
</tr>
<tr>
<td>BARIS ke 2 KOLOM ke 1</td>
<td>BARIS ke 2 KOLOM ke 2</td>
<td>BARIS ke 2 KOLOM ke 3</td>
</tr>
<tr>
<td>BARIS ke 3 KOLOM ke 1</td>
<td>BARIS ke 3 KOLOM ke 2</td>
<td>BARIS ke 3 KOLOM ke 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="center">Ini adalah bagian FOOTER dari TABEL
</td>
</tr>
</tfoot>
</table>
Setelah dijalankan di Browser akan ditampilkan seperti dibawah ini.
Ini adalah bagian HEADER dari TABEL
BARIS ke 1 KOLOM ke 1 BARIS ke 1 KOLOM ke 2 BARIS ke 1 KOLOM ke 3
BARIS ke 2 KOLOM ke 1 BARIS ke 2 KOLOM ke 2 BARIS ke 2 KOLOM ke 3
BARIS ke 3 KOLOM ke 1 BARIS ke 3 KOLOM ke 2 BARIS ke 3 KOLOM ke 3
Ini adalah bagian FOOTER dari TABEL
Contoh yang lain dengan menggunakan Tag <th>
<table cellpadding="5">
<tr>
<th scope="col">Nama : </th>
<th scope="col">Alamat : </th>
<th scope="col">Tanggal lahir : </th>
</tr>
<tr>
<td align="center">Tongtong</td>
<td align="center">Dunia Maya</td>
<td align="center">1 Januari 2015</td>
</tr>
</table>

Setelah Dijalankan di Browser maka akan ditampilkan seperti dibawah ini :
Nama : Alamat : Tanggal lahir :
Tongtong Dunia Maya 1 Januari 2015
Nah setelah Anda paham mengenai hirarki dari pembuatan tabel, sekarang mari kita
terapkan pembuatan tabel untuk men-design sebuah halaman web. Dari Contoh
sebelumnya, Anda sudah diperkenalkan tentang atribut dari sebuah tabel. Atribut
tabel ini penting untuk mengatur tampilan di browser yang merupakan sebuah tabel
yang majemuk. Ada beberapa atribut dari sebuah tabel yang wajib Anda ketahui,
antara lain :
1. cellpadding - Atribut ini dipakai untuk menentukan besarnya jarak bagian
dalam (cell) dengan bagian luar (border) dari sebuah tabel. contoh :
cellpadding="2"
2. cellspacing - Atribut ini dipakai untuk menentukan besarnya jarak cell yang
satu dengan cell yang lainnya. contoh : cellspacing="5"
3. border - Atribut ini dipakai untuk menentukan besarnya border (bingkai)
dari sebuah tabel. contoh : border="2"
4. width - Atribut ini digunakan untuk menentukan lebar dari sebuah tabel,
ukuran ini bisa menggunakan satuan pixel atau persentasi. contoh :
width="75%", width="100%", width="800", width="200"
5. bordercolor - Atribut ini digunakan untuk menentukan warna border atau
garis tepi dari sebuah tabel. contoh : bordercolor="black"
6. bgcolor - Atribut ini digunakan untuk menentukan warna latar dari sebuah
tabel atau cell. contoh : bgcolor="#FFFFFF", bgcolor="#000000",
bgcolor="blue", bgcolor="red"
7. valign - Atribut ini digunakan untuk menentukan posisi Vertikal objek dari
sebuah tabel yang dapat berisi teks maupun gambar, atribut ini dituliskan
dalam perintah pembuatan baris dari tabel / <tr>. Atribut ini punya beberapa
pilihan posisi yaitu :
o top - pilihan ini akan menempatkan objek berada pada posisi teratas
dari cell.
o middle - pilihan ini akan menempatkan objek berada pada tengah cell.
o bottom - pilihan ini akan menempatkan objek berada pada bagian
bawah dari cell. Contoh : <tr valign="top">, <tr valign="middle">, <tr valign="bottom">
8. align - Atribut ini digunakan untuk menentukan posisi Horizontal objek dari
sebuah tabel yang dapat berisi teks maupun gambar, atribut ini dituliskan
dalan perintah pembuatan kolom dari tabel / <td>. Atribut ini juga punya
beberapa pilihan yaitu :
o left - pilihan ini akan menempatkan objek berada pada bagian kiri dari
cell, bila objek berbentuk teks maka teks tersebut akan dijadikan rata
kiri.
o center - pilihan ini akan menempatkan objek berada pada bagian
tengan dari cell, bila objek berbentuk teks maka teks tersebut akan
dijadikan rata tengah.
o right - pilihan ini akan menempatkan objek berada pada bagian kanan
dari cell, bila objek berbentuk teks maka teks tersebut akan dijadikan
rata kanan.
Contoh : <td align="left">, <td align="center">, <td align="right">.
9. rowspan - Atribut ini digunakan untuk menyatukan dua buah baris tabel
menjadi satu kesatuan atau kelompok. atribut ini dituliskan dalam perintah
pembuatan kolom dari tabel / <td>
10. colspan - Atribut ini digunakan untuk menyatukan dua buah kolom tabel
menjadi satu kesatuan atau kelompok. atribut ini dituliskan dalam perintah
pembuatan kolom dari tabel / <td>
Contoh : <td rowspan="2">, <td colspan="2">
Untuk lebih jelasnya, coba Anda perhatikan gambar dibawah ini yang merupakan
tabel yang mempunya 3 buah kolom dan 4 buah baris ( 3 X 4 ).

Keterangan mengenai atribut dari sebuah tabel.

• Garis yang berwarna hitam dan berada paling luar itu disebut border.
• Jarak Antara garis merah dan hitam itu disebut padding.
• Bidang yang berwarna biru langit, abu-abu dan hijau itu disebut cell.
• Jarak antara cell yang satu dengan cell yang lainnya itu disebut cellspacing.
• Cell yang diberi warna hijau merupakan gabungan dari dua buah cell atau
lebih dalam satu kolom (merger) disebut dengan colspan dan dihasilkan dari
perintah colspan • Cell yang diberi warna abu-abu merupakan gabungan dari dua buah cell atau
lebih dalam satu baris (merger) disebut dengan rowspan dan dihasilkan dari
perintah rowspan
Nilai dari atribut-atribut tersebut diukur berdasarkan besarnya pixel. Semakin besar
Anda berikan nilainya maka semakin besar pula jaraknya. Untuk rowspan dan colspan
Anda harus mendeklarasikan banyaknya kolom atau baris yang akan Anda gabung,
misalkan Anda akan menggabung dua buah cell dalam satu kolom, berarti Anda juga
harus menuliskan nya dengan colspan="2", bila Anda menggabungkan tiga buah cell
Anda harus menuliskannya dengan colspan="3" dan seterusnya. Akan tetapi Anda
harus perhatikan baik-baik bahwa cell yang digabung tetap dalam kondisi sebelumnya
misal Anda membuat tabel dengan ukuran 4 X 4, dan ada beberapa cell yang Anda
gabung, tabel tersebut tetap berukuran 4 x 4. Colspan dan Rowspan ini mungkin akan
sedikit membuat Anda berfikir extra dalam penulisan kode tabel nya, untuk itu saya
sangat menyarankan untuk berlatih mengenai ini lebih serius. Agar lebih jelas
mengenai rowspan dan colspan ini cobalah perhatikan contoh penulisan kode tabel
dibawah ini.
<table width="300" cellpadding="5" cellspacing="1" border="5" bordercolor="red">
<tr>
<td align="center">Kolom 1 baris 1</td>
<td align="center">Kolom 2 baris 1</td>
<td align="center">Kolom 3 baris 1</td>
<td align="center">Kolom 4 baris 1</td>
</tr>
<tr>
<td align="center">Kolom 1 baris 2</td>
<td align="center">Kolom 2 baris 2</td>
<td colspan="2" bgcolor="silver" align="center">
Gabungan Kolom 3 dan 4 baris ke 2</td>
</tr>
<tr>
<td rowspan="2" bgcolor="silver" align="center">
Gabungan baris 3 dan 4 kolom ke 1</td>
<td align="center">kolom 2 baris 3</td>
<td align="center">kolom 3 baris 3</td>
<td align="center">kolom 4 baris 3</td>
</tr>
<tr>
<td align="center">kolom 2 baris 4</td>
<td align="center">kolom 3 baris 4</td>
<td align="center">kolom 4 baris 4</td>
</tr>
</table>
Setelah di jalankan di browser maka perintah diatas akan menjadi tabel seperti
dibawah ini :
Kolom 1 baris 1 Kolom 2 Kolom 3 Kolom 4 baris 1 baris 1 baris 1
Kolom 1 baris 2
Kolom 2
baris 2
Gabungan Kolom 3 dan 4
baris ke 2
Gabungan baris 3 dan 4
kolom ke 1
kolom 2
baris 3
kolom 3
baris 3
kolom 4
baris 3
kolom 2
baris 4
kolom 3
baris 4
kolom 4
baris 4
Perhatikan baik-baik contoh penulisan diatas...!. Setelah Anda memberi perintah
colspan maka untuk kolom selanjutnya Anda jangan menambahkan lagi perintah
pembuatan kolom baru / <td>, sebab sudah di merger begitu juga setelah Anda
memberikan perintah rowspan maka untuk baris berikutnya Anda jangan
memberikan perintah untuk membuat baris baru / <tr>. Bila ini Anda lakukan maka
tabel yang Anda buat bentuknya tidak karuan alias kacau. Sekali lagi berlatihlah
dengan serius mengenai ini, serta coba-cobalah untuk membuat gabungan cell yang
lain sesuai yang Anda kehendaki.
Contoh penulisannya dalam program :
<table width="50%" cellpadding="5" cellspacing="0" border="2" bgcolor="silver">
<tr valign="middle">
<td align="right">
Ini adalah Contoh pembuatan tabel dengan menggunakan atribut-atribut yang
dikemukakan diatas, tabel ini berukuran 50% dari bidang yang disediakan dan
mempunyai warna latar silver. Sedangkan teks ini akan disusun berdasarkan aturan
rata kanan.
</td></tr>
<tr valign="middle">
<td align="center">
<img src="master/smalstk.jpg" alt="contoh penempatan images" border="0">
</td></tr></table>
Baris perintah pembuatan tabel ini akan memberikan dua buah baris tabel yang
mempunyai jarak dari bagian dalam tabel (cell) dengan bagian luar (border) sebesar 5
px, spasi antar cell rapat atau tidak diberi spasi, dan border atau garis tepi dari tabel
berukuran sebesar 2 pixel, warna latar dari tabel akan diberi warna silver, sedangkan
konten yang berupa teks akan disusun dalam tabel tersebut berdasarkan aturan rata
kanan. Pada baris kedua tabel tersebut, akan ditempatkan sebuah images yang
ditempatkan ditengah-tengah dari cell yang telah ditentukan.
Bila dijalankan di browser maka perintah tabel diatas akan menjadi seperti dibawah
ini :
Ini adalah Contoh pembuatan tabel
dengan menggunakan atribut-atribut yang
dikemukakan diatas, tabel ini berukuran 50% dari bidang yang disediakan dan
mempunyai warna latar silver. Sedangkan
teks ini akan disusun berdasarkan aturan
rata kanan.

Sekarang cobalah Anda rubah-rubah besarnya nilai atribut dari contoh tabel diatas
sesuai dengan keinginan Anda. Tetapi perlu Anda ketahui bahwa penetapan lebar
tabel dalam persentasi akan mengikuti lebarnya bidang yang disediakan, karena disini
bidang yang saya buat (berwarna orange) hanya sebesar 500 pixel, maka besar
prosentasi nya menjadi 250 pixel (50%).
Yang perlu Anda garis bawahi dari pembuatan tabel adalah : Anda dapat membuat
tabel baru atau tabel yang lain (secondary) didalam sebuah cell yang ada dalam tabel
utama (primary) dan didalam cell tabel secondary Anda juga masih boleh membuat
tabel yang lain.
L A T I H A N
Sebagai sarana latihan cobalah Anda buat tag-tag pembuatan tabel seperti dibawah
ini. Untuk images-imagesnya copy lah images-images berikut ke media penyimpanan
Anda dengan cara mengklik kanan images tersebut dan pilih untuk menyimpan nya.
Sebagai petunjuk cobalah Anda perhatikan, Tabel ini mempunyai 3 buah baris dan 3
buah kolom, ada beberapa kolom yang di merger atau disatukan dengan perintah
colspan sehingga terlihat seperti satu kolom, sedangkan untuk font yang berwarna
cobalah Anda simak kembali perintah pembuatan font pada bab sebelumnya bila
Anda lupa.
Latihan membuat tabel

Ini adalah logo ITB
aaaaaaaaaa
aaaaaaaaaaaaa
aaaaaaaaaaaa
aaaaaaaaaaaaa
aaaaaaaaaaaa
aaaaaaaaaaa aaaaaaaaaa
bbbbbbbbbb
bbbbbbbbbbbbb
bbbbbbbbbbbb
bbbbbbbbbbbbb
bbbbbbbbbbbb
bbbbbbbbbbb
bbbbbbbbbbb ccccccccc
cccccccccccc
cccccccccccc
ccccccccccc ccccccc
cccccccccc
ccccccccc ccccccccc

Ini adalah logo Suryatekno
Bila Anda sudah mampu membuat tabel seperti diatas, saya ucapkan "selamat...,
Anda layak jadi seorang designer..!" mengapa demikian...?, sebab Anda sudah
mampu untuk menempatkan beberapa objek kedalam sebuah tabel yang merupakan
inti dari PEN-DESIGN-AN sebuah WEB.
Apa..? terlalu mudah..!, Hmmm.....OK lah mungkin Anda adalah orang yang jenius
sehingga perlu soal yang lebih menantang sebab soal diatas mungkin terlalu mudah
untuk Anda.. uhhhh...!!, sekarang cobalah Anda buat beberapa design web dibawah
ini dengan kemampuan yang telah Anda peroleh selama ini bila memang soal diatas
Anda anggap terlalu mudah untuk ukuran Anda.

Ok friend.., bila Anda sudah mahir dalam pendesignan sample-sample desigan diatas
berarti Anda sudah cukup mahir dalam hal tata letak sebuah objek di dalam design
web Anda dan sekali lagi saya ucapkan selamat..!, dan tugas Anda dalam
memecahkan masalah Tongtong yang akan merebut hati wanita pujaan nya sedikit
terselesaikan. Tinggal satu langkah lagi untuk menyempurnakan nya yaitu pembuatan
form. Dengan form ini maka Anda dapat berinteraksi dengan pemakai situs Anda.
Bagaimana cara pembuatan form..?, bila Anda sudah yakin untuk melanjutkan ketahap berikut klik saja tombol kehalaman berikutnya, tapi bila belum yakin klik lah
tombol kembali ke halaman sebelumnya untuk mematangkan keahlian Anda.
PEMBUATAN FORM
Form adalah beberapa perintah dalam HTML yang digunakan untuk berinteraksi
dengan pengguna situs, misalnya Anda menginginkan data mengenai Nama, Alamat
dan nomor telepon dari seorang pengguna situs Anda yang mungkin nanti akan
berguna untuk berhubungan lebih lanjut antara Anda dengan orang tersebut, atau
mungkin Anda ingin berkomuniksi melalui surat elektronik (email) dengan seseorang
yang nun jauh disana atau mungkin Anda juga hanya sekedar ingin mengetahui
pendapat dari pengguna situs mengenai suatu masalah yang berhubungan dengan situs
Anda, misalnya Anda menginginkan pendapat mengenai isi materi yang akan dibahas
selanjutnya di situs Anda dengan meminta pendapat dari pengguna situs Anda. Maka
semua hal itu dilakukan dengan perantaraan form.
Pada awal perkembangan sebuah website, tidak dikenal adanya form. Pada saat itu
tampilan website hanya monoton menampilkan teks dan images saja yang walaupun
seindah apapun membuat tampilan website menjadi pasif, karena pengguna hanya
disajikan informasi yang tidak informatif artinya walaupun tampilan web dapat
berpindah-pindah halaman karena adanya hyperlink yang dapat menghubungkan
halaman satu dengan yang lainnya, tetapi pengguna dan penyaji tidak dapat
berinteraksi satu dengan yang lainnya. Pengguna hanya dilakukan sebagai pembaca
seperti layaknya orang membaca buku ditengah hutan belantara tanpa ada orang lain
disampingnya untuk menyatakan ketidak mengertian nya atau pendapatnya tentang
buku tersebut. Setelah ditemukan nya FORM, maka tampilan website menjadi lebih
hidup dan Informatif. Satu hal lagi yang sangat menggembirakan setelah ditemukan
nya pembuatan FORM dalam website, maka bermunculan lah program-program yang
mengkhususkan untuk mengelola FORM seperti PERL, PHP, ASP dan sebagainya,
dan mulai saat itu pulalah sebutan website Dynamis dikenal.
Sekarang kita langsung saja pada pembahasan mengenai perintah pembuatan Form
pada dokumen HTML. Ada beberapa perintah yang harus Anda kuasai untuk
membuat sebuah form ini yaitu :
1. <form> dan </form> - Perintah ini adalah pembuka dan penutup untuk
membuat sebuah form, perintah ini mempunyai beberapa atribut yaitu :
o name - artinya apa nama form yang akan dibuat. - Penamaan form ini
bebas akan tetapi tidak boleh ada spasi. Saya sarankan untuk memberi
nama form ini tidak lebih dari 8 karakter agar mudah diingat.
o action - artinya melalui apa dan kemana form itu akan dikerjakan lebih
lanjut untuk memprosesnya. - Misalnya Anda punya sebuah program
yang akan memproses penanganan form ini, maka alamat atau nama
program tersebut dituliskan disini. contoh : <form action=
"prosesform.php">, <form action="http://www.ujiform.com/
ujilagi.php">
o method - artinya dengan cara apa form ini dikirim. - Ada dua pilihan
pada atribut ini yaitu : get atau post bila Anda memilih get maka form
akan dikirim langsung ke alamat yang dituju, bila Anda memilih post
maka form akan ditransfer melalui paket yang lain misalnya email. o enctype - artinya berbentuk apa form yang akan dikirim. - Dalam hal
ini kita akan mengirim form ke tempat tujuan dengan sarana
ENCRYPTE agar form yang kita kirim dapat dibuka oleh suatu
program yang mendukungnya, hal ini untuk menjaga keamanan data
dalam proses pengiriman (security). Banyak metode encrypte yang
dipakai oleh designer dalam pengiriman form agar nantinya sebuah
data yang akan dikirim tidak dapat dibaca oleh orang lain atau disadap
oleh orang yang tidak berhubungan. contoh : <form
enctype="multipart/form-data">
o target - artinya Pada halaman ini juga, halaman yang lain, atau dalam
suatu frame Proses pengerjaan form tersebut. - Setelah dilakukan
submit maka ada program lain yang akan mengerjakan proses tersebut,
nah proses tersebut dilakukan pada halaman yang sama (self), halaman
baru (blank), atau pada suatu frame pengerjaan proses programnya.
o onsubmit - artinya ketika form dikerjakan program atau aplikasi apa
lagi yang harus dikerjakan. - Misalkan Anda mempunyai sebuah
program eksekusi yang dijalankan setelah kondisi form sudah di
submit, maka program ini dicantumkan pada keterangan onsubmit.
contoh penulisan nya:
<form name="pesan" target="blank"
action="http://suryascience.co.nr/senddata.php" method="post"
enctype="multipart/form-data" onsubmit="cek.js">
contoh dalam program, klik lah tombol ini
o Dan masih banyak lagi atribut-atribut yang lainnya, tetapi ini sudah
cukup untuk menambah bekal pengetahuan Anda mengenai FORM

2. <input name="nn" type="teks" size="xx"> - Perintah ini adalah untuk
menampilkan type masukan berupa teks. - Form ini banyak digunakan untuk
meminta pengguna memasukan sesuatu yang berbentuk teks, misalnya di
website ada pertanyaan : Siapa nama Anda : ? , maka user menjawabnya
dengan memasukan input berupa teks. Panjang form ini dapat diatur dengan
merubah nilai size nya yang berupa jumlah karakter misalkan size="12",
maka panjang form ini adalah 12 karakter. Untuk penamaan sebaiknya jangan
lebih dari 8 karakter dan tidak boleh ada spasi. Contoh penulisan nya :
<input name="email" type="teks" size="12">
Contoh dalam program :
Nama Kamu siapa sih..?
Alamat Kamu dimana...?
Hapus Isian

3. <input name="nn" type="password" size="xx"> - Perintah ini sama
seperti perintah teks di atas, hanya input yang dimasukan ditampilkan dengan
tanda bintang ( * ). - Biasanya jenis perintah ini digunakan untuk memasukan
password atau suatu input yang rahasia, sehingga hanya orang yang
berkepentingan yang tahu isinya.
Contoh penulisan nya :
<input name="rahasia" type="password" size="12">

Contoh dalam Program :
Masukan Password Anda :
Hapus Isian

4. <input name="nn" type="radio" value="cc"> - Perintah radio ini
digunakan untuk menampilkan pilihan yang berbentuk lingkaran yang
ditandai. - Form ini banyak digunakan untuk meminta pengguna memilih
salah satu pilihan yang sudah ditentukan, misalkan Anda ingin meminta
pendapat dari pengguna dengan pertanyaan : Apakah Anda setuju bila Pacar
Anda berjalan bersama saya..?, dan pilihan jawaban nya adalah : Setuju,
tidak setuju, tidak tahu atau dengan syarat. Maka form Radio ini bisa
Anda gunakan untuk memilihnya. Disini user hanya bisa memilih salah satu
pilihan yang Anda tentukan sebagai pengaju pertanyaan. Isi atau content
pertanyaan yang akan diproses dituliskan pada atribut value, atribut checked
dapat Anda gunakan untuk menentukan pilihan default yang sudah ditandai,
jadi walaupun user tidak memilih salah satu pilihan bila Anda menggunakan
atribut ini disalah satu pilihan nya, maka form akan memilih pilihan yang
memakai atribut ini. Contoh penulisan nya :
<input name="radio" type="radio" value="Tidak Setuju">
Contoh dalam Program :
Dari mana Anda mengetahui keberadaan situs ini..?
Dari teman atau famili.
Dari search Engine terkenal.
Dari Link Situs yang lain.
Klik salah satu pilihan maka akan ditampilkan isi dari pilihan Anda...!

5. <input name="nn" type="checkbox" value="cc"> - Perintah checkbox ini
hampir sama dengan perintah radio diatas, akan tetapi user bisa memilih lebih dari satu pilihan yang dikehendaki.
contoh penulisan nya :
Dari Daftar dibawah ini, Makanan mana saja yang Anda sukai...?<br>
<form name="test">
<input name="pilih1" type="checkbox" value="tempe" checked>
Tempe Goreng.<br>
<input name="pilih1" type="checkbox" value="sayur_Asam">
Sayur Asam<br>
<input name="pilih1" type="checkbox" value="ayam_goreng">
Ayam Goreng Mentega.<br>
<input name="pilih1" type="checkbox" value="semur_jengkol">
Semur Jengkol Spesial.
</form>
Perhatikan pilihan yang diberi atribut checked, pilihan itu akan otomatis
ditandai walaupun tidak dipilih. Bila dijalankan pada Browser maka perintah
diatas akan ditampilkan sebagai berikut:
Dari Daftar dibawah ini, Makanan mana saja yang Anda sukai...?
Tempe Goreng.
Sayur Asam.
Ayam Goreng Mentega.
Semur Jengkol Spesial.

6. <select> dan <option> - Perintah select ini digunakan untuk menampilkan
suatu pilihan berbentuk menu pulldown. - Form ini banyak digunakan untuk
meminta pengguna memilih salah satu pilihan yang banyak alternatif nya,
akan tetapi karena terbatasnya ruangan halaman web maka menu pilihan
pulldown ini digunakan. Selain itu tampilan menu puldown ini juga dapat
memungkinkan pilihan yang majemuk yang menarik, sebagai contoh Anda
lihat di pilar kiri website ini di bagian Pilih Halaman. perintah <select> ini
harus diikuti oleh perintah <option>, seperti halnya perintah <ol> dan <li>
Contoh penulisan nya :
Bulan apa Anda dilahirkan...?
<select name="pilihmana">
<option selected value="">Pilihan Anda...</option>
<option value="pil1">Januari</option>
<option value="pil2">Februari</option>
<option value="pil3">Maret</option>
<option value="pil4">April</option>
<option value="pil5">Mei</option>
<option disabled label value="pil6">Juni</option>
<option value="pil7">Juli</option> <option value="pil8">Agustus</option>
<option value="pil9">September</option>
<option value="pil10">Oktober</option>
<option value="pil11">November</option>
<option value="pil12">Desember</option>
</select>
Bila dijalankan pada browser maka akan nampak seperti ini:
Bulan Apa Anda dilahirkan...?
Pilihan Anda....

Perhatikan.., setiap pilihan <option> diakhiri oleh penutupnya yaitu </option>,
isi atau content yang akan diproses oleh form adalah yang terdapat dalam
atribut value. Pada contoh diatas, nilai value untuk pilihan September adalah
pil9, maka yang diproses oleh form bukan September tetapi pil9. Kata
September bisa Anda rubah sesuka hati Anda, misal : Saya lahir bulan
September. Ada beberapa atribut yang dapat Anda gunakan dalam perintah
<select> maupun <option> antara lain :
I. Untuk perintah <select>
o name - Atribut ini digunakan untuk memberikan nama pada form
select.
o multiple - Atribut ini digunakan untuk menampilkan keseluruhan
pilihan yang ada di perintah <option> dalam satu kotak, jadi bila Anda
memakai atribut ini, maka pilihan option akan ditampikan semuanya
nya, user tidak perlu menekan tab untuk melihat pilihan yang lain nya.
o size - Atribut ini digunakan untuk menampilkan beberapa pilihan yang
terlihat. Nilainya diisi dengan angka, misalkan Anda mengisinya
dengan angka 2 / <select size="2">, maka pilihan yang terlihat akan
tampak 2 baris.
o disabled - Atribut ini digunakan untuk me-non aktifkan pilihan tetapi
tetap akan ditampilkan, untuk lebih jelas lihat keterangan mengenai
atribut yang sama pada perintah <option>, bedanya adalah bila atribut
ini diletakkan pada perintah <select>, maka keseluruhan pilihan akan
non-aktif.
o tabindex - Atribut ini digunakan untuk menampilkan posisi index dari
pilihan yang ditentukan, nilainya diisi dengan Angka.
o onfocus - Atribut ini digunakan untuk mengeksekusi pilihan yang
disorot oleh kursor, misalkan Anda mempunyai sebuah program yang
akan dijalankan bila pilihan dari option disorot oleh kursor maka
program itu secara otomatis dikerjakan. Program ini biasanya berupa
program JAVASCRIPT.
o Masih ada beberapa atribut lain dalam perintah select ini, akan tetapi
ini sudah cukup buat bekal Anda dalam mempelajari dasar dari
pembuatan form.
II. Untuk perintah <option> o value - Atribut ini digunakan sebagai content yang akan diproses oleh
form. - jadi setelah di submit maka nilai value ini yang akan diproses.
o selected - Atribut ini digunakan sebagai pilihan initial. - bila pilihan
option diberi atribut ini maka pilihan ini tidak dijadikan suatu pilihan
yang akan diproses oleh form karena merupakan initial. Sebagai
contoh Anda lihat pada contoh penulisan diatas, kata-kata " Pilihan
Anda.. " diberi atribut ini, sehingga bila user memilih pilihan ini maka
dianggap user belum memilih artinya pilihan ini bukan suatu pilihan
yang diharuskan untuk dipilih.
o disabled - Atribut ini digunakan untuk me-non aktifkan suatu pilihan. -
bila user menggunakan browser FIREFOX/MOZILLA dan Anda
menggunakan atribut ini maka pilihan tersebut tidak akan bisa disorot
oleh kursor sehingga tidak bisa dipilih akan tetapi pilihan ini tetap
eksis dalam form. Sebagai contoh, coba Anda pilih bulan Juni pada
contoh diatas, bulan juni tidak akan bisa Anda pilih. Atribut ini tidak
berfungsi di browser Internet Explorer.
o label - Atribut ini digunakan untuk memberi label pada suatu pilihan. -
bila user tidak memilih salah satu pilihan yang disarankan, maka form
akan memilih pilihan yang diberi atribut ini sebagai pilihan nya.

7. <textarea> - Perintah textarea ini digunakan untuk meminta user untuk
memasukan suatu input berupa text yang panjang. - Perintah ini banyak
digunakan untuk memasukan input berupa teks yang panjang, misalnya Anda
ingin meminta saran atau pendapat dari pengguna situs Anda, yang mungkin
pendapat atau saran itu bisa jadi akan memerlukan kalimat yang panjang.
Maka perintah ini dapat Anda gunakan untuk keperluan tersebut. Perintah ini
harus ditutup dengan perintah </textarea>.
Perintah ini mempunyai beberapa atribut antara lain :
o name - Atribut ini digunakan untuk penamaan text area yang akan
diproses oleh form.
o rows - Atribut ini digunakan untuk menentukan banyaknya baris yang
akan ditampilkan di browser, nilainya diisi dengan angka. contoh : bila
Anda ingin membuat text area sebanyak 3 baris maka perintah nya
adalah : <textarea rows="3">.
o cols - Atribut ini digunakan untuk menentukan banyaknya kolom yang
akan ditampilkan di browser, nilainya diisi dengan angka
(perbandingan nya dilihat dari banyaknya karakter). contoh : bila Anda
ingin membuat text area sebanyak 20 kolom / karakter maka
perintahnya adalah : <textarea cols="20">.
o Masih ada beberapa atribut untuk text area ini, akan tetapi itu sudah
cukup untuk bekal Anda dalam mempelajari dasar design web ini,
Anda dapat mencari referensi dari media lain mengenai atribut text
area yang lainnya karena disini saya tidak akan menerangkan nya satu
persatu dikarenakan terbatasnya halaman dan bandwith space yang
kami miliki. Contoh penulisan nya :
<textarea name="pesansaya" rows="5" cols="20">
</textarea>
Bila dijalankan pada browser maka perintah diatas akan ditampilkan sebagai
berikut :

Cobalah Anda masukan kata-kata apa saja pada text area diatas, bila kata-kata
tersebut melebihi ukuran text area yang disediakan maka secara otomatis tab
scroll akan muncul.

8. <input name="nn" type="submit" value="xx"> - Perintah submit ini
digunakan untuk mengakhiri atau menuntaskan sebuah deretan form. - Setelah
semua daftar form dibuat, maka harus ada sebuah tombol yang akan meng-
eksekusi suatu rancangan form. Perintah ini sama halnya dengan perintah "
GRAK " dalam " baris berbaris " di Pramuka dan Militer, misalkan seorang
Komandan memberi aba-aba "Balik kanaaaan...!", para prajurit yang ikut
dalam barisan itu tidak akan bereaksi apa-apa sebelum komandan yang
memberi perintah itu memberikan lagi perintah "Grak" ( bisa Anda
bayangkan, andai saja komandan itu baru memberikan perintah "grak" selama
dua hari berturut-turut.., apa yang terjadi..? ).
Perintah submit ini mempunyai beberapa atribut antara lain :
o name - Atribut ini digunakan untuk menamakan form submit.
o value - Atribut ini digunakan untuk menampilkan teks yang terdapat
dalam content nya. - Misalkan Anda memberi isi atau content value ini
dengan " Kirim ", maka tombol submit ini akan bertuliskan kata
tersebut.
o onclick - Atribut ini digunakan untuk menjalankan sebuah program
yang akan dieksekusi sebelum form itu benar-benar di submit. -
Misalkan Anda mempunyai suatu program yang akan mengingatkan
user untuk mengecek kembali isian form agar tidak terdapat kesalahan
sebelum form itu benar-benar dikirim yang berisi sebuah peringatan
berikut : " Apakah Anda yakin untuk mengirim form isian ini..?, tekan
OK untuk melanjutkan tekan CANCEL untuk membatalkan. ". Dengan
adanya program ini, maka sebuah form yang dikirim akan dapat di cek
ulang oleh user, bila user yakin tidak terdapat kesalahan dalam mengisi
form maka user dapat menekan tombol OK seperti yang diberitahukan,
bila user tidak yakin atau ingin memeriksa ulang isian form nya maka
user dapat menekan tombol CANCEL untuk memperbaiki nya. Contoh penulisan nya :
<center>
Silahkan tekan tombol ini untuk mengirim form yang telah Anda isi..
<form name="testsubmit" action="#">
<input name="submita" type="submit" value="Kirim"
onclick="confirm('Apakah Anda yakin Untuk mengirim Form ini..?')">
</form>
</center>
Setelah dijalankan di Browser maka akan ditampilkan seperti berikut ini :
Silahkan tekan tombol ini untuk mengirim form yang telah Anda isi..

Kirim

9. <input name="nn" type="reset" value="xx"> - Perintah reset ini
digunakan untuk membersihkan isian form menjadi sepert ke-adaan semula
sebelum diisi. - Dengan perintah reset ini maka user dapat mengulang
pengisian form yang mungkin terdapat kesalahan dan perlu diperbaiki. Contoh
dari perintah reset ini dapat Anda lihat di perintah " type teks " diatas yang
berupa tombol " Hapus Isian ". Kata-kata yang akan ditampilkan dapat Anda
isi di atribut value.
Contoh penulisan nya :

<input name="reset" type="reset" value="Hapus isian">

10. <fieldset> dan <legend> - Perintah fieldset ini digunakan untuk memberikan
tampilan kotak yang mengelilingi sebuah kelompok Form, sedangkan perintah
legend adalah untuk menampilkan teks penjelas sebuah kelompok Form yang
dikurung oleh perintah fieldset. Perintah legend harus dituliskan diantara
perintah fieldset dan ditutup dengan perintah </legend> , sebelum perintah
penutup dari fieldset yaitu </fieldset> dituliskan.
Contoh penulisan nya :
<fieldset>
<legend>Ini contoh legend</legend>
Kata-kata dalam kurung fieldset ini sebagai contoh saja, anggap saja ini
merupakan kelompok dari suatu form. </fieldset>

Setelah dijalankan di browser maka akan tampak seperti dibawah ini.
Ini contoh legend Kata-kata dalam kurung fieldset ini sebagai contoh saja,
anggap saja ini merupakan kelompok dari suatu form.

Catatan : Perintah fieldset hanya berfungsi bila kelompok form yang akan
dikelilingi oleh kotak fieldset ini terdapat dalam satu space atau ruangan yang
tidak terhalangi oleh perintah <TR> dalam pembuatan tabel.
Dari ke sepuluh perintah pembuatan FORM diatas, saya berharap Anda sudah
mempunyai bekal yang cukup untuk men-design sebuah tampilan website yang
sederhana tapi profesional. Untuk contoh penulisan FORM yang lengkap beserta
tampilan nya, dapat Anda lihat di Halaman berikutnya.
Sampai dengan pembahasan ini, bila Anda menguasai semua yang telah saya tuturkan
dari halaman ke-1 sampai halaman ke-5 ini berarti Anda saya anggap telah menguasai
semua basic atau dasar dari HTML. Bila Anda tidak paham sampai dengan
pembahasan ini saya menyarankan untuk membuka kembali bab-bab sebelumnya,
karena dihalaman berikutnya saya tidak akan menjelaskan lagi secara detail mengenai
maksud dari sebuah tag atau perintah HTML, karena pada halaman berikutnya Anda
akan dihadapkan pada pelajaran yang bersifat INTERMEDIATE atau kelas
menengah. Bila Anda ingin menanyakan materi yang mungkin masih sulit Anda
Pahami atau Anda punya kritik mengenai materi yang telah saya uraikan. Anda dapat
menyatakan nya melalui FORUM SSC yang kami sediakan. Klik link ini untuk
menuju ke Forum SSC .... SSC FORUM...
Pada Pembahasan berikutnya Anda akan diperkenalkan dengan beberapa script
pendukung dari pemrograman HTML, seperti CSS , JavaScript dan PHP. Bila Anda
sudah yakin untuk melanjutkan silahkan ke Halaman Berikutnya, Bila belum yakin
saya sarankan untuk kembali ke Halaman sebelumnya.
Akhir yang Bahagia dari sang Designer
Berikut ini adalah beberapa perintah pendukung yang wajib juga Anda kuasai untuk
menyempurnakan pengetahuan Anda dalam men-design sebuah tampilan Website
yang sederhana tetapi profesional.
1. <a href="aaa" target="x" title="yy"> - Perintah ini digunakan untuk berpindah
dari satu target ke target yang lain nya. - Dalam sebuah situs, pasti ada suatu Teks
atau Images atau animasi yang bila di klik, akan menuju suatu target tertentu yang
dapat berupa halaman web yang lain, atau sebuah images yang lain. Untuk dapat
berpindah dari target satu ke target yang lain nya, digunakan perintah ini. Perintah ini
juga disebut Hyperlink. Ada beberapa atribut yang digunakan oleh perintah ini
antara lain :
• href - Atribut ini merupakan inti dari perintah <a> ini, isi atau content nya
berupa alamat link ( URL ) yang dituju. Misalkan Anda punya sebuah
halaman web dengan nama filenya adalah halaman2.html dan disimpan pada folder myweb , maka penulisan nya menjadi
href="myweb/halaman2.html".
• target - Atribut ini digunakan untuk menyatakan target link dibuka pada
halaman yang sama, halaman yang lain dengan tidak menutup halaman yang
memanggilnya, atau pada sebuah frame tersendiri yang ditentukan. Bila atribut
target ini diisi dengan self, maka link yang dipanggil akan dibuka pada
halaman yang sama dengan link yang memanggilnya. Bila diisi dengan blank
maka link yang dipanggil akan dibuka pada halaman lain tanpa menutup
halaman yang memanggilnya. Sedangkan bila diinginkan dibuka pada sebuah
frame maka atribut target ini diisi dengan nama frame yang menjadi target.
• title - Atribut ini digunakan untuk memberi keterangan berupa sebuah teks
atau images yang akan ditampilkan bila kursor mendekati link ini.
Contoh Penulisan nya :
<a href="myfolder/halamanku.html" target="self" title="Klik ini untuk menuju
halamanku">Halamanku</a>

<a href="http://www.suryascience.co.nr" target="blank" title="Klik untuk menuju ke
situs SSC">Surya Science Club</a>

<a href="http://www.google.com" target="frame4" title="Cari kata dengan
google">Google</a>
Perhatikan contoh penulisan diatas..!, Kata yang menjadi hyperlinknya adalah kata
atau kalimat yang di apit oleh perintah <a> dan </a> bukan title nya. Pada ketiga
contoh diatas, maka yang menjadi hyperlinknya adalah : Halamanku, Surya Science
Club dan Google.

2. <frameset> dan <frame> - Perintah ini digunakan untuk membagi layar menjadi
beberapa bagian sesuai yang kita kehendaki. - Adakalanya suatu website mempunyai
beberapa bagian yang sama misalnya Header yang menampilkan menu navigasi dari
website tersebut. Agar menu tersebut tetap terbuka dan dapat diakses oleh user maka
header yang berisi menu ini ditempatkan pada sebuah Frame atau jendela. sedangkan
isi atau content nya dibuka pada frame yang lain, untuk keperluan tersebut maka
digunakanlah perintah Frame ini. Contoh yang paling mudah Anda temui untuk
penggunaan frame ini adalah program HELP dari Browser yang Anda gunakan, coba
saja Anda klik program help dari Browser yang Anda gunakan, disitu Anda akan
menemui contoh Aplikasi dari perintah Frame. Program HELP pada umumnya
menempatkan link pemanggil pada bagian kiri, dan content yang dipanggil
diperlihatkan pada jendela yang lain disebelah kanan. Perintah Frameset biasanya
diikutti oleh perintah frame dan mempunyai beberapa atribut yang digunakan antara
lain :
I . Untuk Perintah Frameset
• rows - Atribut ini digunakan untuk memberikan ukuran baris dari suatu frame
yang akan dibuat. • cols - Atribut ini digunakan untuk memberikan ukuran kolom dari suatu frame
yang akan dibuka.
• onload - Atribut ini digunakan untuk mengeksekusi suatu aplikasi ketika
frame ini selesai di load oleh browser.
• onunload - Atribut ini digunakan untuk mengeksekusi suatu aplikasii ketika
frame ini ditutup oleh browser.
II . Untuk perintah Frame
• name - Atribut ini digunakan untuk menamakan sebuah frame agar dapat
dikenali oleh aplikasi yang lain.
• src - Atribut ini digunakan untuk menentukan sumber atau alamat sebuah link
/ URL, yang akan ditampilkan pada frame.
• frameborder - Atribut ini digunakan untuk menentukan besarnya garis tepi (
border ) dari frame.
• marginwidth - Atribut ini digunakan untuk menentukan besarnya jarak
margin kiri ( batas kiri ) dari isi frame yang akan ditampilkan.
• marginheight - Atribut ini digunakan untuk menentukan besarnya jaraka
margin atas ( batas atas ) dari isi frame yang akan ditampilkan.
• noresize - Atribut ini digunakan untuk memberitahukan kepada browser agar
tidak merubah ukuran secara otomatis, sehingga besarnya frame ditentukan
secara manual.
• scrolling - Atribut ini digunakan untuk memberitahukan kepada browser agar
content yang melebihi ukuran frame dapat di gulung atau tidak. Pilihannya no,
yes, atau auto.
Contoh penulisan frame dengan 2 jendela :
Misalkan Anda mempunyai dua buah file HTML yang akan ditampilkan kedua-
duanya pada satu window di browser, file pertama akan ditampilkan pada frame
sebelah kiri dengan ukuran 40% dari lebar frame, sedangkan file yang lainnya
ditampilakan disebelah kanan dengan ukuran 60% dari lebar frame. File yang pertama
bernama : file_a1.html dan file kedua bernama file_a2.html, maka penulisan perintah
frame untuk hal tersebut seperti dibawah ini.
<frameset cols="40%,60%">
<frame name="jendela1" src="file_a1.html"
scrolling="auto" marginwidth="1" marginheight="1" noresize>
<frame name="jendela2" src="file_a2.html"
scrolling="auto" marginwidth="1" marginheight="1" noresize>
</frameset>
Catatan 1 : Misalkan Anda mempunyai lagi file yang ketiga dan akan ditampilkan
pada frame yang kedua secara bergiliran dengan file yang kedua. Pada file pertama
disediakan link untuk membuka file yang ketiga pada frame kedua, maka link tersebut
harus disertakan target dari frame yang kedua. contoh link nya : <a
href="file_a3.html" title="contoh file yang dibuka pada frame ke-2"
target="jendela2">Klik untuk membuka file ke-3</a>
Perhatikan penulisan target pada link diatas, target diisi oleh nama frame yang akan
membuka file tersebut. Sebagai contoh klik lah link ini, agar Anda lebih paham dengan perintah FRAMESET
dan Frame ini.
CONTOH FRAME DENGAN BEBERAPA FILE DAN LINK.
Catatan 2 : File HTML yang menggunakan perintah Frameset tidak boleh ada
perintah <body> dan </body>, bila perintah ini Anda cantumkan maka frameset
tidak dapat berfungsi.
Contoh penulisan frame dengan 4 jendela :
<frameset rows="*,*">
<frameset cols="*,*">
<frame name="jendela1" src="file_a1.html">
<frame name="jendela2" src="file_a2.html">
</frameset>
<frameset cols="*,*">
<frame name="jendela3" src="http://www.suryascience.co.nr">
<frame name="jendela4" src="http://www.google.com">
</frameset>
Contoh tampilan frame dengan 4 jendela klik link ini :
CONTOH FRAME DENGAN 4 JENDELA
Catatan 3 : Untuk membagi ukuran jendela menjadi sama besar, maka digunakan
tanda bintang ( * ).

3. <iframe> - Berbeda dengan perintah frame diatas, Perintah iframe ini dapat Anda
masukan di dokumen HTML yang mana saja, jadi Anda tidak perlu membuat lagi
sebuah file HTML yang digunakan untuk membuat frame. Anda dapat meletakkan
perintah iframe ini di tempat mana saja dalam dokumen HTML. Contoh perintah ini
bisa Anda lihat pada tombol AGENDA yang ada di bagian atas situs ini, atau pada
Halaman Guest Book situs ini juga. Perintah iframe inipun mempunyai beberapa
atribut antara lain :
• name - Atribut ini digunakan untuk memberikan nama untuk perintah iframe.
• src - Atribut ini digunakan untuk memberitahu alamat link atau URL yang
akan dibuka pada jendela iframe.
• width - Atribut ini digunakan untuk menentukan lebar dari iframe yang
dibuat, ukuran nya digunakan satuan pixel. contoh : width="300".
• height - Atribut ini digunakan untuk menentukan tinggi dari iframe yang
dibuat, ukuran nya digunakan stuan pixel. contoh : height="600".
Contoh penulisan nya : <iframe name="coniframe" src="http:www.suryascience.co.nr" width="500"
height="800">
</iframe>

4. <input name="nn" type="button" value="xx" onclick="app"> - Perintah ini
digunakan untuk beberapa keperluan yang menggunakan tampilan tombol - Pada
pembahasan mengenai link diatas, Anda sudah di jelaskan mengenai bagaimana
membuat sebuah link berupa teks. Agar tampilan design web Anda terlihat lebih
menarik, perintah button ini dapat Anda gunakan untuk mengganti link-link yang
berupa teks. Sebagai contoh penggunaan button adalah tombol dibawah ini yang saya
gunakan untuk memudahkan Anda dalam berpindah halaman web. Perintah button
ini mempunyai beberapa atribut, antara lain :
• name - Atribut ini digunakan untuk menamakan tombol button yang dibuat.
• value - Atribut ini digunakan untuk menampilkan teks dalam button yang
akan dibuat.
• onclick - Atribut ini digunakan untuk menentukan fungsi button yang akan
digunakan ketika tombol button itu di klik. - Perintah dalam atribut onclick ini
sebenarnya adalah perintah JavaScript yang di adopsi kedalam HTML.
Beberapa perintah pada atribut onclick yang umum digunakan dalam pemakaian
tombol button ini antara lain :
• parent.location="xxx" , - digunakan sebagai tombol link, tanda xxx di isi
dengan alamat link atau url.
• alert('xxx') , - digunakan sebagai peringatan berupa pop-up window, tanda xxx
di isi dengan teks yang akan ditampilkan dalam pop-up window tersebut.
• confirm('xxx') , - digunakan untuk menampilkan konfirmasi berupa pop-up
window dengan pilihan tombol OK atau CANCEL, tanda xxx di isi dengan
teks yang akan ditampilkan dalam pop-up windows tersebut.
• window.open('xxx') , - digunakan untuk membuka sebuah link pada jendela
yang lain, tanda xxx di isi dengan alamat link atau url.
Contoh penulisan nya :
• <input name="testlink" type="button"
value="Test Tombol"
onclick="parent.location='http://www.suryascience.co.nr'">

tampilan di browser ==

• <input name="testalert" type="button"
value="Test Alert" onclick="javascript:alert('Tombol yang Anda tekan
Salah..!')">

tampilan di browser ==
• <input name="testconfirm" type="button"
value="Test Confirm" onclick="javascript:confirm
('Apakah Anda yakin dengan piliha Anda..?')">

tampilan di browser ==

• <input name="testwinop" type="button"
value="Test open window"
onclick="javascript:window.open
('http://ballz.ababa.net/suryascience/sponsor.html','test',
'toolbar=no,statusbar=no,menubar=no,
left=500,top=350,width=218,height=220'); " target="_blank">

tampilan di browser ==
Cobalah Anda test contoh tombol diatas...!, bagaimana...?, lebih menarik bukan..!.
Yang perlu Anda perhatikan pada penulisan diatas adalah peletakan tanda kutip ( " ) ,
tanda ini jangan sampai lupa Anda tuliskan. Bila Anda salah dalam penempatan nya
maka perintah tersebut tidak akan berfungsi.
Contoh pembuatan FORM lengkap
Hmmmm....., Saya salut pada Anda yang dengan gigih mempelajari tutorial ini.
Sebenarnya masih banyak yang belum saya ungkapkan mengenai perintah-perintah
pendukung HTML. Saya sengaja tidak menjelaskan semuanya agar Anda menjadi
orang yang kreatif dan aktif dalam mempelajari tutorial ini.
Agar Anda menjadi orang yang aktif, carilah beberapa referensi mengenai tag-tag
HTML ini dari media yang lain atau dari situs yang lain. Dengan demikian Ilmu yang
Anda dapatkan akan berkembang. Atau mungkin juga Anda sudah benar-benar
menguasai semua yang dijelaskan pada tutorial ini..!, kalau demikian adanya
tolonglah berbagi dengan rekan-rekan yang lain melalui forum yang kami sediakan
untuk mengamalkan ilmu yang Anda peroleh. Klik link ini untuk menuju ke SSC
FORUM.
Contoh pembuatan form lengkap.

<table width="95%" cellpadding="5" cellspacing="0" border="2">
<tr valign="middle">
<td align="center">
<img src="images/smalogospc.jpg" alt="Surya Putra Computama" border="0">
</td>
<td colspan="3" align="center">
<h3><b>Formulir Pemesanan Barang</b></h3>
</td></tr>
<tr valign="middle"> <td colspan="4" align="center">
Isilah beberapa keterangan di bawah ini dengan benar,
agar barang yang Anda pesan sesuai dengan yang Anda inginkan
serta untuk menghindari kesalahan pengiriman.
</td></tr>
<tr valign="middle">
<td colspan="2" rowspan="2" align="center">
<form name="pesanbrg" target="_self"
action="http://www.suryascience.co.nr/sendform.php"
method="post" enctype="multipart/form-data">
<input type="hidden" name="usernum" value="12345678">
<input type="hidden" name="spc" value="2">
Keterangan Mengenai Barang yang dipesan
</td>
<td colspan="2" align="center">
<select name="nama_barang">
<option selected value="">Pilih barang yang Anda pesan..</option>
<option value="Modul_Fiska">Modul Multimedia Fisika SMU</option>
<option value="Modul_Matematika">Modul Multimedia Matematika SMU</option>
<option value="Modul_Biologi">Modul Multimedia Biologi SMU</option>
<option value="Modul_Kimia">Modul Multimedia Kimia SMU</option>
<option value="Modul_Elektro">Modul Multimedia Elektronika</option>
<option value="Modul_Webdesign1">Modul Multimedia Web Design Bagian
1</option>
<option value="Modul_Webdesign2">Modul Multimedia Web Design Bagian
2</option>
<option value="Modul_elektro">Modul Multimedia Elektronika</option>
</select>
</td></tr>
<tr valign="middle">
<td align="center">
Jumlah :<br><br>
<input name="jumlah" type="tesks" size="3"> Buah.
</td>
<td align="center">
Jenis Kertas Modul<br>
<input name="jenis_kertas" type="radio" value="hvs"> H V S<br>
<input name="jenis_kertas" type="radio" value="koran"> Koran
</td></tr>
<tr valign="middle">
<td rowspan="2" align="center">
Keterangan Pemesan
</td>
<td align="center">
Nama depan<br>
<input name="nama_depan" type="teks" size="12">
</td>
<td align="center">
Nama belakang<br>
<input name="nama_belakang" type="teks" size="12"> </td>
<td align="center">
Umur<br>
<input name="umur" type="teks" size="5">
</td></tr>
<tr valign="middle">
<td align="center" colspan="2">
Alamat pengiriman<br>
<textarea name="alamat_pengiriman" rows="2" cols="20">
</textarea>
</td>
<td align="center">
Kode Pos<br>
<input name="Kota" type="teks" size="12"><br>
Telephone<br>
<input name="telephone" type="teks" size="12">
</td></tr>
<tr valign="middle">
<td colspan="2" align="center">
Jenis Pembayaran
</td>
<td colspan="2" align="left">
<input name="pembayaran" type="radio" value="tunai">   Tunai /
Cash<br>
<input name="pembayaran" type="radio" value="kartu_kredit">   Kartu
Kredit<br>
<input name="pembayaran" type="radio" value="transfer">   Transfer
Bank
</td></tr>
<tr valign="middle">
<td colspan="4" align="center">
Isilah data di bawah ini bila jenis pembayaran Anda melalui Kartu Kredit
</td></tr>
<tr valign="top">
<td colspan="2">
Jenis Kartu Kredit<br>
<input name="jenis_kartu" type="checkbox" value="visa">   Visa<br>
<input name="jenis_kartu" type="checkbox" value="master_card">
  Master Card<br>
<input name="jenis_kartu" type="checkbox" value="american_ex">
  American Express<br>
<input name="jenis_kartu" type="checkbox" value="hsbc">   H S B
C<br>
<input name="jenis_kartu" type="checkbox" value="world_bank">
  World Banking
</td>
<td colspan="2" align="center">
<fieldset>
<legend>Confidential</legend>
Nomer Kartu <br><br>
<input name="no_kartu1" type="password" size="3" maxlength="5"> -
<input name="no_kartu2" type="password" size="3" maxlength="5"> -
<input name="no_kartu3" type="password" size="3" maxlength="5"> -
<input name="no_kartu4" type="password" size="3" maxlength="5"><br>
<hr>
Masa Expired sampai dengan<br>
<input name="bulan_exp" type="teks" size="2"> -
<input name="tahun_exp" type="teks" size="4">
</fieldset>
</td></tr>
<tr valign="middle">
<td colspan="4" align="center">
<input name="reset" type="reset" value="Bersihkan Form">    
<input name="selesai" type="submit" value="Kirim Form"
onclick="confirm('Apakah Anda yakin untuk mengirim Form ini..?')">
</form>
</td></tr>
<tr valign="middle">
<td colspan="4">
Catatan :
<ul>
<li>Bukti transfer harap dikirim ke alamat SPC bila pembayaran Anda melalui
transfer Bank.</li>
<li>Kami tidak akan mengganti barang yang hilang bila tidak disertai bukti yang sah
dari pihak berwenang.</li>
<li>Kami tidak akan mengganti barang yang hilang karena kesalahan pengisian
alamat pengiriman pada form ini.</li>
<li>Penggantian barang yang hilang karena kesalahan kami, hanya diganti dengan
barang yang sama sesuai pesanan.</li>
</ul>
</td></tr>
</table>

Setelah di jalankan pada browser, penulisan tag formulir isian di atas menjadi seperti
berikut ini : Formulir
Pemesanan
Barang
Isilah beberapa keterangan di bawah ini dengan benar, agar barang yang Anda pesan
sesuai dengan yang Anda inginkan serta untuk menghindari kesalahan pengiriman.
Keterangan Mengenai Barang yang dipesan

Pilih pesanan..

Jumlah
:

Buah.
Jenis
Kertas
Modul
H
V S
Kor
an
Keterangan Pemesan
Na
ma
dep
an

Nama
belaka
ng

Umur

Alamat
pengiriman
Kode
Pos

Telepho
ne

Jenis Pembayaran
Tunai /
Cash
Kartu
Kredit
Transfer
Bank
Isilah data di bawah ini bila jenis pembayaran Anda melalui Kartu Kredit
Jenis Kartu Kredit
Visa
Master Card
American Express
H S B C
World Banking
Confidential
Nomer Kartu

- - -

Masa Expired
sampai dengan
-
Bersihkan Form

Kirim Form

Catatan :
• Bukti transfer harap dikirim ke alamat SPC bila pembayaran Anda melalui
transfer Bank.
• Kami tidak akan mengganti barang yang hilang bila tidak disertai bukti yang
sah dari pihak berwenang.
• Kami tidak akan mengganti barang yang hilang karena kesalahan pengisian
alamat pengiriman pada form ini.
• Penggantian barang yang hilang karena kesalahan kami, hanya diganti dengan
barang yang sama sesuai pesanan.
Nah dengan demikian, maka semua yang dikeluhkan tongtong pada awal bab ini
mengenai penempatan objek, pembuatan tabel serta pembuatan form telah
terselesaikan. Dan selanjutnya sang designer kita menikah dengan wanita pujaan
hatinya berkat bantuan Anda...

Sang Designer dan Sang Pemikir yang Jenius
Waktu terus berjalan, sang designer kita sekarang sudah menjadi profesional dengan
pekerjaan nya. Karena dengan kepandaian nya mendesign sebuah web, sekarang dia
menjadi tambah pusing lagi dengan order-order yang datang dari sana-sini. Tentu saja
sekarang dia harus memikirkan suatu cara yang cepat dan akurat untuk menyelesaikan
order-order yang diterima nya.
Anda sebagai sahabat sejatinya, menjadi senang sekaligus prihatin dengan kondisi ini.
Sebab hampir setiap hari sang designer kita itu dikejar-kejar oleh pelanggan nya untuk
segera menyelesaikan design web nya. Walah-walaaah..., ternyata menjadi
profesional itu tidak enak juga yah keluhnya. Apa ada yah suatu program yang dapat
mempermudah dalam pendesign-an web ini..?, tanya dia kepada Anda. lalu Anda pun
menjawabnya, Pasti ada donk..!, sebab semua orang juga memikirkan bagaimana
membuat sesuatu itu menjadi mudah dan cepat..!, kilah Anda dengan semangat.

Tapi Program apa yang bisa membuat design web ku ini menjadi
lebih cepat dan mudah..?, tanya dia lagi. Waaaaah..., untuk saat ini
saya tidak tahu tuh..!, tapi pasti ada deh. Uuummmmh..., bagaimana
kalau kita tanyakan pada Bang Einstein untuk hal tersebut.?, jawab
Anda. Tapi saya malu bertanya pada dia, keluh dia lagi.
Untuk mendapatkan ilmu jangan malu untuk bertanya pada siapa saja.., walaupun
Bang Einstein itu terlihat eksentrik, tetapi dia punya banyak akal dan segudang ilmu
yang mungkin bisa menyelesaikan masalah kamu itu..!, jawab Anda dengan antusias.
Kamu benar.., Kalau begitu yuk antar saya ke Bang Einstein..!, sambung dia. Maka
Anda berdua pun pergi menuju tempat nya Bang Einstein untuk mencari penyelesaian
masalah teman sejati Anda itu.
Sesampai nya di tempat Bang Einstein, Anda pun langsung mengungkapkan
permasalahan yang dihadapi rekan Anda tersebut. Pada saat itu Bang Einstein berpikir
serius tanpa bersuara untuk mencari solusi dari permasalahan tersebut. Tak lama
kemudian Bang Einstein berkata. " Untuk memudahkan dalam merancang apapun,
diperlukan sebuah template atau wadah yang dapat menampung maksud yang sama.
Sehingga template tersebut dapat digunakan lagi dilain waktu tanpa harus membuat
lagi maksud yang sama. "
Mendengar penuturan dari Bang Einstein itu Anda berdua masih terlihat bingung
mengenai maksud dari solusi yang diberikan Bang Einstein tersebut. Melihat gelagat
itu, Bang Einstein pun tersenyum kemudian dia berkata lagi. Saya mengerti bila
Kalian berdua bingung apa yang saya ucapkan tadi, Ok lah sekarang saya beri contoh
yang mudah mengenai pemikiran saya tersebut. Kalian lihat batu bata yang ada
dipinggir rumah ku ini..!, seru dia sambil menunjukan jarinya ke arah samping. Anda
berdua pun menoleh ketempat yang ditunjukan oleh Bang Einstein. Dapatkah kalian
berdua membuat sebuah batu bata yang sama ukuran nya, tanpa menggunakan
cetakan..?, tanya Bang Einstein pada Anda berdua. Dengan kompak Anda berdua
menjawab "Tidak bisa..!". Lalu Bang Einstein berkata lagi. Sebenarnya bisa, tetapi
tentu saja memerlukan waktu yang lebih lama ketimbang memakai cetakan. Nah..,
Cetakan inilah yang membuat pekerjaan membuat batu bata ini jadi cepat. Tapi apa
hubungan nya batu bata dengan design web..?, tanya Anda pada Bang Einstein. Bang Einstein tidak menjawab pertanyaan Anda, tetapi dia tersenyum. Kemudian dia
berkata lagi. Saya dengar kalian berdua sedang mempelajari design web..!, Anda
berdua pun mengangguk seperti burung pelatuk. Sekarang saya bertanya pada Kalian
berdua.., bagaimana cara penulisan program HTML untuk membuat huruf berjenis
ARIAL yang berukuran 12 dan berwarna merah..?, tanya Bang Einstein sambil
mengambil secarik kertas dan sebuah pena, kemudian diserahkan kepada teman Anda
yang dari tadi terlihat bengong. Kemudian teman Anda tersebut menuliskan nya pada
kertas yang diberikan Bang Einstein. Tulisan nya sebagai berikut :
<font face="arial" size="2" color="red">
Lalu Bang Einstein bertanya lagi pada Anda berdua. Berapa banyak perintah ini
Kamu tulis dalam suatu design web..?. Lalu teman Anda itu menjawab, Yah.., banyak
dan hampir setiap saat saya menuliskan nya. Bisakah Kamu ringkas perintah itu
dengan suatu template..? , tanya Bang Einstein lagi. Teman Anda tersebut cuma
menggelengkan kepalanya seperti orang membaca tahlilan dalam ISTIGHOSAH.
Bang Einstein tersenyum melihat kelakuan teman Anda tersebut, kemudian dia
berkata lagi. Pernahkah kalian mendengar suatu script yang disebut dengan Cascading
Style Sheet..?, Anda berdua pun menjawab, "Pernah..!". Sekarang gunakan CSS
sebagai template untuk memudahkan Kalian dalam men-design sebuah web, seru
Bang Einstein. Lalu Anda berdua pun saling berpandangan dan tertawa gembira atas
penuturan Bang Einstein tersebut. Inilah rupanya maksud dari penuturan Bang
Einstein semula. Bahwa untuk memudahkan suatu design, maka diperlukan sebuah
template, dan dalam design web dengan HTML, CSS itulah salah satu template nya.
Setelah paham mengenai penuturan Bang Einstein tersebut, Anda berdua pun pamit
dan mengucapkan banyak terima kasih atas pemikiran nya tersebut.
C A S C A D I N G S T Y L E S H E E T
Cascading Style Sheet atau yang disingkat menjadi CSS itu adalah suatu script yang
digunakan dalam HTML untuk beberapa keperluan seperti :
1. Menentukan jenis Font atau Huruf.
2. Menentukan ukuran Font.
3. Menentukan background halaman web
4. Merubah tampilan kursor.
5. Merubah tampilan SCROLL BAR dari browser dan form.
6. Merubah tampilan link dari suatu hyperlink.
7. Memasukan ( embeding ) animasi.
8. Menempatkan sebuah objek tertentu pada lokasi tertentu di halaman browser.
9. Dan lain sebagai nya.
Dasar penulisan script css ini sebenarnya di adopsi dari bahasa pemrograman JAVA,
maka oleh sebab itu semua perintah dalam css juga mengacu pada hirarki
pemrograman bahasa JAVA. Boleh dikatakan hampir semua design web yang ada
didunia maya menggunakan css sebagai salah satu bagian aplikasinya.
Sekali Anda membuat script css, maka script tersebut berlaku untuk semua perintah
yang ada dihalaman web yang menggunakan css tersebut. Beberapa keuntungan yang
di dapat dengan menggunakan css antara lain : 1. Ukuran font menjadi standar di semua browser sesuai dengan yang kita
kehendaki.
2. Dapat dipanggil dimana saja dalam tag atau perintah HTML. dengan perintah
class="kode css".
3. Script HTML yang dibuat menjadi ringkas dan mudah di rubah bila ada
kesalahan.
4. Design web menjadi lebih profesional, dan terstruktur.
Untuk membuat script css tidaklah sulit, Anda tinggal menulisakan perintah-perintah
css diantara tanda kurung kurawal < { } > dan perintah-perintah nya dipisahkan
dengan tanda titik koma ; . Setiap perintah dalam css harus diberi initial yang
diletakkan di depan perintah css sebelum tanda kurung kurawal dibuat, kecuali bila
perintah css dituliskan langsung pada tag maka initial ini tidak perlu dibuat.
Perintah-perintah CSS :

I . Untuk penanganan font dan teks
1. font-size: - Perintah ini digunakan untuk menentukan ukuran huruf yang
digunakan. Satuan nya dinyatakan dengan pixel.
2. font-family: - Perintah ini digunakan untuk menentukan jenis huruf yang
digunakan seperti : arial, helvetica, sans serif, verdana dan sebagainya.
3. font-style: - Perintah ini digunakan untuk menentukan tampilan dari suatu
font yang dinyatakan dengan normal, atau bold.
4. font-weight: - Perintah ini sama seperti font-style diatas, hanya saja biasanya
digunakan untuk link dan perubahan nya ketika mouse mendekati link
tersebut. ( mouseover )
5. text-decoration: - Perintah ini digunakan untuk memberikan efek pada suatu
teks seperti underline, italic dan sebagainya.
6. text-transform: - Peritah ini digunakan untuk merubah bentuk suatu font,
misalkan anda mengingin kan suatu teks tetap dijadikan huruf besar semuanya
atau sebaliknya. Untuk huruf kecil digunakan lowercase , untuk huruf besar
digunakan uppercase
7. text-align: - Perintah ini untuk mendeklarasikan secara umum posisi teks atau
margin dalam suatu bidang.
8. color: - Perintah ini digunakan untuk menentukan warna dari font yang
dikehendaki, penulisan warna digunakan kode warna dalam heksa.
Contoh penulisan script css yang digunakan untuk penanganan font dan teks.

.contoh1 {
font-size: 12px;
font-family: verdana;
font-style: normal;
font-weight: normal;
text-decoration: none;
text-transform: lowercase;
} Perhatikan tanda kurung kurawal, titik, titik dua dan tanda titik koma pada contoh
diatas. sebab itu akan mempengaruhi fungsinya.
Sekarang Anda lihat link Footer Link dibawah halaman tutorial ini, link itu
menggunakan css. Script untuk link tersebut sebagai berikut :
.hlink
{
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 9pt;
color: black;
font-weight: normal;
}
.hlink:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
text-decoration: none;
background-color: orange;
font-weight: normal;
}

Contoh Penulisannya :

<a class="hlink" href="contoh.html" title="contoh">Contoh Link</a>
II . Untuk penanganan background
1. background-color: - Atribut ini digunakan untuk menentukan warna latar.
Nama warna diisi dengan kode heksa, contoh : #FFFFFF, #CCCCCC .
2. background-image: url(alamat url) - Atribut ini digunakan untuk
menentukan latar dengan suatu images, misalkan Anda punya suatu images
yang akan dijadikan background maka atribut ini digunakan pada script CSS.
Penempatan alamat url dari images yang digunakan dituliskan di dalam
kurung, contoh : background-images: url(../images/back.gif);
3. background-repeat: - Atribut ini digunakan untuk menyatakan suatu
background yang berbentuk images akan diulang atau tidak, bila diulang maka
diisi dengan repeat-x;, bila tidak diulang diisi dengan no-repeat;.
4. background-position: - Atribut ini digunakan untuk menentukan lokasi suatu
background yang berbentuk images akan diletakan pada area yang ditentukan.
contoh : background-position: center; , akan menempatkan background pada
posisi ditengah-tengah bidang.
I . Atribut CSS untuk penanganan tabel
1. border-right: - Atribut ini digunakan untuk menentukan warna border bagian
kanan dari tabel.
2. border-top: - Atribut ini digunakan untuk menentukan warna border bagian
atas dari tabel. 3. border-left: - Atribut ini digunakan untuk menentukan warna border bagian
kiri dari tabel.
4. border-bottom: - Atribut ini digunakan untuk menentukan warna border
bagian bawah dari tabel.
5. padding-right: - Atribut ini digunakan untuk menentukan besarnya jarak
padding sebelah kanan dari tabel. Satuan nya dinyatakan dengan pixel, contoh
( 1px; , 5px; ).
6. padding-left: - Atribut ini digunakan untuk menentukan besarnya jarak
padding sebelah kiri dari tabel. Satuan nya dinyatakan dengan pixel, contoh (
1px; , 5px; ).
7. padding-bottom: - Atribut ini digunakan untuk menentukan besarnya jarak
padding bawah dari tabel. Satuan nya dinyatakan dengan pixel, contoh ( 1px; ,
5px; ).
8. padding-top: - Atribut ini digunakan untuk menentukan besarnya jarak
padding atas dari tabel. Satuan nya dinyatakan dengan pixel, contoh ( 1px; ,
5px; ).
Sebenarnya masih banyak atribut-atribut dari script CSS yang belum saya tuliskan
disini. Saya memberi tugas pada Anda untuk mencarinya dari sumber yang lain agar
Anda menjadi kreatif dan Aktif dalam mempelajari script CSS ini. Bila Anda
mendapatkan suatu konfigurasi dan atribut lain yang dapat menambah pengetahuan
Anda pada script CSS ini, tolonglah berbagi dengan rekan-rekan yang lain nya
melalui forum yang kami sediakan yaitu : SSC FORUM..
Sampai disini dahulu pembahasan TUTORIAL DASAR-DASAR DESIGN WEB ini
saya uraikan, Saya berharap mudah-mudahan tutorial ini dapat bermanfaat untuk
Anda yang sedang atau yang akan mempelajari Design Web. Kelanjutan Tutorial ini
adalah TUTORIAL DASAR PEMROGRAMAN JAVASCRIPT, yang Insya ALLAH
bila sudah mendapatkan restu dari SURYA PUTRA TEKNOKINDO (Suryatekno)
sebagai pengasuh situs ini, akan di Publishkan secara bertahap. Tunggu Saja waktu
tayang nya yah...! , BTW Saya sudah lelah nih.. , ingin Istirahat dulu serta ingin
bertemu dinda yang mungkin dia sudah bosan lihat saya berkutat di depan Komputer
sambil tertawa sendiri, Mmmmmmmuuuuuaaaah..!, Sun hangat buat Dinda yang
mungkin kebetulan lihat tutorial ini..
Eiit..!, tunggu dulu trus bagaimana nasib sang Designer kita selanjutnya..?,
Hehehehehe.. , Designer kita ini nantinya akan tetap menjadi aktor pada tutorial
lanjutan nya. Tunggu saja kelanjutan ceritanya.., Oh yah.., Saya mohon maaf bila Ada
yang merasa tersinggung atau tidak senang dengan aktor yang saya pakai dalam
tutorial ini. Cerita, Lokasi, dan Nama pada cerita tutorial ini hanya FIKTIF belaka,
saya sajikan cerita tersebut agar Anda tidak jenuh dalam mengikuti tutorial ini yang
boleh dikatakan cukup membosankan. Bila Ada kritik atau saran silahkan utarakan
pada forum SSC.
Bandung dan Jakarta, Agustus, September dan Oktober 2006.
Salam dari Saya,
Komarudin Surya.
Cheeeeerrrrrrrrrrrrr...!!!

INFORMATIKA

Selasa, 20 November 2012

Ebook Proffessional Linux Programming - BAGIE-BOOK | Download Ebook Gratis

Sabtu, 19 Mei 2012

Dasar-dasar Design Web

Mengenai Saya