HTML

PANDUAN SEDERHANA PEMBUATAN WEBSITE

SMAK Kolese Santo Yusup

Malang, 2020
 DAFTAR ISI

BAB I PENDAHULUAN
A. Pengantar 1
B. Komponen Dalam Website 1
C. Contoh Website 2
BAB II DOKUMEN HTML
A. Pendahuluan 5
B. Pembuatan Dokumen HTML 5
C. Struktur Dokumen HTML 5
D. Format Tag HTML 5
BAB III KEPALA DOKUMEN (HEAD)
A. Pengantar 7
B. Tag Dalam Kepala Dokumen 7
BAB IV ISI DOKUMEN (BODY)
A. Pengantar 8
B. Format Dokumen HTML 8
BAB V LIST 11
BAB VI LINK 12
BAB VII GAMBAR DAN MULTIMEDIA
A. Pengantar 14
B. Menampilkan Gambar 14
C. Menggunakan Multimedia 15
D. Menggunakan Animasi Teks 15
BAB VIII TABEL
A. Pendahuluan 17
B. Membuat Tabel 17
BAB IX FORM
A. Pendahuluan 26
B. Mengenal Form 26
C. Metode Pengisian Data 26
D. Jenis Masukan 27
BAB X CASCADING STYLE SHEETS
A. Pengantar 30
B. Menuliskan Style Sheets 30
C. Atribut Style Sheets 32
 BAB I
PENDAHULUAN

A. Pengantar
Website sering juga disebut web, dapat diartikan kumpulan halaman yang menampilkan berbagai macam
informasi berupa teks, data, gambar diam ataubergerak, animasi, suara, video maupun gabungan dari
semuanya, baik bersifat statis maupun dinamis yang saling berkaitan melalui tautan atau hyperlink.
Definisi website adalah kumpulan berbagai macam halaman yang terangkum didalam domain atau subdomain
yang berada di dalam jaringan internet.
Halaman website biasanya berupa dokumen yang ditulis dalam format Hyper Text Markup Language (HTML),
yang bisa diakses melalui HTTP.
HTTP adalah suatu protokol yang menyampaikan berbagai informasi dari server website untuk ditampilkan
kepada user atau pengguna melalui web browser.

B. Komponen Dalam Website

1. Desain
a. Layout yang sederhana dan konsisten
 Pengguna website lebih mudah mengakses informasi pada website dengan layout sederhana
sebaliknya layout yang rumit menyebabkan kesulitan bagi pengguna.
 Layout yang konsisten antar halaman memberi kemudahan bagi pengguna website untuk
menjelajahi website sebaliknya layout yang berbeda antar halaman membingungkan
penggunanya.
 Penggunaan font berpengaruh pada tampilan layout dalam hal kemudahan membaca. Font
dengan model cantik misalnya Blackadder ITC, Chiller, Freestyle Script dan lain-lain sebaiknya
digunakan terbatas pada bagian headline, judul, sub judul saja bukan pada bagian konten
b. Menarik perhatian (eye catching)
Tampilan yang menarik perhatian menyebabkan pengguna lebih lama dan betah mengakses
website sehingga memperbesar peluang terbacanya informasi oleh pengguna.
c. Pemilihan warna latar dan background
 Warna memiliki pengaruh yang kuat terhadap sikap dan emosi manusia serta
menunjukkan identitas produk website yang dipublikasikan.
 Pemilihan background yang dipilih harus mendukung publikasi produk.
 Komposisi warna latar, background dan font dibuat kontras agar proses membaca
menjadi mudah
d. Penggunaan navigasi
Navigasi membantu pengunjung untuk menemukan informasi yang tepat ketika menjelajahi
website. Navigasi dapat ditampilkan dalam berbagai media, yaitu teks, gambar, atau animasi.
2. Konten
a. Isi yang relevan
Isi website harus mendukung tujuan website termasuk gambar, animasi dan multimedia yang
ditampilkan.
b. Responsif
Halaman website perlu diberi informasi yang jelas untuk menanggapi respon pengguna
website. Pengguna akan segera meninggalkan website jika mereka tidak mendapatkan
kejelasan tentang apa yang ditawarkan oleh website.
c. Update
Isi website selalu di-update (diperbaharui) secara berkala dengan tujuan pengguna
mendapatkan informasi terbaru.
d. Ejaan dan tata bahasa

Membuat Website Hal 1

 Penulisan dan bahasa yang dipergunakan harus sesuai dengan aturan yang baik dan benar.
Hindari kesalahan penulisan dan buat daftar penjelasan untuk istilah-istilah khusus.
e. Penggunaan iklan
Tidak menempatkan iklan lebih banyak daripada konten, karena pengguna tidak mencari iklan
melainkan konten dari website.
f. Multimedia
Tidak memuat file multimedia terlalu banyak. Video dan audio adalah konten multimedia
yang cukup mengganggu pengguna. Biasanya pengguna akan langsung mengurangi volume
atau bahkan menutup website. Apabila file multimedia diperlukan, buatlah agar file tersebut
tidak langsung dijalankan pada saat website dibuka melainkan menambahkan link untuk
mengaktifkan file multimedia tersebut.
3. Hosting
a. Jenis hosting
Pilihlah jenis hosting yang telah teruji handal. Pemilihan hosting sangat menentukan
kestabilan sebuah website.
b. Domain
Nama domain diusahakan singkat dan mudah diingat.
Contoh : jika saya ingin membuat website dengan kategori pengembangan diri untuk menjadi
lebih baik (to be better self) maka optimasi SEO akan lebih mudah jika domain website juga
mengandung kata ‘be better self’ seperti bebetterself.com, betterself.com, bebetterself.info,
bebetterself.org, bebetterself.net, dan sebagainya.
c. Penentuan kata kunci (keyword)
Kata kunci mempermudah pengguna untuk menemukan website melalui search engine.

C. Contoh Website
1. Menggunakan Keyword

2. Nama domain mengandung kata yang terdapat pada judul website

Membuat Website Hal 2

 3. Layout sederhana dengan navigasi yang baik, font, komposisi warna dan latar belakang nyaman dilihat,
ikon menarik dan tidak ada video dalam website

4. Layout yang konsisten antar produk dan konten sesuai tujuan website

Membuat Website Hal 3

 5. Website responsif dengan menyediakan pilihan Provinsi/Kota atau Kategori dan update terbaru

6. Iklan tidak mendominasi website

Membuat Website Hal 4

 BAB II
DOKUMEN HTML

A. Pendahuluan
HTML adalah bahasa yang digunakan untuk membuat halaman-halaman hypertext pada internet. HTML
mirip dengan dokumen teks biasa, namun HTML membutuhkan web browser, memiliki link-link yang
berfungsi untuk melompat ke bagian topik yang diinginkan dan menggunakan tag-tag pada dokumennya
(tag mirip seperti perintah).

B. Pembuatan Dokumen HTML

1. Membuat Dokumen HTML
Perangkat lunak yang dibutuhkan untuk membuat dokumen HTML adalah perangkat lunak pengolah kata
misalnya Notepad, Notepad++, Wordpad dan lain-lain.
Langkah untuk membuat dokumen HTML adalah:
a. Buka perangkat lunak pengolah kata
b. Ketik tag HTML
c. Simpan dokumen dengan ekstensi .htm atau .html
2. Menjalankan Dokumen HTML
Perangkat lunak yang dibutuhkan untuk menjalankan dokumen HTML adalah web browser misalnya
Mozilla, Google Chrome, Opera dan lain-lain.
Langkah untuk menjalankan dokumen HTML adalah:
d. Klik ganda nama dokumen HTML
e. Atau buka web browser, ketik nama dokumen HTML kemudian tekan tombol enter

C. Struktur Dokumen HTML

1. Dokumen HTML mempunyai 3 buah tag utama yang membentuk struktur dari dokumen tersebut, ketiga
buah tag tersebut adalah:
a. tag HTML berfungsi untuk menyatakan suatu dokumen HTML
b. tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML
c. tag BODY menyimpan informasi atau data yang akan ditampilkan oleh browser.
2. Struktur dokumen HTML seperti di bawah ini:
<HTML>
<HEAD>
---- Bagian HEAD ----
---- Bagian HEAD ----
---- Bagian HEAD ----
---- Bagian HEAD ----
</HEAD>
<BODY>
---- Bagian BODY ----
---- Bagian BODY ----
---- Bagian BODY ----
</BODY>
</HTML>
3. Struktur dokumen HTML tidak selalu wajib dituliskan secara lengkap, namun yang harus ditulis adalah
bagian Body

D. Format Tag HTML

1. Format penulisan tag
Terdapat 3 macam bentuk tag yang dikenal oleh HTML yaitu:
Membuat Website Hal 5
 a. Tag berpasangan: <tag>…………. </tag>
Contoh:
<B> belajar HTML </B>
b. Tag tunggal: <tag>
Contoh:
<HR>
c. Tag beratribut: <tag atribut=nilai> …………. </tag>
Contoh:
<A HREF=http://www.google.com> link ke Google </A>
2. HTML tidak membedakan penggunaan kapitalisasi tulisan dari suatu elemen karena semuanya memberikan
hasil yang sama.
3. Hal yang perlu diperhatikan dalam penulisan tag berpasangan adalah:
a. tidak boleh saling tumpang tindih atau simetri
contoh penulisan yang benar:
<tag1>
……………………
……………………
<tag2>
……………………
……………………
</tag2>
</tag1>
contoh penulisan yang salah:
<tag1>
……………………
……………………
<tag2>
……………………
……………………
</tag1>
</tag2>
b. tidak menuliskan penutup pasangan
contoh penulisan yang salah:
<tag1>
……………………
……………………
<tag2>
……………………
……………………
</tag1>

Membuat Website Hal 6

 BAB III
KEPALA DOKUMEN (HEAD)

A. Pengantar
Kelompok head dinyatakan dengan tag <HEAD> ……. </HEAD> merupakan bagian pembuka atau kepala dari
dokumen yang berisi informasi tentang judul dokumen, baris URL, hubungan antar dokumen HTML dan index
suatu dokumen. Informasi yang ada dalam bagian Head tidak terlihat sewaktu dokumen tersebut dibuka pada
suatu browser.

B. Tag Dalam Kepala Dokumen

Tidak semua tag diperbolehkan diletakkan dalam head, yang boleh dan manfaatnya adalah:
1. TITLE
- mutlak digunakan untuk judul dokumen
- setiap dokumen hanya memiliki sebuah judul
- judul dokumen akan ditampilkan pada title bar web browser
- penulisan: <TITLE> …… </TITLE>
- contoh:
<TITLE> Belajar HTML </TITLE>
2. META
- menyatakan informasi suatu dokumen
- mempunyai 3 atribut yaitu
a. NAME : merupakan informasi suatu dokumen
b. HTTP-EQUIV : menghubungkan elemen meta ke respon protokol tertentu
c. CONTENT : isi dari nama suatu meta atau respon yang dibuat oleh HTTP-EQUIV
- penulisan: <META>
- contoh:
<META NAME=”GENERATOR” CONTENT=”MICROSOFT WORD”>
<META HTTP-EQUIV=”REFRESH” CONTENT=”7”>
3. STYLE
- Dokumen tambahan yang berisi style untuk suatu dokumen HTML
- penulisan: <STYLE> ……. </STYLE>

Membuat Website Hal 7

 BAB IV
ISI DOKUMEN (BODY)

A. Pengantar
Isi dokumen HTML diletakkan di dalam tag <BODY> ….. </BODY>, dapat berupa tag, tabel, gambar, multimedia,
form dan lain-lain.
Contoh:
<BODY>
Selamat datang di website Belajar HTML
Halaman ini berisi semua perintah HTML yang dibutuhkan
</BODY>

B. Format Dokumen HTML

1. HEADING
Heading adalah sekumpulan teks yang digunakan sebagai judul atau sub judul dalam dokumen HTML
Terdapat 6 buah tingkat heading dari tingkat 1 sampai dengan tingkat 6.
Heading tingkat 1 biasanya merupakan judul utama, sedangkan heading tingkat berikutnya merupakan sub
judul dari judul utama.
Penulisan:
<Hx> ……. </Hx>, dimana x adalah nomer tingkatan
Contoh:
<H1> BELAJAR HTML </H1>
<H2> Kepala Dokumen </H2>
<H3> Pengantar </H3>
2. FORMAT KARAKTER
Digunakan untuk melakukan perubahan tampilan teks seperti yang diinginkan yakni:
- <B> … </B> untuk memberi efek cetak tebal
- <I> … </I> untuk memberi efek cetak miring
- <U> … </U> untuk memberi efek cetak garis bawah
- <S> … </S> untuk memberi efek cetak coretan
- <SUP> … </SUP> untuk memberi efek cetak superscript
- <SUB> … </SUB> untuk memberi efek cetak subscript
3. KARAKTER SPESIAL
Karakter spesial adalah karakter yang penggunaanya harus menggunakan kode tertentu seperti karakter
“<”, “>”, spasi, “©” dan lain-lain.
Contoh:
- &lt; untuk menampilkan tanda “<”
- &gt; untuk menampilkan tanda “>”
- &nbsp; untuk menampilkan spasi
- &copy; untuk menampilkan tanda “©”
4. FONT
Pengaturan pada font digunakan tag <FONT> … </FONT>
Untuk pengaturan lebih lanjut digunakan atribut sebagai berikut:
- FACE untuk menentukan jenis font
Penulisan:
<FONT FACE=”nama font”> ….. </FONT>
Contoh:
<FONT FACE=”Arial”> Font Arial </FONT>
- SIZE untuk menentukan ukuran font, dengan nilai 1 s/d 7 (nilai default adalah 3)
Penulisan:

Membuat Website Hal 8

 <FONT SIZE=”ukuran font”> ….. </FONT>
Contoh:
<FONT SIZE=”5”> ukuran font 5 </FONT>
- COLOR untuk menentukan warna font
Penulisan:
<FONT COLOR=”nama warna”> ….. </FONT>
<FONT COLOR=”#RRGGBB”> ….. </FONT>
Contoh:
<FONT COLOR=”RED”> warna merah </FONT>
<FONT COLOR=”#FF0000”> warna merah</FONT>
- Contoh penggabungan tag
1. Mencetak teks dengan ukuran font 4, jenis font helvetica dan warna teks merah
<FONT SIZE=”4” FACE=”HELVETICA” COLOR=”#FF0000”> gabungan 1 </FONT>
2. Mencetak teks dengan ukuran font 2, jenis font verdana dan warna teks kuning
<FONT SIZE=”2” FACE=”VERDANA” COLOR=”#FFFF00”> gabungan 2 </FONT>
5. PEMISAH ANTAR TEKS
Teks dipisahkan dari teks yang dengan baris baru atau garis pemisah horizontal.
- Baris baru dibuat dengan menggunakan tag <BR>, dapat disetarakan dengan fungsi tombol enter.
- Garis pemisah horizontal dibuat dengan tag <HR>, pengaturan lebih lanjut menggunakan atribut:
1. ALIGN, digunakan untuk mengatur perataan garis yang terdiri dari 3 pilihan yaitu LEFT, CENTER
dan RIGHT 7
Penulisan:
<HR ALIGN=”perataan”>
Contoh:
<HR ALIGN=”LEFT”> garis pemisah di kiri halaman
2. SIZE, digunakan untuk mengatur ketebalan garis
Penulisan:
<HR SIZE=”tebal”>
Contoh:
<HR SIZE=”5”> garis pemisah dengan tebal 5 pixel
3. WIDTH, digunakan untuk mengatur panjang garis, nilai panjang dapat berupa angka atau
prosentase
Penulisan:
<HR WIDTH=”panjang”>
<HR WIDTH=”panjang%”>
Contoh:
<HR WIDTH=”50”> garis pemisah dengan panjang 50 pixel
<HR WIDTH=”50%”> garis pemisah dengan panjang 50 prosen dari lebar halaman
- COLOR untuk menentukan warna garis
Penulisan:
<HR COLOR=”nama warna”>
<HR COLOR=”#RRGGBB”>
Contoh:
<HR COLOR=”RED”> garis pemisah berwarna merah
<HR COLOR=”#FF0000”> garis pemisah berwarna merah
6. PARAGRAF
Untuk membuat sebuah paragraf, digunakan tag <P> ….. </P>. Penggunaan enter tidak menjadi tanda
pemisah antar paragraf.
Penulisan:
<P> ……. </P>

Membuat Website Hal 9

 Contoh:
<P> isi paragraf </P>
Perataan paragraf diatur dengan atribut ALIGN, yang terdiri dari 3 pilihan yaitu LEFT, CENTER dan RIGHT
Penulisan:
<P ALIGN=”perataan”> …. </P>
Contoh:
<P ALIGN=”RIGHT”> isi paragraf </P> isi paragraf diatur rata kanan
Untuk membuat rata tengah, dapat juga digunakan tag <CENTER> …. </CENTER>
Penulisan:
<CENTER> ……. </CENTER>
Contoh:
<CENTER> isi paragraf </CENTER> isi paragraf rata tengah
7. PREFORMATTED TEXT
Preformatted text memerintahkan browser untuk menampilkan teks tepat seperti yang diketikkan dalam
dokumen HTML, termasuk penekanan tombol enter dan spasi.
Penulisan:
<PRE> … </PRE>
Contoh :
<PRE>
/\ __ /\
( o o)
( 00 )
w
</PRE>
8. KUTIPAN TEKS
Tag <BLOCKQUOTE> digunakan untuk menampilkan kutipan teks dengan menambahkan indentasi
Penulisan:
<BLOCKQUOTE> … </ BLOCKQUOTE >
Contoh :
<BLOCKQUOTE> kutipan </ BLOCKQUOTE >
9. PENGELOMPOKAN TEKS
Tag <DIV> digunakan untuk membagi dokumen HTML dalam suatu hirarki yang terstruktur.
Tag <DIV> biasa digunakan bersama-sama dengan STYLE SHEET
Penulisan:
<DIV> ……. </DIV>
Contoh:
<DIV> isi paragraf </DIV>
Perataan paragraf diatur dengan atribut ALIGN, yang terdiri dari 3 pilihan
9 yaitu LEFT, CENTER dan RIGHT
Penulisan:
<DIV ALIGN=”perataan”> …. </DIV>
Contoh:
<DIV ALIGN=”RIGHT”> isi paragraf </DIV> isi teks diatur rata kanan

Membuat Website Hal 10

 BAB V
LIST

Dalam dokumen HTML terdapat beberapa jenis list (daftar), antara lain Ordered list dan Unordered list.
1. ORDERED LIST
Adalah daftar dengan penomoran berurut, menggunakan tag <OL> … </OL> dan tag <LI> di depan item
pada list
Penulisan:
<OL TYPE=”jenis penomoran” START=”nomor awal”>
<LI>teks1
<LI>teks2
<LI>teks3
</OL>
Catatan mengenai TYPE
Jenis
Keterangan
Penomoran
TYPE=A Daftar berurut dengan huruf besar (A, B, C, …)
TYPE=a Daftar berurut dengan huruf kecil (a, b, c, …)
TYPE=I Daftar berurut dengan bilangan romawi besar (I, II, III, …)
TYPE=i Daftar berurut dengan bilangan romawi kecil (i, ii, iii, …)
TYPE=1 Daftar berurut dengan angka
Contoh :
<OL TYPE=a START=2>
<LI>Malang
<LI>Surabaya
<LI>Blitar
</OL>
2. UNORDERED LIST
Adalah daftar dengan penomoran berbentuk simbol, menggunakan tag <UL> … </UL> dan tag <LI> di
depan item pada list
Penulisan:
<UL TYPE=”jenis simbol”>
<LI>teks1
<LI>teks2
<LI>teks3
</UL>
Catatan mengenai TYPE
Jenis Simbol Keterangan
TYPE=circle Membuat tanda lingkaran kosong (o)
TYPE=square Membuat tanda kotak ()
TYPE=disc Membuat tanda lingkaran penuh ()

Contoh :
<UL TYPE=square>
<LI>Malang
<LI>Surabaya
<LI>Blitar
</UL>

Membuat Website Hal 11

 BAB VI
LINK

Keunggulan dari world wide web adalah kemampuannya untuk membuat hubungan dengan berbagai macam
informasi dalam jaringan internet. Informasi tersebut dapat berupa halaman web, gambar, suara, gambar bergerak,
email dan lain-lain.

1. UNIFORM RESOURCE LOCATOR (URL)

World wide web menggunakan URL untuk menunjuk ke lokasi tempat informasi pada server lain.
Suatu URL terdiri dari jenis server/host (protokol), alamat server (nama host), port dari host, lokasi
directori file(path) dan nama file yang diminta
Penulisan:
protokol://domain host[:port]/path/nama file
2. ABSOLUTE PATH dan RELATIVE PATH
Path adalah lokasi direktori file. Terdiri dari 2 jenis yaitu absolute path dan relative path
- ABSOLUTE PATH
Harus ditulis secara lengkap seperti penulisan URL pada umumnya. Contoh:
http://id.she.yahoo.com/horoskop/
- RELATIVE PATH
Tidak perlu ditulis secara lengkap seperti penulisan URL pada umumnya.
Relative path menentukan lokasi direktori yang dituju baik di atas maupun di dalam direktori yang
sedang aktif.
Contoh: gambar/backgound.jpg,…/link.htm
3. WEB PAGE DEFAULT
Suatu page default untuk browser jika nama file dalam URL tidak dituliskan. Kebanyakan sistem
menggunakan nama web page default index.html,default.html atau welcome.html.
4. MEMBUAT LINK
- Link ke URL
Link yang ditujukan ke suatu alamat yang ada di internet.
Penulisan:
<A HREF=“http://alamat situs”> …… </A>

Contoh:
<A HREF=“http://www.smakkosayu.sch.id”>
link ke situs sekolah
</A>
- Link ke dokumen
Link yang ditujukan ke nama dokumen yang tersimpan dalam webserver.
Penulisan:
<A HREF=“nama dokumen”> …… </A>
Contoh:
<A HREF=“logo.jpg”>
link ke gambar logo
</A>
- Link ke bagian tertentu dokumen
Link yang ditujukan ke bagian tertentu dalam satu halaman web tersebut.
Penulisan:
<A NAME=“nama anchor”> …… </A>
<A HREF=“#nama anchor”> …… </A>

Membuat Website Hal 12

 Contoh:
<A NAME=“babsatu”> apa itu HTML </A>
<A HREF=“#babsatu”> link ke babsatu </A>
- Link ke email
Link yang ditujukan ke alamat email tertentu.
Penulisan:
<A HREF=“mailto:alamat email”> …….</A>
Contoh:
<A HREF=“mailto:[email protected]”> link ke email sekolah </A>
- TARGET
Menampilkan halaman web dokumen link dengan pengaturan tertentu
_blank
Membuka dokumen link pada jendela atau tab baru
_self
Membuka dokumen link pada jendela atau tab yang sedang aktif

5. MENGATUR WARNA LINK

Teks yang menjadi penghubung ke halaman web lain secara default berwarna biru dan bergaris bawah. Jika
dikehendaki warna lain, dapat digunakan atribut LINK, ALINK dan VLINK pada tag BODY.
- LINK digunakan untuk mengubah warna default link
- ALINK digunakan untuk mengubah warna link saat link di-klik
- VLINK digunakan untuk mengubah warna link setelah link di-klik
Penulisan:
<BODY LINK=”nama warna” ALINK=”nama warna” VLINK=”nama warna”>
Contoh:
<BODY LINK=”red” ALINK=”green” VLINK=”blue”>

Membuat Website Hal 13

 BAB VII
GAMBAR DAN MULTIMEDIA

A. Pengantar
1. FORMAT GAMBAR
Format gambar yang dapat digunakan dalam HTML adalah file berekstensi jpg, gif dan png.
File berekstensi jpg dapat menghasilkan gambar yang berkualitas bagus dengan warna yang memadai.
File berekstensi gif dan png dapat digunakan untuk membuat gambar transparan.
File berekstensi gif dapat digunakan untuk membuat gambar bergerak / animasi.
2. KONSEP INLINE DAN EXTERNAL IMAGE
Terdapat 2 macam cara untuk menampilkan gambar, yaitu secara internal /inline dan eksternal. Tampilan
gambar secara internal akan menampilkan gambar secara langsung di halaman web tersebut. Sebaliknya
tampilan gambar secara eksternal menggunakan link untuk menampilkan gambar tersebut.

B. Menampilkan Gambar
Untuk menampilkan gambar digunakan tag <IMG>.
Penulisan:
<IMG SRC=”URL gambar”>
Contoh:
<IMG SRC=”logo.jpg”>
Pengaturan tampilan gambar lebih lanjut:
1. PERATAAN GAMBAR
Perataan gambar diatur dengan atribut ALIGN, yang terdiri dari 5 pilihan yaitu LEFT, RIGHT, TOP, MIDDLE
dan BOTTOM. Penggunaan ALIGN TOP, MIDDLE dan BOTTOM bersama dengan teks.
Penulisan:
<IMG SRC=”URL gambar” ALIGN=”perataan”>
Contoh:
<IMG SRC=”logo.jpg” ALIGN=”TOP”>
2. UKURAN GAMBAR
Ukuran gambar diatur dengan atribut WIDTH dan HEIGHT.

Penulisan:
<IMG SRC=”URL gambar” WIDTH=”lebar”>
<IMG SRC=”URL gambar” HEIGHT=”tinggi”>
Contoh:
<IMG SRC=”logo.jpg” WIDTH=”300”>
<IMG SRC=”logo.jpg” HEIGHT=”60%”>
3. JARAK ANTARA GAMBAR DENGAN OBJEK
Jarak antara gambar dengan objek diatur dengan atribut HSPACE dan VSPACE.
HSPACE mengatur jarak bagian kanan dan sekaligus kiri gambar.
Penulisan:
<IMG SRC=”URL gambar” HSPACE=”jarak”>
Contoh:
<IMG SRC=”logo.jpg” HSPACE=”20”>
VSPACE mengatur jarak bagian atas dan sekaligus bawah gambar.
Penulisan:
<IMG SRC=”URL gambar” VSPACE=”jarak”>
Contoh:
<IMG SRC=”logo.jpg” VSPACE=”10”>

Membuat Website Hal 14

 4. BINGKAI
Bingkai sebuah gambar diatur dengan atribut BORDER
Penulisan:
<IMG SRC=”URL gambar” BORDER=”ketebalan bingkai”>
Contoh:
<IMG SRC=”logo.jpg” BORDER=”5”>
5. TEKS ALTERNATIF
Ada kalanya fitur tampilan gambar pada browser dinonaktifkan. Sebagai gantinya gambar ditampilkan
dalam teks alternatif.
Penulisan:
<IMG SRC=”URL gambar” ALT=”teks alternatif”>
Contoh:
<IMG SRC=”logo.jpg” ALT=”ini gambar logo”>

C. Menggunakan Multimedia
Multimedia merupakan teknologi yang memadukan teks, gambar, suara, animasi dan video. Untuk
menggunakan multimedia digunakan tag <EMBED>

Penulisan:
<EMBED SRC=”URL multimedia”>
Contoh:
<EMBED SRC=”lagu.wav”>
Pengaturan multimedia lebih lanjut:
1. AUTOSTART
Multimedia dapat dijalankan secera otomatis dengan atribut AUTOSTART, dengan 2 pilihanz: TRUE atau
FALSE.
Penulisan:
<EMBED SRC=”URL multimedia” AUTOSTART=”pilihan”>
Contoh:
<EMBED SRC=”aksi.avi” AUTOSTART=”TRUE”>
2. UKURAN JENDELA MULTIMEDIA
Ukuran diatur dengan atribut WIDTH dan HEIGHT.
Penulisan:
<EMBED SRC=”URL multimedia” WIDTH=”lebar”>
<EMBED SRC=”URL multimedia” HEIGHT=”tinggi”>
Contoh:
<EMBED SRC=”aksi.avi” WIDTH=”300”>
<EMBED SRC=”aksi.avi” HEIGHT=”60%”>

D. Menggunakan Animasi Teks

Selain multimedia, animasi juga dapat diterapkan pada teks. Tag yang digunakan adalah <MARQUEE>.
Penulisan:
<MARQUEE> ….. </MARQUEE>
Contoh:
<MARQUEE> ini tulisan berjalan </MARQUEE>
Pengaturan animasi lebih lanjut:
1. BEHAVIOR
Behaviour menyediakan aneka jenis animasi, terdapat 3 pilihan yaitu SCROLL, SLIDE dan ALTERNATE
Penulisan:
<MARQUEE BEHAVIOR=”jenis animasi”> ….. </MARQUEE>

Membuat Website Hal 15

 Contoh:
<MARQUEE BEHAVIOR=”SLIDE”> ini teks beranimasi scroll </MARQUEE>
2. BGCOLOR
Mengatur warna latar belakang animasi teks
Penulisan:
<MARQUEE BGCOLOR=”nama warna”> ….. </MARQUEE>
Contoh:
<MARQUEE BGCOLOR=”red”> ini teks beranimasi dengan latar belakang merah </MARQUEE>
3. DIRECTION
Direction adalah arah gerak animasi. Terdapat 4 pilihan, yaitu LEFT, RIGHT, UP dan DOWN.
Penulisan:
<MARQUEE DIRECTION=”pilihan arah”> ….. </MARQUEE>
Contoh:
<MARQUEE DIRECTION=”LEFT”> ini teks beranimasi yang bergerak ke arah kiri </MARQUEE>
4. WIDTH dan HEIGHT
Ukuran area animasi diatur dengan atribut WIDTH dan HEIGHT.
Penulisan:
<MARQUEE WIDTH=”ukuran lebar”> …. </MARQUEE>
<MARQUEE HEIGHT=”ukuran tinggi”> …. </MARQUEE>
Contoh:
<MARQUEE WIDTH=”80%” HEIGHT=”100”> area animasi dengan lebar 80% dan tinggi 100 pixel
</MARQUEE>
5. LOOP
Menentukan banyak perulangan animasi teks. Terdapat 2 macam pilihan pengaturan yaitu N dan INFINITE.
N digunakan untuk menentukan banyaknya perulangan animasi teks
INFINITE digunakan untuk membuat perulangan animasi teks tak terbatas atau terus menerus.
Penulisan:
<MARQUEE LOOP=”N”> …. </MARQUEE>
<MARQUEE LOOP=”INFINITE”> …. </MARQUEE>
Contoh:
<MARQUEE LOOP=”5” HEIGHT=”100”> animasi teks diulang sebanyak 5 kali </MARQUEE>
<MARQUEE LOOP=”INFINITE””> animasi teks diulang terus menerus </MARQUEE>
6. SCROLLAMOUNT
Menentukan kecepatan gerak animasi teks yang dinyatakan dalam jumlah pixel yang ditempuh dalam 1
detik.
Penulisan:
<MARQUEE SCROLLAMOUNT=”N”> …. </MARQUEE>
Contoh:
<MARQUEE SCROLLAMOUNT=”5” > animasi teks menempuh jarak 5 pixel dalam setiap detik
</MARQUEE>
7. SCROLLDELAY
Menentukan jeda waktu antar tampilan teks pada sebuah MARQUEE.
Penulisan:
<MARQUEE SCROLLDELAY=”N”> …. </MARQUEE>
Contoh:
MARQUEE SCROLLDELAY=”5” > animasi teks menempuh jarak 5 pixel dalam setiap detik
</MARQUEE>

Membuat Website Hal 16

 BAB VIII
TABEL

A. Pendahuluan
Banyak informasi ditampilkan dalam bentuk tabel, karena bentuknya ringkas dan mudah dibaca.
Pada HTML, dapat dibuat bermacam-macam bentuk tabel dimana tabel tersebut dapat diatur lebar, judul,
bingkai bahkan elemen-elemen HTML lainnya sehingga dapat menampilkan suatu webpage yang profesional.
Beberapa bagian dalam tabel yaitu:
1. HEADER
Tabel header adalah judul tabel yang biasanya terletak di bagian paling atas atau paling kiri dari suatu
tabel.
Tabel header yang terletak di bagian atas disebut judul kolom, sedangkan tabel header yang terletak di
bagian kiri disebut judul baris.
2. ROW
Table row atau baris tabel adalah baris-baris yang ada pada tabel.
3. DATA
Data tabel atau sel adalah tempat dimana informasi atau data tersebut ditempatkan. Beberapa tabel data
yang tersusun dalam satu baris akan membentuk satu tabel row.
4. CAPTION
Adalah judul tabel yang terletak di bagian luar tabel dan biasanya terletak di bagian atas atau bagian
bawah tabel.

B. Membuat Tabel
Untuk membuat tabel digunakan tag <TABLE>, yang terbagi menjadi 2 bagian utama, yaitu kepala tabel dan isi
tabel
1. Kepala tabel
Pengaturan dalam kepala tabel terdiri dari pengaturan bingkai, warna latar belakang, perataan, lebar, tinggi
dan jarak tabel dengan teks.
a. BORDER
Membuat bingkai dari suatu tabel dimana semakin besar angka berarti semakin tebal bingkai tersebut.
Penulisan:
<TABLE BORDER=”ketebalan bingkai”> …. </TABLE>
Contoh:
<TABLE BORDER=”1”> ….</TABLE>
b. BGCOLOR
Untuk mengatur warna background dari sebuah tabel.
Penulisan:
<TABLE BGCOLOR=”nama warna”> …. </TABLE>
Contoh:
<TABLE BGCOLOR=”red”> ….</TABLE>
c. BACKGROUND
Untuk mengatur background berupa gambar dari sebuah tabel.
Penulisan:
<TABLE BACKGROUND=”nama file gambar”> …. </TABLE>
Contoh:
<TABLE BACKGROUND=”back.jpg”> ….</TABLE>
d. ALIGN
Untuk mengatur perataan tabel dalam webpage. Pengaturan ALIGN meliputi LEFT, RIGHT dan CENTER
Penulisan:
<TABLE ALIGN=”jenis perataan”> …. </TABLE>

Membuat Website Hal 17

 Contoh:
<TABLE ALIGN=”CENTER”> ….</TABLE>
e. WIDTH
Mengatur lebar tabel dalam satuan pixel atau prosen
Penulisan:
<TABLE WIDTH=”lebar tabel”> …. </TABLE>
Contoh:
<TABLE WIDTH=”80%”> ….</TABLE>
f. CELLSPACING
Digunakan untuk mengatur jarak antar sel.
Penulisan:
<TABLE CELLSPACING=”lebar antar sel”> …. </TABLE>
Contoh:
<TABLE CELLSPACING=”2”> ….</TABLE>
g. CELLPADDING
Digunakan untuk mengatur jarak antar bingkai dengan teks.
Penulisan:
<TABLE CELLPADDING=”jarak”> …. </TABLE>
Contoh:
<TABLE CELLPADDING=”10”> ….</TABLE>
2. Isi Tabel
Mengisi tabel tidak terlepas dari 2 atau 3 elemen utama yang membentuk menjadi satu kesatuan dalam
pembentukannya, dimana 2 atau 3 elemen utama tersebut adalah :
a. Tabel Judul
Tabel judul merupakan sebuah kolom judul yang digunakan untuk membuat judul dalam sebuah tabel,
biasanya akan ditampilkan dalam bentuk teks tebal. Tabel judul tidak wajib digunakan. Tag yang
digunakan adalah <TH>
Penulisan:
<TABLE …. >
<TH> …. </TH>
</TABLE>
Contoh HTML:
<TABLE BORDER=1 WIDTH=70% ALIGN=CENTER>
<TH>No.</TH>
<TH>Nama Lengkap</TH>
<TH>Alamat</TH>
<TH>Kota</TH>
</TABLE>
Hasil tampilan:

b. Tabel Baris
Tabel baris merupakan baris dalam tabel, dimana baris ini digunakan sebagai dasar dalam menyusun
kolom data. Tanpa ada baris tabel, maka kolom data tidak akan dapat terbentuk. Tag yang digunakan
dalam membuat baris tabel adalah <TR>
Penulisan:

Membuat Website Hal 18

 <TABLE …. >
<TR>
……………
……………
……………
</TR>
</TABLE>
Contoh lihat pada pembahasan Kolom Data
c. Kolom Data
Kolom Data atau sering disebut dengan sel merupakan satu elemen dalam tabel yang digunakan untuk
menambahkan informasi dalam sebuah tabel. Tag yang digunakan untuk membuat kolom data ini
adalah <TD>
Penulisan:
<TABLE …. >
<TR>
<TD> ….. </TD>
<TD> ….. </TD>
dan seterusnya
</TR>
</TABLE>
Contoh
<TABLE BORDER=1 WIDTH=40% ALIGN=CENTER>
<TR>
<TD>No.</TD>
<TD>Nama Lengkap</TD>
<TD>Alamat</TD>
<TD>Kota</TD>
</TR>
<TR>
<TD>1</TD>
<TD>Anggito Bayu</TD>
<TD>Merbabu No. 10</TD>
<TD>Malang</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Bram Surono</TD>
<TD>Jakarta No. 15</TD>
<TD>Dampit</TD>
</TR>
</TABLE>

Membuat Website Hal 19

 Hasil tampilan:

Atribut Kolom Data

- ROWSPAN
Digunakan untuk menggabungkan beberapa baris menjadi satu baris
Penulisan:
<TD ROWSPAN=”jumlah baris yang digabungkan”>
………
</TD>
Contoh:
<TABLE BORDER=1 WIDTH=40% ALIGN=CENTER>
<TR>
<TD>No.</TD>
<TD>Nama Lengkap</TD>
<TD>Alamat</TD>
<TD>Kota</TD>
</TR>
<TR>
<TD>1</TD>
<TD>Anggito Bayu</TD>
<TD>Merbabu No. 10</TD>
<TD ROWSPAN=2>Malang</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Bram Surono</TD>
<TD>Jakarta No. 15</TD>
</TR>
</TABLE>

Hasil tampilan:

- COLSPAN
Digunakan untuk menggabungkan beberapa kolom menjadi satu kolom
Penulisan:
<TD COLSPAN=”jumlah baris yang digabungkan”>

Membuat Website Hal 20

 ………
</TD>
Contoh:
<TABLE BORDER=1 WIDTH=30% ALIGN=CENTER>
<TR>
<TD>No.</TD>
<TD>Nama Lengkap</TD>
<TD>Telepon</TD>
<TD>Fax</TD>
</TR>
<TR>
<TD>1</TD>
<TD>Anggito Bayu</TD>
<TD>0341-4440440</TD>
<TD>0341-5555555</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Bram Surono</TD>
<TD COLSPAN=2>0341-6767888</TD>
</TR>
</TABLE>

Hasil tampilan:

- VALIGN
Digunakan untuk mengatur perataan data dalam tabel secara vertikal.
Penulisan:
<TD VALIGN=”Top|Center|Bottom”>
………
</TD>
Contoh:
<TABLE BORDER=1 WIDTH=30% ALIGN=CENTER>
<TR>
<TD VALIGN=Top>No. Patner</TD>
<TD VALIGN=Top>Nama Lengkap Patner</TD>
<TD VALIGN=Top>Telepon</TD>
<TD VALIGN=Top>Fax</TD>
</TR>
<TR>
<TD>1</TD>
<TD>Anggito Bayu</TD>
<TD>0341-4440440</TD>
<TD>0341-5555555</TD>
</TR>

Membuat Website Hal 21

 <TR>
<TD>2</TD>
<TD>Bram Surono</TD>
<TD COLSPAN=2>0341-6767888</TD>
</TR>
</TABLE>

Hasil tampilan:

- ALIGN
Digunakan untuk mengatur perataan data dalam tabel secara horisontal.
Penulisan:
<TD ALIGN=”Left|Center|Right”>
………
</TD>
Contoh:
<TABLE BORDER=1 WIDTH=30% ALIGN=CENTER>
<TR>
<TD ALIGN=Center>No. Patner</TD>
<TD ALIGN=Center>Nama Lengkap Patner</TD>
<TD ALIGN=Center>Telepon</TD>
<TD ALIGN=Center>Fax</TD>
</TR>
<TR>
<TD>1</TD>
<TD>Anggito Bayu</TD>
<TD>0341-4440440</TD>
<TD>0341-5555555</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Bram Surono</TD>
<TD COLSPAN=2>0341-6767888</TD>
</TR>
</TABLE>

Hasil tampilan:

- WIDTH
Membuat Website Hal 22
 Digunakan untuk mengatur lebar sel/kolom dalam satuan prosen atau pixel.
Penulisan:
<TD WIDTH=”Lebar sel/kolom”>
………
</TD>
Contoh:
<TABLE BORDER=1 WIDTH=30% ALIGN=CENTER>
<TR>
<TD WIDTH=90>No. Patner</TD>
<TD>Nama Lengkap Patner</TD>
<TD>Telepon</TD>
<TD>Fax</TD>
</TR>
<TR>
<TD>1</TD>
<TD>Anggito Bayu</TD>
<TD>0341-4440440</TD>
<TD>0341-5555555</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Bram Surono</TD>
<TD COLSPAN=2>0341-6767888</TD>
</TR>
</TABLE>

Hasil tampilan:

- BGCOLOR
Digunakan untuk mengatur warna latar sel.
Penulisan:
<TD BGCOLOR=”nama warna atau #RRGGBB”>
………
</TD>
Contoh:
<TABLE BORDER=1 WIDTH=30% ALIGN=CENTER>
<TR>
<TD BGCOLOR=Blue>No. Patner</TD>
<TD BGCOLOR=Blue>Nama Lengkap Patner</TD>
<TD BGCOLOR=Blue>Telepon</TD>
<TD BGCOLOR=#0000FF>Fax</TD>
</TR>
<TR>
<TD>1</TD>
<TD>Anggito Bayu</TD>

Membuat Website Hal 23

 <TD>0341-4440440</TD>
<TD>0341-5555555</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Bram Surono</TD>
<TD COLSPAN=2>0341-6767888</TD>
</TR>
</TABLE>

Hasil tampilan:

- BACKGROUND
Digunakan untuk mengatur gambar latar pada sebuah sel.
Penulisan:
<TD BGBACKGROUND=”nama file gambar”>
………
</TD>
Contoh:
<TABLE BORDER=1 WIDTH=30% ALIGN=CENTER>
<TR>
<TD BACKGROUND=”libom.jpg”>No. Patner</TD>
<TD BACKGROUND=”libom.jpg”>Nama Lengkap
Patner</TD>
<TD BACKGROUND=”libom.jpg”>Telepon</TD>
<TD BACKGROUND=”libom.jpg”>Fax</TD>
</TR>
<TR>
<TD>1</TD>
<TD>Anggito Bayu</TD>
<TD>0341-4440440</TD>
<TD>0341-5555555</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Bram Surono</TD>
<TD COLSPAN=2>0341-6767888</TD>
</TR>
</TABLE>

Membuat Website Hal 24

 Hasil tampilan:

- NO WRAP
Digunakan untuk mengatur teks pada sebuah sel dalam posisi satu baris saja.
Penulisan:
<TD NOWRAP>
………
</TD>
Contoh:
<TABLE BORDER=1 WIDTH=30% ALIGN=CENTER>
<TR>
<TD NOWRAP>No. Patner</TD>
<TD>Nama Lengkap Patner</TD>
<TD>Telepon</TD>
<TD>Fax</TD>
</TR>
<TR>
<TD>1</TD>
<TD>Anggito Bayu</TD>
<TD>0341-4440440</TD>
<TD>0341-5555555</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Bram Surono</TD>
<TD COLSPAN=2>0341-6767888</TD>
</TR>
</TABLE>

Hasil tampilan:

Membuat Website Hal 25

 BAB IX
FORM

A. Pendahuluan
Jika dijumpai sebuah web yang dapat menerima data dari pemakai, berarti web tersebut menggunakan
formulir (form).
Form memungkinkan suatu web dapat berinteraksi dengan pemakainya agar dapat saling bertukar informasi,
seperti pengumpulan informasi atau umpan balik dari pembaca, menjual barang dan jasa secara online, atau
menyediakan pelayanan untuk pembaca.

B. Mengenal Form
Formulir dibentuk dengan menggunakan pasangan tag <FORM>.
Penulisan:
<FORM>
……………
……………
……………
</FORM>

C. Metode Pengisian Data

Atribut yang sering digunakan dalam tag FORM adalah: ACTION dan METHOD
1. ACTION
Menentukan URL yang akan dijalankan dan menerima semua masukan pada form. Jika ACTION tidak
disebutkan, informasi akan dikirim ke URL yang sama dengan halaman web itu sendiri.
Penulisan:
<FORM ACTION=”nama URL”>
……………
……………
……………
</FORM>
Contoh:
<FORM ACTION=”order.php”>
……………
……………
……………
</FORM>
Penjelasan: di antara <FORM> berisi sejumlah kontrol yang nantinya akan berfungsi sebagai data
masukan bagi order.php.
2. METHOD
Menentukan bagaimana informasi dikirim ke URL yang disebutkan dalam ACTION. Nilai yang umum untuk
atribut ini berupa GET dan POST.
GET akan membuat informasi dikirimkan bersamaan dengan URL, sedangkan POST membuat informasi
dikirimkan secara terpisah dengan URL.
Penulisan:
<FORM METHOD = GET atau POST>
……………
……………
……………
</FORM>

Membuat Website Hal 26

D. Jenis Masukan
Ada beberapa jenis masukan dalam yang berada dalam pasangan tag FORM.
1. Berupa kotak teks, kotak password, tombol radio, kotak check serta tombol. Tag yang digunakan secara
umum adalah <INPUT>.
Penulisan secara umum adalah <INPUT TYPE=”jenis masukan” atribut >
Jenis-jenis masukan pada TYPE adalah:
a. TEXT
Untuk memasukkan data berupa teks.
Penulisan:
<INPUT TYPE=TEXT>
b. PASSWORD
Untuk memasukkan data berupa password
Penulisan:
<INPUT TYPE=PASSWORD>
c. HIDDEN
Digunakan untuk memasukkan data berupa teks yang disembunyikan, namun nilai tersebut masih
tersimpan untuk keperluan pengolahan berikutnya.
Penulisan:
<INPUT TYPE=HIDDEN>
d. RADIO BUTTON
Digunakan untuk memasukkan data berupa satu pilihan dari sejumlah pilihan yang disediakan
Penulisan:
<INPUT TYPE=RADIO>
e. CHECK BOX
Digunakan untuk memasukkan data berupa satu atau lebih pilihan dari sejumlah pilihan yang
disediakan
Penulisan:
<INPUT TYPE=CHECKBOX>
f. SUBMIT dan RESET
SUBMIT digunakan untuk mengirimkan data ke halaman web.
RESET digunakan untuk mengosongkan data atau mengembalikan ke nilai awal.
Penulisan:
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
Jenis-jenis pengaturan masukan pada TYPE adalah:
a. NAME
Menentukan nama data. Atribut ini diperlukan oleh semua jenis masukan kecuali SUBMIT dan RESET.
Penulisan:
<INPUT TYPE=”jenis masukan” NAME=”nama”>
b. SIZE
Menentukan ukuran kotak masukan. Atribut ini hanya digunakan pada jenis masukan berupa TEXT,
HIDDEN dan PASSWORD.
Penulisan:
<INPUT TYPE=”jenis masukan” SIZE=”nilai”>
c. MAXLENGTH
Menentukan jumlah karakter yang dapat dimasukkan dalam kotak masukan. Atribut ini hanya
digunakan pada jenis masukan berupa TEXT, HIDDEN dan PASSWORD.
Penulisan:
<INPUT TYPE=”jenis masukan” MAXLENGTH=”nilai”>

Membuat Website Hal 27

 d. CHECKED
Menentukan pilihan data pada saat form dibuka. CHECKED hanya dipakai pada type RADIO dan
CHECKBOX.
Penulisan:
<INPUT TYPE=RADIO CHECKED>
<INPUT TYPE=CHECKBOX CHECKED>
e. VALUE
Menentukan nilai awal data.
Penulisan:
<INPUT TYPE=”jenis masukan” VALUE=”nilai”>
2. Berupa daftar pilihan. Tag yang digunakan adalah tag <SELECT>.
Penulisan:
<SELECT atribut>
<OPTION atribut> …………….
<OPTION atribut> …………….
<OPTION atribut> …………….
</SELECT>
Jenis-jenis atribut pada tag <SELECT>
a. NAME
Menentukan nama daftar.
Penulisan:
<SELECT NAME=”nama”>
b. SIZE
Menentukan tinggi kotak daftar.
Penulisan:
<SELECT SIZE=”tinggi”>
c. MULTIPLE
Memungkinkan pemilihan banyak data sekaligus
Penulisan:
<SELECT MULTIPLE>
Jenis-jenis atribut pada tag <OPTION>
a. VALUE
Menentukan nilai yang akan dikembalikan jika suatu data terpilih
Penulisan:
<OPTION VALUE=”nilai”>
b. SELECTED
Menyatakan data yang terpilih saat membuka form.
Penulisan:
<OPTION SELECTED>
3. Berupa kotak teks yang terdiri dari beberapa baris. Tag yang digunakan adalah TEXTAREA.
Penulisan:
<TEXTAREA atribut>
…………….
</TEXTAREA>
Jenis-jenis atribut pada tag <TEXTAREA>
a. NAME
Menentukan nama data.
Penulisan:
<TEXTAREA NAME=”nama”>

Membuat Website Hal 28

 b. COLS
Menentukan jumlah kolom yang tertampil pada layar.
Penulisan:
<TEXTAREA COLS=”jumlah kolom”>
c. ROWS
Menentukan jumlah baris yang tertampil pada layar.
Penulisan:
<TEXTAREA ROWS=”jumlah baris”>

Membuat Website Hal 29

 BAB X
CASCADING STYLE SHEETS

A. Pengantar
CSS adalah singkatan dari Cascading Style Sheets. Digunakan dalam dokumen HTML untuk mengatur format
teks, gambar, tabel dan form. Kita dapat menggunakan style kapan saja tanpa perlu melakukan
pemformatan yang sama berulang-ulang. Setiap style sheet harus dideklarasikan terlebih dahulu dengan
menyertakan atribut style yang ditulis dalam kurung kurawal buka dan kurung kurawal tutup.
Setiap atribut dinyatakan dengan nama khusus diiukuti dengan tanda titik dua dan nilai atributnya.
Sedangkan untuk memisahkan setiap atribut digunakan tanda titik koma.
Misalnya:
Tag H1 menggunakan ukuran font 15 pt dan efek tebal maka deklarasi style sheetnya adalah
H1 {font-size : 15pt ; font-weight : bold}

B. Menuliskan Style Sheets

1. Inline
Inline adalah cara mendeklarasikan dan menggunakan style sheets dengan memberikan atribut style pada
tag HTML.
Penulisan:
<nama tag STYLE=”atribut style sheets”>
Contoh:
<BODY STYLE=”font-family:arial”>
2. Embedding
Embedding adalah cara mendeklarasikan style sheets di bagian <HEAD> dalam tag <STYLE>.
a. Menuliskan style sheets
Terdapat 3 macam deklarasi dengan metode embedding yaitu:
1) Tag dalam HTML
Style sheets diterapkan pada tag tertentu.
Penulisan:
<STYLE>
Tag {atribut style sheets}
</STYLE>
Contoh:
<STYLE>
BODY {font-family:arial}
P {font-style:italic; color:blue}
</STYLE>
2) ID
Penggunaan style sheets menggunakan tag memiliki kelemahan karena
seluruh pengaturan oleh tag yang bersangkutan akan berpengaruh pada
semua tampilan tag tersebut.
Bila dikehendaki pengaturan style sheet secara terbatas, digunakan ID.
Penulisan ID diawali dengan karakter # (hashtag) dan diikuti dengan nama
sesuai kebutuhan.
Nama ID harus disebutkan pada nama tag yang akan digunakan dengan
menggunakan atribut ID.
Dalam sebuah tag HTML hanya dapat memiliki satu ID.

Penulisan:
<STYLE>

Membuat Website Hal 30

 #nama ID{atribut style sheets}
</STYLE>
Contoh:
<STYLE>
#tebal{font-weight:bold}
#warna{color:blue;background:yellow}
</STYLE>
3) CLASS
Bila dikehendaki beberapa style sheets dalam sebuah tag HTML, digunakan
CLASS. Penulisan CLASS diawali dengan karakter . (titik) dan diikuti dengan
nama sesuai kebutuhan.
Penulisan:
<STYLE>
.nama CLASS1{atribut style sheets}
.nama CLASS2{atribut style sheets}
.nama CLASSn{atribut style sheets}
</STYLE>
Contoh:
<STYLE>
.tebal{font-weight:bold}
.warna{color:blue;background:yellow}
</STYLE>
b. Menggunakan style sheets
Style Sheets dalam bentuk:
1) Tag dalam HTML
Style sheets akan digunakan secara otomatis pada tag HTML pada body.
2) ID
Nama ID harus disebutkan pada tag yang akan digunakan dengan
menggunakan atribut ID (jumlah nama ID yang digunakan hanya bisa 1 nama ).
Penulisan penggunaan ID:
<nama tag ID=”nama ID”>
Contoh penulisan penggunaan ID:
<BODY ID=”warna”>
<P ID=”tebal”>
3) CLASS
Nama CLASS harus disebutkan pada tag yang akan digunakan dengan
menggunakan atribut CLASS (jumlah nama CLASS yang digunakan bisa lebih
dari 1 nama CLASS).
Penulisan penggunaan CLASS:
<nama tag CLASS=”nama CLASS1 nama CLASS2 nama CLASSn”>
Contoh penulisan penggunaan CLASS:
<BODY CLASS=”warna tebal”>
<P CLASS=”tebal warna”>

3. Linking
Linking adalah cara mendeklarasikan dan menggunakan style sheets dengan membuat link pada file
dimana style tersebut disimpan. Ekstensi file style adalah .css
Penulisan:
<LINK REL=STYLESHEET HREF=”nama file style” TYPE=”text/css”>
Contoh:

Membuat Website Hal 31

 <LINK REL=STYLESHEET HREF=”style.css” TYPE=”text/css”>

C. Atribut Style Sheets

1. Teks
a. font-family
Digunakan untuk menentukan jenis font.
Penulisan:
{font-family : “nama font”}
Contoh:
{font-family : “courier new”}
b. font-size
Digunakan untuk menentukan ukuran font, satuan yang digunakan point (pt), centimeter (cm), inchi
(in), milimeter (mm), pixel (px) dan prosen (%). Penulisan atribut font-size tanpa satuan, akan
menghasilkan ukuran yang sama dengan satuan pixel (px)
Penulisan:
{font-size : ukuran font dengan satuan}
Contoh:
{font-size : 15pt}
{font-size : 15}
c. font-weight
Digunakan untuk menentukan ketebalan font, pilihan yang dapat digunakan light, medium dan bold.

Penulisan:
{font-weight : pilihan ketebalan}
Contoh:
{font-weight : bold}
d. font-style
Digunakan untuk menentukan style font, pilihan yang dapat digunakan adalah normal dan italic.
Penulisan:
{font-style : pilihan style}
Contoh:
{font-style : italic}
e. font
Digunakan untuk mengatur font secara lengkap, yaitu : jenis font, ukuran, ketebalan dan style.
Penulisan:
{font : jenis font|ukuran|pilihan ketebalan|pilihan style}
Contoh:
{font: arial 15pt bold italic}
f. line-height
Digunakan untuk menentukan jarak antar baris, satuan yang digunakan point (pt), centimeter (cm),
inchi (in), milimeter (mm), pixel (px) dan prosen (%).
Penulisan:
{line-height : jarak antar baris dengan satuan}
Contoh:
{line-height : 12pt}
g. text-decoration
Digunakan untuk menentukan efek font, pilihan yang dapat digunakan adalah underline, line-through,
none, overline,
Penulisan:
{text-decoration : pilihan efek}

Membuat Website Hal 32

 Contoh:
{text-decoration : underline}
h. text-align
Digunakan untuk mengatur perataan teks, pilihan yang dapat digunakan adalah left, center, right dan
justify.
Penulisan:
{text-align : pilihan perataan}
Contoh:
{text-align : right}
i. text-indent
Digunakan untuk menentukan indentasi teks, satuan yang digunakan point (pt), centimeter (cm), inchi
(in), milimeter (mm), pixel (px) dan prosen (%).
Penulisan:
{text-indent : ukuran indentasi dengan satuan}
Contoh:
{text-indent : 1.25cm}
j. text-transform
Digunakan untuk mengubah kapitalisasi teks, pilihan yang digunakan adalah capitalize, lowercase,
uppercase dan none.
Penulisan:
{text-transform : pilihan kapitalisasi}
Contoh:
{text-transform : uppercase}
k. word-spacing
Digunakan untuk menentukan jarak antar kata, satuan yang digunakan point (pt), centimeter (cm), inchi
(in), milimeter (mm), pixel (px) dan prosen (%).
Penulisan:
{word-spacing : jarak antar kata dengan satuan}
Contoh:
{word-spacing : 0.5cm}
l. letter-spacing
Digunakan untuk menentukan jarak antar huruf, satuan yang digunakan point (pt), centimeter (cm),
inchi (in), milimeter (mm), pixel (px) dan prosen (%).
Penulisan:
{letter-spacing : jarak antar huruf dengan satuan}
Contoh:
{letter-spacing : 0.5in}
m. color
Digunakan untuk menentukan warna teks, pilihan yang digunakan adalah nama warna dan #rrggbb.
Penulisan:
{color : pilihan warna}
{color : #rrggbb}
Contoh:
{color : green}
n. float
Menentukan aliran teks yang melewati suatu elemen. Terdapat 3 jenis pilihan yaitu none, left dan right.
Penulisan:
{float : jenis pilihan aliran teks}
Contoh:
{float : left}

Membuat Website Hal 33

 o. clear
Menghapus pengaturan aliran teks oleh atribut float. Terdapat 3 jenis pilihan yaitu none, left dan both.
Penulisan:
{clear : jenis pilihan penghapusan aliran teks}
Contoh:
{clear : both}
2. Objek
a. vertical-align
Digunakan untuk menentukan posisi vertikal suatu obyek dalam baris, pilihan yang dapat digunakan
adalah top, middle, bottom, baseline, sub, dan super.
Penulisan:
{vertical-align : pilihan posisi}
Contoh:
{vertical-align : top}
b. link
Digunakan untuk mengatur tampilan link pada web. Terdapat 4 jenis pengaturan yaitu link, visited,
active dan hover. Penggunaan masing-masing pengaturan link adalah sebagai berikut:
- link untuk menentukan keadaan awal hyperlink
- visited untuk menentukkan tampilan hyperlink setelah dipilih
- active untuk menentukan tampilan hyperlink yang sedang aktif
- hover untuk menentukan tampilan hyperlink pada saat pointer mouse digerakkan di atasnya
Penulisan:
a:link {atribut CSS}
a:visited {atribut CSS}
a:active {atribut CSS}
a:hover {atribut CSS}
Contoh:
a:link {color : green}
a:visited {font-weight : bold}
a:active {background : blue}
a:hover {font-family : verdana}
c. width
Menentukan lebar suatu elemen (dapat terdiri dari teks, paragraf, gambar atau multimedia). Satuan
yang digunakan point (pt), centimeter (cm), inchi (in), milimeter (mm), pixel (px) dan prosen (%).
Penulisan:
{width : lebar dengan satuan}
Contoh:
{width : 350px}
d. height
Menentukan tinggi suatu elemen. Satuan yang digunakan point (pt), centimeter (cm), inchi (in),
milimeter (mm), pixel (px) dan prosen (%).
Penulisan:
{height : tinggi dengan satuan}
Contoh:
{height : 100px}
e. padding
Digunakan untuk menentukan jarak antara bingkai gambar atau tabel dengan isinya. Terdapat 4 attribut
yang bisa diatur, yaitu : padding-left, padding-right, padding-top dan padding-bottom. Satuan yang
digunakan point (pt), centimeter (cm), inchi (in), milimeter (mm), dan pixel (px). Padding dapat juga
diatur secara bersamaan dengan atribut padding.

Membuat Website Hal 34

 Penulisan padding beserta atributnya:
{padding-top : ukuran batas atas dengan satuan}
{padding-right : ukuran batas kanan dengan satuan}
{padding-bottom : ukuran batas bawah dengan satuan}
{padding-left : ukuran batas kiri dengan satuan}
{padding : top right bottom left}
Contoh:
{padding-top : 10px}
{padding-right : 10px}
{padding-bottom : 10px}
{padding-left : 10px}
{padding : 10px 10px 5px 5px}
f. border
Digunakan untuk menentukan pengaturan bingkai gambar atau tabel dan gambar. Terdapat 4 bagian
bingkai yang dapat diatur yaitu bingkai atas, kanan, bawah dan kiri. Attribut yang bisa diatur, yaitu :
border-left, border-right, border-top dan border-bottom.
Untuk setiap bagian bingkai dapat dilakukan pengaturan ketebalan (width), jenis garis (style) dan warna
(color). Dapat pula dilakukan pengaturan untuk seluruh bagian bingkai sekaligus dengan menggunakan
atribut border.
- width
Satuan ketebalan yang digunakan point (pt), centimeter (cm), inchi (in), milimeter (mm), dan
pixel (px).
Penulisan border-width beserta atributnya:
{border-top-width : ukuran ketebalan bingkai atas dengan satuan}
{border-right-width : ukuran ketebalan bingkai kanan dengan satuan}
{border-bottom-width : ukuran ketebalan bingkai bawah dengan satuan}
{border-left-width : ukuran ketebalan bingkai kiri dengan satuan}
{border-width : ukuran ketebalan bingkai dengan satuan}
{border-width : top right bottom left}
Contoh:
{border-top-width : 5px}
{border-right-width : 5px}
{border-bottom-width : 5px}
{border-left-width : 5px}
{border-width : 5px)
{border-width : 10px 10px 5px 6px}
- style
Digunakan untuk menentukan jenis garis bingkai, pilihan yang tersedia adalah none, hidden,
dotted, dashed, solid, double, groove, ridge, inset dan outset.
Penulisan border-style beserta atributnya:
{border-top-style : jenis garis bingkai atas}
{border-right-style : jenis garis bingkai kanan}
{border-bottom-style : jenis garis bingkai}
{border-left-style : jenis garis bingkai kiri}
{border-style : jenis garis bingkai}
{border-style : top right bottom left}
Contoh:
{border-top-style : solid}
{border-right-style : dotted}
{border-bottom-style : dashed}

Membuat Website Hal 35

 {border-left-style : double}
{border-style : double)
{border-style : solid double solid double}
- color
Digunakan untuk menentukan warna garis bingkai, pilihan yang tersedia berupa nama warna dan
#rrggbb.
Penulisan border-color beserta atributnya:
{border-top-color : warna garis bingkai atas}
{border-right-color : warna garis bingkai kanan}
{border-bottom-color : warna garis bingkai}
{border-left-color : warna garis bingkai kiri}
{border-color : warna garis bingkai}
{border-color : top right bottom left}
Contoh:
{border-top-color : red}
{border-right-color : green}
{border-bottom-color : blue}
{border-left-color : yellow}
{border-color : lightblue)
{border-color : magenta pink orange purple}
g. background
Digunakan untuk menentukan latar belakang berupa warna atau gambar. Bila menggunakan warna bisa
langsung menuliskan nama warna atau #rrggbb, sedangkan penggunaan gambar sebagai latar belakang
harus menuliskan URL gambar yang akan digunakan.
Penulisan untuk latar belakang berupa warna:
{background : pilihan warna}
{background : #rrggbb}
Contoh:
{background : green}
Penulisan untuk latar belakang berupa gambar:
{background : URL(“nama file gambar”)}
Contoh:
{background : URL(“laut.jpg”)}
Pengaturan latar belakang gambar lebih lanjut:
a. repeat-x : gambar diulang secara horisontal
b. repeat-y : gambar diulang secara vertikal
c. repeat : gambar diulang secara horisontal dan vertikal
d. no-repeat : tidak ada pengulangan gambar
e. fixed : gambar latar belakang tidak bisa digulung/scroll
f. scroll : gambar latar belakang bisa digulung/scroll
g. left : posisi gambar di kiri
h. center : posisi gambar di tengah secara horisontal
i. right : posisi gambar di kanan
j. top : posisi gambar di atas
k. middle : posisi gambar di tengah secara vertikal
l. bottom : posisi gambar di bawah
Penulisan:
{background : URL(“nama file gambar”) pengaturan}
Contoh:
{background : URL(“laut.jpg”) repeat-x}

Membuat Website Hal 36

 h. top
Menentukan posisi suatu elemen dari batas atas halaman. Satuan yang digunakan point (pt), centimeter
(cm), inchi (in), milimeter (mm), pixel (px) dan prosen (%). 7
Penulisan:
{top : posisi dari batas atas halaman dengan satuan}
Contoh:
{top : 10%}
i. bottom
Menentukan posisi suatu elemen dari batas bawah halaman. Satuan yang digunakan point (pt),
centimeter (cm), inchi (in), milimeter (mm), pixel (px) dan prosen (%).
Penulisan:
{bottom : posisi dari batas bawah halaman dengan satuan}
Contoh:
{bottom : 10%}
j. left
Menentukan posisi suatu elemen dari batas kiri halaman. Satuan yang digunakan point (pt), centimeter
(cm), inchi (in), milimeter (mm), pixel (px) dan prosen (%).
Penulisan:
{left : posisi dari batas kiri halaman dengan satuan}
Contoh:
{left : 100px}
k. right
Menentukan posisi suatu elemen dari batas kanan halaman. Satuan yang digunakan point (pt),
centimeter (cm), inchi (in), milimeter (mm), pixel (px) dan prosen (%).
Penulisan:
{right : posisi dari batas kanan halaman dengan satuan}
Contoh:
{right : 1cm}
3. Halaman Web
a. margin
Digunakan untuk menentukan batas halaman web, ada 4 attribut yang bisa diatur, yaitu : margin-left,
margin-right, margin-top dan margin-bottom. Satuan yang digunakan point (pt), centimeter (cm), inchi
(in), milimeter (mm), dan pixel (px). Margin dapat juga diatur secara bersamaan dengan atribut margin.
Penulisan margin beserta atributnya:
{margin-top : ukuran batas atas dengan satuan}
{margin-right : ukuran batas kanan dengan satuan}
{margin-bottom : ukuran batas bawah dengan satuan}
{margin-left : ukuran batas kiri dengan satuan}
{margin : top right bottom left}
Contoh:
{margin-top : 10px}
{margin-right : -10px}
{margin-bottom : -10px}
{margin-left : 10px}
{margin : 10px 10px -5px -2px}

Membuat Website Hal 37