Modul 2a html

HyperText Markup Language
Pendahuluan
Internet Explorer (ie), Netscape, Opera adalah beberapa contoh Web Browser yang sering
kita pake saat browsing di Internet. Berbagai dokumen yang akan ditampilkan oleh web
browser format dengan HyperText Markup Language (HTML). Nantinya kita akan
mengenal bahasa lain baik yang bekerja disisi klient maupun disisi server. Kedua jenis
bahasa ini juga sangat berkaitan erat dengan format HTML. Karena itu sebelum kita bisa
mengenal bahasa pemrograman web lebih lanjut, kita harus mengerti HTML terlebih
dahulu. Sangat penting untuk menguasai HTML walaupun ada banyak editor seperti
Dreamweaver, Ms. Front Page, Home Site dan berbagai aplikasi lain yang mempermudah
pembuatan document HTML. Document html di simpan dengan extension .html atau
.htm. Penyimpan dengan extension .html atau .htm adalah sama, penggunaan extension
.htm dikarenakan pada awalnya operating sistem hanya mendukung penyimpanan file
dengan maksimal extension adalah 3 karakter. Tetapi operating sistem sekarang sudah
mampu mendukung lebih dari 3 karakter.

Tujuan
1. Menguasai dasar-dasar pemrogram web dengan HTML
2. Mampu melakukan pengformatan document web dengan element table
3. Mengenal kegunaan setiap tags HTML
4. Mampu pengkombinasikan penggunaan frame
5. Mampu membuat document yang lebih interaktif
6. Memberikan tampilan yang lebih halus dan menarik

Dasar-dasar HTML
Document HTML hanya dapat dijalankan di web browser seperti Internet Explorer (ie),
Netscape, dan Opera. Web browser biasanya hanya disebut browser saja. Http
(HyperText Transfer Protocol) adalah protocol yang digunakan untuk mentransfer data
antara Web Browser(client) dengan Web Server(Server) yang diformat dengan format
HTML. Format HTML berupa tags-tags yang selalu berpasangan. contoh :
<html></html>, <html> adalah awal suatu tags dan akhir dari tags tersebut adalah
</html> dimana pada akhir suatu tags selalu ditambahin '/'.

Bentuk dasar / Struktur dasar HTML
Sebuah document web minimal memiliki bentuk dasar sepeti :
<html>
<head>
<title>Contoh dasar html</title>
</head>
<body color="#ffffff">
Selamat, <br>
disini adalah bagian yang akan tampil di document web.
</body>
</html>

tags html tidak mengenal perbedaan huruf besar maupun huruf kecil. Penulisan <html>
atau <HTML> atau <HTml> akan dianggap sama.
semua informasi diantara tags<head></head> tidak akan ditampilkan. Semua informasi
hanya akan ditampilkan diantara tags<body></body>.

Beberap istilah dalam HTML

Tags : suatu kesatuan teks yang diawali dengan < dan diakhiri dengan >, dimana teks
tersebut diapit diantara < dan >,
contoh : <html>, <head>, <body> dll.

Element : adalah teks yang berada diantara < dan >,
contoh :
tags <html>, elementnya adalah html
tags <body>, elementnya adalah body

Attribute : suatu keyword yang merupakan bagian dari suatu element,
contoh :
<img src="logo.gif" width=20 height=20>
dimana yang dimaksud dengan attribute adalah src, width, height.

Latihan Lab.
coba ketik program diatas dengan menggunakan notepad/wordpad kemudian simpan
dengan nama file latihan1.html pada direktori c:latihanhtml. Jalankan web browser
Anda, kemudian klik menu file > open kemudian cari file latihan1.html.

Tampilan di browser

Seperti yang saya jelaskan sebelumnya, setiap tags html selalu diikuti dengan penutup
tags, dari contoh diatas dapat kita lihat bahwa document diawali dengan tags <html> dan
kemudian diakhiri dengan tags </html> juga. Kemudian diantara tags <html> terdapat
tags lain seperti <head></head> dan <body></body>, sedangkan tags <title></title>
ada diantara tags <head>, disamping tags <title> masih ada tags lain seperti <meta>
yang berada diantara tags <head>, sedangkan sisanya adalah tags-tags yang akan
berada diantara tags <body>. Dari contoh diatas adalah tags <br>. Untuk tags-tags
tertentu ada pengecualian tidak memiliki tags penutup seperti tags <br>, <hr>, <img>
dan <p>. Semua text yang ada diantara tags <body></body> akan ditampilkan oleh
browser. Text/informasi yang tampil di document akan diformat dengan menggunaan
berbagai jenis tags html.

Tag-tag dasar
Warna Background dan teks
Untuk mememberi warna pada background html anda digunakan tag body dengan
attribute bgcolor. Dan untuk memberi warna teks digunakan attribute text.
Contoh:
<body bgcolor=”#ffff00” text=blue>

nilai atribute dapat berupa hexadecimal (“#ffff00”) atau warna dasar (red, green, blue,
yellow dsb)

Break(<br>)
Tag Break (<br>) digunakan untuk membuat baris baru dari suatu text. Tanpa <br>,
beberapa baris teks html akan dibaca oleh browser sebagai satu baris.
Contoh:
Html sintak hasil
Smart Media Solusindo Smart Media Solusindo Indonesia
Indonesia

Smart Media Solusindo <br> Indonesia Smart Media Solusindo
Indonesia

Preformatted Text(<pre>)
Browser akan mengabaikan spasi, baris baru, dan tabs dalam dokumen html. Agar spasi,
baris baru dan tabs tidak diabaikan digunakan preformatted text tag <pre>.

Horizontal rule(<hr>)
<hr> digunakan untuk membuat garis horizontal. Beberapa attribute yang penting
digunakan untuk mensetting garis tersebut adalah
<hr> attribute Keterangan
size Menentukan tinggi atau ketebalan garis
width Menentukan tebal garis
color Menentukan warna garis
align Menentukan alignment

Contoh:
<hr size=”10” width=”200” color =”red” align=”center”>

Heading tag
adalah tags yang digunakan untuk membuat heading (Judul atau subjudul) document
html.
Tags output

<h1>Heading 1</h1> Heading 1

Latihan Lab.
Ketik program dibawah ini kemudian simpan dengan nama latihan2.html
<html>
<head><title>Latihan Tags Heading</title></head>

<body>
<h2>Panca Sila</h2>
<h3>1. KeTuhanan yang Maha Esa</h3>
<h3>2. Kemanusiaan yang adil dan beradab</h3>
...
<br>
contoh penggunaan tags heading, berikut bentuk detail tags heading yang lain
<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>

Tampilan di browser

Tag Paragraph<p>
Tag paragraf digunakan untuk membuat paragraf.
<p></p>
contoh:
<P>Indonesian International Telecommunications, Media and Information Technology
Conference and Exhibition (IITELMIT) 2002 digelar di Jakarta Convention Center (JCC)
pada 7-10 Mei 2002.
</P>
<p>Pameran dan konferensi Teknologi Informasi-Telekomunikasi tahunan terbesar di
Indonesia ini dibuka secara resmi oleh Meneg Kominfo, Syamsul Mu’arif, Selasa
(7/5/2002) pukul 09.30 wib di Ruang Cendrawasih JCC.
</p>
Center (<center>)
Digunakan untuk membuat aligment center pada teks atau object yang lain (gambar,
table dsb).

Mengatur huruf (font)
Format font dasar
Beberapa format fornt dasar yaitu:
Format font dasar Contoh Hasil
Bold <b> <b>rcec</b> rcec
Italic<i> <i>rcec</i> rcec
Underline(<u>) <u>rcec</u> Rcec
Strong(<Strong>) <strong>Rcec</strong> Rcec
Emphasis(<em>) <em>Rcec</em> Rcec

Font tag<font>
Font tag digunakan untuk memberi setting font yang digunakan. Beberapa attribute yang
digunakan:
Font attribute Keterangan
Size Mengatur ukuran font
Color Mengatur warna font
Face Menentukan jenis font

Contoh:
<font size=”+1” color=green face=”arial”>Rcec</font>

Superscript dan subscript
Untuk membuat superscript digunakan tag <sup> dan untuk membuat subscript
digunakan tag <sub>.
Contoh
2
x<sup>2</sup> x
H<sub>2</sub>O H20

Karakter khusus
Untuk membuat karakter khusus seperti @, ®, © digunakan sintak khusus yang dimulai
dengan &...;. beberapa karakter khusus dapat dilihat pada table berikut:

< = < © = © " = " ¼ = ¼
> = > ® = ® =   ½ = ½
& = & ¢ = ¢ ° = ° ¾ = ¾

Tag List
Ordered List(<ol>)
digunakan untuk membuat daftar bernomor (numbering) seperti berikut:
• HTML
• JavaScript
• Photoshop
• Dreamweaver

Sintak dasar:
<ol>
<li>HTML</li>
<li>JavaScript</li>
</ol>
<li>(list item) merupakan tag untuk menentukan item yang dimasukkan dalam list.
Beberapa attribute yang dimiliki oleh <ol> adalah:
<ol> Keterangan
attribute
Type Digunakan untuk menentukan jenis list-nya(huruf atau angka)

Start Digunakan untuk menemntukan dari nomer berapa atau huruf ke berapa
suatu list dimulai.

Unordered List(<ul>)
digunakan untuk membuat daftar seperti berikut:
• HTML
• JavaScript
• Photoshop
• Dreamweaver

Sintak dasar:
<ul>
<li>HTML</li>
<li>JavaScript</li>
</ul>
<ul> tidak mempunyai attribute start, tetapi tetap mempunyai attribute type yang
mempunyai nilai disc,circle atau square.
Nested List
nested list adalah menggabungkan beberapa ordered dan unordered list.
Definition List
digunakan untuk membuat suatu daftar index misalkan:

HTML
Hyper Text Markup Langauge
XML
eXtensible Markup Language

sintax dasar:
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
</dl>

Linking

anchor tag<a>
anchor tag digunakan untuk linking ke dokumen lain.
Sintak umum:
<a href=”dokumen yang dituju”>Text</a>
link ke file lokal
<a href=”pertama.html”>pertama</a>
jika dokumen terdapat dalam folder tertentu:
<a href=”folder/pertama.html”>pertama</a>
link ke web site
<a href=”http://www.yahoo.com”>yahoo</a>
link ke email
<a href=”mailto:faizal@smartmediasolusindo.net”>contact me</a>
link dalam satu dokumen
<a name =”top” href=”pertama.html#bottom”>go to bottom</a>
...
<a name =”bottom” href=”pertama.html#top”>go to top</a>
Warna link
Warna link dapat ditentukan memalui tag body dengan attribute sebagai berikut:
Body Attribute Keterangan
link Warna teks yang digunakan sebagai link, belum pernah dikunjungi

vlink Visited link, warna teks link yang pernah dikunjungi
alink Active link, warna teks link yang aktif

Marquee
<marquee>
Tulisan berjalan
<marquee>
Text berjalan
</marquee>

Atribut Keteranagan Contoh
Membuat text berjalan <marquee>Text berjalan
</marquee>
Align=top, middle, bottom Menentukan perataan text <marquee
disekitar marquee align=top>text</marquee>
Behavior=scrool, slide, Menentukan tampilan text <marquee
alternate berjalan behavior=alternate>text bolak
balik</marquee>
Bgcolor=warna Menentukan lwarna <marquee bgcolor=red>biground
latarbelakang marquee merah</marquee>
Direction=left, right, up, down Menantukan arah <marquee direction=up> tulisan
berjalannya text naik</marquee>
*masih beberapa atribut namun ini dulu.

Atribut-atribut marquee tersebut bisa juga digabung jadi satu
Contoh

<marquee direction="down" scrollamount="2" scrolldelay="0"
style="Filter:Alpha(Opacity=100, FinishOpacity=5, Style=1, StartX=0, StartY=45, FinishX=0,
FinishY=0);font-weight:bold;overflow:hidden;width:155px;height:250px;text-align:center;">

Taukah anda hasil tulisan gabungan dari marquee ini akan menghasil kan animasi yang
sangat menarik, hanya dengan sedikit script diatas akan membuat tampilan website Anda
menjadi lebih menawan. Gak percaya coba aja sendiri ☺
</marquee>

Bekerja dengan Grafis
Gambar background
Untuk memasukkan gambar background digunakan body tag dengan attribute
background.
Contoh:
<body background=”rcec.gif”>

Image tag<img>
Digunakan untuk memasukkan gambar ke dalam dokumen.
Sintak umum:
<img src=”nama file image”>
beberapa attribute yang digunakan dalam <img>.
<img> Keterangan
attribute
Src Menentukan letak (source) gambar yang akan ditampilkan pada dokumen
HTML
Width Lebar gambar
Height Tinggi gambar
Alt Menentukan teks yang akan ter-display jika mouse diletakkan di atas
gambar (tooltip) atau teks yang terdispaly jika gambar tidak muncul
Border Menentukan lebar border

Title Tooltip
Hspace Jarak horizontal
Vspace Jarak vertikal

Link dengan image
Untuk membuat sutau link dengan Image, Anda dapat menggabungkan tag anchor
dengan image tag.
Contoh:
<a href=”test.html”><img src=”test.gif”></a>
Image Mapping
Image mapping digunakan untukmembuat link di mana dalam satu gambar kita
dalammembuat beberapa link.
contoh :
<img src="logo.jpg" width="510" height="399" usemap="#logoMap" border="0"
alt="mapping image">
<map name="logoMap">
<area shape="rect" coords="55,57,204,185" href=url target="_blank">
<area shape="circle" coords="287,137,55" href=url>
<area shape="poly" coords="122,248,225,222,244,272,176,282" href=url>
</map>

Membuat table
Table sangat bermanfaat dalam penentuan layout atau tata design document web.
table diawali dengan tags <table> kemudian diantara tags <table> ada tags <tr></tr>
yang akan membentuk baris (row) kemudian diantara tags <tr> ada tags <td></td>
yang akan membentuk kolom (column).
Contoh bentuk dasar dari table :
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>

Tag Table
<table> attribute Keterangan Nilai

border Menentukan tebal garis batas pinggir px,%
align Menentukan posisi table dalam dokument left, center, right
width Lebar table px,%
height Tinggi table px,%
background Menentukan gambar background File gambar
bordercolor Menentukan warna border Warna
bgcolor Menentukan warna background Warna
cellpadding Jarak antara isi sel dengan border px,%
cellspacing Jarak antar sel px,%

Tag Table row (<tr>)

align Menentukan posisi isi sel left, center, right
width Lebar px,%
height Tinggi px,%
valign Vertical alignment Top,middle, bottom

Tag Table Data (<td>)


align Menentukan posisi isi dalam dokument left, center, right
width Lebar sel px,%
height Tinggi sel px,%
background Menentukan gambar background File gambar
bordercolor Menentukan warna border Warna
valign Vertical alignment Top,middle, bottom
colspan Span kolom Angka
rowspan Span row

Latihan Lab.
<table border=1 cellpadding=2 cellspacing=5 width=200 height=300>
<tr>
<td><b>Nama Barang</b></td> <td><b>Jumlah Barang</b></td>
</tr>
<tr>
<td>Pentium III</td> <td align=left>5 unit</td>
</tr>
<tr>
<td>Printer Cannon</td> <td align=left>15 unit</td>
</tr>
<tr>
<td>Scanner Umax</td> <td align=left>2 unit</td>
</tr>
</table>

Tampilan Layar

latihan lab.
latihan menggunakan semua komponen form dengan layout yang rapi dengan
dukungan table.
<html>
<head>
<title>Registrasi form</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<br>
<form name="form1" method="post" action="save.asp">
<table width="500" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<font face="Verdana, Arial" size="4"><b>Registration Form</b></font>
</td>
</tr>
<tr>
<td width="142">User ID</td>
<td width="252"><input type="text" name="userid">* </td>
</tr>
<tr>
<td width="142">Password</td>
<td width="252"><input type="password" name="password">* </td>
</tr>
<tr>
<td width="142">Confirm Password</td>
<td width="252"><input type="password" name="password2">* </td>
</tr>
<tr>
<td width="142">Name</td>
<td width="252"><input type="text" name="name"></td>
</tr>
<tr>
<td width="142">Address</td>
<td width="252"><input type="text" name="address" size="40"></td>
</tr>
<tr>
<td width="142">Gender</td>
<td width="252">
<input type="radio" name="gender" value="Male" checked>Male
<input type="radio" name="gender" value="female">Female</td>
</tr>
<tr>
<td width="142">Date of Birth</td>
<td width="252">
<select name="tgl">
<option value="01">01</option>
...

</select>
<select name="bln">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">Maret</option>
...
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="thn">
</select>
</td>
</tr>
<tr>
<td width="142">E-mail</td>
<td width="252">
<input type="text" name="email">
</td>
</tr>
<tr>
<td width="142">City</td>
<td width="252">
<input type="text" name="city">
</td>
</tr>
<tr>
<td width="142">Country</td>
<td width="252">
<select name="country">
<option value="Indonesia">Indonesia</option>
<option value="Malaysia">Malaysia</option>
<option value="Singapore">Singapore</option>
<option value="Thailand">Thailand</option>
</select>
</td>
</tr>
<tr>
<td width="142">Interest</td>
<td width="252">
<input type="checkbox" name="checkbox" value="computer">Computer
<input type="checkbox" name="checkbox2" value="software">Software
<br>
<input type="checkbox" name="checkbox3" value="hardware">Hardware
<input type="checkbox" name="checkbox4" value="hacker_info">Hacker
Info
</td>

</tr>
<tr>
<td width="142"> </td>
<td width="252">
<input type="submit" name="Submit" value="Proses">
<input type="reset" name="batal" value="Batal">
</td>
</tr>
</table>
</form>
</body>
</html>

Tampilan Layar

Membuat Formulir
Formulir (form) digunakan untuk mengisi suatu data (mis. data registrasi). Data ini akan
dikirim ke server yang nantinya dapat langsung diproses atau disimpan dalam database.
Untuk membuat formulir, didahului dengan form tag dan diikuti dengan tag jenis
formulirnya misalkan teksbox (teksfields) , drop down menu, radio button dsb yang
diletakkan di dalam form tag.
Tag Form
Tag form digunakan untuk memulai membuat formulir. Sintak umumnya adalah sebagai
berikut:

<form name=frm1 action=url method=get|post>

action diisi dengan url yang merupakan alamat atau file yang akan dituju dari
halaman/document ini setelah menekan/click tombol submit.
ada dua jenis method yaitu get dan post. Penggunaan method get akan menampilkan
semua attribute/parameter beserta nilai pada address bar web browser, sedangkan
penggunaan method post hanya menampilkan url document tersebut.
contoh get :
http://www.detik.com/berita.asp?berita=123123123&tgl=12042002
contoh post:
http://www.detik.com/berita.asp
name digunakan sebagai identitas form.jika suatu saat kita ingin mereferensi form
tersebut Anda dapat menggunakan nama tersebut.
Berikut adalah tag-tag yang diletakkan didalam form tag.
Tag Textbox
Digunakan untuk mengisi data berupa teks yang panjangnya satu baris.
Sintak umum:
<input type=”text” name=”username”>

Tag Password
Digunakan untuk mengisi password.
<input type=”password” name=”passwd”>

Tag Checkbox
Digunakan untuk mengisi data yang berupa multiple selection.
Contoh:
<input type=”checkbox” name=”check” value=”computer” checked>Computer
<input type=”checkbox” name=”check” value=”printer”>Printer
<input type=”checkbox” name=”check” value=”harddisk”>HardDisk
<input type=”checkbox” name=”check” value=”cdrom”>CD-Rom

hasilnya:

Tag Radio
Digunakan untuk membuat pilihan dengan yang bersifat single selection.
Contoh:
<input type=radio name="jnsKelamin" value="lk">Laki-laki
<input type=radio name="jnsKelamin" value="pr">Perempuan
tags radio memiliki nilai atribute name yang sama (dua-duanya mempunyai
name="jnsKelamin") tetapi mempunya nilai value yang berbeda lk dan pr.
Hasilnya:

Tag Pilihan
Digunakan untuk membuat pilihan yang berupa drop down.
Contoh:
<select name="negara">
<option value="none">none</option>
<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="singapore">Singapore</option>
<option value="other">Other</option>
</select>
hasil:

untuk membuat pilihan yang berupa list Anda dapat menggunakan attribute size pada tag
select.

Tag Textarea
Digunakan untuk mengisi data teks dengan lebih dari satu baris.
Contoh:
<textarea cols=”20” rows=”5” name=comment></textarea>
cols merupakan banyaknya kolom karakter
rows merupakan banyakknya baris teks.

Tag Hidden
Digunakan untuk mengisi data yang tidak ingin ditampilkan pada user.
<input type=Hidden name=MemberId value="m001">

Tag Tombol
submit
Digunakan untuk mengirim data jika diklik.
Contoh:
<input type=submit name=btSubmit value="Send">
reset
digunakan untuk menghapus isi form.
Contoh:
<input type=reset name=btReset value="Bantal">
Button
Digunakan untuk menjalankan suatu fungsi Scripting.
<input type=button name=btBiasa value="Tombol Biasa">

Membuat Frame
Frame digunakan untuk menampilkan beberapa halaman html dalam satu halaman. Untuk
membuat suatu frame anda membutuhkan satu halaman frameset untuk mendefinisikan
framenya, dan minimal 2 halaman lain untuk mengisi framenya.

Berikut contoh penggunaan frameset dan frame.
Frameset
file name : frame.html
<html>
<head>
<title>Using Frame</title>
</head>

<frameset cols="126,*" rows="*" frameborder="NO" border="0" framespacing="0">
<frame name="leftFrame" src="kiri.html" scrolling="NO" noresize >
<frame name="mainFrame" src="kanan.html">
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
This browser do not support frame.
</body>
</noframes>
</html>
Rancangan Tampilan Layar frame.html

disini kita membagi document menjadi dua kolum(column) dimana kolum pertama
dengan lebar(width) 126px. * berarti akan menggunakan sisa ruang yang tersisa. selain
menggunakan pixel dan * juga dapat digunakan tanda persen(%) untuk menunjukkan
ukuran baik lebar maupun tinggi suatu frame.
cols menunjukkan ukuran dan jumlah column, rows menunjukkan ukuran dan jumlah
row(baris).

Sebelum anda membuat suatu frame, terlebih dahulu harus disiapkan file-file web page
yang dibutuhkan. Dari contoh diatas anda membutuhkan file kiri.html dan kanan.html
kemudian frame ini sendiri akan disimpan dengan nama file frame.html.
Tags dan text diantara tags <noframes></noframes> akan digunakan jika browser yang
digunakan tidak mendukung kemampuan Frame. Namun rata-rata browser sekarang

sudah mendukung penuh kemampuan frame.
Pemberian nama(name) pada frame sangat berguna pada saat mengkombinasikannya
dengan link(anchor),
contoh:
<a href="page2.html" target="mainFrame">Second Page</a>

dari contoh diatas, ada dua frame dimana pada frame kedua bernama "mainFrame",
pengunaan ini bermanfaat pada saat ingin mengubah isi pada frame "mainFrame" sesuai
dengan url yang tertera di href (href="page2.html").
syntaks anchor:
<a href=url target="_self|_parent|_blank|namaframe"></a>

frame target
_self : menuju kehalaman dimana link itu aktif
_parent : menuju ke halaman induk/parent dari frame kalau tidak ada frame berarti
halaman itu sendiri juga.
_blank : membuka window baru
namaframe : sesuai dengan nama frame (eg. leftFrame).

Document : Modul Dasar-dasar HTML.
Sumber : Internet

Contoh Tampilan Web Sederhana

Source Script dan keterangan

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

<style type="text/css">
.kotak {
border-style:solid;
background-color:#d7e7ff; Ini adalah CSS untuk memformat tampilan
border-color:#3483fa;
web, dari pada memakai table CSS bisa
border-top-width:2px;
dipakai berulang-ulang.
border-bottom-width:0px;
border-left-width:0px; Diawali dengan
border-right-width:0px;
padding:0; <style type="text/css">
……………….
height: 25px; </style>

font-family: "arial";
font-size:12px;

vertical-align: top;
text-align: center;
}
</style>

<TITLE> Mamad Web </TITLE> Title Web
</HEAD>
<BODY>

<TABLE width="100%" height="102" cellpadding="0" cellspacing="0" bordercolor="#3483fa">
<TR>
<TD bgcolor="#3483fa" width="91" align="right">
<IMG SRC="openbsd.jpg" WIDTH="90" HEIGHT="100" BORDER=0 ALT="Open bsd logo">
</TD>
<TD bgcolor="#3483fa" align="center">
<h2>
<font color="#FFFFFF"> Tabel paling atas yang terdapat logo sama
Company Name Company Name
</font>
<h2>
</TD>
</TR>
</TABLE>

<TABLE width="100%" height="80%">
<TR>
<TD width="200" bgcolor="#d7e7ff" valign="top">
Menu

</TD>
<TD width="85%" valign="top"> Tabel tengah untuk menu dan isi web
Isi Web

</TD>
</TR>
</TABLE>

<div class="kotak"> Disini penggunaan CSS
Copy right mamad 2008 <div class="kotak"> =>”kotak” sesuai dg tiap nama CSS
</div> ………
</div>
</BODY>
</HTML>

Nb file css dapat juga diletakan di luar tersendiri dan cara pemanggilanya adalah
<link href="filecss.css" rel="stylesheet" type="text/css">

Source Script dan keterangan

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mamad Web</title>
<base target="contents">
</head>
<body >

<style type="text/css">
BODY {
background : #FFFFFF;
font-family : verdana;
font-size : x-small;
}
H1 {
font-style : italic;
font-size : 18px;
}
H4 {
font-size : 12px;
}
A{
color : #0000FF;
}

A:HOVER {
color : #9999FF;
background : white;
}

TABLE {

}
TD {
font-family : verdana;
font-size : 12px;
}
</style>

<TABLE border="0" cellpadding="0" cellspacing="0" height="60" width="901">
<TR>
<TD width="243" height="44">
<Img src="gambare/nick.gif" align="left" border="0" width="228" height="40">&nbsp</TD>
<TD width="658" valign="top" align="center" height="80" valign="TOP">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version
=6,0,0,0"
WIDTH="490"
HEIGHT="80"
id="1"
ALIGN="left" valign="top">
<PARAM NAME=movie VALUE="gambare/top.swf"> Seluruh script iniuntuk menyisipkan
<PARAM NAME=loop VALUE=false> file flash(swf)
<PARAM NAME=quality VALUE=high> Disini letak filenya
<PARAM NAME=bgcolor VALUE=#FFFFFF> <PARAM NAME=movie
<EMBED src="gambare/top.swf" VALUE="gambare/top.swf">
loop=false quality=high bgcolor=#FFFFFF
WIDTH="490" HEIGHT="80"
NAME="1" ALIGN="left" valign="top"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
 
<a class="chlnk" href Java script untuk membuat halaman web jadi default.
onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.geocities
.com/nickqin2001');" style="CURSOR: hand">
<img src="gambare/home.gif"> Jadikan Hompage</a>
    
</TD></TR>
<TR>
<TD height="16" align ="left" colspan="2" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse"
bordercolor="#111111" width="100%" id="AutoNumber1" height="22">
<tr>
<td width="185" background="gambare/topbg.gif"> </td>
<td width="79%" background="gambare/topbg.gif">
<p align="right"><a href="index.html">Home</a> | <a href="sitemap.html"
target="main">Site Map</a> | <a href="about.html"
target="main">About</a>    </td>
</tr>
</table>
</TD></TR>
</TABLE>
</body>
</html>

Modul 2a html

More Related Content

What's hot

Similar to Modul 2a html

Modul 2a html