19.36
liando
Belajar dasar-dasar HTML
HTTP (Hypertext Transfer Protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol inilah yang berfungsi untuk mentransfer dokumen-dokumen web yang ditulis dalam format HTML.
HTML adalah kependekan dari Hypertext Markup Language, sebuah dokumen dalam format ASCII yang memuat kalimat-kalimat (perintah) untuk diproses oleh browser. Disebut Markup Language karena berfungsi untuk 'memperindah' file teks biasa untuk ditampilkan pada program web browser. HTML sebenarnya merupakan perkembangan dari SGML (Standardised General Markup Language) yang merupakan dasar untuk membangun sebuah situs Web.
Walau untuk saat ini sudah terdapat banyak tool untuk membuat webpage secara WYSIWYG (What you see is What you get) seperti Microsoft FrontPage, Nestcape Editor atau bahkan Macromedia Dreamweaver, namun alangkah baiknya untuk menguasai dasar-dasar HTML terutama untuk membangun aplikasi dengan teknologi CGI (Common Gateway Interface). Hal ini penting mengingat HTML merupakan dasar dari pemrograman sebuah web.
Struktur HTML
Ciri khas sebuah dokumen HTML adalah adanya tag dan elemen. Apa yang dilakukan browser ketika membacakan dokumen HTML sebenarnya adalah menterjemahkan tag- tag yang ada di dalam dokumen tersebut untuk kemudian ditampilkan ke layar browser. Dengan kata lain, tag adalah sejumlah instruksi kepada browser untuk memberitahu tentang bagaimana caranya mengatur tata letak teks, image dan hal lainnya yang ingin ditampilkan.
Tag HTML biasanya berupa tag-tag yang berpasang-pasangan dan ditandai dengan simbol < dan >. Pasangan atau penutup perintah dari sebuah tag ditandai dengan ' / '. Misalnya pasangan dari tag <contoh> adalah </contoh>.
Setiap dokumen atau halaman HTML pada dasarnya memiliki struktur atau susunan file sebagai berikut :
------------------------------------
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
------------------------------------
Tag <HTML> menandakan bahwa dokumen yang ditulis berformat HTML. Sedangkan Tag <TITLE> menunjukkan judul dokumen yang akan ditampilkan pada title bar web browser. Tag ini hanya boleh berada di dalam blok <HEAD>. Tag <BODY> merupakan isi dari dokumen HTML, dimana teks, gambar atau apapun yang ingin ditampilkan pada dokumen ada pada bagian ini.
Perintah Dasar HTML
Ada sebegitu banyak perintah-perintah dalam HTML, namun yang akan dibahas kali ini adalah perintah umum yang biasa digunakan antara lain :
- <Hx> : Heading dimana x adalah level heading 1 sampai 6. Heading merupakan sekumpulan kata yang menjadi judul atau sub-judul dalam dokumen HTML dengan berbagai ukuran yang berbeda. Contoh : <H1> Belajar HTML </H1>
- <P> : Paragraph, membuat teks ditempatkan pada garis baru.
- <BR> : Break, membuat baris baru.
- <HR> : Horizontal Rule, untuk membuat garis horizontal sepanjang jendela browser.
- <B> : Bold, untuk menebalkan teks.
- <I> : Italic, untuk menampilkan teks miring.
- <U> : Underline, untuk membuat teks digarisbawahi.
- <STRONG> : Strong, untuk memberikan penekanan yang kuat terhadap sebuah teks.
- <PRE> : Preformated, untuk menampilkan dokumen HTML tepat seperti yang dituliskan.
- <SIZE> : Size, menyatakan suatu ukuran. Contoh : <HR SIZE=5>.
- <ALIGN> : Align, untuk membuat perataan, terdiri dari Center untuk rata tengah, Left untuk rata kiri dan RIGHT untuk rata kanan. Contoh : <P ALIGN=CENTER>.
- <BLOCKQUOTE> : Blockquote, untuk membuat teks tampil menjorok ke dalam.
- <A HREF=...> : A Hypertext Reference, digunakan untuk membuat sebuah link. Contoh : <A HREF="http://indophp.tripod.com"> Situs IndoPHP </A> atau <A HREF="mailto:cute_gamer@hotmail.com"> E-Mail Us </A>
Selain perintah di atas, terdapat juga perintah lain untuk memperindah tampilan, seperti perintah background, bgcolor, color, image maupun image map. Perintah background digunakan untuk membuat sebuah gambar menjadi latar belakang. Sedangkan perintah bgcolor dapat digunakan pada body maupun font yang berfungsi untuk merubah warna background. Contohnya :
<BODY background="gambar_background.jpg">
<BODY bgcolor="#000000"> , dimana tanda #000000 merupakan kode RGB untuk warna hitam
<FONT face="comic sans ms" color="#FFFFFF"> , dimana face digunakan untuk menampilkan jenis font, dan color untuk menampilkan warna pada teks.
<IMG SRC="gambar.jpg"> dimana IMG SRC (Image Source) merupakan perintah untuk menampilkan gambar. Untuk mengatur posisi gambar, dapat digunakan perintah ALIGN, yang terdiri dari Top, Middle, Bottom, Left, Center dan Right.
Contoh : <IMG SRC="gambar.jpg" ALIGN=left WIDTH=200 HEIGHT=150 ALT="Gambar" >. Perintah ALT (Alternative) digunakan untuk menampilkan teks pengganti untuk gambar. Karena bisa saja gambar tersebut tidak dapat ditampilkan pada browser yang non-grafis.
Membuat List
Berikut adalah perintah yang digunakan untuk membuat sebuah List pada HTML :
- <OL> : Ordered List, sering disebut sebagai Numbered List, adalah sebuah daftar yang tiap itemnya disertai dengan nomor urut dari item yang bersangkutan dalam daftar tersebut.
- <UL> :Unordered List, membuat daftar dengan tanda bullet. Terdiri dari beberapa type seperti circle, square dan disc. Contoh <UL type=circle>.
Perlu diingat, baik OL maupun UL, menggunakan <LI> (List) sebagai daftar itemnya. Contoh :
----------------------------------------------------------
<HTML>
<HEAD> <Title> Membuat List </Title> </HEAD>
<BODY>
<UL type=disc>
<LI> Item 1
<L1> Item 2
</UL>
</BODY>
</HTML>
----------------------------------------------------------
Membuat Tabel
Perintah dasar untuk membuat sebuah Tabel pada HTML adalah dengan perintah <TABLE> yang diakhiri dengan </TABLE> Table tersusun atas <TR> (Table Row) dan <TD> (Table Data). Contoh :
-----------------------------------------------------------
<HTML>
<HEAD> <Title> Membuat Tabel </Title> </HEAD>
<BODY>
<TABLE BORDER=1 WIDTH=400>
<CAPTION> Wanted Person </Caption>
<TR>
<TD WIDTH=50> Nomor </TD>
<TD WIDTH=*> Nama </TD>
</TR>
<TR>
<TD WIDTH=50> 007 </TD>
<TD WIDTH=*> James Bond </TD>
</TR>
</TABLE>
</BODY>
</HTML>
-----------------------------------------------------------
Border menyatakan ukuran bingkai. Caption menunjukkan judul tabel. Sedangkan Width menyatakan lebar tabel. Width dapat juga diisi dengan menggunakan besaran persen. Misalnya Width=70%. Lawan dari Width adalah Height yang menyatakan tinggi. Tanda * diartikan sebagai perintah menggunakan sisa ruangan. Pada contoh di atas, sisa ruangan adalah 350. Pada perkembangannya, terdapat juga atribut Cellspacing untuk mengatur spasi/jarak diantara kolom dalam tabel dan antara kolom dengan batas luar ; Cellpadding untuk mengatur teks dengan batas dalam ; dan Align - VAlign untuk fungsi perataan.
Animasi dan Multimedia
Animasi pada HTML terbatas pada animasi untuk teks berjalan. Jika Anda menginginkan animasi yang lebih misalnya dalam bentuk gambar, dapat menggunakan program lain yang memang khusus dirancang untuk membuat animasi, seperti Macromedia Flash, Paint Shop Pro ataupun GIF Animator. Untuk Animasi teks berjalan pada HTML, syntaxnya adalah sebagai berikut :
<MARQUEE BEHAVIOR="scroll" DIRECTION="right" LOOP="infinite"> Teks Marquee </MARQUEE>
Atribut behavior menunjukkan jenis marquee yang terdiri dari scroll, slide dan alternate. Scroll digunakan untuk menampilkan teks berjalan dimulai dari bagian paling akhir teks. Slide menjalankan teks sampai menyentuh ujung margin dan Alternate untuk menjalankan teks secara bolak-balik. Direction menunjukan arah teks berjalan, terdiri dari right dan left sebagai default. Loop menunjukkan jumlah perulangan marquee, diisi infinite berarti teks berjalan dengan perulangan tidak terbatas.
Dalam menangani video, HTML memanfaatkan fungsi DYNSRC (Dynamic Source) Perintahnya adalah sebagai berikut :
<IMG BORDER="lebar_bingkai" DYNSRC="FILE:nama_filevideo" LOOP="infinite" START="fileopen" WIDTH="ukuran_width" HEIGHT="ukuran_height">
Ex : <IMG BORDER="5" DYNSRC="FILE:indophp_opening.avi" LOOP="infinite" START="fileopen" WIDTH="400" HEIGHT="300">
Untuk animasi dengan objek suara, HTML memanfaatkan fungsi EMBED ataupun BGSOUND untuk menampilkan suara sebagai background page.
Berikut adalah syntax-nya :
<EMBED SRC="nama_lagu" AUTOSTART="true" WIDTH="ukuran_width" HEIGHT="ukuran_height" LOOP="jumlah_loop" VOLUME="persen_volume">
<NOEMBED><BGSOUND SRC="nama_lagu" LOOP="jumlah_loop" VOLUME="persen_volume"> </NOEMBED>
Ex : <EMBED SRC="eyes_on_me.mid" AUTOSTART="true" WIDTH="130" HEIGHT="40" LOOP="infinite" VOLUME="99%">
<NOEMBED> <BGSOUND SRC="eyes_on_me.mid" LOOP="infinite" VOLUME="99%"> </NOEMBED>
Atribut NoEmbed sengaja ditambahkan dengan maksud apabila browser tidak mendukung fungsi EMBED maka suara akan ditampilkan sebagai background saja. Anda juga dapat menambahkan atribut loopdelay pada fungsi BGSOUND dengan maksud menentukan waktu perhentian antara perulangan lagu. Misalnya, LOOPDELAY="5" (dalam satuan detik), dengan syarat lagu yang dimainkan bersifat infinite pada atribut Loop-nya.
Membuat Frame
Kelebihan utama dari sebuah frame adalah kemampuannya membagi-bagi jendela browser menjadi beberapa bagian, baik ke arah horizontal maupun ke arah vertikal. Meskipun frame dapat membagi jendela browser sebanyak yang Anda inginkan, namun pada prakteknya hanya digunakan 2 atau 3 buah frame saja dalam satu layar, mengingat penggunaan frame yang berlebihan hanya akan menimbulkan kebingungan.
Berikut adalah perintah (syntax) pembuatan frame pada HTML :
<FRAMESET> </FRAMESET>
Frame sendiri terbagi menjadi frame untuk baris (row) dan frame untuk kolom (column). Berikut akan kita terapkan fungsi 3 buah frame yang terdiri atas 1 baris dan 2 kolom.
--------------------------------------------------------------------------------
<HTML>
<HEAD> <Title> Membuat Frame </Title> </HEAD>
<BODY>
<FRAMESET rows="80,*">
<frame name="banner" scrolling="no" noresize target="contents" src="banner.html">
<frameset cols="150,*">
<frame name="contents" target="main" src="link.html">
<frame name="main" src="main.html">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.
</body>
</noframes>
</FRAMESET>
</BODY>
</HTML>
--------------------------------------------------------------------------------
Frameset Rows digunakan untuk membuat frame baris. Sebaliknya, untuk membuat frame kolom digunakan perintah Frameset Cols. Pada contoh di atas, frame terdiri dari 2 baris. Baris pertama diisi dengan halaman banner, sedangkan baris kedua dibagi lagi menjadi 2 kolom, yaitu kolom contents untuk link page dan kolom main untuk main page. Atribut scrolling digunakan agar browser dapat memberikan scrolling bar pada sebuah frame yang besarnya melebihi dari nilai ukuran frame yang telah ditetapkan. Atribut ini memiliki nilai "yes", "no" dan "auto". Noresize digunakan agar frame yang kita buat tidak dapat diubah ukurannya dengan cara menarik border frame tersebut pada browser. Sedangkan fungsi target digunakan agar dapat menampilkan target link pada frame yang lain dalam satu jendela browser, tanpa harus membuat link balik untuk kembali ke halaman utama. Dengan kata lain, halaman yang menjadi source link tidak akan hilang digantikan dengan halaman target link. Fungsi src dimaksudkan sebagai sumber alamat/lokasi file HTML yang akan ditayangkan. Atribut NoFrames sangat penting untuk ditambahkan, mengingat tidak semua browser dapat mendukung penggunaan fungsi frames. Ibaratnya Anda harus menambahkan halaman lain sebagai pesan apabila web page Anda tidak dapat tampil pada browser user.
Membuat Form
Form merupakan elemen terpenting dari sebuah web interaktif, dimana pengunjung dapat memberikan umpan balik (feed back) kepada situs kita. Untuk membuat form, Anda membutuhkan sebuah Web Server yang bertugas untuk melayani komunikasi dua arah antara server dengan browser. Untuk saat ini, sudah terdapat banyak program yang berfungsi sebagai webserver, antara lain Microsoft - Personal Web Server (PWS) untuk Windows 95/98/ME, Microsoft - Internet Information Server (IIS) untuk Windows 2K/NT/XP dan Apache untuk Linux dan Windows. Anda dapat menginstall salah satu program tersebut dan mencoba menjalankan form yang telah dibuat dengan bantuan beberapa script seperti JavaScript, Visual Basic Script (VBScript), CGI Script, ASP maupun PHP. Perintah dasar pembuatan sebuah form adalah :
<FORM name="nama_form" method="jenis_method" action="url_script">
</FORM>
Atribut Name pada form menunjukkan nama form. Sedangkan Method menunjukkan metode pengiriman informasi ke webserver yang terbagi menjadi GET dan POST. GET digunakan apabila Anda menginginkan informasi yang dikumpulkan oleh form sebagai sebuah string yang ditambahkan ke URL untuk page yang diminta. Sedangkan POST mengirimkan data secara terpisah pada suatu standard input, sehingga sangat cocok untuk diterapkan pada pengiriman data dalam jumlah banyak. Metode GET sendiri lebih banyak diterapkan pada input yang sifatnya hidden. Atribut Action digunakan untuk menentukan kemana informasi form akan diserahkan. Macam-macam kontrol pada form antara lain :
- Text Box :
<INPUT TYPE="TEXT" NAME="nama_input" SIZE="ukuran_text" MAXLENGTH="panjang_max-input_pada_textbox">
- Password Boxes:
<INPUT TYPE="PASSWORD" NAME="nama_password" SIZE=" ukuran_text"> - Radio Buttons :
<INPUT TYPE="RADIO" NAME="nama_input" VALUE="pilihan_1 ">Pilihan 1
<INPUT TYPE="RADIO" NAME="nama_input" VALUE="pilihan_2 ">Pilihan 2 - Check Boxes :
<INPUT TYPE="CHECKBOX" NAME="nama_input" VALUE=" pilihan_1" CHECKED> Pilihan 1
<INPUT TYPE="CHECKBOX" NAME="nama_input" VALUE=" pilihan_2"> Pilihan 2 - Text Block / Text Area :
<TEXTAREA NAME="nama_input" ROWS="jumlah_baris" COLS="jumlah_kolom"> </TEXTAREA> - Menu Drop Down (Combo Box) :
<SELECT NAME="nama_input">
<OPTION VALUE="pilihan_1" SELECTED> Pilihan 1 </OPTION>
<OPTION VALUE="pilihan_2"> Pilihan 2 </OPTION>
</SELECT> - Command Button :
<INPUT TYPE="BUTTON" VALUE="Button">
<INPUT TYPE="SUBMIT" VALUE="Submit">
<INPUT TYPE="RESET" VALUE="Reset">
Atribut Name menunjukkan nama input. Perlu diingat bahwa Name untuk input tipe Radio, CheckBox dan Drop Down harus sama untuk semua pilihan yang masuk pada satu kategori. Sedangkan Size menunjukkan panjang textbox yang akan ditampilkan, misalnya <SIZE=20>. Atribut Maxlength menunjukkan panjang maximum input, misalnya <MAXLENGTH=100>.
Atribut Checked pada Checkbox ataupun atribut Selected pada Drop Down menunjukkan item akan dipilih secara default. Pada contoh di atas, pilihan 1 menjadi default item yang dipilih.
Untuk Command Button, terdapat 3 jenis input, yaitu button, submit dan reset. Button memiliki fungsi command button biasa. Submit digunakan untuk mentransmisikan / mengirimkan informasi yang telah dimasukkan ke sebuah form. Sedangkan Reset digunakan untuk membatalkan seluruh pengisian. Tombol ini digunakan untuk membersihkan semua input pada form.
Berikut adalah contoh penggunaan sebuah form pada HTML :
-------------------------------------------------------------------------------------------------
<HTML>
<HEAD> <TITLE> Membuat Form </TITLE> </HEAD>
<BODY>
<p align=center> <b> Form Sign As New User </b>
<FORM name="fnewuser" method="post">
<p> <pre>
Nama : <input type="text" name="nama" size="30"> <br>
Gender : <input type="radio" name="gender" value="pria"> Pria <input type="radio" name="gender" value="wanita"> Wanita <br>
E-mail : <input type="text" name="email" size="25"> <br>
Password : <input type="password" name="password" size="20" maxlength="10"> <br>
Tutorial yang paling disenangi dari IndoPHP : <select name="fav_tutor"> <option value="html"> HTML </option> <option value="php" selected> PHP </option> <option value="phpdbase"> PHP-Dbase </option> </select> <br>
Fasilitas untuk user yang diinginkan : <input type="checkbox" name="fas_user" value="free_dl" checked> Free Download Script <br> <input type="checkbox" name="fas_user" value="info_email"> Info terbaru selalu dikirim ke e-mail </pre> <p>
<input type="submit" name="submit" value="Sign Up"> <input type="reset" value="Reset">
</FORM>
</BODY>
</HTML>
-------------------------------------------------------------------------------------------------
Perlu diperhatikan bahwa pada contoh di atas, sengaja tidak ditambahkan atribut ACTION mengingat HTML membutuhkan tambahan script ataupun webserver untuk memproses fungsi ini. Anda dapat mencoba mempelajari bahasa pemograman PHP untuk menjalankan sebuah form.
0 komentar :
Posting Komentar