IT - 1

(1)

Overview

Tujuan Akhir Materi Kuliah IT-1

Pada akhir Semester 1 (Mata kuliah IT-1) ini diharapkan mahasiswa dapat : 1. Mendefinisikan pengertian file HTML (HyperText Mark up Language) 2. Memahami konsep hypertext

3. Menjelaskan struktur dasar suatu file HTML

4. Mengetahui beberapa tag HTML dasar yang sering digunakan 5. Membuat web page sederhana

6. Memahami penggunaan fasilitas link dan penyisipan citra pada file HTML.

Pengenalan HTML

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.

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.

(2)

Notes :

• HTML dikembangkan dari konsep SGML

• HTML bukan merupakan bahasa pemrograman

• Konsep HyperText untuk memudahkan mencari informasi

Apa yang dapat dilakukan dengan HTML ?

Memodifikasi format teks

Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini adalah :

Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.

Kita dapat menampilkan teks dalam bentuk cetakan tebal Kita dapat menampilkan sekelompok kata dalam bentuk miring

Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik

Kita dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.

Menampilkan daftar sesuatu dalam bentuk point-point (item)

Dengan HTML kita dapat menampilkan daftar atau deretan informasi dalam bentuk point-point sehingga lebih mudah dibaca dan dipahami

Membuat link

Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web. Ada tiga macam link yang dapat kita gunakan :

Link menuju bagian lain dari page

Link menuju page lain dalam satu web site

Link menuju resource atau web site yang berbeda • Menentukan Format Suatu Teks

• Membuat List Tentang Sekelompok Hal

• Membuat Link ke Dokumen Lain atau Bagian lain dari Dokumen Yang Sama

• Menyisipkan Citra Atau Gambar

(3)

Menyisipkan citra

Dengan menyisipkan citra maka tampilan page kita akan lebih menarik, interaktif dan informatif untuk mendukung data-data lainnya dalam bentuk teks.

Menampilkan informasi dalam bentuk tabel

(4)

Struktur Dasar Web Page

File-file HTML dapat ditampilkan sesuai dengan keinginan kita seperti pada

contoh-contoh sebelumnya adalah karena terdapat marker yang

diimplementasikan dalam bentuk tag-tag HTML. Secara umum format tag

HTML tersebut dapat dituliskan sebagai berikut:

<TAG>Teks yang akan dipengaruhi oleh tag</TAG>

Sebagai contoh kalau kita akan membuat tulisan dalam format tebal maka

yang harus kita tuliskan dalam file HTML adalah:

B>Tulisan yang tercetak tebal</B>

Tanda slash (/) menunjukkan akhir dari suatu tag, akan tetapi ada juga

beberapa tag HTML yang tidak memerlukan pasangan akhirannya ini.

Tag yang paling dasar yang digunakan dalam file HTML adalah <HTML> dan

</HTML>. Kedua tag ini berfungsi untuk mendefinisikan bahwa teks yang

terdapat di antara kedua tag tersebut adalah dalam format HTML.

Untuk mendefinisikan head,

kita dapat menambahkan tag <HEAD> dan

</HEAD>

setelah penggunaan tag <HTML> sedemikian hingga struktur page menjadi :

•

Tag HTML

(5)

</HEAD> </HTML>

Sedangkan bagian body adalah tempat dimana kita dapat menempatkan teks

dan berbagai aksesori pendukung lainnya yang akan ditampilkan pada web

page. Bagian ini dapat didefinisikan dengan meletakkan tag <BODY> dan

</BODY> di antara teks yang akan kita tampilkan. Kedua tag ini diletakkan

sesudah tag </HEAD>, sehingga struktur dasar sebuah page dapat dituliskan

sebagai :

Untuk mendefinisikan judul page (title) maka kita dapat melakukannya

dengan meletakkan naskah judul di antara tag <TITLE> dan </TITLE>. Judul

ini akan ditampilkan pada title bar web brower Misalkan kita akan membuat

sebuah page dengan judul "Latihan HTML" maka kita harus menambahkan:

<TITLE>Latihan HTML</TITLE>

Perhatikan bahwa tag <TITLE> dan </TITLE> ini harus diletakkan pada

bagian head, sehingga dokumen HTML dasar kita menjadi:

<HTML>

<HEAD>

<TITLE>Latihan HTML</TITLE> </HEAD>

(6)

Teks yang akan ditampilkan pada bagian body

</BODY> </HTML>

Pada file HTML, karakter carriage returns (Enter) diabaikan, sehingga untuk

membuat atau mendefinisikan naskah dalam bentuk paragraf harus

ditambahkan tag khusus yakni <P>. Sebagai contoh kita dapat menampilkan

beberapa paragraf sekaligus dalam satu dokumen HTML.

<TITLE>Latihan HTML</HTML>

</HEAD> <BODY>

Teks yang akan ditampilkan pada bagian body

<P>Paragraf satu </P> <P>Paragraf dua </P> </BODY>

(7)

(8)

Format Teks Dasar 2

Paragraf

• Paragraf digunakan untuk mengatur susunan tekas dalam suatu paragraf halaman web.

• tag <P> ….. </P>

• Tag ALIGN digunakan untuk mengatur struktur sebuah paragraf pada halaman web

Contoh Penggunaan ;

<TITLE> Latihan Paragraf</TITLE> </HEAD>

<BODY>

Contoh Paragraf rata kanan ……… <P ALIGN = “left”> Contoh Paragraf rata kiri ……… <P ALIGN = “ Tengah”> Contoh Paragraf rata kiri ………

</P> </BODY> </HTML>

BlockQuote

• Indentasi Teks dengan BlockQuote

• Perintah Taq ini digunakan untuk menulis kutipan teks.

• Dengan perintah ini browser akan menampilkan teks menjorok ke dalam (indentasi).

Contoh Penggunaan ;

(9)

<BODY>

<H1> Latihan Membuat BlockQuote</H1>

<p> Seorang pakar IT menyatakan bahwa : …… </P> <BLCKQUOTE> Sudah waktunya kita berbenah………

</BLCKQUOTE> </BODY> </HTML>

Break <BR>

• Break (BR)

• Break adalah tag yang digunakan untuk mengatur tampilan halaman web ke dalam satu baris yang baru.

• Tag <BR> membuat baris barupa tanpa memberi baris kosong.

<TITLE> Latihan Line Break</TITLE> </HEAD>

<BODY>

<H1> Latihan Membuat Line Break</H1>

<P> Banyak metoda yang digunakan dalam membangun sebuah halaman web, namun secara garis besar di kategorikan ke dalam dua jenis, yaitu :

<BR>1. Client Side Scripting<BR> <BR>2. Server Side Secripting</BR> </P>

(10)

Font

• Tag Font digunakan untuk mengatur tampilan huruf dalam dokumen HTML. • Secara garis besar terdapat beberapa atribut yang

• digunakan untuk mengatur ukuran, jenis dan warna huruf yang akan digunakan, yaitu : Font Size, Font Face, Font Color

Font Face

• Font Face, atribut ini digunakan untuk mengtur jenis huruf yang akan digunakan.

• Atribut Face ini diisi dengan string jenis huruf yang akan digunakan, seperti jenis huruf Arial, Times News Roman, Verdana dan sebagainya.

<TITLE> Latihan Jenis Font</TITLE> </HEAD>

<BODY>

(11)

<FONT FACE = “Verdana”> Jenis Huruf Verdana<P> <FONT FACE = “Tahoma”> Jenis Huruf Tahoma<P> </BODY>

</HTML>

Font Color

• Font Color, digunakan untuk mengatur warna huruf yanga akan digunakan. • Terdapat dua cara pemberian atribut warna :

• Menuliskan nama warna secara langsung, seperti Red, Blue, Green dan sebagainya

• Menggunakan nilai RGB (Red Green Blue) dari suatu warna.

<TITLE> Latihan Warna Font</TITLE> </HEAD>

<BODY>

<FONT COLOR = “Red”> Warna Huruf Merah<P>

<FONT COLOR = “#FF0000”> Coba tebak warna apa ini<P> <FONT COLOR = “#00FF00”> Yang wananya apa ya?<P> </BODY>

(12)

TAG LIST

Tag list digunakan untuk menampilkan beberapa daftar. Ada beberapa jenis list yang dikenal oleh HTML yaitu :

1. List bernomor (ordered list), tag yang dipakai adalah <ol> dan diakhiri dengan </ol>

2. List tidak bernomor (unordered list) , tag yang dipakai adalah <ul> dan </ul> 3. List definisi (definition list), tag yang dipakai adalah <dl> dan </dl>

4. Untuk item listnya, tag yang digunakan dalam list bernomor dan tidak bernomor adalah dengan perintah <li> dan ditutup dengan </li>. Sedangkan untuk list definisi, <dt> dan </dt> sebagai definisi term dan <dd> dan </dd> sebagai definisi description (keterangan dari definisi term).

OL (Ordered List)

Bentuk umum untuk membuat list bernomor adalah :

</ol>

Untuk tipe nomor, nilai yang bisa diisi adalah 1 (Arabic Number), A (huruf besar), a (huruf kecil), I (romawi kapital), i (romawi kecil).

UL (Unordered List)

Bentuk umum untuk membuat list simbol adalah : OL = Ordered List

UL = UnOrdered List

LI = List

(13)

</ul>

Untuk tipe Simbol nilai yang bisa diisikan adalah disc (bulatan), circle (lingkaran), square (segiempat).

DL (Definition List)

Untuk list definisi, bentuk umumnya adalah : <dl>

<dt>Term 1</dt><dd>Keterangan lengkap mengenai Term 1</dd>

</dl>

Contoh script adalah : <html>

<head>

</head>

<body>

<p> Yang Termasuk Negara ASEAN (memakai angka)</p>

<li>Indonesia</li>

<li>Thailand</li>

<li>Brunei</li>

</ol>

<p> Yang Termasuk Negara ASEAN (memakai huruf kapital)</p>

<li>Indonesia</li>

(14)

<li>Brunei</li>

</ol>

<p>Kota Yang Termasuk Negara ASEAN (memakai bulatan)</p>

<li>Indonesia</li>

<li>Thailand</li>

<li>Brunei</li>

</ul>

<p> Kota Yang Termasuk Negara ASEAN (memakai segiempat)</p>

<li>Indonesia</li>

<li>Thailand</li>

<li>Brunei</li>

</ul>

<p>Kota-Kota Besar Di Pulau Jawa (dalam bentuk seperti daftar

pustaka)</p>

<dl>

<dt><b>Bandung</b></dt>

<dd>Bandung adalah ibukota Jawa Barat</dd>

<dt><b>Jakarta</b></dt>

<dd>Jakarta adalah ibukota DKI Jakarta</dd>

<dt><b>Surabaya</b></dt>

<dd>Surabaya adalah ibukota Jawa Timur</dd>

</dl>

(15)

“Complicated List”

<BODY>

<H3> Daftar Menu </H3>

<OL Type = 1> “ Closed Ordered List Type = 1 ”

<LI> <B>Makanan</B>

<OL Type =a> “ Closed Ordered List Type = a ”

<LI> Timbel Komplit <LI> Timbel Tidak Komplit <LI> Sayur Asem

<LI> Kurang Asem </OL>

<LI> <B>Minuman</B>

<OL Type=i> “ Closed Ordered List Type = I “

<LI> Es Campur Rujak <LI> Es Teller

<LI> Sirup Jagung </OL>

<LI> <B>Makanan Ringan </B>

<OL Start = 40> “ Closed Ordered List Start = n “

<LI> Kurupuk Jengkol Jajahean <LI> Kurupuk Udang dibalik Batu </OL> </OL> </BODY> </HTML>

Daftar Menu

1. Makanan

a. Timbel Komplit b. Timbel Tidak Komplit c. Sayur Asem

d. Kurang Asem 2. Minuman

i. Es Campur Rujak ii. Es Teller

iii. Sirup Jagung 3. Makanan Ringan

(16)

Penyisipan Citra atau Gambar

Penyisipan citra pada page dimaksudkan agar tampilan dari page tersebut dapat

lebih menarik dan informatif. Ada beberapa hal yang perlu diperhatikan dalam

penyisipan citra atau gambar ke page, yakni:

Ukuran file citra

Ukuran file yang terlalu besar akan membuat pengunjung web harus menunggu

lebih lama dalam mengakses web karena musti terlebih dahulu mendownload file

citra atau gambar yang ukurannya besar

Tipe file citra

Tipe file yang mendukung untuk transmisi melalui aplikasi web adalah JPEG, GIF

atau PNG

File citra dapat disisipkan ke dalam suatu file HTML dengan menggunakan tag

<IMG>, yakni dalam format penuh:

<IMG SRC_="URL"ALT_{="deskripsi teks"}ALIGN_{="Posisi terhadap Teks"} WIDTH=”n px” HEIGHT=”n px” BORDER=”n px >

• Atribut ALT berfungsi sebagai alternatif jika browser yang digunakan oleh pengguna tidak dapat menampilkan citra.

• Atribut ALIGN dapat diisi dengan nilai-nilai TOP, MIDDLE, BOTTOM, LEFT, dan RIGHT.

• Atribut WIDTH_{dapat digunakan untuk mengatur ukuran lebar citra/gambar}

dengan menentukan nilai dalam satuan pixel atau persen

• Atribut WIDTH dapat digunakan untuk mengatur ukuran lebar citra/gambar

dengan menentukan nilai dalam satuan pixel atau persen

• Atribut BORDER_{digunakan jika gambar/citra akan ditampilkan dengan}

menggunakan bingkai. Ketebalan border dapat ditentukan dengan memasukan

(17)

Contoh penggunaan tag <IMG>:

<HTML>

<HEAD>

<TITLE>Aligning Text and Images</TITLE>

</HEAD>

<BODY>

<IMG SRC="photoawie.jpg" ALIGN=TOP WIDTH=100 BORDER=2>Teks

ini akan diposisikan pada bagian atas gambar.This text appears at

the top of the image.

<P>

Teks ini akan diposisikan pada bagian tengah gambar. This text

appears in the middle of the image.

<P>

<IMG SRC=" photoawie.jpg " ALIGN=BOTTOM WIDTH=100

BORDER=2> Teks ini akan diposisikan pada bagian Bawah

gambar.This text appears at the bottom of the image.

</BODY>

(18)

Link

Pada konsep URL (Uniform Resourse Locator), pada dasarnya semua resource

yang ada di Internet memiliki alamat sendiri. Selanjutnya kita juga telah

memahami konsep hypertext dari sebuah file HTML yang memungkinkan dibuat

suatu link yang menghubungkan pada bagian lain dari dokumen HTML atau

langsung mengarah pada suatu resource Internet tertentu.

URL yang digunakan untuk mengimplementasikan penambahan link pada suatu

page dapat kita sederhanakan dalam model berikut :

Bagaimana://Siapa/Dimana/Apa

Bagaimana

Pada bagian pertama dari URL ini adalah menunjukkan bagaimana cara data

dikirimkan atau ditransmisikan melalui media jaringan. Secara teknis lebih sering

kita sebut dengan istilah protokol. Misalnya untuk aplikasi World Wide Web ini

kita menggunakan protokol yang disebut dengan protokol HTTP. Oleh karena itu

pada bagian awal URL ini kita deklarasikan:

http://

Siapa

Pada bagian selanjutnya menjelaskan "siapa" yang memiliki URL. Bagian ini berisi

nama komputer tempat resource Internet tersebut berada. Istilah yang lebih

teknis kita sebut dengan hostname. Misalkan page kita diletakkan di mesin

www.yahoo.com maka penambahan URL sampai dengan bagian ini menjadi:

Konsep

HOW, WHO, WHERE, WHAT

http://www.unikom.ac.id/berita/november.html

(19)

http://www.yahoo.com

Dimana

Bagian selanjutnya menunjukkan lokasi yang lebih spesifik tempat menyimpan

resource Internet tersebut. Secara fisik bagian ini berisi nama direktori tempat

penyimpanan resource yang bersangkutan.

http://www.yahoo.com/Home

http://www.Google.com/Home

http://www.Detik.com/Home

Apa

Bagian terakhir ini menunjukkan nama file yang akan kita gunakan. Untuk

aplikasi web file ini berisi kode-kode HTML dan teks. Secara keseluruhan URL

dapat dituliskan sebagai berikut:

http://www.yahoo.com/Home/homepage.html

http://www.Google.com/Advertize/today.html

http://www.Detik.com/politik/pemilu.html

Pembuatan link dalam suatu file HTML dapat dilakukan dengan menggunakan tag

<A> yang diikuti dengan parameter referensinya HREF dan TARGET. Target

digunakan untuk menentukan lokasi link tersebut ditampilkan. Gunakan _blank

jika ingin menampilkan link yang dituju di browser baru/lain.

Contoh penggunaanya:

(20)

Contoh script :

<html>

<head>

<title>IMAGE HTML</title>

</head>

<body>

<p>Home page ini menyediakan beberapa link ke search engine :</p>

<a href="http://www.yahoo.com" target="_blank">www.yahoo.com</a> <br>

<a href="http://www.altavista.com" target="_blank">altavista</a> <br>

<a href="http://www.google.com" target="_blank">google</a> <br>

<a href="http://www.php.net"><img border=3 src="admin/images/php.gif" width="120" height="64" align="middle"></a> link dengan gambar <br>

<a href="http://www.mysql.com"><img border=0

src="admin/images/mysql.gif" width="167" height="87" align="middle"></a> link dengan gambar tanpa border <br>

(21)

Tabel

• Tabel banyak digunakan di halama web untuk mendukung pengelolaan halaman web, sehingga informasi tampil dalam bentuk yang ringkas

dan mudah dibaca.

• Secara garis besar tabel digunakan dalam dua hal :

oMengatur struktur konten/ isi data yang ada di dalam halaman

web, yang membutuhkan sistem tabel

oMengatur tata letak halaman web, sehingga menjadi lebih

terstruktur, seperti halaman web dengan 2 kolom, 3 kolom dan

sebagainya

• Untuk membuat tabel digunakan Tag <TABLE> sebagai pembuka tabel dan </TABLE> sebagai penutupnya.

• Tag <TABLE> mempunyai beberpa bagian yang penting, antara lain : o <Caption>….</Caption>, digunakan untuk membentuk judul

tabel. Judul tabel ini akan terletak di luar tabel, di atas atau di

bawah tabel

o <TH>…</TH>, berfungsi untuk meletakkan judul tabel di bagian

paling atas atau paling kiri dari suatu tabel. Tabel Header akan

dicetak dalam bentuk huruf tebal (Bold)

o <TR>…</TR>, digunakan untuk membentuk baris pada suatu

tabel

o <TD>…</TD>, digunakan sebagai tempat menulis data atau

informasi pada tabel.

(22)

Contoh Tabel Sederhana 1 :

baris 1, kolom 1 baris 1, kolom 2 baris 1, kolom 3 baris 2, kolom 1 baris 2, kolom 2 baris 2 ,kolom 3

<HTML><HEAD><TITLE>TABLE </TITLE></HEAD>

<BODY>

<TR>

<TD> baris 1, kolom 1</TD>

</TR>

<TR>

<TD> baris 2 ,kolom 3</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Contoh Tabel Sederhana 2 :

Nama Jabatan

SBY Presiden

(23)

<HTML>

<HEAD>

<TITLE>TABLE</TITLE>

</HEAD>

<BODY>

<TR>

<TH bgcolor=grey > Jabatan</TH>

</TR>

<TR>

<TD>Presiden</TD>

</TR>

<TR>

<TD> Wapres</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Catatan :

• Jumlah baris tabel ditentukan dengan banyaknya <tr>...</tr> yang dituliskan dalam elemen tabel, dari <table>...</table>.

• Jumlah kolom dalam tabel ditentukan dengan banyaknya <td>...</td> di dalam setiap definisi baris, dari <tr>...</tr>.

(24)

Perataan teks sebagai salah satu teknik pemformatan sel mempergunakan

attribut ALIGN. Tag <TH> dan <TD> mendukung attribut ALIGN ini. Caranya

dengan menambahkan attribut ini dalam kode tag misalnya untuk penggunaan

rata kiri dapat dilakukan dengan <TH ALIGN="LEFT">; dan rata kanan dengan

<TH ALIGN="RIGHT"> dan untuk perataan teks rata tengah ditambahkan

ALIGN="CENTER".

Selain perataan teks arah horisontal terdapat pula peraataan teks arah vertikal

yaitu dengan menggunakan attribut VALIGN, attribut VALIGN ini mempunyai

nilai TOP untuk rata atas, MIDDLE untuk rata tengah dan BOTTOM untuk rata

bawah. Penggunaannya sama dengan ALIGN misalnya untuk rata atas

dituliskan <TD ALIGN=TOP>

Pemberian Warna Pada Tabel atau Sel

Tabel ataupun sebuah sel dapat diberi warna menggunakan atribut BGCOLOR. Misalnya sebuah sel ingin diberi warna merah muda maka bisa ditambahkan tag

: <TD BGCOLOR=#F3DDE0>. Atribut ini juga dapat dipasang pada tag <TR>

maupun <TABLE>.

Menentukan Lebar Tabel

Lebar tabel dapat ditentukan menggunakan atribut WIDTH yang diletakkan di

dalam tag TABLE. Nilai dari atribut WIDTH ini dapat bertipe Percent (%)

terhadap lebar layar ataupun dapat berupa satuan pixel (picture element).

Contoh penggunaan lebar tabel berdasarkan satuan persentase layar :

Contoh penggunaan lebar tabel dengan menggunakan satuan pixel :

(25)

Tabel (Lanjutan)

Didalam pembuatan sebuah layout web, sering kita temui beberapa bentuk layout yang bervariasi, mulai dari yang sederhana hingga yang cukup rumit.

Untuk kebutuhan sebuah layout yang sesuai dengan kebutuhan, sering kita dihadapkan pada bentuk-bentuk table yang ‘complicated’. Untuk kebutuhan itu, diharapkan kita bisa memanfaatkan 2 (dua) attribute yang bisa menangani layout yang ‘rumit’ tersebut.

COLSPAN = Atribut yang digunakan untuk menggabungkan kolom ROWSPAN = Atribut yang digunakan untuk menggabungkan baris

Contoh 1 ;

Satu

Dua Tiga

<title> colspan </title> </head>

<body>

<tr>

<tr>

</table> </body>

</html>

<TABLE> <TR> <TD> <COLSPAN> <ROWSPAN>

(26)

Contoh 2 ;

Dua Satu

Tiga

<body>

</TR>

<TR>

</Table> </body>

</html>

Contoh 3 ;

Tiga Kolom

Dua Kolom Dua Baris

Utuh Utuh

<body>

<TR>

<TD colspan=3 align=center> tiga kolom </TD>

(27)

<TR>

<TD rowspan=3>dua baris </TD> <TD colspan=2>dua kolom </TD> </TR>

<TR>

</table> </body>

</html>

Contoh WEB Layout :

HEADER

Left

Sidebar Content

Right Sidebar

Footer

<body>

<TR>

<TD colspan=3 align=center Height=100 bgcolor=#CADFEC> HEADER </TD>

</TR>

<TR>

<TD Width=100 height=400 align=center>Left Sidebar </TD> <TD width=300 align=center>Content </TD>

<TD width=100 align=center>Right Sidebar </TD> </TR>

<TR>

<TD colspan=3 align=center Height=30 bgcolor=#CADFEC> Footer </TD>

(28)

(29)

FORM HTML

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 data formnya adalah “Awie” dan

“08562160813”, maka URL akhir yang dikirim ke server adalah :

/cgi-bin/scriptform?kota=Awie&telepon=08562160813

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>

<pre>

(30)

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>

</pre>

</form>

</body>

(31)

Form Lanjutan dan Preformat (PRE)

Perhatikan pada script HTML pada pertemuan/modul sebelumnya, pada deretan code ada

satu tag dengan nama <PRE> dan </PRE>. 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.

<BODY>

<H3>Without the <PRE> Tag:</H3>

Topi Saya Bundar Bundar Topi Saya Kalau Tidak Bundar

Bukan topi Saya <P>

Topi Saya Bundar Bundar Topi Saya Kalau Tidak Bundar

Bukan topi Saya </PRE>

(32)

Catatan :

• Perhatikan tampilan hasil pada browser untuk yang menggunakan tag <PRE>. • Pada penggunaan tag <PRE>, teks akan ditampilkan dengan menggunakan font

dengan format monospace.

Contoh Form Lengkap

<BODY >

<H2>FORMULIR PENDAFTARAN</H2> <HR Size=5 Width=400>

(33)

Alamat : <INPUT TYPE=Text Name="alamat" Size=40 Maxlength=40> E-Mail : <INPUT TYPE=Text Name="email" Size=20>

Phone : <INPUT TYPE=Text Name="phone" Size=7 >

Sex : <INPUT TYPE=Radio Name='Sex" VALUE='Male' CHECKED> Male <INPUT TYPE=Radio Name='Sex" VALUE='Female' > Female

Topik yang diminati : <INPUT TYPE= CheckBox Nama='HTML' VALUE="HTML"> HTML <INPUT TYPE= CheckBox Nama='CGI' VALUE="CGI"> CGI <INPUT TYPE= CheckBox Nama='PHP' VALUE="PHP">PHP <INPUT TYPE= CheckBox Nama='Java' VALUE="Java">Java

Waktu Kursus yang dipilih : <SELECT NAME="Waktu" > <OPTION> Pagi

<OPTION> Siang <OPTION> Sore <OPTION> Malam </SELECT>

Cara Pembayaran: <SELECT NAME="Bayar" > <OPTION > Tunai <OPTION> Kredit

<OPTION SELECTED> Transfer <OPTION> Cek

</SELECT>

KOMENTAR :

(34)

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.

Latihan FRAME

<html>

<head>

<title>frame</title>

</head>

</frameset>

</frameset>

<body>

</body>

(35)

Buatlah file-file berikut ;

JudulFrame.html

<b><font color=yellow face=arial black size=7> FRAME SET </font></b> </body>

</HTML>

FormFrame.html

<HTML> <Head> </head> <body> <FORM> <PRE> N a m a :

Password :

(36)

E-Mail :

Phone :

<INPUT TYPE=Text Name="phone" Size=7 ><br> Sex :

<INPUT TYPE=Radio Name='Sex" VALUE='Male' CHECKED> Male<br> <INPUT TYPE=Radio Name='Sex" VALUE='Female' > Female<br>

</body> </HTML> naskahFrame.html <HTML> <Head> </head> <Body bgcolor=#008080>

Copy file instead of using rename when creating backup file This setting affects how UltraEdit generates the backup file. By default UltraEdit renames the original file to the backup file. The reason for the setting is that on some systems, if UltraEdit renames the original file to create the backup, the original file when it is recreated does not maintain the file permissions that previously existed. Setting this causes the rename not to occur, preserving the permissions.

Always create new file when copying to/from temporary file When copying to/from the temporary file to the users file UltraEdit does not create a new file, truncating the old file, it copies the file and sets the file length. On a few servers they appear not to like or support this and do not honor the setting of the file length correctly, causing remnants of the old file to remain if the users deletes a section of a file and saves it. Setting this causes the file to be truncated to 0 length prior to writing the file.

Use registry for settings (not INI file) - This will NOT move the existing items to the registry This setting causes the editor to save and retrieve all settings from the Registry. After UltraEdit determines the INI file in use it checks for this value before reading any other values. If this is set UltraEdit stores all settings in the Registry.

Skip FTP Close command when connecting to FTP Server When UltraEdit connects to an FTP server it issues a close command first to clear any previous connection that may have been aborted. In some cases with products that use FTP Tunneling this has caused a crash within the tunneling software. Setting this options causes UltraEdit not to issue this FTP close command.

Use DDE Associations When File Associations are set from within UltraEdit the setting to use DDE is normally set in the registry for the specific file type. On some systems this may cause an error message when the file is double clicked from Explorer. In this case ensuring that Use DDE Associations is not selected may resolve this. The file associations will need to be modified for this to take effect.

</body> </HTML> listFrame.html <HTML> <Head> </head> <Body bgcolor=#008080> <OL> <LI> <B>Makanan</B> <OL Style="text-indent:1">

<LI> Timbel Komplit <LI> Timbel Tidak Komplit <LI> Sayur Asem

<LI> Kurang Asem </OL>

<LI> <B>Minuman</B> <OL>

<LI> Es Campur Rujak <LI> Es Teller

<LI> Sirup Jagung </OL>

(37)

footerFrame.html

<HTML>

<H5> <marquee>><font color=yellow face=arial black ><i> FRAME SET </font></H5>

</HTML>

index.html (file frame)

<title> Frame set</title> </head>

</FRAMESET>

(38)

Single File HTML for Completed Web

Salah satu teknik untuk membuat web site lengkap selain memanfaatkan FRAME adalah dengan memanfaatkan hanya satu file HTML saja. Teknik ini sangat sederhana karena hanya memanfaatkan single file HTML.

Teknik ini memanfaatkan link dengan target name pada dokumen yang sama dokumen HTML yang sama.

Latihan

<html>

<head>

</head>

<a name=”title”>

(39)

<tr>

</tr>

<tr>

<a href="#pre"><b>PREFACE</b></a><br>

<a href="#ultra"><b>ULTRA EDIT</b></a><br>

<a href="#version"><b>LATES VERSION</b></a><br>

<a href="#limit"><b>LIMITED WARRANTY</b></a><br>

</td>

<a name="pre"><h1><font face=verdana color="yellow">PREFACE</font></h1></a>

<hr>

<a name="ultra"><h2><font face=verdana size= 2 color="#FDD6AA">ULTRA EDIT</font></h2></a>

UltraEdit/UltraEdit-32 is a shareware program.

You are limited to 45 Days of use for an unregistered version.

If you find it useful and continue to use it you are obligated to register it with

the author by sending $30.00 (Ohio Residents add $1.65 Sales Tax) to:

Full and updated registration information is available at

(40)

VISA/MASTERCARD/American Express Accepted

For VISA/MasterCard/American Express orders, include:

1) Name of card holder

2) Address of card holder

3) Name and address of user if different from card holder

4) Expiration date of card

5) Card #.

Credit card orders may be faxed to (513) 779 8643 or telephoned to (513) 779 8549,

or sent to my E-Mail address (see below).

CompuServe Registration

UltraEdit may also be registered online on CompuServe by typing GO SWREG

and following instructions for registering using ID 2662 for UltraEdit and ID 4017 for UltraEdit-32.

This will entitle you to an authorization code, the latest registered version, and technical support.

For CompuServe registrations, a newer version is not sent out if the latest version is available on CompuServe.

</font>

<a name="version"><h2><font face=verdana size= 2 color="#FDD6AA">LATEST VERSION</font></h2></a>

The latest version of UltraEdit/UltraEdit-32 may be found in several places:

The following www page:

http://www.idmcomp.com and http://www.ultraedit.com

(41)

The Windows Users Group Network (WUGNET), operators of the oldest and largest independent support resource forum (WINUSER) for Windows Users on CIS with nearly 1,000,000 active members is recognized in the press, user groups, developers, and Microsoft as the foremost resource for shareware publishers on CompuServe and the Internet.

On the Internet on several sites, including CICA and other sites.

</font>

<a name="limit"><h2><font face=verdana size= 2 color="#FDD6AA">LIMITED WARRANTY </font></h2></a>

THE PROGRAM IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO WARRANTIES OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. IN NO EVENT WILL THE AUTHOR or AUTHORS BE LIABLE TO YOU FOR ANY DAMAGES, INCLUDING INCIDENTAL OR CONSEQUENTIAL DAMAGES, ARISING OUT OF THE USE OF THE PROGRAM, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

YOU ACKNOWLEDGE THAT YOU HAVE READ THIS LICENSE, UNDERSTAND IT AND AGREE TO BE BOUND BY ITS TERMS AS THE COMPLETE AND EXCLUSIVE STATEMENT OF THE AGREEMENT BETWEEN US, SUPERSEDING ANY PROPOSAL OR PRIOR AGREEMENT, ORAL OR WRITTEN, AND ANY OTHER COMMUNICATIONS BETWEEN US RELATING TO THE SUBJECT MATTER OF THIS LICENSE.

UltraEdit/UltraEdit-32 is a shareware program and is provided at no charge to the user for evaluation. The purpose of shareware software is to provide personal computer users with quality software on a "try before you buy" basis, however payment is still required for continued use of the product.

If you find this program useful and continue to use it after a the trial period, you must make a registration payment (see the registration instructions for details). This registration fee will license one user to use one copy of UltraEdit and/or Ultraedit-32 on any one computer at any one time. All users will receive a copy of the latest release when they register, or it will be made available for downloading, and free technical support.

Commercial users must register and pay for their copies within 45 days of first use or their license is withdrawn. Site License and multiple user license arrangements may be made by contacting IDM Computer Solutions, Inc.

Anyone distributing this product for any kind of remuneration must first contact IDM Computer Solutions, Inc. for authorization.

(42)

</font><a href="#title"> go top </a>

</td>

</tr>

<tr>

</tr>

</table>

</body>

(43)

Completed WEB with Multiple Files

Cara mudah membuat web dengan menggunakan beberapa file adalah dengan

mempersiapkan web page (index.html) terlebih dahulu beserta link sesuai

dengan target file yang sudah direncanakan terlebih dahulu, misalkan link untuk

file news.html,

tutorial.html dll pada menu.

Setelah webpage lengkap, langkah berikut adalah menduplikasi file tersebut

(save as : news.html) dilanjutkan pada tahap editing content sesuai dengan

tema. Hal itu terus berulang hingga semua link terhubung dengan benar.

Untuk lebih jelas bisa dibuatkan contoh seperti dibawah ini.

Sample Source code completed HTML files. (file gambar harap disesuaikan

dengan

image source

yang ada)

(44)

</head>

<td colspan=" 3 " width="800" height="150" background="images/J0143743.gif "><font face="verdana" size="14" color="#800000">Public Web<img src="images/2.jpg"

width="100" align="left"></td> </tr>

<tr>

<tr>

</tr>

</table> </center></td> </tr>

<tr>

<tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> <tr>

</tr> </table> </td>

(45)

With an Internet connection and Internet Explorer, you can find and view information about anything on the Web. Just click the topics below to get started. You'll find more information to help you browse the Internet in the Help Contents.

Basic setup

If you aren't connected to the Internet, or you want to create a new connection, click this link.

Set up an Internet connection Learning about Internet Explorer

If you're new to the Internet or to Internet Explorer, here's the information you need to get started.

Introducing the Internet Explorer Web browser Learning how to browse the Web faster and easier Finding the information you want Getting started with Internet Explorer

With an Internet connection and Internet Explorer, you can find and view information about anything on the Web. Just click the topics below to get started. You'll find more information to help you browse the Internet in the Help Contents.

Basic setup

If you aren't connected to the Internet, or you want to create a new connection, click this link.

Set up an Internet connection Learning about Internet Explorer

If you're new to the Internet or to Internet Explorer, here's the information you need to get started.

Introducing the Internet Explorer Web browser Learning how to browse the Web faster and easier Finding the information you want

<tr>

<tr>

<tr>

</tr> <tr>

(46)

<td colspan="3" width="800" height="40" background="images/WB02085_.gif " > <center><font size="6"color="#FF0000">COPY RIGHT</center></td>