Modul 2 - HTML Lanjutan - Art Lanz

MODUL II

HTML LANJUTAN
(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

1. Post Test Pemograman WEB 1

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

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>
 
 <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 :

Salam Mizutochi S21 Guys sekian dari gw, semoga Bermanfaat Terserah loe mau Copas mau Edit yang penting Belajar Otodidak yang b ener ya guys, jangan Lupa juga berdo'a dulu sebelum kau Membuat HTML ini karena di Jamin 100% Otak loe Ng Hang ..

Terima Kasih, Wassalamu'alaikum Warahmatullahi Wabarakatuh