1.
aWWW (World Wide Web) merupakan kumpulan
informasi pada beberapa server komputer yang terhubung satu sama lain dalam
jaringan Internet.
aWeb server adalah suatu perangkat komputer
berupa software yang digunakan untuk menjadi sebuah komputer menjadi server
yang dapat menangani semua kegiatan yang berhubungan dengan protokol HTTP.
aBrowser adalah suatu program yang
dirancang untuk mengambil informasi dari suatu server komputer pada jaringan
Internet.
aHTML adalah format data yang dipakai untuk
membuat dokumen HyperText.
2.
|
<!–
–>
|
Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner
ini tidak akan terlihat pada browser
|
|
<a
href>
|
Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
|
|
<a
name>
|
Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
|
|
<applet>
|
Sebagai awal dari Java applets
|
|
<area>
|
Mendefinisikan daerah yang dapat diklik (link) pada image map
|
|
<b>
|
Membuat teks tebal
|
|
<basefont>
|
Membuat atribut teks default seperti jenis, ukuran dan warna font
|
|
<bgsound>
|
Memberi (suara latar) background sound pada halaman web
|
|
<big>
|
Memperbesar ukuran teks sebesar satu point dari defaultnya
|
|
<blink>
|
Membuat teks berkedip
|
|
<body>
|
Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link
& visited link
|
|
<br>
|
Pindah baris
|
|
<caption>
|
Membuat caption pada tabel
|
|
<center>
|
Untuk perataan tengah terhadap teks atau gambar
|
|
<comment>
|
Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
|
|
<dd>
|
Indents teks
|
|
<div>
|
Represents different sections of text.
|
|
<embed>
|
Menambahkan sound or file avi ke halaman web
|
|
<fn>
|
Seperti tag <a name>
|
|
<font>
|
Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
|
|
<form>
|
Mendefinisikan input form
|
|
<frame>
|
Mendefinisikan frame
|
|
<frameset>
|
Mendefinisikan attribut halaman yang akan menggunakan frame
|
|
<h1>
… <h6>
|
Ukuran font
|
|
<head>
|
Mendefinisikan head document.
|
|
<hr>
|
Membuat garis horizontal
|
|
<html>
|
Bararti dokumen html
|
|
<i>
|
Membuat teks miring
|
|
<img>
|
Image, imagemap atau an animation
|
|
<input>
|
Mendefinisikan input field pada form
|
|
<li>
|
Membuat bullet point atau baris baru pada list (berpasangan dengan tag
<dir>, <menu>, <ol> and <ul> )
|
|
<map>
|
Mendefinisikan client-side map
|
|
<marquee>
|
Membuat scrolling teks (teks berjalan) – hanya pada MS IE
|
|
<nobr>
|
Mencegah ganti baris pada teks atau images
|
|
<noframes>
|
Jika browser user tidak mendukung frame
|
|
<ol>
|
Mendefinisikan awal dan akhir list
|
|
<p>
|
Ganti paragraf
|
|
<pre>
|
Membuat teks dengan ukuran huruf yg sama
|
|
<script>
|
Mendefinisikan awal script
|
|
<table>
|
Membuat tabel
|
|
<td>
|
Kolom pada tabel
|
|
<title>
|
Mendefinisikan title
|
|
<tr>
|
Baris pada tabel
|
|
<u>
|
Membuat teks bergaris bawah
|
3.
<html>
<html>
<head>
<title>Biodata
Ku</title>
<body>
<p>Nama : ARIF HIDAYAT</p>
<p>T.T.L : Pekanbaru, 10 Maret
1997</p>
<p>Agama : Islam</p>
<p>Alamat : Jl.A.Yani Gg Ar-Ridha II No.203</p>
<p>No.HP : 085374996580</p>
<p>Zodiak : Pisces</p>
</body>
</html>
Menjadi
4.
DNS
(Domain Name System) Untuk mempermudah pengelolaan Web server dan Web browser
pada komputer di Internet, komputer di Internet menggunakan suatu format
penamaan.
URL (Uniform
Resource Locator) adalah suatu alamat yang dipakai untuk menentukan lokasi
informasi pada Web server, karena alamat ini mengambil informasi yang diminta
oleh browser.
5. BAB
2
Elemen html :
<html>
<head>
-- Informasi tentang dokumen HTML
</head>
<body>
-- Informasi yang akan ditampilkan dalam web browser
-- Informasi yang akan ditampilkan dalam web browser
</body>
</html>
Elemenlisting2.1.html
<html>
<head>
<title>Belajar Web Design</title>
</head>
ini adalah halaman HTML
<body>
</body>
</html>
Tag html
<html>
........................
</html>
Tag head
<head>
<title>Belajar Web Design</title>
</head>
Title
<title>Belajar Web Design HTML</title>
Body html
<html>
<head>
<title>Belajar Web Design</title>
</head>
<body>
ini adalah section HTML
yang ditampilkan di browser
</body>
</html>
Paragraph html
<html>
<head>
<title>Tag Paragraf</title>
</head>
<body>
<p>berikut ini adalah paragraf 1</p>
<p>berikut ini
adalah paragraf 2</p>
<p>berikut ini
adalah paragraf 3</p>
</body>
</html>
Paragraf listing 3.7
<html>
<head>
<title>Paragraf</title>
</head>
<body>
<p>Pada tahun 1950-an Kolonel Sanders (pendiri KFC) mulai
mengendarai mobilnya dari kota
ke kota untuk
memulai bisnis KFC-nya, dengan cara menawarkan resep rahasianya dari satu
restoran ke restoran yang lainnya. Kadang beliau tidur di dalam mobilnya dan
memakan ayam buatannya sendiri untuk bisa bertahan. Dia baru dapat mencapai
tujuannya setelah bertemu dengan orang yang ke-1010. Orang tersebut berpikir
ayam Kolonel tersebut cukup bagus untuk di jual ke publik
</p>
<p>Contoh lainnya Thomas Alfa Edison yang mengalami
kegagalan sebanyak 9000 kali sebelum akhirnya ia menemukan bola lampu. Dia
tidak menyesal dengan kegagalan-kegagalannya, bahkan ia berkata beruntung
menemukan 8999 cara yang salah dalam membuat bola lampu. Kemudian ia dapat
membuat 1093 paten, orang yang paling banyak memegang paten dalam sejarah
Amerika</p>
</body>
</html>
Line break
<html>
<head>
<title>Ganti
Baris</title>
<head>
<body>
ini adalah baris ke 1<br>
ini adalah baris ke
2<br>
ini adalah baris ke
3<br>
ini adalah baris ke
4<br>
ini adalah baris ke
5<br>
</body>
</html>
Heading html
<html>
<head><title>Heading</title></head>
<body>
<h1>Heading
1</h1>
<h2>Heading
2</h2>
<h3>Heading
3</h3>
<h4>Heading
4</h4>
<h5>Heading
5</h5>
<h6>Heading
6</h6>
</body>
</html>
Garis pembats html
<html>
<head>
<title>Horizontal Rule</title>
</head>
<body>
<p align=”center”>Paragraf pertama</p>
<hr align=”center” color=”#0000FF” size=”3” width=”90%”>
<p align=”center”>Paragraf keduapertama</p>
</body>
</html>
Komentar html
<html>
<head>
<title>Horizontal Rule</title>
</head>
<body>
<!-- komentar ni
tidak akan ditampilkan di browser -->
<p>Tulisan ini
akan ditampilkan di browser</p>
</body>
</html>
Bab 3
Pemformatan teks
<html>
<head>
<title>Format Teks</title>
</head>
<body>
<p><b>Tulisan ini ditebalkan
(bold)</b></p>
<p><strong>Tulisan
ini ditebalkan (strong)</strong> </p>
<p><em>Tulisan ini miring (emphasize)
</em></p>
<p><big>Tulisan ini besar
(big)</big></p>
<p><i>Tulisan ini miring (italic)
</i></p>
<p>Tulisan ini <sub>subscript</sub> </p>
<p>Tulisan ini
<sup>superscript</sup></p>
</body>
</html>
Teks preformat
<html>
<head>
<title>Tag
Preformatted</title>
</head>
<body>
<pre>
This section provides a
brief overview of the menus in Dreamweaver.
The File menu and Edit menu contain the standard menu items for
File and Edit.
menus, such as New, Open,
Save, Save All, Cut, Copy, Paste, Undo,
and Redo
</pre>
<pre>
Ini adalah
preformatted text.
Menampilkan spasi
Dan line break apa adanya.
</pre>
<p>Tag PRE cocok digunakan untuk menampilkan kode bahasa pemrograman
komputer :</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
Quotation
<html>
<head>
<title>quotation</title>
</head>
<body>
tulisan ini BUKAN quotation
<blockquote>
tulisan ini adalah quotation <br>
tulisan ini adalah
quotation <br>
tulisan ini adalah
quotation <br>
</blockquote>
</body>
</html>
BAB
4
Tag anchor
<a
href="http://www.eepis-its.edu">Link ke
www.eepis-its.edu</a>
Link relative
<html>
<head>
<title>Link Relatif</title>
</head>
<body>
<a
href="biodata.html">Biodata</a></body>
</html>
Link absolut
<html>
<head>
<title>link</title>
</head>
<body>
<a href="http://www.eepis-its.edu" >Link ke
www.eepis-its.edu</a>
</body>
</html>
Link ke bagian
lain dalam dokumen yang sama
<html>
<head>
<title>Link dalam satu
dokumen</title>
</head>
<body>
<p>Isi Bab :</p>
<p><a
href="#isibab1">1. Bab 1</a><br>
<a href="#isibab2">2. Bab
2</a><br>
<a href="#isibab3">3. Bab
3</a></p>
<p> </p>
<h2><a name="isibab1">Bab1</a></h2>
<p>isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab
1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan
bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi
penjelasan bab 1,isi penjelasan bab </p>
<h2><a name="isibab2">Bab 2</a> </h2>
<p>isi penjelasan bab 2, isi penjelasan bab 2,isi penjelasan bab
2,isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2, isi
penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab
2,isi penjelasan bab 2,isi penjelasan bab 2</p>
<h2><a name="isibab3">Bab 3 </a></h2>
<p>isi penjelasan bab 3, isi penjelasan bab 3, isi penjelasan bab
3, isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi
penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab
3,isi penjelasan bab 3,isi penjelasan bab 3.</p>
</body>
</html>
Membuat Link untuk window baru
<html>
<head>
<title>link new
window</title>
</head>
<body>
membuka alamat website eepis
dengan membuka window baru : <a href="http://www.eepis-its.edu"
target="_blank">www.eepis-its.edu</a>
</body>
</html>
mailto
<html>
<head>
<title>Mailto</title>
</head>
<body>
kirim email ke humas PENS :
<a href="mailto:info@eepis-its.edu">info@eepis-its.edu
</a>
</body>
</html>
BAB 5
Ordered list
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<p>Daftar Hari :
</p>
<ol>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>
<p>Daftar Kuliah :
</p>
<ol>
<li>Web Design</li>
<li>Pemrograman web</li>
<li>Database </li>
</ol>
</body>
</html>
Ordered list
5.1
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<p>Daftar Hari :
</p>
<ol
type="A">
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>
<p>Daftar Kuliah :
</p>
<ol
type="i">
<li>Web Design</li>
<li>Pemrograman web</li>
<li>Database </li>
</ol>
</body>
</html>
Underd list
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<p>Daftar Hari :
</p>
<ul>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>
</body>
</html>
Undered list
5.4
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<p>Daftar Hari : </p>
<ul type="circle">
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>
</body>
</html>
Nested list
<html>
<head>
<title>Nested List</title>
</head>
<body>
<ol>
<li>Buah</li>
<ul
type="circle">
<li>Semangka</li>
<li>Jambu</li>
</ul>
<li>Bunga</li>
<ul type="disc">
<li>Melati</li>
<li>Anggrek</li>
</ul>
<li>Kendaraan</li>
<ul type="square">
<li>Mobil</li>
<li>Sepeda Motor </li>
</ul>
</ol>
</body>
</html>
Definition
list
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Definition List</title>
</head>
<body>
<h3>Contoh Definition List</h3>
<dl>
<dt>Web
Design</dt>
<dd>Belajar HTML
- Macromedia Dreamweaver</dd>
<dt>Pemrograman
Web</dt>
<dd>Belajar PHP
MySQL</dd>
</dl>
</body>
</html>
BAB 6
Memasukan
Gambar pada html
<html>
<head>
<title>Image HTML</title>
</head>
<body>
<p>Gambar Komputer dalam folder yang sama dengan letak
file HTML-nya :</p>
<p><img src="computer1.jpg"
width="102" height="102"></p>
<p>Gambar Komputer dari folder yang berbeda dengan letak
file HTML-nya : </p>
<p><img
src="file:///C|/udinharun/bukuwebdesigncc/jpg/computer2.jpg"
width="141" height="125"></p>
<p>Gambar dari
www.eepis-its.edu</p>
<p><img
src="http://www.eepis-its.edu/images/stories/stories/2005/bungalahir.jpg"
width="382" height="54"> </p>
</body>
</html>
Alignment Image
<html>
<head>
<title>image align</title></head>
<body>
<p>Sebuah gambar<img src="jpg/bunga1.jpg"
width="103" height="77" align="top"> di tengah
teks dengan atribut align = top <br>
<p>Sebuah gambar<img src="jpg/bunga1.jpg" width="103"
height="77" align="middle"> di tengah teks dengan
atribut align = top <br>
<p>Sebuah gambar<img src="jpg/bunga1.jpg"
width="103" height="77" align="bottom"> di
tengah teks dengan atribut align = top <br>
</p>
</body>
</html>
Floating
image
<html>
<head>
<title>Floating Image</title>
</head>
<body>
<p><img src="jpg/house1.jpg"
width="114" height="62" hspace="10"
vspace="5" align="left">Sebuah paragraf yang berisi
image. atribut align image diisi dengan "left". Sebuah
paragraf yang berisi image. atribut align image diisi dengan
"left". Sebuah paragraf yang berisi image. atribut align
image diisi dengan "left". Sebuah paragraf yang berisi image.
atribut align image diisi dengan "left". </p>
<p><img
src="jpg/house1.jpg" width="114" height="62"
hspace="10" vspace="5" align="right">Sebuah
paragraf yang berisi image. atribut align image diisi dengan
"right". Sebuah paragraf yang berisi image. atribut align
image diisi dengan "right".Sebuah paragraf yang berisi image.
atribut align image diisi dengan "right". Sebuah paragraf
yang berisi image. atribut align image diisi dengan "right".
Sebuah paragraf yang berisi image. atribut align image diisi dengan "right".</p>
</body>
</html>
Image
adjustment
<html>
<head>
<title>Adjustment Image</title>
</head>
<body>
<p>Image dengan ukuran 71 x 53 </p>
<p><img src="jpg/house1.jpg"
width="71" height="53"></p>
<p>Image dengan ukuran 122 x 79 </p>
<p><img src="jpg/house1.jpg"
width="122" height="79"></p>
<p>Image dengan ukuran 163 x 93 </p>
<p><img src="jpg/house1.jpg"
width="163" height="93">
</p>
</body>
</html>
Teks
alternative untuk image
<html>
<head>
<title>Alternatif Image</title>
</head>
<body>
<img src="jpg/back.jpg" alt="klik to
next" width="111" height="65">
<br>
Browser akan menampilkan tulisan <strong>klik to
next</strong> jika mouse kita letakkan diatas gambar anak panah
</body>
</html>
Image sebagai
link
<html>
<head>
<title>image link</title>
</head>
<body>
<p><a href="http://www.eepis-its.edu"
target="_blank"><img src="jpg/back.jpg"
width="111" height="87" border="0"></a>
</p>
<p>Membuat image menu dengan menambahkan tag <a
href>. jika icon anak panah kita klik, maka akan muncul alamat website
www.eepis-its.edu. </p>
</body>
</html>
Image map
<html>
<head>
<title>image map</title>
</head>
<body>
<div align="center"><img
src="jpg/house1.jpg" width="202" height="90"
border="0" usemap="#Maprumah">
<map
name="Maprumah" id="Maprumah">
<area
shape="rect" coords="62,17,103,49"
href="atap.htm" alt="atap rumah">
<area
shape="circle"coords="45,65,15"
href="dinding.htm" alt="dinding rumah">
</map>
</div>
</body>
</html>
Source kode
6.8
<html>
<head>
<title>atap rumah</title>
</head>
<body>
Anda menekan daerah atap
rumah
</body>
</html>
Sorce kode
6.9
<html>
<head>
<title>Dinding Rumah</title>
</head>
<body>
anda menekan daerah dinding rumah
</body>
</html>
BAB 7
Tabel html
y>
</html><html>
<body>
<p><strong>
Satu Kolom:</strong></p>
<table border="1">
<tr>
<td>500</td>
</tr>
</table>
<h4>Satu baris dan
lima kolom:</h4>
<table border="1">
<tr>
<td>1000</td>
<td>2000</td>
<td>3000</td>
<td>4000</td>
<td>5000</td>
</tr>
</table>
<h4>Dua baris dan
lima kolom :</h4>
<table border="1">
<tr>
<td>1000</td>
<td>2000</td>
<td>3000</td>
<td>5000</td>
<td>6000</td>
</tr>
<tr>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>11000</td>
</tr>
</table>
</bod
Border, Align
dan Background tabel
<html><title>Border Tabel</title>
<body>
<h4>border normal, letak di tengah:</h4>
<table border="1" align="center">
<tr>
<td>Baris Pertama - Kolom
Pertama </td>
<td>Baris Pertama - Kolom
Kedua </td>
</tr>
<tr>
<td>Baris Kedua - Kolom
Pertama </td>
<td>Baris Kedua - Kolom Kedua
</td>
</tr>
</table>
<h4>border lebih tebal, letah di tengah, lebar tabel
90%:</h4>
<table border="8" align="center"
width="90%">
<tr>
<td>Baris Pertama - Kolom
Pertama </td>
<td>Baris Pertama - Kolom
Kedua</td>
</tr>
<tr>
<td>Baris Kedua - Kolom
Pertama</td>
<td>Baris Kedua - Kolom Kedua
</td>
</tr>
</table>
<h4>border sangat tebal, letak di tengah, lebar tabel 90%, warna
background = #FFDFAA: </h4>
<table width="90%"
border="15" align="center" bgcolor="#FFDFAA">
<tr>
<td>Baris Pertama - Kolom Pertama
</td>
<td>Baris Pertama - Kolom
Kedua</td>
</tr>
<tr>
<td>Baris Kedua - Kolom
Pertama</td>
<td>Baris Kedua - Kolom Kedua
</td>
</tr>
</table>
</body>
</html>
Table tanpa
border
<html><title>Tabel tanpa border</title>
<body>
<h4>Tabel tanda
border :</h4>
<table>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>GHI</td>
</tr>
<tr>
<td>JKL</td>
<td>MNO</td>
<td>PQR</td>
</tr>
</table>
</body>
</html>
Table header
<html><title>Tabel
Header</title>
<body>
<h4>Table
header:</h4>
<table
border="1">
<tr>
<th>Name</th>
<th>Jurusan</th>
<th>Institusi</th>
</tr>
<tr>
<td>Hasan Abdul Karim </td>
<td>Teknologi Informasi </td>
<td>PENS ITS </td>
</tr>
</table>
<h4>Vertical
header:</h4>
<table
border="1">
<tr>
<th>Nama :</th>
<td>Hasan Abdul Karim </td>
</tr>
<tr>
<th>Jurusan</th>
<td>Teknologi Informasi </td>
</tr>
<tr>
<th>Institusi</th>
<td>PENS ITS </td>
</tr>
</table>
</body>
</html>
Empty cell
<html><title>Empty Cell</title>
<body>
<table border="1">
<tr>
<td>Tulisan Teks
</td>
<td>Tulisan
Teks</td>
</tr>
<tr>
<td></td>
<td>Tulisan Teks</td>
</tr>
<tr>
<td> </td>
<td>Tulisan Teks</td>
</tr>
</table>
<p>Jika suatu
tabel tidak ada data, maka akan dianggap tidak ada border seperti terlihat pada
baris kedua - kolom pertama. Untuk mengatasinya bisa dengan trik memberikan
spasi, yaitu dengan teks di kode "&nbsp;".
</p>
</body>
</html>
Colspan dan Rowspan
<html><title>Colsapn
dan Rowspan</title>
<body>
<h4>Colspan 3 kolom:</h4>
<table
border="1">
<tr>
<th>Hari</th>
<th
colspan="3">Kuliah</th>
</tr>
<tr>
<td>Senin</td>
<td>Web Design</td>
<td>Aplikasi Web </td>
<td>Database </td>
</tr>
</table>
<h4>Rowspan 3
row:</h4>
<table
border="1">
<tr>
<th>Hari:</th>
<td>Senin</td>
</tr>
<tr>
<th
rowspan="3">Kuliah</th>
<td>Web Design</td>
</tr>
<tr>
<td>Aplikasi Web</td>
</tr>
<tr>
<td>Database</td>
</tr>
</table>
</body>
</html>
Tag didalam
satu table
<html><title>Tag
di dalam tabel</title>
<body>
<table
border="1">
<tr>
<td><p>Sebuah paragraf </p>
<p>Paragraf lain </p></td>
<td>Cell berisi tabel
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr><td>C</td>
<td>D</td></tr>
</table>
</td>
</tr>
<tr>
<td>Cell berisi list
<ul>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
</ul>
</td>
<td>PENS ITS </td>
</tr>
</table>
</body>
</html>
Cell padding
<html><title>cellpadding</title>
<body>
<h4>Tanpa
cellpadding:</h4>
<table
border="1">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
<h4>Dengan
cellpadding:</h4>
<table
border="1"
cellpadding="10">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
</body>
</html>
Cell spacing
<html><title>cellspacing</title>
<body>
<h4>Tanpa
cellspacing:</h4>
<table
border="1">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
<h4>Dengan
cellspacing:</h4>
<table
border="1"
cellspacing="10">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
</body></html>
Background
pada table
<html><title>Background
Tabel</title>
<body>
<h4>Dengan background
warna:</h4>
<table border="1"
bgcolor="green">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
<h4>Dengan background
image:</h4>
<table border="1"
background="jpg/bgdesert.jpg">
<tr>
<td>ABC</td>
<td>DEF</td>
</tr>
<tr>
<td>GHI</td>
<td>JKL</td>
</tr>
</table>
</body>
</html>
Background
cell
<html><title>cell background</title>
<body>
<h4>Cell background:</h4>
<table border="1">
<tr>
<td
bgcolor="#FF9F55">ABC</td>
<td>DEF</td>
</tr>
<tr>
<td
background="jpg/bgdesert.jpg">
GHI</td>
<td>JKL</td>
</tr>
</table>
</body>
</html>
Mengatur
posisi teks dalam table
<html><title>Align
Tabel</title>
<body>
<p>Mengatur posisi teks dalam tabel </p>
<table
width="400" border="1">
<tr>
<th
align="left">Hari</th>
<th
align="right">Kuliah-1</th>
<th
align="right">Kuliah-2</th>
</tr>
<tr>
<td
align="left">Senin</td>
<td align="right">Web Design
</td>
<td align="right">Aplikasi
Web </td>
</tr>
<tr>
<td
align="left">Selasa</td>
<td
align="right">Database</td>
<td
align="right">Matematika</td>
</tr>
<tr>
<td
align="left">Rabu</td>
<td align="right">Bahasa
Enggris </td>
<td
align="right">RPL</td>
</tr>
</table>
</body>
</html>
BAB 8
Fram tag
<frameset
cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Source code
listing 81
<html>
<head>
<title>Frame
Utama</title>
</head>
<frameset
rows="80,*" cols="*" frameborder="yes"
border="2" framespacing="2">
<frame src="frametop.html"
name="topFrame" scrolling="NO" noresize>
<frameset rows="*"
cols="142,*" framespacing="2" frameborder="yes"
border="2">
<frame src="frameleft.html"
name="leftFrame" scrolling="NO" noresize>
<frame src="framemain.html"
name="mainFrame">
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>
Source code
listing 8.2
<html>
<head>
<title>Frame
Top</title>
</head>
<body>
Frame Top
</body>
</html>
Source code
8.3
<html>
<head>
<title>Frame
Left</title>
</head>
<body>
Frame Left
</body>
</html>
Source code
listing 8.4
<html>
<head>
<title>Frame
Main</title>
</head>
<body>
Frame Main
</body>
</html>
Frame kolom
<html><title>Frame tiga kolom</title>
<frameset cols="25%,50%,25%">
<frame
src="framea.html">
<frame
src="frameb.html">
<frame
src="framec.html">
</frameset>
</html>
Source
listing code 8.6
<html>
<head>
<title>Frame A</title>
</head>
<body bgcolor="#FFBF55">
<strong>Frame A
</strong>
</body>
</html>
Source code
listing 8.7
<html>
<head>
<title>Frame B</title>
</head>
<body bgcolor="#FFBFFF">
<strong>Frame B </strong>
</body>
</html>
Source code
listing 88
<html>
<head>
<title>Frame C</title>
</head>
<body bgcolor="#99FFFF">
<strong>Frame C </strong>
</body>
</html>
Frame baris
<html><title>Frame tiga baris</title>
<frameset rows="30%,30%,40%">
<frame
src="framea.html">
<frame
src="frameb.html">
<frame
src="framec.html">
</frameset><noframes></noframes>
</html>
Source code
listing 8.10
<html><title>frame navigasi</title>
<frameset cols="120,*">
<frame src="framenavmenu.html">
<frame src="framenavisi.html"
name="showframe">
</frameset>
</html>
Source code
listing 8.11
<html>
<head>
<title>menu</title>
</head>
<body>
<p><a href="framea.html"
target="showframe">frame A</a></p>
<p><a href="frameb.html"
target="showframe">frame B</a></p>
<p><a href="framec.html" target="showframe">frame
C</a></p>
</body>
</html>
Source code
listing 8.12
<html>
<head>
<title>isi</title>
</head>
<body>
<p>Selamat
Datang</p>
<p>Percobaan Frame
Navigasi </p>
</body>
</html>
Frame inline
listing 8.13
<html>
<body>
<iframe
src="home.html"></iframe>
<p>Some older browsers
don't support iframes.</p>
<p>If they don't, the
iframe will not be visible.</p>
</body></html>
Source code
listing 8.14
<html>
<head>
<title>Home</title>
</head>
<body>
<h1>Belajar Web Design
</h1>
<h2>Belajar Web Design </h2>
<h3>Belajar Web Design </h3>
<h4>Belajar Web Design </h4>
<h5>Belajar Web Design </h5>
<h6>Belajar Web Design </h6>
</body>
</html>
BAB 9
Form html
<form name="form1" method="post"
action=""></form>
Text field
<input type="text" name="textfield">
TEXT AREA
<textarea
name="textarea" cols="100" rows="5"></textarea>
Check box
<input name="checkbox" type="checkbox"
value="checkbox" checked>
Radio button
<input name="radiobutton"
type="radio" value="radiobutton">
List box
<select
name="select">
<option value="TI">Teknologi
Informasi</option>
</select>
Button submit
<input type="submit" name="Submit"
value="Submit">
Button riset
<input
type="reset" name="Reset" value="Reset">
Field text
<html><title>text field</title>
<body>
<form>
Nama Depan :
<input
name="NamaBelakang" type="text"
id="NamaBelakang">
<br>
Nama Belakang :
<input name="NamaBelakang" type="text"
id="NamaBelakang">
</form>
</body>
</html>
Field text
password
<html><title>Password</title>
<body>
<form>
Username:
<input type="text"
name="user"><br>
Password:
<input type="password"
name="password">
</form>
<p>Keterangan : ketika memasukan data di field password,
browser akan menampilkan tanda bintang sebagai pengganti karakter. </p>
</body>
</html>
Check box
listing 9.3
<html><title>Check Box</title>
<body>
<p> Hobi :</p>
<form>
<p>Baca Majalah :
<input
name="majalah" type="checkbox" id="majalah"
value="majalah" checked>
<br>
Olah Raga :
<input name="olahraga" type="checkbox"
id="olahraga" value="olahraga">
<br>
Memancing :
<input name="mancing" type="checkbox"
id="mancing" value="memancing">
</p>
</form></body>
</html>
Radio buton listing 9.4<html><title>Radio
Button</title>
<body>
<p>Agama : </p>
<form>
<p>Islam :
<input
type="radio" checked="checked"
name="agama" value="islam"> <br>
Kristen :
<input type="radio"
name="agama" value="kristen"><br>
Protestan :
<input name="agama" type="radio"
value="protestan"><br>
Hindu :
<input name="agama" type="radio"
value="Hindu"><br>
Budha :
<input name="agama" type="radio"
value="Budha"></p>
</form></p>
</body>
</html>
List box
listing 9.5
<html>
<head>
<title>List Box</title>
</head>
<body>
<p>Tahun Kelahiran</p>
<form name="form1" method="post"
action="">
<select
name="select">
<option
value="1980" selected>1980</option>
<option
value="1981">1981</option>
<option
value="1982">1982</option>
<option
value="1983">1983</option>
<option
value="1984">1984</option>
<option
value="1985">1985</option>
</select>
</form>
</body>
</html>
Text area
listing 9.6
<html>
<head><title>textarea</title></head>
<body>
<p>Komentar :</p>
<form name="form1" method="post"
action="">
<textarea
name="textarea" cols="50" rows="5">isikan
komentar anda disini</textarea>
</form>
</body></html>
Button submit
dan riset
<html>
<head>
<title>Button</title>
</head>
<body>
<form name="form1" method="post"
action="">
<input
type="submit" name="Submit" value="Send">
<input
type="reset" name="Reset" value="Reset">
</form>
</body>
</html>
Form biodata
<html>
<head>
<title>Biodata</title>
</head>
<body>
<p
align="center">Formulir Biodata </p>
<form
name="form1" method="post" action="">
<table
width="90%"
border="0" align="center">
<tr>
<td
width="25%">Nama</td>
<td width="2%">:</td>
<td width="73%"><input
name="txtnama" type="text" id="txtnama"
size="50"></td>
</tr>
<tr>
<td>Tempat Tanggal Lahir </td>
<td>:</td>
<td><input name="tempat"
type="text" id="tempat" size="20">
/
<input name="textfield"
type="text" size="5">
-
<select
name="sBulan" id="sBulan">
<option
value="januari" selected>Januari</option>
<option
value="pebruari">Pebruari</option>
<option
value="maret">Maret</option>
<option
value="april">April</option>
<option
value="mei">Mei</option>
<option
value="juni">Juni</option>
<option
value="juli">Juli</option>
<option
value="agustus">Agustus</option>
<option
value="september">September</option>
<option
value="oktober">Oktober</option>
<option
value="nopember">Nopember</option>
<option
value="desember">Desember</option>
</select>
-
<select name="sTahun"
id="sTahun">
<option value="1980" selected>1980</option>
<option
value="1981">1981</option>
<option
value="1982">1982</option>
<option
value="1983">1983</option>
<option
value="1984">1984</option>
<option
value="1985">1985</option>
<option value="1986">1986</option>
<option
value="1987">1987</option>
<option
value="1988">1988</option>
<option
value="1989">1989</option>
<option
value="1990">1990</option>
</select></td>
</tr>
<tr>
<td valign="top">Agama</td>
<td
valign="top">:</td>
<td valign="top"><input
name="agama" type="radio" value="islam"
checked>
Islam<br>
<input
name="agama" type="radio" value="kristen">
Kristen <br>
<input
name="agama" type="radio" value="protestan">
Protestan<br>
<input
name="agama" type="radio" value="hindu">
Hindu <br>
<input
name="agama" type="radio" value="budha">
Budha <br> </td>
</tr>
<tr valign="top">
<td>Hobi</td>
<td>:</td>
<td><input name="cHobi"
type="checkbox" id="cHobi" value="Olah Raga"
checked>
Olah Raga <br>
<input
name="cHobi" type="checkbox" id="cHobi"
value="Baca Majalah">
Baca Majalah<br>
<input
name="cHobi" type="checkbox" id="cHobi"
value="Memancing">
Memancing<br></td>
</tr>
<tr>
<td>Komentar</td>
<td>:</td>
<td><textarea
name="areaKomentar" cols="50" rows="3"
id="areaKomentar"></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit"
name="Submit" value="Send">
<input type="reset"
name="Reset" value="Reset"></td>
</tr>
</table>
</form>
</body>
</html>
BAB 10
Index html
<div align="center">
<h1><strong>Selamat Datang di website
UMPN</strong></h1>
<p
align="left">Persyaratan Peserta :</p>
<div
align="left">
<ol>
<li
d="">Tamatan SMTA (SMA, MA, SMK) tahun lulus 2006 atau
sebelumnya.</li>
<li>Umur Maksimal
24 tahun terhitung bulan agustus 2006</li>
<li>Mempunyai
kesehatan fisik yang tidak mengganggu kelancaran belajar di program studi
pilihannya (sebagai contoh untuk program studi yang dalam belajarnya diperlukan
kemampuan membedakan warna, tidak boleh butawarna) </li>
<li> Persyaratan
lainnya diatur oleh Politeknik masing-masing</li>
</ol>
</div>
<p
align="left"> </p>
</div>
Edit regional
Peserta dapat memilih program studi di Politeknik tempat mendaftar dan
program studi pada Politeknik peserta UMPN lainnya, dengan ketentuan sebagai
berikut :
<ol>
<li>Peserta
diwajibkan memilih Program studi pada Politeknik tempat mendaftar, dengan
jumlah pilihan sesuai dengan ketentuan yang berlaku di Politeknik setempat.
</li>
<li>Pilihan pada
Politeknik lainnya maksimal 2 (dua) program studi dari Politeknik yang berbeda,
boleh dengan program studi yang sama atau berbeda, dengan prioritas sesuai
dengan nomor urut pilihan. </li>
</ol>
- Membuat file jadwal.html seperti langkah sebelumnya. Dan tambahkan informasi pada code daerah EditRegion1 sebagai berikut :
Ujian diselenggarakan serentak pada :<br>
Hari / Tanggal : Sabtu 12 Agustus 2006
<ol type="a">
<li> Pukul 08.00 -
10.30 WIB (Bidang Rekayasa dan Pertanian)</li>
<li>Pukul 12.00 - 14.30 WIB (Bidang Tata Niaga) </li>
</ol>
Bidang
rekayasa dan pertanian
<strong>Bidang
Rekayasa dan Pertanian : </strong>
<ol>
<li>Matematika</li>
<li>Fisika</li>
<li>Bahasa
Indonesia</li>
<li>Bahasa
Inggris</li>
<li>Kimia dan Biologi
(pada Politeknik Tertentu)</li>
</ol>
<strong>Bidang
Tataniaga :</strong>
<ol>
<li>Matematika</li>
<li>akuntansi</li>
<li>Ekonomi</li>
<li>Bahasa
Indonesia</li>
<li>Bahasa Inggris
</li>
</ol>
Politeknik
elektronika
<p align="center"><strong> POLITEKNIK ELEKTRONIKA
NEGERI SURABAYA - ITS <br>
</strong>JL. RAYA ITS,
KEPUTIH SUKOLILO SURABAYA -60111<br>
Telepon 031-5947280, Fax
031-5946114<br>
Homepage : <strong><a
href="http://www.eepis-its.edu"
target="_blank">www.eepis-its.edu</a></strong> , Email
:<strong><a href="mailto:humas@eepis-its.edu">
humas@eepis-its.edu</a></strong> </p>
<br>
<strong> Jurusan /
Program Studi :</strong>
<ol>
<li> Teknik Elektronika
(D3/ D4) <br>
Membekali mahasiswa dengan
teknologi otomasi dan robotika dalam aplikasi di industri</li>
<li>Teknik
Telekomunikasi (D3/ D4) <br>
Membekali mahasiswa dengan
pengetahuan telekomunikasi sehingga mampu selalu beradaptasi dengan kemajuan
teknologi telekomunikasi dan informasi </li>
<li> Teknik Elektro
Industri (D3/ D4) <br>
Membekali mahasiswa dengan
teknologi kontrol daya di sektor manufaktur dan industri</li>
<li>Teknologi Informasi
(D3/ D4) <br>
Membekali mahasiswa dengan
kemampuan mengembangkan dan memelihara sistem informasi berbasis komputer pada
lingkungan bisnis dan manufaktur </li>
</ol>
<p><strong>Persyaratan</strong> </p>
<ol>
<li> Warga Negara
Indonesia</li>
<li>Tamatan SMTA (SMA,
MA, SMK) tahun lulus 2006 atau sebelumnya </li>
<li> Umur maksimal 24
tahun terhitung bulan Agustus 2006</li>
<li>Mempunyai kesehatan
fisik yang tidak mengganggu kelancaran belajar di program studi pilihannya
(sebagai contoh untuk program studi yang dalam belajarnya diperlukan kemampuan
membedakan warna, tidak boleh buta warna)</li>
<li>Lulus Ujian Seleksi, meliputi: Ujian Masuk & Tes
Kesehatan </li>
</ol>
