HYPERTEXT MARKUP LANGUAGE

4

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 teksteks, 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

45

Diktat Kuliah Internet & Web Disain – Herman Tolle - UB

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.

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 …, merupakan bagian pembuka atau kepala dari dokumen HTML. 46


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

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 …… merupakan tubuh atau isi dari dokumen HTML dimana kita meletakkan 47


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 : <TITLE>Homepage Pertama Ini halaman latihan HTML saya yang pertama

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: <TITLE>Homepage Pertama Ini halaman latihan HTML saya yang pertama

Atau 48

Diktat Kuliah Internet & Web Disain – Herman Tolle - UB <TITLE>Homepage Pertama Ini halaman latihan HTML saya yang pertama

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.

49


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 tagtag yang bersesuaian untuk masing-masing format tersebut.

Format teks

Tag awal

Tag Akhir

Bold

Italic

Underline

Monospace

Sebagai contoh kalau kita ingin menggunakan format-format teks ini maka dalam file HTML harus kita tambahkan: <TITLE>format teks dasar My personal website
Format teks html secara umum meliputi Paragraf,monospace, huruf cetak miring (italic) dan huruf cetak tebal (bold).

Tampilan pada browser adalah: 50


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: Kata-kata yang tercetak tebal dan miring

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 implementasikan:

menuliskan

"Tag

Tag

51

"

dapat

kita


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 . Berikut ini contoh penggunaan warna background dokumen HTML :

52

Diktat Kuliah Internet & Web Disain – Herman Tolle - UB bgcolor.html <TITLE>Heading Halaman dengan warna dasar hijau

Tampilan pada browser:

Ada dua macam kode yang dapat kita gunakan untuk menampilkan warna, yaitu: 1.

Warna-warna standar (dalam bahasa inggris) seperti: 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. 53

black,


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 dimana x merupakan nomor level heading dari 1 sampai 6, sedangkan untuk mengakhirinya digunakan tag akhir . Berikut ini contoh penggunaan heading :
Judul utama

:

Sub Judul 1

:

Sub judul 2

:

Sub Judul 3

:

Sub Judul 4

:

Sub judul 5

:

heading level 1 heading level 2 heading level 3 heading level 4 heading level 5 heading level 6

Sekarang buatlah file baru dengan nama lat2.html dan ketik format HTML berikut : Lat2.HTML <TITLE>Heading
Judul utama

Sub Judul 1

Sub judul 2

Sub Judul 3

54

Sub Judul 4

Sub judul 5

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

55


Sekarang buatlah file baru dengan nama lat3.html dan ketik format HTML berikut : Lat3.HTML <TITLE>Perataan pada Heading
HEADING

ALIGN="LEFT"

ALIGN="CENTER"

ALIGN="RIGHT"


56


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 : .........

: Untuk menebalkan teks

.........

: Untuk membuat teks terlihat miring

.........

: Untuk menggarisbawahi teks

<S>.........

: Untuk memberikan coretan pada teks

<STRIKE>.. : Untuk memberikan coretan pada teks, sama dengan elemen <S> ....

: Untuk menampilkan typewriter

.........

: Untuk membesarkan teks

teks

dalam

font

......... : Untuk mengecilkan teks .........

: Untuk membuat teks subscript

.........

: 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. Sekarang buatlah file baru dengan nama lat4.html dan ketik format HTML berikut : Lat4.HTML <TITLE>Memformat Teks dalam HTML Untuk menebalkan teks Untuk membuat teks terlihat miring

57

Diktat Kuliah Internet & Web Disain – Herman Tolle - UB Untuk menggarisbawahi teks <S>Untuk memberikan coretan pada teks <STRIKE>Untuk memberikan coretan pada teks Untuk menampilkan teks dalam font typewriter Untuk membesarkan teks Untuk mengecilkan teks Untuk membuat teks subscript Untuk membuat teks superscript


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. 58


Maka untuk menampilkannya HTML menyediakan atribut-atribut khusus. Ganti dengan garis baru Elemen
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 berkalikali. Ganti dengan Paragraf baru Elemen
digunakan untuk membuat teks dituliskan pada paragraf berikutnya. Elemen
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
. Tag
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 <TITLE>Pemisah antar teks Kalimat ini merupakan contoh untuk ganti baris
dengan elemen br

59

sedangkan kalimat ini merupakan contoh untuk paragraf baru dengan elemen p
diatas adalah penyisipan garis


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: 60

Diktat Kuliah Internet & Web Disain – Herman Tolle - UB Lat6.HTML <TITLE>Menentukan ukuran teks Teks berukuran 1 Teks berukuran 2 Teks berukuran 3 Teks berukuran 4 Teks berukuran 5 Teks berukuran 6 Teks berukuran 7


61


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 : teks warna merah teks warna hijau teks warna biru

Lat7.HTML <TITLE>Mengubah warna teks teks warna merah teks warna hijau teks warna biru

62



Menentukan Jenis font Untuk menentukan suatu jenis font, digunakan atribut FACE dengan contoh perintahnya seperti berikut: .........

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

63

Diktat Kuliah Internet & Web Disain – Herman Tolle - UB <TITLE>Jenis Font font wingdings font jenis arial dengan size=3 font Verdana berwarna merah font courier new tebal miring font symbol font comic sans ms bergarisbawah


64


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
. Penggunaan tag
ini membuat web browser akan menampilkan dokumen dalam bentuk apa adanya (karakter multi spasi, tab dan carriage return tidak diabaikan). Tag
merupakan kependekan dari "preformatted", yang artinya naskah ditampilkan dalam bentuk layout yang asli. Pada contoh berikut ditampilkan perbedaan antara naskah dokumen yang menggunakan tag
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 <TITLE>format teks dasar <TITLE>The
Tag
Tanpa Tag
:
Puisiku selalu hadir setiap malam datang pelan dan merayap menerjang menghiasi hari-hariku yang kelam

Dengan Tag
:

Puisiku selalu hadir setiap malam datang pelan dan merayap menerjang menghiasi hari-hariku yang kelam

65


Catatan : Pada penggunaan tag
, teks akan ditampilkan dengan menggunakan font dengan format monospace. Tampilan pada browser:

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)

66


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
dan diakhiri dengan tag akhir
dan diantara kedua tag tersebut terdapat tag
yang menyatakan list item atau item dalam daftar. Berikut ini adalah suatu contoh dari ordered list : List1.HTML <TITLE>ORDERED LIST HTML menyediakan beberapa jenis daftar/list, yaitu :

daftar yang berurut/daftar dengan nomor
daftar yang tak berurut/daftar dengan titik
daftar menu
daftar istilah


67


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 <TITLE>Ordered List berulang HTML menyediakan beberapa jenis daftar/list, yaitu :

daftar yang berurut/daftar dengan nomor mempunyai beberapa variasi:

daftar berurut dengan nomor
daftar berurut dengan bilangan romawi
daftar berurut dengan huruf besar
daftar berurut dengan huruf kecil
daftar berurut mulai nomor atau huruf tertentu

daftar menu
daftar istilah


68


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
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 (1,2,3,4,...)

START=x

Menentukan nilai awal dari item dalam daftar, dimana x adalah nilai awal daftar

daftar

69

berurut

pada

nomor

(default)


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
dan tag akhir
. Sedangkan setiap item di dalamnya menggunakan tag yang sama seperti pada Ordered List, yaitu
. Contoh kode HTML nya sebagai berikut :

List4.HTML <TITLE>UNORDERED LIST HTML menyediakan beberapa jenis daftar/list, yaitu :

daftar menu
daftar istilah


70


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 <TITLE>Kombinasi Ordered List dengan unordered List HTML menyediakan beberapa jenis daftar/list, yaitu :

daftar berurut dengan /daftar dengan nomor
daftar yang tak berurut mempunyai beberapa variasi :

Unordered List dengan tanda cakram (TYPE=disc)
Unordered List dengan tanda bulatan (TYPE=circle)
Unordered List dengan tanda kotak (TYPE=square)

71

daftar menu
directory list
daftar istilah


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

72


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

73


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

74


Penggunaan Link Pembuatan link dalam suatu file HTML dapat dilakukan dengan menggunakan tag yang diikuti dengan parameter referensinya HREF.

Contoh penggunaanya: Klik di sini

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). Bagian teks yang akan diberi tanda

Contoh penggunaannya: Bagian 1

75


maka untuk merujuknya digunakan: Klik di sini untuk menuju Bagian 1

4.6 Penyisipan Gambar Menggunakan elemen IMG Elemen IMG yang dinyatakan dengan tag adalah suatu tag tunggal yang tidak mempunyai tag akhir seperti halnya
. 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 :

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 : 76


gambar.HTML <TITLE>INLINE IMG
INLINE IMG
Inline image adalah suatu gambar yang muncul didalam teks pada suatu web page, seperti gambar berikut ini


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:

77


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.

78


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 <TITLE>Pemakaian Atribut WIDTH dan HEIGHT gambar dalam ukuran sebenarnya
Width=45 Height=80
Width=145 Height=180


79


Elemen-elemen lain dalam tag 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 . Jika gambar ini diklik, maka link akan menuju ke informasi yang dituju. Contoh penggunaannya dalam kode HTML adalah sebagai berikut :

Gambar2.HTML <TITLE>Link dengan gambar
Link dengan gambar
Link dengan gambar yaitu dengan mengklik gambar komputer berikut maka link akan menuju ke informasi yaitu berupa file gambar.html

80

HYPERTEXT MARKUP LANGUAGE

Recommend Documents

Judul utama

Sub Judul 1

Sub judul 2

Sub Judul 3

Sub Judul 4

Sub judul 5

Judul utama

Sub Judul 1

Sub judul 2

Sub Judul 3

Sub Judul 4

Sub judul 5

HEADING

ALIGN="LEFT"

ALIGN="CENTER"

ALIGN="RIGHT"

Tanpa Tag :

Dengan Tag :

INLINE IMG

Link dengan gambar

Tanpa Tag
:

Dengan Tag
: