Contoh-Contoh Script
HTML
1. Contoh HTML
sederhana :
<html>
<head>
<title>struktur
dokumen html </title>
</head>
<body>
hello,…
selamat belajar membuat home page dengan html
</body>
</html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik1.html
Jalankan
internet explorer dan buka file praktik1.html
2. Heading dalam HTML :
<html>
<head>
<title>
::heading dokumen html:: </title>
</head>
<body>
<h1>heading
tingkat 1 </h1>
<h2>heading
tingkat 2 </h2>
<h3>heading
tingkat 3 </h3>
<h4>heading
tingkat 4 </h4>
<h5>heading
tingkat 5 </h5>
<h6>heading
tingkat 6 </h6>
</body>
</html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik2.html
Jalankan
internet explorer dan buka file praktik2.html
3. Paragraf dalam HTML
:
<html>
<head>
<title>paragraf</title>
</head>
<body>
<p
align="right">
HTTP
adalah suatu protokol yang menentukan aturan yang perlu diikuti oleh web
browser dalam meminta atau mengambil suatu dokumen dan oleh web server dalam
menyediakan dokumen yang diminta web browser.
<p
align="center">
Internet
berasal dari kata interconnection networking yang mempunyai arti hubungan
berbagai komputer dan berbagai tipe komputer yang membentuk sistem jaringan dan
mencakup seluruh dunia (jaringan global) dengan melalui jalur telekomunikasi seperti
telepon, wireless dan lainnya.
<p
align="left">
Web
Browser yang bertindak sebagai client memungkinkan anda untuk
menginterpretasikan dan melihat informsi pada Web, sedang web server yang
bertindak sebagai server memungkinkan anda untuk menerima informasi yang
diminta browser
</P>
</body>
</html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik3.html
Jalankan
internet explorer dan buka file praktik3.html
4. Preformatted Text
dalam HTML :
<html>
<head>
<title>preformatted
text</title>
</head>
<body>
<pre>
uniform
resource locator (url)
==============================
url
adalah suatu sarana yang dipakai untuk menentukan lokasi informasi pada suatu
web server.
url
dapat diibaratkan suatu alamat, dimana alamat tersebut terdiri dari :
:)
protokol yang digunakan oleh suatu browser untuk mengambil informasi
:)
nama komputer ( server ) dimana informasi tersebut berada
:)
jalur/path serta nama file dari suatu informasi
</pre>
</body>
</html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik4.html
Jalankan
internet explorer dan buka file praktik4.html
5. BLOCKQUOTE dalam
HTML :
<html>
<head> <title>blockquote</title> </head> <body>
<h3>sesuatu yang tidak perlu dicoba</h3> <blockquote> sesuatu
yang kelihatan mengasyikkan tapi sebenarnya lebih banyak menambah masalah pada
remaja adalah narkoba, seks, alkohol dan merokok. jangan sekali-kali mencoba
jika tidak ingin membuat masalah baru</blockquote>
</body>
</html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik5.html
Jalankan
internet explorer dan buka file praktik5.html
6. Line Break dalam
HTML :
<html>
<head> <title>linebreak</title> </head> <body>
<p>banyak cara yang dapat digunakan untuk melakukan instalasi freebsd.
namun ada tiga cara yang
paling sering dilakukan , yaitu : <br>instalasi melalui ftp<br>
instalasi melalui cdrom
<br>
instalasi melalui partisi dos
</body>
</html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik6.html
Jalankan
internet explorer dan buka file praktik6.html
7. Ukuran font dalam
HTML :
<html>
<head> <title>ukuran font</title> </head> <body>
<font size=1>ukuran font 1</font><br> <font
size=2>ukuran font 2</font><br> <font size=3>ukuran font
3</font><br> <font size=4>ukuran font 4</font><br>
<font size=5>ukuran font 5</font><br> <font
size=6>ukuran font 6</font><br> <font size=7>ukuran font
7</font><br> </body> </html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik7.html
Jalankan
internet explorer dan buka file praktik7.html
8. Jenis font dalam
HTML :
<html>
<head> <title>jenis font</title> </head> <body>
<font size=5> <font face = "arial">arial , contoh ac
milan <p> <font face = "verdana">verdana , contoh
persebaya <p> <font face = "tahoma">tahoma , contoh
indonesia <p> </body> </html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik8.html
Jalankan
internet explorer dan buka file praktik8.html
9. Warna font dalam
HTML :
<html>
<head> <title>warna font</title> </head> <body>
<font size=5> <font color= "red">yogyakarta <p>
<font color =
"#ff0000">kota budaya <p> <font color =
"#00ff00">kota pariwisata dan pendidikan<p> </body>
</html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik9.html
Jalankan
internet explorer dan buka file praktik9.html
10. Link dalam HTML :
<html>
<head> <title>link</title> </head> <body> <a
name="atas">pemain-pemain ac milan menurut abjad</a>
<blockquote> <p>abbiati ,<a href="#info">info
lengkap</a>
<p>ayala
<p>ambrosini <p>albertini <p>boban <p> <a
href="contoh_2.html">kalo mau tahu lagi klik disini</a>
</blockquote> <p><a name="info">abbiati</a>
<blockquote>
<p>kiper ketiga timnas italia runner up euro 2000 <br>kiper utama
u-21 juara piala eropa u-21 <br>kiper utama ac milan juara seri-a
1998-1999 </blockquote> <p><a href="#atas">kembali
ke atas</a>
</body>
</html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik10.html
Jalankan
internet explorer dan buka file praktik10.html
11. Link tujuan dalam
HTML :
<html>
<head> <title>link tujuan</title> </head> <body>
<p align="center"> maaf, hanya sedikit <br>chamot
<br>dida <br>shevchenko <br><a
href="praktik10.html">kembali</a> </body> </html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan kedalam
direktori data anda dengan nama file praktik11.html
Jalankan
internet explorer dan buka file praktik11.htm
12. Membuat Tabel
<html>
<head>
<title>::
Tabel ::</title>
</head>
<body>
<table
border=1 align="center" cellpadding=0 cellspacing=0>
<tr>
<th>No.</th>
<th>Nama
</th>
<th>Alamat</th>
<th>No.
Telpon</th>
</tr>
<tr>
<td>1</td>
<td>Dr.
Hamzah Haz</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td>Mega
Mendung</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>Bejo
Sembrono</td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik12.html
Jalankan
internet explorer dan buka file praktik12.html
13. Membuat Tabel
Kompleks
<html>
<head>
<title>::
Tabel yang kompleks ::</title>
</head>
<body>
<table
width="750" border="1" cellspacing="1"
cellpadding="1" align="center">
<tr>
<td
colspan="8">
<div
align="center">Fakultas</div>
</td>
</tr>
<tr>
<td
colspan="3">
<div
align="center">Bahasa</div>
</td>
<td
colspan="2">
<div
align="center">Ekonomi</div>
</td>
<td
colspan="3">
<div
align="center">Teknik</div>
</td>
</tr>
<tr>
<td
width="78" height="22">
<div
align="center">Inggris</div>
</td>
<td
width="75" height="22">
<div
align="center">Jepang</div>
</td>
<td
width="80" height="22">
<div
align="center">Mandarin</div>
</td>
<td
width="98" height="22">
<div
align="center">Ekonomi</div>
</td>
<td
width="92" height="22">
<div
align="center">Manajemen</div>
</td>
<td
width="83" height="22">
<div
align="center">Industri</div>
</td>
<td
width="99" height="22">
<div
align="center">Informatika</div>
</td>
<td
width="102" height="22">
<div
align="center">Mesin</div>
</td>
</tr>
</table>
</body>
</html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik13.html
Jalankan
internet explorer dan buka file praktik13.html
14. Membuat Form Input
dengan Text box
<html>
<head>
<title>form
input dengan text box</title>
</head>
<body>
<p>rancangan
awal buku tamu </p>
<table
border="0" cellpadding="0" cellspacing="2">
<tr>
<td
width="11%">nama</td>
<td
width="3%">:</td>
<td
width="86%"><input type="text" name="nama"
size="20"></td>
</tr>
<tr>
<td
width="11%">alamat</td>
<td
width="3%">:</td>
<td
width="86%"><input type="text"
value="jember" name="alamat"
size="20"></td>
</tr>
<tr>
<td
width="11%">sekolah</td>
<td
width="3%">:</td>
<td
width="86%"><input type="text"
name="sekolah" size="20"></td>
</tr>
</table>
</body>
</html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik14.html
Jalankan
internet explorer dan buka file praktik14.html
15. Membuat Form Input
dengan Check box
<html>
<head>
<title>form
input dengan check box</title>
</head>
<body>
<p>pilih
yang anda suka </p>
<p>daftar
menu masakan</p>
<p>
<input
type="checkbox" name="c1" checked>ayam goreng<br>
<input
type="checkbox" name="c2">gado-gado<br>
<input
type="checkbox" name="c3">sate kambing<br>
<input
type="checkbox" name="c4">nasi goreng
</p>
</body>
</html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik15.html
Jalankan
internet explorer dan buka file praktik15.html
16. Membuat Form Input
dengan Radio
box
<html>
<head>
<title>form
input dengan radio box</title>
</head>
<body>
<p>pilih
salah satu </p>
<p>usia anda</p>
<p>
<input
type="radio" value="v1" checked name="r1"><
15 tahun<br>
<input
type="radio" value="v2" name="r1">15-19
tahun<br>
<input
type="radio" value="v3" name="r1">19-25
tahun<br>
<input
type="radio" value="v4" name="r1">25-35
tahun<br>
<input
type="radio" value="v5" name="r1"> > 35
tahun<br>
</p>
</body>
</html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik16.html
Jalankan
internet explorer dan buka file praktik16.html
17. Membuat Formulir
Buku Tamu
<html>
<head><title>buku
tamu</title></head>
<body>
<h3><p
align="center">buku tamu</p></h3>
<form
method="post" action="thanks.html">
<table
border="0" cellpadding="2" width="100%">
<tr>
<td
width="8%">nama</td>
<td
width="4%">:</td>
<td
width="88%"><input type="text" name="nama"
size="20"></td>
</tr>
<tr>
<td
width="8%">asal</td>
<td
width="4%">:</td>
<td
width="88%"><input type="text" name="asal"
size="20"></td>
</tr>
<tr>
<td
width="8%">email</td>
<td
width="4%">:</td>
<td
width="88%"><input type="text" name="email"
sizee="20"></td>
</tr>
<tr>
<td
width="8%" valign="top">homepageku</td>
<td
width="4%" valign="top">:</td>
<td
width="88%"><input type="radio" value="v1"
checked name="r1">bagus sekali<br>
<input
type="radio" value="v2"
name="r1">bagus<br>
<input
type="radio" value="v3" name="r1">biasa
saja<p> </td>
</tr>
</table>
<p><input
type="submit" value="kirim" name="b1">
<input
type="reset" value="batal"
name="b2"></p>
</form>
</body>
</html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik17.html
Jalankan
internet explorer dan buka file praktik17.html
18. Membuat Frame
<html>
<head>
<title>contoh
frame</title>
</head>
<frameset
rows=20%,*>
<frame
name=header src=header.html>
<frameset
cols=35%,*>
<frame
name=kiri src=kiri.html>
<frame
name=utama src=kanan.html>
</frameset>
</frameset>
</html>
Tulislah
kode html tersebut diatas dengan program editor notepad, kemudian simpan
kedalam direktori data anda dengan nama file praktik18.html
Pada
frame tersebut memerlukan 3 file yaitu header.html, kiri.html dan kanan.html
dan profil.html maka buatlah file tersebut sebelum dijalankan.
Misalnya
:
Nama File :
Header.html
<html>
<head>
<title>:::header:::</title>
</head>
<body
bgcolor="#CCECCA">
<font
face="Georgia" size="4"><i><font
size="+2" color="#33842F">Selamat
Datang</font><font size="+2"><b><font
color="#009999">di</font>
</b></font></i></font><b><font
face="Georgia" size="+4" color="#25611F">
<strong>www.gembus.com</strong> </font> <font
face="Georgia" size="+4"></font></b>
</body>
</html>
Nama File :
kiri.html
<html>
<head>
<title>::kiri::</title>
</head>
<body
bgcolor="#ccecca">
<p
align="center"><font face="verdana"
size="2"><a href="profil.html"
target="utama">profil</a><br>
<a
href="album.html"
target="utama">album</a><br>
<a
href="buku.html" target="utama">buku tamu</a><br>
<a
href="forum.html" target="utama">forum</a>
<br>
<a
href="link.html"
target="utama">link</a></font></p>
</body>
</html>
Nama File : kanan.html
<html>
<head>
</head>
<body>
</body>
</html>
Nama File :
profil.html
<html>
<head>
</head>
<body
bgcolor="#ffffff" text="#000000">
<p><font
face="verdana" size="2">profil :<br>
portal
web ini adalah hasil karya anak-anak yang suka gembus</font></p>
</body>
</html>
buatlah
atau tulis kode file-file tersebut diatas
Jalankan
internet explorer dan buka file praktik18.html
