Web Stastis disertai dengan link-link

MODUL PRAKTIKUM

PEMROGRAMAN WEB

PERTEMUAN II

Web Stastis Disertai Dengan Link-Link

GURU PENGAJAR

Yonatan Wijaya, S.Kom

2013

Elemen link berfungsi sebagai penghubung antara suatu halaman dengan

halaman lain, Link adalah tag terpenting di dunia web. Bisa dibayangkan apa yang terjadi jika tidak ada

fasilitas ini. Dengan adanya tag ini dokumen kita bisa saling terhubung.

Tag <a> sebagai tag pembuka dan tag </a> sebagai tag penutup. Dan gunakan attribut “href” untuk membuat

link.

<html> <!- - always start your document with this tag- ->

<head> <!- - recommend having the <head> and </head> tags- ->

<title>HTML Menggunakan Link</title>

</head>

</body>

<! - - place to write scr ipt- ->

</body>

</html> <!- - always end your HTML document with this tag- ->

1. URL (Uniform Resource Locator)

Penggunaan link untuk menghubungkan suatu dokumen ke dalam suatu URL.

<a href=” http://www.umm.ac.id/”>Art & Digital Technology In Focus </a>

Lihat <a href=" http://www.yahoo.com/">Yahoo!</a>

Membuat link yang dapat dibuka di tab yang baru yaitu dengan

menambahkan script TARGET="_blank" pada link tersebut.

Lihat <a href=" http://www.yahoo.com/" TARGET="_blank">Yahoo!</a>

2. e-Mail

Penggunaan link untuk menuliskan e-Mail kepada alamat e-Mail yang

sudah

ditentukan. Kirimi saya <a href="mailto:[email protected]">Mail!</a>

<a href="mailto:[email protected]">Send e-mail</a>

3. Dokumen (File)

Penggunaan link untuk menghubungkan suatu dokumen ke dokumen atau file lain.

Untuk mengisi buku tamu <a href="inputBukuTamu.htm">klik di sini </a>

<a href="lihatBukuTAmu.htm">Lihat</a> Buku Tamu

4. Teks

Selain menghubungkan atau menyambungkan dengan dokumen lain. Bisa

juga

melakukan link ke bagian lain di dalam dokumen itu. Caranya yaitu

member ikan

attribut “name” pada tag <a> untuk menandai suatu daerah, metode ini

ser ing

disebut

“Anchor”. Sebagai contoh : <a name="tanda">Bagian ini ditandai</a>

Langkah selanjutnya, untuk membuat link ke bagian yang telah

ditandai, buat kode

sebagai ber ikut : <a href="#tanda"> Menuju kebagian yang telah ditandai</a>

Menghilangkan garis bawah pada link. Secara teknis hal ini tidak bisa dilakukan dengan

HTML. Tetapi ini dapat diker jakan dengan Style Sheets. Yaitu dengan

menambahkan suatu script di antara <head> pada dokumen tersebut, sehingga setiap

browser yang mengenali Style Sheets akan menampilkan link tersebut tanpa gar is bawah.

5. Gambar

Kita dapat menampilkan gambar dalam halaman HTML, format filenya

berupa JPG

atau GIF. Untuk menampilkannya digunakan <img>.

Atribut Elemen I mage

src = lokasi dan nama gambar

alt = teks ( teks alternatif )

width = pixel ( lebar gambar )

height = pixel ( tinggi gambar)

align = [ top | middle | bottom | left | right ] ( perataan gambar )

border= pixel (tebal garis tepi gambar)

Contoh scr iptnya adalah :

<img src=”namaf ilegambar”>

<img src="car1-sm.gif" width=”90” height=”62”>

Penggunaan link untuk menghubungkan suatu dokumen ke dokumen atau URL

lain melalui gambar.

<a href="car1.jpg"><img src="car 1-sm.gif" width=”90” height=”62”></a>

<a href="http://www.umm.ac.id/"><img src="car1-sm.gif" width=”90”

height=”62”></a>

6. War na Link

Browser memiliki nilai default untuk warna teks, warna link, warna

active link dan

warna visited link selain war na latar belakang. Defaultnya adalah Teks biasanya hitam

Link biasanya biru

Active link umumnya mer ah

Visited link biasanya ungu

Kita bisa mengubahnya kalau perlu. Tetapi seluruh dunia terbiasa dengan warna biru

untuk link. Warna default link dapat diubah pada tag <body>.

<body bgcolor="#00000" text="#FFFF66" link="#00FF66" vlink="#00BB33"

alink="#00CCFF">

Lihat <a href="http://www.yahoo.com/">Yahoo!</a>

<a href="mailto:[email protected]">Send e- mail</a>

</body>

7. Penempatan Dokumen (File)

Penulisan sumber dari suatu dalam link harus jelas dokumen. Di

bawah ini disajikan

beber apa diagram beserta cara penulisan sumber yang benar.

src="chef.gif" berarti gambar

tersebut ada di folder yang sama

dengan dokumen html

src="images/chef.gif" berarti

gambar tersebut terletak satu folder di

bawah (sub folder) dokumen html.

Anda bisa membuat sub-sub folder

sebanyak yang anda mau.

src="../chef.gif" berarti gambar

tersebut terletak satu folder di atas

dokumen html.

src="../../chef.gif" berarti gambar

tersebut terletak dua folder di atas

dokumen html.

src="../images/chef.gif" berarti

gambar tersebut terletak satu folder di

atas kemudian satu folder ke bawah

di direktori images.

LATIHAN : Semua soal harus dijawab menggunakan tag HTML.

1. Bagaimana menghilangkan gar is biru di sekeliling gambar dimana gambar tersebut

adalah link?

2. Bagaimana menambahkan garis biru kecil disamping gambar tersebut?

Menjadi

Ber ikut source code untuk gambar diatas :

3. Bagiamana membuat gambar tersebut (soal no. 2) saling

bersambungan satu sama lain?

4. Berikut kasus yang sering muncul, dimana gambar tidak dapa t muncul di browser,

karena bebera pa alasan seperti filenya tidak ada atau nama file yang

diacu tidak sama

Bagaimana cara memberikan informasi kepada user ba hwa sebenarnya ini

adalah gambar home, links, dan email seperti yang ditunjukan pada gambar dibawah ini?

(Source code untuk no. 2 dapat digunakan untuk menjawab soal ini)

Web Stastis disertai dengan link-link

Leadership & Management

Transcript of Web Stastis disertai dengan link-link