HTML Tabel

<html>
<head>
<title> HTML </title>
</head>
<body>
Kami sedang mulai belajar HTML
</body>
</html>

Format:
<! -- >
Fungsi:
 Memberi nama aplikasi
 Mendeskripsikan tujuan pengkodean tertentu di
dalam
file
 Memberi nama pengarang
 Memberi tanggal pembuatan
 Memberi nomer versi
 Memberi informasi hak cipta

 Untuk judul atau sub judul dalam dokumen
HTML
<h1 [align=”left”|”center”|”right”]> . . .
</h1>
</h2>
..
</h6>

Script:
<html>
<head>
<title> Heading </title>
</head>
<body>
<h1 align="center">Heading 1: HTML</h1>
</body>
</html>

 Paragraf yang dapat diatur perataannya (kiri, tengah, kanan):
<p [align=”left”|”center”|”right”]> . . . </p>
Script:
<html>
<head>
<title> Paragraf </title>
</head>
<body>
<h2 align="center">Materi HTML</h2>
<p align="right">Kami sedang mulai belajar HTML </p>
<p align="left">Saat ini membahas materi Dasar-dasar HTML
</p>
</body>
</html>

Script:
<html>
<head>
<title> Format Dokumen </title>
</head>
<body>
<p>Contoh <b>Teks Bold</b></p>
<p>Contoh <i>Teks Italic</i></p>
<p>Contoh <sup>Teks superscripted</sup></p>
<p>Contoh <sub>Teks subscripted</sub></p>
<p>Contoh <del>Teks struckthrough</del></p>
<p>Contoh <code>Teks Computer Code</code></p>
</body>
</html>

 Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML:
<pre> . . . </pre>
Script:
<html>
<head>
<title>Pre-Format</title>
</head>
<body>
<pre>
Saya sedang
Bel ajar HTML
Untuk mem buat aplikasi
berbasis web
</pre>
</body>
</html>

 Untuk menulis teks pada baris berikutnya:
<br>
Script:
<html>
<head>
<title>Mengganti Baris</title>
</head>
<body>
Muhammad Yusuf<br/>
Jurusan Teknik Informatika<br/>
Fakultas Teknik<br/>
Universitas Trunojoyo <br/>
</body>
</html>

 Garis horisontal untuk memisahkan teks dengan teks
lain.
<hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”]
[noshade]> </hr>
Script:
<html>
<head>
<title>Membuat Garis Horisontal</title>
</head>
<body>
Berikut ini penggunaan
satu garis horisontal: <hr/>
dan penggunaan dua garis
horisontal: <hr/> <hr />
</body>
</html>

 Ukuran font: <font size=“n”> . . . </font>
 Jenis font: <font size=“n” face=“jenis_font”> . . . </font>
 Warna font
<font size=“n” face=“jenis_font” color=“warna”> . . . </font>
Script:
<html>
<head>
<title>Memformat Font</title>
</head>
<body>
<font size=5 color="#FF00FF">
Teks berwarna hexcolor #FF00FF
</font><br/>
<font color="red">Teks berwarna
merah</font>
</body>
</html>

Format:
<a href=”address” > . . . </a>
 Link ke dokumen lain
<a href=”nama_dokumen” > . . . </a>
 Link ke bagian tertentu dalam dokumen yang sama
<a href=”#target” > . . . </a>
<a href=”target” > . . . </a>
 Link ke alamat URL atau WebSite
<a href=”alamat_URL” > . . . </a>
 Link ke alamat Email
<a href=”mailto:alamat_email” > . . . </a>
 Link File yang akan didownload
<a href=”nama_file” > . . . </a>

Script:
<html>
<head>
<title>Membuat link</title>
<head>
<body>
<p>Silahkan download <i>handout</i>
perkuliahan di <A href="
http://zheira83.wordpress.com">
blog </A></p>
</body>
</html>

Memuat gambar ke dalam halaman Web
<img src=”URL”|”name” height=”n” width=”n”
align=”top”|”center”|”bottom”] />
Relative Path:
 File gambar ada dalam direktori yg sama: ./
 File gambar ada dalam direktori sebelumnya: ../
Script:
<html>
<head>
<title> Insert Gambar</title>
</head>
<body>
<img src="./penguins.jpg"></br>
<b> Penguins</b>
</body>
</html>

Menggunakan warna
<body bgcolor=#nnnnnn> . . . </body>
Script:
<html>
<head>
<title> Penggunaan Latar
Belakang Warna </title>
</head>
<body bgcolor="pink">
Kami sedang mulai belajar
HTML
</body>
</html>

Menggunakan gambar
<body background=“nama_file_gambar”> . . . </body>
Script:
<html>
<head>
<title> Penggunaan Latar
Belakang Gambar </title>
</head>
<body
background="./Desert.jpg">
<p><h2
align="center">Kami
sedang mulai belajar
HTML</h2></p>
</body>
</html>

 <ul> - unordered list (daftar tdk bernomor);
bullet
<ul [type=“disc”|”square”|”circle”] > . . .
</ul>
 <ol> - ordered list; nomor
<ol [type=“1”|”a”|”A”|”I”|”i"] [start=“n”] > . . .
</ol>
 <dl> - definition list; dictionary
<dl> . . . </dl>
<dt> . . . </dt>
<dd> . . . [</dd>]

Script:
<html>
<head>
<title>Penggunaan List</title>
</head>
<body>
<h4>Istilah-istilah dalam HTML:</h4>
<ol>
<li><i>Tag</i></li>
<li><i>Element</i></li>
<li><i>Attribute</i></li>
</ol>
<h4>Contoh <i>tag</i>:</h4>
<ul type="square">
<li><i>Tag heading</i></li>
<li><i>Tag list</i></li>
</ul>
</body>
</html>

Fungsi:
 Menampilkan informasi secara terstruktur,
ringkas dan mudah dibaca
 Mengatur tampilan homepage agar lebih
menarik

 Tag yang diperlukan: <table>
 Atribut-atribut:

 Tag yang diperlukan:
- Membuat baris: <tr> (table row)
- Membuat kolom: <td> (table data)
Contoh:
<table border="1">
<tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel
2</td></tr>
<tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel
2</td></tr>
</table>

 Judul tabel: <caption>
 Judul baris/kolom: <th> (table header)
Contoh:
<table border="1">
<caption align="top"> <b> DAFTAR MAHASISWA </b>
</caption>
<tr><th>No</th><th>NPM</th><th>Nama</th></tr>
<tr><td>1</td><td>06.100.001</td><td>Amin A.
Angkasa</td></tr>
<tr><td>2</td><td>06.100.002</td><td>Beni B.
Bernardi</td></tr>
</table>

Atribut: width dan height
Nilai:
 ukuran % (max 100%)
 ukuran pixel
Contoh:
<table border="1" width=“50%”>
<caption align="top">
<b> DAFTAR MAHASISWA </b> </caption>
<tr><th>No</th>
<th>NPM</th>
<th>Nama</th></tr>
<tr><td width=“20”>1.</td>
<td width=“80” height=“50“>06.100.001</td>
<td width=“180” height=“50”>Amin A. Angkasa</td></tr>
<tr><td width=“20”>2.</td>
<td width=“80” height=“70”>06.100.002</td>
<td width=“180” height=“70”>Beni B. Bernardi</td></tr>
</table>

 horisontal: atribut align -> utk <caption>, <tr>, <td> dan <th>
 vertikal: atribut valign -> utk <tr>, <td> dan <th>
Contoh:
<table border="1" align="center">
<b> DAFTAR MAHASISWA </b> </caption>
<tr><th>No</th><th>NPM</th><th>Nama</th></tr>
<tr><td align="center" width="20">1.</td>
<td align="center" valign="middle"
width="80" height="50">06.100.001</td>
<td align="right" valign="top"
width="180" height="50">Amin A. Angkasa</td></tr>
<tr><td width="20">2.</td>
<td align="left" valign="top"
width="80" height="70">06.100.002</td>
<td align="left" valign="bottom"
width="180" height="70">Beni B. Bernardi</td></tr>
</table>

 Atribut: bgcolor
Contoh:
<body bgcolor="purple">
<font size="3" face="arial" color="yellow">
<table border="2" bgcolor="white" align="center">
<caption align="bottom">
<b> Tabel Daftar Mahasiswa </b> </caption>
<tr bgcolor="yellow">
<th>No</th><th>NPM</th><th>Nama</th></tr>
<tr bgcolor="cyan"><td align="center"
width="20">1.</td>
<td align="left" valign="middle“
width="80" height="40">06.100.001</td>
<td align="left" valign="middle“
width="180" height="40">Amin A. Angkasa</td></tr>
<tr><td bgcolor="blue" width="20">2.</td>
<td bgcolor="red" align="left" valign="middle"
width="80" height="40">06.100.002</td>
<td bgcolor="green" align="left" valign="middle"
width="180" height="40">Beni B. Bernardi</td></tr>
</table>
</body>

 Menggabungkan bbrp kolom menjadi 1: atribut
colspan
 Menggabungkan bbrp baris menjadi 1: atribut
rowspan

<table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12">
<b> Tabel Daftar Nilai Mahasiswa </b> </caption>
<tr bgcolor="gray"><th rowspan="2">No</th>
<th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th>
</tr>
<tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr>
<tr><td align="center" width="20">1.</td>
<td align="left" valign="middle" width="80" height="40">06.100.001</td>
<td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td>
<td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>
</tr>
<tr><td width="20">2.</td>
<td align="left" valign="middle" width="80" height="40">06.100.002</td>
<td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td>
<td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>
</tr>
</table>

HTML Tabel

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to HTML Tabel

Similar to HTML Tabel (20)

HTML Tabel