Scribd
Unggah
20 tayangan60 halaman

HTML

Dokumen tersebut membahas konsep pemrograman bahasa HTML dan aplikasinya pada situs e-learning berbasis Windows Media Player. Secara garis besar dibahas tentang pengenalan HTML, struktur dokumen HTML, tag-tag dasar HTML seperti heading, paragraf, list, dan horizontal rules. Juga dibahas tentang browser dan editor HTML serta unsur-unsur inline seperti font, hyperlink, dan gambar.

Diunggah oleh

Yuna Argadewi
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
20 tayangan60 halaman

HTML

Dokumen tersebut membahas konsep pemrograman bahasa HTML dan aplikasinya pada situs e-learning berbasis Windows Media Player. Secara garis besar dibahas tentang pengenalan HTML, struktur dokumen HTML, tag-tag dasar HTML seperti heading, paragraf, list, dan horizontal rules. Juga dibahas tentang browser dan editor HTML serta unsur-unsur inline seperti font, hyperlink, dan gambar.

Diunggah oleh

Yuna Argadewi
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/ 60

KONSEP PEMROGRAMAN BAHASA HTML

(Hypertext Transfer Protocol) DAN APLIKASINYA PADA


SITUS E-LEARNING BERBASIS WINDOWS MEDIA
PLAYER

TUGAS MATA KULIAH KOMPUTER

Oleh:
MAYA NOURMA WIJAYANTI
NIM 032010101006

FAKULTAS KEDOKTERAN
UNIVERSITAS JEMBER
2007
1

BAB 1. Pengenalan HTML

1.1. World Wide Web


Internet merupkan jaringan global yang menghubungkan suatu network
dengan network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung
antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat
berkomunikasi. World Wide Web (WWW) merupakan bagian dari internet yang
paling cepat berkembang dan paling populer. WWW bekerja merdasarkan pada
tiga mekanisme berikut:
• Protocol standard aturan yang di gunakan untuk berkomunikasi pada
computer networking, Hypertext Transfer Protocol (HTTP) adalah
protocol untuk WWW.
• Address WWW memiliki aturan penamaan alamat web yaitu
URL(Uniform Resource Locator) yang di gunakan sebagai standard
alamat internet.
• HTML digunakan untuk membuat document yang bisa di akses melalui
web.

1.2. Pengenalan HTML


Hypertext Markup Language merupkan standard bahasa yang digunakan
untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu:
• Mengontrol tampilan dari web page dan contentnya.
• Mempublikasikan document secara online sehingga bisa di akses dari
seluruh dunia.
• Membuat online form yang bisa di gunakan untuk menangani pendaftaran,
transaksi secara online.
• Menambahkan object-object seperti image, audi, video dan juga java
applet dalam document HTML.
2

1.3. Browser dan Editor


• Browser
Browser merupakan software yang di install di mesin client yang berfungsi untuk
menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di
gunakan biasanya Internet Explorer, Netscape Navigator dan masih banyak yang
lainya.

• Editor
Program yang di gunakan untuk membuat document HTML, ada banyak HTML
editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver,
Notepad.
3

BAB 2. Basic Tag HTML

2.1. Tag-tag HTML


Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan
tampilan dari document HTML.
<BEGIN TAG> </END TAG>
Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML.
<HTML>
. . .
<HTML>
Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya
menghasilkan output yang sama. Bentuk dari tag HTML sebagai berikut:
<ELEMENT ATTRIBUTE = value>
Element - nama tag
Attribute - atribut dari tag
Value - nilai dari atribut.
Contoh:
<BODY BGCOLOR=lavender>
BODY merupakan element, BGCOLOR (Background) merupakan atribut yang
memiliki nilai lavender. Untuk memulai bekerja dengan HTML anda bisa
gunakan editor Note Pad atau editor lainya. Caranya:
1. Ketikkan tag-tag berikut di notepad.
4

2. Simpan dengan nama file one.htm atau one.html


3. Buka dengan browser internet explorer file one.htm maka
outputnya akan di tampilkan seperti gambar di bawah ini.

2.2. Struktur HTML Document


Document HTML bisa di bagi mejadi tiga bagian utama:
• HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML
<HTML></HTML>
tag HTML memberi tahu browser bahawa yang di dalam kedua tag tersebut
adalah document HTML.

• HEAD
Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di
dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari
halaman pada titlenya browser. Selain itu Bookmark juga megunakan tag TITLE
untuk memberi mark suatu web site. Browser menyimpan “titile” sebagai
bookmark dan juga untuk keperluan pencarian (searching) biasanya title di
gunakan sebagai keyword. Header juga memuat tag META yang biasanya di
gunakan untuk menentukan informasi tertentu mengenai document HTML, anda
bias menentukan author name, keywords, dan lainyan pada tag META.
Contoh:
<META name=”Author” contents=”Bocah Gunung”>
5

Author dari document tersebut adalah “Bocah Gunung” Atribut http-equiv dapat
di gunkan untuk meletakkan nama HTTP Server atribut untuk menciptakan HTTP
header.
Contoh:
<META http-equiv=”Expires” content=”Wed, 7 May
2003 20:30:40 GMT”>

yang akan menciptakan HTTP header :


Expires: Wed, 7 May 2003 20:30:40 GMT
Sehingga jika documents di cached, HTTP akan megetahui kapan untuk
mengapdate document tersebut pada cache.

• BODY
Document body di gunakan untuk menampilkan text, image link dan semua yang
akan di tampilkan pada web page.
<html>
<head>
<title>Welcome to HTML</title>
</head>
<body bgcolor="laveder">
<p>Document HTML yang Pertama</p>
</body>
</html>

2.3. Basic HTML Element


• Block Level Element
Block level element yang sering di gunakan :
Heading (H1 sampai H6)
Contoh:
<html>
<head>
6

title>Heading Elements</title>
</head>
<body>
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
</body>
</html>

• Paragraf (P)
Contoh:
<html>
<head>
<title>Formating Paragraf</title>
</head>
<body>
<h3>Puisi Ceria</h3>
<p>
7

Contoh:
<html>
<head>
<title>Formating Paragraf</title>
</head>
<body>
<h3>Puisi Ceria</h3>
<p>
mawar berwarna merah, bibir kamu juga merah , bibir
kamu semerah mawar
</p>
<h2>puisi sedih</h2>
<p>
melati harum baunya, kalau nggak ganti percuma namanya
</p>
</body>
</html>

• 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
8

Bunga
• Melati
• Mawar
• Angrek
Ada tiga macam list yang bisa anda tambahkan ke document HTML:
1. Unordered List (Bullet) :
Contoh :
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<P>Shedule for HTML Course</P>
<ul>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ul>
</body>
</html>
9

Tag Attribute Value Description


<UL> TYPE SQUARE Bullet Kotak
DISC Bullet Titik
Bullet
CIRCLE
Lingkaran

2. Ordered List (Numbering)


Contoh:
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<P>Shedule for HTML Course</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>
<li>Wednesday</li>
10

</ol>
</body>
</html>

Tag Attribute Value Description


<OL> TYPE I Upper
Roman
i Lower
Roman
A Upercase
a Lowercase
<OL> START Begin
n
Number

Definition List
11

Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag menentukan
definition term serta <DD> tag menentukan definition itu sendiri.
Contoh:
<html>
<head>
<title>Definition List</title>
</head>
<body>
<p><b>List of Internet Resource</b></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>
<dt>Internet
<dd>A network of network</dd>
</dt>
<dt>TCP/IP
<dd>Internet protocol</dd>
</dt>
</dl>
</body>
</html>

Horizontal Rules(HR)
Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam
document HTML.
12

• Attribute Description
Position menetukan posisi dari HR, dengan value : canter |right | left. Width
Untuk menentukan panjang HR default 100% Size Untuk menentukan tebal dari
HR dalam pixel Noshad Efek bayangan.

• Inline atau Text Level Element


Inline level yang sering di gunakan:
™ EM, I, B dan FONT (Pemformatan font)
™ A (hyperlink)
™ BR (Break line)
™ APPLET (Java applet)
™ IMG (image)

Horizontal Rules(HR)
Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam
document HTML.
13

Attribute Description
Position menetukan posisi dari HR, dengan value : canter |
right | left.
Width Untuk menentukan panjang HR default 100%
Size Untuk menentukan tebal dari HR dalam pixel
Noshad Efek bayangan.

• Inline atau Text Level Element


Inline level yang sering di gunakan:
™ EM, I, B dan FONT (Pemformatan font)
™ A (hyperlink)
™ BR (Break line)
™ APPLET (Java applet)
™ IMG (image)

2.4. Pemformatan Page


• Break
Tag <BR> di gunakan untuk memulai baris baru pada document HTML, tag ini
fungsinya mirip dengan carriage return.
Contoh:
<html>
<head>
<title>Break Line</title>
</head>
<body>
<h3>Buliding Dynamic Web Aplication</h3>
<p>
If you're building a dynamic web application, <br>
start by setting up an application server and <br>
connecting to a database.
</p>
14

</body>
</html>

• Font
Dengan tag <FONT> anda bisa menentukan format tampilan font dalam
document HTML seperti color, size, style dan lainya.
Contoh:
<html>
<head>
<title>Formating Font</title>
</head>
<font color="#9966FF" size="5">
Setting Up Web Server
</font>
<p>
<font face="Courier New, Courier, mono">
To run web applications, you need a web server.
A web server is software that serves files in
response
15

to requests from web browsers.


A web server is sometimes called an HTTP
server.
Common web servers include IIS,
Netscape Enterprise Server, iPlanet Web Server,
and Apache HTTP Server.
</font>
</p>
<body>
</body>
</html>

• Attribute Description
color Untuk menentukan warna font, anda bias menggunakan nama font atau
hexadecimal
(#000000 - #ffffff)
size Untuk menentukan ukuran dari font 1 – 7 face Untuk menentukan jenis font
biasanya dalam satu list ada beberapa font dan akan di baca mulai dari yang
paling kiri.

• Color
Color merupakan attribute yang bisa anda tambahkan pada beberapa element
seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer
yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit
hexadecimal number.
#RRGGBB
16

Attribute Description
color Untuk menentukan warna font, anda bisa
menggunakan nama font atau hexadecimal
(#000000 - #ffffff)
size Untuk menentukan ukuran dari font 1 - 7
face Untuk menentukan jenis font biasanya dalam satu
list ada beberapa font dan akan di baca mulai dari
yang paling kiri.

Color merupakan attribute yang bisa anda tambahkan pada beberapa element
seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer
yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit
hexadecimal number.
#RRGGBB

Hexadecimal Color
#FF0000 Red
#00FF00 Green
#0000FF Blue
17

#000000 Black
#FFFFFF White

• Alignment
Align attribute digunakan untuk menentukan perataan object dalam document
HTML baik berupa text, object, image, paragraph, division dan lain-lain.

Value Description
Left Rata kiri
Right Rata kanan
Center Rata tengah
Justify Rata kanan
kiri

• Format text
Physical Formatting

Tag Description

<B> ... </B> Bold text

<I> ... </I> Italic text

<U> ... </U> Underline Text

<BIG> ... </BIG> Untuk ukuran yang lebih besar


dari normal

<SMALL> ... </SMALL> Untuk ukuran yang lebih kecil


18

dari normal

<STRIKE> ... Untuk memberi garis di tengah


</STRIKE> text

<SUP> ... </SUP> Superscript text

<SUB> ... </SUB> Subscript text

<CENTER> ... Center document


</CENTER>

Logical Formatting

Tag Description

<EM> ... </EM> Text miring / <I>

<STRONG> ... Text tebal / <B>


</STRONG>

<DEL> ... </DEL> Mencoret text /


<STRIKE>

<INS> ... </INS> Underline text / <U>

• Quotes / Indenatasi
Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE,
untuk indentasi pendek anda bisa gunakan element Q.
19

Contoh:
<html>
<head>
<title>Formating Font</title>
</head>
<body>
<font color="#9966FF" size="5">
Setting Up Web Server
</font>
<p>
To run web applications,you need a web
server.
A web server is software that serves files in
response
to requests from web browsers.
<blockquote>
A web server is sometimes called an HTTP server.
Common web servers include IIS,
Netscape Enterprise Server, iPlanet Web Server,
and Apache HTTP Server.
</blockquote>
If you’re not using a web hosting
service,
choose a web server and
install it on your local computer
or on a remote computer
</p>
</body>
</html>
20

• Preformatted text
Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.
Contoh:
<html>
<head>
<title>Formating Font</title>
</head>
<body>
<font color="#9966FF" size="5">
Setting Up Web Server
</font>
<p>
<pre>
To run web applications,you need a web server.
A web server is software that serves files in
response
to requests from web browsers.
A web server is sometimes called an HTTP
server.
21

Common web servers include IIS,


Netscape Enterprise Server, iPlanet Web Server,
and Apache HTTP Server.
If you’re not using a web hosting service,
choose a web server and
install it on your local computer
or on a remote computer
</pre>
</p>
</body>
</html>

• Grouping element
Tag DIV dan SPAN di gunakan untuk mengelompokkan elementelement HTML.
Span digunakan untuk mendefinisikan inline content sementara div digunakan
untuk block-level content.
Contoh:
<html>
<head>
<title>Div dan Span</title>
</head>
<body>
<div>
Divisi 1
Div tag digunakan untuk mengelompokkan group element
biasanya untuk block-level element.
</p>
</div>
<div align="right">
Divisi 2
<p>
22

Ini didalam devisi kedua. di tulis dengan alignment


kanan.
</p>
</div>
<span style="font-size:25; color:lavender">
baris ini dalam span dengan warna lavender.
</span>
</body>
</html>

• Hyperlink
Absolute Address - merupakan full internet address (URL) yang meliputi protocol,
network location dan path dan nama file.
Contoh:
http ://www.yahoo.com/index.html
Relatif Address - URL yang tidak menyebutkan protocol dan network locationya
(hanya path dan nama filenya).
23

Anchor
Anchor tag <A> untuk menentukan hyperlink dalam document HTML. HREF
property digunakan untuk menentukan tujuan dari hyperlink tersebut.
<A HREF=”URL”> Hypertext </A>
<A
HREF=”protocol://host.domain:port/path/filename”>
Hypertext </A>

Link ke Document Lain


Misalkan ada dua document html link1.htm dan link2.htm untuk membuat link
dari link1.htm ke link2.htm :
Link1.htm
<html>
<head>
<title>Using Link</title>
</head>
<body>
<center><font size="5" color=hotpink>Creating Link
</font></center>
<br>
<a href="link2.htm"> Click here to view document
2</a>
</body>
</html>
Link2.htm
<html>
<head>
<title>Document 2</title>
</head>
<center><font size="5" color=limegreen>Creating
Link </font></center>
24

<br>
<a href="link1.htm"> back to document 1</a>
<body>
</body>
</html>

Link ke Section tertentu dalam Document


Untuk membuat link ke section tertentu dalam satu document gunakan property
name untuk membuat nama tujuan dari link. Syntax name anchor:
<A NAME =”nama”>Topic name</A>
untuk membuat link ke name :
<A HREF=”#nama”>menuju ke Topic name</A>
contoh:

link3.htm
<html>
<head>
<title>Anchor Name</title>
</head>
<body>
<pre>
<b>setting up web server</b>
Windows users can get a web server up and running quickly on their local
computer by installing either PWS or IIS. The web server may already be
installed. Check your folder structure to see if it contains a C:\Inetpub or
D:\Inetpub folder. PWS and IIS create this folder during installation.
If you want to install PWS or IIS, <a href="#install">see Installing a Web Server
in Windows.</a>
ASP.NET pages only work with one web server:
Microsoft IIS 5 or higher. PWS is not supported. Also, because IIS 5 is a service
25

of the Windows 2000 and Windows XP Professional operating systems, you can
only use these two versions of Windows to run ASP.NET applications. <b><a
name="install">Installing a Web Server in Windows </a></b> To develop and
test dynamic web pages, you need a functioning web server. This chapter
describes how most Windows users can install and use a Microsoft web server on
their local computer.
</pre>
</body>
</html>

Link Ke bagian tertentu Document Lain


Untuk membuat link ke bagian tertentu document lain anda bisa gunakan anchor
name di document yang menjadi tujuan hperlink.
Contoh:
<A HREF=”link3.htm#install”>See install
information.</A>
26

BAB 3. Membuat Tabel

3.1. Table
• Membuat table
Tag <TABLE> digunaka untuk membuat table dalam document HTML , bagian
pokok dari table adalah cell yang didefinisikan dengan menggunakan tag <TD>.
<html>
<head>
<title>Using Table</title>
</head>
<body>
<table border="1">
<td>Table dengan sigle cell</td>
</table>
</body>
</html>

anda bisa menambahkan beberapa cell untuk membuat satu baris cell.
<html>
<head>
<title>Using Table</title>
</head>
<body>
<table border="1">
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</table>
</body>
</html>
27

berikutnya kalo anda ingin membuat beberapa baris cell dalam table gunakan tag
<TR>.
<html>
<head>
<title>Using Table</title>
</head>
<body>
<table border="1">
<tr>
<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
</tr>
<tr>
<td>cell 2a</td>
<td>cell 2b</td>
<td>cell 2c</td>
</tr>
</table>
</body>
</html>

anda juga bisa memberi caption pada table dengan menambahkan teg
berikut:
<caption>Creating Table</caption>
di dalam table.

• Menambahkan Heading cell


Untuk menambahkan heading pada table tambahkan tag berikut pada table yang
sudah di buat.
.
28

<table border="1">
<caption>Creating Table</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>

• Pemformatan table
Untuk memformat perataan text di dalam table anda bisa gunakan attribute Align
dan Valign (vertical Alignment)

Attribute Value
Align Center | justify | left | right
Valign BASELINE | TOP | BOTTOM |
MIDDLE

<tr align="center" valign="baseline">


<td>cell 1a</td>
<td>cell 1b</td>
<td>cell 1c</td>
</tr>
<tr align="center" valign="baseline">
<td>cell 2a</td>
<td>cell 2b</td>
<td>cell 2c</td>
</tr>
Anda juga bisa menambahkan attribute cellspacing untuk memberi sepasi antar
sel dan cellpadding untuk spasi dari border ke text dalam cell.
29

• Merge cell
Tag <TD> memiliki atribut colspan untuk merge column dan rowspan untuk
merge baris.
Contoh:
<html>
<head>
<title>Using Table</title>
</head>
<body>
<table bgcolor=”CCCCFF” width="62%" border="1"
cellpadding="0">
<tr>
<td colspan="3" align="center">Quarter 1</td>
<td colspan="3" align="center">Quarter 2</td>
</tr>
<tr align="center">
<td>Jan</td>
<td>Feb</td>
<td>Mar</td>
<td>Apr</td>
<td>May</td>
<td>Jun</td>
</tr>
<tr>
<td>100</td>
<td>5000</td>
<td>200</td>
<td>1500</td>
<td>2500</td>
<td>1750</td>
</tr>
30

<tr>
<td>290</td>
<td>5050</td>
<td>2300</td>
<td>100</td>
<td>270</td>
<td>300</td>
</tr>
</table>
</body>
</html>

contoh :
<html>
<head>
<title>Rowspan</title>
</head>
<body>
<table bgcolor="lavender" width="75%" border="1"
cellpadding="0">
<tr>
<td></td>
<td></td>
31

<td>South</td>
<td>North</td>
</tr>
<tr>
<td rowspan="3">Quarter 1</td>
<td>Jan</td>
<td>1000</td>
<td>12000</td>
</tr>
<tr>
<td>Feb</td>
<td>12500</td>
<td>1345</td>
</tr>
<tr>
<td>Mar</td>
<td>78090</td>
<td>71080</td>
</tr>
</table>
</body>
</html>
32

BAB 4. Menyisipkan Image

4.1. Format Image


Ada banyak format image, tapi ada tiga jenis format yang paling sering
digunakan:
• GIF (Graphical Interchange Format) (.GIF)
• JPEG (Joint Photographic Expert Image) (.JPG)
• PNG (Portable Network Graphics)

4.2. Insert Image ke Document


Tag IMG di gunakan untuk menginsertkan image ke document HTML. Syntax
nya:
<IMG SRC = “URL”>
<html>
<head>
<title>Working with Image</title>
</head>
<body>
<img src="Dog.gif">
</body>
</html>

Attribute Value Description


Align Center | justify | left | right . Top, bottom, middle digunakan
| Baseline | top | bottom | . untuk menentukan posisi image
middle terhadap text Left, right, center
untuk menentukan posisi image
di document

<html>
33

<head>
<title>Working with Image</title>
</head>
<body>
<p><img src="Dog.gif" height="100" width="100">
Default alignment at the bottom</p>
<p><img src="Dog.gif" height="100" width="100"
align="top">Aligned at Top</p>
<p><img src="Dog.gif" height="100" width="100"
align="middle">Aligned at Middle</p>
</body>
</html>
34

4.3. 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.

Shape Description
Default Semua area image
Rect AREA KOTAK
TERTENTU
Circle AREA LINGKARAN
TERTENTU
Poly AREA POLYGON

Coordinat dari object relatif terhadap pojok kirai atas image.

Coordinate Value
Rect Left-x, top-y, right-x, bottom-
y
Circle CENTER-X, CENTER-Y,
RADIUS
Poly X1, Y1, X2, Y2, … XN, YN

Contoh:
<html>
<head>
<title>Creating Hotspot</title>
</head>
<body>
<img src="Starry.gif" width="400" height="200"
border="0" usemap="#Map">
35

<map name="Map">
<area shape="rect"
coords="0,0,200,100"
href="file1.htm"
alt="kotak link">
<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>
36

BAB 5. Membuat Form

5.1. Pengenalan Form


• Kegunaan Form
Berikut ini beberapa contoh kegunaan Form dalam web:
™ memperoleh data-data user baik nama, alamat dan data lainnya
untuk mendaftar pada service yang di sediakan.
™ memperoleh informasi pembelian secara online
™ memperoleh feedback dari user mengenai website anda.

• Form Element
Tag <FORM> digunakan untuk membuat form dalam document HTML.

Attribute Description
ACCEPT Mendefinisikan MIME yang di izinkan oleh server yang
memuat script untuk memproses form. Syntax:
ACCEPT=”Internet Media Type”
METHOD Menentukan bagaimana data akan di kirim ke server. GET –
data akan di kirim dengan menggunakan query string pada
URL.
POST – data akan di kirim ke server sebagai block data ke
script. Syntax: METHOD=”POST|GET”
ACKTION Menentukan lokasi dari script yang akan memproses data dari
form Syntax: ACTION=”URL”

5.2. HTML Input Element


Pada saat membuat form anda bisa meletakkan control-control pada form
untuk memperbolehkan inputan dari user . semua control biasanya di letakkan di
antara tag <FORM></FORM> tapi anda juga bias meletakkan control diluar tag
tersebut. Untuk menambahkan control gunakan tag <input>. Berikut macam-
macam component input:
37

• Button
Component ini memiliki attribute:

Attribute Description
Name Nama dari control
Size Ukuran control
Type <input type=”button”>
Untuk memberikan value ke
Value
input

• Text
Untuk membuat sigle line text control. Attribute size digunakan untuk menetukan
jumlah character yang bisa ditampilkan, sementara maxlength attribute digunakan
untuk menentukan maximum character yang bisa di masukkan.
<INPUT TYPE=”TEXT” NAME=”textbox” VALUE=””
SIZE=”20”>

• CheckBox
Checkbox memiliki atribut:

Attribute Description
Checked Untuk memberi default check
Name Nama dari control
Size UKURAN CONTROL
Type <INPUT TYPE=”CHECKBOX”>
Value UNTUK MEMBERIKAN VALUE
KE INPUT
38

• Radio
Setiap radio button control harus memiliki nama yang sama, sehingga user hanya
bisa memilih satu option saja. Radio button juga harus secara explisit memberikan
nilai ke atribut value.

Attribute Description
Checked Untuk memberi default check
Name Nama dari control
Size Ukuran control
Type <input type=”radio”>
Untuk memberikan value ke
Value
input

• Text Area
Untuk membuat textarea gunakan tag <TEXTAREA></TEXTAREA>

Attribute Description
cols Lebar dari text
area
rows Jumlah baris
Name Nama dari
control
Size Ukuran control

<HTML>
<P>
<TEXTAREA NAME=”text1” COLS=20 rows=5></TEXTAREA>
</HTML>
39

• ComboBox / List Box (Selection)


Tag <SELECT> digunakan untuk membuat component combo box, sementara
untuk item dari combo box menggunakan tag <OPTION>.

Property Description
Name Untuk memberi nama element
Size Untuk menentukan jumlah baris yang di
tampilkan
Multiple Untuk menentukan apakah user boleh memilih
lebih dari satu option atau nggak.

<html>
<head>
<title>Creating Form</title>
</head>
<body>
<h3><center><font color="#0000FF">Job
Description</font></center></h3>
<form action="http://domain.com/process"
method="post">
<p>
Job Discription
<select name="job" size="1">
<option value="1">Web
Developer</option>
<option value="2">Web
Designer</option>
<option value="3">Web Administrator</option>
</select>
<br>
<br>
40

Experience
<select name="Experience" size="3"
multiple>
<option value="1" selected>1
year</option>
<option value="2"> 1- 3
year</option>
<option value="3">None</option>
</select>
</p>
</form>
</body>
</html>
C. Creating Form
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<h2 align="center"><font color="#9966FF">Free
Registration</font></h2>
<form action="proses.asp" method="post"
name="form">
<table width="68%" border="0" align="center"
cellpadding="0">
<tr>
<td width="33%">Nama</td>
<td width="3%">:</td>
<td width="64%"><input name="txtNama"
type="text" id="txtNama"></td>
</tr>
41

<tr>
<td >Tgl Lahir</td>
<td>:</td>
<td><input name="txtTgl" type="text"
id="txtTgl" size="4" maxlength="2">
/
<input name="txtBulan" type="text"
id="txtBulan" size="4" maxlength="2">
/
<input name="txtTahun" type="text"
id="txtTahun" size="8" maxlength="4"></td>
</tr>
<tr>
<td>Alamat</td>
<td>&nbsp;</td>
<td><textarea name="txtAlamat" cols="40"
rows="2" id="txtAlamat"></textarea></td>
</tr>
<tr>
<td>Kota</td>
<td>:</td>
<td><input name="txtKota" type="text"
id="txtKota"></td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>:</td>
<td><select name="cboJob" id="cboJob">
<option>Tani</option>
<option>Nelayan</option>
<option>Karyawan</option>
42

</select></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input name="radJk" type="radio"
value="1" checked>
Laki-Laki
<input type="radio" name="radJk"
value="2">
Perempuan</td>
</tr>
<tr>
<td>Hobby</td>
<td>:</td>
<td><input name="cekReading" type="checkbox"
id="cekReading" value="1">
Reading </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input name="cekSport" type="checkbox"
id="cekSport" value="2">
Sport</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input name="cekSing" type="checkbox"
id="cekSing" value="3">
43

Singing </td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input name="cekTravel" type="checkbox"
id="cekTravel" value="4">
Traveling</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input name="btnKirim" type="submit"
id="btnKirim" value="Kirim">
<input name="btnCancel" type="reset"
id="btnCancel" value="Cancel"></td>
</tr>
</table>
</form>
</body>
</html>
44

BAB 6. Pengenalan Style Sheet

Style Sheets merupakan feature yang sangat penting dalam membuat


Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat
web, akan tetapi penggunaan style sheets merupakan kelebihan tersendiri. Suatu
style sheet merupakan tempat dimana anda mengontrol dan memanage style-style
yang ada. Style sheet mendeskripsikan bagaiman tampilan document HTML di
layar. Anda juga bias menyebutnya sebagai template dari documents HTML yang
menggunakanya. Anda juga bisa membuat efek-efek sepesial di web anda dengan
menggunakan style sheet. Sebagai contoh anda bisa membuat style sheet yang
mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru.
Atau pada tag <P> yang akan di tampilkan dengan warna kuning dan
menggunakan font verdana dan masih banyak lagi yang bias anda lakukan dengan
style sheet. Secara teoritis anda bisa menggunakan style sheet technology dengan
HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet (CSS)
technology yang support pada hampir semua web Browser. Karena CSS telah di
setandartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web
browser.

6.1. Inline Styles


Ada dua cara untuk merubah style dari web page anda yaitu dengan :
• Merubah inline style
• Menulis script untuk merubah style anda.
Dengan meggunakan inline style anda dapat membuat dynamic style tanpa harus
menambahkan script ke web anda. Inline styles merupakan style yang bisa kita
pasang pada element web tertentu saja.
Contoh:
Jika anda ingin menambahkan style pada <H1> dengan warna merah,
anda harus mengeset attribut STYLE dari tag <H1>.
<H1 STYLE=”color:red”>
jika anda ingin menggunakan script untuk memodifikasi inline style,
45

anda dapat menggunakan Style Object. Style Object mensupport semua property
yang di support CSS untuk style. Untuk menggunakan property pada script :
1. Hilangkan tanda hubung “-” dari property CSS Style
2. Ganti huruf setelah tanda hubung menjadi Capital.
Contoh:
font-weight menjadi fontWeight
text-align menjadi textAlign

6.2. Istilah-istilah dalam Style Sheet


Style rule
Cascading style sheet merupakan kumpulan aturan yang mendefinisikan
style dari document. Sebagai contoh kita bisa membuat aturan style yang
menentukan bahwa semua <H2> di tampilkan dengan warna orange.

Style sheet
Style sheet dapat dapat di embedded ke HTML document. Atau disebut
embedded style sheet. Style sheet juga bisa dibuat sebagai external file dan di link
ke document HTML. Style role bisa di kenakan pada bagian tertentu dari web
page. Sebagai contoh anda bisa menentukan paragraph tertentu di tampilkan
dengan style bold dan italic sementara yang lain tetap seperti biasa.

Selector
selector { property1: value; property2:value, . . .}
H1{ color:green; background-color:orange}
Style sheets terdiri dari dua bagian:
1. Selector
Bagian pertama sebelum tanda “{}” disebut selector
2. Declaration
Terdiri dari property dan nilainya.
46

6.3. Komentar dalam Style Sheets


Comments atau komentar biasanya di gunakan oleh programmer untuk
memudahkan mengingat kembali script yang sudah di tulisnya, Comments di CSS
hampir sama dengan comments di C atau C++ yaitu dengan menggunakan:
/* isi Comments */
Contoh:
H1 { color:blue;} /* H1 elements akan menjadi
biru */
Tags.H1.color = “blue”; /* H1 elements akan
menjadi biru */

6.4. Pemakaian elemen style


Mari kita mulai dengan mengatur warna huruf dan latar belakang. Anda
dapat mengerjakan ini dengan menggunakan elemen style untuk mengatur
karakter kode tag dokumen anda.
<style type="text/css">
body { color: black; background: white; }
</style>
Pernyataan yang ditulis antara kode tag <style> dan </style> menunjukkan
perintah pengaturan style.

1. Link ke sheet lainnya


Apabila anda menginginkan style yang sama untuk halaman HTML anda yang
lain, disarankan memperguakan sheet-sheet terpisah namun satu dan lainnya
terhubung dengan cara link. Anda dapat mengikuti cara berikut ini :
<link rel="stylesheet" href="style.css">
Kode tag untuk link ini ditempatkan di bagian "head" dokumen anda. Perintah rel
perlu diatur dengan pernyataan "stylesheet" agar supaya browser dapat
menemukan perintah href sebagai penunjukan ke alamat Web (URL) sheet anda.
47

2. Mengatur tepi halaman (page margin)


Halaman Web akan tampil cantik bila dituliskan dalam margin yang lebih lebar.
Anda dapat mengatur sisi kiri dan kanan memakai karakter "margin-left" dan
"margin-right". Contoh :
<style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
</style>
Perintah di atas dituiskan dengan tujuan agar tampilan halaman Web di layar
monitor memiliki batas halaman kiri 10% dari lebar layar monitor.

3. Mengatur inden kiri dan kanan


Agar halaman Web anda tampil lebih cantik bisa juga diberikan inden (spasi) dari
margin kiri beberapa huruf sebelum menuliskan awal kalimat.
Contoh :
<style type="text/css">
body { margin-left: 10%; margin-right: 10%; }
h1 { margin-left: -8%;}
h2,h3,h4,h5,h6 { margin-left: -4%; }
</style>

4. Mengatur jarak penulisan dari tepi atas dan bawah halaman


Program Browser biasanya mengerjakan batas atas dan bawah, paragraf
dan lain-lain dengan baik. Namun ketika anda ingin membuat ruang disebelah atas
atau bawah halaman web anda, atau anda ingin membuat spasi yang khusus,
barulah disini anda perlu memiliki cara mengaturnya. Property "margin-top"
menentukan ruang sebelah atas dan property "margin-below" menentukan ruang
sebelah bawah halaman web anda. Bila anda hendak mengatur semuanya dengan
heading h2, anda cukup menuliskan dengan perintah HTML sebagai berikut :
h2 { margin-top: 8em; margin-bottom: 3em; }
Kode em merupakan unit penting dalam mengatur ukuran tinggi font (huruf). Ini
lebih mudah bila dibandingkan dengan pengaturan pixel atau titik (point). Unit ini
48

akan sangat berguna pada pembuatan huruf besar. Satuan titik (Point) umumnya
dipergunakan oleh program word processor misalnya dituliskan ukuran huruf 10
pt. Sayangnya untuk ukuran titik yang sama, menghasilkan ukuran huruf yang
berbeda pada pemakaian program browser yang berbeda pula. Apa yang anda
kerjakan dengan baik dengan menggunakan sebuah program browser, bila dibaca
dengan program browser yang lain belum tentu baik !. Pergunakanlah kode em
untuk mengatasi hal ini. Untuk mengatur ruang sebelah atas bagian heading
halaman web, anda sebaiknya membuat nama style untuk heading tersebut. Dalam
penulisan HTML-nya anda cukup menggunakan atribut class.Contoh :
<h2 class="subsection">Getting started</h2>
Kemudian pengaturan ruangnya ditulis dengan perintah berikut :
h2.subsection { margin-top: 8em; margin-bottom:
3em; }
Pengaturan ini dimulai dengan nama tag, sebuah titik dan kemudian nilai dari
atribut class. Hati-hati dalam menempatkan ruang sebelum atau sesudah titik
tersebut.Bila pengaturan tersebut tidak memberikan hasil. Ada cara lain untuk
mengatur style elemen tertentu. Tapi atribut class tetap bersifat fleksibel. Pada
saat sebuah "heading" diikuti dengan sebuah paragraf, nilai untuk batas bawah
(margin-bottom) untuk heading tersebut tidak ditambahkan dengan nilai batas atas
(margin-top) paragraf.

5. Inden pada baris pertama


Kadang-kadang anda ingin membuat inden pada baris pertama tiap paragraf. Cara
berikut dapat anda lakukan.
p { text-indent: 2em; margin-top: 0; marginbottom:
0; }
Cara tersebut akan membuat inden pada baris pertama paragraf sejauh 2 em dan
memberikan jarak antar paragraf.
49

6.5. Mengatur Format Font.


• Model huruf
Model yang umum dipakai adalah teks miring (italik) atau tebal (bold). Umumnya
program browser mempergunakan tag em untuk huruf italic dan tag strong untuk
huruf tebal. Misalnya anda ingin menuliskan kode em agar huruf tampil berbentuk
italik dan tebal dan menuliskan kode strong untuk huruf tebal uppercase,
perintahnya dituliskan sebagai berikut :
em { font-style: italic; font-weight: bold; }
strong { text-transform: uppercase; font-weight:
bold; }
bila gagal dapat ditambahkan perintah ini :
h2 { text-transform: lowercase; }

• Mengatur ukuran huruf


Kebanyakan program browser mempergunakan huruf yang lebih besar untuk
heading yang penting sifatnya. Bila anda menimpa ukuran defaultnya, anda
menempuh resiko yaitu huruf menjadi tampak lebih kecil khususnya bila anda
mempergunakan ukuran yang anda tambahkan tersebut dengan ukuran titik
(point). Karenanya anda disarankan untuk melakukan pengaturan ukuran huruf
dengan ukuran yang sama. Contoh berikut mengatur ukuran heading dalam persen
relatif terhadap ukuran teks normal.
h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 100%; }

• Mengatur jenis huruf


Bisa saja jenis huruf favorit anda tidak bisa ditampilkan oleh berbagai jenis
browser. Untuk mengatasi hal ini anda dapat menuliskan beberapa jenis huruf
yang tidak dapat ditampilkan oleh hampir semua browser. Ada beberapa jenis
huruf generik yang dijamin cocok, sehingga anda kami sarankan untuk
50

mengakhiri daftar perintah HTML anda dengan salah satu jenis huruf berikut :
serif, sans-serif, cursive, fantasy, atau monospace, contoh :
body { font-family: Verdana, sans-serif; }
h1,h2 { font-family: Garamond, Times New Roman,
serif; }
Dalam contoh ini heading penting akan ditampilkan dalam bentuk huruf
Garamond, bila gagal maka akan ditampilkan dalam bentuk Times New Roman,
dan bila juga masih tidak dapat tampil, maka akan tampil sebagai huruf serif. Teks
paragraf akan ditampilkan dengan huruf Verdana atau bila masih tidak tampil
juga, maka browser masih dapat menampilkannya dengan jenis huruf standar
sans-serif.

• Cara menghindari masalah huruf dan batas tepi halaman web


Pertama pergunakan elemen p untuk mencegah teks pada body tulisan yang tidak
dapat ditampilkan dengan baik.Contoh :
<h2>Spring in Wiltshire</h2>
Blossom on the trees, bird song and the sound of
lambs
bleating in the fields.
Teks yang ditulis mengikuti sebuah heading dapat menimbulkan akibat tampilan
jenis huruf yang berbeda pada beberapa jenis program browser. Anda disarankan
segera menutup teks pada paragraf tersebut. Contoh :
<h2>Spring in Wiltshire</h2>
<p>Blossom on the trees, bird song and the sound
of lambs
bleating in the fields.</p>
Kedua pergunakan selalu elemen pre ketika anda menuliskan pengaturan jenis
huruf yang anda pergunakan.
pre { font-family: monospace; }
Ketiga pergunakan elemen p dan ul pada waktu mengatur jenis huruf untuk
heading. Khususnya ketika anda melakukan pengaturan border atau warna
51

halaman web anda dengan elemen div. Beberapa jenis program browser tidak
dapat melakukan pengaturan huruf dengan baik dan cenderung lupa sehingga
huruf heading anda tampak menjadi huruf standar saja. Untuk menghindari hal ini
anda dapat menuliskan perintah HTML sebagai berikut :
h1,h2,h3,h4,h5,p,ul { font-family: sans-serif; }

6.6. Menambahkan border dan latar belakang.


Anda dapat dengan mudah menambahkan border disekitar heading, daftar (list),
atau paragraf atau sekelompok heading, list dan paragraph secara tertutup dengan
mempergunakan elemen div. Contoh :
div.box{ border: solid; border-width: thin; width:
100% }
Catatan : tanpa property "width" beberapa browser akan menempatkan tepi kanan
terlalu jauh ke arah kanan. Untuk mencegah hal ini anda dapat menuliskan
perintah HTML-nya sebagai berikut :
<div class="box"> The content within this DIV
element will be enclosed in a box with a thin line
around it. </div>
Ada sedikit jenis border yaitu : dotted, dashed, solid, double, groove, ridge, inset
dan outset. Lebar border diatur dengan mempergunakan property "border-width".
Nilai dari property ini yaitu thin, medium dan thick yang tampak setipis ukuran
0.1em. Property "border-color" memungkinkan anda mengatur warna. Sebuah
efek yang cantik dapat dilakukan dengan memberikan warna latar belakang kotak
dengan warna tebal (solid color) atau dengan hamburan gambar ("tile image").
Untuk melakukan ini anda perlu mempergunakan property "background". Anda
dapat mengikuti perintah berikut ini.
div.color {
background: rgb(204,204,255);
padding: 0.5em;
border: none;
}
52

Tanpa pengaturan property border, biasanya program browser hanya akan


menampilkan warna standar saja. Property padding memberikan beberapa ruangan
diantara tepi-tepi daerah berrwarna dan teks yang ada didalamnya. Anda dapat
mengatur nilai property pading dengan menambahkan padding-left, padding-top,
padding-right dan padding-bottom. Pengaturan ini dituliskan misalnya sebagai :
padding-left: 1em.
Anggaplah anda menginginkan border pada satu sisi halaman web saja. Anda
dapat melakukan pengontrolan tiap sisi border dengan memberikan keterangan
border-left, border-top, border-right dan border-bottom.
Contoh :
p.changed {
padding-left: 0.2em;
border-left: solid;
border-right: none;
border-top: none;
border-bottom: none;
border-left-width: thin;
border-color: red;
}
Susunan perintah diatas memberikan efek pada tampilan web anda dengan border
berwarna merah disisi sebelah kiri.

6.7. Mengatur warna


Contoh berikut adalah perintah pengaturan warna.
body {
color: black;
background: white;
}
strong { color: red }
Model pengaturan diatas memberikan warna hitam teks (default) dan latar
belakang putih, tetapi memiliki elemen strong pada warna merah. Ada 16 buah
53

nama warna standar yang dijelaskan dalam uraian berikut. Selain itu anda dapat
juga mempergunakan nilai desimal untuk warna merah, hijau dan biru, dan
masing-masing memiliki interval antara 0 sampai 255. Misalnya rgb(255, 0, 0)
akan memberikan warna merah di layar monitor. Anda juga dapat
mempergunakan angka hexadecimal yang dimulai karakter # yang diikuti enam
angka hexadesimal sebagai pengaturan warna. Sebuah pengubah juga diberikan
dibawah ini agar anda dapat melakukan pengubahan nilai dari RGB ke nilai
hexadesimal.

• Mengatur warna link


Anda dapat mempergunakan CSS untuk mengatur warna hypertex link, dengan
warna yang berbeda untuk link yang belum pernah anda akses, link yang pernah
anda akses dan link yang akan kemudian anda akses serta link yang aktif. Anda
bahkan dapat mengatur warnanya pada saat kursor mouse berada diatas daerah
yang akan dilink.Hal ini dapat anda tuliskan dalam bentuk perintah berikut :
:link { color: rgb(0, 0, 153) } /* untuk warna link
yang belum diakses */
:visited { color: rgb(153, 0, 153) } /* untuk warna
link yang telah diakses */
:active { color: rgb(255, 0, 102) } /* untuk warna link
ketika link diklik */
:hover { color: rgb(0, 96, 255) } /* untuk warna link
ketika mouse diatasnya*/
Kadang-kadang anda ingin memperlihatkan link hyperteks tanpa garis bawah.
Anda dapat melakukan ini dengan memberikan property textdecoration atau none,
contoh :
a.plain { text-decoration: none }
Contoh berikut juga menampilkan link yang tidak bergaris bawah.
This is <a class="plain" href="what.html">not
underlined</a>
54

Kebanyakan orang ketika mereka melihat garis bawah dibawah sebuah link selalu
mengira itu adalah bagian teks yang diberi link. Umumnya orang memberikan
warna biru pada teks yang diberi link ke halaman atau alamat internet lain. Anda
disarankan untuk meninggalkan warna link ini apabila warna latar belakang
menyebabkan teks anda yang diberi link jadi sulit terbaca.
55

BAB 7. Aplikasi Pemrograman HTML

• Membuat Media Player Pada Situs e-Learning Dengan Bahasa HTML


Semua sudah mengetahui untuk menyisipkan media dalam sebuah situs,
perintahnya <embed. Masalahnya, media yang di attach selalu langsung diputar
saat situs dibuka dan ini membuat situs lama terbuka. Selain itu, kesulitan lainnya
adalah lagu yang diputar itu-itu aja dan harus diganti secara manual oleh
webmaster. Nah, sekarang kita akan membuat sebuah embed media untuk situs
yang tidak langsung diputar saat halaman dibuka dan juga mampu menyediakan
lagu untuk dipilih lebih dari satu.
Pertama-tama, tentukan media yang anda inginkan untuk diembed lebih dari satu.
Dalam hal ini mari kita gunakan MP3, embedlah lagu-lagu tersebut secara
terpisah, dan namakan sesuai nomor.
contoh :
lagu a = 1.htm
lagu b = 2.htm
lagu c = 3.htm
Dimana, anda harus membuat di tiap halaman, file yang diembed
disembunyikan, dengan besar 1x1pix. Jangan lupa beri text pada tiap halaman
yang diembed informasi mengenai lagu yang diembed pada halaman tersebut.
Untuk lebih jelasnya, berikut kode satu halaman yang diembed :
<html>
<head><title>EMBED1</title></head>
<body>
<embed src="1.mp3" width="1" height="1" hidden>
<marquee width="145">lagu no satu neeeh....</marquee>
</body></html>
Disana bisa dilihat bahwa file yang diembed adalah "1.mp3" dengan tinggi
1 dan lebar 1 dan disembunyikan dengan atribut "hidden>". Kemudian terdapat
pula informasi mengenai lagu yang saya embed yaitu "<marquee
width="145">lagu no satu neeeh....</marquee>" Jika anda menggunakan
56

frontpage, kopi paste saja kode diatas di bagian HTML. Kemudian, bukatlah
sebuah file html yang baru, yang didalamnya tertulis "lagu tidak diputar", dan beri
nama file tersebut : "lagutidakdiputar.htm" (tanpa tanda kutip) Setelah semuanya
diembed dengan nama yang berbeda beda, sekarang kita akan membuat
playernya. Player ini bisa terdepat di index.htm situs anda atau di halaman baru.
Player sendiri terdiri dari link-link yang menghubungkan player dengan halaman
dari lagu yang sudah diembed tadi dengan menggunakan fitur yang disebut
INLINE FRAME. kita anggap, halaman dimana lagu diembed tadi berjumlah tiga
buah. Yang perlu dilakukan adalah menyiapkan sebuah halaman dengan tiga link
dengan target inline frame dan sebuah inline frame berikut :
<html>
<head>
<title>Player</title>
</head>
<body>
<a title="LAGU SATU" target="playsong" style="text-
decoration: none; font-weight:
700" href="1.htm">1</a>
<a title="LAGU DUA" target="playsong" style="text-
decoration: none; font-weight:
700" href="2.htm">2</a>
<a title="LAGU TIGA" target="playsong" style="text-
decoration: none; font-weight:
700" href="3.htm">3</a>
<p>
<iframe name="playsong" src="lagutidakdiputar.htm"
scrolling="no" border="0"
frameborder="0">
BROWSER ANDA JELEK JADI GA BISA PAKEK INLINE FRAME,
SEGERA GANTI
BROWSER ANDA.</iframe>
57

</p>
</body>
</html>

Mari kita membedah ini terlebih dahulu :

<a title="LAGU SATU" target="playsong" style="text-


decoration:none;font-weight:700" href="song1.htm">1</a>

title="lagu satu" adalah titel dari link, sekaligus screen tip. Screen tip
adalah pesan kecil yang keluar pada saat mouse kita mengenai sebuah link. Jika
anda masih bingung mengenai ini, silahkan belajar ulang html.
target="playsong" playsong sendiri adalah nama dari inline frame yang kita
bikin. href="1.htm" adalah nama halaman yang akan ditampilkan pada inline
frame. >1</a> adalah nama link (pasti anda tahu...) Harap diingat, tehnik
penulisan kode link untuk inline frame BERBEDA dengan link biasa yang hanya
menggunakan <a href="TARGET">NAMA_LINK</a> Dibawahnya kita bisa
menemukan kode :

<iframe name="playsong" src="lagutidakdiputar.htm">


browser anda jelek jadi ga bisa pakek inline frame,
segera ganti browser anda.</iframe></p>

Ini adalah kode dari inline frame yang bernama playsong tersebut. Secara default,
inline frame memiliki border dan scrollbar, tapi saya matikan dengan
menggunakan perintah no dan 0 (scrolling="no" border="0"
frameborder="0"). Juga, anda lihat disana terdapat
src="lagutidakdiputar.htm">. Ini adalah halaman yang secara default
ditampilkan saat halaman player diakses sehingga lagu tidak langsung diputar.
Itulah sebabnya tadi saya suruh anda untuk membuat sebuah halaman tanpa
embed. Apa? saya tidak menyuruh? Silahkan scroll up. sedangkan tulisan
58

"browser anda jelek jadi ga bisa pakek inline frame, segera ganti browser anda."
Adalah pesan untuk mereka yang tidak support inline frame. Savelah dengan
nama player.htm
59

Daftar Pustaka

• http://www.gnu.org/copyleft/fdl.html
• http://www.w3.org/TR/REC-html40/present/basichtml.html
• http://www.ilmukomputer.com
• http://www.oke.or.id/?p=tutorial&cat=13
• Limanto, Susana, dkk.2002.Algoritma dan pemrograman. Dinastindo
• Herlambang, Ferry.2005. Trik Explorasi Dreamweaver MX. Elexmedia
Komputindo; Jakarta

Anda mungkin juga menyukai