Professional Documents
Culture Documents
<HTML>
<HEAD>
<TITLE>Web Site PT Mahal & Mewah</TITLE>
</HEAD>
<BODY BACKGROUND="bgcolor.jpg">
<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>
<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>
<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>
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">
<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>
<HTMLgt;
<HEADgt;
<TITLEgt;Daftar Mobil Bekas</TITLEgt;
</HEADgt;
<BODY BACKGROUND="bgcolor.jpg"gt;
<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;
<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>
<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 sudah kita pelajari dalam bab-bab sebelumnya, di sini kita
tidak akan membahas lebih jauh lagi.
<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="">
<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>
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.
<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:
Tanda '/' atau "</>" menandakan akhir perintah tag, entah itu untuk </HEAD>, </TITLE> dsb.
Keterangan:
• Contoh:
<!-- Aturan Warna, Huruf dan Link Mulai dari sini -->
• 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.
• 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.
• 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.
<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.
<!-- --> 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