Web Stastis disertai dengan link-link
•
0 likes•322 views
Dokumen ini memberikan penjelasan tentang penggunaan link pada web statis untuk menghubungkan halaman satu dengan halaman lain, termasuk URL, email, dokumen, teks, gambar, dan penempatan file. Diberikan contoh kode untuk mengubah warna link dan menambahkan teks alternatif jika gambar tidak dapat ditampilkan. Terdapat latihan mengenai penghilangan garis biru pada link gambar, menambahkan garis biru disamping gambar, dan men
More Related Content
What's hot
Viewers also liked
Viewers also liked (20)
Similar to Web Stastis disertai dengan link-link
Similar to Web Stastis disertai dengan link-link (20)
Web Stastis disertai dengan link-link
- 1. MODUL PRAKTIKUM PEMROGRAMAN WEB PERTEMUAN II Web Stastis Disertai Dengan Link-Link GURU PENGAJAR Yonatan Wijaya, S.Kom 2013
- 2. 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:maskur@umm.ac.id">Mail!</a> <a href="mailto:admin@umm.ac.id">Send e-mail</a>
- 3. 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>
- 4. 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>
- 5. 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:admin@umm.ac.id">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.
- 6. 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 :
- 7. 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)