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