pengenalan html html merupakan dasar dari segala bahasa pemrograman web yang akan muncul berikutnya....
TRANSCRIPT
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
1
Pengenalan HTML
HTML (Hyper Text Markup Language) adalah simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Perintah dalam HTML dikenal dengan istilah Tag “<x>….</x>”. Tag-tag HTML selalu diawali dengan <x> dan diakhiri dengan </x> dimana x tag HTML seperti b, i, u dan sebagainya. Namun ada juga tag yang tidak diakhiri dengan tanda </x> seperti tag <br>, <input> dan lainnya. Sebuah halaman website akan diapit oleh tag <html>……</html>. File-file HTML selalu berakhiran dengan ekstensi *.htm atau *.html. Jadi jika anda mengetik sebuah naskah dan menyimpannya dengan ekstensi *.html maka anda membuat file yang berformat HTML. <B><I><U>MICHELLE TANAMAL</U></i></B>
ATAU
HTML (HyperText Mark up Language) merupakan suatu metoda untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program. Walaupun HTML itu sendiri belum dapat dikategorikan sebagai bahasa pemrograrnan WEB. Tetapi HTML merupakan dasar dari segala bahasa pemrograman WEB yang akan muncul berikutnya.
Berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :
Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.
Markup
Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web.
Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.
Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.
Apa Saja Yang Dibutuhkan Hardware
- Komputer PC / Laptop Software
- Text Editor (Cute HTML / Cute HTML pRO 6/ Notepad / Notepad ++ / vi / emacs, dsb) - Web Browser (Internet Explorer / Opera / FireFox, dsb)
Contoh Bahasa Pemrograman Web, antara lain: 1. Java 2. JavaScript 3. DHTML 4. Dreamweaver 5. Frontpages, 6. Adobe GoLive, dll
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
2
Apa itu Website ??? Website/Web/Homepage adalah semua dokumen yang ada di dalam internet (arti luas), arti yang lebih sempit bisa kita artikan sebagai alamat di internet. Contoh Website: - http://www.yahoo.com - http://www.detik.com - http://www.jawapos.com - dll
Apa kelebihan CuteHTML dibanding-kan program editor lain??? Kelebihannya: 1. Hasil bisa langsung kita lihat tanpa harus koneksi dengan internet. 2. Dapat menjalankan HTML, bahasa pemrograman JavaScript, Java Applet 3. Sewaktu menuliskan kode-kode HTML ada menu dan toolbar bantuan
Hasil rancangan yang sudah jadi (dibuat pakai CuteHTML) trus diapain ?
Rancangan web tersebut harus dimasukan ke dalam internet (Web server) biar orang diseluruh dunia bisa
mengunjungi web kita.
Bagaimana caranya??? Anda harus punya program CuteFTP atau sejenisnya. Jadi CuteFTP itu program untuk memasukan website ke dalam internet (upload/publish). Jalankan CuteFTP lalu ikuti perintah-perintahnya.
Bayar tidak kita upload ke internet???
Ada yang bayar dan ada yang gratis
Yang bayar : Bisa hubungi Iboost, Dotcom, Doteasy, Solo, Telkomnet, Radnet, dli
Contoh alamat yang bayar:
- http://www.nama_anda.com/
- http://www.nama_anda.co.id/
Yang Gratis: Kunjungi Tripod, Yahoo (Geocities), dll
Contoh alamat gratis :
- http://www.geocities.com/nama_anda/
Tampilan layar CuteHTML :
STRUKTUR DASAR PENULISAN HTML <HTML>
<HEAD>
<TITLE> JUDUL HOMEPAGE</TITLE>
</HEAD>
<BODY>
ISI PROGRAM HTML </BODY>
</HTML>
Area Navigation
Pane
Status
bar
Tag toolbar
Main toolbar
Menu Bar
Tombol Control Tampilan
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
3
Menggunakan Tag pada HTML
Beberapa contoh penggunaan tag HTML :
Ada beberapa tag yang memiliki atribut didalamnya, seperti tag <font>, <table>, <input> dan
sebagainya. Pada tag font ia memiliki beberapa atribut diantaranya atribut: color, size, face.
Untuk lebih memahami atribut lihatlah contoh berikut ini.
<font color=”red” face=”Arial” size=”12”>Ini Font Arial berwarna merah dan berukuran 12
pt</font>
hasil Ini Font Arial berwarna merah dan berukuran 12 pt
Atribut color digunakan untuk menentukan warna tulisan.
Atribut face digunakan untuk menentukan jenis huruf.
Atribut size digunakan untuk menentukan ukuran huruf.
Jika anda lihat bahwa atribut color berada pada awal, lalu yang kedua adalah face dan yang
terakhir adalah size. Anda tidak perlu memperdulikan urutan atribut tersebut karena browser
hanya membaca isi dari properi bukan urutan atributnya.
Daftar Tag pada HTML
Berikut ini adalah tabel tag-tag HTML dan fungsinya:
Tag Utama
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
4
Modifikasi Teks
Font
Links
Formatting
face
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
5
Gambar
Tabel
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
6
Form
Anda tidak perlu menghafal semua tag tersebut, nanti malah kepala anda malah pecah!. Cukup
hafalkan yang penting-penting saja seperti <table><form><input><ul>. Tidak hafal pun tidak
apa-apa kan kita bisa melihat daftar kalau lupa, yang penting kita paham, BETUL?.
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
7
Menggunakan Atribut dari Tag
A. Tag <p>…</p>
Tag <p> digunakan untuk membuat paragraf dalam sebuah halaman web. Kita semua tahu
kalau paragraph ada yang bertipe rata kiri, tengah, kanan dan justify. Untuk lebih memperjelas
ketik kode di bawah ini.
Contoh :
<html>
<head>
<title>Atribut Tag <P></title>
</head>
<body>
<p align="left"><b>Teks ini berada di kiri</p>
<p align="center">Teks ini berada di tengah</p>
<p align="right">Teks ini berada di kanan</b></p>
<p align="justify">Paragraph ini bertipe justify. Dimana semua teks akan dibuat
lurus sama dengan batas tepi halaman. Oh ya, tag <p></p> merupakan
default atau bentuk baku tag <p></p> dimana teks atau paragraf akan
berformat rata kiri. Jika anda tidak memberi atribut <i>align</i> pada tag
<p> maka browser akan menganggap rata kiri.</p>
</body>
</html>
Setelah selesai simpan file tersebut dengan mengklik menu File – Save as. Tentukan tempat simpannya. Beri nama file dengan tag_p.html. Klik Save. Pastikan Save as Type adalah HTML Document. Untuk menjalankan kode anda tersebut buka IE atau FireFox klik File – Open, arahkan dimana anda menyimpan file tag_p.html tadi. Hasilnya akan terlihat
seperti gambar berikut :
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
8
B. Tag <br> = Line Break
Pada pemaparan bagian sebelum ini telah dijelaskan bahwa tag <P> dapat digunakan untuk memisahkan suatu paragraf dengan paragraf yang berikutnya. Persoalan berikutnya bagaimana jika ingin menyisipkan line break pada akhir baris agar jarak dengan baris berikutnya tidak terlalu jauh (kalau kita menggunakan tag <P> jarak antara kedua baris relatif lebih jauh). Tentu saja kita dapat melakukan dengan menggunakan tag <PRE> untuk menampilkan dokumen dalam bentuk preformat, akan tetapi hal ini kurang diminati karena font ditampilkan dalam format monospace. Untuk mengatasi hal itu kita dapat menggunakan tag <BR>. Tag <BR> ini akan menyisipkan line break pada akhir baris sehingga kita dapat pindah ke baris berikutnya tanpa harus berganti paragraf.
Pada contoh berikut akan ditampilkan pada page berupa penggunaan line break dan penyisipan sebuah garis horizontal.
<HTML>
<HEAD>
<TITLE>Horizontal Rule and Line Break</TITLE>
</HEAD>
<BODY>
<P><B>Using <BR> to force a line break</B><BR>
Hi Everybody ! <BR>
My Name is Jhon <BR></P>
<P><B>Using <HR> to add a horizontal rule</B>
<HR>
</BODY>
</HTML>
C. Tag <PRE> ... </PRE> = Preformat Pada kondisi biasa web browser akan mengabaikan pemakaian karakter-karakter multi spasi, tab, dan carriage return, namun kita dapat mencegahnya dengan menggunakan tag <PRE>. Penggunaan tag <PRE> ini membuat web browser akan menampilkan dokumen dalam bentuk apa adanya (karakter multi spasi, tab dan carriage return tidak diabaikan).
Tag <PRE> merupakan kependekan dari "preformatted", yang artinya naskah ditampilkan dalam bentuk layout yang asli. Pada contoh berikut ditampilkan perbedaan antara naskah dokumen yang menggunakan tag <PRE> dan naskah yang lain tidak menggunakannya. Layout
asli kedua naskah tersebut dibuat serupa sehingga kita dapat melihat perbedaan dari hasil tampilannya.
<HTML>
<HEAD>
<TITLE>The <PRE> Tag</TITLE>
</HEAD>
<BODY>
<H3>Without the <PRE> Tag:</H3>
Here's
some ditty
Specially done
to lay it out all
Formatted and pretty.
Unfortunately, that is all
This junk really means
Because I admit I
couldn't scrawl
Poetry for
beans.
<P>
<H3>With the <PRE> Tag:</H3>
<PRE>
Here's
some ditty
Specially done
to lay it out all
Formatted and pretty.
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
9
Unfortunately, that is all
This junk really means
Because I admit I
couldn't scrawl
Poetry for
beans.
</PRE>
</BODY>
</HTML>
Catatan :
Pada penggunaan tag <PRE>, teks akan ditampilkan dengan menggunakan font dengan format monospace.
D. Tag <HR>= Penyisipan Garis Untuk menambah nilai estetika page maupun untuk memisahkan suatu bagian informasi dari bagian yang lainnya, kita dapat menyisipkan sebuah garis horisontal pada page. Penyisipan garis ini dapat dilakukan dengan menambahkan tag <HR>. Tag <HR> ini juga memiliki beberapa parameter tambahan yang memungkinkan kita untuk memodifikasi tampilan dari garis horisontal yang digunakan ini.
Tag nya :
<HR> atau <HR Width=”65%” Align=”Center” Size=”15” NOSHADE> digunakan untuk membuat Garis Horisontal, Width untuk lebar garis, Align untuk posisi garis, Size untuk tinggi baris, NOSHADE untuk info tanpa kotak luar
E. Tag Judul = Heading Seperti halnya pada pembuatan buku, kita dapat membagi naskah atau dokumen HTML ke dalam beberapa seksi untuk memudahkan proses pembacaan. Masing-masing seksi atau bagian itu terdapat satu subjudul. Untuk menangani format tampilan yang seperti ini kita dapat menggunakan tag HTML yang khusus untuk kepentingan tersebut. Terdapat enam tag yang dapat digunakan untuk membentuk format heading yakni mulai dari <H1> yang menggunakan ukuran font paling besar hingga ke <H6> yang ukuran font-nya paling kecil.
Contoh penggunaannya dalam file HTML adalah sebagai berikut:
<HTML>
<HEAD>
<TITLE>A Text Formatting and Headings Extravaganza</TITLE>
</HEAD>
<BODY>
<H1>From Buck-Naked to Beautiful: Dressing Up Your Page</H1>
<H2>Sprucing Up Your Text</H2>
<H3>Yer Basic Text Formatting Styles</H3>
<H3>Combining Text Formats</H3>
<H3>Accessorizing: Displaying Special Characters</H3>
<H2>Sectioning Your Page With Headings</H2>
<H2>A Few More Formatting Features</H2>
<H3>Handling Preformatted Text</H3>
<H3>Them's the Breaks: Using <BR> for Line Breaks</H3>
<H3>Inserting Horizontal Lines</H3>
</BODY>
</HTML>
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
10
F. Tag <font>…</font>
Fungsi tag <font> adalah untuk memanipulasi baik jenis, ukuran, dan warna huruf.
Namun kita akan lebih bereksperimen dengan atribut ini.
Seperti biasa klik File – New – HTML/XHTML.
Ketik kode di bawah ini.
Setelah selesai simpan dengan nama tag_font.html. Output dari kode di atas dapat anda lihat pada gambar 2.2.
Nb: Tanda Enter pada kode diatas tidak berpengaruh pada tampilan/output pada browser. Enter digunakan agar kode mudah dibaca.
G. Tag untuk Format Teks Dasar
Pada umumnya web browser mendukung empat macam format teks yakni bold, italic, monospace, and underline. Keempat format teks ini diimplementasikan dalam format HTML dengan menambahkan tag-tag yang bersesuaian untuk masing-masing format tersebut.
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
11
Format teks Tag awal Tag Akhir
Bold <B> </B>
Italic <I> </I>
Underline <U> </U>
Monospace <TT> </TT>
dicetak lebih terang <STRONG> </STRONG>
dicetak lebih besar <BIG> </BIG>
Text dicetak lebih kecil <SMALL> </SMALL>
text dicetak mode Empasize
<EM> </Em>
text Subscript <SUB> </SUB>
Text Superscript <SUP> </SUP>
Text Dicoret <S> </S>
Text Berkedip <BLINK> </BLINK>
Sebagai contoh kalau kita ingin menggunakan format-format teks ini maka dalam file HTML harus kita tambahkan:
<HTML>
<HEAD>
<TITLE>Yer Basic Text Formatting Styles</TITLE>
</HEAD>
<BODY>
<U>My Excellent Bookstore Adventure</U>
<P>
The other day, I went to a unique bookstore called
<TT>Mary, Mary, Quite Contrary</TT>. There were
<I>tons</I> of unexpected delights, including, believe
it or not, a <B>Self-Helpless</B> section! For real.
I saw titles like <I>Got a 50-Cent Head? Here's How To
Get a Ten Dollar Haircut!</I> and <I>A Few Geese Shy of
a Gaggle-And Proud Of It!</I>
</BODY>
</HTML>
Kita juga dapat mengkombinasikan dua macam format teks secara bersamaan. Misalkan untuk menampilkan kata-kata dalam cetak tebal dan miring kita dapat menuliskan kode HTML seperti ini:
<B><I>Kata-kata yang tercetak tebal dan miring</I></B>
Selain itu kita juga dapat menampilkan suatu karakter khusus dengan menggunakan kode yang tertentu pula. Ada dua macam kode yang dapat kita gunakan untuk menampilkan karakter-karakter alternatif tersebut yakni dengan menggunakan Character Reference atau Entity Name. Berikut ini terdapat daftar yang memuat beberapa karakter khusus yang dapat ditampilkan dengan menggunakan suatu kode tertentu.
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
12
Misalkan untuk menuliskan "Tag <HTML>" dapat kita implementasikan:
Tag <HTML>
Symbol Character Reference Entity name
< < <
> > >
¢ ¢ ¢
£ £ £
¥ ¥ ¥
© © ©
® ® ®
° ° °
¼ ¼ ¼
½ ½ ½
¾ ¾ ¾
× × ×
H. Tag untuk Teks Berjalan
Tag nya :
<MARQUEE Bgcolor=”warna” Direction=”left/right” Behavior = ”scroll/slide/alternate” > …Text…. </Marquee>
bgcolor untuk warna latar belakang
direction untuk arah gerak text
behavior untuk prilaku gerak text
I. Tag <table>...</table>
Tag <table> adalah salah satu tag yang memiliki atribut terbanyak. Dalam tag <table> juga terdapat 2 tag yang penting yang penting yaitu tag <tr></tr> untuk membuat baris dan tag <td></td> untuk membuat kolom. Tag <table> adalah tag yang penting dalam pendesainan sebuah tampilan situs. Jadi anda harus cukup menguasai tag ini.
OK, sekarang buatlah file baru seperti biasa klik File – New – HTML/XHTML. Ketik kode
dibawah ini. Jangan tegang santai saja....!.
<html>
<head>
<title>Atribut dari tag tabel</title>
</head>
<body>
<p><b>Membuat Tabel</b></p>
<table border="1" bordercolor="black" bgcolor="white" cellpadding="8"
cellspacing="0" width="100%">
<tr> <!-- <tr> artinya membuat sebuah baris -->
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
13
<td>Ini kolom 1 pada baris 1</td> <!-- <td> = membuat sebuah kolom. -->
<td>Ini kolom 2 pada baris 1</td> <!-- </td> mengakhiri sebuah kolom -->
</tr> <!-- mengakhiri sebuah baris -->
<tr>
<td>Ini kolom 1 pada baris 2</td>
<td>Ini kolom 2 pada baris 2</td>
</tr>
</table>
<p><b>Contoh 2: Membuat Tabel</b></p>
<table border="1" bordercolor="black" bgcolor="white" cellpadding="8"
cellspacing="0" width="100%">
<tr bgcolor="yellow">
<td align="center">Ini kolom 1 pada baris 1</td>
<td align="right">Ini kolom 2 pada baris 1</td>
</tr>
<tr>
<td align="center" bgcolor="red"><font color="white">Ini kolom 1 pada baris
2</font></td>
<td align="right">Ini kolom 2 pada baris 2</td>
</tr>
</table>
<p><b><font color="blue">Tabel sebagai bingkai dari paragraf</font></b></p>
<table border="1" style="border-collapse: collapse" cellpadding="8"
bgcolor="white" width="100%" bordercolor="black">
<tr>
<td><p>Tabel memiliki peranan sangat penting dalam tampilan sebuah situs web.
Tanpa tabel desainer akan mengalamai kesulitan dalam mendesain sebuah halaman
web.</p>
<p>Kalau anda perhatikan website yan memiliki tampilan yang tersusun rapi.
Sebenarnya itu adalah tabel hanya saja atribut <font
color="red"><b>border="0"</b></font> sehingga tabel seakan tidak
ada(transparan).</p>
<p>Situs rahasia-webmaster.com banyak menggunakan tabel sebagai bingkai
paragraf. Perlu diingat tag-tag pada html dapat mengandung unsur yang sama.
Contohnya di dalam sebuah tabel terdapat tabel lagi. Di bawah ini adalah tabel
yang berada di dalam tabel utama</p>
<p align="center">
<!-- tag <table> untuk tabel anak -->
<table border="1" style="border-collapse: collapse" bgcolor="white"
bordercolor="black" cellpadding="8" width="80%">
<tr bgcolor="yellow">
<td><b>Nama Barang</b></td>
<td><b>Harga Barang</b></td>
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
14
</tr>
<tr>
<td>Monitor</td><td>Rp. 500.000,-</td>
</tr>
<tr>
<td>CDRW</td><td>Rp. 245.000,0</td>
</tr>
<!-- </table ini untuk menutup tabel anak -->
</table>
</tr>
</table>
<body>
</html>
Setelah itu simpan dengan nama tag_tabel.html. Gambar 2.3 menunjukkan output dari kode diatas.
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
15
Latihan 1 : TABEL Hasil Tampilan :
<HTML>
<Head><Title>LATIHAN 7 </Title></Head>
<BODY>
<TABLE BORDER=3>
<TR>
<TD> baris 1, kolom 1</TD>
<TD> baris 1, kolom 2</TD>
<TD> baris 1, kolom 3</TD>
</TR>
<TR>
<TD> baris 2, kolom 1</TD>
<TD> baris 2, kolom 2</TD>
<TD> baris 2 ,kolom 3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Latihan 2 : TABEL
<HTML>
<HEAD>
<TITLE>LATIHAN MEMBUAT TABEL</TITLE>
</HEAD>
<BODY>
<CENTER><B>DAFTAR NILAI KOMPUTER</B></CENTER>
<P>
<TABLE BORDER=4>
<TR>
<TD ALIGN="CENTER">NO</TD>
<TD ALIGN="CENTER">NAMA</TD>
<TD ALIGN="CENTER">ALAMAT</TD>
<TD ALIGN="CENTER">NILAI</TD>
<TD ALIGN="CENTER">KETERANGAN</TD>
</TR>
<TR>
<TD>1.</TD>
<TD>AGUS PARYONO</TD>
<TD>JL. VETERAN NO. 27 SURABAYA</TD>
<TD ALIGN="CENTER">75</TD>
<TD ALIGN="CENTER">BAIK</TD>
</TR>
<TR>
<TD>2.</TD>
<TD>LIDWINA</TD>
<TD>JL. PREGOLAN NO. 007 SIDOARJO</TD>
<TD ALIGN="CENTER">50</TD>
<TD ALIGN="CENTER">KURANG</TD>
</TR>
<TR>
<TD>3.</TD>
<TD>AMI KUSWANDINA</TD>
<TD>JL. PEMUDA NO. 212 MALANG</TD>
<TD ALIGN="CENTER">90</TD>
<TD ALIGN="CENTER">SANGAT MEMUASKAN</TD>
</TR>
</TABLE>
</BODY>
</HTML>
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
16
Hasil Tampilan :
J. Tag <form>...</form>
Web page memungkinkan kita interaktif dengan pengunjung web , salah satunya dalah dengan penggunaan FORM . Metoda pengiriman data pada form terdapat dua yaitu GET dan POST. Pada HTML metoda ini dinyatakan dengan atribut METHOD di dalam elemen FORM. Metoda
GET merupakan default pengiriman suatu data form .metode GET mengirimkan data pada server dengan cara meletakkannya pada bagian akhir URL yang menunjuk pada script pemroses
Jadi jika URL anda menunjuk ke CGI Script pada URL “cgi-bin/scriptform” dan ata formnya adalah “Salman” dan “2503645”, maka URL akhir yang dikirim ke server adalah :
/cgi-bin/scriptform?kota=Jakarta&telepon=2503645
Metode POST tidak seperti metode GET yang mengirimkan datanya secara terpisah pada suatu standar input.Script mengambil data form dari stabdar input ini , dengan adanya penyimpanan data secara tersendiri membuat metoda POST bisa menyimpan data input dalam jumlah banyak.
Latihan FORM
<HTML>
<HEAD>
<TITLE>LATIHAN 9</TITLE>
</HEAD>
<BODY>
<FORM METHOD=”POST” ACTION=”kirim.php3”>
<PRE>
Nama :<INPUT TYPE=TEXT NAME=”Nama”>
Alamat :<INPUT TYPE=TEXT NAME=”Alamat” SIZE=40 MAXLENGTH=60>
E-mail :<INPUT TYPE=TEXT NAME=”Email” SIZE=20>
Telepon :<INPUT TYPE=TEXT NAME=”Telepon” SIZE=7>
<INPUT TYPE=SUBMIT VALUE=”OK”> <INPUT TYPE=RESET VALUE=”BATAL”>
</PRE>
</FORM>
</BODY>
</HTML>
Contoh form diatas :
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
17
K. Tag <input>
Tag <input> memiliki atribut type yang fungsinya sangat vital dalam output tampilan. Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox, password box, checkbox,
radio button dan sebagainya. Daripada banyak berteori lebih baik kita praktek saja. Seperti biasa buat file baru dan ketik
kode di bawah ini. <html>
<head> <title>Atribut tag Form dan Input</title>
</head> <body><font face="verdana" size="2">
<form action="coba.php" method="post"> <p><b>Tag input dengan atribut type="text"</b><br>
<input type="text" name="teks_ku" size="16" maxlength="20"><br> Ini textbox dengan nama <i>teks_ku</i> ukuran <i>16 chr</i> dan maksimal karakrer yang dapat ditampung <i>20 chr(character)</i>.</p>
<p><b>Tag input dengan atribut type="password"</b><br>
<input type="password" name="password_ku" size="16" maxlength="20"<br> Ini passwordbox dengan nama <i>password_ku</i> ukuran <i>16 chr</i> dan maksimal karakrer yang dapat ditampung <i>20 chr(character)</i>.</p>
<p><b>Tag input dengan atribut type="radio"</b><br> <input type="radio" name="radio_ku" value="isi_1">Radio 1 --> nama
<i>radio_ku</i> isi/value <i>isi_1</i><br> <input type="radio" name="radio_ku" value="isi_2">Radio 2 --> nama
<i>radio_ku</i> isi/value <i>isi_2</i><br> <b>Jika nama radio tidak sama maka tidak dianggap satu pilihan. Untuk membuktikannya silahkan ganti salah satu nama dari radio diatas untuk mengetahui
perbedannya.</b></p> <p><b>Tag input dengan atribut type="checkbox"</b><br> <input type="checkbox" name="checkbox_ku_1" value="isi_1">Checkbox 1 --> nama
<i>checkbox_ku_1</i> isi/value <i>isi_1</i><br> <input type="checkbox" name="checkbox_ku_2" value="isi_2">Checkbox 2 --> nama <i>checkbox_ku_2</i> isi/value <i>isi_2</i><p>
<p><b>Tag input dengan atribut type="submit"</b><br>
<input type="submit" value="Tombol Submit"><br> Tombol ini berguna untuk mem-post(mengirimkan variabel dan isi variabel yang ada pada form ke file tujuan (action="file_tujuan"))</p>
<p><b>Tag input dengan atribut type="reset"</b><br> <input type="reset" value="Bersihkan"><br>
Tombol ini berguna untuk membersihkan seluruh tulisan yang ada pada seluruh isian form. Coba isikan semua textbox dan radio lalu tekan tombol ini.</p>
<p><b>Tag input dengan atribut type="hidden"</b><br> <input type="hidden" value="data_ku" name="data">
Tipe ini berguna jika si webmaster menginkan variabel yang sifatnya sudah didefinisikan. Dan tidak menampilkan output apapun.</p>
<p><b>Tag input dengan propeti type="image"</b><br> <input type="image" src="letak_file_gambar_anda" height="98" width="98"><br>
Image memiliki fungsi yang sama dengan type submit</p> </form></font>
</body> </html>
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
18
Simpan dengan nama tag_form_input.html dan jalankan. Hasilnya akan seperti yang terlihat
pada gambar 2.4.
L. Tag <select>...</select> dan <option> Mengapa kita langsung membahas 2 tag?. Pertanyaan yang bagus dan jawabannya sama
dengan dengan pembahasan diatas. Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output. Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat.
Sekarang mari kembali bermain kode. Buat file baru dan ketik bahasa planet dibawah ini!
<html> <head> <title>Propeti tag Select dan Option</title>
</head> <body>
<p><b>Penggunaan select dan dan option</b></p> <p>Daftar kategori silahkan pilih kategori</p>
<form action="coba.php" method="post"> Kategori: <select name="Pilihan">
<option value="Kategori 1">Kategori 1 <option value="Kategori 2">Kategori 2 <option value="Kategori 3">Kategori 3
</select> <p><input type="submit" value="KIRIM"></p>
</form> </body> </html>
Simpan dengan nama tag_form_select.html lalu jalankan pada browser. Ingat agar Save as type nya adalah HTML Document. Outputnya dapat dilihat pada gambar berikut :
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
19
M. Tag <a>...</a>
Anda tentu sering surfing di internet dan mengklik suatu tulisan atau gambar yang menuju halaman website lainnya. Tulisan atau gambar itu adalah link. Ya, link adalah tulisan atau gambar yang merujuk/membuka halaman suatu website. Segala tulisan atau tag lainnya yang
diapit tanda <a> dan </a> akan dianggap link oleh browser. Nah, waktunya melemaskan tangan. Ketik kode dibawah ini.
<html> <head>
<title>Atribut dari tag A</title> </head> <body>
<p>Tag a digunakan untuk menuju/membuka link alamat suatu website. Link merupakan tulisan yang merujuk suatu alamat website. Semua tulisan ataupun tag yang berada
dalam tag <a> dan </a> akan dianggap link oleh browser. Atribut yang sangat penting dalam tag a adalah atribut <i>href</i>. Isi dari atribut ini
adalah alamat website yang dituju.</p> <p>Contoh link ke alamat Google</p> <a href="http://www.google.com">Ini link ke google.com</a>
<p>Link juga mempunyai atribut <i>target</i> yang fungsinya berhubungan dengan window. Isi dari atribut target dapat berupa "_blank", "_self", "_parent",
"_top". Atribut "_blank" akan membuka alamat website pada window yang baru. Isi atribut default dari target adalah "_self" dimana alamat website akan dibuka pad window yang sama.
<p>Contoh link dengan atribut target="_blank"</p>
<a target="_blank" href="http://www.rahasia-webmaster.com">Bagaimana Menjadi Webmaster dalam 30 Hari</a>
<p>Untuk atribut target lainnya silahkan bereksperimen sendiri. Karena Thomas Alfa Eddison pun melakukan ribuan percobaan sebelum akhirnya ia dapat menemukan bohlam.</p>
</body>
</html> Simpan dengan nama tag_a.html lalu jalankan maka hasilnya akan seperti gambar 2.6.
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
20
Contoh lain :
<a href="fotoku.jpg">Klik disini anda akan masuk ke file fotoku</a> <a href="webpribadi.html">Klik disini anda akan masuk ke web pribadiku</a>
N. Tag <body>...</body> Seperti namanya body artinya tubuh. Maka atribut yang diset pada tag body akan berpengaruh pada seluruh tubuh/body dokumen. Pada tag body terdapat beberapa atribut namun ada dua yang terpenting yaitu background dan bgcolor. Atribut background digunakan untuk
membuat sebuah gambar menjadi latar dari halaman. Sedangkan bgcolor digunakan untuk menset warna dari latar halaman website.
Saatnya melemaskan tangan kembali. Ketik kode di bawah ini. <html>
<head> <title>Atribut dari Tag Image</title> </head>
<body bgcolor="#000000" link="http://www.google.com"> <font color="#ffffff" face="verdana">
<p><b>Ini body dengan bgcolor="#000000" atau samadengan "black"</b><br> dan font color diset ="#ffffff" atau samadengan "white".</p> <p>Di dalam html anda dapat menggunakan perpaduan warna antara angka dan huruf
seperti "#cgcgcg" akan menghasilkan warna abu-abu.</p> </body> </html>
Simpan dengan nama tag_body.html dan buka dengan browser maka akan tampak seperti gambar 2.7.
Keterangan kode warna : #000000 : black #ff0000 : red #ffff00 : yellow #c0c0c0 : silver #800080 : purple #000080 : navy
#808080 : gray #ff00ff : fuchsia #0000ff : blue #cgcgcg : gray #008000 : green #008080 : teal #ffffff : white #00ff00 : lime #00ffff : aqua
#800000 : maroon #808000 : olive Contoh lain :
<body bgcolor="maroon"> … </body> <body background=”alam.jpg”> … </body>
O. Tag <img>
Suatu website yang bagus pasti memiliki gambar di dalamnya. Dan suatu waktu anda tentu ingin menambahkan gambar didalam website anda. Untuk menampilkan gambar pada halaman dapat digunakan tag <img>. Format file yang dapat didukung oleh tag img
bermacam-macam mulai BMP, JPG, GIF, TGA dan lain-lain.Tag img memiliki beberapa atribut yaitu :
src : letak file gambar yang akan ditampilkan
border: tebal bingkai gambar
height: menentukan tinggi image/gambar
width: menentukan lebar image/gambar
align : menentukan perataan image/gambar dapat diisi dengan nilai-nilai TOP, MIDDLE, BOTTOM, LEFT, dan RIGHT
alt : sebagai alternatif jika browser yang digunakan oleh pengguna tidak dapat menampilkan image/gambar
Nilai dari atribut src jika letak file gambar berada pada direktori yang sama dengan direktori file html anda. Maka cukup tuliskan nama filenya saja, contohnya src=”nama_file.jpg”. Dan jika
letak filenya berada pada sub folder/direktori maka nilainya adalah
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
21
src=”sub_folder/nama_file.jpg”. Lalu bagaimana jika letaknya pada folder/direktori diatas
file html saya?. Caranya hampir sama hanya saja ditambahkan tanda ../(titik dua dan slash). Yang artinya pindah satu folder keatas, jika letaknya di dua folder diatas file html saya. Sama tinggal menambah ../../ (artinya pindah dua folder ke atas). Contohnya
src=”../nama_folder/nama_file.jpg”. Untuk contoh kali ini masuklah ke direktori/folder HTML yang telah anda buat sebelumnya.
Buatlah satu buah folder dalam direktori HTML tersebut. Dan berilah nama folder itu gambar. Lalu copykan satu gambar apa saja kedalam folder gambar tersebut.
Lalu ketiklah kode berikut ini. Ingat ganti nilai dari src sesusai dengan nama file gambar anda. <html>
<head> <head> <title>Atribut dari Tag img</title>
</head> <body>
<p><b>Tag img hanya dengan atribut <i>src</i></b></p> <img src="../gambar/e-book.jpg">
<p><b>Tag img dengan border="1"</b></p> <img src="../gambar/e-book.jpg" border="1"</b><p>
<p><b>Tag img dengan height dan width</b></p> <img src="../gambar/e-book.jpg" border="1" height="300" width="200">
</body> </html>
Lalu simpan dengan nama tag_img.html dan jalankan. Maka output-nya akan terlihat seperti gambar 2.8.
Perhatian : 1. Nama file gambar yang kita masukan harus benar – benar sama dengan nama file gambar yang anda miliki
(perhatikan kapital huruf maupun spasinya)
2. File html dengan file gambar usahakan berada dalam tempat yang sama untuk menghindari kesalahan / tidak
munculnya gambar karena alamat gambar yang salah akan menyebabkan gambar tidak muncul. Jika file gambar dan file html berada di tempat yang sama maka anda cukup menuliskan nama file gambarnya saja tidak perlu
pakai lokasi.
3. Semakin besar ukuran gambar semakin besar pula ukuran filenya. Semakin besar ukuran file maka proses downloading (pemanggilan gambar sewaktu wrebside andas diakses pengunjung, akan semakin lama.
4. Seandainya anda mau mengubah ukuran gambar, anda bisa merubah pakai program photoshop/paint/sejenisnya.
Setelah jadi gambar editan tersebut yang akan dipasang hasilnya akan lebih memuaskan dibandingkan anda
menggunakan perintah WIDTH dan HEIGHT, karena kadangkala hasil gambar tidak memuaskan (terlihat gepeng)
Beberapa contoh lain :
<HTML>
<HEAD> <TITLE>Contoh Menyisip Citra/Gambar</TITLE>
</HEAD>
<BODY>
<IMG SRC="kuda.jpg" ALIGN=TOP> <P>
<IMG SRC="kelinci.jpg" ALIGN=MIDDLE>
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
22
<P>
<IMG SRC="anjing.jpg" ALIGN=BOTTOM>
<P> <IMG SRC="tegar.jpg">
<P>
<IMG SRC="file://localhost/L:/GAMBAR/MACAN.jpg">
<P> <IMG SRC="anjing.jpg" ALT=”gambar klik anjing” ALIGN=BOTTOM>
<P>
<IMG SRC="anjing.jpg" HEIGHT=“100” WIDTH=”125” ALIGN=”Left” BORDER=”5”>
</BODY> </HTML>
P. Tag <ol>...</ol>, <ul>...</ul> dan <li>...</li> Kali ini kita akan membahas 3 tag sekaligus. Karena masing-masing tag tidak dapat dipisahkan.
Tag <ol> dan <ul> keduanya membutuhkan tag <li> agar dapat menampilkan output. Tag-tag ini berguna untuk menyusun suatu daftar yang ingin anda tonjolkan pada pengunjung website.
Ah..., capek teori lebih baik langsung praktek saja OK. Ketik kode dibawah ini.
<html> <head> <title>Atribut dari tag ol, ul dan li</title>
</head> <body>
<p><b>Penggunaan tag ol dengan li</b></p> <ol> <li>Ini nomor 1</li>
<li>Ini nomor 2</li> <li>Ini nomor 3</li>
</ol> <p><b>Penggunaan tag ul dengan li</b></p>
<ul> <li>Ini bullet 1</li> <li>Ini bullet 2</li>
<li>Ini bullet 3</li> </ul>
<p><b>Gabungan tag ol, ul dan li</b></p> <ul>
<li>Ini bullet 1</li> <ol> <li>Ini nomor 1</li>
<li>Ini nomor 2</li> </ol>
<li>Ini bullet 2</li> <ol> <li>Ini nomor 1</li>
<li>Ini nomor 2</li> </ol> </ul>
</body> </html>
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
23
Setelah selesai simpan dengan nama tag_ol_ul_li.html lalu jalankan pada browser. Maka
hasilnya seperti yang dapat anda lihat pada gambar 2.9.
Sebenarnya tipe – tipe list itu ada model nya masing-masing (disc / circle / square) lihat pada contoh 2. Namun
demikian, sering kali banyak orang tidak memperhatikannya.
Disc : untuk list lingkaran hitam penuh
Circle : untuk list lingkaran kosong
Square : untuk list kotak hitam penuh
Contoh 1 : List Bullet sederhana
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<h4>Minuman:</h4> < ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
</BODY>
</HTML>
Contoh 2 : List Bullet lengkap
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<h4>Disc bullets list:</h4>
<ul type="disc"> <li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul type="circle">
<li>Apples</li> <li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul type="square">
<li>Apples</li> <li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</BODY>
</HTML>
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
24
Contoh 3 : Sub List Bullet (1)
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</BODY>
</HTML>
Contoh 4 : Sub List Bullet (2)
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<ul>
<li>Black tea</li>
<li>Green tea</li>
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</BODY>
</HTML>
Contoh 5 : List Angka Sederhana
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</BODY>
</HTML>
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
25
Contoh 6: List Angka lengkap <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <h4>Numbered list:</h4> <ol type="1"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Buah-buahan:</h4> <ol type="a" Start="2"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </BODY> </HTML>
Q. TAG MENYISIP SUARA (SOUND)
Perintah <BGSOUND> adalah perintah untuk memasukkan suara atau musik ke dalam Website anda. Sintak :
<BGSOUND loop=infinite SRC=”lokasi dan nama file suara”>
Contoh : <BGSOUND loop=”infinite” SRC=”galleryfoto.wav”> <BGSOUND SRC=”music.mp3” loop=”infinite”>
BGSOUND=Background Sound = web diberi latar belakang suara loop=infinite artinya mengulangi suara tersebut terus menerus selama halaman web tersebut dibuka.
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
26
Perhatian : 1. Perhatikan dalam hal penulisan file suara baik itu capital huruf maupun spasinya, harus sama antara
file asli dengan yang dituliskan. 2. File html dan file suara herndaknya diletakkan di satu tempat yang sama. Untuk memudahnya upload
ke internet dan penulisan perintahnya. Jika di tempat yang sama anda cukup menuliskan nama file suaranya saja tidak perlu alamat/lokasi yang lengkap.
3. Ukuran file musik yang sangat besar (misalnya MP3), tidak bias kita masukkan ke dalam Website anda. Karena nanti akan kesulitan sewaktu anda upload ke internet akan keluar pernyataan “kehabisan waktu ketika kita memindahkannya ke dalam server”. Jadi jika anda mau pasang suara hendanya dalam bentuk file yang kecil misalnya dalam bentuk midi (.wav)
Cara merekam suara dari Microsoft Windows : 1. Klik start 2. Sorot programs 3. Klik Accessories 4. Klik Entertaiment 5. Klik Sound Recorder 6. Muncul program Sound Recorder : 7. Siapkan sarana pendukung untuk rekaman misalnya microfon atau lainnya. 8. Klik tombol untuk memulai merekam suara anda. 9. Jika udah selesai klik tombol untuk berhenti. 10. Klik menu Effects – Pilih Increase volume (by 25%) untuk memperkeras suara. Misal : lakukan
perintah ini sampai 5 kali (seperlunya). 11. Tekan tombol untuk mencoba suara. 12. Klik menu File – pilih Save As :
a. Tentukan tempat simpan file suara (Save in) b. Tentukan nama file suara (File name) c. Klik tombol Save
R. TAG FRAME
Frame HTML dapat digunakan untuk membuat tampilan halaman HTML yang terbagi-bagi menjadi beberapa bagian dimana setiap bagiannya merupakan satu halaman HTML yang terpisah. Ini
dilakukan untuk membuat tampilan halaman HTML yang salah satu atau beberapa bagian berganti-ganti isinya sedang bagian lain tetap sehingga dapat menghemat bandwith internet.
Adapun untuk membuat frame dalam HTML adalah sebagai berikut :
1. FRAMESET : perintah untuk membuat frame, dan umumnya berpasangan dengan perintah <FRAME SRC>
Sintak :
o <FRAMESET COLS=”lebar jendela bagian kiri, lebar jendela bagian kanan”> o <FRAMESET COLS=”*,*”>
o <FRAMESET ROWS=”*,*”> 2. FRAME SRC : perintah untuk memasukkan suatu halaman atau gambar ke dalam jendela
Sintak :
<FRAME SRC=”link” NAME=”nama” SCROLLING=”auto” MARGINWIDTH=1 MARGINHEIGHT=1 NORSIZE>
3. IFFRAME SRC : perintah untuk membuat jendela dengan lebar dan tinggi sesuai dengan
programmer dan dapat diletakan di bagian kiri layar, tengah atau bagian kanan
Sintak :
<IFRAME SRC=”link” WIDTH=”lebar“ HEIGHT=”tinggi”></IFRAME>
Link dapat berupa halaman (file), gambar atau website
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
27
Latihan 1 FRAME
<HTML>
<HEAD>
<TITLE>LATIHAN 8 </TITLE>
</HEAD>
<FRAMESET ROWS=20%,*>
<FRAME NAME=header SRC="header.html">
<FRAMESET COLS=30%,*>
<FRAME NAME=kiri SRC="kiri.html">
<FRAME NAME=kanan SRC="kanan.html">
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>
Hasil Tampilan :
Latihan 2 FRAME
<HTML>
<HEAD>
<TITLE>Contoh buat frame</TITLE>
</HEAD> <FRAMESET COLS="40%,60%">
<FRAME SRC="keterangan.html" scrolling="auto" marginwidth="1" marginheight="1" noresize>
<FRAME SRC="mbahdiyo.jpg" scrolling="auto" marginwidth="1" marginheight="1" noresize>
</FRAMESET>
</HTML>
Hasil Tampilan :
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
28
Latihan 3 FRAME
<HTML>
<HEAD>
<TITLE>Contoh buat frame</TITLE>
</HEAD>
<FRAMESET ROWS="*,*">
<FRAMESET COLS="*,*">
<FRAME SRC="keterangan3.html">
<FRAME SRC="mbahdiyo.jpg">
</FRAMESET>
<FRAMESET COLS="*,*">
<FRAME SRC="pTarno2.jpg">
<FRAME SRC="pakkarno.jpg">
</FRAMESET>
</HTML>
Hasil Tampilan :
Latihan 4 (IFRAME SRC)
IFRAME SRC adalah perintah untuk membuat jendela dengan lebar dan tinggi sesuai dengan
programmer dan dapat diletakan di bagian kiri layar, tengah atau bagian kanan.
Sintak :
<IFRAME SRC=”link” WIDTH=”lebar“ HEIGHT=”tinggi”></IFRAME>
Link dapat berupa halaman (file), gambar atau website
Contoh program :
<HTML>
<HEAD>
<TITLE>Contoh buat frame</TITLE>
</HEAD>
<BODY>
<P align="center">
<IFRAME SRC="keterangan2.html" WIDTH=400 HEIGHT=105></IFRAME></P>
<P align="center">
<IMG SRC="Tegar.jpg" WIDTH="250" HEIGHT="300"></P>
</BODY>
</HTML>
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
29
Hasil Tampilan :
S. Atribut universal Yang dimaksud atribut universal dalam hal ini adalah suatu atribut yang pasti terdapat pada tag apapun. Kita semua tahu tidak semua atribut dapat dimasukkan dalam tag tertentu. Contohnya
atribut cellpadding milik tag <table> tidak dapat digunakan oleh tag <p>.
Berikut ini adalah daftar beberapa atribut universal yang penting.
name: atribut ini untuk memberi nama pada tag yang digunakan (sangat penting dalam tag yang memerlukan input dari user).
class: atribut ini digunakan khususnya jika anda menggunakan CSS.
title: atribut ini menampilkan keterangan yang telah ditentukan oleh pembuat (istilahnya tooltips pada windows. Gerakkan mouse anda pada jam komputer akan muncul tulisan, itulah tooltips).
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
30
PROYEK
Membuat Website Pribadi
(Personal Homepage)
Kebanyakan orang jika baru mengenal HTML maka ia akan membuat website tentang profil dirinya sendiri. Hal ini dikarenakan ia tidak tahu apa yang harus ia publikasikan. Kali ini kita
akan mencoba membuat sebuah personal homepage sederhana. PERSIAPAN
Sebelum melakukan pendesainan lakukan beberapa hal berikut ini.
Buatlah sebuah folder di direktori C:\HTML
Beri nama folder tersebut Bab 3
Buat sebuah folder di direktori C:\HTML\Bab 3 yang baru kita buat
Beri nama folder tersebut gambar Semua file HTML yang berhubungan dengan bab 3 akan kita simpan pada folder Bab 3. Begitu
pula dengan gambar-gambar yang berhubungan dengan bab 3 akan kita simpan di direktori C:\HTML\Bab 3\gambar.
SKETSA PROYEK
Website yang akan anda buat adalah website pribadi yang berisi tentang profil data David Joko
David Joko ingin pada website tersebut terdapat foto dirinya, keluarga atau rumah rumahnya.
David Joko ingin profil datanya terletak pada halaman berbeda
David Joko ingin terdapat link-link di websitenya Ketika mendesain website biasakan untuk membuat sketsa kasarnya terlebih dahulu. Ini
berguna agar pekerjaan kita menjadi lebih terfokus. Tidak masalah jika nantinya anda melakukan perubahan pada tahap akhir yang penting sketsanya sudah ada.
Untuk membuat sketsa desain anda bisa menggambar di sehelai kertas atau pada program pengolah gambar pada komputer. Yang namanya sketsa tidak harus bagus yang penting gambaran umumnya saja. Contoh sketsa untuk proyek kita kali ini dapat anda lihat pada
gambar 3.0.
LANGKAH-LANGKAH PEMBUATAN Seperti yang dapat anda lihat pada gambar sketsa proyek, pada website tersebut memiliki 1
tabel utama dan 2 tabel anak yaitu tabel foto dan tabel menu. Tabel utama terdiri dari 2 kolom dan 1 baris. Sedangkan pada tabel foto dan menu masing-masing memiliki 1 kolom dan 1 baris.
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
31
1. Halaman Utama [index.html]
Baiklah mari kita mulai bekerja. Pertama jalankan PHP DESIGNER 2006 klik menu File-New- HTML/XHTML. Seperti biasa mari kita mengetik kode-kode yang enak ini.
<html> <head>
<title>David Joko Website</title> </head>
<body bgcolor="#D7E7F3"> <table border="1" style="border-collapse: collapse" width="100%" cellpadding="8"
bordercolor="black"> <tr> <td width="20%">
<!-- ini tabel foto --> <table border="1" style="border-collapse: collapse" width="100%"
cellpadding="8" bordercolor="black"> <tr> <td align="center"><img border="1" height="100 " width="100" src=""></td>
</tr> </table> <p></p> <!-- untuk memberi jarak -->
<!-- ini tabel menu --> <table border="1" style="border-collapse: collapse" width="100%" cellpadding="8" bordercolor="black">
<tr> <td>Ini nanti untuk link</td>
</tr> </table> </td>
<!-- ini untuk kolom 2 tabel utama --> <td valign="top"><p align="center"><b>SELAMAT DATANG</b></p></td> </tr>
</table>
</body> </html>
Setelah selesai simpan kode diatas dengan nama index.html dan letakkan di folder bab3. Perlu diketahui file utama untuk sebuah website memiliki nama index.html. Server pertama kali akan mencari file bernama index.html. Jika ia tidak menemukan maka server akan menampilkan
pesan error. Untuk keterangan lebih lanjut nanti akan dijelaskan pada bab selanjutnya.
Buka file tersebeut dengan Internet Explorer, hasilnya akan terlihat seperti gambar 3.1.
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
32
File gambar ini yang akan kita gunakan untuk menampilkan foto. (Kalau bisa ya foto anda
sendiri, jika tidak punya sembarang foto juga tidak apa-apa) Ingat sesusaikan isi src=”” sesuai dengan nama file anda.
Sekarang saatnya mengupdate isi website dengan yang sebenarnya. Untuk itu bukalah file index.html dan rubahlah kode yang diberi warna kuning diatas sehingga menjadi seperti
berikut. Jangan lupa ubah atribut border pada setiap tabel menjadi “0”
<html> <head> <title>David Joko Website</title>
</head> <body bgcolor="#D7E7F3"> <font face="verdana">
<table border="0" style="border-collapse: collapse" width="100%" cellpadding="8"
bordercolor="black"> <tr> <td width="20%">
<!-- ini tabel foto --> <table border="0" style="border-collapse: collapse" width="100%" cellpadding="8" bordercolor="black">
<tr> <td align="center"><img border="1" height="100" width="150" src="gambar/fotoku.jpg"></td>
</tr> </table>
<p><hr></p> <!-- untuk memberi jarak --> <!-- ini tabel menu --> <table border="0" style="border-collapse: collapse" width="100%"
cellpadding="8" bordercolor="black"> <tr> <td><font size="2">
<ul> <li><a href="profil.html">Profil</a></li>
<li><a href="kegiatan.html">Kegiatan</a></li> <li><a href="foto.html">Foto-foto</a></li> <li><a href="puisi.html">Puisi Teman</a></li>
<li><a href="mailto: [email protected]">Email saya</a></li> </ul> </td>
</tr> </table>
</td> <!-- ini untuk kolom 2 tabel utama --> <td valign="top">
<p align="center"><font size="4"><b>SELAMAT DATANG DI WEBSITE DAVID JOKO</b></font></p>
<p><font size="2">Saya ucapkan terima kasih atas kunjungan anda ke website saya. Pada website ini anda dapat melihat profil data diri saya dan kegiatan- kegiatan yang saya lakukan. Di bawah ini adalah puisi yang saya buat beberapa
waktu lalu. Inspirasi puisi ini datang ketika saya termenung sendirian dan memandang langit nan luas.</font></p>
<p><b>Aku dan Tuhanku</b></p> <p><font size="2">
<i>Ketika aku memandang langit<br> aku bertanya pada pada diriku<br> aku...<br>
<br> siapakah aku sebenarnya?<br>
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
33
darimanakah aku berasal?<br>
jauhkah aku dari Tuhanku?<br> aku....<br> <br>
Tuhan...<br> betapa kuasanya engkau<br> menciptakan langit dan bumi<br>
untuk menghidupi orang-orang<br> seperti aku<br>
<br> aku...<br> apakah aku sudah mengabdi kepadamu?<br>
rasanya hanya aku dan Engkau yang tahu<br> </i></font></p> </td>
</tr> </table>
</body> </html>
Setelah selesai mengedit simpanlah file tersebut. Jalankan file tersebut lewat IE Hasilnya dapat anda lihat pada gambar 3.2.
2. Halaman Profil [profil.html]
Selanjutnya kita akan membuat file profil.html yang akan menampilkan daftar riwayat hidup david joko. File profil.html terdiri dari 1 tabel dan memiliki 2 kolom dan banyak baris.
Jalankan PHP DESIGNER 2006 Klik File-New-HTML/XHTML. Ketik kode dibawah ini.
<html> <head>
<title>Profil David Joko</title> </head>
<body bgcolor="#D7E7F3"> <font face="verdana">
<p align="center"> <table border="0" cellpadding="8" bordercolor="black">
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
34
<tr>
<td colspan="2" align="center"><b>DATA PRIBADI</b><hr></td> </tr> <tr>
<td align="right"><font size="2"><b>Nama: </b></td> <td><font size="2">David Joko</td> </tr>
<td align="right"><font size="2"><b>Tempat/Taggal lahir: </b></td> <td><font size="2">Surabaya, 10 Nopember 1978</td>
</tr> <td align="right"><font size="2"><b>Agama: </b></td> <td><font size="2">Islam</td>
</tr> <tr> <td align="right"><font size="2"><b>Gol. Darah: </b></td>
<td><font size="2">O</b></td> </tr>
<tr> <td align="right"><font size="2"><b>Pekerjaan: </b></td> <td><font size="2">Swasta</td>
</tr> <tr> <td align="right"><font size="2"><b>Hobi: </b></td>
<td><font size="2">Traveling, Mancing</td> </tr> <tr>
<td colspan="2" align="center"><a href="index.html">Kembali ke halaman utama</a></td>
</tr> </table> </font>
</body> </html>
Simpan file diatas dengan nama profil.html. Lalu jalankan pada browser, hasilnya akan namapak seperti gambar 3.3.
Pada kode diatas terdapat atribut colspan=”2” pada tag <td>. Ini dikarenakan kita ingin menjadikan 2 kolom menjadi 1 kolom untuk judul DATA PRIBADI. Karena jumlah kolomnya 2
maka isi colspan=”2” jika kolomnya 4 maka isinya 4 juga.
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
35
3. Halaman Kegiatan [kegiatan.html]
Wih..., tidak terasa materi kita sudah jauh rupanya. Bagaimana, menyenangkan bukan bermain dengan kode langsung daripada program WYSIWYG. Sekarang kita akan membuat file
kegiatan.html yang berisi tentang kegiatan-kegiatan yang dilakukan David Joko. Desain kegitan.html terdiri dari 2 kolom dan 2 baris untuk setiap kegiatan. Kolom 1 berisi
gambar dan kolom 2 berisi keterangan.
Untuk itu copylah sebuah file gambar ke direktori C:\HTML\gambar. Gambar ini yang akan menampilkan/mewakili kegiatan yang kita lakukan. Silahkan modifikasi kode dibawah ini sesuka anda. Karena saya yakin anda sekarang sudah paham dasar pembuatan website.
Buat file baru klik File-New-HTML/XHTML lalu ketik kode di bawah ini.
<html> <head>
<title>Kegiatan David Joko</title> </head>
<body bgcolor="#D7E7F3"> <font face="verdana">
<p align="center"><font size="4"><b>Kegiatan David Joko</b><hr></p> <center>
<table border="1" style="border-collapse: collapse" cellpadding="8" bordercolor="black" width="80%">
<tr> <td><img src="gambar/pantai.jpg" width="231" height="149"></td> <td bgcolor="white"><font size="2"><p><b>Kegiatan Akhir Tahun Bersama
Teman</b></p>Pada akhir tahun 2005 nanti saya dan teman-teman mempunyai acara tahun baruan di Bali. Rencananya kami dibali mulai tanggal 29 Desember sampai 2 Januari.</font></td>
</tr>
<tr> <td align="center" colspan="2"><a href="index.html">Kembali ke halaman utama</a></td>
</tr> </table>
</center>
</font> </body> </html>
Simpanlah kode diatas dengan nama kegiatan.html. Lalu buka melalui IE hasilnya akan nampak seperti gambar 3.4.
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
36
4. Halaman Foto [foto.html]
Pada halaman ini nantinya akan kita tampilkan foto-foto yang ada maupun yang belum ada pada website david joko. Desain halaman teridiri dari 2 kolom dan 2 baris untuk setiap 2 buah gambar.
Untuk segera melihat hasilnya buatlah file baru pada PHP DESIGNER 2006 klik menu File-New- HTML/XHTML. Dan ketik kode di bawah ini.
<html>
<head> <title>Foto-Foto</title> </head>
<body bgcolor="#D7E7F3"> <font face="verdana">
<p align="center"><font size="4"><b>Foto-foto koleksi David Joko</b></font><hr></p>
<center> <table border="1" style="border-collapse: collapse" width="80%" cellpadding="8"
bordercolor="black" bgcolor="white"> <tr> <td align="center"><img src="gambar/fotoku.jpg" height="149" width="231"></td>
<td align="center"><img src="gambar/pantai.jpg" height="149" width="231"></td> </tr> <tr>
<td align="center"><font size="2">David Joko</font></td> <td align="center"><font size="2">Pantai</font></td>
</table> <p></p> <table border="1" style="border-collapse: collapse" width="80%" cellpadding="8"
bordercolor="black" bgcolor="white"> <tr> <td align="center"><img src="gambar/kantor.jpg" height="149" width="231"></td>
<td align="center"><img src="gambar/bromo.jpg" height="149" width="231"></td> </tr>
<tr> <td align="center"><font size="2">Kantor</font></td> <td align="center"><font size="2">Bromo</font></td>
</table> <p><a href="index.html">Kembali ke halaman utama</a></p>
</center>
</font> </body> </html>
Simpan kode diatas dengan nama foto.html, lalu jalankan hasilnya akan terlihat seperti gambar 3.5.
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
37
5. Halaman Puisi [puisi.htm]
Puisi? Suatu bentuk ungkapan ekspresi batin secara abstrak. Itulah yang ingin ditampilkan oleh David Joko pada websitenya. Puisi yang ada pada halaman tersebut tidak hanya puisi David
Joko tetapi juga puisi para pengunjung yang mereka kirimkan kepada David Joko untuk ditampilkan pada websitenya. Desain halamannya setiap puisi memiliki 2 baris dan 1 kolom. Baris 1 digunakan untuk puisi itu
sendiri dan baris 2 untuk penulisnya.
Buat file baru dan ketik kode di bawah ini. <html>
<head> <title>Puisi Teman-teman</title> </head>
<body bgcolor="#D7E7F3">
<font face="verdana"> <p align="center"><font size="4"><b>Puisi-Puisi Hati</b><hr></font></p>
<center> <table border="1" style="border-collapse: collapse" bgcolor="white"
bordercolor="black" width="60%" cellpadding="8"> <tr> <td>
<p><font size="2"><b>SEBUAH PUISI UNTUK SAHABATKU</b></p> <i>Matamu bagaikan kilatan pedang yang tajam<br>
Menghujam tepat di hati lawanmu<br> Tutu katamu membuat suasana jadi tentram<br> <br>
Mengapa sekarang kau terdiam<br> Tanpa candamu hari-ahriku kelabu<br> Dukamu bagai tangisan alam<br>
Bawakan sebuah kesedihan yang dalam </font>
</td> </tr> <tr>
<td align="right"><font size="2">Oleh: Istiqamah</font></td> </tr> </table>
<p></p>
<table border="1" style="border-collapse: collapse" bgcolor="white" bordercolor="black" width="60%" cellpadding="8">
<tr> <td> <p><font size="2"><b>SERIBU TANYA</b></p>
<i>Adakah seuntai kata<br> Tanpa bicara?<br> Adakah sejuta jawab<br>
Tanpa tanya?<br> <br>
Adakah langit kelam<br> Tanpa mendung hitam?<br> Adakah guratan merah darah
Tanpa luka?<br> Adakah isak tangis pilu<br> Tanpa kesedihan?<br>
Adakah rasa damai<br> Tanpa perjuangan?<br>
By : Lab. Komputer Stella Maris Surabaya_______________________________________________
38
<br>
Begitulah hidup manusia<br> Hamba yang selalu bertanya<br> Adakah keadilan di bumi ini?<br>
O, betapa banyak waktu<br> Untuk menjawab semua itu<br> </font>
</td> </tr>
<tr> <td align="right"><font size="2">Oleh: Susanti</font></td> </tr>
</table> <p><font size="2">Jika anda ingin puisi anda ditampilkan pada website ini.
Silahkan kirimkan puisi anda ke email saya di <a href="mailto: [email protected]">[email protected].</font></p>
<p><a href="index.html">Kembali ke halaman utama</a></p> </font>
</body> </html>
Simpan dengan nama puisi.html lalu jalankan di IE hasilnya akan seperti gambar 3.6.
Good Luck