Kata yang di-click Kata yang dituju Link = Alamat URL atau nama file dan/atau acuan yang dituju Acuan = Kata sembarang sebagai penanda (bookmark) membentuk link ke URL/file/bagian dokumen lain. Ada 3 Jenis Link : 1. Link Absolut : Link yang menujuk ke halaman dari situs web lain. This Test is Displayed 2. Link Relatif : Link yang tujuannya mengarah ke dokumen-dokumen lain yang masih berada didalam situs web yang sama. Home 3. Link dalam dokumen yang sama : Link yang dapat berperan untuk mengarahkan ke bagian teks atau gambar tertentu yang masih berada dalam satu dokumen yang sama. Menuju Bab 2 ">

Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

HTML (Hypertext Markup Language) 2

Presentasi serupa


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

1 HTML (Hypertext Markup Language) 2

2 Tag Link (Anchor) <a href="Link">Kata yang di-click</a>
<a name="#Acuan">Kata yang dituju</a> Link = Alamat URL atau nama file dan/atau acuan yang dituju Acuan = Kata sembarang sebagai penanda (bookmark) membentuk link ke URL/file/bagian dokumen lain. Ada 3 Jenis Link : 1. Link Absolut : Link yang menujuk ke halaman dari situs web lain. <a href =“http://www.microsoft.com”>This Test is Displayed</a> 2. Link Relatif : Link yang tujuannya mengarah ke dokumen-dokumen lain yang masih berada didalam situs web yang sama. <a href=“Index.html”>Home</a> 3. Link dalam dokumen yang sama : Link yang dapat berperan untuk mengarahkan ke bagian teks atau gambar tertentu yang masih berada dalam satu dokumen yang sama. <a name=“Bab2”>Menuju Bab 2 </a>

3 Contoh Link Relatif File : Dokumen_1.html <html> <head>
<title>Link</ title> </head> <body> <h2>Demo Membuat Link Relatif</h2> <h3><u>Dokumen 1</u></h3> <p>Klik Link di bawah ini untuk melihat isi halaman web pada Dokumen_2.html </ p> <p><a href=“Dokumen_2.html”>Lihat Dokumen 2 </a></p> </body> </html>

4 Lanjutan ….. File : Dokumen_2.html <html> <head>
< title>Link</ title> </ head> <body> <h2>Demo Membuat Link</h2> <h3><u>Dokumen 2</u></h3> <p>Ini adalah isi halaman yang terdapat pada dokumen 2, untuk kembali ke Halama 1, silahkan klik Link di bawah ini </p> <p><a href=“dokumen_1.html”>Kembali ke Halaman 1</a></p> </ body> </ html>

5 Contoh Link Absolut <html> <head>
<title>Link</ title> </ head> <body> <h2>Demo Membuat Link Absolut</ h2> <p>Pilih Situs Favorit Anda :</ p> <p> <a href=“http://www.detik.com” style="text-decoration:none">Detik</a> <a href=“http://www.kompas.com” style="text-decoration:none">Kompas</a> <a href=“http://yahoo.com” style="text-decoration:none">Yahoo</a></p> </ body> </ html>

6 Contoh Link dalam Dokumen Yang sama
<html> <head> <title>Link</ title> </ head> <body> <h2> Demo Membuat Link dalam Dokumen Yang sama</h2> <a name=“atas”></a> <p>HTML adalah bahasa dasar pembangunan web. Sebelum mulai belajar web programming, anda dituntut untuk menguasai HTML terlebih dahulu. Dan di bawah ini adalah panduan bahasa HTML yang kami susun mulai dasar hingga tingkatan yang lebih rumit. Mudah-mudahan bermanfaat bagi anda.</p> <p>Pilih salah satu judul materi berikut untuk mempelajari pemrograman HTML : </p> <a href=“#gambar”>Memasukan Gambar</a><br> <a href= “#tabel”>Membuat Tabel</a><br> <a href=“#heading>Macam-Macam Heading</a><br>

7 Lanjutan ….. <a name=“gambar”></a> <h3>Memasukan Gambar</h3> <p>Cara memasukan Gambar, Cara memasukan Gambar, Cara memasukan Gambar, Cara memasukan Gambar, Cara memasukan Gambar, Cara memasukan Gambar, <br></p> <a href=“#atas>Kembali Keatas</a> <a name=“tabel”></a> <h3>Membuat Tabel</h3> <p>Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel. <br></p> <a name=“Heading”></a> <h3>Macam-Macam Heading</h3> <p>Macam-Macam Heading, Macam-Macam Heading, Macam-Macam Heading, Macam-Macam Heading, Macam-Macam Heading, Macam-Macam Heading, Macam-Macam Heading.<br></p> </body> </html>

8 Membuka Link untuk Window Baru
<html> <head> <title>Link</title> </head> <body> <a href="http://yahoo.com" target="_blank">Yahoo</a> <p> Jika anda menentukan atribut link to "_blank", link akan dibuka pada window baru.</p> </body> </html>

9 Menjadikan Gambar Sebagai Link
<html> <head> <title>Link</title> </head> <body> <h2>Demo Membuat Link Berupa Gambar</h2> <p> Klik gambar dibawah ini untuk melihat informasi detail :</p> <a href="http://www.sony.co.id"><img src="sony-vaio.jpg"></a> </body> </html>

10 Tugas Membuat Link Buat Coding HTML yang mengandung unsur :
1. link Relatif, 2. link Absolut, 3. link dalam dokumen yang sama, 4. link untuk window yang baru 5. link dengan menggunakan gambar. Isi dari halaman bebas dan harus susai dengan format yang terdapat dalam contoh di bawah ini. Keseluruhan terdapat 6 file yang harus terhubung (Link) dengan format utama. Buat secreative mungkin.

11 Format Halaman Utama

12 Format Link Absolut

13 Format Link Relatif

14 Format Link Dokumen Yang Sama

15 Format Window Baru

16 Format Link Menggunakan Gambar


Download ppt "HTML (Hypertext Markup Language) 2"

Presentasi serupa


Iklan oleh Google