Scribd
Unggah
11 tayangan

Pengenalan Java Script 2012 Modul 5 Mengenal HTML

Bab lima membahas tentang Hypertext Markup Language (HTML). HTML digunakan untuk memanipulasi browser agar dapat menampilkan informasi yang dibaca pengguna komputer. Bab ini menjelaskan dasar-dasar HTML seperti struktur dokumen HTML, menambahkan isi pada bagian body, dan elemen-elemen teks seperti paragraph, blockquote, dan divider. Juga dijelaskan cara memberi warna huruf dan menambahkan link pada halaman web.

Diunggah oleh

SimonMurdaniYusuf
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
11 tayangan

Pengenalan Java Script 2012 Modul 5 Mengenal HTML

Bab lima membahas tentang Hypertext Markup Language (HTML). HTML digunakan untuk memanipulasi browser agar dapat menampilkan informasi yang dibaca pengguna komputer. Bab ini menjelaskan dasar-dasar HTML seperti struktur dokumen HTML, menambahkan isi pada bagian body, dan elemen-elemen teks seperti paragraph, blockquote, dan divider. Juga dijelaskan cara memberi warna huruf dan menambahkan link pada halaman web.

Diunggah oleh

SimonMurdaniYusuf
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 61

[2012]

BAB V
HYPERTEXT MARKUP LANGUAGE

5.1 HTML
Salah satu elemen teknologi informasi ialah perangkat lunak yang mendukung operasi perangkat keras
komputer. Pada bab ini kita akan mempelajari bahasa markup atau markup language yang sudah
disinggung di bab sebelumnya ketika kita berbicara sekilas mengenai Internet. Bahasa itu disebut HTML
yang merupakan singkatan dari Hypertext Markup Language. Kegunaan bahasa ini ialah untuk
memanipulasi browser sehingga dapat menampilkan informasi yang dapat dibaca oleh pengguna
komputer. HTML yang akan kita bahas meliputi diantaranya:
 Dasar – Dasar HTML
 Menambahkan Efek Karakter Fisik pada Halaman Web
 Menambahkan Efek Karakter Logika
 Membuat Tabel
 Membuat Daftar
 Mengatur Tampilan Dokumen
 Membuat Link
 Menempatkan Gambar ke dalam Web
 Menambahkan Obyek-Obyek Multimedia
 Membuat Formulir HTML
 Membuat Frame
 Membuat Web Site

5.2 Dasar – Dasar HTML


Bagian ini akan membahas tentang dasar-dasar HTML yang bermanfaat untuk membuat tampilan web
site secara sederhana. Fungsi utama HTML ialah memberi perintah kepada browser untuk melakukan
manipulasi tampilan melalui tag-tag yang ditulis dalam HTML. Dengan demikian browser akan
menghasilkan tampilan yang sesuai dengan perintah-perintah yang sudah dibuat atau ditetapkan
terlebih dahulu.

Untuk menuliskan suatu dokumen HTML dapat digunakan perangkat lunak sederhana ataupun yang
khusus, diantaranya ialah:
 Notepad
 Dreamweaver
 Ultraedit

Semua dokumen dalam buku ini ditulis dengan menggunakan Notepad dan UltraEdit Text Editor.
Sekalipun demikian dokumen-dokumen HTML dapat ditulis menggunakan perangkat lunak lain.
Setelah selesai menuliskan dokumen tersebut di atas lakukan perintah SAVE AS nama_file.html dan
pada bagian perintah SAVE AS TYPES pilih ALL FILES

1
[2012]

5.2.1 Menciptakan Suatu Tampilan Dokumen HTML Sederhana


Suatu dokumen HTML yang paling sederhana setidak-tidaknya mempunyai elemen-elemen seperti di
bawah ini..

Gambar 5.1 Struktur Dokumen HTML

 Setiap dokumen HTML terdiri atas <HTML> </HTML>, <HEAD> </HEAD>, <TITLE> </TITLE> dan
<BODY> </BODY>
 Diantara perintah <TITLE> dengan </TITLE> terdapat bagian judul untuk dokumen yang akan
dibuat, sebagai contoh “Dokumen Sederhana”
 Antara <HTML> sampai dengan </HEAD> disebut sebagai bagian pertama.
 Antara <BODY> sampai dengan </HTML> disebut bagian kedua / isi

Untuk memperjelas masalah tersebut, di bawah ini kita akan menampilkan contoh dokumen HTML
sebagai berikut:

2
[2012]

Gambar 5.2. Membuat halaman html

 Setelah selesai menuliskan dokumen tersebut di atas lakukan perintah SAVE AS nama file
latihan1.html dan pada bagian perintah SAVE AS TYPES pilih ALL FILES

5.2.2 Menambahkan Isi pada Bagian Body


Isi dalam dokumen HTML ditempatkan di antara bagian <BODY> sampai dengan </BODY>. Untuk
menambahkan isi tersebut dapat dilakukan dengan cara sebagai berikut:
Contoh Program

<HTML>
<HEAD>
<TITLE> Isi </TITLE>
</HEAD>

<BODY>
<H1> Biodata </H1>
Halaman ini berisi tentang biodata kehidupan
saya selama menginjak bangku kuliah

</BODY>
</HTML>

Di bagian <BODY> sampai dengan </BODY> kita mengisi judul halaman yang dibuat, yaitu “Biodata”.
Cara membuatnya ialah dengan menggunakan perintah <H1> sampai dengan </H1>. Perintah H1

3
[2012]

digunakan untuk membuat HEADER atau Kepala Berita.. Setelah itu ditambahkan Caption atau
penjelasan singkat mengenai isi halaman tersebut..

Setelah selesai menuliskan semua bagian dokumen tersebut, lakukan perintah SAVE AS dengan nama
file isi.html dan pada bagian SAVE AS TYPES pilih ALL FILES

5.2.3 Elemen – Elemen HTML Untuk Informasi Berupa Teks


Eleven-elemen yang digunakan untuk informasi yang berupa teks dalam HTML dapat berupa:
 PARAGRAPH

 DIVIDER.

Paragraph
Elemen paragraph menggunakan tag <P>......</P> yang digunakan untuk menandai sekumpulan teks
sebagai suatu paragraf. Tag <P> menyatakan awal paragraf; sedangkan tag </P> menyatakan akhir dari
satu paragraf. Untuk menampilkan beberapa paragraf, misalnya 6 paragraf, maka penulisnnya menjadi
sebagai berikut:

Program Menuliskan Tag Paragraph

<HTML>
<HEAD>
<TITLE>Tag P</TITLE>
</HEAD>
<BODY>
<P>paragraf satu</P>
<P>paragraf dua</P>
<P>paragraf tiga</P>
<P>paragraf empat</P>
<P>paragraf lima</P>
<P>paragraf enam</P>
</BODY>
</HTML>

Simpanlah file di atas dengan nama tagp.html.


Untuk membuat perataan paragraf digunakan atribut ALIGN. Atribut ALIGN mempunyai tiga nilai yaitu
left untuk rata kiri, right untuk rata kanan ,dan center untuk posisi tengah. Untuk penulisannya sebagai
berikut:

 Rata kiri: <P Allign=”LEFT”> Teks paragraph akan ditampilkan rata kiri </P>

4
[2012]

 Rata kanan: <P Allign=”RIGHT”> Teks paragraph akan ditampilkan rata kanan </P>
 Rata tengah: <P Allign=”CENTER”> Teks paragraph akan ditampilkan rata ke tengah

Blockquote
Tag <BLOCKQUOTE>......</BLOCKQUOTE> digunakan untuk menuliskan suatu kutipan teks dengan
memberikan indensi pada tampilan di Browser serta mengabaikan spasi dalam teks seperti tag paragraf.

Contoh Penggunaan Blockquote:

<HTML>
<HEAD>
<TITLE> Blockquote</TITLE>
</HEAD>
<BODY>
<H1>Kejahatan di Internet </H1>
<BLOCKQUOTE>
Jakarta - Belakangan ini banyak sekali kejahatan yang terjadi terkait dengan pengguna internet.
Disinyalir kerugian yang dialami oleh para pengguna internet mencapai US$ 8,5 miliar (sekitar Rp 7,7
triliun) selama dua tahun terakhir ini. Penyebabnya antara lain karena virus, spyware dan phishing.

Angka tersebut diungkapkan dalam laporan tahunan State of The Net yang dibuat oleh Consumer
Report, majalah pemerhati konsumen di Amerika Serikat. Laporan itu berdasarkan penelitian yang
dilakukan oleh Consumer Report National Research Center yang melibatkan 2.071 responden online.
</BLOCKQUOTE>

<BLOCKQUOTE>
Data lain dalam laporan itu menyebutkan, satu dari enam pengguna kemungkinan akan menjadi korban
kejahatan cyber. Peluang ini turun dari 1:4 pada tahun 2007.

Kemudian, sekitar 19% responden mengatakan bahwa mereka tidak mempunyai program antivirus di
komputernya. Sedangkan 75% lainnya tidak mempunyai anti-phishing. Demikian dikutip detikINET dari
techWeb, Rabu (6/8/2008).

Disebutkan ada tujuh kesalahan umum pengguna internet yang menyebabkan mereka kerap terjebak
kejahatan cyber:
</BLOCKQUOTE>
</BODY>
</HTML>

Simpanlah file di atas dengan nama blockquote.html.

5
[2012]

Gambar 5.3 Menampilkan teks dengan Blockquote

Divider
Elemen divider digunakan untuk membagi-bagi dokumen HTML dalam suatu hirarki
yang terstuktur. Teks yang ditempatkan dalam tag <DIV>.....</DIV> akan di tampilkan sesuai dengan nilai
atribut ALIGN tersebut. Nilai atribut ALIGN, yaitu left, right, dan center.

Contoh:
 Teks akan ditampilkan rata kiri: <DIV Allign=”Left”> …. </DIV>
 Teks akan ditampilkan rata kanan:: <DIV Allign=”Right”> …. </DIV>
 Teks akan ditampilkan rata tengah: <DIV Allign=”Center”> …. </DIV>

5.2.4 Memberi Warna Huruf di Halaman Web


Warna huruf standar dalam halaman HTML selalu hitam; sekalipun demikian warna tersebut dapat
diubah dengan menggunakan perintah <FONT COLOR> ..... </ FONT>. Untuk memberikan warna
“merah”, “ biru”, “hijau”, “kuning” dan “ ungu”.

<HTML>
<HEAD>
<TITLE>Warna</TITLE>
</HEAD>
<BODY>
<pre>
<FONT COLOR="red">Teks warna merah.</FONT>
<FONT COLOR="blue">Teks warna biru.</FONT>
<FONT COLOR="green">Teks warna hijau.</FONT>
<FONT COLOR="yellow">Teks warna kuning.</FONT>
<FONT COLOR="violet">Teks warna ungu.</FONT>

6
[2012]

<BODY >
</HTML>

Simpanlah file di atas dengan nama warna.html.

Gambar 5.4 Memberi warna pada teks

Untuk memberi warna pada text dapat pula dilakukan dengan menggunakan kode warna dalam bentuk
heksadesimal.

<Html>
<Head>
<Title>Memberi warna Teks Dengan Kode Heksadesimal</Title>
</Head>
<Body>
<Pre>
<Font Color="#Ff0000">Teks Warna Merah.</Font>
<Font Color="#0080Ff">Teks Warna Biru.</Font>
<Font Color="#00Ff00">Teks Warna Hijau.</Font>
<Font Color="#Ffff00">Teks Warna Kuning.</Font>
<Font Color="#8080Ff">Teks Warna Ungu.</Font>
<Body >
</Html>

Output yang ditampilkan sama dengan yang menggunakan kode warna biasa.

5.2.5 Menambahkan Link

7
[2012]

Agar antar halaman dalam suatu web site dapat saling dihubungkan; kita dapat menambhakan suatu
penghubung / link di halaman tertentu dengan menggunakan perintah <A HREF=”…”>…. </A>. Untuk
menambahkan link dapat dilakukan dengan cara sebagai berikut.
<HTML>
<HEAD>
<TITLE>Link </TITLE>
</HEAD>
<BODY >
<p> Halaman pertama</p>
<CENTER>
<A HREF="Halaman2.html">ke Halaman Dua</A>
</CENTER>
</BODY>
</HTML>

Simpanlah file di atas dengan nama halaman1.html.


Kemudian buat file kedua dengan nama halaman2.html seperti berikut:
<HTML>
<HEAD>
<TITLE>Link </TITLE>
</HEAD>
<BODY >
<p> Halaman Kedua</p>
<CENTER>
<A HREF="Halaman1.html">ke Halaman Satu Lagi</A>
</CENTER>
</BODY>
</HTML>

8
[2012]

Gambar 5.5 Membuat Link dari halaman 1 ke Halaman 2

Gambar 5.6 Membuat Link dari halaman 2 ke Halaman 1

5.2.6 Menambahkan Latar Belakang Gambar


Kita dapat menambahkan suatu gambar tertentu yang berfungsi sebagai latar belakang pada halaman
tertentu dengan menggunakan perintah <BODY BACKGROUND=” “> serta ditambah dengan gambar

9
[2012]

dengan nama file latar.jpg. Caranya ialah tempatkan program di bawah ini bersama dengan file gambar
tersebut dalam satu lokasi.

<HTML>
<HEAD>
<TITLE>
Latar
</TITLE>
</HEAD>
<BODY BACKGROUND="logo_uc_1.gif">
<H1> Lihat gambar sebagai latar belakang </H1>
</BODY>
</HTML>

Simpanlah file di atas dengan nama latar.html.

Gambar 5.7. Menampilkan gambar sebagai latar belakang halaman

5.3 Menciptakan Efek Karakter Fisik Dalam Tampilan

10
[2012]

5.3.1 Efek dan Ukuran Huruf


Beberapa bentuk efek karakter fisik diantaranya ialah huruf dengan cetak tebal, miring dan garis bawah.
Elemen-elemen HTML yang dikategorikan sebagai karakter fisik diantaranya adalah:
 <B>…..</B>: Digunakan untuk menciptakan efek cetak tebal pada karakter tertentu
 <I> …..</I>: Digunakan untuk menciptakan efek cetak miring pada karakter tertentu
 <U>….</U>: Digunakan untuk menciptakan efek garis bawah pada karakter tertentu
 <BIG>…</BIG>: Digunakan untuk memperbesar teks
 <SMALL>…</SMALL>: Digunakan untuk memperkecil teks
 <SUB>…</SUB>: Digunakan untuk membuat teks subscript
 <SUP>…</SUP>: Digunakan untuk membuat teks superscript

Di bawah ini akan diberikan contoh penggunaan efek karakter fisik tersebut dalam konteks dokumen
HTML:
<HTML>
<HEAD>
<TITLE> Karakter Fisik </TITLE>
</HEAD>
<BODY>

<B>Teks akan dicetak tebal</B><BR>


<I>Teks akan dicetak miring</I><BR>
<U>Teks akan dicetak dengan garis bawah </U><BR>
<BIG>Teks akan diperbesar </BIG><BR>
<SMALL>Teks akan diperkecil </SMALL>
</BODY>
</HTML>

Simpanlah file di atas dengan nama lat-5-3-1.html

11
[2012]

Gambar 5.8. Memformat Teks

Efek karakter fisik lain digunakan untuk menentukan ukuran suatu teks, yaitu <FONT>… </FONT>.
Elemen FONT menyediakan atribut SIZE yang mempunyai nilai dari 1 sampai 7. Nilai 1 digunakan untuk
membuat teks dengan ukuran yang paling kecil, sedang nilai 7 digunakan untuk membuat teks dengan
ukuran paling besar. Nilai baku ukuran font adalah 3.

Di bawah ini diberikan contoh dan penulisannnya dalam konteks dokumen HTML.

<HTML>
<HEAD>
<TITLE> Ukuran Huruf </TITLE>
</HEAD>
<BODY >
<FONT SIZE=1> Ukuran Huruf 1</FONT><br>
<FONT SIZE=2> Ukuran Huruf 2</FONT><br>
<FONT SIZE=3> Ukuran Huruf 3</FONT><br>
<FONT SIZE=4> Ukuran Huruf 4</FONT><br>
<FONT SIZE=5> Ukuran Huruf 5</FONT><br>
<FONT SIZE=6> Ukuran Huruf 6</FONT><br>
<FONT SIZE=7> Ukuran Huruf 7</FONT><br>
</BODY>
</HTML>

12
[2012]

Simpanlah file di atas dengan nama lat-5-3-1b.html

Gambar 5.9. Menampilkan Ukuran Huruf

5.3.2 Warna
Penggunaan warna pada teks mulai diperkenalkan oleh Windows Explorer 1.0 dengan menggunakan
atribut COLOR pada elemen FONT. Pendefinisian warna dinyatakan dalam dua cara, yaitu melalui
penggunaan nama warna dalam Bahasa Inggris, misalnya aqua, black atau blue dan dapat pula melalui
hex code suatu warna, sebagai contoh #FFFFFF adalah warna putih.

Pada awalnya dalam HTML versi 3.2 hanya diperkenalkan sebanyak 16 warna. Warna tersebut adalah
sebagai berikut:

13
[2012]

1. Aqua = aqua
2. Black = hitam
3. Blue = biru
4. Fuchsia= fuchsia
5. Gray = abu-abu
6. Green = hijau
7. Lime = lime
8. Maroon= maroon
9. Navy = biru tua
10. Olive = olive
11. Purple = ungu
12. Red = merah
13. Silver = perak
14. Teal = teal
15. White = putih
16. Yellow = kuning

Berikut ini adalah contoh dalam konteks dokumen HTML:

<HTML>
<HEAD>
<TITLE>Jenis warna</TITLE>
</HEAD>
<BODY>
<FONT COLOR=”navy”>Teks berwarna biru tua </FONT >
<FONT COLOR =”yellow”> Teks berwarna kuning </FONT >
<FONT COLOR =”purple”> Teks berwarna ungu </FONT >
</BODY>
</HTML>

Simpanlah file di atas dengan nama jw.html

Selain menggunakan cara seperti di atas; terdapat cara lain yang dapat digunakan membuat warna,
yaitu dengan menggunakan hex code. Sedang cara penulisannya ialah dimulai dengan menggunakan
karakter “#” kemudian diikuti kombinasi warna RGB (Red, Green, Blue). Setiap warna tersebut
intensitasnya berupa HEX 2 Karakter, misalnya #FFEEA4 yang artinya intensitas Red (merah) = FF = 255,
Green (hijau) = EE = 238, Blue (biru) = A4 = 164. Apabila kita menginginkan warna terang maka unsur F

14
[2012]

digunakan sebaliknya jika warna gelap maka unsur 0 dipergunakan. Beberapa contoh warna
menggunakan hex code seperti di bawah ini.

No Kode Heksadesimal Warna


1 #FF0000 Merah
2 #0000FF Biru
3 #FFFF00 Kuning
4 #FFFFFF Putih
5 #00FFFF Cyan
6 #888888 Abu-abu
7 #00FF00 Hijau
8 #FF00FF Ungu
9 #FF8800 Oranye
10 #000000 Hitam
11 #AA8800 Coklat
12 #004488 Biru tua

Contoh penggunaan sebagai berikut:

<HTML>
<HEAD>
<TITLE>Jenis warna</TITLE>
</HEAD>
<BODY>
<FONT COLOR=”#004488”>Teks berwarna biru tua </FONT >
<FONT COLOR =”#FFFF00”> Teks berwarna kuning </FONT >
<FONT COLOR =”#FF00FF”> Teks berwarna ungu </FONT >
</BODY>
</HTML>

5.4 Menambahkan Efek Karakter Logika

5.4.1 Menggunakan Heading


Heading adalah sekumpulan kata atau file frase yang menjadi judul atau subjudul dalam suatu dokumen
HTML. HTML menyediakan enam buah tingkat heading. Heading level 1 biasanya merupakan judul yang
penting atau judul utama, sedangakan heading level berikutnya merupakan bagian atau sub judul dari
judul utama. Dalam menuliskan heading, sebaiknya kita membuatnya sesuai dengan urutan level
heading, sehingga judul dan sub judul dokumen anda terlihat seperti outline yang jelas serta dengan
urutan yang konsisten. Untuk menyatakan heading, digunakan tag <Hx> dimana x merupakan nomor
level heading dari 1 sampai 6, sedangkan untuk mengakhirinya digunakan tag akhir </Hx>. Berikutnya ini
adalah contoh penggunaan heading level 1 sampai 6. Kegunaan Heading ialah untuk membuat

15
[2012]

penekanan yang biasanya ditempatkan sebagai judul suatu halaman agar nampak lebih menonjol jika
dibandingkan dengan bagian teks-teks yang lainnya..

Di bawah ini diberikan contoh penggunaannya dalam konteks dokumen HTML.

<HTML>
<HEAD>
<TITLE>Heading</TITLE>
</HEAD>
<BODY>
<H1>Judul Utama </H1>
<H2>Sub Judul </H2>

<p> Uraian isi halaman </p>

</BODY>
</HTML>

Maksud dokumen di atas ialah sebagai berikut: Kata “Judul Utama” merupakan heading utama; sedang
kata “Sub Judul” merupakan sub heading; dan kata “Uraian isi halaman” merupakan paragraf.
Penggunaan heading memerlukan tag yang berpasangan, yaitu <Hx>Heading</Hx>.

Simpan file tersebut dengan nama file lat-5-4-1.html.

Gambar 5.10. Menggunakan Heading

16
[2012]

5.4.2 Menampilkan Penekanan terhadap Karakter, Huruf, atau Kalimat Tertentu


Ada kalanya kita perlu memberikan penekanan pada karakter, huruf, atau kalimat tertentu selain
menggunakan penekanan cetak tebal atau miring. Penekanan tersebut berupa tag <EM> … </EM> dan
<STRONG> ….. </STRONG>.
Contoh penggunaan dalam konteks dokumen HTML sebagai berikut:

<HTML>
<HEAD>
<TITLE>Penekanan</TITLE>
</HEAD>
<BODY >

<EM>Kalimat pertama yang diberi penekanan </EM>


<STRONG> Kalimat kedua yang diberi penekanan </ STRONG >

</BODY>
</HTML>

Tulisan di atas mempunyai maksud, yaitu “Kalimat pertama yang diberi penekanan” akan dicetak
miring atau sama dengan <I> dan “Kalimat kedua yang diberi penekanan” akan dicetak tebal atau sama
dengan <B>.

Simpan file tersebut dengan nama file lat-5-4-2.html.

Gambar 5.11. Output penekanan pada karakter

17
[2012]

5.4.3 Menempatkan Kutipan


Untuk menempatkan suatu kutipan dari sumber lain di dokumen kita perlu menggunakan tag <CITE>
…</CITE>. Contoh misalnya kita mengutip suatu pandangan dari orang lain seperti di bawah ini:
<HTML>
<HEAD>
<TITLE>Kutipan</TITLE>
</HEAD>
<BODY >
<CITE>
Menurut Davis (1985:5) tingkatan pengambilan keputusan mempunyai ciri-ciri sebagai berikut:
Tingkat strategis berkaitan dengan hal-hal diantaranya: 1) informasi-informasi dari luar yang meliputi
kompetisi, konsumen, ketersediaan proses dan kajian demografis konsumen; 2) informasi mengenai
kecenderungan masa yang akan datang atau informasi yang bersifat prediktif untuk jangka panjang; 3)
informasi yang bersifat simulasi mengenai hal-hal yang diandaikan kemungkinan akan terjadi.
</CITE >
</BODY>
</HTML>

Simpan file tersebut dengan nama file kutipan.html

Gambar 5.12. Menampilkan kutipan

5.5 Tag Tabel , Elemen dan Atribut


Tabel dalam dokumen HTML dipergunakan untuk mengontrol tampilan informasi yang ada dalam
sebuah halaman web. Disamping itu tabel juga dapat digunakan untuk menampilkan record-record pada

18
[2012]

database. Untuk menampilkan table, perintah dasar yang digunakan adalah menggunakan tag sebagai
berikut:

<TABLE> </TABLE>

5.5.1 Table Border


Salah satu atribut dalam tabel ialah border yang digunakan untuk menentukan ketebalan garis batas
luar table. Nilai border dimulai dari 1, 2, 3 dan seterusnya. Semakin nilainya besar, maka garis batas luar
semakin tebal. Di bawah ini diberikan contoh untuk penulisan atribut border.

<HTML>
<HEAD>
<TITLE> Border </TITLE>
</HEAD>
<BODY >
<TABLE BORDER=2>
<TR><TD>
Tabel 1 baris, 1 kolom dengan border 2
</TD></TR>
</TABLE>
</BODY>
</HTML>
Simpan dengan nama file border.html

Gambar 5.13. Menampilkan table 1 kolom 1 baris

19
[2012]

5.5.2 Cellspacing
Atribut berikutnya ialah cellspacing yang digunakan untuk menentukan jumlah spasi antar sel dan
border. Nilai cellspacing dimulai dari 1, 2, 3 dan seterusnya. Semakin nilainya besar, maka ruangan sel
makin lebar. Di bawah ini diberikan contoh untuk penulisan atribut cellspasing.

<HTML>
<HEAD>
<TITLE> Cellspacing </TITLE>
</HEAD>
<BODY >
<TABLE BORDER=2 CELLSPACING=3>
<TR><TD>
Tabel 1 baris, 1 kolom dengan border 2, dan cellspacing 3
</TD></TR>
</TABLE>
</BODY>
</HTML>

Simpan dengan nama file cellspacing.html

Gambar 5.14. Menampilkan table 1 kolom 1 baris, border 2, cellspacing 3

5.5.3 Cellpadding

Atribut berikutnya ialah cellpadding menentukan jumlah spasi antara data dalam cell dan border sel..
Dalam tag tabel, ada tiga tag yang mendefinisikan header, row, dan cells. Tag-tag tersebut adalah table

20
[2012]

header <TH>, table row <TR>, dan table data <TD>. Di bawah ini diberikan contoh untuk penulisan
atribut cellpadding
<HTML>
<HEAD>
<TITLE> Cellpadding </TITLE>
</HEAD>
<BODY >
<TABLE BORDER=1 CELLSPACING=5 CELLPADDING=3>
<TR>
<TD>
Tabel 1 baris, 1 kolom 1 kolom dengan border 2
dan cellspacing 3 serta cellpadding 3
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Simpan dengan nama file cellpading.html

Gambar 5.15. Menampilkan Cellpadding

5.5.4 Width

Atribut selanjutnya ialah width yang digunakan untuk menentukan kelebaran table di layar monitor.
Ukuran lebar ditentukan dengan menggunakan pixel. Di bawah ini diberikan contoh untuk penulisan
atribut width.

21
[2012]

<HTML>
<HEAD>
<TITLE> Width </TITLE>
</HEAD>
<BODY >
<TABLE BORDER=2 CELLSPACING=3 CELLPADDING=3 WIDTH=100%>
<TR>
<TD>
Tabel 1 baris, 1 kolom 1 kolom dengan border 2,
cellspacing 3, cellpadding 3 dan width sebesar 100%
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Simpan dengan nama file width.html

Gambar 5.16. Menampilkan Tabel dengan Width

5.5.5 Align
Atribut selanjutnya ialah align yang digunakan untuk mengatur tampilan teks di posisi kiri (left), tengah
(center), atau kanan (right). Di bawah ini diberikan contoh untuk penulisan atribut align.

<HTML>
<HEAD>
<TITLE> Align </TITLE>
</HEAD>
<BODY >

22
[2012]

<TABLE BORDER=2 CELLSPACING=3 CELLPADDING=3 WIDTH=100% ALIGN="left">


<TR>
<TD>
Tabel 1 baris, 1 kolom 1 kolom dengan border 2,
cellspacing 3, cellpadding 3 dan width sebesar 100%
Teks akan ditampilkan rata kiri
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Simpan dengan nama file align.html

Gambar 5.17. Menampilkan Teks dengan align

5.5.6 Table Row


Elemen dalam tag table berupa table row berfungsi untuk menandai awal tiap baris pada tabel. Tabel
row mempunyai atribut-atribut diantarnya ialah align, valign, bgcolor, bgcolordark, dan bgcolorlight. Di
bawah ini diberikan contoh untuk penulisan elemen table row.
<HTML>
<HEAD>
<TITLE> Baris dalam tabel</TITLE>
</HEAD>
<BODY >
<TABLE BORDER=2 CELLSPACING=3 CELLPADDING=3 WIDTH=100% ALIGN="left"
BORDERCOLOR="navy">

23
[2012]

<TR>
<TD>
Bagian header
</TD>
</TR>
<TR>
<TD>
Tabel 1 baris, 1 kolom 1 kolom dengan border 2,
cellspacing 3, cellpadding 3 dan width sebesar 100%
Teks akan ditampilkan rata kiri dan batas tabel
diberi warna biru tua </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Simpan dengan nama file baris.html

Gambar 5.18. Menggunakan Table Row

5.5.7 Table Header


Elemen table header berfungsi sama seperti elemen table data <TD>, tetapi elemen table
header ditampilkan dalam suatu font cetak tebal. Di bawah ini diberikan contoh untuk penulisan elemen
table header.

<HTML>
<HEAD>
<TITLE> Header </TITLE>
</HEAD>
<BODY >

24
[2012]

<TABLE BORDER=1 CELLSPACING=5 CELLPADDING=5 WIDTH=100% ALIGN=CENTER


BORDERCOLOR=#FF00FF>
<TR>
<TH>
Bagian ini merupakan header tabel
</TH>
</TR>
<TR>
<TD>
Bagian ini adalah tabel dengan 1 baris, 1 kolom
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Gambar 5.19. Menggunakan Table Header

5.5.8 ROWSPAN, COLSPAN, ALIGN, VALIGN

Selain table header ada elemen table data lain yang digunakan untuk menandai awal dan akhir dari tiap
sel didalam tabel. Atribut–atribut untuk elemen table data diantaranya adalah ROWSPAN, COLSPAN,
ALIGN, dan VALIGN. Contoh penggunaan elemen table data seperti di bawah ini:

5.5.8.1 COLSPAN

25
[2012]

Atribut COLSPAN digunakan untuk menentukan jumlah kolom yang akan ditarik oleh sel. Sebagai
contoh, jika diberi nilai 2, maka akan menghasilkan bagian header dengan dua baris yang berisi dua sel
dan dua kolom yang berisi dua sel juga.

<HTML>
<HEAD>
<TITLE> Colspan </TITLE>
</HEAD>
<BODY >
<TABLE BORDER=2>
<TR>
<TH COLSPAN=2>
Bagian header tabel
</TH>
</TR>
<TR>
<TD>
Sel 1,1
</TD>
<TD>
Sel 1,2
</TD>
</TR>
<TR>
<TD>
Sel 2,1
</TD>
<TD>
Sel 2,2
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Simpan dengan nama file colspan.html

26
[2012]

Gambar 5.20. Menggunakan Colspan

5.5.8.2 ROWSPAN
Atribut ROWSPAN digunakan untuk menentukan jumlah baris yang akan ditarik oleh sel. Sebagai contoh,
jika ROWSPAN diberi nilai 2, maka sel dua baris akan dihasilkan dalam tabel. Contoh penggunaannnya
seperti di bawah ini:

<HTML>
<HEAD>
<TITLE> Rowspan </TITLE>
</HEAD>
<BODY >
<TABLE BORDER=1>
<TR>
<TH COLSPAN=2>
Bagian header tabel
</TH>
</TR>
<TR>
<TD ROWSPAN=2>
Kol 1
</TD>
<TD>
Sel 1,2
</TD>
</TR>
<TR>
<TD>
Sel 2,2

27
[2012]

</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Simpan dengan nama file rowspan.html

Gambar 5.21 Menggunakan Rowspan

5.5.8.3 ALIGN
Atribut ALIGN dipergunakan untuk meletakkan posisi table dengan nilai TOP, BOTTOM, LEFT, RIGHT, dan
CENTER. Contoh penggunaannnya seperti di bawah ini:
<HTML>
<HEAD>
<TITLE> Align </TITLE>
</HEAD>
<BODY >
<TABLE BORDER=3>
<CAPTION ALIGN=LEFT>
Caption dibuat rata kiri
</CAPTION>
<TR>
<TH COLSPAN=2>
Bagian header tabel
</TH>
</TR>
<TR>
<TD ROWSPAN=2 ALIGN=CENTER>
Kolom satu

28
[2012]

</TD>
<TD ALIGN=LEFT>
Sel 1,2
</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>
Sel 2,2
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Simpan dengan nama file align.html

Gambar 5.22 Menggunakan Align

Jika kita ingin melakukan perataan vertikal maka kita dapat menggunakan atribut VALIGN. Perintah
VALIGN diletakkan setelah perintah <TD> Sebagai contoh, <TD VALIGN=TOP>Teks yang akan diratakan
secara vertikal</TD>.

29
[2012]

5.6 Membuat Daftar (List)

Daftar atau list diperlukan untuk menampilkan informasi yang bersifat berurutan dan biasanya
ditampilkan dalam bentuk daftar. HTML menyediakan beberapa tipe daftar, yaitu: Daftar tanpa nomor
atau unordered list atau disebut juga bulleted list; daftar dengan nomor atau ordered list atau disebut
juga numbered list; dan daftar untuk definisi atau disebut juga sebagai definition list

5.6.1. UL
Bagian pertama ini akan diberikan contoh penggunaan daftar tanpa nomor yang dapat dibuat dengan
cara sebagai berikut: Tag untuk membuat daftar dalam bentuk bullet atau unorder list dimulai dengan
<UL>; kemudian untuk menampilkan daftar butir-butir yang diinginkan digunakan perintah <LI> dan
untuk mengakhiri pembuatan daftar ditutup dengan </UL>. Contoh penggunaannya di bawah ini:

<HTML>
<HEAD>
<TITLE>Daftar Bullet</TITLE>
<HEAD>
<BODY>
Membuat List
<UL>
<LI> Daftar pertama
<LI> Daftar kedua
<LI> Daftar ketiga
<LI> Daftar keempat
</UL>
</BODY>
</HTML>

Unordered List yang disebut juga sebagai bulleted list, mempunyai tanda bullet default
berupa noktah. Simpanlah file di atas dengan nama daftar_bullet.html

30
[2012]

Gambar 5.23 Menampilkan UnorderList

5.6.2. OL
Bagian kedua ini akan diberikan contoh penggunaan daftar yang menggunakan nomor atau disebut juga
sebagai ordered list. Cara membuat daftar seperti ini ialah dengan menggunakan tag awal <OL>;
kemudian untuk menampilkan daftar butir-butir yang diinginkan digunakan perintah <LI> dan untuk
mengakhiri ditutup dengan </OL>
Contoh penggunaannya seperti di bawah ini::

31
[2012]

<HTML>
<TITLE>Daftar Angka</TITLE>
</HEAD>
<BODY>
Membuat List
<OL>
<LI>Satu
<LI>Dua
<LI>Tiga
<LI>Empat
</OL>
<BODY>
</HTML>
Simpanlah file di atas dengan nama daftar_angka.html

Gambar 5.24 Menampilkan OrderList

Kita dapat mengubah pembuatan daftar menggunakan nomor atau ordered list dengan menggunakan
model yang lain, yaitu dengan cara menambahkan atribut type <OL> tersebut. Di bawah ini adalah tipe-
tipe lain yang digunakan:

Tipe Keterangan
1 Daftar berupa angka 1,2,3 dst

32
[2012]

I Daftar berupa huruf Romawi besar


i Daftar berupa huruf Romawi kecil
A Daftar berupa abjad dengan huruf besar
a Daftar berupa abjad dengan huruf kecil

Di bawah ini diberikan contoh penggunaannya:

<HTML>
<TITLE>Tipe</TITLE>
</HEAD>
<BODY>
<OL type=I>
<LI>Tipe Huruf Romawi Besar
</OL>
<OL type=i>
<LI> Tipe Huruf Romawi Kecil
</OL>
<OL type=A>
<LI> Tipe Abjad Menggunakan Huruf Besar
</OL>
<OL type=a>
<LI> Tipe Abjad Menggunakan Huruf Kecil
</OL>
</BODY>
</HTML>

Simpanlah file di atas dengan nama tipe_daftar.html

33
[2012]

Gambar 5.25 Menggabungkan List

5.6.3. DL & DT
Bagian ketiga diberikan contoh pembuatan daftar definisi atau disebut definition list yang menggunakan
tag <DL>) yang terdiri dari definition term dengan tag <DT>, dan definition definition dengan tag <DD>.
Contoh penggunaanya seperti di bawah ini:

<HTML>
<TITLE>Daftar Definisi</TITLE>
</HEAD>
<BODY>
<DL>
<DT>INTERNET
<DD>Internet mempunyai pengertian sebagai berikut:…
……………………………………….
<DT>ROUTER
<DD> Internet mempunyai pengertian sebagai berikut:…
……………………………………….
</DL>
</BODY>
</HTML>

Simpanlah file di atas dengan nama daftar_definisi.html

34
[2012]

Gambar 5.26. Daftar Definisi

5.6.4. Nested List


Bagian keempat diberikan contoh pembuatan nested list merupakan suatu daftar yang terdiri dari daftar
utama yang diikuti dengan sub-daftar dan yang kemudian dapat diikuti dengan sub-sub daftar lagi.
Untuk membuat nested list kita dapat menggunakan unordered list atau ordered list serta dapat juga
menggabung unordered list dengan ordered list. Contoh nested list dengan menggunakan unordered list

<HTML>
<HEAD>
<TITLE>Nested List Unordered List</TITLE>
</HEAD>
<BODY>
<UL>
<LI> Bagian Pertama
<UL>
<LI> Sub bagian pertama
<UL>
<LI> Sub sub bagian pertama
<LI> Sub sub bagian pertama
<LI> Sub sub bagian pertama
</UL>
<LI> Sub bagian kedua
<LI> Sub bagian ketiga
</UL>

35
[2012]

<LI> Bagian Kedua


<UL>
<LI> Sub bagian kedua 1
<LI> Sub bagian kedua 2
</UL>
<LI> Bagian Ketiga
</UL>
</BODY>
</HTML>

Simpanlah file di atas dengan nama nlul.html

Gambar 5.27 Nested List Tidak berurutan

36
[2012]

Bagian kelima ialah penggunaan nested list dengan ordered list

<HTML>
<HEAD>
<TITLE>Nested List Ordered List </TITLE>
</HEAD>
<BODY>
<OL>
<LI> Bagian Pertama
<OL>
<LI> Sub Bagian Pertama
<OL>
<LI> Sub Sub Bagian Pertama 1
<LI> Sub Sub Bagian Pertama 2
<LI> Sub Sub Bagian Pertama 3
</OL>
<LI> Sub Bagian Kedua
<LI> Sub Bagian Ketiga
</OL>
<LI> Bagian Kedua
<OL>
<LI> Subpoint 1
<LI> Subpoint 2
</OL>
<LI> Bagian Ketiga
</OL>
</BODY>
</HTML>

Simpanlah file di atas dengan nama nlol.html

37
[2012]

Gambar 5.28 Nested List Berurutan

Bagian keenam adalah nested list dengan menggunakan gabungan antara unordered list dan ordered list

<HTML>
<HEAD>
<TITLE>Gabungan Nested List </TITLE>
</HEAD>
<BODY>
<UL TYPE=disk>
<LI>Daftar Merk Handphone
<OL TYPE=1>
<LI>Nokia
<LI>Samsung
</OL>
<LI>Daftar Stasiun TV
<OL TYPE=A>
<LI>TVRI
<LI>RCTI
<LI>TRANS
</OL>
<LI>Daftar Merk Sepeda Motor
<OL TYPE=a>
<LI>Honda
<LI>Yamaha
</OL>
</UL>

38
[2012]

</BODY>
</HTML>

Gambar 5.29 List Gabungan

Bagian ketujuh ialah daftar menu yang digunakan untuk menampilkan daftar dalam bentuk menu yang
akan dipilih oleh pengguna. Untuk membuat daftar menu digunakan tag <MENU> ...</MENU>.
<HTML>
<HEAD>
<TITLE>Daftar Menu </TITLE>
</HEAD>
<BODY>
<H2> Daftar Jenis Perguruan Tinggi </H2>

<MENU>
<LI>Universitas
<LI> Sekolah Tinggi
<LI> Institut
<LI> Politeknik
<LI> Akademi
</MENU>
</BODY>
</HTML>

39
[2012]

Gambar 5.30 Daftar Menu

5.7 Tampilan Dalam Dokumen HTML


Untuk membuat tampilan suatu dokumen menjadi rapi diperlukan beberapa cara, diantaranya ialah
untuk membuat ganti baris seperti penggunaan perintah enter dalam pemroses kata, kita dapat
menggunakan <BR>. Elemen <BR> yang diperkenalkan oleh Netscape berguna untuk menuliskan teks
pada baris berikutnya. Dengan adanya elemen ini, maka kita tidak lagi memerlukan elemen PRE jika
menulis pada suatu baris baru.

Untuk menampilkan tulisan atau teks agar dapat berjalan dapat dilakukan dengan menggunakan
perintah MARQUEE, perintah ini mempunyai empat nilai yaitu:
 <Marquee direction=left> Untuk membuat tulisan berjalan ke arah kiri
 <Marquee direction=right>Untuk membuat tulisan berjalan ke arah kanan
 <Marquee direction=up> Untuk membuat tulisan ke arah atas
 <Marquee direction=down> Untuk membuat tulisan ke arah bawah.
Atribut-atribut lainnya ialah:
 <Marquee scrolldelay=’x’> untuk mengatur kecepatan gerak huruf yang dijalankan., misalnya
<MARQUEE SCROLLDELAY=’300’>
 <Marquee behavior=’x’> untuk mengatur bentuk gerakan, misalnya <Marquee
behavior=’alternate’>

Contoh perintah marquee dalam konteks halaman web, seperti di bawah ini:
<HTML>
<HEAD>

40
[2012]

<TITLE>marquee1</TITLE>
</HEAD>
<BODY>
<marquee direction="left">Selamat datang di Web saya</marquee>
<br>
<marquee direction="right">Selamat Datang di Web saya </marquee></font>
<br>
<marquee direction="left" behavior="alternate">Selamat Datang di Web saya </marquee></font>
<br>
<marquee direction="left" scrolldelay=500>Selamat Datang di Web saya </marquee>
</BODY>
</HTML>

Untuk membuat MARQUEE dengan arah keatas / UP atau ke bawah / Down, maka ruangan dimana teks
akan dibuat usahakan berada dalam tabel dengan panjang dan lebar tertentu.

5.8 Membuat Link

Link atau disebut juga hyperlink merupakan sarana perintah yang dapat menghubungkan antara satu
bagian dalam dokumen HTML dengan bagian yang lain baik itu dalam satu dokumen yang terdiri dari
beberapa halaman ataupun dengan bagian dokumen lain yang berada di luar dokumen kita. Pengertian
luar mengacu pada perbedaan URL (Universal Resource Locator). Hyperlink dibagi menjadi 3 Jenis, yaitu
Absolute URL Hyperlink atau link yang dibuat untuk URL / alamat situs yang berbeda; Relative URL
Hyperlink, atau link untuk ke bagian halaman lain dalam satu URL dan Hyperlink dengan Anchor atau link
dalam satu halaman web tertentu. Untuk membuat link atau penghubung digunakan tag <A> yang
diikuti dengan HREF dan kemudian ditutup dengan </A>. Secara lengkap perintah tersebut dapat
dituliskan sebagai berikut: <A HREF=”URL”>…. </A>. Peranan HREF = "URL" menentukan URL pada
halaman atau sumber-sumber informasi yang akan ditampilkan setelah user dengan cara melakukan
klik pada link tersebut, yang biasanya berwarna biru. Sebagai contoh, <A
HREF="http://www.kompas.com"> akan mengarahkan link ke alamat situs Kompas.

5.8.1 Anchor
Untuk membuat link dalam halaman itu sendiri digunakan hyperlink dengan anchor dengan
menggunakan atribut NAME menentukan lokasi dalam dokumen yang akan dibuat link Hal ini
memungkinkan bagian dalam dokumen lain mengacu ke lokasi tertentu dalam suatu halaman itu sendiri
dimana acuan ditempatkan dalam halaman itu sendiri. Untuk membuat anchor kita dapat menggunakan
tag <A Name=”tujuan”</A>
Misalnya pada bagian bawah kita beri perintah sebagai berikut:
<a href=”#top”>Jangkar untuk kembali ke atas</a>; maka bagian dimana kita ingin tuju dengan link
tersebut harus diberi perintah pasangannya, yaitu

41
[2012]

<a name=”top”>Anchor</a>. Pada perintah awal jangan lupa diberi tanda pagar (#) untuk mendahului
nama lokasi yang akan dituju. Di bawah ini akan diberikan contoh penggunaan anchor tersebut.

<HTML>
<TITLE>Anchor</TITLE>
<BODY>
<h1 align="center"><a name="atas">Anchor</a></h1>

<p>
Search engine adalah suatu program yang mencari dokumen-dokumen didasarkan pada kata kunci / key
word yang digunakan oleh pengguna Internet (netter) ketika yang bersangkutan sedang mencari
informasi mengenai apa saja, misalnya produk, jasa layanan, dan berita yang kemudian menampilkan
setelah halaman-halaman yang mempunyai kata kunci sama ditemukan. Program itu disebut sebagai
Bots. Secara umum suatu search engine bekerja dengan cara mengirimkan spider untuk mencari
dokumen-dokumen sebanyak mungkin. Program lain sejenis spider disebut juga sebagai indexer. </p>

<h1 align="center"><a name="indeks">Indexer</a></h1>


<p>
Indexer bekerja dengan cara membaca dokumen-dokumen yang ditemukan kemudian membuat index
didasarkan pada kata-kata (kunci) yang ada disetiap dokumen tersebut. Masing-masing search engine
menggunakan proprietary algorithm untuk menciptakan indeks-indeks tersebut yang ditampilkan dalam
bentuk hasil pencarian. Kebalikan dari search engine seperti ini disebut direktori. Direktori
menggunakan manusia dalam melakukan index situs-situs yang didaftarkan ke mereka.
</p>

<h1 align="center"><a name="internet">Sejarah Internet</a></h1>


<p>
Sejarah Internet menunjukkan pertama kali alat pencari dibuat pada tahun 1980 yang disebut sebagai
"Archie". Fungsi alat pencari ini untuk download file-file di server-server anonymous FTP dan
menciptakan data base yang dapat dicari. Pada tahun 1981 Gopher dibuat dan berfungsi untuk
melakukan index dokumen-dokumen teks sederhana. Sedang search engine dalam World Wide Web
pertama kali dikembangkan oleh Matthew Gray pada tahun 1993 yang disebut sebagai "Wandex"
</p>

<p>
Daftar search engine di bawah akan membantu para webmaster yang mempelajari bagaimana search
engine yang didasarkan pada robot (crawler-based search engine) melakukan index situs. Daftar
tersebut menyediakan ringkasan faktor-faktor dan fitur-fitur penting yang dapat mempengaruhi
bagaimana situs-situs di index dan diranking. Sedang search engine yang didasarkan pada manusia
(human-powered search engine) seperti Open Directory tidak didaftar karena direktori tersebut tidak
melakukan crawling web untuk membuat daftarnya. Direktori seperti itu, menggunakan manusia
sebagai sarana untuk melakukan index terhadap situs-situs yang didaftarkan ke mereka
</p>

42
[2012]

<p>
Semua crawler akan mencari halaman-halaman untuk ditambahkan ke index web site mereka sekalipun
halaman-halaman tersebut tidak didaftarkan ke mereka. Masing-masing crawler mempunyai
karakteristik sendiri-sendiri. Crawler tertentu lebih baik dari yang lain dalam melakukan index halaman-
halaman web kita. Tabel di atas menunjukkan search engine mana saja yang dapat melakukan inxed
dengan baik / deep crawl dan dapat mengumpulkan banyak halaman dari web site kita, meski kita tidak
pernah mendaftarkan halaman-halaman web kita. Secara umum, semakin besar index search engine,
semakin banyak halaman yang didaftar per situsnya.
</p>

<p>
Frame support menunjukkan search engine yang mana yang dapat mengikuti link dalam frame. Frame
sering menghambat search engine melakukan index ke halaman-halaman web kita. Frame kadang
menimbulkan masalah bagi crawler saat sedang memasuki halaman-halaman
</p>

<p>
File robots.txt merupakan sarana bagi para webmaster untuk mengeluarkan search engines dari situs-
situs mereka. Fasilitas ini berfungsi untuk memblokir crawler agar tidak memasuki ke web kita.
</p>

<p>
Meta robot tag merupakan meta tag spesial yang memungkinkan pemilik situs membuat spesifikasi
halaman tertentu tidak diijinkan untuk di index oleh search engine.
</p>
<p>
Paid inclusion adalah fasilitas suatu search engine yang menawarkan suatu program dimana kita dapat
membayar dengan garansi halaman-halaman kita akan dimasukkan ke dalam index search engine
tersebut. Fasilitas ini berbeda dengan paid placement, yang memberikan garansi bahwa web kita akan
masuk dalam rangking utama jika orang sedang mencarinya di search engine tertentu, misalnya Google
</p>
<center>
<a href="#atas">Awal</a> | <a href="#indeks">Indeks</a> | <a href="#internet">Internet</a>
</center>
</BODY>
</HTML>

43
[2012]

Gambar 5.31 Membuat Anchor

44
[2012]

5.8.2 Absolute URLHyperlink


Yang dimaksud dengan absolute URL hyperlink ialah perintah untuk menghubungkan dokumen yang
mempunyai URL berbeda atau berbeda letak servernya. Untuk membuat link seperti ini diperlukan
perintah sebagai berikut: <A HREF=”lokasi yang dituju”= </A>. Contoh <A
HREF=”http://www.yahoo.com”= Yahoo</A>. Jika Link tersebut dijalankan maka halaman dimana
terdapat link tersebut akan menuju ke server milik Yahoo.

5.8.3 Relative URL Hyperlink


Yang dimaksud dengan relative URL hyperlink ialah menempatkan suatu link untuk menghubungkan satu
halaman dengan halaman lain dalam satu dokumen yang berada dalam satu URL / server yang sama.
Untuk membuat link seperti ini caranya ialah dengan menggunakan perintah <A HREF=”lokasi yang
dituju”= </A>. Contoh <A HREF=”lanjut.html”= Ke Halaman Selanjutnya</A>. Di bawah ini dituliskan
contoh programnya sebagai berikut:

<HTML>
<HEAD>
<TITLE> relative URL hyperlink </TITLE>
</HEAD>
<BODY>
Halaman pertama web saya
<br>
Silahkan menuju ke halaman berikutnya:<br>
<center>
<a href=”lanjut.html”>ke Halaman Selanjutnya</a>
</center>
</BODY>
</HTML>

5.8.4. Membuat Link ke Email


Untuk membuat link ke email dapat digunakan perintah sebagai berikut:
<A HREF=”alamat email yang dituju”>Teks </A>,
contoh
<A HREF="mailto:[email protected]">Email ke Taryana</A>.
Jika link dijalankan maka kita akan secara otomatis dapat mengirimkan email ke alamat yang dituju.

5.9 Menempatkan Gambar ke Dalam Dokumen HTML


Untuk menempatkan suatu gambar dalam halaman dokumen HTML dapat dilakukan dengan dengan
SRC=URL , URL merupakan

45
[2012]

alamat yang menunjuk pada sumber file gambar yang akan ditempatkan kedalam halaman yang kita
inginkan.. Sedang ALIGN dipergunakan untuk menentukan bagaimana gambar akan dirapikan secara
relative terhadap tulisan yang berdekatan dengan gambar serta penempatan posisi gambar dalam
halaman web tersebut.Atribut lainnya ialah ALT=text yang digunakan untuk menentukan tulisan yang
akan ditampilkan. Sedang untuk menentukan tinggi dan lebarnya ukuran gambar digunakan atribut
HEIGHT=h WIDTH=w, misalnya HEIGHT=30 WIDTH=28. Di bawah ini diberikan contoh penggunaannya

<HTML>
<HEAD>
<TITLE>Gambar</TITLE>
<HEAD>
<BODY>
<div align="center">
<h1>Monas</h1>
<img src="Monas.jpg" width="300" height="280"><BR>
</div>
</BODY>
</HTML>

Kadang kita ingin menggunakan gambar untuk dijadikan sebagai link. Cara membuatnya ialah sebagai
berikut: Gabungkanlah antara perintah memempatkan gambar dengan membuat link seperti di bawah
ini.
<HTML>
<HEAD>
<TITLE>Penempatan Gambarr</TITLE>
<HEAD>
<BODY>
<div align="center">
Untuk membaca informasi mengenai Monas silahkan klik gambarnya: <br>
<a href="link.html"><img src="monas.jpg" width="300" height="280"></a>Monas<BR>
</div>
</BODY>
</HTML>

5.10 Menambahkan Obyek-Obyek Multimedia

Kadang kita menginginkan dokumen HTML kita ditambah dengan berbagai obyek multimedia, yaitu
obyek-obyek yang terdiri dari citra atau gambar, suara dan data; untuk itu pada bagian ini akan
diberikan contoh-contoh bagaimana caranya menambahkan obyek-obyek tersebut di dalam situs kita.

Untuk menambahkan obyek atau file multimedia perintahnya sebagai berikut:


<IMG DYNSRC=”nama file”>

46
[2012]

Berikut adalah contoh bagaimana menajalankan file audio video yang berakhiran *.avi dapat dijalankan
pada html dengan menggunakan browser Internet Explorer

<HTML>
<HEAD><HEAD>
<TITLE> File AVI</TITLE>
<BODY>
<IMG DYNSRC="speedis.avi" start=fileopen width=200 height=200 loop=infinite>
</BODY>
</HTML>

Keterangan:
loop=infinite, artinya bahwa file multimedia yang ditampilkan akan dijalankan secara berulang-ulang.

Kita dapat juga menambahkan suara pada dokumen HTML kita, yang akan dijalankan sebagai latar
halaman yang sedang dibuka (background), Untuk perintah ini kita harus menggunakan Internet
Explorer untuk menjalankannya. Berikut adalah contoh bagaimana memasukan file suara tersebut.

<HTML>
<HEAD><HEAD>
<TITLE>File Suara</TITLE>
<BODY>
<BGSOUND SRC="missyounight.mp3" loop="-1">
<BODY>
<HTML>

Keterangan:
Loop=”-1”, artinya bahwa file suara yang ditampilkan akan dijalankan secara berulang-ulang

47
[2012]

5.11 Membuat Formulir

Formulir adalah cara untuk mendapatkan umpan balik dari pengunjung ke situs kita. Diawali dengan tag
<FORM> dan diakhiri tag </FORM>, field-field yang berada diantaranya digunakan untuk menentukan
ukuran dan jenis dari masing-masing input field.

Method Post and Get


Method post and get adalah proses untuk mengirimkan data dari halaman masukan ke halaman
keluaran. Berikut adalah contoh bagaimana menangani data yang dikirim dari halaman html kemudian
diproses dengan menggunakan bahasa lain yang disebut dengan bahasa PHP. Contoh penggunaan
method get ialah sebagai berikut:
Masuk.html
<HTML>
<HEAD>
<TITLE>Input</TITLE>
</HEAD>
<BODY>
<form action="keluar.php" method="get">
Nama anda : <input type="text" name="namaanda">
<input type="submit" value=Send>
</form>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Dua</TITLE>
</HEAD>
<BODY>
<?
$namaanda = $_GET["namaanda"];
Echo "Halo " . $namaanda; //atau print $data
?>
</BODY>
</HTML>

48
[2012]

Gambar 5.32 Input form

Gambar 5.33 Output yang dihasilkan

Apabila kita menggunakan method GET maka parameter akan ditampilkan di URL. Sedangkan kalo POST
tidak ditampilkan di URL. Untuk data yang banyak biasanya digunakan POST atau data yang tidak ingin
dilihat misalkan data untuk login, yang dikirimkan username dan password, jika menggunakan GET maka
username dan passwordnya bisa terlihat sehingga untuk login autentifikasi digunakan method POST.

Masuk2.html
<HTML>
<HEAD>
<TITLE>Input</TITLE>
</HEAD>

49
[2012]

<BODY>
<form action="keluar2.php" method="post">
Nama anda : <input type="text" name="namaanda">
<br>
<input type="submit" value=send>
</form>
</BODY>
</HTML>

Keluar2.php
<HTML>
<HEAD>
<TITLE>Output</TITLE>
</HEAD>
<BODY>
<?
$nama = $_POST["namaanda"];
Echo "Halo " . $nama; //atau print $data
?>
</BODY>
</HTML>

Berikut ini dibahas beberapa elemen yang dapat disertakan dalam suatu form.

Elemen input menentukan informasi pengguna; sedang atribut-atribut untuk tag input diantaranya:
 Checked digunakan untuk checkboxes dan radio button, atribut ini dapat ditentukan nilai TRUE
(checked) atau unchecked / false.
 Maxlength digunakan untuk menentukan jumlah maximum karakter yang dapat dimasukkan
dalam suatu textbox.
 Name digunakan untuk menentukan nama form control. Hal ini digunakan untuk menentukan
elemen data pada form ke resource yang memproses elemen ini.
 Size digunakan untuk menentukan ukuran form control. Ini dapat berupa nilai tunggal yang
menentukan lebar kontrol dalam karakter, atau dalam pasangan lebar dan panjang.
 Src digunakan untuk menentukan gambar yang akan ditampilkan dengan kontrol.
 Type digunakan untuk menentukan jenis control yang akan digunakan.
 Select digunakan untuk menandai awal dan akhir dari data dalam suatu list box atau suatu
daftar pilihan drop-down.
 Option digunakan untuk membentuk masing-masing pilihan dalam text box atau list box.

Di bawah ini diberikan contoh program dalam dokumen HTML


<HTML>
<HEAD>
<TITLE>form data mahasiswa

50
[2012]

</TITLE>
</HEAD>
<BODY>
<h2>
<b>Form data Mahasiswa<br></b></font>
<form action="formulir.php" method="post">
<hr>
<table>
<tr><td>Nama anda<td>: <input type=text name="nama" size=20>
<tr><td>Alamat<td>: <input type=text name ="alamat" size=30>
<tr><td>Kota<td>: <input type=text name ="kota" size=22>
<tr><td>Kodepos<td>: <input type=text name ="kodepos" size=6>
<tr><td>Telp<td>: <input type=text name ="telp" size=15>
<tr><td>Jenis kelamin<td>: <input type="radio" name="kelamin" value=Pria>pria <input type="radio"
name="kelamin" value=Wanita>wanita
<tr><td>Hoby <td>:<input type="checkbox" name="musik" value=Musik>musik
<tr><td><td>:<input type="checkbox" name="jalan" value=Jalan>jalan
<tr><td><td>:<input type="checkbox" name="baca" value=Baca>baca
<tr><td>Agama <td>: <select size="1" name="agama">
<option>Islam</option>
<option>Budha</option>
<option>Hindu</option>
<option>Kristen</option>
</select>
<tr><td>Asal sekolah<td> : <input type="text" name="asalsma" size="35">
<tr><td>Jurusan <td>: <input type="text" name="jurusan" size="20">
</table>
<hr>
<input type=submit value=kirim> <input type=reset>
</form>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Output Formulir</TITLE>
</HEAD>
<BODY>
<h3>Output Formulir
<hr>
<table>
<?
echo "<tr><td>Nama Anda<td>".$_POST["nama"];

51
[2012]

echo "<tr><td>Alamat<td>".$_POST["alamat"];
echo "<tr><td>Kode Pos<td>".$_POST["kodepos"];
echo "<tr><td>Telp<td>".$_POST["telp"];
echo "<tr><td>Kelamin<td>".$_POST["kelamin"];
echo "<tr><td>Hoby<td>".$_POST["musik"]. $_POST["jalan"].
$_POST["baca"];
echo "<tr><td>Agama<td>".$_POST["agama"];
echo "<tr><td>Asal Sekolah<td>".$_POST["asalsma"];
echo "<tr><td>Jurusan<td>".$_POST["jurusan"];
?>
</BODY>
</HTML>

Gambar 5.34 Input Form Data mahasiswa

52
[2012]

Gambar 5.35 Output Form data Mahasiswa

Terdapat atribut-atribut khusus untuk formulir, diantaranya ialah:


 cols untuk menentukan panjang textarea dari kiri ke kanan
 rows untuk menentukan tinggi textarea berdasarkan baris.
 action untuk menentukan kemana tujuan data akan dikirim
 method untuk menentukan bagaimana metode data akan dikirim
 value untuk menentukan isi awal untuk sebuah inputan.

5.12 Membuat Frame

HTML mempunyai elemen yang berguna untuk menampilkan beberapa halaman sekaligus pada layar
komputer. Untuk keperluan tersebut kita dapat menggunakan frame. Fungsi frame diantaranya ialah
digunakan untuk menampilkan halaman lain tanpa menghilangkan halaman menu utama yang masih
tetap dapat ditampilkan dilayar browser. Atribut-atributnya diantaranya ialah:

 <FRAMESET> </FRAMESET> Elemen FRAMESET merupakan elemen kelompok pengisi suatu frame.
Pada perintah ini terdapat dua atribut yaitu ROWS dan COLS. Tag ROWS berfungsi untuk
menentukan jumlah spasi yang diberikan pada tiap baris. Jumlah tersebut dapat ditentukan dalam
pixel, persen dengan menempatkan suatu % setelah nilai, atau nilai relatif dengan menempatkan

53
[2012]

tanda asterisk (*) di tempat nilai tersebut. Sedang tag COLS sebaliknya berfungsi unutk menentukan
jumlah spasi pada kolom.

 <FRAME> Elemen FRAME menentukan properti setiap frame masing-masing dalam frameset.
Karena elemen ini tidak mengandung teks, maka elemen tersebut tidak ada pasangan end-tag.
Atribut dari FRAME adalah sebagai berikut:

o Atribut SRC menunjuk spesifik kearah sumber URL untuk frame tersebut.
o Atribut NAME digunakan untuk menentukan nama frame, sehingga dapat berlaku sebagai
target dari URLs lain.
 Atribut marginwidth untuk memungkinkan perancang halaman menentukan lebar border
frame dalam jumlah pixel.
 Atribut marginheight digunakan untuk menentukan tinggi margin.
 Srolling berfungsi untuk membuat scrolling bar. Setting untuk atribut ini ialah YES, NO, dan
AUTO.
 Atribut noresize digunakan mencegah pengguna untuk mengubah ukuran frame karena
aturan baku (default) memungkinkan kita dapat mengubah ukuran frame.
 Atribut NOFRAMES akan mengabaikan data yang oleh browser akan ditampilkan melalui
frame, dan data tersebut dapat ditampilkan oleh browser yang tidak mampu menampilkan
frame.

 FRAMESET ROWS
Program berikut adalah contoh bagaimana membuat halaman dengan pembagian baris (Rows)

Contoh
<html>
<frameset rows=100,*>
<noframes>
Program ini hanya dapat ditampilkan dengan browser yang mendukung frame
</noframes>
<frame src="satu.html">
<frame src="dua.html">
</frameset>
</html>

54
[2012]

Gambar 5.36. Frame 2 Baris


 FRAMESET COLS
Program berikut adalah contoh bagaimana membuat halaman dengan pembagian kolom (Cols)

Contoh
<html>
<frameset cols=100,*>
<noframes>
Program ini hanya dapat ditampilkan dengan browser yang mendukung frame
</noframes>
<frame src="satu.html">
<frame src="dua.html">
</frameset>
</html>

55
[2012]

Gambar 5.37. Frame 2 Kolom

 FRAMESET ROWS DAN COLS


Program berikut ini adalah contoh bagaimana membuat halaman dengan pembagian baris (Rows) dan
kolom (Cols)

Contoh
<frameset rows=30%,*>
<noframes>
Program ini hanya dapat ditampilkan dengan browser yang mendukung frame
</noframes>
<frame src="satu.html">
<frameset cols=30%,*>
<frame src="dua.html">
<frame src="tiga.html">
</frameset>

56
[2012]

Gambar 5.38. Frame 2 Baris, 2 Kolom

 Membuka dua situs dalam frame


Program berikut ini merupakan program yang dipergunakan untuk membuka situs yang mempunyai URL
berbeda dalam dua frame.

<html>
<frameset cols=50%,*>
<noframes>
Program ini hanya dapat ditampilkan dengan browser yang mendukung frame
</noframes>
<frame src="http://yahoo.com">
<frame src="http://google.com">
</frameset>
</html>

57
[2012]

Gambar 5.39. Membuka 2 Buah alamat website


Frame sebelah kiri digunakan untuk menampilkan halaman website http://yahoo.com, sedangkan frame
sebelah kanan digunakan untuk menampilkan halaman website http://google.com

 IFRAME
Perintah IFRAME memungkinkan untuk membuat frame window yang mengambang, Frame ini
berfungsi seperti text box, jika kita memerintahkan browser untuk melakukan scrolling maka frame
internal tersebut ini juga akan turut scrolling.

<html>
Ini contoh penggunaan Iframe dalam sebuah halaman
<hr>
<iframe src="http://detik.com">
<iframe src="http://facebook.com">
</html>

58
[2012]

Gambar 5.40. Membuka 2 Buah alamat website dalam iframe

 Frame Navigasi
Frame navigasi berfungsi untuk membuat navigasi pemilihan menu atau isi halaman-halaman web.
Berikut contoh pemakaian 2 buah frame untuk membuat navigasi menu, dihalaman sebelah kiri diisi
dengan menu, sedangkan halaman sebelah kanan diisi halaman pembuka yang nantinya akan dijadikan
target.

Frame.html
<html>
<frameset cols=10%,*>
<noframes>
Hanya dapat tampil pada browser yang mendukung frame
</noframes>
<frame src="kiri.html">
<frame src="kanan.html" name=kanan>
</frameset>
</html>

kiri.html
<html>
MENU
<hr>
<a href="kanan.html" target="kanan">HOME</a><br>
<a href="biodata.html" target="kanan">Biodata</a><br>
<a href="hoby.html" target="kanan">Hoby</a><br>

59
[2012]

<a href="sekolah.html" target="kanan">Sekolah</a><br>


</table>
<hr>

kanan.html
<html>
<Center>
<h1>
Menggunakan Frame
<hr>
Untuk Navigasi Menu
<hr>

biodata.html
<html>
<center>
<h1>
BIODATA SAYA
<hr>
<table>
<tr><td>Nama<td>: Fahra Ragita
<tr><td>Alamat<td>: Jl.Gegerkalong Hilir 78
<tr><td>Telp<td>: 2000333

hoby.html
<html>
<center>
<h1>
HOBY SAYA
<hr>
<table>
<tr><td>Musik<td>: Pop, Rok, Dangdut
<tr><td>Olah Raga<td>: Sepak Bola, Badminton, Lari

sekolah.html
<html>
<center>
<h1>
SEKOLAH
<hr>
<table>

60
[2012]

<tr><td>SD<td>: Sekolah Dasar Negeri Ciwaruga 1


<tr><td>SMP<td>: Sekolah Menengah Pertama Negeri 29 Bandung
<tr><td>SMA<td>: Sekolah Menengah Atas Negeri 20 Bandung
<tr><td>PERGURUAN TINGGI<td>: Universitas Komputer Indonesia

Gambar 5.41. Membuat Navigasi Menu dan Link

61

Anda mungkin juga menyukai