DAFTAR ISI
DAFTAR
ISI …………..…………………………...…………………………... i
KATA PENGANTAR….…………………………...…………………………... iii
1. WORLD
WIDE WEB…………………………...…………………………... 1
Apa yang dimaksud dengan world wide
web?……………………….. 1
Bagaimana www bekerja? ……………………….…………………….. 1
Bagaimana caranya browser menjemput
pages ? ……………………. 1
Bagaimana caranya browser
menampilkan pages ? ………………… 1
Siapa yang membuat standart web ?
………………………...………... 2
2. MENGENAL
HTML…………………………...………………………….… 3
Apa yang dimaksud dengan sebuah file
HTML ? ……………………… 3
Anda ingin mencobanya ?
…………………………...…………………... 3
Penjelasan contoh
diatas…………………………...…………….………. 4
Catatan untuk editor
HTML………………………...……………………… 4
Pertanyaan dan jawaban untuk
penyegaran..…………………………… 4
3. ELEMEN - ELEMEN HTML…………………………...……………….….. 6
Tag-tag
HTML………………………...………………...…….……………. 6
Elemen- elemen HTML
………………………...………………….…….. 6
Mengapa kita menggunakan tag dengan
huruf kecil ?…..………...….. 7
Atribut-atribut (lambang)
tag…………………………...………………….. 7
Bentuk tanda kutip "red"
atau 'red' ? ……………………………………... 8
4. DASAR - DASAR TAG HTML…………………………...………………... 9
Lakukan percobaan untuk
contoh-contoh berikut: ……………………… 9
Headings…………………………...………………...……………………… 10
Line
break…………………………...………………...…………………….. 11
Komentar atau catatan dalam HTML
……………………...…………… 11
Tips yang sangat berguna!
…………………………...……………….….. 11
Contoh-contoh yang perlu dicoba:
…………………………...…………… 12
Membandingkan tag dasar html:
…………………………...…………… 13
5. MEMFORMAT TEXT HTML…………………………...……………….…. 14
Contoh-contoh : …………………………...………………...……………… 14
Bagaimana menampilkan source
HTML…………………………...…… 15
Tag untuk format text:
…………………………...……………….……….. 15
Tag untuk "computer
output" : …………………………...……………….. 16
Tag untuk citations, quotations,
definition: …………………………...….. 16
6. HTML CHARACTER ENTITIES…………………………...………………. 17
Karakter
entity…………………………...……………………...…………… 17
Tanda spasi tetap (non-breaking
space) …………………………...…… 17
The most common character entities:
…………………………...………. 18
Some other commonly used character
entities: ………………………… 18
7. ENTITIES REFERENCE UNTUK HTML
4.01…………………………... 19
ASCII entities with new entity
names…………………………...………… 19
Iso 8859-1 symbol
entities…………………………...…………………… 19
Iso 8859-1 character
entities…………………………...………………… 20
Some other entities supported by
HTML ………………………...……… 21
8. LINKS DALAM HTML…………………………...…………………………. 23
Contoh-contoh:
…………………………...……………………………...… 23
Tag anchor dan atribut
href…………………………...…………………… 24
Atribut
target…………………………...……………………………...……. 24
Tag anchor dan nama atribut…………………………...………………… 25
Contoh-contoh:
…………………………...……………………………...… 26
Tag link dan target:
…………………………...……………………………. 28
9. BINGKAI ( FRAME ) HTML…………………………...…………………… 29
Contoh:
…………………………...……………………………...…………. 29
Frame…………………………...……………………………...…………… 29
Tag untuk
frameset…………………………...……………………………. 30
Tag untuk frame:
…………………………...……………………………... 30
Catatan - tips yang berguna.
…………………………...………………… 30
Contoh-contoh:
…………………………...……………………………...… 31
Tag untuk frame:
…………………………...……………………………... 33
KATA PENGANTAR
Dari
hari ke hari, semakin banyak guru dan siswa yang belajar Internet, baik dalam
hal pemakaian komputer sebagai alat bantu belajar ataupun menggunakan komputer
sebagai object untuk belajar.
Komputer
sebagai object belajar dapat dibagi dalam beberapa kelompok diantaranya adalah
pengetahuan tentang perangkat keras (hardware) dan tentang perangkat lunak
(software). Mempelajari perangkat lunak merupakan kegiatan yang tidak ada
habisnya, dari hari ke hari, selalu saja muncul sesuatu yang baru. Secara umum
pembelajaran perangkat lunak dapat kita bagi dalam 3 kategori yakni : Pengguna
software Aplikasi (Operator), Pembuat program pengolahan (Programmer),
Penyaji Imformasi ke World Wide Web (Web master).
Pada
kesempatan ini penyajian imformasi ke World Wide Web menjadi topik pembahasan
utama. Untuk menyajikan informasi dibutuhkan suatu keahlian khusus, dimana
informasi yang akan disampaikan harus ditata sedemikian rupa supaya public
tertarik dan punya motivasi untuk menyimak informasi yang disampaikan. Media
utama yang dipakai sebagai jendela informasi adalah layar komputer yang
dikontrol atau dikendalikan oleh berbagai merek dan jenis komputer yang berbeda
operating systemnya. Tetapi Web master mengharapkan agar informasi yang
disajikan dapat dilihat sesuai dengan hasil rancangannya, dimana saja dengan
komputer jenis apapun.
Untuk tujuan tersebuat dirancang salah satu bahasa
pengantar pemrograman untuk Internet yang diberi nama Hyper Text Markup
Language disingkat dengan HTML. Dengan menggunakan bahasa ini didukung oleh
fasilitas dan perangkat komunikasi, maka koneksi antar komputer dapat terwujut.
Sarana komunikasi tersebut menggunakan standart komunikasi yang dinamakan
HTTP. Dengan HTTP semua komputer dalam Web dapat
berkomunikasi satu sama lainnya, sehingga jarak dan waktu tidak lagi menjadi
hambatan untuk memperoleh informasi yang telah tersedia pada komputer server
(pelayanan).
Bila Anda ingin menjadi seorang Web master maka,
diharuskan untuk memahami pemrograman dengan HTML. Supaya dikemudian hari Anda dapat
mengendalikan dan mengatur Web site yang Anda buat. Web site yang baik adalah
Web site yang dinamis yakni yang dapat berinteraksi dengan pengunjungnya
(user/Quest). Membuat Web site dinamis maka harus berurusan dengan HTML.
Mengapa dan bagaimana menggunakannya? Ikuti seluruh
sajian berikut ini. Buku On-line ini
disusun sedemikian rupa, dilengkapi dengan sejumlah contoh-contoh source
program yang dapat dibuka dan di jalankan. Sehingga untuk penulisan program dapat
menghemat waktu.
Bandung Juni 2001
Penulis,
Binsar Siagian.
BAB 1
World Wide Web.
A. Pertanyaan dan jawaban singkat tentang World
Wide Web
1. Apa yang dimaksud dengan World Wide Web?
§ World Wide
Web (WWW) biasanya disebut sebagai Web.
§ Web adalah
sebuah jaringan komputer (network) yang terdapat diseluruh dunia.
§ Semua
komputer dalam Web dapat berkomunikasi satu sama lainnya.
§ Semua
komputer menggunakan standart komunikasi yang dinamakan HTTP.
2. Bagaimana WWW bekerja?
§ Informasi
Web disimpan dalam dokumen disebut Web pages.
§ Web pages adalah
file yang disimpan pada komputer disebut Web
servers
§ Komputer
pembaca Web pages disebut Web clients
§ Web
clients menampilkan page dengan program disebut sebagai Web Browser.
§ Browser
yang populer diantaranya adalah Internet
Explorer dan Netscape Navigator.
3. Bagaimana caranya browser menjemput pages ?
§ Browser
menjemput sebuah Web page dari sebuah server dengan menggunakan request (permintaan).
§ Sebuah
request adalah standart dari permintaan HTTP yang berisi sebuah page address.
§ Sebuah
page address diperlihatkan seperti bentuk berikut ini: http://www..tedcbandung.com/index.htm.
4. Bagaimana caranya browser menampilkan pages ?
§ Didalam
semua Web page terdapat instruksi atau
perintah-perintah yang berfungsi untuk
menampilkan isinya.
§ Browser
menampilkan isi page dengan membaca instruksi baris per baris.
§ Instruksi
untuk menampilkan pada umumnya disebut HTML
tags.
§ Contoh HTML tags seperti berikut : <p>Ini sebuah Paragraph</p>.
5. Siapa yang membuat Standart Web ?
§ Pembuat
Standart Web bukan Netscape atau Microsoft.
§ Pembuat
aturan body (kerangka) Web adalah W3C.
§ Pendiri
W3C adalah World Wide Web Consortium.
§ W3C
membuat spesifikasi untuk standart Web
secara bersama-sama.
§ Standart
Web yang terpenting dan umum adalah HTML, CSS and XML.
§ Standart
HTML yang terbaru adalah XHTML 1.0.
B. Pertanyaan dan jawaban lengkap tentang World
Wide Web
1. Bagaimana cara kerja World Wide Web ?
§ World Wide
Web adalah koleksi informasi yang sangat luas, itu dihasilkan dari ratusan ribu
komputer dari seluruh dunia. Bila Anda mengakses dokumen dari Web, maka banyak
pandangan yang melatarbelakanginya.
Disini akan diuraikan deskripsi sederhana tetang pandangan tersebut.
§ World Wide
Web adalah sebuah jaringan yang terdiri dari ribuan komputer, semuanya itu dikelompokkan menjadi dua
kategori yakni: clients and servers. Melalui penggunaan software
khusus mereka dapat dibentuk menjadi satu jenis jaringan yang disebut “a client-server network” ini bukan sesuatu yang mengherankan.
§ Servers menyimpan informasi dan
melakukan proses permintaan clients.
Kemudian server mengirimkan permintaan informasi ke clients. Informasi ini
terdiri dari berbagai jenis data diantaranya, images, sounds, dan text. Server juga mengirimkan
instruksi-instruksi cara menampilkan informasi ke client. Instruksi ini
dikirimkan dalam bentuk format “Hypertext Markup Language” (HTML).
§ Clients membuat permintaan untuk Informasi dan juga
mengambil alih tugas untuk menampilkan Informasi ke layar komputer. Bila Anda
menggunakan sebuah Web browser untuk
menuntun ke Web, maka software browser akan berperan sebagai sebuah client.
§ World Wide
Web adalah sebuah jaringan distribusi (distributed network). Artinya
tidak ada komputer pusat (central) untuk World Wide Web. Beberapa server pada
Web dapat diakses secara langsung melalui sebuah client. Bila sebuah server
pada World Wide Web mengalami kegagalan pemakaian (tidak berfungsi), itu bukan
berarti efek dari perbuatan dari server
lain.
§ Pemakai
mengendalikan World Wide Web melalui penggunaan hubungan hypertext (hypertext
links). Bila Anda memilih atau meng-click pada sebuah hypertext link, itu
artinya Anda pergi ke area lain pada Internet. Hampir semua dokumen dalam Web
terhubung melalui penggunaan hypertext
links.
§ Kebanyakan
dokumen pada World Wide Web ditulis dalam bentuk Hypertext Markup Language
(HTML). HTML menyediakan instruksi-instruksi untuk software client dalam hal
bagaimana dokumen tersebut akan di displaykan. HTML juga memiliki
informasi tentang bagaimana
menyambungkan sebuah dokumen ke dokumen lainnya pada Web.
2. Bagaimana URLs bekerja?
§ Hampir
semua item informasi pada World Wide Web dapat diakses secara langsung. Itu
disebabkan oleh setiap dokumen, file, dan image, telah memiliki alamat yang
spesifik. Alamat ini disebut sebagai Uniform Resource Locators (URLs).
URLs digunakan oleh software Web browsing untuk menuju lokasi dan meng-akses
informasi pada World Wide Web. Cara berpikir dari URLs sebagai penunjuk
pengalamatan untuk Internet.
§ Gambar
1-1: Penulisan Alamat Web
§ Bagian
pertama dari URL disebut sebagai protocol.
Biasanya ditulis dengan http://,
yakni singkatan dari Hypertext Transfer Protocol. Beberapa URLs dimulai dengan
protocol yang berbeda seperti ftp://
atau news://. Bila Anda
meng-akses sebuah dokumen dari hard disk local melalui Web maka URL akan
dimulai dengan tulisan file://.
§ Bagian
kedua dari URL (www.zdnet.com)
disebut sebagai domain name.
Bila Anda sudah pernah menggunakan e-mail pada Internet, besar kemungkinan hal ini sudah anda ketahui. Domain
menggambarkan nama dari server yang akan anda sambungkan / hubungi.
§ Bagian
ketiga dari URL (~zdi/software/win95)
disebut sebagai directory path.
Ini menunjukkan area spesifik pada server dimana item tersebut ditempatkan.
Directory paths pada Web servers bekerja
seperti pada hard disk di komputer desktop Anda. Untuk menuju lokasi tempat file pada server, pertama sekali anda
harus mengindikasikan direktorynya.
§ Bagian
keempat dari URL (utils.html)
disebut sebagai document file
name. Ini mengindikasikan file
yang akan diakses. Biasanya bentuk filenya adalah HTML, tetapi kadang-kadang
dapat juga berupa sebuah image , sound, atau file bentuk lainnya.
§ Kadang-kadang
URL memiliki bagian kelima (#WINZIP)
disebut sebagai anchor name. Ini penunjuk ke bagian tertentu pada bagian dalam dokumen HTML. Dia selalu
didahului dengan tanda pagar (#).
Anchors sangat berguna dalam pengelolaan
dokumen yang besar.
3. Bagaimana menggunakan sebuah Web Browser ?
Web browser Anda adalah pintu gerbang Anda untuk menuju World Wide Web.
Browser adalah software client yang mengizinkan Anda untuk mengakses dan
menampilkan beberapa dokumen pada Web. Ada beberapa macam Web browser, yang
mungkin berkembang dan bertambah setiap tahunnya. Bila anda selalu menggunakan
Web ada baiknya untuk selalu memperbaharui software sesuai dengan
perkembangannya. Berbeda Web browser berarti ada perbedaan kemampuan dan
masing-masing akan menampilkan halaman dengan berbagai variasi. Pada kesempatan
ini kita akan menggunakan Web browser dari Microsoft yakni
Internet Explorer
versi 5.00 salah satu browser yang populer saat ini disamping browser lain,
misalnya
Netscape atau
Opera.
Mengenal HTML
A. Pertanyaan dan jawaban singkat tentang File HTML
·
HTML adalah singkatan dari Hyper Text Markup Language.
·
Sebuah file HTML terdiri dari file Text yang
ditambahkan dengan tag (tanda
pengenal).
·
Penambahan tanda pengenal (tag) untuk
memberitahukan Web Browser, bagaimana cara menampilkan page.
·
Penyimpanan (save) sebuah file HTML harus
menggunakan extension htm atau html.
·
File HTML dapat dibuat dengan menggunakan text
editor seperti Notepad.
Bila
Anda menggunakan Windows, jalankan Notepad dan tulis baris teks berikut ini,
kemudian simpan (Save As) pada folder “C:\BelajarHTML\Sample” dengan nama file “latihan2_1.html” !
<html>
<head>
<title>Judul page</title>
</head>
<body>
Ini adalah homepage Saya yang pertama.
<b>Tulisan ini menggunakan bold</b>
</body>
</html> |
Jalankan
Internet Browser.
Pilih
menu “File” kemudian “Open”, dialog Box akan muncul.
Pilih
“Browse” dialog Box Internet
Explorer muncul, double click folder “BelajarHTML”
double click folder “Sample”
kemudian pilih file “latihan2_1.htm”
dan click “Open”.
Sekarang Anda dapat melihat sebuah alamat pada dialog box,
seperti contoh “C:\BelajarHTML\Sample\latihan2_1.html”.
Klick “OK” dan kemudian Browser akan
menampilkan page hasil program.
| Ini adalah homepage Saya yang pertama. Tulisan ini menggunakan bold |
Tag yang pertama pada dokumen HTML Anda adalah <html>. Tag ini memberitahukan Browser bahwa ini tanda
start (awal) sebuah dokumen HTML. Tag yang terakhir pada dokumen Anda adalah </html>. Tag ini memberitahukan
Browser bahwa ini tanda akhir (end) dari dokumen HTML.
Tulisan diantara tag <head>
dan tag </head> adalah
informasi judul. Informasi judul tidak
ditampilkan pada window browser.
Tulisan diantara tag <body>
dan tag </body> adalah
Informasi yang akan ditampilkan pada window browser.
Tulisan diantara tag <title>
dan tag </title> adalah judul
dari dokumen Anda. Informasi ini yang akan ditampilkan pada Caption browser.
Tulisan diantara tag <b>
dan tag </b> akan ditampilkan
dengan font Bold.
Anda dapat mengedit HTML dengan menggunakan Editor WYSIWYG (what you see is what you get)
seperti FrontPage, Claris Home Page atau Adobe PageMill yang langsung akan
membuatkan tag pada file plain text.
Tetapi bila Anda ingin menjadi Web Developer yang terampil,
Saya anjurkan Anda untuk memulai belajar lewat plain text, dalam penulisan
sebuah file HTML. Karena dalam pembuatan page yang dinamis Editor HTML diatas
tidak dapat berbuat banyak untuk membantu Anda.
1. Setelah
saya melakakukan edit pada sebuah file HTML, Saya tidak dapat melihat hasil
pada Browser, mengapa ?
J: Pastikan
bahwa Anda menyimpan (save) file dengan nama dan extension yang benar. Misalnya
: “C:\BelajarHTML\Sample\
latihan1_1.html”. Kemudian pastikan bahwa Anda memanggil file yang Anda simpan
tadi saat membuka lewat Browser.
2. Saya
mencoba melakakukan perubahan (edit) pada sebuah file HTML, ketika Browser Saya
jalankan tidak ada hasil perubahan pada Browser, mengapa ?
J: Browser
menggenggam page Anda, sehingga dia tidak pernah melakukan dua kali pembacaan
file yang sama. Bila Anda melakukan penggantian pada page Browser tidak
mengetahui hal itu. Gunakan tombol Refresh/reload
untuk memaksa Browser membaca file page hasil edit.
3. Bolehkah
Saya menggunakan Internet Explorer dan Netscape Navigator dengan file yang sama
?
J: Ya,
Anda dapat menggunakannya dalam latihan ini dengan Internet Explorer 4.0 atau
Netscape Navigator 4.0 atau yang terbaru. Walaupun dalam beberapa contoh kita
berasumsi bahwa Anda menggunakan Internet Explorer 4.0 atau 5.0. Karena ada
kelemahan dari Netscape untuk mendukung standard Web yang baru.
4. Komputer
Saya kebetulan menggunakan Windows, bagaimana bila menggunakan Macintosh (Mac)
?
J: Anda
dapat menggunakannya dalam latihan ini, Walaupun bukan menggunakan Windows misalnya
Mac. Tetapi untuk beberapa contoh program kita mengasumsikan Anda menggunakan
Windows 98 atau Windows 2000.
Elemen
- elemen HTML
Dokumen HTML terdiri dari File Text yang dibuat dengan
berbagai elemen (unsur/dasar) HTML.
Elemen-elemen HTML didefenisikan dengan menggunakan
berbagai Tag
- Tag HTML digunakan untuk
memberikan tanda pada elemen HTML
- Tag HTML diapit oleh tanda dengan
dua buah karakter < and >
- Diantara dua karakter yang diapit
disebut sebagai “angle brackets”
- Biasanya Tag HTML terdiri dari
sepasang tanda seperti <b> dan </b>
- Tag yang pertama dari pasangan
tersebut adalah “start tag”, dan yang kedua adalah “end
tag”.
- Tulisan (text) diantara start dan
end tags adalah “element content”.
- Tag HTML tidak mempermasalahkan
huruf besar atau kecil <b> artinya sama dengan <B>
Ingat contoh HTML dari halaman
sebelumnya :
<html>
<head>
<title>Judul page</title>
</head>
<body>
Ini adalah homepage Saya yang pertama.
<b>Tulisan ini menggunakan bold</b>
</body>
</html> |
Ini contoh elemen HTML :
<b>Tulisan ini menggunakan bold</b>
|
Elemen HTML dimulai
dengan sebuah start tag: <b>
Content atau Isi dari elemen HTML adalah: Tulisan ini menggunakan bold
Elemen HTML diakhiri dengan sebuah end tag: </b>
Kegunaan dari tag <b> adalah untuk mendefenisikan sebuah elemen
HTML supaya mendisplaykannya sebagai tulisan tebal (bold).
Ini juga sebuah elemen
HTML:
<body>
Ini adalah homepage Saya yang pertama.
<b>Tulisan ini menggunakan bold</b>
</body> |
Elemen HTML dimulai dengan sebuah
start tag: <body> dan
diakhiri dengan sebuah
end tag: </body>
Kegunaan dari tag
<body> adalah untuk mendefenisikan
sebuah elemen HTML bahwa dianya (tubuhnya) mengandung dokumen HTML.
Diatas kita menyebutkan
Tag HTML tidak mempermasalahkan huruf besar atau kecil <b> artinya
sama dengan <B>.
Bila Anda mengamati Web,
Anda akan memberikan catatan bahwa kebanyakan contoh menggunakan tag dengan
huruf besar. Kita selalu menggunakan huruf kecil , mengapa?
Bila kita mempersiapkan
diri untuk generasi HTML yang berikutnya, maka kita harus membiasakan diri
dengan menggunakan tag dengan huruf kecil. World Wide Web Consortium (W3C)
merekomendasikan huruf kecil untuk HTML4 dan juga untuk XHTML
(generasi berikutnya dari HTML)
Tag dapat memiliki atribut. Atribut dapat memberikan
informasi tambahan tentang elemen HTML pada page Anda.
Tag ini mendefenisikan elemen body dari page HTML Anda: <body>. Dengan
menambahkan sebuah atribut bgcolor, Anda dapat memberitahukan Browser, bahwa
warna latar belakang (background color) dari page Anda akan diubah menjadi
merah seperti :
<body
bgcolor="red">.
Tag ini mendefenisikan sebuah tabel HTML : <table>.
Dengan menambahkan sebuah atribut border(batas), Anda dapat memberitahukan
Browser, bahwa tabel dibuat tanpa tanda: <table
border=”0”>
Atribut selalu dibuat dalam bentuk pasangan seperti ini :
name=”value”.
Atribut selalu ditambahkan pada bagian start tag dalam sebuah
elemen HTML.
Nilai atribut selalu diapit oleh dua tanda kutip. Biasanya
digunakan tanda kutip ganda ( “ )
tetapi yang single ( ‘ ) pun dapat
digunakan.
Pada beberapa kondisi tertentu (janggal), seperti bila nilainya
sendiri memiliki tanda kutip, biasanya kita gunakan tanda kutip tunggal,
seperti contoh dibawah ini :
Name=’Binsar “bermarga” Siagian’
Dasar – dasar Tag HTML
Bagian terpenting
dari tag HTML adalah tag yang mendefenisikan Headings,
paragraphs dan line
breaks.
Cara yang terbaik untuk belajar HTML adalah dengan cara
mencoba Contoh-contoh. Saya sudah
mempersiapkan beberapa contoh yang dapat Anda coba seperti cara-cara yang telah
dijelaskan pada halaman sebelumnya.
Contoh
programnya sudah tersedia pada Disket Latihan. Dengan adanya file-file ini maka
diharapkan Anda dapat bekerja dan mencoba lebih praktis dan cepat.
File
aslinya dibuat dengan extension “namafile.txt”, dengan maksud bila Anda
melakukan perubahan, maka yang Anda ubah adalah pada file HTML.
Oleh sebab itu
langkah pertama adalah Open file Asli dan Save menjadi file HTML dan kemudian
Anda dapat melakukan perubahan.
Dokumen HTML yang sangat sederhana
Contoh ini adalah sebuah dokumen HTML yang sangat sederhana, dengan jumlah
tag yang minimal.
Contoh ini mendemonstrasikan, bagaimana sebuah text yang diapit oleh elemen
body ditampilkan pada browser.
(Buka file Latihan
4-1.txt dan simpan dengan nama latihan4_1.html, Open file “latihan4_1.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
<html>
<body>
Tulisan yang
diapit oleh elemen body ditampilkan pada browser.
</body>
</html> |
Paragraph
Contoh ini adalah sebuah dokumen HTML yang mendemonstrasikan, bagaimana
tampilan sebuah tulisan yang diapit
oleh elemen paragraph <p> </p>.
HTML akan secara otomatis menambahkan satu baris kosong sebelum dan sesudah
heading.
(Buka file Latihan
4-2.txt dan simpan dengan nama latihan4_2.html, Open file “latihan4_2.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
<html>
<body>
<p>Ini sebuah paragraph baris
1.</p>
<p>Ini sebuah paragraph baris
2.</p>
<p>Ini sebuah paragraph baris
3.</p>
<p>Elemen-elemen Paragraph
didefenisikan dengan tag p.</p>
</body>
</html>
|
Heading didefenisikan dengan tag <h1> sampai <h6>. <h1>
mendefenisikan heading yang terbesar, dan <h6> mendefenisikan heading
yang terkecil.
HTML akan secara otomatis menambahkan satu baris kosong sebelum dan sesudah
heading.
(Buka file Latihan
4-3.txt dan simpan dengan nama latihan4_3.html, Open file “latihan4_3.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
<html>
<body>
<h1> Ini contoh dari sebuah heading
1</h1>
<h2> Ini contoh dari sebuah heading
2</h2>
<h3> Ini contoh dari sebuah heading
3</h3>
<h4> Ini contoh dari sebuah heading
4</h4>
<h5> Ini contoh dari sebuah heading
5</h5>
<h6> Ini contoh dari sebuah heading
6</h6>
<p>Gunakan tag heading hanya untuk
Heading, jangan gunakan untuk membuat tuliasan supaya menjadi besar. Gunakan tag
yang lain untuk keperluan itu.</p>
</body>
</html>
|
Tag <br> akan digunakan apabila Anda menginginkan mangakhiri baris,
seperti layaknya menekan tombol Enter, tetapi tidak menginginkan sebuah paragraph
yang baru. Tag <br> memaksa memutus baris bila Anda menempatkannya dimana
saja diantara text.
Contoh:
| <p>This <br> is a para<br>graph with line
breaks</p> |
Tag <br> merupakan
tag tunggal tidak ada tanda penutupnya.
(Buka file Latihan
4-4.txt dan simpan dengan nama latihan4_4.html, Open file “latihan4_4.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
<html>
<body>
<p>
Untuk memotong
<br>baris<br>dalam sebuah<br>paragraph<br>gunakan tag
br.
</p>
</body>
</html>
|
Tag komentar digunakan untuk memasukkan catatan-catatan programmer pada
source code HTML. Sebuah komentar tidak akan diproses oleh browser. Anda dapat
menggunakan catatan untuk menjelaskan arti dari sekelompok program, yang dapat
membantu Anda untuk memahami seluruh isinya bila dikemudian hari diperlukan
perbaikan atau pengembangan.
Contoh:
| <!--Ini contoh tag
untuk komentar atau catatan --> |
Bila Anda menulis text
HTML, Anda tidak akan tahu persis bagaimana hasilnya bila ditampilkan dengan
browser lain. Karena ada orang yang memiliki display yang besar, dan ada juga
yang kecil. Apabila dilakukan pengubahan
ukuran Window maka saat itu juga akan dilakukan format ulang tampilan. Jangan
melakukan pengaturan pada layar komputer Anda dengan menambahkan baris kosong
atau spasi dalam text.
HTML akan memotong spasi yang ada dalam text Anda. Banyak spasi
diatara kata dianggab menjadi satu spasi kosong dan dalam satu baris kosong
yang memiliki banyak spasi dianggab hanya satu spasi kosong.
Menggunakan paragraph
kosong dengan tag <p></p> untuk menyisipkan baris kosong
adalah cara yang kurang baik. Lebih baik Anda menggunakan tag <br>. (Tetapi
jangan menggunakan tag <br> untuk membuat daftar atau list, tunggu sampai
Anda belajar tentang list pada HTML.)
Mungkin sekarang
Anda akan mempunyai catatan bahwa
paragraph dapat ditulis tanpa menutup tag </p>.
Jangan mempercayai hal
itu. Versi berikutnya dari HTML tidak akan mengijinkan Anda melompati atau
mengabaikan tag penutup.
HTML akan secara otomatis
menambahkan baris kosong sebelum dan sesudah elemen, seperti sebelum dan
sesudah paragraph, dan sebelum dan sesudah sebuah heading.
Kita menggunakan
penggaris (rule) horizontal ( tag <hr>), untuk memisahkan section pada
latihan kita.
1. Paragraph dengan
banyak spasi
Contoh ini
mendemonstrasikan beberapa default untuk elemen paragraph. (Buka file Latihan
4-5.txt dan simpan dengan nama latihan4_5.html, Open file “latihan4_5.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
2. Sulitnya
mengatur Penulisan Puisi
Contoh ini
mendemonstrasikan beberapa problem dengan format HTML. (Buka file Latihan
4-6.txt dan simpan dengan nama latihan4_6.html, Open file “latihan4_6.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
3. Membuat posisi
center untuk heading
Contoh ini
mendemonstrasikan cara menempatkan Heading di posisi Center. . (Buka file Latihan
4-7.txt dan simpan dengan nama latihan4_7.html, Open file “latihan4_7.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
4. Horizontal Rule
Contoh ini
mendemonstrasikan cara menempatkan garis horizontal diantara baris text. .
(Buka file Latihan 4-8.txt dan simpan dengan nama latihan4_8.html, Open
file “latihan4_8.html” lewat Browser, kemudian GO, perhatikan
hasilnya pada window browser!).
5. Catatan atau
Hidden Comment
Contoh ini
mendemonstrasikan cara menempatkan catatan dalam Source code HTML. . (Buka file
Latihan 4-9.txt dan simpan dengan nama latihan4_9.html, Open file
“latihan4_9.html” lewat Browser, kemudian GO, perhatikan hasilnya
pada window browser!).
6. Warna latar
belakang (background)
Contoh ini
mendemonstrasikan cara mengubah warna background dari sebuah page HTML. . (Buka
file Latihan 4-10.txt dan simpan dengan nama latihan4_10.html, Open
file “latihan4_10.html” lewat Browser, kemudian GO, perhatikan
hasilnya pada window browser!).
NN: Netscape, IE:
Internet Explorer, W3C: Web Standard
Start Tag
|
NN
|
IE
|
W3C
|
Purpose
|
|
|
3.0
|
3.0
|
3.2
|
Defines a html document
|
|
|
3.0
|
3.0
|
3.2
|
Defines the documents' body
|
|
|
3.0
|
3.0
|
3.2
|
Defines heading 1 to heading 6
|
|
|
3.0
|
3.0
|
3.2
|
Defines a paragraph
|
|
|
3.0
|
3.0
|
3.2
|
Inserts a single line break
|
|
|
3.0
|
3.0
|
3.2
|
Defines a horizontal rule
|
|
|
3.0
|
3.0
|
3.2
|
Defines a comment in the HTML source code
|
Memformat Text HTML
HTML mendefenisikan banyak elemen untuk melakukan format output, seperti
bold atau text Italic.
Dibawah ini sejumlah contoh yang dapat Anda coba sendiri.
1. Memformat Text.
Contoh ini
mendemonstrasikan cara memformat text dalam sebuah dokumen HTML. . (Buka file Latihan
5-1.txt dan simpan dengan nama latihan5_1.html, Open file “latihan5_1.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
2. Memformat Text dengan tag <pre>. (Preformatted text)
Contoh ini
mendemonstrasikan cara, bagaimana Anda supaya dapat mengendalikan line break
dan space dengan tag <pre>. Sehingga yang tampil dilayar persis seperti
yang Anda susun pada text Editor. (Buka file Latihan 5-2.txt dan simpan
dengan nama latihan5_2.html, Open file “latihan5_2.html” lewat
Browser, kemudian GO, perhatikan hasilnya pada window browser!).
3. Memformat Text dengan tag “Computer output”
Contoh ini
mendemonstrasikan bagaimana perbedaan tag “computer output”. Untuk dapat
membedakan tulisan listing program komputer (Buka file Latihan 5-3.txt
dan simpan dengan nama latihan5_3.html, Open file “latihan5_3.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
4. Memformat Text dengan bentuk alamat
Contoh ini
mendemonstrasikan bagaimana bentuk penulisan untuk alamat seseorang dalam
dokumen HTML. (Buka file Latihan 5-4.txt dan simpan dengan nama latihan5_4.html,
Open file “latihan5_4.html” lewat Browser, kemudian GO,
perhatikan hasilnya pada window browser!).
5. Memformat Text dengan bentuk singkatan (Abbreviations and acronyms)
Contoh ini
mendemonstrasikan bagaimana cara penulisan untuk Singkatan atau persamaan.
(Buka file Latihan 5-5.txt dan simpan dengan nama latihan5_5.html, Open
file “latihan5_5.html” lewat Browser, kemudian GO, perhatikan
hasilnya pada window browser!).
6. Memformat Text dengan “text direction”
Contoh ini
mendemonstrasikan bagaimana cara mengubah arah penulisan text. (Buka file Latihan
5-6.txt dan simpan dengan nama latihan5_6.html, Open file “latihan5_6.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
7. Memformat Text dengan “Quotations”
Contoh ini
mendemonstrasikan bagaimana cara mengubah posisi Indent text. (Buka file Latihan
5-7.txt dan simpan dengan nama latihan5_7.html, Open file “latihan5_7.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
Dengan block elemen
quote, browser menyisipkan line break dan margin, tetapi elemen q tidak
mengubah (render) sesuatu menjadi
sesuatu yang khusus.
8. Memformat Text dengan cara Menghapus dan menyisipkan Text.
Contoh ini
mendemonstrasikan bagaimana cara memberikan tanda ke subuah text yang akan
dihapus atau disisipkan dalam sebuah dokumen. (Buka file Latihan 5-8.txt
dan simpan dengan nama latihan5_8.html, Open file “latihan5_8.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
Pernahkah Anda
melihat sebuah Web page yang luarbiasa
dan,” Bagaimana mereka membuatnya ?”. Untuk melihatnya, sangat sederhana, click
option View pada toolbar browser Anda dan pilih SOURCE atau PAGE SOURCE. Tindakan ini akan membuka
sebuah window yang memperlihatkan kepada kita actual HTML dari page tersebut.
Ingat !, Anda dapat
menyimpan source file, dan menggunakannya sebagai sebuah template untuk Web
page milik Anda.
NN: Netscape, IE: Internet Explorer, W3C:
Web Standard
Start Tag
|
NN
|
IE
|
W3C
|
Purpose
|
|
|
3.0
|
3.0
|
3.2
|
Defines bold text
|
|
|
3.0
|
3.0
|
3.2
|
Defines big text
|
|
|
3.0
|
3.0
|
3.2
|
Defines emphasized text
|
|
|
3.0
|
3.0
|
3.2
|
Defines italic text
|
|
|
3.0
|
3.0
|
3.2
|
Defines small text
|
|
|
3.0
|
3.0
|
3.2
|
Defines strong text
|
|
|
3.0
|
3.0
|
3.2
|
Defines subscripted text
|
|
|
3.0
|
3.0
|
3.2
|
Defines superscripted text
|
|
|
|
4.0
|
4.0
|
Defines inserted text
|
|
|
|
4.0
|
4.0
|
Defines deleted text
|
<s>
|
|
|
|
Deprecated. Use <del> instead
|
<strike>
|
|
|
|
Deprecated. Use <del> instead
|
<u>
|
|
|
|
Deprecated. Use styles instead
|
Start Tag
|
NN
|
IE
|
W3C
|
Purpose
|
|
|
3.0
|
3.0
|
3.2
|
Defines computer code text
|
|
|
3.0
|
3.0
|
3.2
|
Defines keyboard text
|
|
|
3.0
|
3.0
|
3.2
|
Defines sample computer code
|
|
|
3.0
|
3.0
|
3.2
|
Defines teletype text
|
|
|
3.0
|
3.0
|
3.2
|
Defines a variable
|
|
|
3.0
|
3.0
|
3.2
|
Defines preformatted text
|
<listing>
|
|
|
|
Deprecated. Use <pre> instead
|
<plaintext>
|
|
|
|
Deprecated. Use <pre> instead
|
<xmp>
|
|
|
|
Deprecated. Use <pre> instead
|
Start Tag
|
NN
|
IE
|
W3C
|
Purpose
|
|
|
|
|
4.0
|
Defines an abbreviation
|
|
|
|
4.0
|
4.0
|
Defines an acronym
|
|
|
4.0
|
4.0
|
3.2
|
Defines an address element
|
|
|
|
|
4.0
|
Defines the text direction
|
|
|
3.0
|
3.0
|
3.2
|
Defines a long quotation
|
|
|
|
4.0
|
4.0
|
Defines a short quotation
|
|
|
3.0
|
3.0
|
3.2
|
Defines a citation
|
|
|
|
3.0
|
3.2
|
Defines a definition term
|
HTML Character Entities
Beberapa karakter
seperti tanda lebih kecil ( < ) ,
memiliki arti tersendiri dalam HTML, oleh sebab itu tidak dapat digunakan
didalam penulisan text.
Untuk mendisplaykan tanda
lebih kecil (<) dalam HTML, kita harus menggunakan “entity” karakter .
Beberapa karakter ada
yang mempunyai arti tersendiri dalam HTML, seperti tanda lebih kecil ( < ), memiliki arti
start
tag dalam HTML. Bila kita menginginkan browser menampilkan tanda < kita
harus menyisipkan karakter entity didalam source HTML.
Karakter entity terdiri
dari tiga macam yakni sebuah ampersand (&), sebuah nama entity atau sebuah
tanda # dan sebuah entity number, dan
yang terakhir sebuah tanda semicolon ( ; ).
Untuk menampilkan tanda
lebih kecil pada dokumen HTML kita harus menulis : < atau <.
Keuntungan dari penggunaan nama singkatan lebih mudah mengingatnya dari pada
urutan angka kodenya. Kerugiannya tidak semua browser mendukung penggunaan
singkatan yang baru, sedangkan dengan penggunaan nomor code semua browser dapat
menjalankannya.
Catatan tanda-tanda ini
sangat sensitip
Contoh berikut ini
memperlihatkan untuk Anda cara pemakaian “character entities”
(Buka file Latihan
6-1.txt dan simpan dengan nama latihan6_1.html, Open file “latihan6_1.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
Seluruh “
character
entity” dalam penulisan program HTML adalah bersifat “non-breaking space” yakni
tidak ada pemotongan spasi diantara text yang ditulis.
Biasanya HTML akan
memotong spasi yang terdapat pada text seperti yang telah dijelaskan
sebelumnya, yakni bila Anda tulis 10 spasi dalam text HTML maka Browser akan
membuang 9 spasi dari padanya. Untuk menambahkan spasi yang tetap pada tampilan
browser maka Anda harus menggunakan   yakni character entity (
Non-
breaking
Space)
Berikut ini disajikan sejumlah tabel
yang berhubungan dengan “
character entity” yang dapat digunakan sesuai keperluan.
Result
|
Description
|
Entity Name
|
Entity Number
|
|
non-breaking space
|
|
 
|
<
|
less than
|
<
|
<
|
>
|
greater than
|
>
|
>
|
&
|
ampersand
|
&
|
&
|
"
|
quotation mark
|
"
|
"
|
'
|
apostrophe
|
|
'
|
Result
|
Description
|
Entity Name
|
Entity Number
|
¢
|
cent
|
¢
|
¢
|
£
|
pound
|
£
|
£
|
¥
|
yen
|
¥
|
¥
|
§
|
section
|
§
|
§
|
©
|
copyright
|
©
|
©
|
®
|
registered trademark
|
®
|
®
|
×
|
multiplication
|
×
|
×
|
÷
|
division
|
÷
|
÷
|
Character entities yang
lebih lengkap, dijelaskan pada bagian berikutnya yakni HTML 4.01 Entities Reference.
Entities Reference untuk HTML 4.01
HTML 4.01 mendukung ISO
8859-1 yakni karakter set untuk Latin-1.
Bagian terendah dari ISO
8859-1 ( kode dari 0-127) adalah standart original (asli) dari kode ASCII 7
bit. Semua karakter ini dapat digunakan tanpa sebuah Character reference.
Bagian tertinggi dari ISO
8859-1 ( kode dari 160-225) semuanya akan dapat digunakan dengan memakai nama
“character entity”.
Catatan nama “character
entity” sangat sensitive.
Result
|
Description
|
Entity Name
|
Entity Number
|
"
|
quotation mark
|
"
|
"
|
&
|
ampersand
|
&
|
&
|
<
|
less-than
|
<
|
<
|
>
|
greater-than
|
>
|
>
|
Result
|
Description
|
Entity Name
|
Entity Number
|
|
non-breaking space
|
|
 
|
¡
|
inverted exclamation mark
|
¡
|
¡
|
¤
|
currency
|
¤
|
¤
|
¢
|
cent
|
¢
|
¢
|
£
|
pound
|
£
|
£
|
¥
|
yen
|
¥
|
¥
|
¦
|
broken vertical bar
|
¦
|
¦
|
§
|
section
|
§
|
§
|
¨
|
spacing diaresis
|
¨
|
¨
|
©
|
copyright
|
©
|
©
|
ª
|
feminine ordinal indicator
|
ª
|
ª
|
«
|
angle quotation mark (left)
|
«
|
«
|
¬
|
negation
|
¬
|
¬
|
|
soft hyphen
|
­
|
­
|
®
|
registered trademark
|
®
|
®
|
¯
|
spacing macron
|
¯
|
¯
|
°
|
degree
|
°
|
°
|
±
|
plus-or-minus
|
±
|
±
|
²
|
superscript 2
|
²
|
²
|
³
|
superscript 3
|
³
|
³
|
´
|
spacing acute
|
´
|
´
|
µ
|
micro
|
µ
|
µ
|
¶
|
paragraph
|
¶
|
¶
|
·
|
middle dot
|
·
|
·
|
¸
|
spacing cedilla
|
¸
|
¸
|
¹
|
superscript 1
|
¹
|
¹
|
º
|
masculine ordinal indicator
|
º
|
º
|
»
|
angle quotation mark (right)
|
»
|
»
|
¼
|
fraction 1/4
|
¼
|
¼
|
½
|
fraction 1/2
|
½
|
½
|
¾
|
fraction 3/4
|
¾
|
¾
|
¿
|
inverted question mark
|
¿
|
¿
|
×
|
multiplication
|
×
|
×
|
÷
|
division
|
÷
|
÷
|
Result
|
Description
|
Entity Name
|
Entity Number
|
À
|
capital a, grave accent
|
À
|
À
|
Á
|
capital a, acute accent
|
Á
|
Á
|
Â
|
capital a, circumflex accent
|
Â
|
Â
|
Ã
|
capital a, tilde
|
Ã
|
Ã
|
Ä
|
capital a, umlaut mark
|
Ä
|
Ä
|
Å
|
capital a, ring
|
Å
|
Å
|
Æ
|
capital ae
|
Æ
|
Æ
|
Ç
|
capital c, cedilla
|
Ç
|
Ç
|
È
|
capital e, grave accent
|
È
|
È
|
É
|
capital e, acute accent
|
É
|
É
|
Ê
|
capital e, circumflex accent
|
Ê
|
Ê
|
Ë
|
capital e, umlaut mark
|
Ë
|
Ë
|
Ì
|
capital i, grave accent
|
Ì
|
Ì
|
Í
|
capital i, acute accent
|
Í
|
Í
|
Î
|
capital i, circumflex accent
|
Î
|
Î
|
Ï
|
capital i, umlaut mark
|
Ï
|
Ï
|
Ð
|
capital eth, Icelandic
|
Ð
|
Ð
|
Ñ
|
capital n, tilde
|
Ñ
|
Ñ
|
Ò
|
capital o, grave accent
|
Ò
|
Ò
|
Ó
|
capital o, acute accent
|
Ó
|
Ó
|
Ô
|
capital o, circumflex accent
|
Ô
|
Ô
|
Õ
|
capital o, tilde
|
Õ
|
Õ
|
Ö
|
capital o, umlaut mark
|
Ö
|
Ö
|
Ø
|
capital o, slash
|
Ø
|
Ø
|
Ù
|
capital u, grave accent
|
Ù
|
Ù
|
Ú
|
capital u, acute accent
|
Ú
|
Ú
|
Û
|
capital u, circumflex accent
|
Û
|
Û
|
Ü
|
capital u, umlaut mark
|
Ü
|
Ü
|
Ý
|
capital y, acute accent
|
Ý
|
Ý
|
Þ
|
capital THORN, Icelandic
|
Þ
|
Þ
|
ß
|
small sharp s, German
|
ß
|
ß
|
à
|
small a, grave accent
|
à
|
à
|
á
|
small a, acute accent
|
á
|
á
|
â
|
small a, circumflex accent
|
â
|
â
|
ã
|
small a, tilde
|
ã
|
ã
|
ä
|
small a, umlaut mark
|
ä
|
ä
|
å
|
small a, ring
|
å
|
å
|
æ
|
small ae
|
æ
|
æ
|
ç
|
small c, cedilla
|
ç
|
ç
|
è
|
small e, grave accent
|
è
|
è
|
é
|
small e, acute accent
|
é
|
é
|
ê
|
small e, circumflex accent
|
ê
|
ê
|
ë
|
small e, umlaut mark
|
ë
|
ë
|
ì
|
small i, grave accent
|
ì
|
ì
|
í
|
small i, acute accent
|
í
|
í
|
î
|
small i, circumflex accent
|
î
|
î
|
ï
|
small i, umlaut mark
|
ï
|
ï
|
ð
|
small eth, Icelandic
|
ð
|
ð
|
ñ
|
small n, tilde
|
ñ
|
ñ
|
ò
|
small o, grave accent
|
ò
|
ò
|
ó
|
small o, acute accent
|
ó
|
ó
|
ô
|
small o, circumflex accent
|
ô
|
ô
|
õ
|
small o, tilde
|
õ
|
õ
|
ö
|
small o, umlaut mark
|
ö
|
ö
|
ø
|
small o, slash
|
ø
|
ø
|
ù
|
small u, grave accent
|
ù
|
ù
|
ú
|
small u, acute accent
|
ú
|
ú
|
û
|
small u, circumflex accent
|
û
|
û
|
ü
|
small u, umlaut mark
|
ü
|
ü
|
ý
|
small y, acute accent
|
ý
|
ý
|
þ
|
small thorn, Icelandic
|
þ
|
þ
|
ÿ
|
small y, umlaut mark
|
ÿ
|
ÿ
|
Result
|
Description
|
Entity Name
|
Entity Number
|
Œ
|
capital ligature OE
|
Œ
|
Œ
|
œ
|
small ligature oe
|
œ
|
œ
|
Š
|
capital S with caron
|
Š
|
Š
|
š
|
small S with caron
|
š
|
š
|
Ÿ
|
capital Y with diaeres
|
Ÿ
|
Ÿ
|
ˆ
|
modifier letter circumflex accent
|
ˆ
|
ˆ
|
˜
|
small tilde
|
˜
|
˜
|
|
en space
|
 
|
 
|
|
em space
|
 
|
 
|
|
thin space
|
 
|
 
|
|
zero width non-joiner
|
‌
|
‌
|
|
zero width joiner
|
‍
|
‍
|
|
left-to-right mark
|
‎
|
‎
|
|
right-to-left mark
|
‏
|
‏
|
–
|
en dash
|
–
|
–
|
—
|
em dash
|
—
|
—
|
‘
|
left single quotation mark
|
‘
|
‘
|
’
|
right single quotation mark
|
’
|
’
|
‚
|
single low-9 quotation mark
|
‚
|
‚
|
“
|
left double quotation mark
|
“
|
“
|
”
|
right double quotation mark
|
”
|
”
|
„
|
double low-9 quotation mark
|
„
|
„
|
†
|
dagger
|
†
|
†
|
‡
|
double dagger
|
‡
|
‡
|
‰
|
per mille
|
‰
|
‰
|
‹
|
single left-pointing angle quotation
|
‹
|
‹
|
›
|
single right-pointing angle quotation
|
›
|
›
|
€
|
euro
|
€
|
€
|
™
|
trademark
|
|
™
|
original 7-BIT ASCII standard
Links dalam HTML
HTML menggunakan hyperlink untuk
menyambungkan satu sama lain file dokumen dalam Web
1. Membuat Hyperlink Page
Contoh ini mendemonstrasikan
bagaimana cara membuat link dalam sebuah file HTML. (Buka file Latihan
8-1.txt dan simpan dengan nama latihan8_1.html, Open file “latihan8_1.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
<html>
<body>
<p>
<a href="lastpage.htm"> This text </a> is a link to a page on this Web site.
</p>
<p>
<a href="http://www.microsoft.com/"> This text</a> is a link to a page on the World Wide Web.
</p>
</body>
</html>
|
2. Membuat Hyperlink Image
Contoh ini
mendemonstrasikan bagaimana cara membuat link ke Image file dalam HTML. (Buka
file Latihan 8-2.txt dan simpan dengan nama latihan8_2.html, Open
file “latihan8_2.html” lewat Browser, kemudian GO, perhatikan
hasilnya pada window browser!).
<html>
<body>
<p>
You can also use an image as a link:
<a href="lastpage.htm">
<img border="0"
src="tblNext.bmp" width="65"
height="38"></a>
</p>
</body>
</html>
|
HTML menggunakan tag <a> (anchor) untuk membuat link ke dokumen lain.
Sebuah anchor dapat menunjuk ke beberapa
resource dalam Web diantaranya: sebuah file page HTML, sebuah file
gambar (image), sebuah file suara (sound), sebuah file Video (movie) dan
sebagainya.
Syntax untuk membuat
sebuah anchor:
<a href="url">Text to be displayed</a>
|
Tag <a> digunakan
untuk membuat sebuah anchor link pada form, atribut href digunakan untuk
pengalamatan dokumen yang akan di link, dan kata diantara tanda pembuka dan
penutup anchor akan didisplaykan sebagai tanda hyperlink.
Anchor ini mendefenisikan
link ke tedcbandung.com
<a href="http://www.tedcbandung.com/">Mengunjungi Web TEDC Bandung</a>
|
(Buka file Latihan
8-3.txt dan simpan dengan nama latihan8_3.html, Open file “latihan8_3.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
Dengan atribut target, Anda dapat mendefenisikan kemana dokumen yang telah
di link akan dibuka / ditempatkan.
Baris program dibawah ini akan membuka dokumen pada window browser yang
baru.
<a href=" http://www.tedcbandung.com/"
target="_blank"> Mengunjungi Web TEDC Bandung!</a>
|
(Buka file Latihan
8-4.txt dan simpan dengan nama latihan8_4.html, Open file “latihan8_4.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
Nama atribut digunakan untuk membuat nama sebuah anchor. Bila menggunakan
nama anchor kita dapat membuat link (seperti menu pada halaman yang sama) yang
dapat meloncat langsung ke lokasi tujuan (specified section). Sehingga kita
tidak membiarkan pemakai menggunakan scroll untuk mencari dan menemukan
informasi lengkap dari section yang diharapkan sesuai dengan judul yang
dipilih.
Syntax untuk sebuah nama
anchor:
<a name="label">Text to be displayed</a>
|
Nama atribut digunakan
untuk membuat nama Anchor. Pemberian nama anchor dapat berupa text yang Anda
inginkan.
Baris program dibawah mendefenisikan nama sebuah anchor
<a name="tips">Read the Useful Tips section</a>
|
Anda harus memperhatikan
bahwa nama anchor tidak ditampilkan pada display secara khusus.
Untuk link nama anchor
Anda harus menambahkan tanda # dan nama anchor pada bagian akhir dari URL,
seperti berikut ini:
<a href="http:// www.tedcbandung.com/html_links.html#tips">
Baca tips Internet yang disajikan!</a>
|
Baris diatas akan membawa
pemakai (user) langsung ke lokasi text yang mempunyai nama anchor <a
name="tips">... </a> dalam file “html_links.html”.
Hyperlink tujuan yakni
form Baca Tips yang terdapat pada file html_links.html akan menggunakan
syntax berikut ini:
<a href="#tips">Tips Internet</a>
|
1. Membuat sebuah link pada window browser baru.
Contoh ini
mendemonstrasikan bagaimana cara membuat link ke halaman lain dengan membuka
window yang baru, sehingga user tidak meninggalkan Web site Anda. (Buka file Latihan
8-5.txt dan simpan dengan nama latihan8_5.html, Open file “latihan8_5.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser!).
<html>
<body>
<a href="lastpage.htm"
target="_blank">Last Page</a>
<p>
If you set the target attribute of a link
to "_blank",
the link will open in a new window.
</p>
</body>
</html>
|
2. Membuat sebuah link pada halaman yang sama.
Contoh ini
mendemonstrasikan bagaimana cara membuat link untuk meloncat antar section pada
satu halaman yang sama. ( Buka file Latihan 8-6.txt dan simpan dengan
nama latihan8_6.html, Open file “latihan8_6.html” lewat Browser,
kemudian GO, perhatikan hasilnya pada window browser! ).
<html>
<body>
<p><a href="#C4">See
also Chapter 4.</a></p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla
bla</p>
<a
name="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla
bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
|
3. Membuat sebuah link ke alamat e-mail.
Contoh ini
mendemonstrasikan bagaimana cara membuat link ke alamat e-mail, link ini akan
berfungsi bila Anda memiliki program mail yang terinstal dan dijalankan,
misalnya Outlook 5.0 dsb.
( Buka file Latihan
8-7.txt dan simpan dengan nama latihan8_7.html, Open file “latihan8_7.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser! ).
<html>
<body>
<p>
This is a mail link:
<a
href="mailto:binsar@tedcbandung.com?Subject=Hello again">
Send Mail</a>
</p>
</body>
</html>
|
4. Cara ke 2 membuat link ke alamat e-mail.
Contoh ini
mendemonstrasikan bagaimana cara membuat link ke alamat e-mail, link ini akan
berfungsi bila Anda memiliki program mail yang terinstal dan dijalankan,
misalnya Outlook 5.0 dsb, dengan cara yang lebih lengkap.
( Buka file Latihan
8-8.txt dan simpan dengan nama latihan8_8.html, Open file “latihan8_8.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser! ).
<html>
<body>
<p>
This is another mailto link:
<a
href="mailto:binsar@tedcbandung.com?
cc=binsarid@yahoo.com&
bcc=made@tedcbandung.com&
subject=Summer%20Party&
body=You%20are%20invited%20to
%20a%20big%20summer%20party!">Send
mail!</a>
</p>
<p><b>
Note:</b>Spaces between words, should
be replaced by%20 (instead of a space). This way the browser will display
your text properly in the mail.
</p>
</body>
</html>
|
NN: Netscape, IE: Internet
Explorer, W3C: Web Standard
Start Tag
|
NN
|
IE
|
W3C
|
Purpose
|
|
|
3.0
|
3.0
|
3.2
|
Defines an anchor
|
Target Attributes
|
Purpose
|
target="_blank"
|
Loads the new document in a new blank window
|
target="_self"
|
Loads the new document in the same window as the anchor
(default)
|
target="_parent"
|
Loads the new document in the parent frame (when using frames)
|
target="_top"
|
Loads the new document in the entire browser window (nice way to
break out of frames)
|
Bingkai ( Frame ) HTML.
Dengan bingkai (frame), Anda dapat menampilkan lebih dari satu Web page pada
window browser yang sama.
1. Mengatur Frame Vertikal.
Contoh ini
mendemonstrasikan bagaimana frame vertikal (cols) diatur dengan tiga
dokumen yang berbeda. ( Buka file Latihan 9-1.txt dan simpan dengan nama
latihan9_1.html, Open file “latihan9_1.html” lewat Browser,
kemudian GO, perhatikan hasilnya pada window browser! ).
<html>
<frameset
cols="25%,50%,25%">
<frame src="tryhtml_frame_a.htm">
<frame src="tryhtml_frame_b.htm">
<frame src="tryhtml_frame_c.htm">
</frameset>
</html>
|
2. Mengatur Frame Horizontal.
Contoh ini
mendemonstrasikan bagaimana frame Horizontal (rows) diatur dengan tiga
dokumen yang berbeda. ( Buka file Latihan 9-2.txt dan simpan dengan nama
latihan9_2.html, Open file “latihan9_2.html” lewat Browser,
kemudian GO, perhatikan hasilnya pada window browser! ).
<html>
<frameset
rows="25%,50%,25%">
<frame src="tryhtml_frame_a.htm">
<frame src="tryhtml_frame_b.htm">
<frame src="tryhtml_frame_c.htm">
</frameset>
</html>
|
Dengan bingkai (frame), Anda dapat menampilkan lebih dari satu Web page pada
window browser yang sama. Masing-masing dokumen HTML disebut sebuah Frame, dan
masing-masing frame berdiri sendiri terhadap yang lainnya.
Kelemahan penggunaan frame adalah:
·
Web developer harus mempertahankan track dari beberapa dokumen
HTML.
·
Sangat sulit untuk mencetak page yang ada.
·
Tag <frameset>
mendefenisikan bagaimana pembagian window kedalam beberapa frame.
·
Masing-masing frameset
mendefenisikan pasangan untuk rows
atau columns.
·
Besaran untuk rows/columns
menandakan ukuran area screen masing-masing row/column yang akan dibuat.
Tag <frame> mendefenisikan bagaimana dokumen HTML ditempatkan di
masing-masing frame.
Pada contoh dibawah ini kita memiliki sebuah frameset dengan dua buah kolom.
Kolom yang pertama adalah di set ke 25% dari lebar window browser. Kolom yang
ke dua 75% dari lebar window browser. Dokumen HTML "
tryhtml_frame_a.htm"
ditempatkan pada kolom pertama, dan “
tryhtml_frame_b.htm” ditempatkan pada
kolom yang kedua:
<html>
<frameset cols="25%,75%">
<frame src="tryhtml_frame_a.htm">
<frame src="tryhtml_frame_b.htm">
</frameset>
</html>
|
Bila border (pembatas)
Frame kelihatan, maka pengguna (user) dapat mengubah ukuran Frame dengan
cara dragging border (menempatkan
kursor pada garis pembatas, kemudian menekan tombol kiri mouse dan ditahan,
kemudian digeser ke posisi yang diinginkan). Untuk mencegah pengguna
melakukan hal ini, Anda dapat menambahkan atribut noresize ke tag
<frame>.
Tambahkan tag
<noframes> untuk browser yang tidak mendukung frame.
1. Frameset Campuran (Mixed).
Contoh ini
mendemonstrasikan bagaimana membuat frameset dengan tiga dokumen yang berbeda
dan menggabungkan Kolom dan Row . ( Buka file Latihan 9-3.txt dan simpan
dengan nama latihan9_3.html, Open file “latihan9_3.html” lewat
Browser, kemudian GO, perhatikan hasilnya pada window browser! ).
<html>
<frameset rows="50%,50%">
<frame src="tryhtml_frame_a.htm">
<frameset cols="25%,75%">
<frame
src="tryhtml_frame_b.htm">
<frame
src="tryhtml_frame_c.htm">
</frameset>
</frameset>
</html>
|
2. Frame Navigasi (Navigation Frame).
Contoh ini
mendemonstrasikan bagaimana membuat frame navigasi. Frame navigasi terdiri dari
sebuah list dari link, dengan target frame yang ke dua. Frame yang ke dua
memperlihatkan isi dokumen yang di Link.
( Buka file Latihan
9-4.txt dan simpan dengan nama latihan9_4.html, Open file “latihan9_4.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser! ).
<html>
<frameset cols="120,*">
<frame
src="tryhtml_contents.htm">
<frame
src="tryhtml_frame_a.htm"
name="showframe">
</frameset>
</html>
|
Berikut ini adalah isi dari file “
tryhtml_contents.htm”
<html>
<body>
<a href ="tryhtml_frame_a.htm"
target ="showframe">Frame a</a><br>
<a href ="tryhtml_frame_b.htm"
target ="showframe">Frame b</a><br>
<a href ="tryhtml_frame_c.htm"
target ="showframe">Frame c</a>
</body>
</html>
|
3. Sisipan dalam Frame (Inline frame).
Contoh ini
mendemonstrasikan bagaimana menampilkan sebuah page dalam sebuah frame (inline)
atau Sebuah Page HTML didalam sebuah frame.
( Buka file Latihan
9-5.txt dan simpan dengan nama latihan9_5.html, Open file “latihan9_5.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser! ).
<html>
<body>
<iframe src ="index.htm">
</iframe>
<p>Some older browsers don't support
iframes.<p>
<p>If they don't, the iframe will not
be visible.</p>
</body>
</html>
|
4. Melompat ke lokasi spesifik dengan sebuah frame.
(Jump to a specified
section within a frame)
Contoh ini
mendemonstrasikan dua frame. Salah satu frame memiliki sumber untuk menunjuk ke
lokasi yang spesifik dalam sebuah file. Lokasi yang spesifik dibuat dengan
menggunakan <a name="C10"> didalam file
"link.htm".
( Buka file Latihan
9-6.txt dan simpan dengan nama latihan9_6.html, Open file “latihan9_6.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser! ).
<html>
<frameset cols="20%,80%">
<frame
src="tryhtml_frame_a.htm">
<frame src="link.htm#C10">
</frameset>
</html>
|
5. Melompat ke lokasi spesifik dengan sebuah frame.
(Jump to a specified
section with frame navigation)
Contoh ini
mendemonstrasikan dua frame. Frame navigasi (Content.htm) dimasukkan sebelah
kiri, dengan berisi sejumlah list untuk link, dengan frame yang ke dua menjadi
target frame (link.htm). Frame yang kedua menunjukkan dokumen yang di link.
Salah satu link dari frame navigasi ditujukan ke lokasi spesifik pada file
target. Kode HTML dalam file “content.htm” diperlihatkan seperti berikut:
<a href ="link.htm" target
="showframe">Link without Anchor</a>
<br>
<a href ="link.htm#C10" target
="showframe">Link with Anchor</a>
( Buka file Latihan 9-7.txt dan simpan
dengan nama latihan9_7.html, Open file “latihan9_7.html” lewat
Browser, kemudian GO, perhatikan hasilnya pada window browser! ).
<html>
<frameset cols="180,*">
<frame src="content.htm">
<frame src="link.htm"
name="showframe">
</frameset>
</html>
<html>
<frameset cols="180,*">
<frame src="content.htm">
<frame src="link.htm"
name="showframe">
</frameset>
</html>
|
6. Membatalkan sebuah frame ( Break out of a frame ).
Contoh ini
mendemonstrasikan bagaimana cara membatalkan sebuah frame, bila site Anda
terkunci oleh sebuah frame.
( Buka file Latihan
9-6.txt dan simpan dengan nama latihan9_6.html, Open file “latihan9_6.html”
lewat Browser, kemudian GO, perhatikan hasilnya pada window browser! ).
<html>
<body>
<p>Locked in a frame?</p>
<a href="http://www.dikmenjur.com/"
target="_top">Click
here!</a>
</body>
</html>
|
NN: Netscape, IE: Internet
Explorer, W3C: Web Standard
Start Tag
|
NN
|
IE
|
W3C
|
Purpose
|
|
|
3.0
|
3.0
|
4.0
|
Defines a set of frames
|
|
|
3.0
|
3.0
|
4.0
|
Defines a sub window (a frame)
|
|
|
3.0
|
3.0
|
4.0
|
Defines a noframe section for browsers that do not handle frames
|
|
|
6.0
|
3.0
|
4.0
|
Defines an inline sub window (frame)
|
