MAKALAH

BAHASA PEMROGRAMAN HTML

DI SUSUN OLEH : AYU LESTARI

KELAS : X TKJ

GURU MATA PELAJARAN : HERMAWAN SUSANTO S.kom

SMK IT NURUL IMAN

SIDOMULYO
T.A 2022/2023
 PEMBAHASAN

1. Pengertian HTML

HTML atau Hypertext Markup Language merupakan protokol yang digunakan untuk
mentransfer data atau document dari web server ke browser kita (Internet Explorer, Netscape
Navigator, NeoPlanet, dll). HTML dirancang untuk digunakan tanpa tergantung pada suatu platform
tertentu. Dokumen HTML adalah suatu text biasa, dan disebut sebagai markup language karena
mengandung tanda – tanda ( tag ) tertentu yang digunakan untuk menetukan tampilan suatu teks dan
tingkat kepentingan dari teks tersebut dalam suatu dokumen. HTML inilah yang memungkinkan
Anda menjelajah internet dan melihat halaman web yang menarik.
Pada dokumen HTML yang termasuk system bypertext, maka dari itu kita tidak harus
membaca dokumen tersebut secara urut dari atas kebawah atau sebaliknya. Ciri utama HTML
adalah adanya tag dan elemen. Elemen tersebut adalah HEAD ini berfungsi memberikan informasi
tentang dokumen tersebut dan BODY yang berfungsi menentukan bagaimana isi suatu dokumen
ditampilkan didalam browser.
Sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yang digunakan
untuk membuat atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS
FrontPage sebagai contohnya. Tetapi tanpa mengetahui dasar-dasarnya kita tidak akan memperoleh
hasil yang maksimal. Karena walaupun software-software tersebut semakin menawarkan
kemudahan dalam membuat halaman web, tetapi biasanya seseorang masih perlu untuk mengedit
halaman web tersebut secara manual. Terutama untuk halaman web yang sangat komplek.
Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain web. Yang
dibutuhkan hanya sebuah word processor. Anda bisa menggunakan Notepad, WordPad, MS Word
atau yang lainnya. Tapi yang paling mudah adalah menggunakan Notepad.

2. perkembangan HTML

 HTML pada versi 1.0

Pemrograman Web pada HTML versi 1.0. memiliki kemampuan yakni menampilkan Heading,
Paragraph, Hypertext, List, cetak tebal, dan miring pada penulisan teks. Versi ini hanya mendukung
peletakan gambar pada dokumen tanpa membolehkan teks berada disekeliling gambar (wrap
text;top or bottom).
 HTML pada versi 2.0
Pemrograman Web pada HTML versi 2.0. ini terdapat penambahan kualitas TML yang ada pada
kemampuan menampilkan sebuah form di dokumen. Adanya form ini memudahkan kita dalam
memasukkan nama, alamat, serta saran atau kritik. Dan mulai dari versi ini HTML menjadi pioneer
dalam perkembangan homepage interaktiv.
 HTML pada versi 3.0
Pemrograman Web pada HTML versi 3.0. ini ada penambahan beberapa fasilitas baru misalnya
adanya tabel. Versi ini disebut juga HTML+, tetapi tidak tertahan lama dan segera digantikan
dengan HTML versi 3.2. (18/12/1997).
 HTML pada versi 4.0
Pemrograman Web pada HTML versi 4.0. ini memiliki banyak perubahan serta revisi dari HTML
versi sebelumnya. Hampir semua perintah-perintah HTML meliputi Table, Image, Text, Link,
Form, Imagemaps, Meta dan lainnya. Setelah itu pada tanggal 24 April 1998 lahirlah HTML versi
4.01 yang dikeluarkan oleh W3C secara resmi. Pada tahun 1999 versi HTML 4.01 menjadi standart
HTML, versi ini merupakan revisi dari versi sebelumnya yaitu HTML versi 4.0 (18 Desember
1997). HTML versi ini (HTML 4.01) masih menjadi standart resmi hingga sekarang ini.
 HTML pada versi 5.0
Pemrograman Web pada HTML versi 5.0 versi ini adalah perkembangan HTML generasi saat ini.
Dan mungkin akan terus berkembang searah mengikuti perkembangan zaman. Versi ini juga
merupakan generasi terakhir. Beberapa fitur baru yang berada pada versi 5 ini antara lain :
Fitur canvas memungkinkan kita untuk menggambar.
Fitur Video dan Audio sebagai media player untuk memutar video atau musik.
Elemen-element baru seperti, artikel, header, footer , dan navigasi.
Fitur Dukungan yang lebih baik guna penyimpana secara offline local.
Fitur Control dalam bentuk baru, meliputi ; kalender, waktu, email, search, URL
Akan tetapi sampai saat ini HTML versi ini belum menjadi standart resmi. Banyak browser juga
yang belum support terhadap HTML 5. HTML versi ini (HTML 5) mungkin akan menjadi standart
baru untuk HTLM dan XHTML.

3. Bahasa Pemrograman dan pendeklarasian HTML

· Personal Home Page (PHP)

Ekstensi File: .php, php3, atau tanpa ekstensi
PHP ditulis oleh Rasmus Lerdorf yang pada awalnya ia gunakan untuk mencatat jumlah
pengunjung situs yang membuka halaman resumenya. Ia kemudian menulis ulang kode-kodenya
dengan bahasa C yang kemudian menjadikan bahasa itu menjadi lebih kaya kemampuan.
Barulah setelah itu banyak bermunculan tokoh-tokoh yang berjasa dalam perkembangan PHP
seperti
Zeev Suraski dan Andi Gutmans yang menulis kembali parsing Engine unuk menciptakan PHP
versi 3. PHP kemudian menjadi modul Apache yang paling sering digunakan. Berikut ini contoh
script PHP yang akan menampilkan text Hallo Dunia.
<html>
<head>
<title>PHP menampilkan Halo Dunia</title>
</head> <?php
echo “<br><br><h1>Hallo dunia<br><br></h1>”;
?>
</html>

· CGI (Common Gateway Interface)

Ekstensi File: .cgi, .pl
CGI (Common Gateway Interface) merupakan standar Internet tertua dan paling berkembang
sebagai suatu alat lewatnya informasi dari web server ke suatu program dan mengembalikan
hasilnya ke browser.
Suatu program CGI dapat ditulis dengan bahasa-bahasa berikut:
- Perl
- Java
- C, C++
- Script-script UNIX
- Visual Basic
- MacOS atau AppleScript
Karena itulah CGI sebenarnya kurang tepat jika dikategorikan sebagai bahasa karena program CGI
sendiri dapat ditulis menggunakan beragam bahasa.

· PERL (Practical Extraction and Report Language)

Ekstensi File: .pl atau bisa apa saja
PERL merupakan bahasa pemrograman tingkat tinggi yang ditemukan oleh Larry Wall (1987).
PERL memiliki kemampuan untuk dapat diterapkan pada hampir semua jenis Operating System dan
yang terpenting, perl bisa didapatkan secara GRATIS!!
Pada Web, eksekusi perl biasa dijalankan dengan CGI (Common Gateway Interface) sebagai
mkanisme untuk menampilkan output text ke browser. Lebih jauh tentang Perl dan keamanannya
dapat anda temukan di .
· ColdFusion
Ekstensi File: .cfm
Coldfusion adalah sistem pengembangan aplikasi yang dikembangkan oleh Alaire. Komponen
utama Coldfusion adalah:
1) ColdFusion Application Server
2) ColdFusion Markup Language
3) ColdFusion Studio
File-file CFM disimpan dalam bentuk plain text, sama halnya seperti PERL dan PHP sehingga
siapapun dapat melihat isinya.

· ASP (Active Server Page)

Ekstensi file: .asp
ASP diciptakan khusus bagi server IIS milik microsoft. Bahasa ini merupakan bahasa pemrograman
web yang dinamis. ASP dapat digunakan untuk mengeksekusi beragam request terhadap suatu
database atau perintah-perintah pada system lokal.
Berikut contoh sederhana berikut yang akan menampilkan tanggal dan jam pada sebuah halaman
web untuk server-side:
<%@ language=”VBSCRIPT” %>
<html>
<body>
<h1>Tanggal:</h1>
<% =date %>
<h1>Jam</h1>
<% =time %>
</body>
</html>
Sedangkan fungsi yang sama pada Client-Side:
<html>
<body>
<script type=”text/vbscript”> document.write(“<h1>Tanggal:</h1>”) document.write(“<br>” &
date() & “<br>) document.write(“<h1>Jam:</h1>”) document.write(“<br>” & time() & “<br>)
</script>
<body>
</html>

· JAVA
Ekstensi File: Tidak ada
Baca artikel sebelumnya tentang sejarah Java untuk berkenalan dengan bahasa ini.

4. Struktur dasar HTML

HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan
dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut
harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan
</namatag> (terdapat tanda “/”).

Berikut ini adalah kerangka dasar dokumen HTML yang merupakan aturan dari W3 Consortium.
 <HTML>
 <HEAD>***bagian dari head***</HEAD>
 <BODY>***bagian dari body***</BODY>
 </HTML>
Sebuah halaman web minimal mempunyai empat buat tag, yaitu :
 <HTML>
Sebagai tanda awal dokumen HTML.
 <HEAD>
Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE,
ISINDEX, LINK, SCRIPT, STYLE & META.
 <TITLE>
Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada
bagian paling atas browser Anda (pada title bar).
Contoh : <TITLE>Tips HTML — http://www.klik-kanan.com</TITLE&gt;
  <BODY>
Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna
teks, warna link, warna visited link, warna active link dan lain-lain.

Atribut :
BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.
Contoh :
<BODY bgcolor=”#000000″ background=”images/pcb.gif” text=”#FFFFFF” link=”#FF0000″
vlink=”FFFF00″ alink=”#0000FF”>

Sebuah contoh sederhana dokumen HTML :

 <HTML>
 <HEAD>
 <TITLE>Halaman pembuka
 </TITLE>
 </HEAD>
 <BODY bgcolor=”#FFFFFF” background=”images/gambar1.gif” text=”#FF0000″>
Letakkan text, images, dan link Anda di sini
 </BODY>
 </HTML>
a) Membuat Homepage Sederhana
Dalam pembuatah sebuah homepage, ada beberapa software yang dapat digunakan antara lain:

Notepad
Program teks sederhana milik Windows yang dapat digunakan untuk mengetikkan perintah HTML.
Jika kita menggunakan Linux atau unix, maka kita bisa menggunakan vi atau pico sebagai
pengganti Notepad.
Adapun langkah kerja membuat homepage dengan menggunakan Notepad adalah:
 Klik Start pada menu utama Windows
 All Programs
 Accessories
 Notepad
1) Pembuat Grafis
Untuk membuat gambar yang menarik perhatian. Seperti Adobe Photoshop, CorelDraw, dsb.
 1) Browser
Untuk melihat hasil/tampilan homepage dari program -program HTML yang telah kita ketikkan di
Notepad. Yang kita gunakan kali ini adalah Microsoft Internet Explorer.

Ada 2 hal penting yang perlu kita ketahui yaitu fasilitas View Source dan Refresh yang berguna
mempercepat pekerjaan jika kita menggunakan Internet Explorer, yaitu :
 View Source, untuk melihat source (isi perintah HTML) dari sebuah dokumen HTML. Pada
browser internet explorer,jika mengklik View lalu pilih Source, maka akan terlihat source
dari dokumen tersebut seperti pada Notepad. Sehingga kita akan lebih mudah melakukan
perubahan/edit dengan cepat
 Refresh, melihat dengan cepat tampilan baru dokumen HTML yang telah di ubah. Dengan
cara mengklik symbol refresh atau tekan F5.
b) Pengaturan Tampilan Homepage
Agar tampilan desain lebih menarik, maka dalam membuat program HTML sebaiknya juga
memperhatikan beberapa properti, yaitu :

I. HTML Format Teks

Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks
seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa digunakan
dalam pengaturan teks :
Headers: <Hn>..</Hn>
Digunakan untuk mengatur ukuran huruf pada header. “n” mempunyai nilai antara 1 – 6 atau antara
<H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran
terkecil.
Contoh tulis dalam notepad :
 <HTML><BODY>
 <H1>Header level 1</H1>
 <H2>Header level 2</H2>
 <H3>Header level 3</H3>
 <H4>Header level 4</H4>
 <H5>Header level 5</H5>
 <H6>Header level 6</H6>
 <HTML><BODY>
Paragraph Baru: <P>
Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak
diberi.
Perhatikanlah contoh tulisan di bawah ini: <HTML><BODY>
Paragraf pertama <P>Paragraf kedua <P>Paragraf ketiga

</BODY></HTML>

Line Break: <BR>

Line break digunakan untuk pindah ke baris baru. Cobalah membuat tulisan berikut pada Notepad:

<HTML><body> baris pertama

Baris kedua
Baris ketiga

<HTML><BODY>

Kesimpulannya, penekanan tombol Enter tidak menghasilkan baris dalam tampilan browser.
Demikianlah sifat penulisan dokumen HTML. Lantas, bagaimana caranya membuat baris?
Gunakanlah tag <BR>. Tag ini tidak mempunyai tag penutup. Bukalah source kode file HTML tadi
lalu edit seperti berikut:
<HTML><BODY>
Baris pertama

<BR>Baris kedua
<BR>Baris ketiga

</HTML></BODY>

Simpan kemudian lihat hasilnya dengan me-refresh pada browser. Hasilnya akan seperti ini:
 Baris pertama
 Baris kedua
 Baris ketiga
 Membuat baris kalimat, Tag <BR> tersebut dapat pula digunakan untuk membuat baris kosong,
artinya baris yang tidak mempunyai kalimat apa-apa. Editlah sekali lagi source code menjadi seperti
ini:

<HTML><BODY>

Baris pertama<BR><BR>Baris kedua kosong, dan ini baris ketiga<BR><BR><BR>Baris keempat

dan kelima kosong, dan ini baris keenam

</BODY></HTML

Simpan lalu refresh sekali lagi maka hasilnya akan seperti ini:
 Baris pertama
 Baris kedua kosong, dan ini baris ketiga
 Baris keempat dan kelima kosong, dan ini baris keenam

Di sini kita lihat bahwa tag <BR> yang ditulis dua kali akan menghasilkan dua baris, demikian
seterusnya.
No Line Break: <NOBR>
Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila
baris pertama sudah terlalu panjang.
Font <FONT>
Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR.
Size adalah Ukuran font yang digunakan, berkisar antara 1 – 7 dengan 1 merupakan ukuran
terkecil dan 7 merupakan ukuran terbesar.
Face adalah jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-
masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus
digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harus dipertimbangkan apakah font
yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang
lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-
aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit “aneh” Anda
bisa menggunakan graphic.
COLOR adalah Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa
juga langsung menggunakan nama warna (red misalnya).
Contoh :
<FONT SIZE=4 FACE=”Verdana, Arial, Helvetica” COLOR=”#FF0000″>Contoh teks yang
berwarna merah</FONT>
Hasilnya akan terlihat seperti :
Contoh teks yang berwarna merah
<BASEFONT>
Digunakan untuk mendefinisikan “default text”. Attribut sama dengan attribut FONT. Tag FONT
akan mengoverwrite setting pada BASEFONT.

Contoh :
<BASEFONT SIZE=2 FACE=”Arial,Helvetica” COLOR=”#FF0000″>
<CITE>Digunakan untuk quoting text
<CODE>
Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada
dokumen HTML Anda).

<SAMP>

Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada
dokumen HTML Anda)
<KBD>

Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada
dokumen HTML Anda) <BIG> Ukuran teks akan lebih besar satu ukuran.
 <SMALL> Ukuran teks akan lebih kecil satu ukuran
 <SUP> Membuat tekssuperscript
 <SUB> membuat tekssub script
 <ABBREV>Abbreviations
 <ACRONYM> Untuk akronim
 <PERSON> Digunakan untuk indexing
 <Q> Membuat short inline quotation
 <VAR> Membuat variable name, selalu dalam ITALICS.
Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks,
yaitu :
 <I> Italic text
  <U> Underscore
 <TT> Typewriter
 <S> Strikeout – draws a line through the text
 <PRE> Preformatted Text
 <DFN> Definition
 <BLINK> Text berkedip (lebih baik jangan digunakan)
 <STRONG> Strong
 <ADDRESS>
Tag-tag ini berfungsi untuk mengubah tipe huruf yaitu menebalkan (bold), membuat tulisan miring
(italic) atau memberi garis bawah (underline). Buka lagi program Notepad kemudian tuliskan
seperti berikut ini:
 <HTML>
 <HEAD>
 <TITLE>Tipe-tipe Teks</TILE>
 </HEAD>
 <BODY>
Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen apa saja.
Ketiga tipe tersebut ialah tulisan tebal, tulisan miring dan tulisan bergaris bawah. Bisa pula dua tipe
huruf dipadukan misalnya tulisan tebal dan miring, tulisan tebal dan bergaris bawah atau tulisan
miring dan bergaris bawah. Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung
menjadi satu berupa tulisan tebal, miring dan bergaris bawah.

II. HTML Image ( gambar )

Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda. Atributnya
adalah : alt, align=(center, left, right), hspave, vspace, border, width & height.
Contoh :

<IMG SRC=”logo.gif” alt=”Ini adalah logo halaman pembuka” width=200 height=100>

<IMG SRC=”logo.gif” hspace=10 vspace=5 align=right border=2>

III. HTML Links :

 Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A>
akan terdapat garis bawah.
Contoh :
 <A HREF=”halaman2.html”>Klik di sini</A> Untuk membuat link ke halaman lain.

 <A HREF=”mailto:webmaster@klik-kanan.com”>Klik di sini</A> Untuk membuat link

pada alamat e-mail.

 <A HREF=”#aplikasi”>Klik di sini</A> Untuk membuat link ke bagian lain pada halaman
yang sama.

 <A HREF=”halamanlain.html#aplikasi”>Klik di sini</A> Untuk membuat link kebagian

lain pada halaman yang berbeda.

 <A HREF=”halaman2.html”><IMG SRC=”gambar.gif”></A> Untuk membuat link dengan

menggunakan gambar.

IV. HTML List ( dasar urutan )

Terdapat tiga tipe list yang dapat digunakan, yaitu :

Unordered Lists <UL>
Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <LI>.
Contoh :
 <UL>
 <LI> Item nomer 1
 <LI> Item nomer 2
 <LI> Item nomer 3
 </UL>

Hasil dari kode di atas adalah:

 Item nomer 1
 Item nomer 2
 Item nomer 3

Dengan atribut TYPE Anda dapat mendefinisikan bentuk disc, circle atau square bullet point.
Contoh : <UL COMPACT>

Ordered Lists: <OL>

Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau
romawi. List entries juga didefinisikan dengan <LI> tag.

Contoh :
 <OL TYPE=I>
 <LI> Item nomer 1
 <LI> Item nomer 2
 <LI> Item nomer 3
 </OL>

Hasil dari kode di atas adalah :

 Item nomer 1
 Item nomerr 2
 Item nomerr 3

Untuk TYPE Anda dapat juga menggunakan :

 1– Default numbers, 1, 2, 3, etc.
 A– Huruf besar. A, B, C, etc.
 a– Huruf kecil. a, b, c, etc.
 I– Romawi huruf besar. I, II, III, etc.
 Romawi huruf kecil , i, ii, iii, etc.

Definition Lists: <DL>

Contoh :

 <DL>
 <DT> Item pertama.
 <DD> Penjelasan tentang item pertama.
 <DT> Item kedua.
 <DD> Penjelasan tentang item kedua
 </DL>
Hasil dari kode di atas adalah :

 Item pertama.
 Penjelasan tentang item pertama.
 Item kedua.
 Penjelasan tentang item kedua

V. HTML Table ( tabel )

Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table
Anda dapat membuat halaman web “terbagi” pada beberapa kolom atau baris. Contohnya seperti
pada halaman web yang sedang Anda baca ini.
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table : <TABLE>,
<TR>, dan <TD>. Yang perlu diingat adalah bahwa tab <TR> dan <TD> harus terletak di antara
tag <TABLE> dan </TABLE>

<TABLE> Terdiri dari atribut :

 align – perataan : rata kiri (left), tengah (center) atau kanan (right).
 bgcolor – warna latar belakang (background) dari tabel.
 border – ukuran lebar border tabel (dalam pixel).
 cellpadding – jarak antara isi cell dengan batas cell (dalam pixel).
 cellspacing – jarak antar cell (dalam pixel).
 width – ukuran tabel dalam pixel atau percent.
Contoh :

 <TABLE align=”center” bgcolor=”#0000FF” border=”2″

 cellpadding=”5″ cellspacing=”2″ width=”90%”>
 <TR>

Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
align – perataan : rata kiri (left), tengah (center) atau kanan (right).
bgcolor – warna latar belakang dari baris.
valign – perataan vertikal : top, middle atau bottom.

Contoh : <TR align=”right” bgcolor=”#0000FF” valign=top>

 <TD>
 Tag ini digunakan untuk membuat kolom baru pada tabel.
 align – perataan
 background – image yang digunakan sebagai latar belakang dari kolom.
 bgcolor – warna latar belakang
 colspan – lihat gambar contoh
 height – ukuran tinggi cell dalam pixels.
 nowrap – membuat supaya isi dari kolom tetap berada pada satu baris.
 rowspan – lihat gambar contoh
 valign – perataan vertikal :top, middle atau bottom.
 width – ukuran kolom dalam pixel atau percen.

Contoh :
<TD align=”right” background=”back.gif” bgcolor=”#0000FF” colspan=”3″ height=”200″ nowrap
rowspan=”2″ valign=”bottom” width=”300″

<table width=”100″ border=”1″ cellspacing=”2″

cellpadding=”2″>
<tr>
<td bgcolor=”#0000FF”> &nbsp;</td>
<td bgcolor=”#FFFF66″>&nbsp;</td>
<td rowspan=”2″ bgcolor=”#FF3366″>&nbsp;</td> </tr>
<tr> <td colspan=”2″ bgcolor=”#33CC66″>&nbsp;</td> </tr> <tr>
<td colspan=”3″ bgcolor=”#FFCC99″>&nbsp;</td>
</tr>
</table>
<table width=”100″ border=”0″ cellspacing=”0″
cellpadding=”0″>
<tr> <td bgcolor=”#0000FF”>&nbsp; </td>
<td bgcolor=”#FFFF66″>&nbsp;</td>
<td rowspan=”2″ bgcolor=”#FF3366″>&nbsp;</td>
</tr

1. <FRAMESET cols=”*,140″> <FRAME SRC=”homepage.htm”> <FRAME

SRC=”menu.htm”> </FRAMESET>
2. <FRAMESET cols=”100,*”> <FRAME SRC=”homepage.htm”> <FRAME
SRC=”menu.htm”> </FRAMESET>
3. <FRAMESET rows=”100,*”> <FRAME SRC=”homepage.htm”> <FRAME
SRC=”menu.htm”> </FRAMESET>
4. 4<FRAMESET rows=”*,60″> <FRAME SRC=”homepage.htm”> <FRAME
SRC=”menu.htm”> </FRAMESET>
5. 5<FRAMESET rows=”*,60″> <FRAME SRC=”homepage.htm”> <FRAMESET
cols=”50%,50%”> <FRAME SRC=”menu.htm” > <FRAME SRC=”menu2.htm” >
</FRAMESET></FRAMESET>
6. <FRAMESET cols=”*,50%”> <FRAME SRC=”homepage.htm”> <FRAMESET
rows=”15%,15%,70%”> <FRAME SRC=”menu.htm” > <FRAME SRC=”menu2.htm” >
<FRAME SRC=”menu3.htm” > </FRAMESET></FRAMESET>
7. <FRAMESET cols=”50%,50%”> <FRAMESET rows=”50%,50%”> <FRAME
SRC=”homepage.htm” > <FRAME SRC=”homepage2.htm” > </FRAMESET>
<FRAMESET rows=”50%,50%”> <FRAME SRC=”menu.htm” > <FRAME
SRC=”menu2.htm” > </FRAMESET></FRAMESET>
8. 8<FRAMESET rows=”15%,70%,15%”> <FRAME SRC=”homepage.htm” > <FRAMESET
cols=”15%,70%,15%”> <FRAME SRC=”menu.htm”> <FRAME SRC=”menu2.htm”>
<FRAME SRC=”menu3.htm”> </FRAMESET> <FRAME SRC=”homepage.htm”>
</FRAMESET></FRAMESET>

VI. HTML Frames

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
 Kode untuk karakter khusus

Simbol Karakter yg ditampilkan

&quot; “
&amp; &
&lt; <
&gt; >
&OElig; OE
&oelig; oe
&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; €

<html>
<head>
<title> Contoh script HTML </title>
</head>
<body>
<h2>Belajar Desain WEB dengan HTML</h2>
HTML adalah dasar pembuatan website,<br>
dimana perintah – perintah HTML dapat diketik <br>
pada notepad (bila menggunakan S.O Windows) atau
Vi(bila menggunakan Linux).
</body>
</html>
Simpan dengan nama Source1.htm dengan memilih type All files. Kemudian buka dengan Browser
dan lihat hasilnya.