Pemrograman HTML
Pemrograman HTML
1. Mengenal Script HTML Dasar
Html
adalah kependekan dari (HyperText Markup Language), merupakan bahasa
scripting yang berguna untuk menuliskan halaman Web dan juga sebagai
bahasa script dasar yang berjalan bersama berbagai bahasa scripting
program lainnya. Semua
tag-tag HTML bersifat dinamis, artinya kode program tidak dapat
dijadikan sebagai file executable program. Hal ini disebabkan HTML
hanyalah sebuah bahasa scripting yang dapat berjalan didalam
browser(pengakses web), antara lain Internet Explorer, Netscape
Navigator, Opera, Mozilla dan lain-lain. Untuk melihat kode program pada
halaman browser melalui menu View -> Source, akan ditampilkan semua tag berserta isi dari halaman web tersebut.
Semua
bahasa scripting yang berjalan dibawah Web dapat didukung oleh HTML,
biasanya bahasa-bahasa tersebut melakukan Embeded Script pada tag-tag
HTMl. Didalam pembelajaran ini kita akan mengulas mengenai pemrograman
PHP yang Embeded dengan tag-tag HTML.
Karena
HTMl hanyalah merupakan sebuah kode Scripting dan bukan merupakan
Program kompiler maka Anda dapat menuliskan semua kode program dengan
menggunakan Editor program yang Anda sukai seperti Macromedia
Dreamweaver, Notepad, Frontpage.
2. Sintaks Dasar HTML
Sebagai sebuah elemen dasar didalam pemrograman Web, HTML memiliki aturan-aturan dalam penulisannya. Ciri
utama dalam HTML adalah adanya tag dan elemen. Elemen dalam dokumen
HTML dikategorikan menjadi dua yaitu elemen <HEAD> yang berfungsi
sebagai kepala dalam program dan diletakkan setelah pembukaan kode
<HTML>. Elemen yang kedua adalah elemen <BODY> yang berguna
utuk meletakkan semua isi web yang kita buat. Setiap dokumen HTMl selalu
didahului dengan sebuah Tag <HTML> yang menandakan bahwa dokumen
tersebut adalah dokumen HTMl. Tag tersebut adalah <HTML> dan kemudian harus ditutup dengan tag </HTML>.
Dalam halaman HTML, terdapat tag yang digunakan untuk mendefinisikan judul yang berkaitan dengan halaman web yang dibuat. Tag ini adalah tag <TITLE> Sintaks penulisannya adalah sebagai berikut :
<head>
<title> … Judul … </title>
</head>
Selain
TITLE, tag <HEAD> juga memiliki elemen yang berguna untuk
memberikan informasi yang berhubungan dengan halaman Web HTMl tersebut
yaitu tag META. Sintaksnya adalah :
<meta atribut = “value”>
Atribut
|
Value
|
Keterangan
|
Name
|
Text
|
Digunakan untuk mendeklarasikan kedudukan pengisi, misal “programmer”
|
Content
|
Text
|
Menjelakan dari judul yang dideklarasikan pada atribut name
|
http-equiv
|
Text
|
Untuk mendeklarasikan atribut server HTTP
|
Contoh penggunaan Meta didalam aplikasi web yang berkaitan dengan programmernya : <meta name=”programmer” content=”nama_anda”> atau <meta http-equiv=”expires” content=”Wed, 14 April 2005 16:30:00 gmt”>
Yang
perlu diperhatikan adalah semua tag harus menggunakan kode pembuka
<> dan kode penutup</>. Sebagai contoh HTML yang dimulai
dengan kode <HTML> harus diakhiri dengan kode </HTML>.
Beberapa bentuk kode yang wajib ada dalam menuliskan dokumen HTML antara lain :
- <html> </html> : Didalam tag HTML hal yang harus ada adalah kode <HTML> yang menyatakan jenis dokumen yang dibuat, dan harus ditutup dengan kode </HTML>
- <head> </head> : Kode <HEAD> jika diartikan berarti kepala dalam program, dan diakhiri dengan kode </HEAD>. Diletakkan setelah kode <HTML>
- <title> </title> : Kode ini selalu diletakkan didalam kode <HEAD>. Kode ini digunakan untuk mendeklarasikan judul yang akan ditampilkan dalam browser Web yang dibuat.
- <body> </body> : Merupakan kode yang berguna untuk meletakkan semua isi web yang dibuat. Kode ini diawali dengan tanda <BODY> dan diakhiri dengan </BODY>
Didalam
penulisannya HTML tidak membedakan antara penggunaan huruf besar dan
kecil ( case insensitive ). Anda dapat menulis kode <HTML> atau
<html> hasilnya akan sama saja. Berikut contoh program HTML yang
pertama.
Contoh1.html
<HTML>
<HEAD>
<TITLE>Judul Halaman Web Saya </TITLE>
</HEAD>
<BODY>
Bagian utama dari Isi suatu dokumen
</BODY>
</HTML>
3. Format Halaman dan Paragraf
Warna dan Background Pada Halaman
Pada
semua halaman web, Anda dapat mendeklarasikan warna latar belakang atau
background halaman. Pendeklarasian tersebut dapat dilakukan dengan
atribut yang disisipkan didalam tag <body>, sehingga atribut
tersebut akan mempengaruhi terhadap semua halaman web yang telah dibuat.
Selain
warna latar belakang, dapat juga kita menggunakan gambar sebagai
background ke halaman web. Background tersebut apabila dilihat dari
fungsinya hanya untuk memperindah dan menyerasikan halaman web dengan
isi yang ada didalamnya. Namun perlu diperhatikan apabila gambar yang
digunakan terlalu banyak akan mempengaruhi kecepatan akses web tersebut.
Beberapa atribut yang digunakan didalam tag BODY adalah :
Atribut
|
Value
|
Keterangan
|
Bgcolor
|
#000000-ffffff
|
Untuk menentukan warna background
|
Background
|
File gambar
|
Membuat background gambar
|
Text
|
#000000-ffffff
|
Warna pada text diseluruh halaman
|
Link
|
|
Warna link yang belum dikunjungi
|
Vlink
|
|
Warna link yang telah dikunjungi
|
Alink
|
|
Warna link yang aktif
|
Left margin
|
0 – n
|
Mengatur jarak margin kiri halaman
|
Topmargin
|
0 – n
|
Mengatur jarak margin atas halaman
|
Marginwidth
|
0 – n
|
Mengatur jarak lebar margin halaman
|
Marginheight
|
0 – n
|
Mengatur jarak tinggi margin halaman
|
Secara
default halaman web akan menciptakan halaman hasil berwarna putih.
Untuk mengubahnya anda dapat menggunakan atribut bgcolor=”value”, yang
disisipkan pada tag <BODY> seperti berikut.
<body bgcolor=”value”> … isi web … </body>
Warna
adalah sebuah kumpulan code ASCII yang berasal dari pencampuran
warna-warna dasar RGB (Red Green Blue). Anda dapat menggunakan warna
yang berupa kode ASCII didahului dengan tanda (#) atau dapat langsung
mengetikkan nama warnanya (red, green, white, atau blue).
Berikut adalah contoh halaman dengan deklarasi warna hijau sebagai warna backgroundnya.
Contoh2.html
<HTML>
<HEAD>
<TITLE> Contoh background hijau </TITLE>
</HEAD>
<BODY bgcolor=”green”>
Pewarnaan halaman degan warna hijau
</BODY>
</HTML>
Selain
memberikan warna pada background, Anda juga dapat menggunakan gambar
sebagai komponen warna latar belakang. Atribut yang digunakan untuk
memasukkan gambar sebagai background adalah background yang kemudian
diikuti dengan alamat file gambar yang dimaksud. Kode ini kemudian
diletakkan didalam <BODY> seperti berikut :
<body background=”alamat file”> … isi web … </body>
Berikut contoh program dengan gambar sebagai background dari halaman web.
Contoh3.html
<HTML>
<HEAD>
<TITLE> Contoh background bergambar </TITLE>
</HEAD>
<BODY background=”gambar/logo.gif”>
Backgroun bergambar Logo UKM
</BODY>
</HTML>
Menentukan Warna Text
Jika
dalam halaman secara standar akan menampilkan background berwarna
putih, maka halaman akan memberikan text default warna hitam. Untuk
dapat mengubahnya Anda cukup mendeklarasikannya dengan menggunakan
atribut text pada <BODY> seperti berikut
<body text=”warna” … isi web … </body>
Cobalah membuat halaman dengan warna text yang anda sukai dengan program berikut ini.
Contoh4.html
<HTML>
<HEAD>
<TITLE> Contoh text warna </TITLE>
</HEAD>
<BODY text=”green”>
Halaman web dengan text berwarna Hijao
</BODY>
</HTML>
Menentukan Warna pada Link
Link
merupakan sebuah symbol yang dijadikan sebagai acuan menuju ke halaman
tertentu pada suatu web. Dalam pemberian warna pada Link, HTML mengenal
tiga macam atribut dalam mendeklarasikannya, yaitu link, vlink, dan alink. Sintaks penulisannya adalah :
<body link=”warna” vlink=”warna” alink=”warna”>
Penempatan Area Kerja
Area
kerja adalah tempat dimana posisi kursor pertama ketika menuliskan
semua isi web, Anda dapat menentukan area kerja berada ditengah-tengah
halaman maupun dipinggir halaman pada radius 0,0 pixel. Anda dapat
menggunakan empat atribut perintah diantaranya adalah :
- leftmargin=”value” : Menentukkan batas paling kiri
- rightmargin=”value” : Menentukkan batas paling kanan
- marginwidth=”value” : Menentukkan batas lebarnya
- marginheight=”value” : Menentukan batas ketinggian
Sintaks penulisannya :
<body leftmargin=”value” topmargin=”value” marginwidth=”value” marginweight=”value”>
Contoh programnya dapat Anda lihat pada baris berikut :
Contoh5.html
<html>
<head>
<title>Penentuan area kerja</title>
</head>
<body leftmargin=”100″ topmargin=”100″ marginwidth=”30″ marginheight=”30″>
Area kerja halaman Web
</body>
</html>
Menformat Text
Membuat Huruf tebal, Miring, Underline
Huruf
dengan properties tebal atau Bold, dapat dibuat dengan menggunakan tag
<b> dan diakhiri dengan tag </b>. Sedangkan untuk membuat
huruf miring, HTMl menggunakan tag <i> dan diakhiri dengan tag
</i>. Huruf I berari italic, sedangkan untuk membuat huruf
bergaris bawah HTML menggunakan tag <u> dan diakhiri dengan tag
</u>. Untuk lebih jelasnya Anda dapat mencoba listing program
berikut.
Contoh6.html
<html>
<head>
<title>Format halaman text</title>
</head>
<body >
<B> Ini Huruf Tebal</B> <br>
<I>Ini Huruf Miring</I><br>
<U>Ini Huruf Bergaris Bawah</U><br>
<S>Ini Huruf Di Coret</S>
</body>
</html>
Membuat Text Model Kimia dan Perpangkatan
Text model kimia menggunakan unsure-unsur model kima seperti H2O, O2 dan sebagainya. Dan juga karakter angka sebagai perpangkatan seperti 52
(lima kuadrat) Dengan HTML Anda cukup menggunakan tag <SUB>
sebagai model kimia dan <SUP> untuk model perpangkatan. Sebagai
contoh, ketikkan listing program berikut ini.
Contoh7.html
<HTML>
<HEAD>
<TITLE> Format Text Kimia & matematika</TITLE>
</HEAD>
<BODY >
Manusia hidup membutuhkan Air / H<SUB>2</SUB>O <br>
4 (empat) adalah hasi dari perpangkatan 2<SUP>2</SUP>
</BODY>
</HTML>
Menentukan Ukuran Huruf dan Warna
HTML menyediakan sebuah tag <FONT ….> yang didalamnya kita dapat mendeklarasikan warna , ukuran dan bentuk huruf. Dengan
menggunakan metode ini maka efek yang dipakai hanyalah pada elemen yang
berada didalam kalang Tag tersebut. Jadi secara otomatis pengaturan
yang telah dilakukan pada bagian <BODY> akan diabaikan untuk text
yang dikenai tag FONT tersebut. Atribut yang digunakan didalam tag FONT :
Atribut
|
Value
|
Keterangan
|
Size
|
1 – 7
|
Menentukan besar huruf atau karakter
|
Color
|
#000000-ffffff
|
Menentukan warna teks dan karakter
|
Face
|
Font
|
Menentukan jenis font
|
Rumus tag HTML nya adalah :
<font size=”value” color=”warna” face=”jenis font”>
Jenis
font yang digunakan antara lain (arial, verdana, times new roman, sans
serif dan lain sebagainya). Untuk nilai value pada Size dimasukkan angka
1-7 dan kemudian jika ingin melanjutkan ke ukuran yang lebh besar dapat
ditambah dengan tanda (+), contohnya (+4). Berikut contoh program untuk
menentukan ukuran huruf dan warna.
Contoh8.html
<HTML>
<HEAD>
<TITLE> Format Bentuk Text dan warna </TITLE>
</HEAD>
<BODY >
<FONT size=”+5″ face=”Arial” color=”RED”>Bentuk Text arial berwarna merah</FONT>
</BODY>
</HTML>
Memberikan Jarak pada Baris Text
Untuk
menentukan jarak spasi pada text yang kita ketikkan dapat kita lakukan
dengan perintah <br> untuk spasi 1 kali, bila 2 spasi kita beri
tag <br> sebanyak dua kali. Didalam HTML telah disediakan sebuah
tag yang berguna untuk itu. Untuk lebih jelasnya lihat contoh script
berikut.
<pre> … text … </pre>
Atau
<pre width=”?”> … text … </pre>
Untuk lebih jelasnya Anda dapat mengetikkan listing program berikut :
Contoh9.html
<HTML>
<HEAD>
<TITLE> Format Spasi Text </TITLE>
</HEAD>
<BODY >
<PRE WIDTH=”4″>IT Mandiri</PRE>
<PRE WIDTH=”4″>Sentra Edukasi Telematikan Indonesia </PRE>
<PRE>IT Reka</PRE>
</BODY>
</HTML>
Ganti Baris dan Paragraf
Dengan
menggunakan HTML kita mengenal tag <br> untuk ganti baris dan tag
<p> untuk ganti paragraph. Pada tag <br> akan memberikan
efek ganti baris sebanyak satu baris sedangkan <p> akan memberikan
efek pindah dua baris selanjutnya.
Untuk lebih jelasnya Anda dapat mengetikkan listing program berikut :
Contoh10.html
<HTML>
<HEAD>
<TITLE> Format ganti baris </TITLE>
</HEAD>
<BODY >
Pengakuan
<p>
Saya adalah seorang mahasiswa Teknik Informatika (TI) angkatan XX di SETI Jakarta<br>
<br>
Sebebarnya saya merupakan pindahan dari jurusan Teknik Komputer (TK) angkatan XX SETI Jakarta</p>
</BODY>
</HTML>
Membuat Identasi Halaman
Identasi halaman
adalah teknik pemfromatan halaman dengan text menjorok kedalam. Untuk
dapat membuat Identasi halaman HTML memiliki tag <blockquote>.
Sintaks penulisannya adalah sebagai berikut :
<blockquote> … text … </blockquote>
Coba ketik dan jalankan script berikut.
Contoh11.html
<HTML>
<HEAD>
<TITLE> Format identasi </TITLE>
</HEAD>
<BODY >
<p>BLOCKQUOTE</p>
<p>
<blockquote>
Tag ini digunakan untuk meciptakan Text Indentasi ,<br>
Yang di maksut Text Identasi adalah Text yang <br>
perataanya menjorok kedalam .</blockquote></p>
</BODY>
</HTML>
Menggunakan Tag <Pre>
Tag
Pre digunakan untuk membuat teks keluaran text yang sama persis dengan
format yang diketikkan dalam tag HTML, sehingga bentuk text apapun yang
diletakkan pada halaman web HTML akan dibaca pada browser sama dengan
aslinya. Sintaksnya adalah :
<pre. … text … </pre>
Coba ketik contoh berikut dengan menggunakan tag <pre>
Contoh12.html
<HTML>
<HEAD>
<TITLE> Format pre </TITLE>
</HEAD>
<BODY >
<p>PRE</p>
<PRE>
Tag ini digunakan untuk meciptakan Text dengan format
Yang seuai dengan yang di ketikan dalam Tag HTML
.</PRE>
</BODY>
</HTML>
Jalankan
program diatas, akan menghasilkan keluaran berupa text yang sama persis
dengan text yang diketikkan didalam tag HTML. Text tersebut tidak akan
berubah bentuk apabila halaman diperkecil atau diperbesar.
Format Text Alamat
Didalam halaman web suatu ketika akan memerlukan pengaturan alamat dalam membuat suatu halaman yang menyertakan alamat. Dalam HTML 4 untuk dapat membuat alamat dapat digunakan tag <address>. Berikut sintaks penulisannya.
<address> … text … </address>
Berikut merupakan contoh listing programnya.
Contoh13.html
<HTML>
<HEAD>
<TITLE> Membuat Alamat </TITLE>
</HEAD>
<BODY >
<address>
<pre>IT mandiri,
SETI Jakarta,
Jl Warung Jati Barat Raya No 43,
Buncit Jakarta Selatan,
12760,
Indonesia.
</pre>
</address>
</BODY>
</HTML>
Membuat Heading / Judul
Heading
adalah metode untuk membuat judul dalam paragraph. Dalam penggunaanya
heading dapat dibagi menjadi 6 yaitu Heading 1, Heading 2, sampai dengan
Heading 6. Sintaks penulisannya adalah :
<hx> … text … </hx>
Cobalah membuat halaman heading seperti script dibawah ini.
Contoh14.html
<HTML>
<HEAD>
<TITLE> Membuat Heading </TITLE>
</HEAD>
<BODY >
<H1> Heading 1</H1>
<H2> Heading 2</H2>
<H3> Heading 3</H3>
<H4> Heading 4</H4>
<H5> Heading 5</H5>
<H6> Heading 6</H6>
</BODY>
</HTML>
Membuat Animasi Marquee
Marquee adalah sebuah bentuk animasi text yang diciptakan oleh HTML. Kita dapat mengciptakan gerakan-gerakan text maupun paragraph dalam web. Sintaks yang digunakan adalah :
<marquee atribut=” “> … text … </marquee>
Atribut dalam animasi marque.
Atribut
|
Value
|
Keterangan
|
Behavior
|
Alternate
|
Text bergerak ke kanan/kiri
|
Scroll
|
Text bergerak terus menerus
|
|
Slide
|
Text bergerak sekali
|
|
Direction
|
Left
|
Kiri
|
Right
|
Kanan
|
|
Top
|
Atas
|
|
Down
|
Bawah
|
|
Loop
|
N
|
Perulangan bernilai n
|
Bgcolor
|
Color
|
Untuk warna background
|
Contoh berikut adalah bentuk 3 buah animasi marquee dengan menggunakan arah/behavior yang berbeda.
Contoh15.html
<HTML>
<HEAD>
<TITLE>Membuat Animasi Marquee</TITLE>
</HEAD>
<BODY>
<MARQUEE behavior=”alternate” bgcolor=”#0099FF” >ANIMASI MARQUEE(ALTERNATE)</MARQUEE><br><br>
<MARQUEE behavior=”scroll” bgcolor=”#0099FF” direction=”left”>ANIMASI MARQUEE(SCROLL)</MARQUEE><br><br>
<MARQUEE behavior=”slide” bgcolor=”#0099FF” >ANIMASI MARQUEE(SLIDE)</MARQUEE><br><br>
</BODY>
</HTML>
Menciptakan Garis Horizontal
Sebagai
pembatas antara judul dengan isi, kita dapat menggunakan garis. Dalam
HTML desidakan Tag yang berfungsi membuat garis Horizontal yaitu tag
<hr>, kependekan dari Horizontal Row. Sintaks penulisannya :
<hr atribut=” “>
Atribut yang digunakan tag HR :
Atribut
|
Value
|
Keterangan
|
Size
|
N
|
Ukuran garis
|
Color
|
Color
|
Warna garis
|
Align
|
Left,right
|
Letak posisi garis
|
Width
|
Length
|
Lebar garis
|
Berikut adalah contoh penggunaan garis berwarna merah diletakkan di sebelah kanan halaman.
Contoh16.html
<HTML>
<HEAD>
<TITLE>Membuat Animasi Garis</TITLE>
</HEAD>
<BODY>
<H1 align=”right”>Kuis Siapa Dia</H1>
<HR align=”right” width=”60%” color=”#FF0000″ size=”3″>
<div align=”right”> Adalah kuis yang saya sukai</div>
</BODY>
</HTML>
4. Membuat Daftar
Daftar
atau list adalah merupakan kumpulan text yang disusun sedemikian rupa
sehingga item-item yang ada memiliki nomor urut atau bias berupa
tanda/symbol khusus.
Berikut adalah beberapa daftar Tag yang digunakan dalam pembuatan List/Daftar :
Tag
|
Atribut
|
Value
|
Keterangan
|
<UL>
|
Type
|
Square
Disc
|
Bulat kotak
Bulat titik
|
<OL>
|
Type
|
I
i
A
A
|
Huruf besar romawi
Huruf kecil romawi
Huruf besar
Huruf kecil
|
<OL>
|
Start
|
n
|
Nilai awal penomoran
|
Unordered List <UL>
Untuk
membuat daftar item dengan tanda bullet. List entries didefinisikan
dengan tag <LI>. Dan pada jenis ini tidak memerlukan pengurutan
data. Perhatikan sintaks program berikut :
<ul>
<li> daftar n </li>
<li> daftar n+1 </li>
</ul>
Sebagai contoh, coba ketik daftar jurusan yang ada di SETI Jakarta berikut ini.
Contoh17.html
<html>
<head>
<title>Membuat List</title>
</head>
<body>
Berikut ini adalah daftar jurusan yang ada di SETI Jakarta ?
<UL>
<LI>Teknik Informatika (TI/S1)</LI>
<LI>Sistem Informasi (SI/S1)</LI>
<LI>Teknik Komputer (TK/D3)</LI>
<LI>Manajemen Informatika (MI/D3)</LI>
<LI>Komputerisasi Akutansi(KA/D3)</LI>
</UL>
</body>
</html>
Selain
menggunakan sintaks diatas Anda juga dapat menggunakan beberapa sintaks
yang menghasilkan output yang sama. Sintaks itu adalah :
<menu>
<li> Daftar n </li>
<li> Daftar n+1 </li>
</menu>
atau dapat menggunakan :
<dir>
<li> Daftar n </li>
<li> Daftar n+1 </li>
</dir>
Menghilangkan Tanda pada Daftar
Apabila
Anda ingin menghilangkan semua kode daftar/list yang ada, maka tag yang
digunakan adalah <DL> sebagai pengganti tag <UL>, dan
<DD> sebagai pengganti tag <LI>. Cobalah membuat contoh
program seperti berikut :
Contoh18.html
<html>
<head>
<title>Membuat Nnone List</title>
</head>
<body>
Berikut ini adalah daftar jurusan yang ada di SETI Jakarta ?
<DL>
<DD>Teknik Informatika (TI/S1)</DD>
<DD>Sistem Informasi (SI/S1)</DD>
<DD>Teknik Komputer (TK/D3)</DD>
<DD>Manajemen Informatika (MI/D3)</DD>
<DD>Komputerisasi Akutansi(KA/D3)</DD>
</DL>
</body>
</html>
Teknik pembuatan daftar dengan DL dan DD dapat digantikan dengan menggunakan tag MENU seperti berikut.
<menu>
daftar 1 <br>
daftar 2 <br>
daftar ke-n <br>
</menu>
Contoh programnya adalah sebagai berikut.
Contoh19.html
<HTML>
<HEAD>
<TITLE>Membuat List</TITLE>
</HEAD>
<BODY>
Berikut ini adalah daftar jurusan yang ada di SETI Jakarta ?
<MENU>
Teknik Informatika (TI/S1)<BR>
Sistem Informasi (SI/S1)<BR>
Teknik Komputer (TK/D3)<BR>
Manajemen Informatika (MI/D3)<BR>
Komputerisasi Akutansi(KA/D3)<BR>
</MENU>
</BODY>
</HTML>
Daftar Menggunakan Nomor
Kita
dapat membuat daftar dengan menggunakan metode penomoran (1, 2, …n,
atau a, b, … n) atau dengan menggunakan huruf Romawi. Fungsi sintaks
yang digunakan adalah :
<ol type= A | a | I | I | 1 >
<li> Daftar 1 </li>
<li> Daftar 2 </li>
<li> Daftar ke-n </li>
</ol>
Berikut contoh script dengan metode penomoran.
Contoh20.html
<html>
<head>
<title>Membuat List</title>
</head>
<body>
Daftar Kelompok Study yang ada di SETI Jakarta :
<OL type=”A” >
<LI>Kelompok Study Linux (KSL)</LI>
<LI>Unix Network Club (UNC)</LI>
<LI>Linux Study Club (LSC)</LI>
</OL>
</body>
</html>
Pada
contoh diatas, jika dijalankan akan menghasilkan sebuah daftar dengan
menggunakan urutan abjad capital sebagai daftar listnya. Atau apabila
Anda menginginkan angka urutan tidak dimulai dengan alphabet A, tetapi
dari D, maka Anda harus menambahkan Atribut Start bernilai 4 pada tag
<OL>, karena dalam urutannya D termasuk abjad ke 4, sehingga
scriptnya berubah menjadi :
<html>
<head>
<title>Membuat List</title>
</head>
<body>
Daftar Kelompok Study yang ada di SETI Jakarta :
<OL type=”A” start=”4″>
<LI>Kelompok Study Linux (KSL)</LI>
<LI>Unix Network Club (UNC)</LI>
<LI>Linux Study Club (LSC)</LI>
</OL>
</body>
</html>
Mebuat Sub Daftar
Dengan
menggunakan Tag <UL> dan <OL>, HTML juga mengijinkan Anda
untuk membuat sebuah seub daftar. Maksud dari sub daftar adalah daftar
di dalam daftar. Untuk lebih jelasnya lihat sintaks yang digunakan dan
contoh scriptnya.
Contoh21.html
<HTML>
<HEAD>
<TITLE> Sub Daftar </TITLE>
</HEAD>
<BODY >
Jenis Prosesor yang Sering du gunakan :
<OL>
<LI>INTEL</LI>
<UL>
<LI>Pentium</LI>
<LI>Celeron</LI>
</UL>
<LI>AMD</LI>
<UL>
<LI>Atlon XP</LI>
<LI>Duron</LI>
<LI>Baltron</LI>
</UL>
</OL>
</BODY>
</HTML>
Membuat List Header
List
Header atau <LH> merupakan suatu cara dimana kita dapat
menampilkan bentuk Header didalam List, adapun cara penulisannya adalah :
<OL>
<LH> Header
<LI> Daftar 1 </LI>
<LI> Daftar 2 </LI>
</OL>
Berikut adalah Contoh Scriptnya penggunaanya :
Contoh22.html
<html>
<head>
<title>Membuat List</title>
</head>
<body>
Daftar Kelompok Study SETI Jakarta:
<OL type=”1″ >
<LH><b>Linux Riseach </b>
<LI>Kelompok Study Linux (KSL)</LI>
<LI>Unix Network Club (UNC)</LI>
<LI>Linux Study Club (LSC)</LI>
</OL>
</body>
</html>
Pada script diatas Kita menggunakan Header yang bernama “Linux Research”, yaitu :
<LH><b>Linux Research</B>
Daftar dengan Gambar
Untuk
membuat sebuah daftar dengan bentuk symbol yang dibat sendiri atau
berupa gambar. Kita dapat menggunakan metode yang dilakukan saat membuat
daftar tanpa symbol, yaitu menggunakan TD dan DD. Dan setelah
meletakkan komponen daftar kita dapat melakukan pemanggilan gambar yang
berupa symbol. Sebagai contoh lihatlah script berikut :
Contoh23.html
<html>
<head>
<title>Membuat List</title>
</head>
<body>
Daftar makanan jenis gorengan:
<DL>
<DD> <IMG src=”../gambar/bundar.gif”>Bakwan
<DD> <IMG src=”../gambar/bundar.gif”>Tahu Susor /Tahu Isi</DD>
<DD> <IMG src=”../gambar/bundar.gif”>Pisang Goreng</DD>
<DD> <IMG src=”../gambar/bundar.gif”>Tempe Goreng</DD>
<DD> <IMG src=”../gambar/bundar.gif”>Combro</DD>
</DL>
</body>
</html>
5. Menggunakan Tabel dan Pengaturannya
Pembuatan Tabel
Untuk
dapat membuat tabel Anda dapat menggunakan Tag HTML yang dimulai dengan
tag <TABLE>, yang kemudian diikuti dengan <TR> dan
<TD>
· <TABLE>
: adalah tag yang menerapkan kepada browser bahwa itu adalah sebuah
tabel. Tag TABLE dapat diikuti dengan beberapa atribut seperti lebar
maupun warna background.
· <TR> : adalah TABLE ROW merupakan Tag yang digunakan untuk membuat baris dalam tabel.
· <TD> :
Tabel Data adalah tag yang berguna untuk meletakkan data yang kita
isikan dalam tabel. TD dapat juga diartikan sebagai kolom, jadi kita
dapat membuat beberapa kolom didalam sebuah baris tabel.
Sintaks dalam mebuat tabel :
<TABLE atribut=”value”>
<TR><TD atribut=”value”> …. Isi … </TD>
….
<TR>
<TABLE>
<TABLE>
Didalam
tag <TABLE> Anda dapat meletakkan beberapa atribut yang berguna
dalam pengaturan tabel, atribut itu antara lain adalah :
· BORDER : Atribut ini digunakan untuk menentukan tebal garis pada tabel dengan ukuran angka dimulai dari 1-n
Cobalah ketikkan script tabel pertama Anda :
Contoh24.html
<HTML>
<HEAD>
<TITLE>Belajar Tabel</TITLE>
</HEAD>
<BODY>
<TABLE border=1>
<TR>
<TD>Ini Table pertama</TD>
<BODY>
</TR>
</TABLE>
</BODY>
</HTML>
Script
diatas jika Anda jalankan akan menghasilkan tabel dengan baris
berjumlah satu (1) dan kolom = 1. Secara standar bila kita tidak
menentukkan letak tabel, maka tabel akan berada disebelah kiri.
5.1.1 Tabel dengan Beberapa Kolom
Untuk
dapat membuat tabel dengan dua kolom, berarti Anda harus menambahkan
<TD> diantara <TR>, jadi jumlah <TD> akan mempengaruhi
jumlah kolom dan tabel. Sekarang cobalah membuat tabel dengan jumlah baris 1, dan kolom = 3.
Contoh25.html
<HTML>
<HEAD>
<TITLE>Belajar Tabel</TITLE>
</HEAD>
<BODY>
<TABLE border=1>
<TR>
<TD>Colom 1</TD>
<TD>Colom 2</TD>
<TD>Colom 3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
5.1.2 Tabel dengan Banyak Baris
Berikut
adalah contoh pembuatan tabel dengan menggunakan kolom = 3 dan baris =
2. Untuk dapat membuat tabel tersebut Anda harus menambahkan <TR>
</TR> setelah <TR></TR> yang pertama, yang berarti
Anda menambahkan satu baris didalam tabel Anda. Setelah itu Anda juga
harus mendefiniskan jumlah kolom yang disesuaikan pada baris diatasnya.
Sebagai contoh buatlah dokumen HTML dibawah ini.
Contoh26.html
<HTML>
<HEAD>
<TITLE>Belajar Tabel</TITLE>
</HEAD>
<BODY>
<TABLE border=1>
<TR>
<TD>Colom 1</TD>
<TD>Colom 2</TD>
<TD>Colom 3</TD>
</TR>
<TR>
<TD>cel</TD>
<TD>cel</TD>
<TD>cel</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Pengaturan Tabel
Dengan
menggunakan beberapa atribut, Anda dapat melakukan pengaturan bentuk
tabel maupun posisi dari tabel dan data. Beberapa atribut yang dapat
digunakan dalam pengaturan tabel adalah :
Atribut pada tag <TABLE> … </TABLE>
Pada
tag <TABLE> memiliki beberapa atribut yaitu align
(Perataan/Posisi), border (Lebar garis), Width (lebar tabel),
cellpadding, cellspasing serta bgcolor (warna latar belakang). Atribut
yang digunakan dalam <TABLE>
Atribut
|
Keterangan
|
Align
|
Digunakan untuk meratakan tabel ke kiri, ke tengah, ke kanan, atau kanan-kiri. Align dapat bernilai left, center, right, atau justify.
|
Border
|
Border digunakan untuk mengatur ketebalan garis pembatas antar sel-sel dalam tabel
|
Width
|
Digunakan untuk menentukan lebar tabel, Anda dapat menentukan lebar tabel dengan nilai persen (%)
|
Cellspacing
|
Cellspacing digunakan untuk menyatakan jarak spasi antar sel satu dengan lainnya serta antar sel dengan batas tabel
|
Cellpadding
|
Atribut ini menyatakan jarak spasi antara isi sel dengan batas sel (border)
|
Bgcolor
|
Menunjukkan warna background untuk semua cell pada tabel
|
Bordercolor
|
Digunakan untuk membuat warna pada garis / border
|
Atribut pada Tag <TR> … </TR>
Beberapa atribut yang digunakan pada pembuatan garis dengan menggunakan <TR>
Atribut yang digunakan dalam <TR>
Atribut
|
Keterangan
|
Align
|
Dapat bernilai left, center, right, atau justify. Digunakan untuk melakukan perataan tabel ke kiri (left), ke tengah (center), ke kanan (right)
|
Valign
|
Digunakan
untuk melakukan perataan yang bersifat horizontal (alignment). Valign
menggunakan nilai top (atas), center (tengah), bottom (bawah) atau
baseline (standar)
|
Bgcolor
|
Menunjukkan warna background pada baris
|
Lebar dan Tinggi Tabel
Tabel
yang dibuat dapat kita buat dengan lebar dan tinggi sesuai dengan
kebutuhan. Untuk dapat melakukan pengaturan lebar dan tinggi, kita dapat
menggunakan atribut Width dan Height yang disisipkan di dalam tag
<TABLE…>. Berikut adalah keterangan penggunaan Width dan Height.
<table width=”value” height=”value”> … isi … <table>
Keterangan atribut dari sintaks di atas :
· Width
: atribut ini digunakan untuk menentukan lebar tabel. Ukuran yang
digunakan adalah dengan menggunakan persen (%) yaitu dimulai dengan dari
1% sampai dengan 100%. Selain persen, Anda juga dapat memakai ukuran
Pixel atau (px) yang nilainya disesuaikan dengan resolusi monitor yang
Anda gunakan.
· Height : atribut ini digunakan untuk menentukan tinggi cell tabel. Ukuran yang digunakan sama seperti pada Width.
Cobalah untuk membuat Script dengan menggunakan lebar tabel = 40% dan tinggi = 100%.
Contoh27.html
<HTML>
<HEAD>
<TITLE>Belajar Tabel</TITLE>
</HEAD>
<BODY>
<TABLE border=”1″ height=”100%” width=”40%”>
<TR>
<TD>lebar=20% dan tinggi=”30″</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Posisi Tabel
Dalam
pembuatan tabel, secara standar tabel akan terletak di sebelah kiri
halaman. Untuk mengatur letak posisi tabel, Anda dapat menggunakan
atribut Align yang diletakkan di dalam tag <TABLE>. Untuk nilai
yang dipakaidalam peletakkan posisi tabel adalah Center (tengah), Left
(kiri), dan Right (kanan).
<table align=”left | center | right”> … isi … </table>
Cobalah untuk membuat dokumen HTML untuk membuat sebuah tabel yang posisinya berada ditengah halaman atau center.
Contoh28.html
<HTML>
<HEAD>
<TITLE>Belajar Tabel</TITLE>
</HEAD>
<BODY>
<TABLE border=”1″ align=”center”>
<TR>
<TD>Tabel berada di tengah halaman </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Border / Tebal Garis
Border
diartika sebagai garis, dengan menggunakan border Anda dapat membuat
tabel menjadi lebih menarik. Seperti contoh-contoh sebelumnya Anda telah
menggunakan border yang disisipkan di dalam Tag.
<table border=”value”>
<table border=”value”>
Cobalah contoh script berikut :
Contoh29.html
<HTML>
<HEAD>
<TITLE>Belajar Tabel</TITLE>
</HEAD>
<BODY>
<TABLE border=”10″ >
<TR>
<TD>CENTRANET</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Pengaturan Jarak Spasi pada Cell
Di
dalam sebuah kalimat, spasi kosong atau yang dapat disebut dengan white
space diartikan sebagai jarak antara karakter dengan karakter. Akan
tetapi di dalam tabel Anda juga mengenal dengan jarak karakter. Akan
tetapi tabel hanya dapat melakukan pengaturan jarak spasi antara
karakter dan garis pinggir tabel dan pengaturan antar jarak garis tabel.
Untuk
dapat memberikan jarak antara karakter dengan garis/border, tabel
dikenal dengan atribut cellspacing dan cellpadding. Jadi, didalam tabel
memiliki pengertian yang agak berbeda. Untuk latihan, cobalah membuat
halaman baru berdasarkan script berikut :
Contoh30.html
<HTML>
<HEAD>
<TITLE>Belajar Tabel</TITLE>
</HEAD>
<BODY>
<TABLE border=”1″ cellpadding=”15″ cellspacing=”15″ >
<TR>
<TD>CENTRANET Bekerja sama sengan ANDI OFFSET</TD>
<TD>CENTRANET Merupakan Web Developer</TD>
</TR>
<TR>
<TD>ANDI OFFSET Merupakan Penerbit buku di Jogjakarta</TD>
<TD>CENTRANET</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Letak Karakter
Pada
saat membuat sebuah tabel dengan ukuran yang besar, maka Anda tidak
harus mendapatkan posisi karakter yang berada dibagian pojok kiri cell.
Anda dapat melakukan pengaturan sesuai dengan yang dikehendaki. Berikut
adalah aturan dalam peletakkan posisi yang atributnya disisipkan pada
Tag.
<td align=”left | center | right “valign=”top | middle | bottom | baseline”> Caracter </td>
Contoh
buatlah halaman baru untuk membuat sebuah tabel dengan jumlah baris =
1, kolom = 1 dan aturlah panjang dan lebarnya sebagai berikut :
Contoh31.html
<HTML>
<HEAD>
<TITLE>Belajar Tabel</TITLE>
</HEAD>
<BODY>
<TABLE border=”1″ WIDTH=”80%” HEIGHT=”80%”>
<TR>
<TD ALIGN=”RIGHT” VALIGN=”BOTTOM”>CENTRANET</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Memberi Warna pada Tabel
Di
dalam tabel dapat dibedakan komponen-komponen pewarnaan, yaitu
pewarnaan pada border dan warna pada cell. Anda juga dapat memberi warna
yang sama pada setiap cell pada tabel atau memberi warna yang berbeda
pada setiap cell. Berikut cara dalam pemberian warna.
<table bordercolor=”warna”>
<tr>
<td bgcolor=”warna”>cell pertama</td>
<td bgcolor=”warna”>cell kedua</td>
</tr>
</table>
Untuk mencoba efek bgcolor dan bordercolor cobalah untuk membuat script berikut :
Contoh32.html
<HTML>
<HEAD>
<TITLE>Belajar Tabel</TITLE>
</HEAD>
<BODY>
<TABLE border=”1″ BORDERCOLOR=”RED”>
<TR>
<TD BGCOLOR=”YELLOW”>CENTRANET Bekerja sama sengan ANDI OFFSET</TD>
<TD BGCOLOR=”GREEN”>CENTRANET Merupakan Web Developer</TD>
</TR>
<TR>
<TD BGCOLOR=”#00CCFF”>ANDI OFFSET Merupakan Penerbit buku di Jogjakarta</TD>
<TD BGCOLOR=”#CCCCFF”>CENTRANET</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Merger Cell
Merger
artinya menggabungkan, pada tabel merger cell berarti menggabungkan
antar cell atau dapat diartikan dengan menggabungkan antara baris dengan
baris ataupun baris dengan kolom.
Dengan menggunakan isitilah merger Anda dapat membuat sebuah tabel yang dinamik sesuai dengan kebutuhan Anda. Untuk dapat melakukan penggabungan antara baris, ataupun kolom Anda menggunakan atribut rowspan dan colspan. Adapun guna dari atribut tersebut adalah :
· Rowspan
: digunakan untuk menggabungkan antara baris. Jika Anda hendak
menggabungkan 3 baris maka Rowspan Anda beri nilai 3, dan begitu juga
kelipatannya.
· Colspan
: digunakan untuk menggabungkan kolom dengan kolom. Atribut ini
memiliki nilai seperti rowspan yang bernilai 4 jika hendak menggabungkan
4 kolom.
5.3.1 Menggabungkan Beberapa Kolom
Anda
dapat menggabungkan beberapa kolom pada tabel Anda menjadi satu kolom.
Untuk dapat menggabungkan kolom tersebut Anda harus menggunakan Colspan
yang kemudian diberikan nilai berapa kolom yang hendak Anda gabungkan,
berikut adalah teknik penggabungannya.
<table>
<tr>
<td colspan=”value”> Merger </td>
</tr>
<tr>
<td>Cell 1</td>
<td>cell 2</td>
</tr>
Sebagai
latihan cobalah buat tabel dengan baris = 2, kolom = 3, kemudian
gabungkan ketiga kolom diatas menjadi kolom, lihatlah teknik
pembuatannya.
Contoh33.html
<HTML>
<HEAD>
<TITLE>Belajar Tabel</TITLE>
</HEAD>
<BODY>
<TABLE border=”1″>
<TR>
<TD COLSPAN=”2″>Colom yang di gabungkan</TD>
</TR>
<TR>
<TD >Colom 1, Baris 2</TD>
<TD >Colom 2, Baris 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Pada script diatas atribut yang digunakan adalah Colspan = 2 yang berarti menggabungkan dua kolom menjadi satu kolom.
5.3.2 Menggabungkan Beberapa Baris dan Kolom
Untuk
menggabungkan baris memerlukan atribut Rowspan yang disisipkan pada tag
<TD>. Atribut ini sebenarnya memiliki kegunaan yang hampir sama
dengan colspan.
Contoh34.html
<HTML>
<HEAD>
<TITLE>Belajar Tabel</TITLE>
</HEAD>
<BODY>
<TABLE border=”1″>
<TR>
<TD ROWSPAN=”2″>Baris yang di gabungkan</TD>
<TD>Colom 2 , Baris 1</TD>
</TR>
<TR>
<TD >Colom 2, Baris 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
5.3.3 Menggabungkan Baris dan Kolom
Anda
dapat menggabungkan beberapa kolom dan baris setalah memahami konsep
Colspan dan Rowspan. Cobalah Script dibawah ini untuk menggabungkan dua
kolom dan dua baris.
Contoh35.html
<HTML>
<HEAD>
<TITLE>Belajar Tabel</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”1″>
<TR>
<TD ROWSPAN=2>Daftar</TD>
<TD COLSPAN=2>Nama Teman</TD>
</TR>
<TR>
<TD>Arief NS</TD>
<TD>Didik K</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Tabel di Dalam Tabel
Di
dalam perancangan web, tabel sangat penting perannya, tabel kemudian
akan dijadikan kerangka untuk meletakkan beberapa komponen web. Dalam
sebuah halaman web, Anda diijinkan untuk meletakkan beberapa tabel atau
banyakorang sering menyebutnya dengan istilah tabel di dalam tabel.
Cobalah buat sebuah tabel yang didalamnya kita sisipkan sebuah tabel
dengan baris berjumlah dua.
Contoh36.html
<HTML>
<HEAD>
<TITLE>Belajar Tabel</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”1″ WIDTH=”60%” HEIGHT=”60%” >
<TR>
<TD ALIGN=”CENTER”>
<TABLE BORDER=”2″>
<TR>
<TD>Ini tabel di dalam tabel </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Dengan
beberapa contoh diatas, berarti Anda telah selesai dalam mempelajari
pembuatan tabel dan teknik dalam mendesain sebuah halaman website.
6. Menggunakan Formulir
Mengenal Formulir
Form
adalah sebuah metode yang digunakan dalam Website yang mengijinkan
seseorang untuk dapat berinteraksi dengan Server ataupun dengan
pengelola website tersebut. Di dalam dunia website, web yang mengijinkan
interaksi dengan pengunjung sering disebut dengan Web Dinamis atau
portal. Sedangkan untuk web yang hanya menampilkan informasi kepada
pengunjung dan tidak mengijinkan pengunjung untuk melakukan sesuatu
apapun di dalam website tersebut disebut website statis.
Untuk
dapat menciptakan halaman web yang dapat berinteraksi dengan pengunjung
salah satunya Anda dapat menggunakan Formulir, yang kemudian formulir
tersebut akan dikirim dengan menggunakan program aplikasi Web berbasis
Server Side menuju database server. Adapun Server Side yang dimaksud
adalah PHP, Cold Fusion, ASP, JSP, Perl, dan lain-lain.
Dalam
website, Form biasanya digunakan sebagai media yang digunakan untuk
pengunjung dalam mengirimkan permintaan ataupun mengirimkan pesan
seperti Buku Tamu, Shout Box, Email, Pencarian (search), Pendaftaran
Online dan lain-lain.
Secara
standar, untuk dapat membuat form, Anda hanya menggunakan Start tag
<FORM> dan diakhiri dengan End tag </form>. Perhatikan sintaksnya sebagai berikut :
<form action=“ “ method=” “ name=” “>
<input>
<input>
…….
</form>
Keterangan tag :
· <form> : Digunakan mendeklarasikan awalan tag sebuah form
· <input> : Digunakan untuk memasukkan komponen-komponen formulir
· </form>: Tag penutup / end tag dari sebuah form
· Action :
Digunakan untuk menentukkan alamat dimana data dari komponen form akan
dikirimkan. Pengiriman ini pada umumnya dialamatkan pada sebuah halaman
yang berisi kode program aplikasi seperti PHP, ASP, dan lain sebagainya.
Contohnya sebagai berikut :
<form action=”simpan_data.php” method=”get | post”>
<input>
….
</form>
method : Digunakan untuk membedakan metode pengiriman data. Atribut yang digunakan dalam pengiriman data antara lain :
Atribut
|
Keterangan
|
Get
|
Pengiriman data ke dalam halaman lain yang tidak berhubungan dengan halaman selanjutnya
|
Post
|
Melakukan
pengiriman datapada halaman lain yang selanjutnya dapat diproses menuju
halaman berikutnya ataupun melakukan pengiriman ke dalam database
|
Name : Digunakan untuk memberi nama variabel pada Formulir yang kita buat
Berikut adalah gambaran umum dalam membuat sebuah halaman form pada web kita.
<form action=”simpan_data.php” method=”_self” name=”buku_tamu” >
<input>
…
<input>
</form>
Komponen Masukan pada Form
Dalam
HTML kita mengenal beberapa bentuk masukan Form yaitu Input, Textarea,
Select. Sedangkan dalam Komponen Input Anda dapat membedakan beberapa
bentuk masukan seperti Password, Button, Select, dan lain-lain.
Dalam
penulisannya, HTML menyesuaikan beberapa atribut yang ada di dalam tag
Input. Hal ini berguna untuk mendeklarasikan jenis masukan yang
dijadikan sebagai aturan dasar sebuah Form.
Berikut adalah beberapa aturan yang digunakan dalam pembuatan Form dari komponen-komponennya.
· Untuk
setiap komponen diharuskan memiliki Nama atau sering juga disebut
sebagai Variabel. Semua data yang disimpan dalam variabel akan dibaca
oleh bahasa pemrograman pada saat melakukan posting Form (tombol submit
diklik). Penamaan variabel/nama ini harus berbeda dengan komponen form
yang lain.
<input name=”alamat”>
· Setiap
komponen memiliki nilai/isi, dalam hal ini digunakan Value sebagai
atributnya. Value digunakan untuk melakukan pembacaan data yang
dimasukkan oleh pengunjung yang selanjutnya akan dibaca sebagai Variabel
pada atirbut Name.
<input name=”alamat” value=”jl.warung buncit, jakarta”>
· Untuk
Input, Anda mengenal beberapa jenis bentuk masukan seperti Tombol,
Text, maupun masukan yang berbentuk Password. Dalam penggunaannya Anda
dapat menggunakan Atribut Type untuk dapat membedakan bentuk masukannya.
<input type=”jenis_masukan” name=”variebel” value=”value”>
· Selain
komponen Input HTML juga memiliki beberapa tipe Komponen yang berdiri
sendiri, akan tetapi memiliki fungsi yang sama dengan komponen Input. Komponen itu adalah Textarea, Select, dengan tag seperti berikut.
<textarea name=”variabel”>
<select name=”variabel”>
6.2.1 Masukan Berupa Text (Text Field)
Text
adalah masukan yang berbentuk karakter. Untuk dapat memasukkan data
dalam bentuk karakter, HTML memiliki komponen masukan yang bertipe Text.
Text dikhususkan untuk menerima masukan yang sifatnya sedikit, dalam
hal ini Anda hanya diijinkan untuk memasukkan data hanya satu kalimat
saja, seperti Pernyataan Nama, Alamat, maupun Email. Bentuk penulisannya
adalah seperti berikut.
<input type=”text” name=”variabel”>
Dengan
menggunakan metode tersebut, Anda telah memiliki suatu bentuk masukan
yang berbentuk Text, yang kemudian dibaca dengan nama Variabel Alamat.
Selanjutnya data yang dimasukkan akan dibaca dengan nama alamat. Dalam
masukan bertipe Text, Anda dapat memberi batasan dalam masukan data
dengan menggunakan ukuran maksimal text yang dimasukkan.
<input type=”text” name=”alamat” size=”panjang_text” maxlength=”panjang_max_text”>
Summary :
· Size : Digunakan untuk menentukan panjang komponen text didalam browser
· Maxlength :
Digunakan untuk melakukan pembatasan data yang dimasukkan kedalam media
masukan. Untuk nilainya Anda dapat menggunakan angka yang terhitung
sebagai karakter.
Contoh37.html
<HTML>
<HEAD>
<TITLE>Belajar Form</TITLE>
</HEAD>
<BODY>
<FORM ACTION=”” NEME=”” >
<TABLE width=”280″ border=”0″>
<TR>
<TD width=”86″>Nama</TD>
<TD width=”184″><input name=”nama” type=”text” id=”nama” size=”25″ maxlength=”20″>
</TD>
</TR>
<TR>
<TD>Alamat</TD>
<TD><input name=”alamat” type=”text” id=”alamat” size=”30″ maxlength=”50″>
</TD>
</TR>
<TR>
<TD>E_mail</TD>
<TD><input name=”email” type=”text” id=”email” size=”25″ maxlength=”20″>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
6.2.2 Masukan Berupa Password
Password
adalah bentuk kata yang dirahasiakan. Anda tidak akan dapat dan boleh
mengetahuinya jika tidak memiliki hak dalam penggunaannya. Dalam
internet, Anda biasa menjumpai penggunaan password untuk layanan
situsnya. Penggunaan password sering siebut dengan istilah account user.
Untuk dapat menggunakan komponen password, Anda dapat menuliskan
tag-nya seperti berikut :
<input type=”password” name=”variabel”>
Untuk
latihan, buat Form berisi dua buah masukan berupa text dan password.
Form ini digunakan untuk validasi user Email pengguna.
Contoh38.html
<HTML>
<HEAD>
<TITLE>Belajar Form</TITLE>
</HEAD>
<BODY>
<FORM ACTION=”” NEME=”” >
<TABLE width=”280″ border=”0″>
<TR>
<TD width=”86″>Login</TD>
<TD width=”184″><input name=”login” type=”text” id=”login” size=”30″ maxlength=”30″>
</TD>
</TR>
<TR>
<TD>Password</TD>
<TD><input name=”kunci” type=”password” id=”kunci” size=”30″ maxlength=”30″>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Dalam
penggunaan password, setiap karakter yang dimasukkan didalamnya akan
dienskripsi sehingga pada halaman Address Web hanya akan terlihat
kode-kode seperti bintang. Hal tersebut berguna untuk pengamanan
password.
6.2.3 Masukan Berupa Pilihan Tunggal (Radio Button)
Pada
saat melakukan browsing, mungkin Anda sering menjumpai
pertanyaan-pertanyaan yang meminta Anda untuk memilih salah satu jawaban
yang disediakan. Sebagai contoh dalam aplikasi polling atau jajak
pendapat. Anda dapat menggunakan komponen radio button untuk membuat
aplikasi tersebut.
<input type=”radio” name=”variabel” value=”value”>
Apabila
Anda membuat beberapa pilihan yang mengijinkan pengguna hanya dapat
memilih satu pemilihan saja, maka Anda harus memberi variabel sama pada
semua pilihan yang telah dibuat seperti contoh berikut.
Contoh39.html
<HTML>
<HEAD>
<TITLE>Belajar Form</TITLE>
</HEAD>
<BODY>
<FORM ACTION=”” NEME=”” >
<p>Sistem Operasi manakah yang anda gunakan di rumah ?</p>
<p>
<input type=”radio” name=”so” value=”Wondows 9X”>
Windows 9X<br>
<input type=”radio” name=”so” value=”Windows NT Server”>
Windows NT Server<br>
<input type=”radio” name=”so” value=”Mac OS”>
Mac OS<br>
<input type=”radio” name=”so” value=”UNIX / LINUX”>
UNIX / LINUX<br>
</p>
</FORM>
</BODY>
</HTML>
6.2.4 Masukan Berupa Pilihan Ganda (Checkbox)
Pilihan
ganda berarti dalam pilihannya mengijinkan Anda untuk menentukan
pilihan lebih dari satu. Hal ini berarti Anda dapat memilih satu atau
bahkan memilih semua dari beberapa pilihan. Untuk dapat melakukannya,
Anda dapat menggunakan komponen input bertype Checkbox. Sintaks
penulisannya :
<input type=”checkbox” name=”variabel”>
Untuk latihan cobalah membuat sebuah pilihan yang menyatakan beberapa mata kuliah yang telah Anda ambil dalam semester ini.
Contoh40.html
<HTML>
<HEAD>
<TITLE>Belajar Form</TITLE>
</HEAD>
<BODY>
<FORM ACTION=”” NEME=”” >
<p>Mata kuliah mana yang telah anda ambil ?<br>
<input name=”cek1″ type=”checkbox” id=”cek1″ value=”Kalkulus I”>
Kalkulis I<br>
<input name=”cek2″ type=”checkbox” id=”cek2″ value=”Kalkulus II”>
Kalkulis II<br>
<input name=”cek3″ type=”checkbox” id=”cek3″ value=”Matematika Diskrit”>
Matematika Diskrit<br>
<input name=”cek4″ type=”checkbox” id=”cek4″ value=”Fisika Dasar”>
Fisika Dasar<br>
<input name=”cek5″ type=”checkbox” id=”cek5″ value=”Metode Penelitian”>
Metode Penelitian<br>
</p>
</FORM>
</BODY>
</HTML>
6.2.5 Masukan Berupa Pulldown (List Menu)
Pulldown list adalah metode masukan data yang datanya telah dimasukkan sebelumnya oleh pembuatnya. Dengan
menggunakan Pull Down list, Anda hanya diijinkan melakukan pilihan
berjumlah satu pilihan saja. Dalam membuat Pulldown, Anda menggunakan
tag Select sebagai atribut pengganti Input dan Option sebagai daftar
data yang dimasukkan. Sintaks penulisannya adalah sebagai berikut :
<select name=” “>
<option value=”value”> … karakter isi 1
……
<option value=”value”> … karakter isi ke-n
</select>
Cobalah untuk membuat sebuah menu Pulldown yang menampilkan 4 jenis golongan darah yang ada.
Contoh41.html
<HTML>
<HEAD>
<TITLE>Belajar Form</TITLE>
</HEAD>
<BODY>
<FORM ACTION=”” NEME=””>
<p>Anda memiliki golongan darah jenis apa
<select name=”goldar” id=”goldar”>
<option value=”A”>A</option>
<option value=”B”>B</option>
<option value=”AB”>AB</option>
<option value=”O”>O</option>
</select>
<br>
</p>
</FORM>
</BODY>
</HTML>
6.2.6 Masukan Berupa Komentar (Textarea)
Didalam
sebuah web, Anda membutuhkan metode pemasukan data yang memungkinkan
Anda memasukkan data yang banyak. Disini kita mengenal media yang
disebut Textarea yang dalam penulisannya memiliki aturan seperti
berikut.
<textarea name=”varabel” rows=”value” cols=”value”> </textarea>
Cobalah untuk membuat sebuah form bukutamu.
Contoh42.html
<HTML>
<HEAD>
<TITLE>Belajar Form</TITLE>
</HEAD>
<BODY>
<FORM ACTION=”” NEME=”” >
<TABLE width=”280″ border=”0″>
<TR>
<TD width=”86″>Nama</TD>
<TD width=”184″><input name=”nama” type=”text” id=”nama2″ size=”25″ maxlength=”20″>
</TD>
</TR>
<TR>
<TD>Alamat</TD>
<TD><input name=”alamat” type=”text” id=”alamat2″ size=”25″ maxlength=”50″>
</TD>
</TR>
<TR>
<TD>Pesan</TD>
<TD><textarea name=”email” cols=”30″ rows=”4″ id=”email”></textarea>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
6.2.7 Masukan Berupa Pengambilan Data Komputer Lokal
Untuk
pengambilan data yang berkenaan dengan data yang ada pada komputer yang
sedang kita pakai, atau lokal biasanya digunakan aplikasi Upload File.
Hal ini akan Anda jumpai pada saat berada pada aplikasi Site Manager
yang mengijinkan Anda untuk melakukan Upload Data.
Untuk
dapat membuat komponen Upload, kita menggunakan Sintaks Input bertipe
File yang artinya pada saat kita mengklik komponen tersebut, maka akan
dibawa pada halaman penjelajahan pada komputer kita.
<input type=”file” name=”variabel”>
Cobalah untuk membuat sebuah halaman yang terdapat tiga buah media input bertipe File, seperti berikut.
Contoh43.html
<HTML>
<HEAD>
<TITLE>Belajar Form</TITLE>
</HEAD>
<BODY>
<FORM ACTION=”” enctype=”multipart/form-data” NEME=”” >
<TABLE width=”387″ border=”0″>
<TR>
<TD width=”113″>Data 1</TD>
<TD width=”380″><input name=”data1″ type=”file” size=”25″> </TD>
</TR>
<TR>
<TD>Data 2</TD>
<TD><input name=”data2″ type=”file” size=”25″> </TD>
</TR>
<TR>
<TD>Data 3</TD>
<TD><input name=”data3″ type=”file” size=”25″> </TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
6.2.8 Membuat Tombol (Button)
Langkah
terakhir yang harus Anda ketahui adalah Tombol atau biasanya Anda
menyebutnya dengan nama Button. Tombol yang digunakan untuk melakukan
perintah ekesekusi dari semua komponen yang telah Anda buat sebelumnya. Jadi
dalam teknik pembuatan formulir tombol merupakan langkah terakhir yang
harus dibuat. Dalam pemakaiannya Anda dapat membedakan 3 buah tombol
yaitu Submit, Reset, dan None.
Tipe Button
|
Fungsi
|
Submit
|
Tombol
ini digunakan untuk mengeksekusi seluruh komponen form menuju halaman
yang telah dialamatkan pada atribut Action yang ada didalam badan Form.
|
Reset
|
Berguna untuk mengosongkan semua data yang telah diisikan ke dalam komponen sebelumnya.
|
Button
|
Tombol
ini dapat Anda gunakan sebagai tombol yang memiliki alamat sesuai
dengan yang diinginkan. Untuk dapat membuat alamat ini Anda memerlukan
bantuan Javascript dalam pengalamatannya. (onclick=”parent.location=’alamat.htm’”;)
|
Dalam penulisannya komponen button memiliki sintaks penulisan seperti berikut :
<input type=”submit | reset | button” name=”variabel” value=”value”>
Dari penggunaan sintaks diatas Anda dapat mengetahui bahwa atribut yang ada adalah :
Atribut
|
Keterangan
|
Type
|
Untuk menentukan type tombol, yaitu Submit, Reset, dan Button
|
Name
|
Digunakan untuk mendeklarasikan tombol sebagai variabel
|
Value
|
Digunakan untuk memberi label pada tombol, sehingga akan tampak pada halaman browser
|
Cobalah
untuk membuat sebuah halaman pendaftaran yang menanyakan mengenai nama,
alamat, jenis kelamin, dan kemudian gunakan dari ketiga buah tipe
tombol diatas.
Contoh44.html
<HTML>
<HEAD>
<TITLE>Belajar Form</TITLE>
</HEAD>
<BODY>
<FORM ACTION=”eksekusi.php” NEME=”form_coba” >
<TABLE width=”280″ border=”0″>
<TR>
<TD width=”86″>Nama</TD>
<TD width=”184″><input name=”nama” type=”text” id=”nama3″ size=”25″ maxlength=”20″>
</TD>
</TR>
<TR>
<TD>Alamat</TD>
<TD><input name=”alamat” type=”text” id=”alamat3″ size=”30″ maxlength=”50″>
</TD>
</TR>
<TR>
<TD>Kelamin</TD>
<TD><select name=”sex” id=”sex”>
<option>Kelamin</option>
<option value=”Pria”>Pria</option>
<option value=”Wanita”>Wanita</option>
</select> </TD>
</TR>
<TR>
<TD> </TD>
<TD><input type=”submit” name=”Submit” value=”Kirim”>
<input type=”reset” name=”Submit2″ value=”Bersih”>
<input type=”button” name=”Submit3″ value=”Kembali” onClick=”parent.location=’utama.htm'”></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Pada halaman diatas jika Anda mengklik tombol kirim, maka akan menuju ke halaman eksekusi.php.
Hal ini dapat terjadi apabila Anda telah mendeklarasikannya terlebih
dahulu pada saat menuliskan Form pertama kali. Sedangkan tombol Bersih
akan mengakibatkan data yang dimasukkan akan terhapus atau mengosongkan
halaman form. Dan tombol Kembali akan membawa Anda pada halaman utama.htm.
7. Menggunakan Gambar dan Hyperlink
7.1 Memasukkan Gambar
Gambar
adalah komponen web yang sangat penting. Dengan adanya gambar, halaman
web yang kita buat akan terlihat familiar dan lebih menarik. Gambar juga
adalah salah satu komponen web yang dapat mempengaruhi keindahan desain
serta dapat mempercantik halaman Web. Ada beberapa program pengolah
gambar yang dapat Anda gunakan seperti Photoshop, Firework dan lain
sebagainya.
7.1.1 Format Gambar
Formta
gambar adalah sebuah bentuk metode dalam menyimpan gambar. Maksudnya
bentuk dari gambar tersebut merupakan format gambar terakhir yang
didapatkan dari pengolahan data gambar dengan program aplikasi pengolah
gambar. Dalam pembuatan web, format gambar yang sering digunakan adalah
Gif, JPEG, JPG, atau BMP. Berikut adalah penjelasan lengkap dari beberapa format tersebut.
· JEPG
: Adalah kependekan dari Joint Photographic Expert Group, merupakan
format gambar yang mampu menyimpan data gambar dengan ukuran 24 bit per
pixel. Sehingga memiliki kemampuan untuk menampilkan 16 warna
· GIF :
merupakan kependekan dari Graphics Interchange Format, format gambar
ini mampu menyimpan gambar dengan kekuatan 8 bit per pixel.
· Selain gambar tersebut juga terdapat format JPG dan BMP
7.1.2 Pemanggilan Gambar
Untuk
dapat menggunakan gambar dalam halaman web, sintaks yang digunakan
untuk memanggil gambar ke dalam halaman web dapat dilakukan dengan
perintah berikut.
<img src=”file” width=”value” height=”value” alt=”text”>
Pada sintaks diatas terdapat beberapa atribut penting sebagai berikut :
Atribut
|
Keterangan
|
Src
|
Digunakan
untuk melakukan pemanggilan gambar. Dalam sintaks tersebut Anda harus
mengetikkan nama file gambar yang digunakan untuk ditampilkan di halaman
web.
|
Width
|
Digunakan
untuk melakukan pengaturan lebar gambar. Nilai yang digunakan dihitung
dengan hitungan persen (%), atau dengan menggunakan hitungan px (pixel)
|
Height
|
Digunakan
untuk melakukan pengaturan tinggi gambar. Atribut ini mirip dengan
atribut width yaitu menggunakan nilai persen (%) untuk perhitungan
tingginya
|
Alt
|
Sedangkan alt berguna untuk memberikan pesan pada saat mouse melewati area gambar
|
Sebagai latihan, cobalah membuat sebuah program yang digunakan untuk menampilkan beberapa gambar didalamnya seperti contoh berikut.
Contoh45.html
<HTML>
<HEAD>
<TITLE>Belajar ambil gambar</TITLE>
</HEAD>
<BODY>
<IMG SRC=”../gambar/linux.jpg” height=”80%” width=”20%” alt=”Ini gambar Linux” >
</BODY>
</HTML>
File contoh diatas akan melakukan pemanggilan gambar dengan nama linux.jpg
dengan panjang 80% dan lebar 20%. Cobalah untuk menggerakkan mouse Anda
diatas gambar linux diatas sehingga pada saat mouse melewati area
gambar akan tampak pesan yang bertuliskan “ini gambar Linux” yang telah
dideklarasikan dengan menggunakan atribut alt.
7.1.3 Pengaturan dan Letak Gambar
Dengan
menggunakan sintaks IMG standar diatas, Anda dapat menyisipkan beberapa
atribut yang berguna untuk melakukan pengaturan gambar seperti memberi
border pada gambar dan peletakan posisi gambar pada halaman. Berikut
merupakan atribut tambahan yang digunakan dalam pengaturan gambar.
Atribut
|
Value
|
Keterangan
|
Border
|
g-n
|
Untuk membuat border yang mengelilingi gambar
|
Align
|
Right
Left
Center
|
Melakukan pengaturan tata letak gambar dengan nilai left, center, dan right
|
Dengan
menggunakan penambahan atribut seperti yang ada pada tabel di atas,
sintaks pemanggilan gambar akan berubah menjadi seperti berikut.
<img src=”file” width=”value” height=”value” alt=”text” border=”value” align=”left | center | right”>
Cobalah untuk memodifikasi contoh script ambil_gambar.htm dengan menambahkan border sebesar 5 dan letakkan gambar pada posisi rata kanan seperti script berikut.
Contoh46.html
<HTML>
<HEAD>
<TITLE>Belajar format gambar</TITLE>
</HEAD>
<BODY>
<IMG SRC=”../gambar/linux.jpg” height=”80%” width=”20%” alt=”Ini gambar Linux” border=”5″ align=”right”>
</BODY>
</HTML>
Lihat dan simpulkan apa yang terjadi dengan tampilan gambar pada browser.
7.1.4 Meletakkan Gambar Di Dalam Tabel
Dengan
menggunakan tabel Anda dapat melakukan pengaturan gambar sehingga web
akan ditampilkan dengan format yang lebih baik. Biasanya tabel digunakan
sebagai kerangka web, yang pada setiap cell (pertemuan kolom dan baris)
akan diletakkan beberapa komponen web yang berkaitan dengan objek yang
ditampilkan. Beberapa komponen web yang sangat mendukung keindahan
sebuah website adalah sebuah gambar. Sebagai contoh, cobalah script
berikut dengan mengetikkannya pada editor Anda.
Contoh47.html
<HTML>
<HEAD>
<TITLE>Ambil gambar</TITLE>
</HEAD>
<BODY>
<TABLE border=”1″>
<TR>
<TD> <img src=”../gambar/rose.gif” width=”121″ height=”87″>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
7.1.5 Membuat Bingkai dengan Border Tabel
Dengan
menggunakan tabel dan border yang diperbesar, Anda dapat menciptakan
gambar yang tampak seperti dikelilingi bingkai. Untuk lebih jelasnya,
cobalah contoh script berikut ini.
Contoh48.html
<HTML>
<HEAD>
<TITLE>gambar bingkai</TITLE>
</HEAD>
<BODY>
<TABLE border=0>
<TR>
<TH>Bunga Wawar</TH>
</TR>
<TR>
<TD>
<TABLE border=20 bgcolor=”#99CCFF”>
<TR>
<TD><IMG alt=rose height=”84″
src=”../gambar/rose.gif”
width=”126″></TD>
</TR>
</TABLE></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Pada
contoh script diatas Anda menggunakan dua buah tabel . Tabel pertama
digunakan untuk membuat judul yang bagian-bagiannya terdapat dua buah
baris dan satu kolom, kemudian didalam tabel pertama, baris satu dibuat
sebuah tabel dengan tebal border = 20, serta latar belakangnya dipasang
dengan warna hijau. Pada tabel kedua digunakan untuk meletakkan gambar
sehingga gambar seakan-akan ditampilkan seperti dikelilingi bingkai.
7.2 Membuat Hyperlink
Hyperlink
atau link adalah sebuah metode menghubungkan antara halaman yang satu
dengan halaman lain. Dengan menggunakan link, Anda dapat membuat sebuah
halaman web utama yang didalamnya berisi hubungan dengan halaman-halaman
web page atau berisi web-web lain yang ada di internet.
7.2.1 Membuat Link ke Halaman Lain
Secara
harafiah, link dapat berarti semua bentuk tulisan ataupun gambar yang
pada saat diklik akan membawa kita menuju ke halaman web tertentu. Untuk
dapat membuat link, Anda menggunakan sintaks dasar seperti berikut.
<a href=”alamat_file.html” target=”_self | _parent | blank”>Pemicu Link/ Tombol</a>
Dari
sintaks diatas, Anda menggunakan href sebagai tag untuk menentukan file
yang akan dibuka, dan pemicu / tombol yang digunakan untuk objek yang
dijadikan sebagai pemicu link. Beberapa atribut target untuk menentukkan
metode pemanggilan halaman link, adapun bentuk target yang digunakan
adalah :
Atribut
|
Keterangan
|
_self
|
Dengan menggunakan jenis target ini akan membuka halaman link pada halaman sendiri. Jadi halaman pertama akan berganti dengan halaman yang dituju oleh link tersebut
|
_blank
|
Atribut
ini akan menyebabkan membuka halaman yang dimaksud di dalam link
halaman baru. Jadi nantinya Anda akan memliki dua buah halaman browser
yaitu halaman yang pertama (halaman yang memiliki tombol hyperlink) dan
halaman yang dituju oleh link tersebut.
|
_parent
|
Digunakan seperti _self
|
_top
|
Link akan mengacu pada halaman atas pada halaman web yang dituju
|
Kita juga dapat membuat link yang pengalamatannya menuju ke halaman web lain, maka kita menggunakan sintaks seperti berikut.
<a href=”http://www.alamatwebsite.com” target=”_self | _parent | blank|>Pemicu / Tombol </a>
Cobalah membuat halaman berisi pemicu yang menghubungkan halaman web yahoo.com dengan alamat url www.yahoo.com.
Contoh49.html
<HTML>
<HEAD>
<TITLE>Belajar link</TITLE>
</HEAD>
<BODY>
<a href=”http://www.yahoo.com” target=”_self”>Menuju Web YAHOO </a>
</BODY>
</HTML>
7.2.2 Membuat Link dengan Pemicu Tombol Gambar
Tombol merupakan sebuah objek yang dapat dijadikan sebagai Pemicu Link. Pada
umumnya tombol dibuat dengan menggunakan gambar maupun dengan format
animasi gambar. Berikut contoh script program dengan menggunakan gambar
sebagai media hyperlink.
Contoh50.html
<HTML>
<HEAD>
<TITLE>Tombol Hyperlink</TITLE>
</HEAD>
<BODY>
<a href=”home.htm”>
<img src=”../gambar/home.gif” width=”110″ height=”20″ border=”0″>
</a>
<br>
<a href=”kesenian.htm”>
<img src=”../gambar/kesenian.gif” width=”110″ height=”20″ border=”0″>
</a>
</BODY>
</HTML>
7.2.3 Membuat Link untuk Email
Anda
juga dapat membuat hyperlink yang berkaitan dengan alamat email.
Hyperlink ini nantinya akan membawa Anda menuju ke sebuah halaman
penyedia layanan email berbasis POP3 yang ada pada komputer lokal kita,
program tersebut adalah MS Outlook Express.
Untuk membuat email link Anda menggunakan sintaks seperti berikut.
<a href=mailto:email@alamat.com”>Hubungi Kami<a/>
Berikut adalah contoh pembuatan hyperlink Email menuju ke alamat email SETI yaitu seti@itmandiri.com.
Contoh51.html
<HTML>
<HEAD>
<TITLE>Belajar link</TITLE>
</HEAD>
<BODY>
<a href=”mailto:seti@itmandiri.com”>Hubungi Kami </a>
</BODY>
</HTML>
7.2.4 Membuat Link Satu Halaman dengan Bookmark
Bookmark
adalah salah satu metode lompatan halaman dari halaman yang satu menuju
halaman yang lain, atau dari halaman A menuju halaman A itu sendiri
dengan memfokuskan pada bagian halaman tertentu. Dengan menggunakan
bookmark, Anda dapat membuat sebuah daftar List Halaman yang ada di
dalam halaman. Untuk dapat membuat hyperlink model ini, Anda memerlukan
dua buah pemicu diantaranya adalah sebagai berikut.
1) Anda harus menentukan alamat link bookmark yang ditandai dengan simbol (#) seperti berikut.
<a href=”#nama_bookmark”>.. Pemicu/Tombol ..</a>
2) Selanjutnya
Anda harus membuat alamat dimana link tersebut akan difokuskan. Anda
juga dapat meletakkan pada halaman paling bawah ataupun disesuaikan
dengan kegunaannya.
<a name=”nama_bookmark”> … </a>
Cobalah
untuk membuat sebuah halaman web dengan sebuah tombol pemicu yang
membawa Anda pada halaman bagian bawah halaman tersebut.
Contoh52.html
<HTML>
<HEAD>
<TITLE>Belajar link</TITLE>
</HEAD>
<BODY>
<a href=”#halaman_bawah”>Menuju Halaman Bawah</a> <br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<a name=”halaman_bawah”>Halaman Bawah</a>
</BODY>
</HTML>
7.6.5 Membuat Hyperlink Menuju Bookmark Lain Halaman
Untuk
keperluan-keperluan tertentu biasanya Anda akan membutuhkan suatu
teknik untuk dapat menghubungkan sebuah judul dari halaman web yang
berasal dari web lain di internet. Masalah seperti ini dapat diciptakan
dengan menggunakan eksternal bookmark. Untuk membuat eksternal bookmark
Anda perlu meletakkan alamat lengkap halaman yang dituju termasuk URL
yang digunakan. Sebagai latihan, buatlah contoh program yang akan
membuka halaman contoh52.html
Contoh53.html
<HTML>
<HEAD>
<TITLE>Belajar link</TITLE>
</HEAD>
<BODY>
<a href=”membuat_bookmark.htm#halaman_bawah”>Menuju Halaman membuat bookmark bawah</a> <br>
</BODY>
</HTML>
Tidak ada komentar:
Posting Komentar