MODUL II
HTML LANJUTAN
(Link, List, dan Tag HTML Untuk Tabel)
(Link, List, dan Tag HTML Untuk Tabel)
1. Tujuan
- Mampu memahami dan menjelaskan link antar dokumen.
- Mampu membuat daftar dengan menggunakan tag HTML.
- Mampu membuat halaman web dengan menyertakan tabel menggunakan tag tabel.
2. Landasan Teori
Link HTML
HTML menggunakan tag <a> untuk membuat suatu link kepada dokumen lain dalam web. Sintaks dari penghubungan dalam HTML adalah dengan menggunakan tag <a>, atribut href digunakan untuk mendefinisikan lokasi link.
Anchor berikut menunjuk Ke Blog Saya seperti Art Lanz ( Lanz-Balon.blogspot.co.id) :
<a href = “https://lan-balon.blogspot.co.id/” >Lanz Balon</a>
Ada tiga jenis link:
- Link Relatif.
- Link Absolut.
- Link dalam Dokumen yang Sama.
1. Link Relatif
Dibuat apabila membuat suatu link pada page ke page lain pada komputer yang sama, tidak memerlukan menggunakan alamat Internet yang lengkap. Jika dua page pada direktori yang sama, Anda dapat menuliskan nama file html seperti berikut:
<a href=”file_2.html”>Berikutnya</a>
2. Link Absolut
Dibuat apabila Anda membuat link ke page web lain yang berada pada web site lain di Internet. Dalam hal ini Anda harus menuliskan alamat Internet secara lengkap. Berikut adalah contohnya:
<a href=http://kakilima.piksi.itb.ac.id/>Pusat engine Internet lokal </a>
3. Link ke Bagian Lain dalam Dokumen
Link jenis ini dibuat apabila untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antarbagian, dengan menAndai setiap bagian tersebut dengan memberinya nama. Sehingga pada beberapa tempat di dalam dokumen akan ada bagian yang bernama, dan di bagian lainnya dapat diletakkan link untuk menuju bagian-bagian tersebut.
Umumnya teknik ini diimplementasi pada dokumen-dokumen yang menampilkan daftar isi dokumen tersebut, kemudian pada daftar ini tersebut dimungkinkan untuk diklik langsung menuju ke isinya secara langsung.
Memberi nama suatu bagian dalam dokumen
letakkan kursor pada baris atau teks yang menjadi awal dari bagian tersebut
sisipkan nama bagian tersebut dengan: <a name= ”namabagian”>
Membuat link yang menuju pada bagian dokumen yang sama dengan cara yang sama seperti link absolut atau relatif, hanya saja nama dokumen dalam link diganti dengan nama bagian dokumen dengan sebelum nama tersebut ditambah dengan #.
Berikut adalah contoh memberi link tersebut:
<a href=”#namabagian”>Bagian tentang link</a>
Tanda # menunjukkan bahwa link tersebut ditujukan kepada link dalam dokumen yang sama.
List HTML
List merupakan bentuk yang umum yang biasa kita gunakan untuk immguraikan daftar sesuatu, misalnya jenis-jenis list dalam HTML:
- list dengan nomor
- list tanpa nomor
- list definisi
Syntaxnya :
<html>
<head><br>
<title> Art Lanz</title>
</head>
<body>
<table border="0">
<tr><td><img width="200px" src="Kuda.jpg"></td>
<td width="1200px" align="center"><font size="10"><b>PT. Lanz Loverz<b></font><br>
<font size="5">Dimana Nongkrongnya para The Budjang</font><br><br>
Jl. Purwasari No.10 Purwasari Garawangi</td>
</tr>
<tr>
</tr>
</table>
<hr size="4" color="black"><br>
<table border="1" >
<tr>
<td rowspan="2" width="400px" Height="350px">
<a href="Biodata.html" align="top left">Daftar Riwayat Hidup</a><br>
<a href="Nilai.html">Nilai Ane Gan</a><br>
<a href="3">Yui</a></td>
<td width="1000px" align="center"><font size="10"><b>HyperLink ... !!!<b></font><br>
<font size="5">Searching Art Lanz - Nalzloverz di Google ya Guys</font><br><br>
</tr>
<tr>
<td><center><font size="2">Copyright © 2018 Art Lanz - Nalzloverz</font></center></td>
</tr>
</table>
</body>
</html>
Hasil Runningnya :
Keterangan :
Gw di sini akan melanjutkan Lanjutan dari Minggu Kmaren yaitu dari Modul 1 dasar dari HTML guys, sekarang saya akan menggunakan Tabel untuk membagi sebuah tampilan yang seperti kalian liat di atas, di gunakan untuk memperindah atau membuat Tampilan WEB Jadi terstruktur dan Rapih ..
<table>
<tr>
<td> Blaaa blaaa blaaa ....
</td>
</tr>
</tabel>
Disini juga Menggunakan Script <a href="bla.html"> di gunakan untuk membuat Link Lanjutan supaya lebih mudah Apabila kalian menuju halaman yang anda inginkan dan tutup dengan </a> mudah kan ..
<a href ="Link.html"> Isikan Tagnya </a>
A. Link dari Biodata
Gw akan Membuat Tampilan dari Link Biodata Gw ya Guys ..
Syntaxnya :
<html>
<head>
<title>Tugas </title>
</head>
<body>
<center>
<table border="0">
<tr><td><img width="200px" src="Kuda.jpg"></td>
<td width="1200px" align="center"><font size="10"><b>PT. Lanz Loverz<b></font><br>
<font size="5">Dimana Nongkrongnya para The Budjang</font><br><br>
Jl. Purwasari No.10 Purwasari Garawangi</td>
</tr>
<tr>
</tr>
</table>
<hr size="5" color="blue">
</center>
<h1>DAFTAR RIWAYAT HIDUP</h1>
<pre>
NIK : 20160910073
Nama : Yuki Lanz Mizutochi S21
Tempat, Tanggal Lahir : Kuningan, 10 Agustus 1996
Alamat : Jalan Purwasari No. 10 Garawangi Kuningan
Jenis Kelamin : Man Of The Match
Agama : Islam
No.HP : 08969075xxxx
Email : Silnet2one@gmail.com
</pre>
<a href ="Modul 2 Tugas 2.html">Kembali ke Beranda</a></br>
</body>
</html>
Hasil Runningnya :
B. Link dari Nilai Gw
Sekarang gw membuat Link dari Nilai Gw nya Guys
<html>
<head><br>
<title> Art Lanz</title>
</head>
<body>
<table border="0">
<tr><td><img width="200px" src="Kuda.jpg"></td>
<td width="1200px" align="center"><font size="10"><b>PT. Lanz Loverz<b></font><br>
<font size="5">Dimana Nongkrongnya para The Budjang</font><br><br>
Jl. Purwasari No.10 Purwasari Garawangi</td>
</tr>
<tr>
</tr>
</table>
<hr size="4" color="black"><br>
<font face="Time New Roman" size="5" color="Brown"><center><b>DAFTAR NILAI THE BUDJANG</b></font><br><br>
<table border="1">
<tr bgcolor="red">
<td rowspan="2"><center>Nomor</center></td>
<td rowspan="2"><center>NIM</center></td>
<td colspan="3"><center>Nilai</center></td>
<td rowspan="2"><center>Rata-Rata</center></td>
<td rowspan="2"><center>NA</center></td>
</tr>
<tr>
<td bgcolor="red"><center>Tugas</center></td>
<td bgcolor="red"><center>UTS</center></td>
<td bgcolor="red"><center>UAS</center></td>
</tr>
<tr>
<td><center>1.</center></td>
<td>20160910073</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>AB</td>
</tr>
<tr>
<td><center>2.</center></td>
<td>20160910074</td>
<td>80</td>
<td>90</td>
<td>80</td>
<td>83.3</td>
<td>A</td>
</tr>
<tr>
<td><center>3.</center></td>
<td>20160910075</td>
<td>80</td>
<td>90</td>
<td>90</td>
<td>86.6</td>
<td>A</td>
</tr>
</table>
</center>
<br>
<a href ="Modul 2 Tugas 2.html">Kembali ke Beranda</a></br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center><font size="2">Copyright © 2018 Art Lanz - Nalzloverz</font></center>
</body>
</html>
Hasil Runningnya :
Terima Kasih, Wassalamu'alaikum Warahmatullahi Wabarakatuh
