PEMBUATAN WEB STATIS DENGAN TAG HTML LANJUT
UNTUK PEMBUATAN LIST, TABEL DAN FRAME
Pokok Bahasan
- Pembuatan List Item
- Pembuatan Tabel
- Pembuatan Frame
Tujuan Pembelajaran
Setelah
melakukan praktikum dalam BAB Praktikum Pemrograman WEB ini diharapkan
mahasiswa mampu untuk:
- Pembuatan web statis dengan tag html lanjut untuk pembuatan list, tabel dan frame
Waktu : 2 Jam
Software : DreamWeaver
Percobaan 1 : List Item(LI)
List item di gunakan untuk mengelompokkan
data baik berurutan (ordered list) maupun yang tidak berurutan (unordered
list).
Contoh:
Kita mau mengelompokkan data-data
berikut :
- Pisang
- Melati
- Jambu
- Mawar
- Anggrek
- Apel
- Anggur
Dapat kita kelompokkan ke dalam dua
kelompok:
- Buah-buahan
Pisang
Jambu
Apel
Anggur
- Bunga
Melati
Mawar
Angrek
Ada tiga macam list yang bisa anda
tambahkan ke document HTML:
- Unordered List (Bullet)
- Ordered List (Numbering)
- Definition List
Latihan :
<html>
<head>
<title>HTML
List </title>
</head>
<body>
<P> Unordered
List </P>
<ul>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ul>
<P>Ordered List</P>
<ol
start="1" type="I">
<li>Sunday</li>
<ol
type="a">
<li>Introduction to HTML</li>
<li>Creating List</li>
</ol>
<li>Monday</li>
<ol type="A">
<li>Creating table</li>
<li>Inserting Image</li>
</ol>
<li>Tuesday</li>
<ol
type="I">
<li>Creating Link</li>
<li>Preparing Website</li>
</ol>
</ol>
<P>Definition
List</P>
<dl>
<dt>HTML
<dd>HyperText
Markup Langguage is not Language
Programming</dd>
</dt>
<dt>HTTP
<dd>HyperText
Transfer Protocol is TCP/IP
Protocol</dd>
</dt>
</body>
</html>
Percobaan
2 : Horizontal Rules(HR)
Horizontal Rule tag digunakan untuk menggambar garis
horizontal dalam
document HTML.
Percobaan 3 : Font
Dengan tag <FONT> anda bisa
menentukan format tampilan font dalam document HTML seperti color, size, style
dan lainya.
Percobaan 4 : Format text
Physical Formatting
Percobaan 5 : Anchor
Anchor tag <A> untuk menentukan
hyperlink dalam document HTML. HREF property digunakan untuk menentukan tujuan
dari hyperlink tersebut.
<A HREF="URL"> Hypertext </A> atau
<A
HREF="protocol://host.domain:port/path/filename">Hypertext
</A>
Table
Membuat table
Tag <TABLE> digunakan untuk membuat table dalam
document HTML , bagian pokok dari table adalah cell yang didefinisikan dengan
menggunakan tag <TD> atau <TH>.Membuat baris dalam table digunakan
tag <TR>
Latihan :
<html>
<head>
<title>Using
Table</title>
</head>
<body>
<table
border="1">
<caption>PraktikumTable</caption>
<tr>
<td>cell
1</td>
<td>cell
2</td></tr>
<tr>
<td>cell
3</td>
<td>cell
4</td></tr>
</table>
</body>
</html>
Percobaan 6 : Merge cell
Tag <TD> memiliki atribut colspan untuk merge column dan rowspan untuk merge baris.
Latihan 1 :
• Colspan
<html>
<head>
<title>Contoh Colspan</title>
</head>
<body>
<table bgcolor="CCCCFF" width="50%"
border="1"
cellpadding="0">
<tr>
<th colspan=2>Tahun</th>
</tr>
<tr>
<td >1996</td>
<td >1997</td>
</tr>
<tr>
<td >Rp 2000,‐</td>
<td >Rp 2500,‐</td>
</tr>
</table>
</body>
</html>
Latihan 2 :
• Rowspan
<html>
<head>
<title>Contoh Rowspan</title>
</head>
<body>
<table border=1 width=400 bgcolor=gray>
<tr><th rowspan=3>Data Mahasiswa</th>
<td>I.B. Potensi Utama</td></tr>
<tr><td>Sistem Informasi</td></tr>
<tr><td>2204 3717</td></tr>
</table>
</body>
</html>
Percobaan
6 : Image
A. Format Image
Ada banyak format image, tapi ada tiga jenis format yang
paling sering di gunakan :
‰ GIF (Graphical Interchange Format) (.GIF)
‰ JPEG (Joint Photographic Expert
Image) (.JPG)
‰ PNG (Portable Network Graphics)
B. Insert
Image ke Document
Tag IMG di gunakan untuk menginsertkan
image ke document HTML. Syntax nya:
<IMG SRC =
"URL"><html>
<html>
<head>
<title>Working with Image</title>
</head>
<body>
<img src="aa2.jpg">
</body>
</html>
C. Image Map
Anda bisa gunakan image yang ada
pada website anda untuk membuat image map.
Image map yaitu suatu area pada image yang bisa kita beri
hyperlink area ini
biasanya disebut “hot spots”. Coordinat dari hotspot
ditentukan menggunakan bidang geometry seperti rectangle, polygon dan lainya.
Coordinat dari object relatif terhadap pojok kiri atas
image.
latihan
<html>
<head>
<title>Creating Hotspot</title>
</head>
<body>
<img src="aa2.jpg" width="400"
height="200"
border="0" usemap="#Map">
<map name="Map">
<area shape="rect"
coords="0,0,200,100" href="file1.htm"
alt="kotaklink">
<area shape="circle"
coords="354,41,36" href="file2.htm" alt="lingkaran
link">
<area shape="poly"
coords="58,102,97,101,110,134,119,119,177,195,69,196,
47,162,62,143" href="#">
</map>
</body>
</html>
No comments:
Post a Comment