Program dan Pemrograman
Program adalah
kata, ekspresi, pernyataan atau kombinasi yang disusun dan dirangkai
menjadi satu kesatuan prosedur yang berupa urutan langkah untuk
menyelesaikan masalah dan diimplementasikan dengan menggunakan bahasa
pemrograman sehingga dapat dieksekusi oleh komputer.
Pemrograman yaitu
rangkaian instruksi – instruksi dalam bahasa komputer yang disusun
secara logis dan sistematis. Proses pemrograman komputer bertujuan untuk
memecahkan suatu masalah dan membuat mudah pekerjaan dari user(pengguna komputer).
2.2. Pengertian Website
Website
dapat diartikan sebagai kumpulan halaman-halaman yang digunakan untuk
mempublikasikan informasi berupa teks, gambar dan program multimedia
lainnya berupa animasi (gambar gerak, tulisan gerak), suara, dan atau
gabungan dari semuanya itu baik yang bersifat statis maupun dinamis yang
membentuk satu rangkaian bangunan yang saling terkait antara satu page
dengan page yang lain yang sering disebut sebagai hyperlink.
2.2.1. Perkembangan Websit
Perkembangan
teknologi informasi yang kian pesat memacu munculnya situs baru yang
dapat diakses melalui jaringan internet. Data dari survey yang
dilakkukan oleh Netcraft
(http://news.netcraft.com/archives/web_server_survey.html) menunjukkan
bahwa sampai pada bulan Maret 2008 ini jumlah website telah mencapai
angka 162.662.052 situs dengan 4,5 juta situs baru pada bulan ini. Hal
ini memungkinkan jumlah situs baru pada tahun 2008 ini mencapai 60 juta
situs atau meningkat 20% dari perkembangan tahun 2007 yang mencapai 50
juta situs baru. Perkembangan jumlah situs ini tidaklah mengherankan
karena semakin banyaknya orang yang melakukan blogging baik melalui
Google, blogspot.com, ataupun MySpace.Namun demikian, situs yang
benarbenar aktif pada bulan Maret 2008 hanyalah 65,6 juta atau 40,33%
dari jumlah total situs. Dengan perkembangan jumlah situs yang luar
biasa besar ini menuntut para pemrogram web (web programmer) untuk selalu berkreasi menciptakan ideide baru baik dalam desain layout, penggunaan aplikasi server web, maupunoperating system yang
dipakai, agar situs yang dibangunnya tidak kandas dalam persaingan.
Perkembangan ini juga membuka peluang kerja yang sangat signifikan dalam
bidang web programming tidak hanya bagi lulusan IT namun juga bagi
mereka yang mau bekerja keras untuk selalu ‘mengoprek’.
2.2.2. Kriteria Web dan Aspek Keamanan Web
Website yang baik
harus memenuhi kriteria dalam aspek fungsionalitas, desain, konten,
orisinalitas, profesionalisme dan keefektivan. Sesuai dengan kriteria
dalam penghargaan website terbaik tingkat dunia (World Best Website Awards),
aspek fungsionalitas yang dinilai meliputi: keteraksesan, kecepatan dan
bandwidth, kualitas HTML, navigasi dan link, dan legalitas. Sedangkan
dalam aspek desain, sub aspek yang dinilai adalah desain grafis, user friendliness,beauty, layout,
dan integritas. Dari segi konten, termasuk aspek yang dinilai adalah
tujuan, interaktivitas manusia, proses informasi, ekspresi verbal,
ketersediaan konten secara detail. Dalam aspek orisinalitas, sub aspek
yang dinilai adalah inovasi, kreativitas, teknologi, dan visi. Untuk
aspek profesionalisme dan keefektivan meliputi customer service dan
respon client, nilai, focus, komponen tambahan, dan keefektifan situs
secara keseluruhan. Kriteriakriteria tersebut dinilai untuk penilaian
level 1. Untuk penilaian level berikutnya asek yang paling penting
adalah sekuritas server dan rangking search engine. Dengan demikian aspek-aspek tersebut di atas dapat dijadikan acuan dalam pembangunan sebuah website yang baik, sehingga peran programer web dalam hal ini sangat penting.
2.2.3. Cara Kerja Website
Pada saat kita
mengetikkan sesuatu alamat pada browser maka data akan dilewatkan oleh
suatu protokol HTTP melewati port 80 pada server. Alamat ini adalah URL
dari suatu situs yang mempunyai alamat yang unik di internet. Web
Browser akan mengirimkan suatu aturan yang telah disepakati sebelumnya,
aturan ini biasa disebut protokol, standar protokol menggunkan TCP / IP,
proses ini dimulai dengan melakukan 3 way handshake antara sumber dan
tujuan.
Web browser, suatu
aplikasi client yang akan menampilkan halaman web sites dari internet.
Web browser di install disisi user ( OS ) menampilkan informasi ke
komputer dengan interpreting bahasa pengkodean HTML, dimana homepage
berisi gambar, suara, multimedia, dan resources lainnya yang dapat
diakses. File coding pada HTML memberikan datanya ke browser apa yang
akan ditampilkan ke sisi client. Isi HTML yang akan ditampilkan bukan
dari browsernya tetapi dari web servernya dan browser akan menginterpret
tag HTML untuk link ke halaman berikutnya.
2.3. HTML
HTML (Hyper Text
Markup Language) adalah suatu bahasa yang digunakan untuk menulis
halaman web. HTML dirancang untuk digunakan tanpa tergantung pada suatu
Platform tertentu (Platform independent). Dokumn HTML adalah suatu teks
biasa, dan disebut sebagai Markup Language karena mengandung tanda-tanda
(tag) tertentu yang digunakan untuk menentukan tampilan suatu teks dan
tingkat kepentingan dari teks tersebut dalam suatu dokumen. Pada dokumen
HTML yang termasuk system hypertext, kita tidak harus membaca dokumen
tersebut secara urut dari atas kebawah atau sebaliknya, tetapi kita
dapat menuju pada topic tertentu secara langsung dengan menggunakan teks
penghubung yang akan membawa anda kesuatu topik atau dokumen lain
secara langsung.
HTML (Hyper Text
Markup Language) adalah bahasa yang digunakan untuk menulis halaman web,
ciri utama dokumen HTML adalah adanya tag dan elemen, Elemen dalam
dokumen HTML dikatagorikan menjadi dua yaitu elemen <HEAD> yang
berfungsi memberikan informasi tentang dokumen tersebut dan elemen
<BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan di
dalam browser. Sedangkan tag dinyatakan dengan tanda lebih kecil ”<”
(tag awal) dan lebih besar ”>” (tag akhir). Dalam penggunaannya
sebagian kode HTML tersebut harus terletak diantara tag kontainer, yaitu
diawali dengan <nametag> dan diakhiri dengan </nametag>
(tersapat tanda ”/”). Untuk membuat dokumen diperlukan program
penyutingan teks (Noteped, Eordpad, Ms Word,dll), dan suatu program
browser (Notscape, Internet Explorer).
Dokumen HTML
terbagi 3 tag utama yang membentuk struktur dokumen HTML, HEAD dan BODY.
HTML berfungsi untuk menyatakan suatu dokumen HTML, tag HEAD berfungsi
untuk memberikan informasi tentang dokumen HTML dan tag BODY berfungsi
untuk menyimpan informasi data yang akan ditampilakan dalam dokumen
HTML.
2.3.1. Struktur HTML
<html> sebagai tanda awal dokumen HTML
<head>
****** Bagian HEAD ******,
Sebagai informasi page header untuk tag informasi: title, base, isindex, link, script, style & meta.
************************
</head>
<body>
****** Bagian Body ******
Berisi page atribut seperti backgroun, warna teks, warna link, warna visited link, warna active link dan lain-lain.
</body>
</html>
2.3.2. HTML Tag
| Tag | Keterangan |
| <a>…</a> | Menyisipkan hyperlink |
| <b>…</big> | Membesarkan teks |
| <blink>…</blink> | Teks berkedip |
| <blockquote>…</bloqkquote> | Menandai sebagai kutipan |
| <body>…</body> | Pasangan tag untuk bagian badan dokumen |
| <be>…</br> | Menyisipkan pemenggal baris |
| <center>…</center> | Mentengahkan teks |
| <cite>…</cite> | Memformat teks |
| <em>…</em> | Menampilkan teks dengan penekanan |
| <font>…</font> | Menentukan atribut font |
| <head>…</head> | Pasangan tag untuk bagian kepala |
| <html>…</html> | Pasangan untuk seluruh dokumen |
| <i>…</i> | Teks miring |
| <small>…</small> | Teks kecil |
| <strike>…</strike> | Membuat garis mendatar |
| <strong>…</strong> | Menampilkan teks dengan penekanan yang kuat |
| <sub>…</sub> | Teks subscript |
| <sup>…</sup> | Text supscript |
| <tiitle>…</title> | Judul dokumen |
| <h1>…</h1> | Headine |
| <hr>…</hr> | Garis horisontal |
| <p>…</p> | Paragraf |
| <form>…<form> | Form input |
| <input> | Menyisipkan Field input |
| <option>…</option> | Mendefinisikan item untuk object SELECT |
| <select>…<?select> | Menu pop up |
| <textarea>…</textarea> | Menyisipkan field input |
| <img>…</img> | Menyisipkan gambar |
| <dd>…</dd> | Menyisipkan keterangan deskripsi dalam daftar definisi |
| <d1>…</d1> | Menyisipkan definisi dari dokumen |
| <dt>…</dt> | Judul definisi |
| <li>…</li> | Item daftar |
| <ol>…</ol> | Daftar terurut |
| <ul>…</ul> | Daftar tidak terurut |
| <caption>…</caption> | Judul untuk tabel |
| <table>…</table> | Memuat tabel |
| <td>…</td> | Menyisipkan data sel tabel |
| <th>…</th> | Menyisipkan sel judul tabel |
| <tr>…</tr> | Mendefinisikan baris tabel |
2.3.3. Kelebihan Hyper Text Markup Language (HTML)
HTML merupakan
pengembangan dari standar pemformatan dokumen teks yaitu Standard
Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII
atau teks biasa, yang dirancang untuk tidak tergantung pada suatu
sistem operasi tertentu. Adapun kelebihan-kelebihan HTML antara lain:
1. Merupakan bahasa
penkodean yang lintas platform (cross platform), maksudnya HTML dapat
digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai
macam sistem operasi yang berbeda. Jadi bersifat fleksibel karena
ditulis cukup dengan menggunakan editor karakter ASCII.
2. Dapat disisipi
gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan
gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk
pada suatu halaman web, dimana setiap titik-titik yang sudah
didefinisikan berupa rectangular (kotak), poligon (kurva tak beraturan)
atau lingkaran digunakan untuk ‘jump’ ke halaman lain, atau link ke
halaman di luar web yang bersangkutan.
3. Dapat disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia Flash atau Macromedia Shockwave.
4. Dapat disisipi
bahasa pemrograman untuk mempercantik halaman web seperti Javascript,
VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.
5. Bukan merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara menjalanakannya cukup dengan menggunakan browser.
2.3.4. Proses implementasi HTML pada Website
Berikut contoh proses implementasi program data HTML pada website:
1. Heading
Heading adalah
sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen
HTML. Heading berbeda dengan tag <TITLE> yang tidak bisa muncul
dalam halaman web. HTML menyediakan enam tingkatan heading. Heading
level 1 biasanya untuk judul utama.
Contoh:
<HTML>
<HEAD>
<TITLE>Headings</TITLE>
</HEAD>
<BODY>
<H1>Heading Level 1</H1>
<H2>Heading Level 2</H2>
<H3>Heading Level 3</H3>
<H4>Heading Level 4</H4>
<H5> Heading Level 5</H5>
<H6>Heading Level 6</H6>
</BODY>
</HTML>
2. Paragraf
Untuk membuat
paragraf digunakan tag <P>. Setelah tag <P> Anda bisa
menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup
</P>. Anda bisa mengatur posisi paragraf dengan attribut ALIGN.
Atribut ALIGN diikuti dengan posisi yang diinginkan. LEFT untuk rata
kiri, CENTER untuk rata tengah dan RIGHT untuk rata kanan.
Contoh:
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN=”right”>
Beberapa tahun yang lalu, seorang hartawan meninggal dunia sedangkan ia tidak memiliki ahli waris.
<P ALIGN=”center”>
Kepada
pengacaranya, ia meninggalkan dua buah surat yang disegel.Yang sebuah
berisi permintaan agar jenazahnya dikuburkan pada jam empat dini hari.
<P
ALIGN=”left”> Surat yang kedua belum diketahui isinya karena
disampulnya tertulis pesan agar dibuka seusai pemakaman jenazah
</P>
</BODY>
</HTML>
3. Blockquote
Perintah tag
<BLOCKQUOTE> digunakan untuk menulis kutipan teks. Dengan perintah
ini browser akan menampilkan teks menjorok ke dalam (meng identasi
teks) atau menampilkan teks dalam bentuk huruf miring.
Contoh:
<HTML>
<HEAD>
<TITLE>BLOCKQUOTE</TITLE>
</HEAD>
<BODY>
<H3>Sesuatu yang tidak perlu dicoba</H3>
<BLOCKQUOTE>
Sesuatu yang
kelihatan mengasyikkan tapi sebenarnya lebih banyak menambah masalah
pada remaja adalah narkoba, seks, alkohol dan merokok. Jangan sekali
kali mencoba jika tidak ingin membuat masalah baru
</BLOCKQUOTE>
</BODY>
</HTML>
4. Preformatted Text
Preformatted Text
(PRE) digunakan untuk menampilkan teks sama seperti yang diketikkan
dalam dokumen HTML. Browser akan menampikan teks tersebut dalam font
monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh
aplikasi berbasis teks (misalnya telnet).
Contoh:
<HTML>
<HEAD>
<TITLE>Preformatted Text</TITLE>
</HEAD>
<BODY>
<PRE>
Edisi yang lalu
dibahas tentang membuat billing system untuk warnet yang dapat langsung
mencetak tagihan. Kali ini diulas bagaimana menyimpan setiap transaksi
dalam database agar bisa diperoleh beberapa laporan secara periodik.
</PRE>
</BODY>
</HTML>
5. Begin Row (BR)
Tag ini digunakan
untuk menulis teks pada baris berikutnya. Tag <BR> membuat baris
baru tanpa memberi baris kosong di bawahnya.
Contoh:
<HTML>
<HEAD>
<TITLE>Begin Row</TITLE>
</HEAD>
<BODY>
<P>Banyak
cara yang dapat digunakan untuk melakukan instalasi FreeBSD. Namun ada
tiga cara yang paling sering dilakukan ,yaitu:
<BR>Instalasi melalui FTP
<BR>Instalasi melalui CDROM
<BR>Instalasi melalui partisi DOS
</BODY>
</HTML>
6. Ukuran Font
Untuk mengatur
huruf dokumen HTML digunakan tag <FONT SIZE>. Tag <FONT
SIZE> memiliki beberapa atribut untuk mengatur ukuran huruf yang akan
digunakan.
Contoh:
<HTML>
<HEAD>
<TITLE>Ukuran font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>Ukuran font 1</FONT>
<FONT SIZE=2>Ukuran font 2</FONT>
<FONT SIZE=3>Ukuran font 3</FONT>
<FONT SIZE=4>Ukuran font 4</FONT>
<FONT SIZE=5>Ukuran font 5</FONT>
<FONT SIZE=6>Ukuran font 6</FONT>
<FONT SIZE=7>Ukuran font 7</FONT>
</BODY>
</HTML>
7. Jenis Font
Atribut FACE
digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus
diisi dengan string jenis font seperti Arial, Times New Roman,Verdana,
dan sebagainya.
Contoh:
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT FACE = “Arial”>Arial, contoh AC Milan <P>
<FONT FACE = “Verdana”>Verdana , contoh Persebaya <P>
<FONT FACE = “Times New Roman”>Times New Roman, contoh Indonesia
<P>
</BODY>
</HTML>
8. Warna Font
Atribut COLOR
digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi
nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan
nama warna seperti Red, Blue, Yellow, White, dan sebagainya. Sedangkan
cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari
suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF
untuk Blue.
Contoh:
<HTML>
<HEAD>
<TITLE>Warna Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT COLOR = “red”>PSM Makassar<P>
<FONT COLOR = “#FF0000″>tetap PSM Makassar kan?<P>
<FONT COLOR = “#00FF00″>Ini baru Persebaya<P>
</BODY>
</HTML>
9. Link
Perintah anchor
<A> digunakan untuk membuat suatu link. Untuk membuat link ke
dokumen HTML lain digunakan perintah <A HREF = “nama_dokumen”>Teks
pada browser</A>. Anda juga bisa membuat link dalam sebuah
dokumen HTML. Untuk itu perlu dipersiapkan nama anchor lokasi tujuan
dari link tersebut. Nama anchor dibuat dengan menambahkan atribut NAME
pada tag <A>. Misalnya <A NAME = “Bugs”</ A>. Cara
melakukan link ke bagian tersebut adalah <A HREF =
“#nama_anchor”>teks pada browser</A>.
2.4. Langkah-langkah Membuat Website Sederhana
Berikut ini adalah langkah-langkah untuk membuat website sederhana
1. Membuka Program Noteped
Klik Start > All Program > Accessories > Notepad untuk membuka program Notepad.
2. Tampilan Program Notepad
Tampilan program
Notepad seperti gambar di bawah ini. Di Notepad ini nanti kita akan
mengetik tag HTML untuk membuat sebuah halaman web.
3. Membuat Bagian Kepala dan Badan Website
Sebuah halaman web
terdiri dari dua bagian, yaitu bagian kepala dan badan. Bagian kepala
memberi nama website kita, sedangkan bagian badan berisi halaman inti
sebuah web. Bagian kepala dan bagian badan ini nantinya akan membentuk
sebuah kesatuan halaman website yang akan kita buat. Tuliskan tag tag
berikut dalam Notepad untuk membuat bagian kepala dan badan web.
<html>
<head>
<title>
Website Saya
</title>
</head>
<body>
Selamat datang di website saya
</body>
</html>
<html>, <head>, <title>, <body>, </html>, </head>, </title>, </body>
adalah beberapa
contoh tag yang dipakai untuk membangun sebuah halaman website. Pada
contoh di atas terlihat bahwa setiap tag mempunyai pasangan yang
ditambahi dengan tanda slash (/). Perlu diingat bahwa tidak semua tag
mempunyai pasangan seperti contoh di atas, dan tag-tag yang tidak
mempunyai pasangan akan kita bahas di nomer selanjutnya. Kalimat atau
kata yang kita tuliskan di antara tag <title> </title>
merupakan judul atau deskripsi dari website kita. Sedangkan kalimat di
antara <body> </body> merupakan isi dari website kita. Kalau
sudah anda ketik klik File > Save / Save As , dan simpan dengan nama
file index.html. File ini akan mempunyai icon Internet Explorer atau
icon web browser lain yang anda gunakan dalam komputeranda. Klik icon
ini untuk melihat tampilan halaman web yang telah anda buat.
Terlihat bahwa di
bagian atas halam website terdapat kata kata yang anda tuliskan di
antara tag <title> </title>, sedangkan dalam badan website
terdapat tulisan yang anda tuliskan di antara tag <body>
</body>.
4. Menambah Warna Background website
Warna background
website anda dapat anda ubah dengan menambahkan vkata “bgcolor = warna”
setelah tag body. Misalnya anda ingin memberi warna hitam website anda
maka anda tinggal tambahkan kode berikut :
<body bgcolor = black>
Bila sudah anda
tambahkan ke ketikan anda dalam Notepad kemudian disave, dan selanjutnya
tekan tombol refresh dalam web browser anda. Tampilan website anda akan
berubah menjadi seperti di bawah ini. Bila anda ingin mengubahnya
menjadi warna lainnya anda tinggal ubah warna yang diketik setelah
bgcolor, misalnya : red, green, blue, atau warna lainnya.
5. Menjadikan Gambar Sebagi Background Website
Anda bisa juga
menjadikan sebuah gambar sebagai background website anda dengan
menambahkan kode : “background = file gambar” setelah tag body. Misalnya
anda ingin menjadikan file gambar pemandangan.jpg sebagai background
halaman website anda maka anda tinggal tambahkan kode berikut :
<body background = pemandangan.jpg>
Save dan klik refresh. Tampilan website anda akan seperti gambar di bawah ini.
Perlu diingat bahwa
menggunakan gambar sebagai background halaman website anda akan
memperlambat loading halaman website anda, terutama bila ukuran file
gambar ini terlalu besar. Karena itu usahakan sebisa mungkin agar
background website anda tidak menggunakan file gambar
6. Merubah Tulisan dalam Website
Seperti halnya
background website, tulisan dalam website pun bisa juga diubah ubah
warnanya. Selain itu jenis dan ukuran tulisan bisa juga kita ubah ubah.
Untuk itu kita perlu menyisipkan tag <font> </font> dalam
tag <body> </body>. Untuk mengubah warna tulisan kita
tambahkan kode “color” setelah font, untuk mengubah jenis tulisan kita
tambahkan kode “face”, dan untuk mengubah ukuran tulisan kita tambahkan
kode “size”. Khusus untuk size kita bisa mengubah ubah ukurannya dari -7
sampai +7, bila nilainya semakin besar maka semakin besar pula huruf
yang akan ditampilkan dalam halaman web. Kita bisa mengubah satu, dua,
atau tiga pengaruh tag tag di atas secara bersamaan dengan dipisahkan
spasi. Misal kode yang kita tuliskan dalam Notepad :
<html>
<head>
<title>
Website Saya
</title>
</head>
<body bgcolor = black>
<font color = white face = verdana size = +3 align = center>
Selamat datang di website saya
</font>
</body>
</html>
Kode di atas
berarti memberi pengaruh tulisan warna putih berjenis Verdana dan
berukuran +3. Save dan refresh browser untuk melihat pengaruhnya. Anda
bia juga menambahkan efek tulisan bergerak dengan menyisipkan tag
<marquee> </marquee> sebelum kode <font> </font>
Untuk mengatur
posisi tulisan bisa kita sisipkan tag <posisi> </posisi> di
antara tulisan yang kita tuliskan. Posisi kita isi dengan “left”,
“center”, atau “right”. Misalkan kita ingin membuat posisi tulisan ke
tengah, maka kita ketikkan:
<center> Selamat datang di website saya </center>
7. Menyisipkan Gambar atau Foto Dalam Website
Anda bisa
menyisipkan foto atau gambar anda dalam website anda dengan mengetikkan
tag <img src = file foto anda>. Misalkan file yang ingin anda
masukkan bernama bajaj.jpg, maka tag yang perlu anda tuliskan adalah :
<img src = bajaj.jpg>
Untuk memberi jarak antara tulisan anda sebelumnya dengan foto ini maka perlu anda tambahkan tag <br>.
<font color =
white face = verdana size = +3 align = center> Selamat datang di
website saya <br> <img src = bajaj.jpg> </font>
Tampilan website
anda akan seperti ini. Ukuran gambar bisa anda atur dengan menambahkan
kode “height = ukuran”, dan/atau “width = ukuran”. Misalkan anda ingin
gambar anda mempunyai tinggi 100 pixel maka anda tinggal tambahkan
“height = 100” setelah kode nama file gambar yang anda sisipkan.
8. Menambahkan Menu dalam Website
Selanjutnya tinggal
anda tambahkan menu-menu dalam website anda. Menu standar yang ada
dalam web sederhana biasanya adalah profil, galeri foto, dan link. Untuk
itu kita perlu menambah halaman baru yang mempunyai nama file
profil.html, galeri.html, dan link.html. Untuk membuat halaman halaman
ini anda bisa mengulangi langkah langkah yang telah dijelaskan
sebelumnya. Untuk menghubungkan halaman utama website dengan halaman
halaman tambahan ini kita perlu ketikkan tag <a href =
profil.html> dan ditutup dengan </a> bila kita ingin
menghubungkan dengan halaman profil, demikian pula untuk halaman web
lainnya. Kode berikut akan menampilkan hubungan antar halaman website
yang berjejer.
<a href =
profil.html> Profil </a> <a href = galeri.html> Galeri
</a> <a href = link.html> Link </a>
Klik Save dan
refresh sehingga ditampilkan halaman website seperti berikut. Bila link
yang anda buat benar maka kursor mouse akan berubah menjadi tangan bila
anda dekatkan ke link yang anda buat.
9. Link untuk Halaman profil, galeri
Untuk halaman
profil, galeri, dan link bisa anda tambahkan sesuka anda seperti langkah
langkah sebelumnya. Khusus untuk halaman link, anda bisa mengisinya
dengan link ke Friendster, Yahoomail, Google, dan sebagainya. Link yang
telah dijelaskan di atas bila kita klik maka halaman baru akan dibuka
dalam satu jendela browser yang sama. Bila kita ingin tetap menikmati
halaman website kita sedangkan kita juga ingin membuka Friendster
misalnya, maka kita perlu menambahkan tag “target = “_blank” setelah
alamat Friendster. Misal :
<a href = http://www.friendster.com target = “_blank”> Friendster </a>
Bila anda ingin Friendster ini dibuka di halaman web yang sama maka anda
tinggal hilangkan saja “target = “_blank” nya.
10. Link ke Halaman Profil Berupa Gambar
Bila anda ingin
link ke halaman profil anda berupa gambar profil.jpg misalnya, maka anda
perlu menyisipkan file gambar di dalam tag <a href = profil.html>
</a>. Sehingga dapat kita tuliskan sebagai berikut :
<a href = profil.html> <img src = profil.jpg> </a>
Bila benar maka
kursor mouse akan berubah menjadi tangan bila didekatkan ke gambar
profil.jpg. Demikian pula bila link ke Friendster atau Yahoomail juga
dalam bentuk gambar, maka anda tinggal menambahkan tag <img src =
gambar> di antara tag <a href = link > </a>.
