4 HYPERTEXT MARKUP LANGUAGE - hermantolle.com filememberikan format tertentu pada suatu kelompok...

45

HYPERTEXT

MARKUP

LANGUAGE

Pada bagian ini kita akan mempelajari tentang sintaks Hypertext

Markup Language (HTML) yang sering disebut sebagai bahasa

pemrograman web. HTML sebenarnya bukan merupakan bahasa

pemrograman tetapi hanya lah sintaks-sintaks untuk memformat

tampilan teks menjadi sebuah halaman web.

4.1 Struktur Dokumen HTML

Seperti suatu dokumen umumnya, dokumen HTML terdiri dari teks-

teks, dan bahkan lebih dari itu, dokumen HTML juga dapat dibentuk

supaya bisa memanggil file gambar, suara, ataupun video. Tetapi ada

satu hal yang membedakan dokumen HTML dengan dengan

dokumen-dokumen lainnya, yaitu adanya elemen-elemen HTML

beserta tag-tagnya. Elemen dan tag inilah yang merupakan ciri utama

dari suatu dokumen HTML

Dokumen HTML terdiri dari tiga bagian utama. Jika salah satunya

tidak ada, maka dokumen tidak dapat ditampilkan dengan baik.

Keempat bagian itu adalah :

HTML

Pembuka blok HTML, yang menandakan bahwa dokumen ini adalah

dokumen HTML

4

Diktat Kuliah Internet & Web Disain – Herman Tolle - UB

46

HEAD

Blok yang berisi metadata dan embedded scripts/CSS. Informasi yang

berada dalam blok ini akan diproses oleh browser tetapi tidak

ditampilkan ke layar.

BODY

Berisi informasi/data utama yang ditampilkan di browser.

Merupakan bagian terpenting karena seluruh isi tampilan sebuah

halaman web terletak dalam bagian body ini.

<HTML>

</HTML>

<BODY>

</BODY>

<HEAD>

</HEAD>

Gambar 2.1 Struktur Dasar dokumen HTML

Dokumen HTML dalam Gambar 2.1 merupakan susunan dari

dokumen HTML yang baik. Untuk mengetahui isi daripada head

maupun body akan dijelaskan lebih lanjut.

Menyatakan kepala dokumen

Kelompok HEAD yang dinyatakan dengan tag <HEAD>…</HEAD>,

merupakan bagian pembuka atau kepala dari dokumen HTML.


47

HEAD berisi informasi-informasi yang menjelaskan tentang

dokumen HTML dan tag-tag yang boleh diletakkan di bagian HEAD

adalah :

TITLE

Judul dari dokumen. Tag ini mutlak diperlukan dalam semua

dokumen HTML. Isi dari tag TITLE ini dapat dilihat pada tampilan

yang paling atas atau untuk lebih jelasnya lihat di source dengan klik

view. Lalu bisa dilihat dan dicocokkan manakah yang merupakan isi

dari tag TITLE tersebut. Sebagai contoh :

<TITLE>Homepage Pertama</TITLE>

Maka tulisan “Homepage Pertama” akan tampil sebagai judul dari

dokumen tersebut dan akan tampil di bagian paling atas pada

browser.

META

Menyatakan meta-information (informasi tentang suatu informasi)

dalam suatu dokumen misalkan :

<META HTTP-EQUIV="Content-Type" CONTENT="text/html;

charset=windows-1252">

<META NAME="Generator" CONTENT="Microsoft Word XP">

Dokumen di atas berisi informasi tentang dokumen dalam file HTML

tersebut dan di-generate (dibuat) dengan menggunakan Microsoft

Word XP.

Dan masih ada beberapa tag lagi yang boleh ditampilkan seperti

ISINDEX, LINK namun yang harus dimengerti sebagai dasar atau

tahap awal cukup dijelaskan tag TITLE dan META.

Membuat isi dokumen dengan elemen BODY

BODY, yang dinyatakan dengan tag <BODY>……</BODY> merupakan

tubuh atau isi dari dokumen HTML dimana kita meletakkan


48

informasi yang akan ditampilkan pada browser. Sebagian besar

dokumen HTML kita akan berada di bagian ini. Kita bukan hanya

memasukkan informasi atau isi dokumen di sini, tetapi kita juga bisa

memberikan format tertentu pada suatu kelompok teks, membuat

tabel, form, list, frame, bahkan menggunakan objek suara dan video.

Membuat dokumen HTML pertama anda

Untuk memulai dokumen HTML pertama anda, bukalah program

editor teks seperti NOTEPAD ataupun WORDPAD, dan kemudian

ketikkan teks dibawah ini :

<HTML>

<HEAD>


</HEAD>

<BODY>

Ini halaman latihan HTML saya yang pertama

</BODY>

<HTML>

Simpan dokumen tersebut dengan nama lat1.html'. Dengan

menggunakan ekstensi .html pada file ini, browser akan mengenali

file teks tersebut sebagai suatu dokumen HTML dan akan

menampilkan isinya sebagai suatu web page.

Struktur dokumen html dapat disusun juga seperti dua contoh

berikut ini:

<HTML>

<HEAD>


</HEAD>

<BODY> Ini halaman latihan HTML saya yang pertama

</BODY>

<HTML>

Atau


49

<HTML><HEAD><TITLE>Homepage Pertama</TITLE></HEAD>

<BODY>Ini halaman latihan HTML saya yang pertama

</BODY><HTML>

Namun struktur kedua dan ketiga tidak dianjurkan karena

menyulitkan bagi kita untuk memahami dokumen html kita. Struktur

yang dianjurkan adalah seperti contoh pertama, dimana elemen html

yang ditulis per baris dan menggunakan indentasi (tabulasi)

Berikut ini adalah tampilan file lat1.html pada browser Internet

Explorer :

Dalam membuat sebuah halaman web, ingat bahwa kita bekerja

dengan 3 mode yang berbeda, yaitu:

1. Konten: apa yang ingin tampilkan pada halaman web kita

2. Struktur: bagaimana membuat struktur untuk halaman web

kita, dengan menambahkan tag-tag dalam format HTML

3. Presentasi: hasil tampilan web kita jika dibuka/dilihat dengan

browser.


50

4.2 Memformat File HTML

Format Teks Dasar

Pada umumnya web browser mendukung empat macam format teks

yakni bold, italic, monospace, and underline. Keempat format teks ini

diimplementasikan dalam format HTML dengan menambahkan tag-

tag yang bersesuaian untuk masing-masing format tersebut.

Format teks Tag awal Tag Akhir

Bold <B> </B>

Italic <I> </I>

Underline <U> </U>

Monospace <TT> </TT>

Sebagai contoh kalau kita ingin menggunakan format-format teks ini

maka dalam file HTML harus kita tambahkan:

<HTML>

<HEAD>

<TITLE>format teks dasar</TITLE>

</HEAD>

<BODY>

<u>My personal website</u>

<P>Format teks html secara umum meliputi

Paragraf,<TT>monospace</TT>, <I>huruf cetak miring

(italic)</I> dan <B>huruf cetak tebal (bold)</B>.

</BODY>

</HTML>

Tampilan pada browser adalah:


51

Kita juga dapat mengkombinasikan dua macam format teks secara

bersamaan. Misalkan untuk menampilkan kata-kata dalam cetak

tebal dan miring kita dapat menuliskan kode HTML seperti ini:

<B><I>Kata-kata yang tercetak tebal dan miring</I> </B>

Selain itu kita juga dapat menampilkan suatu karakter khusus

dengan menggunakan kode yang tertentu pula. Ada dua macam

kode yang dapat kita gunakan untuk menampilkan karakter-karakter

alternatif tersebut yakni dengan menggunakan Character Reference

atau Entity Name. Tabel 4.1 menunjukkan daftar beberapa karakter

khusus yang dapat ditampilkan dengan menggunakan suatu kode

tertentu.

Misalkan untuk menuliskan "Tag <HTML>" dapat kita

implementasikan:

Tag <HTML>


52

Tabel 4.1 Format Penulisan Karakter Khusus

Symbol Character Reference Entity name

< < <

> > >

¢ ¢ ¢

£ £ £

¥ ¥ ¥

© © ©

® ® ®

° ° °

¼ ¼ ¼

½ ½ ½

¾ ¾ ¾

× × ×

Background Dokumen

Penggunaan background dalam dokumen HTML dapat berbentuk

dua macam yaitu sekadar warna atau ada grafik/gambar di

dalamnya. Pada kesempatan kali ini kita hanya membahas background

warna.

Untuk menyatakan suatu warna background, digunakan atribut

bgcolor pada elemen body <body bgcolor>. Berikut ini contoh

penggunaan warna background dokumen HTML :


53

bgcolor.html

<HTML>

<HEAD>

<TITLE>Heading</TITLE>

</HEAD>

<BODY bgcolor=green>

Halaman dengan warna dasar hijau

</BODY>

</HTML>

Tampilan pada browser:

Ada dua macam kode yang dapat kita gunakan untuk menampilkan

warna, yaitu:

1. Warna-warna standar (dalam bahasa inggris) seperti: black,

white, green dan sebagainya.

2. Warna dengan karakter khusus (kode-kode tertentu) seperti

#000000 untuk warna hitam, #ffffff untuk warna putih.

Penjelasan mengenai karakter khusus warna ini akan dibahas

pada bahasan berikutnya.


54

Heading

Heading adalah sekumpulan kata atau frasa yang menjadi judul atau

subjudul dalam suatu dokumen HTML. Sekalipun sama-sama

merupakan judul, tetapi heading berbeda dengan elemen <TITLE>

yang hanya muncul pada title bar dari suatu jendela browser, bukan

di dalam web page.

HTML menyediakan 6 buah tingkat heading. Heading level 1

biasanya merupakan judul yang paling penting atau judul utama.

Sedangkan heading level berikutnya merupakan bagian atau

subjudul dari judul utama.

Untuk menyatakan suatu heading, digunakan tag <Hx> dimana x

merupakan nomor level heading dari 1 sampai 6, sedangkan untuk

mengakhirinya digunakan tag akhir </Hx>. Berikut ini contoh

penggunaan heading :

<H1>Judul utama</H1> : heading level 1

<H2>Sub Judul 1</H2> : heading level 2

<H3>Sub judul 2</H3> : heading level 3



<H6>Sub judul 5</H6> : heading level 6

Sekarang buatlah file baru dengan nama lat2.html dan ketik format

HTML berikut :

Lat2.HTML

<HTML>

<HEAD>

<TITLE>Heading</TITLE>

</HEAD>

<BODY>

<H1>Judul utama</H1>

<H2>Sub Judul 1</H2>

<H3>Sub judul 2 </H3>



55


<H6>Sub judul 5</H6>

</BODY>

</HTML>

Tampilan pada browser :

Perataan pada heading

HTML mempunyai atribut ALIGN pada elemen heading yang

memungkinkan suatu heading ditampilkan di kiri, kanan atau bagian

tengah dari jendela browser. Nilai-nilai yang mungkin dari atribut

ALIGN adalah :

ALIGN="left", untuk meratakan heading ke kiri

ALIGN="center", untuk meratakan heading ke tengah

ALIGN="right", untuk meratakan heading ke kanan


56


HTML berikut :

Lat3.HTML

<HTML>

<HEAD>

<TITLE>Perataan pada Heading</TITLE>

</HEAD>

<BODY>

<H1 ALIGN="CENTER">HEADING</H1>

<H2 ALIGN="LEFT">ALIGN="LEFT"</H1>

<H3 ALIGN="CENTER">ALIGN="CENTER"</H1>

<H4 ALIGN="RIGHT">ALIGN="RIGHT"</H1>

</BODY>

</HTML>



57

Memformat Teks dalam HTML

Suatu pengolah kata, HTML juga dapat menyuruh browser anda

untuk menampilkan suatu bagian teks secara tebal, miring, dengan

garis bawah, ataupun lainnya. Elemen-elemen yang penting untuk

diketahui dalam memformat teks secara karakteristik fisik teks

adalah :

<B>.........</B> : Untuk menebalkan teks

<I>.........</I> : Untuk membuat teks terlihat miring

<U>.........</U> : Untuk menggarisbawahi teks

<S>.........</S> : Untuk memberikan coretan pada teks

<STRIKE>..</STRIKE> : Untuk memberikan coretan pada teks,

sama dengan elemen <S>

<TT>....</TT> : Untuk menampilkan teks dalam font

typewriter

<BIG>.........</BIG> : Untuk membesarkan teks

<SMALL>.........</SMALL> : Untuk mengecilkan teks

<SUB>.........</SUB> : Untuk membuat teks subscript

<SUP>.........</SUP> : Untuk membuat teks superscript

Teks-teks yang diinginkan seperti di atas apakah untuk tebal, miring

atau yang lainnya ditempatkan di antara tag-tag seperti di atas.


HTML berikut :

Lat4.HTML

<HTML>

<HEAD>

<TITLE>Memformat Teks dalam HTML</TITLE>

</HEAD>

<BODY>

<B>Untuk menebalkan teks</B>

<I>Untuk membuat teks terlihat miring</I>


58

<U>Untuk menggarisbawahi teks</U>

<S>Untuk memberikan coretan pada teks</S>

<STRIKE>Untuk memberikan coretan pada teks</STRIKE>

<TT>Untuk menampilkan teks dalam font typewriter</TT>

<BIG>Untuk membesarkan teks</BIG>

<SMALL>Untuk mengecilkan teks</SMALL>

<SUB>Untuk membuat teks subscript</SUB>

<SUP>Untuk membuat teks superscript</SUP>

</BODY>

</HTML>


Pemisah Antarteks dan Penambahan Garis

Dalam membuat dokumen HTML, untuk membuat suatu teks untuk

ditulis pada baris yang baru tidak dapat dilakukan hanya pada

program editor biasa seperti NOTEPAD yaitu hanya dengan

penekanan tombol enter yang hanya berpengaruh pada program

editor anda, tetapi tidak akan terlihat pada browser. Hal ini juga

berlaku untuk spasi jika anda menghendaki lebih dari satu spasi.


59

Maka untuk menampilkannya HTML menyediakan atribut-atribut

khusus.

Ganti dengan garis baru

Elemen <BR> digunakan untuk membuat teks dituliskan pada baris

berikutnya (ganti baris). Sedangkan untuk spasi lebih dari satu

dengan menyisipkannya dengan tulisan untuk satu spasi.

Apabila lebih dari satu spasi dengan menambahkan berkali-

kali.

Ganti dengan Paragraf baru

Elemen <P> digunakan untuk membuat teks dituliskan pada paragraf

berikutnya. Elemen <P> diletakkan di awal paragraf.

Penyisipan Garis

Untuk menambah nilai estetika page maupun untuk memisahkan

suatu bagian informasi dari bagian yang lainnya, kita dapat

menyisipkan sebuah garis horisontal pada page. Penyisipan garis ini

dapat dilakukan dengan menambahkan tag <HR>. Tag <HR> ini juga

memiliki beberapa parameter tambahan yang memungkinkan kita

untuk memodifikasi tampilan dari garis horisontal yang digunakan

ini.

Untuk contoh penggunaannya bisa diterapkan pada program contoh

sebelumnya dan akan bisa dibedakan tampilannya (dokumen HTML

yang telah dikombinasikan) :

Lat5.HTML <HTML>

<HEAD>

<TITLE>Pemisah antar teks</TITLE>

</HEAD>

<BODY>

Kalimat ini merupakan contoh untuk ganti baris<br>dengan

elemen br


60

<p>sedangkan kalimat ini merupakan contoh untuk paragraf

baru dengan elemen p

<hr>diatas adalah penyisipan garis

</BODY>

</HTML>


4.3 Font

Menentukan ukuran teks

Untuk menentukan ukuran teks, elemen FONT menyediakan atribut

SIZE dengan nilai 1 sampai 7 berurutan dari teks ukuran terkecil

(SIZE=1) sampai dengan ukuran terbesar (SIZE=7).

Contoh berikut memperlihatkan kode HTML dengan menggunakan

berbagai ukuran font:


61

Lat6.HTML

<HTML>

<HEAD><TITLE>Menentukan ukuran teks</TITLE></HEAD>

<BODY>

<FONT SIZE=1>Teks berukuran 1</FONT>







</BODY>

</HTML>



62

Mengubah warna teks

Untuk menentukan warna teks, elemen FONT menyediakan atribut

COLOR. Warna-warna yang biasa digunakan untuk format warna

teks diantaranya:

Aqua Navy

Black Olive

Blue Purple

Fuchsia Red

Gray Silver

Green Teal

Lime White

Maroon Yellow

Contoh penggunaan warna dalam HTML :

<FONT COLOR="RED">teks warna merah</FONT>

<FONT COLOR="GREEN">teks warna hijau</FONT>

<FONT COLOR="BLUE">teks warna biru</FONT>

Lat7.HTML

<HTML>

<HEAD>

<TITLE>Mengubah warna teks</TITLE>

</HEAD>

<BODY>

<FONT COLOR="RED">teks warna merah</FONT>

<FONT COLOR="GREEN">teks warna hijau</FONT>

<FONT COLOR="BLUE">teks warna biru</FONT>

</BODY>

</HTML>


63


Menentukan Jenis font

Untuk menentukan suatu jenis font, digunakan atribut FACE dengan

contoh perintahnya seperti berikut:

<FONT FACE="jenis font">.........</FONT>

Jenis font yang biasa digunakan diantaranya:

• Arial

• Verdana

• Tahoma

• Comic sans ms

• Courier new

Berikut ini adalah kode HTML untuk beberapa font yang akan

ditampilkan di browser :

Lat8.HTML


64

<HTML>

<HEAD><TITLE>Jenis Font</TITLE>

</HEAD>

<BODY>

<FONT FACE="WingDings">font wingdings</FONT>

<FONT FACE="Arial" size=3>font jenis arial dengan

size=3</FONT>

<FONT FACE="Verdana" color="red">font Verdana berwarna

merah</FONT>

<FONT FACE="courier new"><B><I>font courier new tebal

miring</B></I></FONT>

<FONT FACE="SYMBOL">font symbol</FONT>

<FONT FACE="COMIC SANS MS"><U>font comic sans ms

bergarisbawah</U></FONT>

</BODY>

</HTML>



65

4.4 Penggunaan Preformat

Pada kondisi biasa web browser akan mengabaikan pemakaian

karakter-karakter multi spasi, tab, dan carriage return, namun kita

dapat mencegahnya dengan menggunakan tag <PRE>. Penggunaan

tag <PRE> ini membuat web browser akan menampilkan dokumen

dalam bentuk apa adanya (karakter multi spasi, tab dan carriage

return tidak diabaikan).

Tag <PRE> merupakan kependekan dari "preformatted", yang artinya

naskah ditampilkan dalam bentuk layout yang asli. Pada contoh

berikut ditampilkan perbedaan antara naskah dokumen yang

menggunakan tag <PRE> dan naskah yang lain tidak

menggunakannya. Layout asli kedua naskah tersebut dibuat serupa

sehingga kita dapat melihat perbedaan dari hasil tampilannya.

Berikut ini adalah kode HTML untuk penggunaan tag <pre> yang

akan ditampilkan di browser :

Lat9.HTML

<HTML>

<HEAD>

<TITLE>format teks dasar</TITLE>

<TITLE>The <PRE> Tag</TITLE>

</HEAD>

<BODY>

<H3>Tanpa Tag <PRE> :</H3>

Puisiku

selalu hadir

setiap malam datang

pelan dan merayap menerjang

menghiasi hari-hariku yang kelam

<P>

<H3>Dengan Tag <PRE>:</H3>

<PRE>

Puisiku

selalu hadir

setiap malam datang

pelan dan merayap menerjang

menghiasi hari-hariku yang kelam

</PRE>

</BODY>

</HTML>


66

Catatan :

Pada penggunaan tag <PRE>, teks akan ditampilkan dengan

menggunakan font dengan format monospace.


4.4 List

Salah satu cara yang efektif dan mudah untuk dibaca dalam

menyampaika informasi adalah dengan menggunakan daftar.

HTML menyediakan beberapa jenis daftar, yaitu :

• Odered list/numbered list (daftar berurut/daftar dengan nomor)

• unordered list/bulleted list (daftar tak berurut/daftar dengan

titik)


67

Daftar berurut

Ordered list atau numbered list adalah suatu daftar di mana item-item

yang ada di dalam daftar tersebut memiliki nomor secara berurut.

Ordered list dimulai dengan tag awal <OL> dan diakhiri dengan tag

akhir </OL> dan diantara kedua tag tersebut terdapat tag <LI> yang

menyatakan list item atau item dalam daftar. Berikut ini adalah suatu

contoh dari ordered list :

List1.HTML

<HTML>

<HEAD>

<TITLE>ORDERED LIST</TITLE>

<BODY>

HTML menyediakan beberapa jenis daftar/list, yaitu :

<OL>

<LI>daftar yang berurut/daftar dengan nomor

<LI>daftar yang tak berurut/daftar dengan titik

<LI>daftar menu

<LI>daftar istilah

</OL>

</BODY>

</HTML>



68

Browser akan memberi nomor secara otomatis dan berurut pada

setiap item yang terdapat dalam daftar tersebut dan tidak perlu

memberikan nomor atau mengurutkannya kembali sekalipun anda

telah melakukan penambahan ataupun penghapusan pada item-item

tersebut.

Seperti halnya suatu daftar yang biasa anda temui, anda juga bisa

membuat suatu daftar di dalam daftar yang lain (nested list). Berikut

ini contoh kode HTML untuk penggunaannya :

List2.HTML

<HTML>

<HEAD>

<TITLE>Ordered List berulang</TITLE>

<BODY>


<OL>

<LI>daftar yang berurut/daftar dengan nomor mempunyai

beberapa variasi:

<OL>

<LI>daftar berurut dengan nomor

<LI>daftar berurut dengan bilangan romawi <LI>daftar

berurut dengan huruf besar <LI>daftar berurut dengan

huruf kecil <LI>daftar berurut mulai nomor atau huruf

tertentu </OL> <LI>daftar yang tak berurut/daftar

dengan titik

<LI>daftar menu

<LI>daftar istilah

</OL>

</BODY>



69

Mengganti jenis nomor

Anda dapat membuat ordered list dengan berbagai maca variasi.

Aanda tidak hanya dapat mengganti jenis nomor dengan huruf atau

bilangan romawi, tetapi anda dapat menentukan nomor awal untuk

daftar anda. Tabel di bawah memperlihatkan atribut-atribut untuk

mengubah jenis nomor pada tag <OL> beserta fungsi-fungsinya :

Atribut Fungsi

TYPE=A Membuat daftar berurut dengan huruf besar (A,B,C,D,....)

TYPE=a Membuat daftar berurut dengan huruf kecil (a,b,c,d,.......)

TYPE=I Membuat daftar berurut dengan bilangan romawi berhuruf

besar (I,II,III,IV,..)

TYPE=I Membuat daftar berurut dengan bilangan romawi berhuruf

kecil (i,ii,iii,iv,....)

TYPE=1 Mengembalikan daftar berurut pada nomor (default)

(1,2,3,4,...)

START=x Menentukan nilai awal dari item dalam daftar, dimana x

adalah nilai awal daftar


70

Daftar tak berurut

Unordered List adalah suatu daftar dimana urutan dari item-item

tidak diutamakan, jadi item-item dalam daftar tersebut bisa muncul

dalam sembarang urutan.Setiap item dalam Unordered List biasanya

ditandai dengan titik atau kotak. Penggunaannya serupa dengan

Ordered List, hanya saja Unordered List menggunakan tag awal

<UL> dan tag akhir </UL>. Sedangkan setiap item di dalamnya

menggunakan tag yang sama seperti pada Ordered List, yaitu <LI>.

Contoh kode HTML nya sebagai berikut :

List4.HTML

<HTML>

<HEAD>

<TITLE>UNORDERED LIST</TITLE>

<BODY>


<UL>


<LI>daftar yang tak berurut/daftar dengan titik

<LI>daftar menu

<LI>daftar istilah

</UL>

</BODY>

</HTML>



71

Kombinasi antara Ordered List dan Unordered List

Berikut ini adalah contoh kode HTML yang merupakan kombinasi

dari penggunaan Ordered List dan Unordered List :

List5.HTML

<HTML>

<HEAD>

<TITLE>Kombinasi Ordered List dengan unordered List

</TITLE>

<BODY>


<UL>

<LI>

daftar berurut dengan /daftar dengan nomor


<LI>daftar yang tak berurut mempunyai beberapa variasi :

<OL>

<LI>Unordered List dengan tanda cakram (TYPE=disc)

<LI>Unordered List dengan tanda bulatan (TYPE=circle)

<LI>Unordered List dengan tanda kotak (TYPE=square)

</OL>


72

<LI>daftar menu

<LI>directory list

<LI>daftar istilah

</UL>

</BODY>

</HTML>


4.5 Link

Pengenalan terhadap URL

Pada modul-modul sebelumnya kita telah dikenalkan pada konsep

URL (Uniform Resourse Locator), yakni pada dasarnya semua resource

yang ada di Internet memiliki alamat sendiri. Selanjutnya kita juga

telah memahami konsep hypertext dari sebuah file HTML yang

memungkinkan dibuat suatu link yang menghubungkan pada bagian


73

lain dari dokumen HTML atau langsung mengarah pada suatu

resource Internet tertentu.

Misalnya alamat URL:

http://www.brawijaya.ac.id/academic/index.html

Protocol

Pada bagian pertama dari URL ini adalah menunjukkan bagaimana

cara data dikirimkan atau ditransmisikan melalui media jaringan.

Secara teknis lebih sering kita sebut dengan istilah protokol. Misalnya

untuk aplikasi World Wide Web ini kita menggunakan protokol yang

disebut dengan protokol HTTP. Oleh karena itu pada bagian awal

URL ini kita deklarasikan: http://

protokol-protokol lain yang sering digunakan diantaranya adalah ftp,

mailto, dan file.

Machine name

Machine name di sini menjelaskan "siapa" yang memiliki URL.

Bagian ini berisi nama komputer tempat resource Internet tersebut

berada. Istilah yang lebih teknis kita sebut dengan hostname.

Misalkan page kita diletakkan di server www.brawijaya.ac.id maka

penambahan URL sampai dengan bagian ini menjadi:

http://www.brawijaya.ac.id

Directory Path

Bagian selanjutnya menunjukkan lokasi yang lebih spesifik tempat

menyimpan resource Internet tersebut. Secara fisik bagian ini berisi

nama direktori tempat penyimpanan resource yang bersangkutan.

http://www.brawijaya.ac.id/academic

artinya lokasi file tersebut berada di folder /academic pada alamat url

www.brawijaya.ac.id


74

File Name

Bagian terakhir ini menunjukkan nama file yang akan kita gunakan.

Untuk aplikasi web file ini berisi kode-kode HTML dan teks. Secara

keseluruhan URL dapat dituliskan sebagai berikut:

http://www.brawijaya.ac.id/academic/index. html

Terdapat 3 Model URL yang biasa digunakan yaitu:

Absolute URL

Cukup menampilkan hostname (machine name), sedangkan pemberian

letak direktori atau nama file merupakan pilihan.

contoh : http://www.brawijaya.ac.id

Site-Relative URL

Tidak menampilkan hostname (machine name) atau nomor port.

Model ini hanya digunakan pada saat kita telah berada dalam sebuah

situs.

Contoh: /about/people/index.html

File-Relative URL

URL berdasarkan lokasi yang ditetapkan sehubungan dengan alur

file yang ada dalam sebuah situs.

Contoh: ../publications/index.html


75

Penggunaan Link

Pembuatan link dalam suatu file HTML dapat dilakukan dengan

menggunakan tag <A> yang diikuti dengan parameter referensinya

HREF.

<A HREF="URL">

Contoh penggunaanya:

<A HREF=http:// http://www.brawijaya.ac.id> Klik di

sini </A>

Selain link yang mengarah ke luar, contohnya mengarah ke file lain,

web site lain atau ke resource lain, kita dapat juga menggunakan

internal link untuk menunjukkan suatu bagian tertentu dari sebuah

naskah HTML. Internal link ini sering dikenal dengan istilah Anchor.

Tag ini digunakan untuk menandai bagian naskah yang nantinya

akan ditunjuk oleh HREF (Hypertext Reference).

<A NAME="Nama">Bagian teks yang akan diberi

tanda</A>

Contoh penggunaannya:

<A NAME="Bagian1">Bagian 1</A>


76

maka untuk merujuknya digunakan:

<A HREF="#Bagian1">Klik di sini untuk menuju Bagian

1</A>

4.6 Penyisipan Gambar

Menggunakan elemen IMG

Elemen IMG yang dinyatakan dengan tag <IMG> adalah suatu tag

tunggal yang tidak mempunyai tag akhir seperti halnya <BR>.

Elemen IMG mempunyai tiga buah atribut yaitu SRC, ALT dan

ALIGN. SRC untuk menentukan sumber dari inline image, atribut

ALIGN digunakan untuk mengatur perataan teks sedangkan atribut

ALT digunakan sebagai alternatif untuk browser yang berbasiskan

teks.

Inline image dibuat dengan menggunakan elemen IMG dengan

disertai atribut SRC yang menentukan sumber gambar untuk inline

IMG.

Kode HTML untuk menampilkan inline IMG adalah :

<IMG SRC="URL_GAMBAR">

dimana URL_GAMBAR adalah lokasi sumber gambar yang akan

ditampilkan.

Mari kita coba menambahkan gambar di halaman yang kita buat.

Kita akan menggunakan gambar di bawah ini. Nama file gambar ini

adalah: komputer.jpg

Contoh kode HTML yang sederhana dalam penampilan sebuah

gambar di browser :


77

gambar.HTML

<HTML>

<HEAD>

<TITLE>INLINE IMG</TITLE>

<BODY><H2>INLINE IMG</H2>

Inline image adalah suatu gambar yang muncul didalam

teks pada suatu web page, seperti gambar berikut ini

<IMG SRC="komputer.jpg">

</BODY>

</HTML>


Mengatur perataan gambar

Atribut ALIGN digunakan untuk mengatur perataan gambar

terhadap teks-teks yang ada di sekitarnya. Dengan atribut ini, teks

dapat diletakkan di atas, tengah, bawah atau di sebelah kiri dan

kanan gambar.

Fungsi-fungsi dari setiap nilai pada atribut ALIGN diantaranya:


78

ALIGN=BOTTOM Digunakan untuk meratakan bagian bawah teks

dengan bagian bawah gambar. Nilai ini merupakan default dari

atribut ALIGN, jadi tidak perlu dituliskan.

ALIGN=TOP Meratakan bagian atas gambar dengan bagian paling

atas suatu item pada baris saat ini.

ALIGN=MIDDLE Meratakan bagian tengah gambar dengan bagian

bawah teks

ALIGN=TOP Nilai ini meletakkan gambar di sebelah kiri teks.

Beberapa baris teks dapat berada di sebelah kanan

gambar.Sedangkan baris teks lainnya yang tidak dapat dimuat di

sebelah kanan gambar akan diletakkan pada baris berikutnya di

bawah gambar.

ALIGN=RIGHT Nilai ini meletakkan gambar di sebelah kanan teks.

Beberapa baris teks dapat berada di sebelah kiri gambar. Sedangkan

baris teks lainnya yang tidak dapat dimuat di sebelah kiri gambar

akan diletakkan pada baris berikutnya di bawah gambar.

ALIGN=TEXTTOP Meratakan bagian atas gambar dengan bagian

paling atas teks

ALIGN=ABSMIDDLE Meratakan bagian tengah baris saat ini

dengan bagian tengah gambar

ALIGN=ABSBOTTOM Meratakan bagian bawah baris saat ini

dengan bagian bawah gambar

Menentukan tinggi dan lebar gambar

Atribut HEIGHT dan WIDTH digunakan untuk menentukan tinggi

dan lebar suatu gambar dalam ukuran pixel. Jika atribut ini tidak

digunakan , browser akan memakai ukuran sebenarnya dari gambar

tersebut. Tetapi jika atribut ini digunakan, dan nilai yang ditentukan

tidak sama dengan tinggi dan lebar gambar sebenarnya, maka

browser akan mengubah skala gambar tersebut secara otomatis

sesuai dengan tinggi dan lebar yang ditentukan.


79

Kode HTML berikut ini memperlihatkan penggunaan atribut

HEIGHT dan WIDTH untuk membuat gambar terlihat lebih kecil

atau lebih besar dari ukuran gambar sebenarnya.

Gambar2.HTML

<HTML>

<HEAD>

<TITLE>Pemakaian Atribut WIDTH dan HEIGHT</TITLE>

</HEAD>

<BODY>

gambar dalam ukuran sebenarnya

<IMG SRC="images/sample2.jpg" >

<P>Width=45 Height=80

<IMG SRC="images/sample2.jpg" ALIGN=TEXTTOP WEIDTH=45

HEIGHT=80>

<P>Width=145 Height=180

<P><IMG SRC="images/sample3.jpg" ALIGN=TOP WEIDTH=145

HEIGHT=180>

</BODY>

</HTML>



80

Elemen-elemen lain dalam tag <img> adalah:

ALT : Alternative text

Border : border/batas gambar

HSPACE : Horizontal Space

VSPACE : Vertical Space

Membuat link dengan gambar

Gambar dapat berfungsi sebagai link jika digunakan bersama-sama

dengan tag <A>. Jika gambar ini diklik, maka link akan menuju ke

informasi yang dituju. Contoh penggunaannya dalam kode HTML

adalah sebagai berikut :

Gambar2.HTML

<HTML>

<HEAD>

<TITLE>Link dengan gambar</TITLE>

</HEAD>

<BODY>

<H2>Link dengan gambar</H2>

Link dengan gambar yaitu dengan mengklik gambar

komputer berikut

<A HREF="gambar.html"><IMG SRC="komputer.jpg"

width="100" height="66"></A>

maka link akan menuju ke informasi yaitu berupa file

gambar.html

</BODY>

</HTML>

4 HYPERTEXT MARKUP LANGUAGE - hermantolle.com filememberikan format tertentu pada suatu kelompok...

Documents

Transcript of 4 HYPERTEXT MARKUP LANGUAGE - hermantolle.com filememberikan format tertentu pada suatu kelompok...