BABB III HTTMMLL Struktur Dasar HTML

Felix Andreas Sutanto, S.Kom, M.Cs – FTI UNISBANK

BBAABB IIII

HHTTMMLL

Struktur Dasar HTML HTML merupakan singkatan dari Hyper Text Markup Language. HTML adalah

bahasa mark up yang digunakan untuk membangun suatu halaman web. HTML adalah sekumpulan perintah (tag) yang digunakan untuk mengatur

bagaimana suatu informasi ditampilkan dalam website. Untuk membuat file HTML tidak memerlukan software khusus, cukup

menggunakan browser seperti Internet Explorer, Nestcape, Konqueror, Mozilla, Opera dan sebagainya. Browser biasanya terintegrasi dengan sistem operasi,

dengan demikian cukup mudah untuk menemukannya.

File HTML sebenarnya hanyalah file teks biasa yang mengandung tag-tag HTML. Karena merupakan file teks biasa, maka HTML bisa dibuat dengan editor teks sederhana seperti notepad.

Standar pembuatan dokumen HTML telah diatur oleh W3C (World Wide Web

Consortium). Adapun struktur dasar dokumen HTML adalah sebagai berikut: <HTML>

<HEAD> 

</HEAD>

<BODY> 

</BODY>

</HTML>

Bagian head umumnya berisi informasi mengenai dokumen, seperti: penyedia

judul dokumen, penghubung antar dokumen, memberitahu browser untuk membuat form pencarian, serta menyediakan metode untuk mengirim pesan ke tipe browser tertentu. Perintah (tag) yang paling sering digunakan dalam

bagian ini adalah tag <TITLE> untuk memberi judul halaman web.


Sedangkan bagian body adalah bagian untuk isi halaman web. Bagian body biasanya berisi dokumen HTML yang meliputi teks, gambar, link, tabel dan

lain-lain.

Untuk memahami struktur dasar HTML, buatlah file sebagai berikut :

Nama file : pertama.htm

<HTML>

<HEAD> <TITLE>Latihan HTML</TITLE>

</HEAD>

<BODY> Ini adalah latihan pertamaku dalam membuat halaman web.

Aku akan terus belajar agar menjadi mahir dalam membangun web profesional. </BODY>

</HTML>

Hasil yang tampil di browser dapat dilihat pada gambar sebagai berikut:

Gambar 2.1 Hasil pertama.htm


Mengatur Body Bagian body merupakan isi dari dokumen HTML yang meliputi teks, gambar, link, tabel dan lain-lain. Bagian body diawali dengan tag <BODY> dan diakhiri

dengan tag </BODY>.

Tag <BODY> mempunyai beberapa atribut yang digunakan dalam penampilan dokumen HTML. Atribut-atribut tag <BODY> adalah sebagai berikut:

Atribut Fungsi

BGCOLOR Menentukan warna latar belakang

BACKGROUND Menentukan latar belakang dari file gambar

BGPROPERTIES Menentukan gambar latar belakang ikut tergulung atau tidak. ( nilai atribut diisi “FIXED” )

TOPMARGIN Menentukan batas atas dokumen dalam pixel

LEFTMARGIN Menentukan batas kiri dokumen dalam pixel

TEXT Menentukan warna teks

LINK Menentukan warna link yang belum dikunjungi

ALINK Menentukan warna dari link yang aktif

VLINK Menentukan warna link yang telah dikunjungi

Memberi Warna Latar Belakang

Untuk memberi warna latar belakang pada halaman web, pada tag <BODY> dapat ditambahkan atribut BGCOLOR. Nilai BGCOLOR berupa nama warna maupun kode heksadesimal yang terdiri dari angka 1 sampai 9 dan huruf A

sampai F. Penulisan kode heksadesimal diawali dengan tanda “#”.

Contoh warna dan kode heksadesimalnya adalah sebagai berikut:

Warna Kode Heksadesimal

Hitam #000000

Putih #FFFFFF

Merah #FF0000

Kuning #FFFF00

Hijau #00FF00

Biru #0000FF

Magenta #FF00FF


Cyan #00FFFF

Abu-abu #CCCCCC

Sebagai latihan, lakukan sedikit perubahan pada file latihan pertama yang telah Anda selesaikan. Adapun perubahannya adalah sebagai berikut:

Nama file : bgcolor.htm

<HTML>

<HEAD>

<TITLE>Latihan HTML</TITLE> </HEAD>

<BODY BGCOLOR="#00FF00"> Ini adalah latihan pertamaku dalam membuat halaman web.

Aku akan terus belajar agar menjadi mahir dalam membangun web profesional. </BODY>

</HTML>

Hasilnya akan terlihat seperti gambar sebagai berikut:

Gambar 2.2 Hasil bgcolor.htm


Menjadikan Gambar Sebagai Latar Belakang

Sebuah gambar dapat juga dijadikan sebagai latar belakang dokumen web.

Gambar yang biasanya digunakan adalah gambar yang memiliki ekstensi *.jpg, *.gif, *.png dan sebagainya. Untuk menjadikan gambar sebagai latar belakang

digunakan atribut BACKGROUND pada tag <BODY>.

Sebagai latihan, lakukan sedikit perubahan pada file bgcolor.htm yang telah Anda selesaikan. Adapun perubahannya adalah sebagai berikut:

Nama file : background.htm

<HTML>


</HEAD>

<BODY BACKGROUND="gbback.gif">

Ini adalah latihan pertamaku dalam membuat halaman web. Aku akan terus belajar agar menjadi mahir dalam membangun web profesional.

</BODY>

</HTML>


Gambar 2.3 Hasil background.htm


Membuat Baris Pada file-file html yang telah Anda selesaikan, Anda menuliskan pergantian baris pada kalimat kedua, tetapi pada browser tidak menghasilkan suatu baris

baru. Untuk membuat suatu baris baru Anda harus menggunakan tag <BR>.

Sebagai latihan, lakukan sedikit perubahan pada file latihan pertama yang telah Anda selesaikan. Adapun perubahannya adalah sebagai berikut:

Nama file : br.htm

<HTML>


</HEAD>

<BODY>

Ini adalah latihan pertamaku dalam membuat halaman web. <BR> Aku akan terus belajar agar menjadi mahir dalam membangun web profesional.

</BODY>

</HTML>


Gambar 2.4 Hasil br.htm


Membuat Paragrap Saat menyusun dokumen yang panjang, terkadang diperlukan paragrap untuk memisahkan antar bagian kalimat. Untuk membuat paragrap dalam html

digunakan tag <P> dan tag <DIV>. Keduanya memiliki atribut yang sama untuk mengatur perataan teks, yaitu atribut ALIGN. Atribut ini dapat

menerima nilai left (rata kiri), right (rata kanan), center (rata tengah) dan justify (rata kanan kiri).

Tag <P>

Tag <P> digunakan untuk membuat paragrap dengan jarak yang cukup lebar

untuk memisahkan antar blok kalimat. Biasanya tag <P> tidak perlu ditutup dengan tag </P>. Sebagai latihan penerapannya, buatlah file dengan kode

html sebagai berikut:

Nama file : paragrap.htm

<HTML>


</HEAD>

<BODY> MENANTI CINTA

<P>

Mereka yang tidak menyukainya, menyebutnya tanggung jawab. Mereka yang bermain dengannya, menyebutnya sebuah permainan.

Mereka yang tidak memilikinya, menyebutnya sebuah impian. Mereka yang mencintai, menyebutnya takdir.

<P ALIGN="center"> Tuhan mengetahui yang terbaik, walaupun kadang sulit untuk dimengerti.

Namun kita tetap harus percaya bahwa Ia telah siap memberi yang lebih baik. <P ALIGN="justify">

Mengapa menanti?

Karena walaupun kita ingin mengambil keputusan, kita tidak ingin tergesa-gesa. Karena walaupun kita ingin cepat-cepat, kita tidak ingin sembrono.

Karena walaupun kita ingin segera menemukan orang yang kita cintai, kita tidak ingin kehilangan jati diri kita dalam proses pencarian itu.

</BODY>

</HTML>


Hasil dari file html pada browser akan tampak seperti pada gambar sebagai berikut:

Gambar 2.5 Hasil paragrap.htm

Tag <DIV>

Tag <DIV> digunakan untuk membuat paragrap yang tidak memiliki jarak

pemisah antar blok kalimat. Tag <DIV> perlu ditutup dengan tag </DIV>. Sebagai latihan penerapannya, buatlah file dengan kode html sebagai berikut:

Nama file : div.htm

<HTML>


</HEAD>

<BODY>

MENANTI CINTA <DIV>

Mereka yang tidak menyukainya, menyebutnya tanggung jawab. Mereka yang bermain dengannya, menyebutnya sebuah permainan.


Mereka yang tidak memilikinya, menyebutnya sebuah impian.

Mereka yang mencintai, menyebutnya takdir. </DIV>

<DIV ALIGN="center"> Tuhan mengetahui yang terbaik, walaupun kadang sulit untuk dimengerti.

Namun kita tetap harus percaya bahwa Ia telah siap memberi yang lebih baik. </DIV>

<DIV ALIGN="justify"> Mengapa menanti?

Karena walaupun kita ingin mengambil keputusan, kita tidak ingin tergesa-gesa.

Karena walaupun kita ingin cepat-cepat, kita tidak ingin sembrono. Karena walaupun kita ingin segera menemukan orang yang kita cintai,

kita tidak ingin kehilangan jati diri kita dalam proses pencarian itu. </DIV>

</BODY>

</HTML>


Gambar 2.6 Hasil div.htm


Format Teks Dalam dokumen html, teks yang ditampilkan dapat diatur sesuai dengan keinginan Anda. Misalnya untuk mewarnai teks, mencetak tebal, miring,

bergaris bawah dan sebagainya. Untuk mengaturnya digunakan tag <FONT>. Tag <FONT> dapat digunakan untuk mengatur jenis, ukuran dan warna font.

Adapun penggunaan tag <FONT> adalah sebagai berikut : <FONT FACE=”namafont” COLOR=”warna” SIZE=”ukuran”>

Namafont diisi dengan jenis font yang terdapat pada komputer, warna diisi dengan warna yang diinginkan (bisa menggunakan bilangan heksadesimal) dan ukuran diisi nilai 1 sampai 7 untuk ukuran normal, bisa juga

ditambahkan operator plus (+) maupun minus (-) untuk memperbesar dan memperkecil ukuran font.

Selain itu untuk mengatur dekorasi teks lainnya, HTML menyediakan tag-tag

sebagai berikut:

Tag Fungsi

<B> Mencetak tebal.

<I> Mencetak miring.

<U> Memberi garis bawah.

<S> Memberi coretan.

<BIG> Membesarkan teks.

<SMALL> Mengecilkan teks.

<SUB> Membuat teks subscript.

<SUP> Membuat teks superscript.

Sebagai latihan penerapannya, buatlah file dengan kode html sebagai berikut:

Nama file : font.htm

<HTML>

<HEAD>


<BODY>

<FONT FACE="verdana" COLOR="blue"> <B><U>KATA HIKMAT</U></B><BR>

</FONT>

<FONT FACE="arial" COLOR="#FF0000" SIZE="+2">


Tidak ada orang yang dapat membuat Anda merasa rendah diri

tanpa persetujuan Anda.<BR> </FONT>

<big>~ Eleanor Roosevelt ~</big> </FONT>

</BODY>

</HTML>


Gambar 2.7 Hasil font.htm

Tag Heading Tag heading adalah tag yang seringkali digunakan untuk menunjukkan judul maupun topik dari suatu dokumen. Tag heading ditulis dengan format <Hn>,

dimana n menunjukkan nomor level heading. Pada HTML, heading dimulai dari tag <H1> sampai dengan tag <H6>. Penggunaan tag heading secara otomatis akan membuat teks heading tercetak tebal dan menghasilkan baris

baru.



Nama file : heading.htm

<HTML>

<HEAD>


<BODY> <H1>Heading 1</H1>

<H2>Heading 2</H2> <H3>Heading 3</H3>

<H4>Heading 4</H4> <H5>Heading 5</H5>

<H6>Heading 6</H6>

</BODY>

</HTML>

Hasil yang tampil di browser dapat dilihat pada gambar berikut ini:

Gambar 2.8 Hasil heading.htm


Tag <PRE> Tag <PRE> adalah tag yang digunakan untuk membuat tampilan dokumen pada browser sama persis dengan tampilan pada teks editor. Tag <PRE>

seringkali digunakan untuk menuliskan kode-kode program maupun untuk membuat bentuk tampilan tertentu yang mungkin cukup sulit apabila

dituliskan dalam kode HTML.

Sebagai contoh, apabila Anda menuliskan teks sebagai berikut: main()

{ int i;

for (i=1;i<6;i++) {

cout << i << endl; } }

Tanpa tag <PRE>, hasil yang akan tampil pada browser tidak akan sama

seperti yang Anda tuliskan. Anda harus menambahkan tag <BR> dan kode untuk menggantikan spasi yaitu &nbsp.

Dengan tag <PRE>, salah satu keuntungannya adalah penggunaan spasi dan baris tanpa harus menuliskan kode HTML. Pemakaian tag <PRE> sebaiknya

diakhiri dengan tag </PRE> untuk memudahkan pengaturan dokumen.


Nama file : pre.htm

<HTML>


</HEAD>

<BODY> Kode program bahasa C++

<PRE> main()

{

int i; for (i=1;i<6;i++)

{ cout << i << endl;

} }


</PRE>

Kode program diatas adalah contoh perulangan. </BODY>

</HTML>


Gambar 2.9 Hasil pre.htm

Membuat Daftar/List Daftar/list ditampilkan dalam kumpulan teks yang disusun sedemikian rupa, misalnya memiliki nomor urutan maupun memiliki tanda-tanda khusus. Untuk membuat daftar atau list, ada beberapa macam list yang bisa

digunakan yaitu Unordered List, Ordered List, Definition List.

Unordered List

Unordered List menggunakan bullet untuk menandai setiap item dari list.

Untuk membuat list ini digunakan tag <UL> dan tag <LI> untuk membuat daftar isiannya. Bentuk bullet dapat diatur dengan menambahkan atribut

TYPE pada tag <UL>. Sebagai latihan penerapannya, buatlah file dengan kode html sebagai berikut:


Nama file :ul.htm

<HTML>

<HEAD>


<BODY> DATA MAHASISWA :

<UL TYPE="disk"> <LI>Eva Anggreani

<LI>Intan Mardhikasari <LI>Kartika Mayangsari

</UL>

</BODY>

</HTML>


Gambar 2.10 Hasil ul.htm

Ordered List

Ordered List adalah daftar yang tiap bagiannya disertai dengan penomoran. Untuk membuat list ini digunakan tag <OL> dan tag <LI>. Tag <OL> memiliki

atribut START untuk menentukan nilai awal item list dan atribut TYPE untuk menentukan jenis penomorannya. Atribut START akan diisi dengan nomor


awal yang ingin Anda tampilkan pada browser, sedangkan TYPE dapat diisi dengan tipe penomoran yang Anda pilih.

Adapun tipe penomoran pada Ordered List adalah sebagai berikut:

Type Hasil Penomoran

1 1, 2, 3 ...

I I, II, III ...

i i, ii, iii ...

A A, B, C ...

a a, b, c ....

Penggunaan nomor secara langsung pada list juga dapat diberikan melalui tag

<LI> dengan menambahkan atribut VALUE. Apabila cara ini digunakan, maka secara otomatis list dibawahnya akan mengikuti penomorannya. Dengan

demikian akan mengabaikan urutan penomoran yang diatur sebelumnya pada tag <OL>.


Nama file :ol.htm

<HTML>


</HEAD>

<BODY>

DATA MAHASISWA : <OL TYPE="1" START="5">

<LI>Eva Anggreani <LI>Intan Mardhikasari

<LI VALUE="10">Kartika Mayangsari </OL>

</BODY>

</HTML>



Gambar 2.11 Hasil ol.htm

Definition List

Definition List adalah daftar yang mempunyai keterangan pada itemnya.

Untuk membuat list ini digunakan tag <DL> untuk membuat Definition List, tag <DT> untuk item list dan tag <DD> untuk keterangan itemnya.


Nama file :dl.htm

<HTML>

<HEAD>


<BODY>

DATA MAHASISWA : <DL>

<DT>Eva Anggreani <DD>PMR, Olah Raga

<DT>Intan Mardhikasari <DD>Olah Raga, Seni


<DT>Kartika Mayangsari <DD>Olah Raga, Komputer

</DL> </BODY>

</HTML>


Gambar 2.12 Hasil dl.htm

Menampilkan Gambar Gambar seringkali dijadikan elemen yang memegang peranan penting dalam sebuah website. Hal ini mungkin terjadi karena penggunaan gambar dapat

menarik perhatian serta memperjelas maksud dari informasi yang ditampilkan pada website.

Untuk menambahkan gambar ke dalam dokumen digunakan tag <IMG>. Jenis gambar yang bisa ditambahkan dalam dokumen HTML harus dikenal oleh

browser. Diantara banyak format gambar, yang dikenal oleh banyak browser adalah gambar yang memiliki ekstensi GIF dan JPG.


Secara sederhana, untuk menampilkan gambar digunakan tag <IMG> sebagai berikut:

<IMG SRC=”target_gambar”>

Apabila target gambar berada pada direktori yang berbeda dengan direktori

dimana file html berada, maka penggunaan tag <IMG> menjadi sebagai berikut:

<IMG SRC=”nama_direktori/target_gambar”>

Tag <IMG> mempunyai beberapa atribut sebagai berikut:

Atribut Fungsi

SRC Menunjukkan nama file gambar

ALT Menampilkan teks keterangan (tool tip) pada gambar atau sebagai teks pengganti gambar jika gambar

tidak dapat ditampilkan oleh browser.

HEIGHT Mengatur tingi gambar

WIDHT Mengatur lebar gambar

ALIGN Menentukan posisi gambar (Left, Right, Center)

HSPACE Mengatur jarak kosong horizontal

VSPACE Mengatur jarak kosong vertical


Nama file :image.htm

<HTML>


</HEAD>

<BODY> <IMG SRC="gambar.gif"

WIDTH="100"

HEIGHT="150" ALT="ini gambar favoritku">

</BODY>

</HTML>



Gambar 2.13 Hasil image.htm

Mengatur Posisi Gambar

Dengan menambahkan atribut ALIGN, suatu gambar dapat diatur posisinya. Misalnya berada pada posisi kiri atau kanan suatu obyek lainnya, baik itu teks

maupun gambar.


Nama file :image2.htm

<HTML>


</HEAD>

<BODY> <IMG SRC="gambar.gif"

WIDTH="100" HEIGHT="150"

ALT="ini gambar favoritku"

ALIGN="LEFT"> <IMG SRC="gambar2.gif"

WIDTH="100" HEIGHT="150"


ALT="ini gambar2 favoritku"

ALIGN="RIGHT"> </BODY>

</HTML>


Gambar 2.14 Hasil gambar2.htm

Membuat Link Dalam membangun website, hal yang cukup penting adalah mengatur hubungan antara suatu halaman dengan halaman lainnya. Untuk keperluan navigasi antar halaman digunakan link. Link bisa diberikan kepada teks

maupun gambar tertentu. Pada saat teks atau gambar tersebut diklik, secara otomatis tampilan web akan berpindah ke dokumen yang lain. Hal yang

terpenting adalah target dokumen harus ada dan benar. Apabila targetnya salah atau tidak ada filenya, maka browser akan menampilkan pesan

kesalahan bahwa halaman tersebut tidak ada. Untuk membuat link digunakan tag <A> dan ditutup dengan tag </A>.


Nama file : link.htm


<HTML>

<HEAD>


<BODY>

Klik teks dibawah ini untuk melihat hasilnya.<BR> <A HREF="pertama.htm">Link 1</A><BR><BR>

Klik gambar dibawah ini untuk melihat hasilnya.<BR>

<A HREF="pertama.htm"> <IMG SRC="gambar2.gif">

</A>

</BODY>

</HTML>


Gambar 2.15 Hasil link.htm

Membuat Tabel Dalam membuat dokumen, tabel memiliki peranan yang cukup penting. Tabel dapat digunakan untuk menyajikan informasi secara teratur, sehingga


penyampaian data akan menjadi lebih jelas. Selain itu sekarang ini tabel juga seringkali dimanfaatkan untuk mengatur layout dari halaman web. Tag-tag

yang digunakan untuk membuat tabel adalah sebagai berikut :

a. Tag <TABLE> untuk membuat tabel.

b. Tag <TH> untuk menyatakan judul kolom atau baris (Table Header).

c. Tag <TR> untuk menyatakan baris tabel (Table Row).

d. Tag <TD> untuk menyatakan isi tiap kolom (Table Data).

Atribut yang dapat diberikan pada tag-tag tersebut adalah sebagai berikut:

Atribut Fungsi

BGCOLOR Menentukan warna latar belakang

BACKGROUND Menentukan gambar latar belakang

BORDER Menentukan tebal bingkai tabel

BORDERCOLOR Menentukan warna bingkai tabel

CELLSPACING Menentukan jarak spasi antar sel

CELLPADING Menentukan jarak isi sel dengan bingkai

HEIGHT Menentukan tinggi tabel

WIDTH Menentukan lebar tabel

ALIGN Posisi horizontal tabel (Left, Center, Right, Justify)

VALIGN Menentukan posisi vertikal teks dalam sel (Top,

Middle, Bottom, Baseline)

COLSPAN Menentukan jumlah kolom yang digabung

ROWSPAN Menentukan jumlah baris yang digabung


Nama file : tabel.htm

<HTML>

<HEAD>


<BODY> <TABLE BORDER="1">

<TR> <TH>Nama</TH>

<TH>Alamat</TH> <TH>Hobby</TH>


</TR>

<TR>

<TD>Andre</TD> <TD>Purwodadi</TD>

<TD>Membaca</TD> </TR>

<TR>

<TD>Dwie</TD>

<TD>Sragen</TD> <TD>Makan</TD>

</TR> </TABLE>

</BODY>

</HTML>


Gambar 2.16 Hasil link.htm

Mengatur Tabel

Untuk mendapatkan hasil yang lebih baik, tabel dapat diatur dengan

memanfaatkan atribut-atribut yang dimiliki oleh tag-tag penyusunnya. Misalnya untuk mengatur jarak isi sel, memberi warna latar belakang pada

suatu sel, mengatur perataan dan sebagainya.



Nama file : tabel2.htm

<HTML>

<HEAD>


<BODY>

<TABLE BORDER="1" CELLPADDING="15">

<TR> <TH WIDTH="150" BGCOLOR="Cyan">Nama</TH>

<TH WIDTH="250" BGCOLOR="Cyan">Alamat</TH> <TH WIDTH="150" BGCOLOR="Cyan">Hobby</TH>

</TR>

<TR>

<TD ALIGN="Center">Andre</TD> <TD>Purwodadi</TD>

<TD>Membaca</TD> </TR>

<TR>

<TD ALIGN="Center">Dwie</TD> <TD>Sragen</TD>

<TD>Makan</TD>

</TR> </TABLE>

</BODY>

</HTML>



Gambar 2.17 Hasil tabel2.htm

Menggabungkan Baris / Kolom

Kadangkala dalam membuat tabel ada suatu baris / kolom yang perlu digabung maupun dipisah berdasarkan hal-hal tertentu. HTML menyediakan

atribut penggabungan melaui tag <TD> dan <TH>, yaitu ROWSPAN untuk menggabungkan baris dan COLSPAN untuk menggabungkan kolom.

Misalnya tabel yang diperlukan berbentuk sebagai berikut:

Nilai

Ujian 1 Ujian 2 Ujian 3

atau

Rekapitulasi Tertinggi : 100

Terendah : 60

Rata-rata : 75



Nama file : tabel3.htm

<HTML>

<HEAD>


<BODY> <TABLE BORDER="1">

<TR> <TD COLSPAN="3">Nilai</TD>

</TR>

<TR>

<TD>Ujian1</TD> <TD>Ujian 2</TD>

<TD>Ujian 3</TD> </TR>

<TR>

<TD>80</TD> <TD>85</TD>

<TD>90</TD>

</TR> </TABLE>

<BR>

<TABLE BORDER="1"> <TR>

<TD ROWSPAN="3">Rekapitulasi</TD>

<TD>Tertinggi : 100</TD> </TR>

<TR>

<TD>Terendah : 100</TD> </TR>

<TR>

<TD>Rata-Rata : 100</TD>

</TR> </TABLE>

</BODY>

</HTML>



Gambar 2.18 Hasil tabel3.htm

Membuat Frame Dalam membuat halaman web, Anda dapat menampilkan beberapa dokumen yang telah dibuat dalam satu halaman pada browser. Pembagian jendela

browser menjadi beberapa bagian, dimana tiap-tiap bagian merupakan dokumen HTML tersendiri inilah yang disebut dengan frame. Untuk membuat

frame digunakan tag <FRAMESET> dan <FRAME>. Frame dapat dibagi secara horisontal maupun vertikal. Penambahan atribut

COLS pada tag <FRAMESET> digunakan untuk mengatur frame secara horisontal, sedangkan untuk mengatur secara vertikal digunakan atribut

ROWS. Contoh bentuk penggunaan tag <FRAMESET> adalah sebagai berikut: <FRAMESET COLS=”30%, 300, *”>

Maksud kode tersebut adalah frame terdiri dari tiga bagian. Bagian pertama

berukuran 30% dari lebar layar, bagian kedua berukuran 300 pixel, sedangkan bagian terakhir berukuran sisa dari lebar layar.


Nama file : frame.htm

<HTML>


<HEAD>


<FRAMESET COLS="30%,*">

<FRAME SRC="isiframe1.htm"> <FRAME SRC="isiframe2.htm">

</FRAMESET>

</HTML>

Nama file : isiframe1.htm

<HTML>

<HEAD>

<TITLE>Latihan HTML</TITLE>

</HEAD>

<BODY> File isiframe1.htm

</BODY>

</HTML>

Nama file : isiframe2.htm

<HTML>

<HEAD>


<BODY>

File isiframe2.htm

</BODY>

</HTML>



Gambar 2.19 Hasil frame.htm

Pada penerapannya, pada tag <FRAME> dapat ditambahkan atribut sebagai

berikut:

Atribut Fungsi

SCR Menunjukkan file target

NAME Memberi nama spesifik untuk frame.

Atribut ini akan berguna untuk menentukan target dari link. Misalnya link berada pada frame pertama,

tetapi pada saat link tersebut diklik dokumen targetnya ditampilkan pada frame kedua.

Contoh:

<FRAME SRC=”x.htm” NAME=”kiri”>

SCROLLING Menentukan ada tidaknya scrolling. Isian yang dapat diberikan adalah yes / no.

Contoh:

<FRAME SRC=”x.htm” SCROLLING=”no”>

NORESIZE Untuk mengatur agar frame tidak bisa diubah

ukurannya.


Contoh:

<FRAME SRC=”x.htm” NORESIZE>

FRAMEBORDER Untuk menentukan ada tidaknya garis pembatas

antar frame.

Contoh:

<FRAME SRC=”x.htm” FRAMEBORDER=”0”>

Frame sebaiknya digunakan seperlunya saja. Penggunaan frame akan

memperlambat kecepatan akses. Akan tetapi frame akan sangat berguna apabila Anda memiliki banyak halaman yang akan ditampilkan pada browser.

Hal ini akan memudahkan pengunjung web untuk mengetahui menu apa saja yang dimiliki oleh web tersebut.

Internal Frame Cara lain untuk menampilkan beberapa dokumen dalam layar yang sama

pada browser dapat dilakukan dengan menggunakan tag <IFRAME>. Tag <IFRAME> adalah tag yang memiliki fungsi hampir sama seperti tag <FRAME>,

tetapi hasil pembagian berada pada bagian halaman itu sendiri. Karena hasilnya berada pada layar yang sama, lebih baik pemakaian Internal

Frame diatur dengan ukuran tertentu. Tag <IFRAME> dapat diatur ukurannya melalui atribut WIDTH dan HEIGTH.


Nama file : iframe.htm

<HTML>

<HEAD>


<BODY>

<P>Latihan Penggunaan IFRAME <P>

<IFRAME WIDTH="400" HEIGTH="100" SRC="paragraf.htm"> </IFRAME>

</BODY>

</HTML>



Gambar 2.20 Hasil iframe.htm


PROYEK

Personal Web

BABB III HTTMMLL Struktur Dasar HTML

Documents

Transcript of BABB III HTTMMLL Struktur Dasar HTML