-->
/

HTML Lanjutan (Link, List, dan Tag HTML Untuk Tabel)

Add Comment Edit

LAPORAN PRAKTIKUM
PEMROGRAMAN WEB 1
MODUL II
“HTML Lanjutan (Link, List, dan Tag HTML Untuk Tabel)”
Diajukan untuk memenuhi salah satu Mata Kuliah Praktikum Pemrograman Web 1
Dosen Pengampu : Rio Andriyat Krisdiawan, S.Kom., M.Kom.





Disusun Oleh
Reza Adhicahyasmara
20160910092
Sistem Informasi 2016 C



FAKULTAS ILMU KOMPUTER
PROGRAM STUDI SISTEM INFORMASI
UNIVERSITAS KUNINGAN
2018





KATA PENGANTAR

 Puji syukur penulis ucapkan atas kehadirat Allah SWT, karena rahmat dan karunia-Nya penulis diberi kesempatan untuk menyelesaikan Laporan Praktikum Pemrograman Web 1. Shalawat dan salam kita hanturkan kepada junjungan besar Nabi Muhammad SAW beserta keluarganya, sahabatnya, beserta pengikutnya hingga akhir zaman.

Penulis menyusun laporan ini dengan tema HTML Lanjutan (Link,List, dan Tag HTML Untuk Tabel). Laporan ini menjelaskan pembuatan link yang akan dikaitkan antar dokumen lainnya, dan cara pembuatan daftar menggunakan tabel yang disertai tag tabel.


 Tidak lupa juga saya ucapkan terima kasih kepada kedua orang tua kami masing-masing dan terima kasih kepada dosen Pemrograman Web 1 yaitu Rio Andriyat Krisdiawan S.Kom., M.Kom. yang telah membimbing penulis dalam menyusun laporan.

Penulis menyadari bahwa dalam laporan ini masih jauh dari kata sempurna, untuk itu penulis sangat mengharapkan kritik dan saran yang sifatnya membangun guna sempurnanya laporan ini.


Kuningan, 18 Maret 2018
                                                                                                                                         

                                                                                                                Penulis.





DAFTAR ISI

Kata Pengantar
Daftar Isi

BAB I PENDAHULUAN
1.1 Maksud dan Tujuan
1.2 Landasan Teori

BAB II PEMBAHASAN
2.1 Post Test
2.2 Tugas

BAB III PENUTUP
3.1 Kesimpulan

DAFTAR PUSTAKA





BAB I
PENDAHULUAN

1.1 Maksud dan Tujuan
  1. Mampu memahami dan menjelaskan link antar dokumen.
  2. Mampu membuat daftar dengan menggunakan tag HTML.
  3. Mampu membuat halaman web dengan menyertakan tabel menggunakan tag tabel.


1.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 Microsoft:

<a href = “http ://www.microsoft. com” >This text is dis- played</a>

Ada tiga jenis link:
  1. Link Relatif.
  2. Link Absolut.
  3. Link dalam Dokumen yang Sama.
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>

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>
 
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
List dengan nomor adalah model daftar yang setiap itemnya diberi nomor. Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu:


Tag
Atribut
Value
Keterangan
<UL>
Type
·         Square
·         Disc
·         Circle
Bulat kotak
Bulat titik
Bulat lingkaran
<OL>
Type
·         I
·         i
·         A
·         a
Huruf besar romawi
Huruf kecil romawi
Huruf besar
Huruf kecil
<OL>
Start
n
Nilai awal penomoran


Tabel HTML
Untuk dapat membuat tabel dapat menggunakan tag HTML yang dimulai dengan tag <table> dan diakhiri dengan tag </table>, yang kemudian diikuti dengan tag <tr> untuk baris dan <td> untuk membuat sel. Atribut dalam <table> yaitu :




Atribut
Keterangan
Align
Untuk meratakan tabel seperti, left, center, right, atau justify.
Border
Untuk mengatur ketebaln garis pembatas antar sel-sel dalam tabel.
Width
Untuk menentukan lebar tabel.
Cellspacing
Untuk menyatakan jarak (spasi) antar satu cell dengan lainnya serta sel dengan batas tabel.
Cellpanding
Untuk menyatakan jarak (spasi) antar isi sel dengan batas border.
Bgcolor
Menunjukan warna background untuk semua cell pada tabel.
Bordercolor
Untuk membuat warna pada garis / border
Colspan
Jumlah kolom sel diperlebar
Rowspan
Jumlah baris sel diperlebar
Nonwrap
Matikan wrapping dalam sel
 






BAB II
PEMBAHASAN

2.1 Post Test dan Tugas


Post Test
Buat halaman website untuk menampilkan daftar nilai mahasiswa,dengan menggunakan tabel HTML!

  
<html>
<head>
  <title>Post Test 1</title>
 </head>
 <body>
  <table>
   <img align="left" width ="130" heigt="130" src="uniku.jpg"></img>
   <center><h2>UNIVERSITAS KUNINGAN</h2>
   <h3>FAKULTAS ILMU KOMPUTER UNIVERSITAS KUNINGAN</h3>
   <h3>Jalan Tjut Nyak Dhien No.36 Kuningan</h3></td>
  </table>
 <hr size="5" color="blue">
 </center>
  <center>
   <table border="1">
   <caption><h2><b>DAFTAR NILAI PEMROGRAMAN WEB 1</b></h2></caption>
   <tr bgcolor="blue">
    <th rowspan="2">No.</th>
    <th rowspan="2">NIM</th>
    <th colspan="3">Nilai
    <th rowspan="2">Rata-Rata</th>
    <th rowspan="2">NA</th></tr>
    
   <tr bgcolor="blue">
    <th>Tugas</th>
    <th>UTS</th>
    <th>UAS</th>
    </tr>

   <tr><td>1</td>
    <td>201501</td>
    <td>80</td>
    <td>70</td>
    <td>70</td>
    <td>73.3</td>
    <td>B</td></tr>
    
   <tr><td>2</td>
    <td>201502</td>
    <td>90</td>
    <td>70</td>
    <td>70</td>
    <td>76.7</td>
    <td>B</td></tr>
   <tr><td>3</td>
    <td>201501</td>
    <td>90</td>
    <td>70</td>
    <td>80</td>
    <td>80</td>
    <td>AB</td></tr>
   </table>
  </center>
 </body></body>
</html>

Hasil tampilan


Pertanyaan dan Tugas
1. Jelaskan perbedaan tabel layout dan tabel konvensional pada HTML!
2. Buatkan halaman website dengan tampilan hyperlink menggunakan tabel!

Jawaban
1.Dalam HTML dikenal ada dua jenis tabel yaitu tabel konvensional dan tabel layout. Tabel konvensional merupakan tabel yang biasa kita lihat dalam kehidupan sehari-hari, misalnya tabel tentang daftar karyawan, daftar mahasiswa dan lain-lain. Tabel layout yaitu tabel yang digunakan untuk melakukan pengaturan tata letak tampilan di dalam monitor sehingga script akan terlihat menarik.

2. Halaman website

Halaman Utama

<html>
 <head>
  <title>Post Test 1</title>
 </head>
 <body>
  <table>
   <img align="left" width ="130" heigt="130" src="uniku.jpg"></img>
   <center><h2>UNIVERSITAS KUNINGAN</h2>
   <h3>FAKULTAS ILMU KOMPUTER UNIVERSITAS KUNINGAN</h3>
   <h3>Jalan Tjut Nyak Dhien No.36 Kuningan</h3></td>
  </table>
 <hr size="5" color="blue">
 </center>
  <center>
   <table border="1">
   <tr>
    <td rowspan="2" width="400"><a href ="">Beranda</a></br>
    <a href ="biodata.html">Biodata</a></br>
    <a href ="nilai.html">Nilai</a></br></td>
    <td rowspan="1" align="center" width="1000" height="450"><font size="10">Belajar Hyperlink...</font></td>    
   <tr>
    <td colspan="1" align="center">Reza Adhicahyasmara SIC2016</td>
   </tr>
   </table>
  </center>
 </body>
</html>

Hasil Tampilan


 
Link Biodata

<html>
 <head>
  <title>Post Test 1</title>
 </head>
 <body>
 <center>
  <table>
   <img align="left" width ="130" heigt="130" src="uniku.jpg"></img>
   <center><h2>UNIVERSITAS KUNINGAN</h2>
   <h3>FAKULTAS ILMU KOMPUTER UNIVERSITAS KUNINGAN</h3>
   <h3>Jalan Tjut Nyak Dhien No.36 Kuningan</h3></td>
  </table>
  <hr size="5" color="blue">
 </center>
 <h1>DAFTAR RIWAYAT HIDUP</h1></br>
  <pre>
NIK   : 20160910092
Nama   : Reza Adhicahyasmara
Tempat, Tanggal Lahir : Kuningan, 19 Agustus 1993
Alamat   : Jalan Otista No. 99 Kab. Kuningan
Jenis Kelamin  : Laki-laki
Agama   : Islam
No.HP   : 089640447447
Email   : kezotbily@gmail.com
 
  </pre>
  <a href ="Tugas.html">Kembali ke Beranda</a></br>
 </body>
</html>

Hasil Tampilan


Link Nilai

<html>
 <head>
  <title>Post Test 1</title>
 </head>
 <body>
 <center>
  <table>
   <img align="left" width ="130" heigt="130" src="uniku.jpg"></img>
   <center><h2>UNIVERSITAS KUNINGAN</h2>
   <h3>FAKULTAS ILMU KOMPUTER UNIVERSITAS KUNINGAN</h3>
   <h3>Jalan Tjut Nyak Dhien No.36 Kuningan</h3></td>
  </table>
  <hr size="5" color="blue">
 </center>
  <center>
   <table border="1">
   <caption><h2><b>DAFTAR NILAI PEMROGRAMAN WEB 1</b></h2></caption>
   <tr bgcolor="blue">
    <th rowspan="2">No.</th>
    <th rowspan="2">NIM</th>
    <th colspan="3">Nilai
    <th rowspan="2">Rata-Rata</th>
    <th rowspan="2">NA</th></tr>
    
   <tr bgcolor="blue">
    <th>Tugas</th>
    <th>UTS</th>
    <th>UAS</th>
    </tr>

   <tr><td>1</td>
    <td>201501</td>
    <td>80</td>
    <td>70</td>
    <td>70</td>
    <td>73.3</td>
    <td>B</td></tr>
    
   <tr><td>2</td>
    <td>201502</td>
    <td>90</td>
    <td>70</td>
    <td>70</td>
    <td>76.7</td>
    <td>B</td></tr>
   <tr><td>3</td>
    <td>201501</td>
    <td>90</td>
    <td>70</td>
    <td>80</td>
    <td>80</td>
    <td>AB</td></tr>
   </table>
  </center>
  <br><br><a href ="Tugas.html">Kembali ke Beranda</a></br>
 </body>
</html>


Hasil tampilan









BAB III
PENUTUP

3.1 Kesimpulan
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Tabel dibuat dengan menggunakan tag <table>. Sebuah tabel dibagi menjadi baris-baris, dan tiap baris dibagi ke dalam cell-cell.

Baris dibuat dengan tag <tr>, dan cell-cell yang akan membentuk kolom dibuat dengan tag <td>.Dalam konteks HTML, table mempunyai peranan yang sangat penting. Selain digunakan untuk menampilkan tabel berisi data, table juga digunakan untuk menyusun teks dalam kolom, ataupun membuat laporan terstruktur lainnya.

Seringkali table digunakan dalam halaman web untuk memperindah tampilan ataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca. Melihat begitu banyaknya manfaat yang didapat dengan menggunakan tabel ini maka tabel mulai diterapkan pemakaiannyaoleh HTML dan kemudian didukung oleh Nescape (browser pertama yang mempelopori penggunaan table).




DFTAR PUSTAKA
 
Modul Praktikum Pemrograman Web 1 (2018), Kuningan, .Kom-UNIKU
http://www.pro.co.id/tabel-html-pengertian-elemen-atribut-tabel-dan-tutorial-membuat-tabel-html/

Berlangganan update artikel terbaru via email:

0 Response to "HTML Lanjutan (Link, List, dan Tag HTML Untuk Tabel)"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel