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.BAB 2.
Mengenal HTML
A. Pertanyaan dan jawaban singkat tentang File HTML
1. Apa yang dimaksud dengan sebuah 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.
2. Anda ingin mencobanya ?
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 |
Penjelasan Contoh diatas.
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.
3. Catatan untuk Editor HTML.
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.
4. Pertanyaan dan jawaban untuk penyegaran.
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.
BAB 3.
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-tag HTML
- 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>
Elemen- elemen HTML
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>
|
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.
Mengapa kita menggunakan tag dengan huruf kecil ?
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)
Atribut-atribut (lambang) Tag
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.
Bentuk tanda kutip “red” atau ‘red’ ?
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’
BAB 4.
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.
Lakukan percobaan untuk contoh-contoh berikut :
Dokumen HTML yang sangat sederhanaContoh 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>
|
Headings
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>
|
Line Break
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.
<html>
<body>
<p>
Untuk memotong
<br>baris<br>dalam sebuah<br>paragraph<br>gunakan tag
br.
</p>
</body>
</html>
|
Komentar atau Catatan dalam 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 --> |
Tips yang sangat berguna !
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.
Contoh-Contoh yang perlu dicoba :
1. Paragraph dengan banyak spasiContoh 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!).
Membandingkan tag Dasar HTML:
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
|
BAB 5.
Memformat Text HTML
Dibawah ini sejumlah contoh yang dapat Anda coba sendiri.
Contoh-contoh :
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!).
Bagaimana menampilkan Source HTML.
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.
Tag untuk Format Text :
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
|
Tag untuk "Computer Output" :
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
|
Tag untuk Citations, Quotations, Definition:
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
|
BAB 6.
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 .
Karakter Entity
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!).
Tanda spasi tetap (Non-breaking Space)
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.
The Most Common Character Entities:
Result |
Description
|
Entity Name
|
Entity Number
|
non-breaking space
|
|
 
|
|
<
|
less than
|
<
|
<
|
>
|
greater than
|
>
|
>
|
&
|
ampersand
|
&
|
&
|
"
|
quotation mark
|
"
|
"
|
'
|
apostrophe
|
'
|
Some other Commonly Used Character Entities:
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.
BAB 7.
Entities Reference untuk HTML 4.01
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.
ASCII Entities with new Entity Names
Result |
Description
|
Entity Name
|
Entity Number
|
"
|
quotation mark
|
"
|
"
|
&
|
ampersand
|
&
|
&
|
<
|
less-than
|
<
|
<
|
>
|
greater-than
|
>
|
>
|
ISO 8859-1 Symbol Entities
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
|
÷
|
÷
|
ISO 8859-1 Character Entities
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
|
ÿ
|
ÿ
|
Some Other Entities supported by HTML
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
BAB 8.
Links dalam HTML
Contoh-contoh :
1. Membuat Hyperlink PageContoh 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>
|
Tag Anchor dan Atribut Href
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>
|
Anchor ini mendefenisikan link ke tedcbandung.com
<a href="http://www.tedcbandung.com/">Mengunjungi Web TEDC Bandung</a>
|
Atribut Target
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>
|
Tag Anchor dan nama Atribut
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>
|
Baris program dibawah mendefenisikan nama sebuah anchor
<a name="tips">Read the Useful Tips section</a>
|
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>
|
Hyperlink tujuan yakni form Baca Tips yang terdapat pada file html_links.html akan menggunakan syntax berikut ini:
<a href="#tips">Tips Internet</a>
|
Contoh-contoh:
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>
|
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>
|
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>
|
Tag Link dan target:
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)
|
BAB 9.
Bingkai ( Frame ) HTML.
Contoh:
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>
|
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>
|
Frame
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 untuk Frameset
·
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 untuk Frame:
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>
|
Catatan – Tips yang berguna.
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.
Contoh-contoh :
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>
|
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>
|
<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>
|
(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>
|
(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>
<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>
|
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>
|
Tag untuk Frame:
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)
|
NAGAQQ | AGEN BANDARQ | BANDARQ ONLINE | ADUQ ONLINE | DOMINOQQ TERBAIK
BalasHapusYang Merupakan Agen Bandarq, Domino 99, Dan Bandar Poker Online Terpercaya di asia hadir untuk anda semua dengan permainan permainan menarik dan bonus menarik untuk anda semua
Bonus yang diberikan NagaQQ :
* Bonus rollingan 0.5%,setiap senin di bagikannya
* Bonus Refferal 10% + 10%,seumur hidup
* Bonus Jackpot, yang dapat anda dapatkan dengan mudah
* Minimal Depo 15.000
* Minimal WD 20.000
Memegang Gelar atau title sebagai AGEN BANDARQ Terbaik di masanya
Games Yang di Hadirkan NagaQQ :
* Poker Online
* BandarQ
* Domino99
* Bandar Poker
* Bandar66(NEW GAMES)
Dengan Link alternatif resmi :
- www.nagaqiuqiu.com
- www.nagaqiuqiu.info
- www.nagaqiuqiu.org
- www.nagaqiuqiu.net
Info Lebih lanjut Kunjungi :
Website : NAGAQQ
WHATSAPP : +855967014811
Line : Cs_nagaQQ