Sabtu, 01 Oktober 2011

HTML : Images & Hyperlink

Image & HyperLink

Pada Postingan kali ini saya akan membahas tentang <tag> Images untuk memberikan gambar dan Hyperlink untuk menyambungkan antar halaman yang telah kita buat, agar kita tidak terpaku hanya pada 1 halaman yang kita buat

IMAGE<IMG>

Element Image befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag penutup dan mempunyai attribute yaitu align, alt (teks alternatif jika gambar tidak tampil), border, height, width, hspace (jarak kosong posisi horizontal, vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama file-nya).            

Sintaks:
<img
   align="left"|"right"|"top"|"middle"|"bottom"
   alt="text"
   border="pixel"
   width="pixel" | "%"
   height="pixel" | "%"
   hspace="pixel"
   vspace="pixel"
   src="url">




Contoh :

<IMG SRC="namafile.ekstensi" alt="ini adalah gambar yang di buka " width=200 height=100> <IMG SRC="Blogger.jpg"  hspace=”10” vspace=”5” border=”2”>



Hasil
 



HYPERLINKS<A>

Element A befungsi untuk menghubungkan ke internal ataupun eksternal halaman web. Element ini mempunyai attribute href, name, dan target.  Attribute href berfungsi sebagai hypertext reference yang mempunyai nilai URI (uniform resource identifier) yang akan menghubungkan ke eksternal halaman web. Attribute name berfungsi untuk menghubungkan ke tempat tujuan dalam halaman web (anchor). Attribut target berfungsi untuk menampilkan halaman web pada satu jendela atau jendela baru.


Sintaks:
<a

 href="url"

 name="name"

 target="_blank"|"parent"|"_top"|"_self"> 

 ...........................
</a>


Contoh untuk link:

<a href=”innocentismylife.blogspot.com” target=”_blank”>Innocent is My Life</a>

<a href=”yahoo.com” target=”_self”>Yahoo</a>



Contoh untuk penggunaan attribut name :

<html>
<head>
<title>Atribut name</title>
</head>
<body>
Link internal dan anchor adalah link yang menunjuk ketempat yang ada dalam dokument ini.<br>
<a href="#akhir">kebagian akhir</a>
<a name="pertama"></a>
<p>Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini.
Ini adalah teks bagian pertama dalam dokumen ini. </p>

<p>Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.
Ini adalah teks bagian kedua dalam dokumen ini.</p>

<p>Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.
Ini adalah teks bagian ketiga dalam dokumen ini.</p>

<p>Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.
Ini adalah teks bagian keempat dalam dokumen ini.</p>
<a name =” akhir”></a>
<a href="#pertama">kebagian pertama</a>
</body>
</html>


Pada script <a href="#pertama">kebagian pertama</a> jika di klik link tersebut maka akan menuju kebagian <a name="pertama"></a> atau bagian awal jendela, karena tag <a name="pertama"> </a> ditulis pada awal HTML, tetapi pada jendela yang sama, begitu pula pada script <a href="#akhir">kebagian akhir</a> jika di klik link tersebut maka  akan menuju kebagian <a name =” akhir”></a>.


Sekian postingan saya kali ini, SEMOGA BERMANFAAT....

Tidak ada komentar:

Posting Komentar