Scribd
Unggah
130 tayangan19 halaman

TM04 Pengenalan HTML (List Image Table Frame)

Dokumen ini membahas pengenalan HTML melalui pembahasan list, image, table, dan background HTML. Materi ini bertujuan membantu mahasiswa dapat membuat list, memasukkan image, membuat table, dan background dalam dokumen HTML. Secara khusus dibahas tentang tag-tag dan atribut yang digunakan untuk list ordered, unordered, nested, dan definition list, serta penggunaan tag img untuk memasukkan image ke dalam dokumen web.

Diunggah oleh

Fourth Account
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
130 tayangan19 halaman

TM04 Pengenalan HTML (List Image Table Frame)

Dokumen ini membahas pengenalan HTML melalui pembahasan list, image, table, dan background HTML. Materi ini bertujuan membantu mahasiswa dapat membuat list, memasukkan image, membuat table, dan background dalam dokumen HTML. Secara khusus dibahas tentang tag-tag dan atribut yang digunakan untuk list ordered, unordered, nested, dan definition list, serta penggunaan tag img untuk memasukkan image ke dalam dokumen web.

Diunggah oleh

Fourth Account
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 19

Workshop Desain Web Arif Basofi, S.Kom,MT.

PERTEMUAN 4
PENGENALAN HTML (Con’t)

POKOK BAHASAN:
• List HTML
• Image HTML
• Table HTML
• Background HTML
• Frame HTML (next)
• Form HTML (next)

TUJUAN PEMBELAJARAN:
Setelah mempelajari materi dalam bab ini, mahasiswa diharapkan mampu:
• Membuat list dalam dokumen HTML
• Membuat image dalam dokumen HTML
• Membuat table dalam dokumen HTML
• Membuat background dalam dokumen HTML
• Membuat frame dalam dokumen HTML (next)
• Membuat form dalam dokumen HTML (next)

2.1 List HTML


List merupakan bentuk umum yang sering digunakan untuk menguraikan suatu
daftar. Jenis-jenis list dalam dokumen HTML dapat berupa:

• List dengan nomor : Ordered List <ol>


Adalah model list / daftar yang setiap itemnya diberi nomor
Contoh: 1. List item satu
2. List item dua
3. List item tiga
• List tanpa nomor : Unordered List <ul>
Adalah model list / daftar yang setiap itemnya tidak diberi nomor
Contoh: - List item satu
- List item dua
- List item tiga
Workshop Desain Web Arif Basofi, S.Kom,MT.

• List bersarang : Nested List


Adalah model list / daftar yang memberikan uraian pada suatu item dalam
daftar/list.
Contoh: 1. List item satu
2. List item dua
1. Sub list item dua
2. Sub list item dua
3. List item tiga
• List definisi : Definition List <dl>
Adalah model list / daftar yang memberikan uraian pada suatu item dalam
daftar/list.
Contoh: HTTP
HyperText Transfer Protocol, adalah protokol standar web internet ...
HTML
HyperText Markup Language, adalah bahasan standar dokumen web..

2.1.1 Ordered List


Urutan nomor item yang ditampilkan secara default menggunakan angka
1,2,3,...dst sampai dengan sejumlah item list tersebut. Untuk pembuatan list ordered list
diawali dengan menggunakan tag <ol> ....</ol> dan diikuti dengan isi list item di dalam
tag ordered list tersebut dengan tag <li> .... </li>
Untuk keperluan penyajian tertentu, kita dapat mengubah bentuk nomor dalam
ordered list dengan model angka yang lain, dengan mengisi atribut type pada tag <ol>.
Misal. Jika ingin menampilkan urutan nomor dengan huruf abjad besar, maka atribut type
harus ditulis dalam tag: <ol type=”A”> .... </ol>
Berikut nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam
ordered list:

Type Arti

I Angka ditampilkan dengan angka Romawi HURUF BESAR


i Angka ditampilkan dengan angka Romawi huruf kecil
a Angka diubah dengan menggunakan abjad huruf kecil
A Angka diubah dengan menggunakan abjad HURUF BESAR

Selain atribut type, ada juga atribut start yang digunakan untuk mendefinisikan
nomor awal yang akan digunakan pada ordered list. Misal. Jika list ingin dimulai dari
nomor 4, maka atribut start harus ditulis dalam tag : <ol start=4> .... </ol>
Workshop Desain Web Arif Basofi, S.Kom,MT.

Contoh:
<html>
<head>
<title>Coba Ordered List</title>
<head>
<body>
<h3>Contoh Ordered List dokumen HTML:</h3>
<u><b>Ordered List &lt;ol&gt; </b></u>
<ol>
<li>List item satu</li>
<li>List item dua</li>
<li>List item tiga</li>
</ol>
<u><b>Ordered List dengan nomor angka romawi huruf BESAR &lt;ol
type="I"&gt; </b></u>
<ol type="I">
<li>List item satu</li>
<li>List item dua</li>
<li>List item tiga</li>
</ol>
<u><b>Ordered List dengan nomor angka romawi huruf kecil &lt;ol
type="i"&gt; </b></u>
<ol type="i">
<li>List item satu</li>
<li>List item dua</li>
<li>List item tiga</li>
</ol>
<u><b>Ordered List dengan abjad huruf BESAR &lt;ol type="A"&gt;
</b></u>
<ol type="A">
<li>List item satu</li>
<li>List item dua</li>
<li>List item tiga</li>
</ol>
<u><b>Ordered List dengan abjad huruf kecil &lt;ol type="a"&gt;
</b></u>
<ol type="a">
<li>List item satu</li>
<li>List item dua</li>
<li>List item tiga</li>
</ol>
<u><b>Ordered List dengan nomor urut dimulai 4 &lt;ol start=4&gt;
</b></u>
<ol start=4>
<li>List item empat</li>
<li>List item lima</li>
<li>List item enam</li>
</ol>
</body>
</html>
Workshop Desain Web Arif Basofi, S.Kom,MT.

Tampilan:

2.1.2 Unordered List

Unordered list adalah urutan item yang tak bernomor. Unordered list sering
disebut juga sebagai bullet list, memiliki bullet secara default berupa noktah. Jenis bullet
dapat diubah sesuai kebutuhan dengan memberikan definisi atribut type pada tag: <ul
type=”box”> .... </ul>.

Berikut jenis-jenis bullet list:

Tag Attribute Value Descriptions


square Bullet kotak
<ul> type disc Bullet titik
circle Bullet lingkaran
Workshop Desain Web Arif Basofi, S.Kom,MT.

Contoh:
<html>
<head>
<title>Coba Unordered List</title>
<head>
<body>
<h3>Contoh Unordered List dokumen HTML:</h3>
<u><b>Unordered List &lt;ul&gt; </b></u>
<ul>
<li>List item satu</li>
<li>List item dua</li>
<li>List item tiga</li>
</ul>
<u><b>Unordered List dengan type square &lt;ul type="square"&gt; </b></u>
<ul type="square">
<li>List item satu</li>
<li>List item dua</li>
<li>List item tiga</li>
</ul>
<u><b>Unordered List dengan type disc &lt;ul type="disc"&gt; </b></u>
<ul type="disc">
<li>List item satu</li>
<li>List item dua</li>
<li>List item tiga</li>
</ul>
<u><b>Unordered List dengan type circle &lt;ul type="circle"&gt;
</b></u>
<ul type="circle">
<li>List item satu</li>
<li>List item dua</li>
<li>List item tiga</li>
</ul>
</body>
</html>

Tampilan:
Workshop Desain Web Arif Basofi, S.Kom,MT.

2.1.3 Nested List

Nested list adalah bentuk list yang terjadi secara bersarang. Jadi didalam list
terdapat list lagi. Nested list dapat terjadi baik pada ordered list maupum unordered list.
Contoh:
HTML Code Tampilan
<html>
<head>
<title>Coba Nested List</title>
<head>
<body>
<h3>Contoh Nested List dokumen HTML:</h3>
<u><b>Ordered Nested List &lt;ol&gt; </b></u>
<ol>
<li>List item satu</li>
<li>List item dua</li>
<ol>
<li>List sub-dua</li>
<li>List sub-dua</li>
</ol>
<li>List item tiga</li>
<li>List item empat</li>
</ol>

<u><b>Unordered Nested List &lt;ul&gt; </b></u>


<ul>
<li>List item satu</li>
<li>List item dua</li>
<ul>
<li>List sub-dua</li>
<li>List sub-dua</li>
</ul>
<li>List item tiga</li>
<li>List item empat</li>
</ul>
</body>
</html>

2.1.4 Definition List

Definition List digunakan dalam memberikan uraian dari suatu list item dalam
daftar. Definition List terdiri atas kombinasi tag: <dl> .... </dl> , <dt> .... </dt> dan <dt>
.... </dt>.
Workshop Desain Web Arif Basofi, S.Kom,MT.

Berikut tag dalam definition list:

Tag Descriptions
<dl> Mendefinisikan definition list
<dt> Mendefinisikan definition term
<dd> Mendefinisikan definition description
Contoh:
<html>
<head>
<title>Coba Definition List</title>
<head>

<body>
<h3>Contoh Definition List dokumen HTML:</h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, is web document script program </dd>
<dt>HTTP</dt>
<dd>HyperText Transfer Protocol, is web document protocol </dd>
</dl>

</body>
</html>

Tampilan:

2.2 Image HTML


Umumnya web browser selain menampilkan isi dokumen web (web contents)
berupa teks, juga dapat menampilkan gambar (inline image). Format gambar yang sering
ditampilkan dalam web browser meliputi:
Workshop Desain Web Arif Basofi, S.Kom,MT.

 GIF (Graphical Interchange Format) (*.GIF)


 JPEG (Joint Photographic Expert Image) (*.JPG)
 PNG (Portable Network Graphic)
Setiap gambar yang akan ditampilkan pada web browser akan membutuhkan waktu
untuk didownload terlebih dulu, hal ini menyebabkan proses tampilan di browser menjadi
sedikit lambat. Untuk itu harus sedikit hati-hati dalam menyertakan gambar dalam
dokumen web, khususnya untuk file gambar yang berukuran besar.
Untuk menempatkan gambar dalam dokumen web, dapat menggunakan tag img:
<img src=”url atau nama files”>.
Beberapa atribut lain dapat disisipkan pada tag img:

Attribute Value Description

Center | justify | left | right | menentukan posisi gambar dengan teks


align
Baseline | top | bottom | middle sesuai dengan value yang digunakan.
menentukan tinggi gambar, dengan
height % atau pixel
value berupa % atau pixel
menentukan lebar gambar, dengan
width % atau pixel
value berupa % atau pixel
Contoh:
<html>
<head>
<title>Coba Image</title>
<head>
<body>
<h3>Contoh Image:</h3>
1. Gambar *.jpg : <br>
<img src="gmbr/me.jpg"> <br><br>
2. Gambar *.gif : <br>
<img src="gmbr/fun.gif"> <br><br>
3. Gambar *.gif animasi: <br>
<img src="gmbr/emsplash.gif"> <br><br>
4. a. Gambar dengan ukuran widht=150 & height=200 : <br>
<img src="gmbr/me.jpg" width=150 height=200> <br><br>
4. b. Gambar dengan ukuran widht=400 & height=250 : <br>
<img src="gmbr/fun.gif" width=400 height=250> <br><br>
5. Gambar dengan ukuran widht=30% & height=70% : <br>
<img src="gmbr/me.jpg" width=30% height=70%> <br>
</body>
</html>
Workshop Desain Web Arif Basofi, S.Kom,MT.

Tampilan:

2.2.1 Link Image

Untuk membuat link melalui suatu image, seperti halnya pada link sebelumnya,
yaitu dengan menggunakan tag :
<a href=”namafile”> <img src-“file_gambar”> … </a>
Contoh:
HTML Code Tampilan
<html>
<head>
<title>Coba Link Image</title>
<head>

<body>
<h3>Contoh Link Image:</h3>
Link ke gambar animasi : <br><br>
<a href="05b-Link_GambarAnimasi.html">
<img src="gmbr/pencet.gif"> </a>

</body>
</html>
Workshop Desain Web Arif Basofi, S.Kom,MT.

2.2.2 Floating Image

Floating image, digunakan menampilkan image seakan-akan mengambang pada


sisi kiri atau sisi kanan suatu paragraf teks. Untuk membuat floating imagelink melalui
suatu image, seperti halnya pada link sebelumnya, yaitu dengan menggunakan tag :
<img src-“file_gambar” align=”left atau right”> … </a>
Contoh:
<html>
<head>
<title>Coba Floating Image</title>
<head>
<body>
<h3>Contoh Floating Image:</h3>
<p><img src="gmbr/fun.gif" align="left" width=130 height=230> <br><br>
Images are probably the most fun part of web pages. You can put
pictures of anything on your web site, from photographs to animations.
To have make good graphics for your website, a good graphics program
is a must. I recommend JASC Software's Paint Shop Pro. You can "steal" pictures from other
people's web sites, but without a good graphics program, you can not customize the graphics
to make your site personalized. Window's Paint will get you nowhere and Microsoft Photo Editor
isn't much better. </p>
<p><img src="gmbr/fun.gif" align="right" width=130 height=230>
<br><br>
Images are probably the most fun part of web pages. You can put
pictures of anything on your web site, from photographs to animations. To have make good
graphics for your website, a good graphics program is a must. I recommend JASC Software's
Paint Shop Pro. You can "steal" pictures from other people's web sites, but without a good
graphics program, you can not customize the graphics to make your site personalized.
Window's Paint will get you nowhere and Microsoft Photo Editor isn't much better. </p>
</body>
</html>

Tampilan:
Workshop Desain Web Arif Basofi, S.Kom,MT.

2.2.3 Tag ALT Image

Tag alt pada image digunakan untuk menampilkan keterangan image yang ada
dibrowser, saat menaruh mouse pointer diatas gambar agak lama.
Untuk membuat Tag alt:
<img src-“file_gambar” alt=”keterangan_gambar” > …
Contoh:
<html>
<head>
<title>Coba ALT Image</title>
<head>

<body>
<h3>Contoh Tag ALT Image:</h3>
<img src="gmbr/fun.gif" alt=”anak-anak lucu” width=130 height=230>

</body>
</html>

Tampilan:

2.2.4 Image Map

Image map digunakan untuk mendefinisikan area link dimana saja pada daerah
suatu gambar. Jadi dalam suatu area gambar, dapat dibuat beberapa area link yang akan
kita tentukan. Contoh pada gambar dibawah, terdapat 3 area link (berwarna kunig) yang
berfungsi sebagai link ke dokumen web lain.
Workshop Desain Web Arif Basofi, S.Kom,MT.

Definisi area didalam daerah gambar dapat dinyatakan dalam bentuk objek:
• Titik : POINT • Persegi panjang : RECT
• Poligon : POLY • Lingkaran / elips: CIRCLE
Ada 2 (dua) jenis image map, yaitu:
1. Server side
2. Client side
Server side image map: menyimpan definsi map didalam server, sehingga jika
suatu daerah dalam gambar yang mempunyai image map di-klik, maka browser akan
mengirimkan koordinat daerah gambar yang di-klik pada server. Oleh server, koordinat
dicocokkan dengan definisi yang ada. Jika koordinat sesuai dengan area yang memiliki
link, maka akan menampilkan dokumen web sesuai definisi link pada koordinat tersebut.
Client side image map: hanya menyertakan definisi map dari daerah gambar yang
dapat di-klik pada status bar browser web.

Untuk menentukan koordinat daerah menggunakan posisi titik (point). Penentuan


koordinat (0,0) : dimulai dari pojok kiri atas gambar dan maksimum koordinat adalah pojok
kanan bawah gambar (lebar_max, tinggi_max).
Untuk membuat tag image map :

<map name=”mapname”> …letakkan koordinat & link disini… </map>

Untuk menentukan area koordinat, dapat digunakan tag area yang diletakkan diantara tag
map diatas:
Workshop Desain Web Arif Basofi, S.Kom,MT.

1. Untuk Area Persegi Panjang : RECT

<area shape="rect" coords="x1,y1,x2,y2" href="url">

Area obyek yang dibuat diatas berupa persegi panjang (rectangle) dengan
menggunakan koordinat titik x1,y1 sebagai pojok kiri atas dan titik x2,y2 sebagai
pojok kanan bawah. "href" mendefinisikan link seperti halnya pada tag <a>.

2. Untuk Area Lingkaran : CIRCLE

<area shape="circle" coords="x,y,radius" href="url>

Koordinat x,y pada tag diatas menunjukkan pusat titik lingkaran dan “radius”
adalah jari-jari/radius lingkaran.

3. Untuk Area Polygon : POLY

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,...,xN, yN" href="url">

Dengan tag polygon diatas, anda dapat membuat polygon dengan bentuk yang anda
inginkan.
Contoh: (Tampilan seperti pada gambar diatas)
<html>
<head>
<title>Coba ALT Image</title>
<head>

<body>
<IMG SRC="imagemap.gif" USEMAP="#map" WIDTH=175 HEIGHT=75 BORDER=0>
<MAP NAME="map">
<AREA SHAPE=CIRCLE COORDS="26,26,22" HREF="1.html">
<AREA SHAPE=POLY COORDS="62,32,41,64,93,64" HREF="2.html">
<AREA SHAPE=RECT COORDS="114,32,171,70" HREF="3.html">
</MAP>

</body>
</html>

2.3 Table HTML


Table digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya
sebuah tabel dalam satu kolom memiliki data yang sifatnya sejenis, dan setiap baris dapat
terdiri atas beberapa kolom kelompok data dalam satu kesatuan (seperti pada table
database).
Workshop Desain Web Arif Basofi, S.Kom,MT.

Tag tabel dasar berupa : <table> .... </table>, didalam tag <table> disisipkan baris
data dengan tag : <tr> ... </tr>. Dan dalam 1 (satu) baris dapat diisi kolom dengan tag :
<td> .... </td>.
Contoh potongan bentuk tag tabel:
Code HTML Tampilan
<table border="1">

<tr> <!--start row 1--> Cell 1, Row 1 Cell 2, Row 1 Cell 3, Row 1
<td>Cell 1, Row 1</td> Cell 1, Row 2 Cell 2, Row 2 Cell 3, Row 2
<td>Cell 2, Row 1</td>
<td>Cell 3, Row 1</td>
</tr> <!--end row 1--> Jika border diset=0, maka garis akan tidak nampak.

<tr> <!--start row 2--> Cell 1, Row 1 Cell 2, Row 1 Cell 3, Row 1
<td>Cell 1, Row 2</td> Cell 1, Row 2 Cell 2, Row 2 Cell 3, Row 2
<td>Cell 2, Row 2</td>
<td>Cell 3, Row 2</td>
</tr> <!--end row 2-->

</table>

Berikut beberapa atribut yang dapat digunakan dalam tag :


<TABLE>
width="..."
Width of the table, either in percent (ex. 90%) or pixels (ex.
500)
border="..." Width in pixels of a border around the table
cellspacing="..." Spacing between individual cells
cellpadding="..." Spacing inside cells between data and the edge of the cell
align="..." Sets alignment (left, right, center, justify)
bgcolor="..."
Sets background color of table (only works on some
browsers)
bordercolor="..." Sets the border color (only works on some browsers)
bordercolorlight="..." Sets border highlight color (only works on some browsers)

bordercolordark="..."
Sets the border shadow color (only works on some
browsers)
<TR> = Table Row
align="..."
Horizontally aligns the contents of the cells inside the row
(left, center, right, justify)
Vertically aligns the contents of the cells inside the row (top,
valign="..." middle, bottom). Note: This does not work in some
browsers)
Workshop Desain Web Arif Basofi, S.Kom,MT.

bgcolor="..."
Sets the background color of the row (only works on some
browsers)
<TD> = Table Data (cell)
rowspan="..." The number of rows spanned by a cell.
colspan="..." The number of columns spanned by a cell.
align="..."
Horizontally aligns the contents of the cell (left, center,
right, justify)
valign="..."
Vertically aligns the contents of the cell (top, middle,
bottom). Note: This does not work in some browsers)

Terdapat tag header untuk menampilkan header / kolom judul tabel, sehingga teks akan
bercetak tebal: <th> …NamaHeader… </th>
Contoh:
Misal. Ingin menampilkan tabel dengan bentuk :

Nama
Nomor
Nama Depan Nama Belakang
Bentuk kode HTML:
<html>
<head>
<title>Coba Tabel</title>
<head>

<body>
<table border="1">

<tr> <!--Start baris 1-->


<th rowspan="2">Nomor</th> <!--kolom 1 (NO), akan membagi 2 baris-->
<th colspan="2" align="center">Nama</th> <!--kolom 2 (Nama), akan membagi 2 kolom-->
<tr> <!--Start baris 1 dalam kolom Nama-->
<th>Nama Depan</th> <!--kolom1 1 : Nama Depan-->
<th>Nama Belakang</th> <!--kolom1 2 : Nama Belakang-->
</tr> <!--Akhir baris 1 dalam kolom Nama-->
</tr> <!--Akhir baris 1-->

</table>
</body>
</html>
Workshop Desain Web Arif Basofi, S.Kom,MT.

2.4 Background HTML


Background dalam dokumen web, dapat disertakan pada beberapa bagian dokumen
web, yaitu pada halaman web, tabel, atau pada frame.

2.4.1 Background Dokumen Web

Background pada dokumen web dapat berupa warna atau gambar, dengan tag :
<body bgcolor=”#rrggbb” atau background=”file_gambar”> .... </body>

a. Contoh background warna :


<html>
<head>
<title>Coba Background Web Doc</title>
<head>

<body bgcolor="#3333ff">
<FONT COLOR="#ffff00"> <H2 ALIGN="CENTER">BACKGROUND WARNA: BLUE SKY
(#3333ff) </H2></FONT>

</body>
</html>

Tampilan:
Workshop Desain Web Arif Basofi, S.Kom,MT.

b. Contoh background gambar :


<html>
<head>
<title>Coba Background Gambar Web Doc</title>
<head>
<body background="gmbr/background.jpg">
<H2 ALIGN="CENTER">BACKGROUND GAMBAR... </H2>
</body>
</html>

Tampilan:

2.4.2 Background Tabel Web

Background pada tabel web juga dapat berupa warna atau gambar, yang dapat
ditempatkan baik pada tag <table>, <th> maupun <td> :
<table bgcolor=”warna” atau background=”file_gambar”> .... </table>, atau
<th bgcolor=”warna” ” atau background=”file_gambar”> .... </tf>, atau
<td bgcolor=”warna” atau background=”file_gambar”> .... </td>
Workshop Desain Web Arif Basofi, S.Kom,MT.

a. Contoh background warna tabel :


<html>
<head>
<title>Coba Tabel</title>
<head>

<body>
<table border="1" bgcolor="#9999ff">

<tr> <!--Start baris 1-->


<th rowspan="2" bgcolor="#ffff00">Nomor</th> <!--kolom 1 (NO), akan membagi 2 baris-->
<th colspan="2" align="center">Nama</th> <!--kolom 2 (Nama),akan membagi 2 kolom-->
<tr> <!--Start baris 1 dalam kolom Nama-->
<td bgcolor="#00ff00">Nama Depan</td> <!—kolom 1 : Nama Depan-->
<td bgcolor="#00ff00">Nama Belakang</td> <!--kolom 2 : Nama Belakang-->
</tr> <!--Akhir baris 1 dalam kolom Nama-->
</tr> <!--Akhir baris 1-->

</table>
</body>
</html>

Tampilan:
Workshop Desain Web Arif Basofi, S.Kom,MT.

b. Contoh background gambar tabel:


<html>
<head>
<title>Coba Background Gambar Tabel</title>
<head>

<body>
<table border="1" background="gmbr/backgroundbar.jpg">

<tr>
<th rowspan="2" background="gmbr/background.jpg">Nomor</th>
<th colspan="2" align="center"><font color="#00ff00">Nama</font></th>
<tr>
<td background="gmbr/backgroundbar2.jpg"><font color="#ffff00">Nama Depan</font></td>
<td bgcolor="#00ff00">Nama Belakang</td>
</tr>
</tr>

</table>
</body>
</html>

Tampilan:

Anda mungkin juga menyukai