Cara Membuat HTML Dasar Lanjutan Berikut Contoh


Makalah Pemograan Web 1 (HTML Dasar Lanjutan)

Diajukan untuk Memenuhi salah satu mata kuliah Praktikum Pemograman Web 1

Dosen Pengampu: Rio Andriyat, M.Kom

Disusun Oleh :
   
Cecep Pauji Ramadhan
    20160910077
Sistem Informasi 2016 C



FAKULTAS ILMU KOMPUTER
PROGRAM STUDI SISTEM INFORMASI
UNIVERSITAS KUNINGAN
2018


MODUL II

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



A.   Maksud dan Tujuan

1.   Mahasiswa mampu memahami dan menjelaskan link antar dokumen.

2.   Mahasiswa mampu membuat daftar dengan menggunakan tag HTML.

3.   Mahasiswa mampu membuat halaman web dengan menyertakan tabel menggunakan tag Table.


B.  Dasar Teori

1.   Link

Link (sebutan singkat dari hyperlink text) adalah suatu metode yang digunakan dalam HTML untuk  membuat  hubungan  antar  halaman  yang terdapat  dalam suatu situs web.
Bentuk umum :

<a href=”dokumen lain”>teks link</a>


2.   List



List adalah bagian teks di dalam dokumen yang berisi daftar item dari


suatu kelompok atau grup tertentu. HTML menyediakan beberapa tag khusus yan dapat digunakan untuk menangani kasus pembuatan list dengan beranek ragam bentuk, bahkan daftar bersarang (nested list). Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu :
a.   Daftar Tidak Terurut <UL>

b.   Daftar Terurut <OL>

Tag
Atribut
Value
Keterangan


<UL>


Type
-    Square
-    Disc
-    Circle
Bulat kotak
Bulat titik
Bulat lingkaran


<OL>


Tipe
-    I
-    i
-    A
-    a
Huruf besar romawi Huruf kecil romawiHuruf besar
Huruf kecil

<OL>

start

n

Nilai awal penomoran
c.   Daftar Definisi

Tag yang digunakan yaitu <DL> dan tag <DD> sebagai penggati tag

<LI>

3.   Tabel





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 membuat baris   dan <td> untuk membuat sel. Atribut
dalam tag <table> yaitu :

Atribut
Keterangan
Align
Untuk meratakan tabel seperti, left, center, right, atau justify.
Border
Untuk  mengatur  ketebalan  garis  pembatas  antar  sel-sel  dalam tabel.
Width
Untuk menentukan lebar tabel
Cellspacing
Untuk menyatakan jarak (spasi) antar satu sel dengan lainnya serta sel dengan batas tabel
Cellpading
Untuk menyatakan jarak (spasi) antara isi sel dengan batas sel

(border)
Bgcolor
Menunjukkan warna background untuk semua cell pada tabel
Bordercolor
Untuk membuat warna pada garis/border



  • Post Test

Syntax :

<html>
<head>
<title>Membuat Tabel</title>
</head>
<body>
<table>
<tr>
<td width='45%'><img src="ccc.png"></td>
<td><center><h1>UNIVERSITAS KUINGAN</h1>
<h2>FAKULTAS ILMU KOMPUTER UNIVERSITAS KUINGAN</h2>
<h3>Tjut Nyak Dhien No.36 Kuningan</h3></center>
</td>
 </tr>
 </table>
 <hr size="5" color="green">
<CENTER>
<h1>DAFTAR NILAI PEMROGRAMAN WEB1</h1>
<table border= "1">
<caption>Daftar Nilai Mahasiswa</caption>
<tr bgcolor="blue">
<td rowspan="2" align="center">No.</td>
<td rowspan="2" align="center">NIM</td>
<td colspan="3" align="center">Nilai</td>

<td rowspan="2" align="center">Rata-Rata</td>
<td rowspan="2" align="center">NA</td></tr>

<tr bgcolor="blue">
<td>Tugas</td>
<td>UTS</td>
<td>UAS</td>
</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>73,3</td>
<td>B</td>
</tr>
<tr>
<td>3</td>
<td>201503</td>
<td>90</td>
<td>80</td>
<td>80</td>
<td>80</td>
<td>AB</td>
</tr>
</table>
</body>
</CENTER>
</html>


Hasilnya :



Penjelasan :

<html>  Mendefinisikan root dari suatu dokumen HTML
<head> Digunakan untuk memberikan informasi tentang dokumen tersebut
<title>   Membuat judul untuk dokumen HTML
<body> Mendefinisikan body/isi dokumen HTML, berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan di web browsernya. Isi dokumen tersebut dapat berupa teks, gambar, animas, link dan seterusnya
<table> Membuat tabel
<tr>    Membuat baris di dalam sebuah tabel
<td>   Mendefinisikan sel di dalam sebuah tabel
<img /> Berfungsi untuk menampilkan gambar pada dokumen HTML
<center> Untuk perataan tengah terhadap teks atau gambar
<h1> to <h6> Digunakan untuk menunjukkan awal dari suatu header/judul dari dokumen HTML tersebut.
Atribut border digunakan untuk mengatur ketebalan dari garis tepi (border) dari tabel. Jika atribut ini tidak ditulis, maka web browser akan menampilkan tabel tanpa garis tepi.
bgcolor digunakan untuk menampilkan warna background
Colspan dan rowspan adalah html attribute yang digunakan untuk memperlebar atau menggabungkan beberapa kolom atau row menjadi satu, sehingga satu unit kolom atau row ini menjadi lebih lebar. Colspan adalah kependekan dari “column span” yang bisa mengartikan sebagai “berapa kotak kesamping” sedangkan rowspan mengartikan “berapa kotak kebawah”.
Attribute colspan diletakkan dalam tag <td> dan anda bisa mengatur “value”nya berapa kotak yang akan di span. Berikut saya kasih contohnya:
<center><table border=”1″>
            <tr bgcolor=”red”>                                             
<td colspan=”3″align=”center”>Nilai</td>                                 
</tr> <tr bgcolor=”red”>                       
<td align=”center”>UTS</td>                       
<td align=”center”>UAS</td>                       
<td align=”center”>Rata-rata</td>       
  • Tugas


Syntax :
<html>
<head>
<title>Membuat Tabel</title>
</head>
<body>
<table>
<tr>
<td width='45%'><img src="ccc.png"></td>
<td><center><h1>UNIVERSITAS KUINGAN</h1>
<h2>FAKULTAS ILMU KOMPUTER UNIVERSITAS KUINGAN</h2>
<h3>Tjut Nyak Dhien No.36 Kuningan</h3></center>
</td>
 </tr>
 </table>
 <hr size="5" color="green">
 <table border="1">
 <td rowspan="2" width="500px" height="400px" align="left" valign="top"><a href="cnth form.html">Beranda<br>
 <a href="cnth form.html">Biodata<br><a href="cnth form.html">Nilai</td>
 <td width="700px" height="350px" align="center"><h1>Belajar Hyperlink yaa...</h1></td>
 <tr>
 <td height="10" align="center">Rizky Wardana</td>
</tr>
</table>
</body>
</html>

Hasilnya :



Penjelasan :

Hasil Diatas tidak jauh beda dengan tugas posttest yg di atas, yang membedakan
nya adalah penggunaan tabel dengan berukuran besar dengan ukuran nya menggunakan "PX".
Dan Pada tabel yang pertama ada sebuah sub menu yg diantara ya yaitu, Beranda, Biodata, dan nilai. submenu tersebu menggunakan hyperlink dengan syntax " <td rowspan="2" width="500px" height="400px" align="left" valign="top"><a href="cnth form.html">Beranda<br>
 <a href="cnth form.html">Biodata<br><a href="cnth form.html">Nilai</td>
 <td width="700px" height="350px" align="center"><h1>Belajar Hyperlink</h1></td>" syntax yg bisa membuat hyperling adalah "<a href="object.html">. Maksud hyperlink adalah memanggil file lain yang dimana file nya harus bertipe ".html" dangan file yg untuk di panggil tersebut harus satu folder dengan file utama.

Juni 29, 2018 | |

 

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Cari Blog Ini
Diberdayakan oleh Blogger.