You are on page 1of 11

Berikut ini adalah keseluruhan kode HTML yang diperlukan untuk membuat

halaman utama PT Mahal & Mewah;

<HTML>
<HEAD>
<TITLE>Web Site PT Mahal & Mewah</TITLE>
</HEAD>
<BODY BACKGROUND="bgcolor.jpg">

<TABLE CELLSPACING=5 WIDTH="100%">


<TR>
<TD WIDTH="18%"></TD>

<TD><IMG SRC="Mahalm.JPG" HEIGHT=101 WIDTH=216>


<IMG SRC="Mahalm2.JPG" HEIGHT=106 WIDTH=239>
<P>
<A HREF="mobilbaru.html">[Mobil Terbaru]</A>
<A HREF="mobilbekas.html">[Daftar Mobil Bekas]</A>
<A HREF="servis.html">[Servis]</A>
<A HREF="brosur.html">[Brosur Gratis]</A>
<A HREF="profil.html">[Profil Perusahaan]</A>
<P>
<HR ALIGN=LEFT WIDTH="90%">
<TABLE CELLSPACING=5 WIDTH="100%">
<TR>
<TD ALIGN=LEFT VALIGN=TOP WIDTH="30%">
<IMG SRC="car2.gif" HEIGHT=97 WIDTH=137 ALIGN=LEFT></TD>

<TD>
<H4><A HREF="mobilbaru.html">Mobil Terbaru!</A></H4>
<P>
PT Mahal & Mewah dengan bangga memperkenalkan mobil
terbaru impor dari luar negri, "cepat" bermesin v8 4000 cc.
Mobil ini termasuk mobil tercepat di kelasnya, karena
mampu berakselerasi 0 sampai 100 km/h dalam 4,6 detik saja.
</TD>
</TR>
</TABLE>

<TABLE CELLSPACING=5 WIDTH="100%">


<TR>
<TD VALIGN=TOP WIDTH="30%">
<IMG SRC="car3.gif" HEIGHT=67 WIDTH=126></TD>

<TD>
<h4><A HREF="mobilbekas.html">Koleksi Antik Mahal & Mewah</A>
</H4>
<P>
Penggemar mobil antik tidak perlu jauh-jauh lagi mencari
mobil antik, karena PT Mahal & Mewah sekarang telah
membuka galeri mobil antik dengan koleksi mobil-mobil
dari segala jaman mulai tahun 1944 sampai dengan 1968.
Semua dalam kondisi yang amat terawat baik.
</TD>
</TR>
</TABLE>

<TABLE CELLSPACING=5 WIDTH="100%>


<TR>
<TD VALIGN=TOP WIDTH="30%">
<IMG SRC="car4.gif" HEIGHT=62 WIDTH=126></TD>

<TD>
<H4><A HREF="mobilbekas.html">Mobil Bekas Kualitas Baru</A>
</H4>

<P>
Bagi anda yang memerlukan mobil bekas, kami juga menyadiakan
kumpulan mobil bekas dengan kualitas baik. Semua mobil telah
diseleksi dengan teliti, dan dijamin bebas masalah.
Kami memberi garansi 6 bulan untuk setiap mobil bekas
yang kami jual.
</TD>
</TR>
</TABLE>
Tutorial Materi Internet SMAN 1 Babelan
</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Membuat Halaman lainya

Calon pelanggan bisa melihat koleksi mobil-mobil terbaru PT Mahal &


Mewah dengan membuka halaman Mobil baru. Halaman ini berisi gambar
dan spesifikasi teknis mobil yang dimaksud.

Seperti halaman utama, dokumen dibagi menjadi dua bagian, kiri dan kanan
dengan mempergunakan tabel. Bagian kiri diberi lebar 18% ukuran lebar
layar dan bagian kanan sisanya. Gambar mobil dimasukkan dengan perintah
<MG SRC=>seperti yang telah kita pelajari sebelumnya.

<HTML>
<HEAD>
<TITLE>Mobil Baru</TITLE>
</HEAD>
<BODY BACKGROUND="bgcolor.jpg">

<TABLE CELLSPACING=5 WIDTH"100%">


<TR>
<TD WIDTH="18%"></TD>
<TD>
<A HREF="mobilbaru.html">[Mobil Terbaru]</A>
<A HREF="mobilbekas.html">[Daftar Mobil Bekas]</A>
<A HREF="servis.html">[Servis]</A>

<A HREF="brosur.html">[Brosur Gratis]</A>


<A HREF="profil.html">[Profil Perusahaan]</A>

<HR WIDTH="100%">

<H2>
<IMG SRC="footer.GIF" HEIGHT=22 WIDTH=108>Celica 1997</H2>
<P><IMG SRC="celica.jpg" ALT="mobil" HEIGT=211 WIDTH=330>
<P>Toyota Celica, mobil sport ini memiliki keamanan,
kenyamanan berkendara, fasilitas, dan penampilan yang prima.
Kelengkapan standardnya antara lain <I>dual airbag
supplementary restraint system</I>untuk keamanan pengendara.
<P>Ada beberapa model Celica yang tersedia, semua dengan
mesin yang sama yaitu 2.2 litre EFI- Twin cam multi valve 02
engine, yang mampu menghasilkan tenaga 100 kw (ECE) pada
5400 rpm dan 196 Nm (ECE) pada torque 4400 rpm. Model yang
tersedia antara lain transmisi manual 5-kecepatan, dan
transmisi otomatik
4-kecepatan.<P>
<PRE>
Harga : Rp.42.000.000,00
Jenis : 2 - 3 pintu coupe 4-penumpang
Ukuran : Panjang / lebar 174.2-177.0/68.9 in
Tinggi 50.8-51.0 in, Interior 46/23/11-16
cu-ft
Berat : 2400-2650 lb.
Isi Tangki : 15.9 gal.
Mesin : 2.2-liter DOHC 16-valve 4-in-line, 135 hp;
5-sp manual, 4-sp otomatis
Suspensi : ind, struts, coil spring, anti-roll bar
Rem : vented disc/drum, disc ABS
</PRE>
</TD>
</TR>
</TABLE>

</BODY>
</HTML>
<p>

Tutorial Materi Internet SMAN 1 Babelan


Membuat Daftar Mobil Bekas
<p>
Direktur PT Mahal & Mewah ingin agar para calon pelangganya dapat
mengetahui informasi harga mobil bekas yang up-to-date tanpa perlu datang
ke showroomnya. Informasi harga mobil bekas ini akan diletakkan di Web
Site PT Mahal & Mewah, dan akan diubah/diganti setiap hari.

<HTMLgt;
<HEADgt;
<TITLEgt;Daftar Mobil Bekas</TITLEgt;
</HEADgt;
<BODY BACKGROUND="bgcolor.jpg"gt;

<TABLE CELLSPACING=5 WIDTH="100%"gt;


<TRgt;
<TD VALIGN=TOP WIDTH="18%"gt;</TDgt;

<TDgt;
<H2gt;Daftar Harga Mobil Bekas</H2gt;
<Pgt;
<A HREF="web1.html"gt;[Halaman Utama]</Agt;
<A HREF="mobilbaru.html"gt;[Mobil Baru]</Agt;
<A HREF="servis.html"gt;[Servis]</Agt;
<A HREF="formulir.html"gt;[Brosur Gratis]</Agt;
<A HREF="profil.html"gt;[Profil Perusahaan]</Agt;

<TABLE BORDER=1 CeLLSPACING=2 WIDTH="100%"gt;


<TR ALIGN=LEFT VALIGN=TOP BGCOLOR"#000000"gt;
<TDgt;<Bgt;<FONT COLOR="#FFFFFF"gt;<FONT SIZE=+1gt;
Merk / Model</FONTgt;</Bgt;</TDgt;

<TDgt;<Bgt;<FONT COLOR="#FFFFFF"gt;<FONT SIZE=+1


Tahun</FONTgt;</Bgt;</TDgt;

<TD><FONT COLOR="#FFFFFF"><FONT SIZE=+1>


Harga</FONT></TD>
</TR>

<TR>
<TD> Mitsubishi "Besar" 2000 cc</TD>
<TD>1992</TD>
<TD>Rp.44.000.000</TD>
</TR>

<TR>
<TD>Honda "mantap" sedan 2200 cc</TD>
<TD>1995</TD>
<TD>Rp.56.000.000</TD>
</TR>

<TR>
<TD>Toyota "Kuda" 1800 cc</TD>
<TD>1993</TD>
<TD>Rp.40.000.000</TD>
</TR>

<TR>
<TD>BMW 2000i sedan</TD>
<TD>1996</TD>
<TD>Rp.23.000.000</TD>
</TR>

<TR>
<TD>Daihatsu "Kudanil" minibus</TD>
<TD>1995</TD>
<TD>Rp.13.000.000</TD>
</TR>

<TR>
<TD>Suzuki "gajah" sedan 1300 cc</TD>
<TD>1995</TD>
<TD>Rp.19.000.000</TD>
</TR>

Tutorial Materi Internet SMAN 1 Babelan


<TR>
<TD>"Kelinci" sedan buatan dalam negri</TD>
<TD>1996</TD>
<TD>Rp.5.000.000</TD>
</TR>

<UL>
<P><IMG SRC="mailbol.gif" HEIGHT=50 WIDTH=50
ALIGN=ABSCENTER>
Pertanyaan,
Komentar silahkan kirim ke <A HREF="mailto:
Sales@mahal-mewah.diosoft.com>
Sales@mahal-mewah.diosoft.com</A></P>

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

</BODY>
</HTML>

Membuat Formulir Pelanggan


PT Mahal & Mewah juga menyediakan kemudahan berupa brosur produk
yang dibagi-bagikan secara cuma-cuma kepada para calon pelangganya.
Pengunjung web site PT Mahal & Mewah cukup mengisi nama dan
alamatnya pada formulir, dan kemudian brosur akan dikirim lewat pos oleh
pegawai perusahaan.

Membuat formulir sudah kita pelajari dalam bab-bab sebelumnya, di sini kita
tidak akan membahas lebih jauh lagi.

Kode HTML-nya adalah sebagai berikut;

<HTML><HEAD><TITLE>Formulir Pelanggan</TITLE></HEAD>
<BODY bgcolor="white" TEXT="balck" LINK="red" VLINK="red">
<HR SIZE=2>

<P><H4>
Untuk mempermudah anda menemukan kendaraan bermotor yang anda
butuhkan, PT Mahal & Mewah menyediakan layanan brosur
berwarna gratis kepada seluruh calon pelanggan kami.
Mohon isikan nama dan alamat anda, maka kami akan mengirimkan
brosur ke alamat anda.
Terima kasih!
</H4>
<FORM METHOD=POST ACTION="/cgi-bin/brosur.pl">
<PRE>
<B>Nama Anda</B> :<INPUT TYPE="text" NAME="nama"
SIZE="40">
<B>Alamat</B> :<INPUT TYPE="text" NAME="alamat"
SIZE="30"><INPUT TYPE="text" NAME="alamat2" SIZE="30">
<B>Kota</B> :<INPUT TYPE="text" NAME="kota"
SIZE="20">
<B>E-mail Anda</B> :<INPUT TYPE=TEXT SIZE=30 NAME=email
VALUE="">

<B>Telepon</B> :<INPUT TYPE="text" NAME="notel"


SIZE="20">
<B>Faksimili</B> :<INPUT TYPE="text" NAME="nofax"
SIZE="20">
</PRE>

<STRONG>Informasi yang dikehendaki :</STRONG><BR>


<INPUT TYPE="checkbox" NAME="informasi" VALUE="Mobilbaru"
checked>Mobil Baru
<INPUT TYPE="checkbox" NAME="informasi"
VALUE="mobilbekas">Mobil Bekas
<INPUT TYPE="checkbox" NAME="informasi"
VALUE="mobilantik">Mobil Antik
<INPUT TYPE="checkbox" NAME="informasi"
VALUE="trukdanbus">Truk dan Bus

Tutorial Materi Internet SMAN 1 Babelan


<P>

<STRONG>Dari mana anda tahu tentang website kami ?</STRONG>


<BR>
<INPUT TYPE="radio" NAME="darimana" VALUE="engine" checked>
Search engine<BR>
<INPUT TYPE="radio" NAME="darimana" VALUE="teman">
Dari rekan/saudara<BR>
<INPUT TYPE="radio" Name="darimana" VALUE="kebetulan">
Kebetulan saja
<P>
<STRONG>Komentar Anda:</STRONG><BR>
<TEXTAREA NAME="komentar" ROWS="7" COLS="50"></TEXTAREA>

<P>
<STRONG>Tolong klik pada "KIRIM" bila telah selesai mengisi
:</STRONG><BR>
<INPUT TYPE="submit" VALUE="KIRIM">
<INPUT VALUE="Ulangi" TYPE="reset>
</FORM>

<PRE> </PRE>
<FONT SIZE=-1>Created and maintened by Diosoft Software Inc.
C1996<BR>
INDONESIA</FONT> <BR></CENTER>

</BODY>
</HTML>

Tutorial Materi Internet SMAN 1 Babelan


Membuat Dokumen HTML
Dokumen HTML merupakan Teks murni (ASCII) dengan kode-kode special. Maksudnya adalah dokumen
HTML hanya akan berisi Tulisan berupa Huruf, Angka, tanda baca dan karakter-karakter lainnya
termasuk Kode-kode Tag HTML itu sendiri.

Membuat dokumen HTML sebenarnya dapat dilakukan dengan 2 cara, yaitu dengan cara manual dan
dengan cara menggunakan HTML Editor. Cara manual memerlukan banyak tenaga dan waktu karena
anda akan banyak melakukan pengetikan, sedangkan kalau menggunakan HTML Editor seperti MS
Front Page, Asymetrix WEB Publisher, Macro Media BackStage dll, akan mempermudah pekerjaan anda
termasuk tenaga dan waktu.

Apa yang dibutuhkan?


Anda hanya memerlukan sebuah program penyunting teks untuk membuat dokumen HTML. Penyunting
teks disini yang saya kira cukup untuk digunakan adalah Write/Word Pad, Note Pad, walaupun masih
banyak penyunting teks lainnya seperti MS Word dsb.

Bentuk Umum HTML


Dibawah ini ada contoh/bentuk umum dari sebuah dokumen HTML yang akan terlihat pada waktu kita
membukanya dengan menggunakan Text Editor atau NotePad:

<HTML>
<TITLE>Anak Irian's Home Page</TITLE>
<BODY>Hallo apa kabar?<BR>
Mudah-mudahan kabarnya Baik.
</BODY>
</HTML>

Dari contoh diatas jika anda membuka file ini dengan menggunakan MicroSoft Internet Browser atau
Netscape, anda hanya akan melihat tulisan:

Hallo apa kabar?


Mudah-mudahan kabarnya Baik.

Tanda '/' atau "</>" menandakan akhir perintah tag, entah itu untuk </HEAD>, </TITLE> dsb.

Jika ada Pembuka, harus ada Penutupnya juga!

Keterangan:

• <HTML>Pembuka/Awal setiap membuat suatu dokumen HTML.


• </HTML>Penutup/Akhir dari suatu dokumen HTML.
• <TITLE>Tag Pembuka untuk Judul Halaman/dokumen HTML.
• </TITLE>Tag Penutup untuk Judul Halaman/dokumen HTML.
• <BODY>Tag Awal dari Apa yang akan diketikan/diisi pada Dokumen HTML.
• </BODY>Tag Penutup dari sisan dokumen HTML.
• <BR> Tag untuk memisahkan satu baris menjadi dua baris

Yang harus diingat adalah:


Apa yang kita ketikan di NotePad dengan yang akan ditampilkan sebagai suatu dokumen di Internet
akan kelihatan beda.

Kode-kode TAG HTML dan Contohnya


Saya akan menjelaskan secara singkat mengenai kode-kode Tag pada HTML.

<!-- Isian Komentar anda -->


Untuk mengisi Komentar anda (untuk mempermudah perbaikan atau koreksi)
Semua ketikan yang diapit oleh tag <!-- --> tidak akan tampil saat dokumen dibuka oleh browser.

• Contoh:
<!-- Aturan Warna, Huruf dan Link Mulai dari sini -->

Tutorial Materi Internet SMAN 1 Babelan


<A HREF>
Untuk membuat Link ke halaman lain atau halaman yang sama dengan topic tertentu.

• Contoh:
Klik disini untuk <A HREF="halaman2.htm">Pindah ke halaman 2</A>
Hasilnya: Klik disini untuk Pindah ke halaman 2
• Contoh2:
<A HREF="http://www.yahoo.com/">Klik disini</A>untuk ke Yahoo!
Hasilnya: Klick disini untuk ke Yahoo!

</A>
Menutup suatu Link.

<A NAME>
Membuat nama jangkar untuk Link ke tempat tertentu pada halaman yang sama ataupun yang berbeda
berdasarkan topic yang diinginkan.

• Contoh:
<A NAME="kodetaghtml">Kode-kode TAG HTML dan Contohnya</A>
• Contoh2:
<A HREF="index.htm#kodetaghtml">Kode-kode TAG HTML</A>

</A>
Menutup suatu Link.

<B>
Membuat Text yang berada diantara kedua Tag menjadi Tebal (bold)

• Contoh:
<B>Peringatan!</B>Pemerintah.
• Hasilnya: Peringatan Pemerintah.

• Contoh2:
Peringatan!<B>Pemerintah</B>.
• Hasilnya: Peringatan Pemerintah.

<BGSOUND>
Menambahkan bunyi, baik itu file MID ataupun WAVE pada dokumen HTML anda.

• Contoh:
<BGSOUND SRC="jazz.mid">
• Contoh2:
<BGSOUND SRC="tada.wav">

<BODY>
Menentukan warna atau gambar latar belakang dokumen, warna text, jenis huruf, warna Link, warna
Link yang telah dikunjungi serta link yang aktif.

BGCOLOR = Warna latar belakang


BACKGROUND = Gambar latar belakang
FONT SIZE = Ukuran Huruf
FONT COLOR = Warna Huruf
LINK = Warna untuk Text Link
VLINK = Warna untuk Text Link yang telah dikunjungi

• Contoh:
<BODY BGCOLOR="FFFFFF" FONT SIZE=3 FONT COLOR="000000" LINK="0000FF"
VLINK="FF0000">
• Contoh2:
<BODY BACKGROUND="logo.gif" FONT SIZE=3 FONT COLOR="000000" LINK="0000FF"
VLINK="FF0000">

<BR>
Membagi Suatu baris menjadi Dua baris (tanpa jarak antara kedua baris), diletakan di depan kata/huruf
yang mau dipindahkan ke baris berikutnya.

Tutorial Materi Internet SMAN 1 Babelan


<CENTER>
Membuat Teks atau Grafis yang diapit Tag Center berada ditengah-tengah browser (Align Center)

• Contoh:
<CENTER>Selamat Datang</CENTER>
• Contoh2:
<CENTER><IMG SRC="logo.jpg"></CENTER>

</CENTER>
Menutup Kode Tag Center.

<FONT>
Merubah Jenis Huruf, Ukuran Huruf dan Warna Huruf.

• Contoh:
<FONT FACE="Comic Sans MS" FONT SIZE=4 FONT COLOR="000000">Selamat Datang di Anak
Irian's Home Page!</FONT>
Hasilnya:
Selamat Datang di Anak Irian's Home Page

</FONT>
Penutup untuk Tag Huruf.

<H1..H6>
Menentukan Ukura Header/Topic dari pada Dokumen

• Contoh:
<H1>Ini H1</H1>


Hasilnya:
Contoh:
Ini H1
<H2>Ini H2</H2>

Hasilnya: Ini H2
• Contoh:
<H3>Ini H3</H3>

Hasilnya: Ini H3
• Contoh:
<H4>Ini H4</H4>
Hasilnya: Ini H4

<HR>
Membuat Garis Horizontal pada dokumen HTML anda.

• Contoh:
<HR>
Hasilnya:

<HTML>
Perintah yang selalu diletakan pada bagian awal dokumen HTML yang menyatakan bahwa dokumen
ditulis dalam kode HTML.
</HTML>
Perintah yang selalu diletakan di Akhir suatu dokumen HTML.

<I>
Membuat Teks pada dokumen yang diapit oleh Tag <I> dan </I> menjadi miring (Italic)

• Contoh:
Computer merupakan <I>Ilmu Praktisi</I> dan bukan Teori belaka.
Hasilnya: Computer merupakan Ilmu Praktisi dan bukan Teori belaka.

Tutorial Materi Internet SMAN 1 Babelan


</I>
Menutup Tag Miring (Italic)

<IMG>
Memasukan Gambar Grafis, GrafisMap, serta Animasi kedalam dokumen HTML anda.

• Contoh:
<IMG SRC="toshi.gif">
• Contoh:
<A HREF><IMG SRC="mirclgo.gif"></A>
• Contoh:
<IMG SRC="toshi.avi">

Contoh pertama merupakan cara memasukan gambar, contoh kedua merupakan contoh cara
menggunakan gambar sebagai link dan contoh yang ketiga merupakan contoh untuk memasukan
gambar animasi (AVI) kedalam dokumen HTML.

<P></P>
Menentukan Awal dan Akhir sebuah Paragraf.

• Contoh:
<P>
Ini merupakan Awal serta akhir dari Paragraf pertama
</P>

<TITLE></TITLE>
Menentukan Judul untuk tiap dokumen HTML yang anda buat. Judul ini akan nampak pada Titlebar
browser anda.

Tutorial Materi Internet SMAN 1 Babelan


Kumpulan Tag HTML

<!-- --> 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

Kode untuk karakter khusus

Simbol Karakter yg ditampilkan


&quot; "
&amp; &

Tutorial Materi Internet SMAN 1 Babelan


&lt; <
&gt; >
&OElig; Œ
&oelig; œ
&Scaron; Š
&scaron; š
&Yuml; Ÿ
&circ; ˆ
&tilde; ˜
&ensp;  
&emsp;  
&thinsp;  
&zwnj; ‌
&zwj; ‍
&lrm;
&rlm;
&ndash; –
&mdash; —
&lsquo; ‘
&rsquo; ’
&sbquo; ‚
&ldquo; “
&rdquo; ”
&bdquo; „
&dagger; †
&Dagger; ‡
&permil; ‰
&lsaquo; ‹
&rsaquo; ›
&euro; €

Tutorial Materi Internet SMAN 1 Babelan

You might also like