Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

HTML (Hypertext Markup Language)

Presentasi serupa


Presentasi berjudul: "HTML (Hypertext Markup Language)"— Transcript presentasi:

1 HTML (Hypertext Markup Language)

2 Membuat Hyperlink/ link dalam HTML
Hyperlink/ link dalam HTMl sangatlah penting karena ia yang menghubungkan antara satu halaman dengan halaman lain. Untuk membuat Hyperlink, tag yang diperlukan adalah <a>. Tag ini kependekan dari anchor

3 Contoh penggunaan hyperlink
<a href=" Saya</a>

4 Atribut <href> digunakan untuk mendefinisikan lokasi link
Atribut <href> digunakan untuk mendefinisikan lokasi link. Ada beberapa jenis link yang bisa anda gunakan, berdasarkan lokasi tujuannya link dibedakan: Link relatif yang menuju bagian lain dari halaman web anda Link web yang menuju halaman lain dalam satu website

5 Link relatif yang menuju bagian lain dari halaman web kita sendiri
CONTOH: <html> <body> <a href=“latihan1.html"> Klik untuk menuju latihan1 </a> <br> <a href=“latihan2.html"> Klik untuk menuju latihan2 </a> </body> </html>

6 <a href=“latihan2.html"> </a>
Hyperlink juga bisa diletakkan dalam gambar. Caranya sama persis seperti menaruh hyperlink pada tulisan hanya saja tag <a> dan </a> menjepit tag gambar <img>. Sekarang perhatikan kode di bawah ini. <a href=“latihan2.html"> <img src=“images/wira.jpg" /> </a> Kode diatas adalah contoh hyperlink dimana ketika gambar wira di klik maka halaman latihan2.html akan terbuka

7 membuat link dengan menggunakan gambar (image)
<html> <body> <a href=" title="Hai... klik gambar ini maka anda akan dibawa ke Yahoo.com"><img src=“images/yahoo.jpg" border="0" width="147" height="31" align="left" alt="yahoo"></a> </body> </html>

8 Membuat link ke halaman web lain
CONTOH: <html> <body> <a href=" Ayo kehalaman W3Schools</a> <br> <a href=" Ayo kehalaman yahoo</a> </body> </html>

9 HTML Links - The name Attribute
Atribut ini digunakan untuk memberikan nama dari suatu link. Atribut ini berbeda dengan atribut HREF yang akan mengubah warna teks menjadi biru dan teks tersebut akan memiliki garis bawah, atribut NAME tidak akan mengubah tampilan teks sama sekali dengan teks yang lain. Penggunaannya pun berbeda dengan atribut HREF yang digunakan untuk mengarahkan ke halaman lainnya, atribut NAME hanya berguna untuk memberikan nama dari suatu link.

10 Contoh penggunaanya sebagai berikut :
<A href="#MATEMATIKA">MATEMATIKA</A> akan menuju ke Matematika <A name="MATEMATIKA">MATEMATIKA</A>

11 HTML Links - The target Attribute
Definisi dan Penggunaan Atribut target menentukan terget/ tempat untuk membuka halaman web, apakah di halaman yang sama atau di halaman baru sehingga halaman sebelumnya tidak tertutup. Syntax: <a target="_blank|_self|_parent|_top">

12 NILAI KETERANGAN _blank Membuka link dokumen Web di jendela baru atau tab baru (halaman baru) _self Membuka link dokumen web dalam halaman yang sama seperti (ini adalah default) _parent Membuka link dokumen web dalam rangka induk _top Membuka link dokumen web dengan full screen/ halaman penuh framename Membuka link dokumen web di dalam frame

13 Contoh: <html> <body> <b>link ini akan membawa kita ke halaman atau tab baru</b> <br> <a href= " target="_blank"> web sekolah harapan</a><br> <b>link ini akan tetap di halam ini atau tidak berpindah ke halam baru</b><br> <a href= " target="_self"> web sekolah harapan</a><br> </body> </html>

14 <html> <head> <title>hyperlink</title> </head> <body> <p>Aku sekarang sedang membuat hyperlink</p> Jika anda ingin mengunjungi Microsoft <a href=" disini</a> <br> <a href=" ini</a> akan membawa anda ke Yahoo.com <p><b>Untuk membuat hyperlink url agar dibuka pada jendela browser yang sama:</b> <p><a href=" target="_self"> ini web harapan</a> silahkan di kunjungi. <p><b>Untuk membuat hyperlink url agar dibuka pada jendela browser yang baru:</b> <p><a href=" target="_blank">Website Musik</a> <p>Agar hyperlink tidak bergaris bawah:<p> <a href=" target="_blank" style="text-decoration: none">Website Musik</a> </body> </html>


Download ppt "HTML (Hypertext Markup Language)"

Presentasi serupa


Iklan oleh Google