MODUL PERKULIAHAN

Pemrograman
Web
Link, navigation, image di
HTML

03

Modul ini berisi tentang penjelasan Mahasiswa Dapat Membuat link, image,
Membuat link, image, dan warna di dan warna di html
html
HTML Element
Internal dan External Links

Dalam membangun situs web, hyperlink digunakan untuk dua tujuan utama, untuk mengatur
halaman di dalam situs (tautan internal) dan untuk menjangkau sumber daya di web (tautan
eksternal).
Mengikuti tautan internal, pengunjung tetap berada di dalam situs dan sistem navigasinya.
Mengklik tautan eksternal, pengunjung pergi ke situs lain. Oleh karena itu, situs yang
dirancang dengan baik harus membuat perbedaan yang jelas antara kedua jenis tautan ini.
Dianjurkan agar setiap tautan eksternal, yaitu:
• jelas diindikasikan sebagai pergi ke luar situs
• ditampilkan di jendela baru sehingga pengunjung dapat kembali dengan menutup
atau mengikonkan jendela baru tersebut.
Cara yang sederhana adalah dengan menggunakan atribut target = "blank" agar halaman
referensi ditampilkan di jendela baru:
<a href="http://www.w3c.org/" target="_blank">The W3C Consortium</a>
Tetapi atribut target tidak didukung oleh XHTML Strict. Jadi, secara tegas, setiap halaman
yang menggunakan konstruksi target untuk tautan eksternal harus menggunakan XHTML
Traditonal, bukan XHTML Strict. Browser utama biasanya lebih toleran.
Alternatif lain, Anda bisa menggunakan Javascript untuk membuka jendela baru browser.

Organisasi Situs

Sekarang, mari pertimbangkan menggunakan hyperlink untuk mengatur laman dalam situs
web www.enterprise.com, misalnya.
• Atur halaman situs ke dalam hierarki file dan direktori (folder) yang disimpan di hard
disk host server. Hindari karakter non-alfanumerik dalam nama file / direktori. Jika
tidak, nama file harus dienkode URL (Bagian 2.16) sebelum menjadi bagian dari
URL.
• Tempatkan halaman entri situs (biasanya index.html) di direktori root server.
• Gunakan subdirektori seperti gambar /, produk /, layanan /, kontraktor /, anggota /,
afiliasi /, untuk mengatur situs. Halaman index.html dalam setiap subdirektori
biasanya merupakan halaman utama untuk bagian situs tersebut.
• Buat organisasi tetap sederhana dan hindari menggunakan lebih dari tiga tingkat
penumpukan subdirektori.

2015 Pemrograman Web Pusat Bahan Ajar dan eLearning

2 Abdi Wahab http://www.mercubuana.ac.id
 • Rancang sistem navigasi yang jelas, mudah digunakan, dan efektif dalam
mengarahkan pengunjung ke tempat yang mereka inginkan di situs Anda.
• Gunakan sebagian URL secara eksklusif untuk menautkan di dalam situs. dan
pastikan tautannya menggunakan salah satu bentuk berikut:
o relatif terhadap halaman host itu sendiri (href = "file" atau href = "dir / file")
o relatif terhadap root server (href = "/ path-to-file")
Jika semua link adalah jenis pertama, maka halaman situs dapat dipindahkan sebagai grup
ke lokasi berbeda di sistem file atau ke komputer hosting yang berbeda tanpa perubahan.
Jika Anda memiliki kedua jenis link relatif, halaman tersebut dapat dipindahkan ke root
server di host lain tanpa perubahan.
Dalam membuat situs teks saja, pertimbangkan untuk membuat halaman dengan bagian-
bagian ini:
1. Navigasi utama — Link ke halaman utama, halaman utama tingkat pertama, peta
situs dan / atau halaman pencarian situs. Tunjukkan apakah sebuah halaman akan
memiliki logo bisnis dan pastikan gambar logo tersebut juga akan menjadi link ke
halaman utama. Ingat, sebuah situs mungkin atau mungkin tidak memiliki halaman
entri yang mewah atau melibatkan animasi. Halaman yang dituju entri adalah
halaman utama.
2. Navigasi kecil — Link ke subhalaman halaman ini dan link ke halaman saudara
terkait secara langsung.
3. Navigasi dalam halaman — Link ke bagian halaman ini bila perlu.
4. Konsep konten halaman.

Terhubung dengan Service

Besides document references, other frequently used types of links in practice are:
Selain referensi dokumen, jenis tautan lain yang sering digunakan dalam praktik adalah:
• Tautan email — Tautan dalam form
<a href="mailto:email-address?SUBJECT=line">
memberi tahu browser untuk meluncurkan program untuk mengirim email ke alamat yang
diberikan menggunakan baris subjek yang ditunjukkan. Baris subjek (dari? Pada) adalah
opsional. Sebagai contoh:
<a href=
"mailto:pwang@cs.kent.edu?SUBJECT=Web%20Design%20and%20Programming">
contact Paul</a>
• Tautan unduhan (Download) — Tautan dalam form
<a href="ftp:host:port/path-to-file">

2015 Pemrograman Web Pusat Bahan Ajar dan eLearning

3 Abdi Wahab http://www.mercubuana.ac.id
memberitahu browser untuk meluncurkan program FTP untuk terhubung ke host yang
diberikan dan untuk mendownload file yang ditentukan dengan FTP anonim. Ini berguna
untuk mengunduh file besar seperti program, dan file terkompresi (ZIP atau GZIP). Jika port
tidak diberikan, maka port standar 21 untuk FTP diasumsikan. Sebagai contoh:
Download <a href="ftp://monkey.cs.kent.edu/package.zip">
<code>package.zip</code></a> (35439 bytes)
• Tautan Login — Tautan dalam form
<a href="telnet://host:port">
memberitahu browser untuk meluncurkan program telnet yang terhubung ke host yang
diberikan di port yang ditentukan untuk login jarak jauh. Jika port tidak diberikan, port
standar 23 untuk TELNET diasumsikan. Sebagai contoh,
<a href="tenlet://monkey.cs.kent.edu">login to Monkey</a>
at the CS Department, Kent State University.

Image

Dengan hyperlink seperti <a href="cat.gif"> Kucing saya <a>, Anda menampilkan gambar
yang berdiri sendiri di halaman terpisah. Untuk menyertakan gambar dalam halaman
bersama dengan konten lain, gunakan elemen inline gambar img.
<img src="URL" width="..." height="..." alt="..." />
di mana URL mengarah ke file gambar biasanya dalam format GIF, JPEG, atau PNG
(portable network graphics). Format gambar raster menyimpan petak piksel, atau elemen
gambar, untuk mewakili gambar. Mereka juga menerapkan skema kompresi data untuk
mengurangi ukuran file dengan sedikit atau tanpa pengorbanan pada kualitas gambar.
Elemen inline img dapat ditempatkan di blok atau elemen inline apa pun kecuali pre. Atribut
dari img meliputi:
• alt = "text": Teks alternatif yang diperlukan untuk digunakan pada browser non-visual
dan saat file gambar tidak tersedia.
• height = "ht", width = "wd": tinggi dan lebar area tampilan untuk gambar. Informasi
ukuran ini, diberikan dalam panjang yang valid (Bagian 2.11), memungkinkan
browser memesan ruang yang benar untuk gambar dan terus merender halaman
tanpa menunggu gambar dimuat. Untuk halaman dengan banyak gambar, ini dapat
membuat halaman muncul di layar lebih cepat. Oleh karena itu, disarankan agar
ukuran gambar yang tepat dalam piksel selalu ditentukan. Ukuran yang berbeda dari
gambar asli dapat diberikan dan gambar akan ditingkatkan atau diturunkan agar
sesuai dengan area yang ditentukan. Tinggi dan lebar adalah opsional.

2015 Pemrograman Web Pusat Bahan Ajar dan eLearning

4 Abdi Wahab http://www.mercubuana.ac.id
 • longdesc = "URL": File teks yang memberikan deskripsi verbal dari gambar yang
menyediakan browser untuk para tunanetra, misalnya, cara untuk menjelaskan
gambar kepada pengguna akhir.
Kami menyarankan Anda selalu menyertakan atribut alt, width dan height untuk img. Untuk
menemukan lebar dan tinggi sebuah gambar, gunakan alat pengolah gambar seperti
Photoshop, Paintshop. Pada sistem LINUX, perintah xview -verbose file .jpg akan
menunjukkan ukuran gambar yang diberikan.

Gambar, logo, dan ikon sering digunakan sebagai tautan navigasi dan / atau informasi. Ini
hanya dilakukan dengan meletakkan gambar di dalam <a href="URL "> ... </a>. Biasanya
browser akan menempatkan border di sekeliling gambar sebagai petunjuk visual bahwa
gambar tersebut adalah link. Untuk menghilangkan bingkai gambar, gunakan gaya "border:
none":
<a href="page2.html"><img src="next.gif" style="border: none" /></a>
Dalam contoh ini, ikon next.gif jelas merupakan tautan dan batas tambahan tidak diperlukan
atau diinginkan. Gaya "border: 0px" juga berfungsi karena ini menyetel semua lebar batas
ke nol.

Peta gambar adalah gambar dengan area aktif yang, ketika diklik, mengarah ke URL yang
ditentukan. Misalnya, Anda dapat menggunakan gambar sejumlah produk, peta wilayah
suatu negara bagian, atau gambar kelompok teman sekelas untuk membuat peta gambar.
Untuk membuat peta gambar, Anda mengaitkan elemen peta ke gambar. Elemen peta berisi
satu atau lebih elemen area yang menentukan area aktif dalam gambar dan
menghubungkan masing-masing ke hyperlink. Atribut id yang diperlukan dari peta digunakan
untuk mengaitkannya dengan gambar. Kode peta dapat ditempatkan di elemen blok apa pun
(tetapi tidak langsung di body) dan itu sendiri tidak ditampilkan oleh browser.
Elemen area dapat menentukan persegi panjang, lingkaran, atau poligon menggunakan
koordinat dalam piksel (atau terkadang dalam persentase). Sudut kiri atas gambar adalah
(0, 0) mengikuti sistem koordinat untuk grafik computer.
<map id="samplemap">
<area shape="rect" coords="0,0,100,150" (corners of rectangle)
href="some-url" alt="item 1" />
<area shape="poly" coords="0,0,10,32,98,200" (vertices of polygon)
href="some-url" alt="item 2" />
<area shape="circle" coords="0,0,100" (center and radius of circle)
href="some-url" alt="item 3" />

2015 Pemrograman Web Pusat Bahan Ajar dan eLearning

5 Abdi Wahab http://www.mercubuana.ac.id
<area shape="default" (rest of image)
href="some-url" alt="item otherwise" />
</map>
Seperti gambar, suatu area membutuhkan atribut alt. Bentuk khusus default adalah
singkatan dari sisa gambar yang tidak termasuk di daerah yang ditandai. Atribut nohref
khusus dapat diberikan sebagai pengganti href untuk menunjukkan tidak ada tautan untuk
suatu area. Untuk daerah dengan bentuk tak beraturan, poligon, diberikan sebagai x 0, y 0,
x 1, y 1, ..., adalah yang paling berguna.

Gambar 6. Image Kordinat

Untuk mendapatkan koordinat, Anda dapat membuka gambar yang dimaksud di alat
pemrosesan gambar apa pun (PaintShop, PhotoShop, ImageMagick, misalnya) atau
menggunakan editor peta gambar. Di Web, Pemeta Gambar Orang Miskin adalah layanan
gratis. Peta yang sudah selesai ditempatkan di dalam elemen head dan dikaitkan dengan
gambar sebaris dengan atribut peta penggunaan dari elemen img:
<img src="img-url" usemap="#map-id" /> (an image map)

Color

Nilai warna dalam properti gaya dapat berupa nama warna dari palet VGA Windows atau
diberikan dalam RGB (Merah-Hijau-Biru) dengan notasi berikut:
A. # rrggbb — dengan dua digit pertama, dua tengah, dan dua terakhir dari enam digit
heksadesimal masing-masing menentukan nilai merah, hijau, dan biru (misalnya #
0ace9f). Ini adalah warna 24-bit.

2015 Pemrograman Web Pusat Bahan Ajar dan eLearning

6 Abdi Wahab http://www.mercubuana.ac.id
B. # rgb — kependekan dari notasi di atas jika dua digit pertama, dua tengah, dan dua digit
terakhir adalah sama (mis. # 03c adalah singkatan dari # 0033cc). Ini adalah warna 12-
bit.
C. rgb (r, g, b) —dengan bilangan bulat basis 10 antara 0 dan 255 inklusif digunakan
(misalnya rgb (0,204,108)). Ini adalah padanan desimal dari notasi A.
D. rgb (r%, g%, b%) - di mana persentase integral digunakan untuk tiga komponen warna.
Dibutuhkan pembagian atau perkalian dengan 16 untuk mengkonversi antara desimal dan
notasi hex untuk nilai warna RGB. Kalkulator heksadesimal memungkinkan Anda untuk
mengambil nilai RGB desimal dan mengubahnya menjadi heksa secara otomatis.

2015 Pemrograman Web Pusat Bahan Ajar dan eLearning

7 Abdi Wahab http://www.mercubuana.ac.id
Daftar Pustaka
Wang, Paul,. Katila, Sanda. 2003 An Introduction to Web Design+Programming.
Brooks/Cole Book.
Thomas A. Powel. 2010. HTML & CSS: The Complete Reference, Fifth Edition. The
McGraw-Hill: United States.
Ducket, Jon. 2004. Beginning Web Programming with HTML, XHTML, and CSS. Wiley
Publishing: Canada.

2015 Pemrograman Web Pusat Bahan Ajar dan eLearning

8 Abdi Wahab http://www.mercubuana.ac.id