Link dan Gambar (html)


1.  Link

Kekuatan utama dokumen HTML terletak pada hypertext link atau hyperlink atau lebih singkat lagi disebut link. Dengan hyperlink ini kita bisa membuka dokumen HTML lain atau langsung menuju ke bagian tertentu sebuah dokumen HTML. Hyperlink ini dapat diletakkan pada teks tertentu ataupun pada sebuah image, bila diletakkan pada teks maka teks tersebut (secara default) akan digaris-bawahi dan warnanya menjadi berbeda. Sintaksis penulisan :



Beberapa   atribut   yang   sering   ditambahkan   atau   sering   digunakan   dalam penggunaan sintak diatas adalah seperti dibawah ini:

Tabel. 2.1. Atribut dalam Link


Contoh Membuat Link Antar Dokumen :

Dalam Contoh ini, dapat dilihat dari script di bawah ini, sebelumnya siapkan halaman html  dengan  nama  Magister  Teknik  Informatika.html,  Sistem Informasi.html, Teknik Informasi.html (disimpan di direktori anda masing- masing) dengan script masing-masing seperti dibawah ini:




Gambar Skrip untuk direksional link dari HTML utama 

Setelah kita mengetikkan skrip diatas dan melakukan penyimpanan, selanjutnya kita akan membuat halaman HTML baru yang nanti ada link untuk merujuk ke tiap halaman HTML diatas. Simpan dengan nama latihan11.html.



Gambar Skrip untuk Halaman utama



A.  Membuat Link Ke Dalam Dokumen

Seringkali halaman web adalah halaman yang panjang dan selalu membukanya dari posisi awal akan sangat melelahkan bagi pengguna. Untuk itu akan lebih memudahkan bila kita langsung merujuk pada bagian tertentu sebuah halaman web. Caranya dengan menyisipkan Tag Anchor <a> dengan atribut "name" di bagian dokumen yang akan dituju.

Untuk perintah standartnya :



Untuk menggunakan link yang akan merujuk ke bagian dokumen itu, ditambahkan

'#nama_section" menjadi :


Contoh :

Simpan dengan nama file link ke dalam dokumen.html

 


Gambar Skrip untuk merujuk dalam dokumen

 


2.  Gambar

Untuk  menyisipkan  gambar  kita  dapat  memanfaatkan  tag  <IMG>.  Format  file gambar yang bisa ditampilkan bisa bermacam-macam, misalnya jp, jpeg, pcx, gif, psd,  dan  sebagainya.  Pada  umumnya,  perancang  web  hanya  menggunakan kombinasi dari tiga format file gambar saja yaitu jpeg, gif dan psd. Sintaksis yang digunakan secara standar adalah


Contoh :

Simpan dengan nama file menyisipkan gambar.html

 


Gambar Skrip untuk menyisipkan gambar didalam HTML

 

A.   Membuat obyek gambar menjadi sebuah hyperlink

Apabila kita mengakses sebuah website, seperti facebook atau search engine google terdapat logo dari dua website tersebut. Logo tersebut merupakan gambar dimana kita sering dapat melakukan klick terhadap gambar tersebut dan merujuk ke sebuah link tertentu. Berikut contoh sintaks penggunaan obyek gambar menjadi hyperlink :

<img src='url gambar' alt='nama alternatif gambar' width='tinggi' height='lebar'>

•   Tag <img> adalah tag HTML untuk mendefinisikan sebuah gambar.

•   Atribut src adalah sumber/url dari gambar.

•   Atribut alt adalah untuk memberikan nama alternatif gambar. Apabila gambar  

     tidak bisa ditampilkan, maka yang muncul adalah nama alternatifnya.

•    Atribut height dan width adalah untuk mengatur ukuran gambar.

contoh:

<img src=‟sepeda.jpg' alt='Click Me!' width=100' height='100'>

Contoh :

Simpan dengan nama file gambar menjadi hypelink.html


Gambar Skrip untuk menyisipkan sebuah link dalam gambar

 


Jika diperhatikan, skrip diatas terdapat sebuah sintak yang mengarah sebuah halaman html tertentu. Oleh karenanya, buatlah sesuai nama halaman html diatas agar bisa dirujuk oleh halaman tersebut. Simpan dengan nama gambar sebagai link sub.html.



Gambar Skrip untuk menyisipkan sebuah link tautan

 

Jika pengetikan skriptidak terjadi kesalahan, maka obyek gambar diatas jika diklik maka akan merujuk ke halaman html yang telah kita buat setelahnya.

 


Komentar

Posting Komentar

Postingan populer dari blog ini

Cascading Style Sheet (CSS)

Gambar
  1.       Pengertian Selector, Property dan Value pada CSS Gambar 5.1 Selector, Property dan Value pada CSS A.     Selector Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk „mengaitkan‟ atau menghubungkan kode CSS dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS. Sesuai dengan namanya, selector digunakan untuk mencari bagian web yang ingin dimanipulasi atau yang ingin di-style. Misalnya : “cari seluruh tag <p>”, atau “cari seluruh tag HTML yang memiliki atribut class=”warning”” atau “cari seluruh link yang ada di dalam tag <p>”. Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag p, i, h1, li, dll. Selector didalam CSS dapat menjadi kompleks tergantung kebutuhannya. B.      Property Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS mem...
Baca selengkapnya

PENANGANAN EKSEPSI. JAVA

Gambar
1. PENANGANAN EKSEPSI TRY  ASSALLAMMUALIKUM  WR WB Sebelum kita mengoding kita buka terlebih dahulu aplikasi NetBeans ( KLIK NEW PROJECT ( PADA CATEGORI PILIH “ JAVA” ( PADA  PROJECT PILIH “JAVA APPLICATION” ( PADA PROJECT NAMA KITA ISI “ PenangananError”( PADA LIBRARIES FOLDER KLIK BROWSER LAJU PILIH  NetBeans Project ( PADA CRATE MAIN CLASS KITA TULIS “ array.Array” ( LALU KLIK FINISH SCRIPT : import java.util.Scanner; /**  *  * @author DIAN  */ public class PenangananError {     public static void main(String[] args) {         int a,b;         double c=0;           Scanner input = new Scanner(System.in);           System.out.print("Nilai A =");         a = input.nextInt();         System.out.print("Nilai B =");         b = input.nextInt();         ...
Baca selengkapnya

MENGHITUNG NILAI. JAVA

Gambar
ASSALLAMMUALIKUM  WR WB Sebelum kita mengoding kita buka terlebih dahulu aplikasi NetBeans ( KLIK NEW PROJECT ( PADA CATEGORI PILIH “ JAVA” ( PADA  PROJECT PILIH “JAVA APPLICATION” ( PADA PROJECT NAMA KITA ISI “ PERTEMUAN 3”( PADA LIBRARIES FOLDER KLIK BROWSER LAJU PILIH  NetBeans Project ( PADA CRATE MAIN CLASS KITA TULIS “ pertemuan.pkg3.PERTEMUAN3” ( LALU KLIK FINISH SCRIPT : package pertemuan.pkg3; import java.util.*; /**  *  * @author DIAN  */ public class PERTEMUAN3 {     /**      * @param args the command line arguments      */     public static void main(String[] args) {         // TODO code application logic here         Scanner input = new Scanner(System.in);                 String nama;         int nilai2;         double nilai1, nilai3;      ...
Baca selengkapnya