1. Mengenal Script HTML Dasar
Html
adalah kependekan dari (HyperText Markup Language), merupakan bahasa
scripting yang berguna untuk menuliskan halaman Web dan juga sebagai
bahasa script dasar yang berjalan bersama berbagai bahasa scripting
program lainnya. Semua
tag-tag HTML bersifat dinamis, artinya kode program tidak dapat
dijadikan sebagai file executable program. Hal ini disebabkan HTML
hanyalah sebuah bahasa scripting yang dapat berjalan didalam
browser(pengakses web), antara lain Internet Explorer, Netscape
Navigator, Opera, Mozilla dan lain-lain. Untuk melihat kode program pada
halaman browser melalui menu View -> Source, akan ditampilkan semua tag berserta isi dari halaman web tersebut.
Semua
bahasa scripting yang berjalan dibawah Web dapat didukung oleh HTML,
biasanya bahasa-bahasa tersebut melakukan Embeded Script pada tag-tag
HTMl. Didalam pembelajaran ini kita akan mengulas mengenai pemrograman
PHP yang Embeded dengan tag-tag HTML.
Karena
HTMl hanyalah merupakan sebuah kode Scripting dan bukan merupakan
Program kompiler maka Anda dapat menuliskan semua kode program dengan
menggunakan Editor program yang Anda sukai seperti Macromedia
Dreamweaver, Notepad, Frontpage.
2. Sintaks Dasar HTML
Sebagai sebuah elemen dasar didalam pemrograman Web, HTML memiliki aturan-aturan dalam penulisannya. Ciri
utama dalam HTML adalah adanya tag dan elemen. Elemen dalam dokumen
HTML dikategorikan menjadi dua yaitu elemen <HEAD> yang berfungsi
sebagai kepala dalam program dan diletakkan setelah pembukaan kode
<HTML>. Elemen yang kedua adalah elemen <BODY> yang berguna
utuk meletakkan semua isi web yang kita buat. Setiap dokumen HTMl selalu
didahului dengan sebuah Tag <HTML> yang menandakan bahwa dokumen
tersebut adalah dokumen HTMl. Tag tersebut adalah <HTML> dan kemudian harus ditutup dengan tag </HTML>.
Dalam halaman HTML, terdapat tag yang digunakan untuk mendefinisikan judul yang berkaitan dengan halaman web yang dibuat. Tag ini adalah tag <TITLE> Sintaks penulisannya adalah sebagai berikut :
<head>
<title> … Judul … </title>
</head>
Selain
TITLE, tag <HEAD> juga memiliki elemen yang berguna untuk
memberikan informasi yang berhubungan dengan halaman Web HTMl tersebut
yaitu tag META. Sintaksnya adalah :
<meta atribut = “value”>
|
Atribut
|
Value
|
Keterangan
|
|
Name
|
Text
|
Digunakan untuk mendeklarasikan kedudukan pengisi, misal “programmer”
|
|
Content
|
Text
|
Menjelakan dari judul yang dideklarasikan pada atribut name
|
|
http-equiv
|
Text
|
Untuk mendeklarasikan atribut server HTTP
|
Contoh penggunaan Meta didalam aplikasi web yang berkaitan dengan programmernya : <meta name=”programmer” content=”nama_anda”> atau <meta http-equiv=”expires” content=”Wed, 14 April 2005 16:30:00 gmt”>
Yang
perlu diperhatikan adalah semua tag harus menggunakan kode pembuka
<> dan kode penutup</>. Sebagai contoh HTML yang dimulai
dengan kode <HTML> harus diakhiri dengan kode </HTML>.
Beberapa bentuk kode yang wajib ada dalam menuliskan dokumen HTML antara lain :
- <html> </html> : Didalam
tag HTML hal yang harus ada adalah kode <HTML> yang menyatakan
jenis dokumen yang dibuat, dan harus ditutup dengan kode </HTML>
- <head> </head> : Kode <HEAD> jika diartikan berarti kepala dalam program, dan diakhiri dengan kode </HEAD>. Diletakkan setelah kode <HTML>
- <title> </title> : Kode
ini selalu diletakkan didalam kode <HEAD>. Kode ini digunakan
untuk mendeklarasikan judul yang akan ditampilkan dalam browser Web yang
dibuat.
- <body> </body> : Merupakan kode yang berguna untuk meletakkan semua isi web yang dibuat. Kode ini diawali dengan tanda <BODY> dan diakhiri dengan </BODY>
Didalam
penulisannya HTML tidak membedakan antara penggunaan huruf besar dan
kecil ( case insensitive ). Anda dapat menulis kode <HTML> atau
<html> hasilnya akan sama saja. Berikut contoh program HTML yang
pertama.
Contoh1.html
<HTML>
<HEAD>
<TITLE>Judul Halaman Web Saya </TITLE>
</HEAD>
<BODY>
Bagian utama dari Isi suatu dokumen
</BODY>
</HTML>
3. Format Halaman dan Paragraf
Warna dan Background Pada Halaman
Pada
semua halaman web, Anda dapat mendeklarasikan warna latar belakang atau
background halaman. Pendeklarasian tersebut dapat dilakukan dengan
atribut yang disisipkan didalam tag <body>, sehingga atribut
tersebut akan mempengaruhi terhadap semua halaman web yang telah dibuat.
Selain
warna latar belakang, dapat juga kita menggunakan gambar sebagai
background ke halaman web. Background tersebut apabila dilihat dari
fungsinya hanya untuk memperindah dan menyerasikan halaman web dengan
isi yang ada didalamnya. Namun perlu diperhatikan apabila gambar yang
digunakan terlalu banyak akan mempengaruhi kecepatan akses web tersebut.
Beberapa atribut yang digunakan didalam tag BODY adalah :
|
Atribut
|
Value
|
Keterangan
|
|
Bgcolor
|
#000000-ffffff
|
Untuk menentukan warna background
|
|
Background
|
File gambar
|
Membuat background gambar
|
|
Text
|
#000000-ffffff
|
Warna pada text diseluruh halaman
|
|
Link
|
|
Warna link yang belum dikunjungi
|
|
Vlink
|
|
Warna link yang telah dikunjungi
|
|
Alink
|
|
Warna link yang aktif
|
|
Left margin
|
0 – n
|
Mengatur jarak margin kiri halaman
|
|
Topmargin
|
0 – n
|
Mengatur jarak margin atas halaman
|
|
Marginwidth
|
0 – n
|
Mengatur jarak lebar margin halaman
|
|
Marginheight
|
0 – n
|
Mengatur jarak tinggi margin halaman
|
Secara
default halaman web akan menciptakan halaman hasil berwarna putih.
Untuk mengubahnya anda dapat menggunakan atribut bgcolor=”value”, yang
disisipkan pada tag <BODY> seperti berikut.
<body bgcolor=”value”> … isi web … </body>
Warna
adalah sebuah kumpulan code ASCII yang berasal dari pencampuran
warna-warna dasar RGB (Red Green Blue). Anda dapat menggunakan warna
yang berupa kode ASCII didahului dengan tanda (#) atau dapat langsung
mengetikkan nama warnanya (red, green, white, atau blue).
Berikut adalah contoh halaman dengan deklarasi warna hijau sebagai warna backgroundnya.
Contoh2.html
<HTML>
<HEAD>
<TITLE> Contoh background hijau </TITLE>
</HEAD>
<BODY bgcolor=”green”>
Pewarnaan halaman degan warna hijau
</BODY>
</HTML>
Selain
memberikan warna pada background, Anda juga dapat menggunakan gambar
sebagai komponen warna latar belakang. Atribut yang digunakan untuk
memasukkan gambar sebagai background adalah background yang kemudian
diikuti dengan alamat file gambar yang dimaksud. Kode ini kemudian
diletakkan didalam <BODY> seperti berikut :
<body background=”alamat file”> … isi web … </body>
Berikut contoh program dengan gambar sebagai background dari halaman web.
Contoh3.html
<HTML>
<HEAD>
<TITLE> Contoh background bergambar </TITLE>
</HEAD>
<BODY background=”gambar/logo.gif”>
Backgroun bergambar Logo UKM
</BODY>
</HTML>
Menentukan Warna Text
Jika
dalam halaman secara standar akan menampilkan background berwarna
putih, maka halaman akan memberikan text default warna hitam. Untuk
dapat mengubahnya Anda cukup mendeklarasikannya dengan menggunakan
atribut text pada <BODY> seperti berikut
<body text=”warna” … isi web … </body>
Cobalah membuat halaman dengan warna text yang anda sukai dengan program berikut ini.
Contoh4.html
<HTML>
<HEAD>
<TITLE> Contoh text warna </TITLE>
</HEAD>
<BODY text=”green”>
Halaman web dengan text berwarna Hijao
</BODY>
</HTML>
Menentukan Warna pada Link
Link
merupakan sebuah symbol yang dijadikan sebagai acuan menuju ke halaman
tertentu pada suatu web. Dalam pemberian warna pada Link, HTML mengenal
tiga macam atribut dalam mendeklarasikannya, yaitu link, vlink, dan alink. Sintaks penulisannya adalah :
<body link=”warna” vlink=”warna” alink=”warna”>
Penempatan Area Kerja
Area
kerja adalah tempat dimana posisi kursor pertama ketika menuliskan
semua isi web, Anda dapat menentukan area kerja berada ditengah-tengah
halaman maupun dipinggir halaman pada radius 0,0 pixel. Anda dapat
menggunakan empat atribut perintah diantaranya adalah :
- leftmargin=”value” : Menentukkan batas paling kiri
- rightmargin=”value” : Menentukkan batas paling kanan
- marginwidth=”value” : Menentukkan batas lebarnya
- marginheight=”value” : Menentukan batas ketinggian
Sintaks penulisannya :
<body leftmargin=”value” topmargin=”value” marginwidth=”value” marginweight=”value”>
Contoh programnya dapat Anda lihat pada baris berikut :
Contoh5.html
<html>
<head>
<title>Penentuan area kerja</title>
</head>
<body leftmargin=”100″ topmargin=”100″ marginwidth=”30″ marginheight=”30″>
Area kerja halaman Web
</body>
</html>
Menformat Text
Membuat Huruf tebal, Miring, Underline
Huruf
dengan properties tebal atau Bold, dapat dibuat dengan menggunakan tag
<b> dan diakhiri dengan tag </b>. Sedangkan untuk membuat
huruf miring, HTMl menggunakan tag <i> dan diakhiri dengan tag
</i>. Huruf I berari italic, sedangkan untuk membuat huruf
bergaris bawah HTML menggunakan tag <u> dan diakhiri dengan tag
</u>. Untuk lebih jelasnya Anda dapat mencoba listing program
berikut.
Contoh6.html
<html>
<head>
<title>Format halaman text</title>
</head>
<body >
<B> Ini Huruf Tebal</B> <br>
<I>Ini Huruf Miring</I><br>
<U>Ini Huruf Bergaris Bawah</U><br>
<S>Ini Huruf Di Coret</S>
</body>
</html>
Membuat Text Model Kimia dan Perpangkatan
Text model kimia menggunakan unsure-unsur model kima seperti H2O, O2 dan sebagainya. Dan juga karakter angka sebagai perpangkatan seperti 52
(lima kuadrat) Dengan HTML Anda cukup menggunakan tag <SUB>
sebagai model kimia dan <SUP> untuk model perpangkatan. Sebagai
contoh, ketikkan listing program berikut ini.
Contoh7.html
<HTML>
<HEAD>
<TITLE> Format Text Kimia & matematika</TITLE>
</HEAD>
<BODY >
Manusia hidup membutuhkan Air / H<SUB>2</SUB>O <br>
4 (empat) adalah hasi dari perpangkatan 2<SUP>2</SUP>
</BODY>
</HTML>
Menentukan Ukuran Huruf dan Warna
HTML menyediakan sebuah tag <FONT ….> yang didalamnya kita dapat mendeklarasikan warna , ukuran dan bentuk huruf. Dengan
menggunakan metode ini maka efek yang dipakai hanyalah pada elemen yang
berada didalam kalang Tag tersebut. Jadi secara otomatis pengaturan
yang telah dilakukan pada bagian <BODY> akan diabaikan untuk text
yang dikenai tag FONT tersebut. Atribut yang digunakan didalam tag FONT :
|
Atribut
|
Value
|
Keterangan
|
|
Size
|
1 – 7
|
Menentukan besar huruf atau karakter
|
|
Color
|
#000000-ffffff
|
Menentukan warna teks dan karakter
|
|
Face
|
Font
|
Menentukan jenis font
|
Rumus tag HTML nya adalah :
<font size=”value” color=”warna” face=”jenis font”>
Jenis
font yang digunakan antara lain (arial, verdana, times new roman, sans
serif dan lain sebagainya). Untuk nilai value pada Size dimasukkan angka
1-7 dan kemudian jika ingin melanjutkan ke ukuran yang lebh besar dapat
ditambah dengan tanda (+), contohnya (+4). Berikut contoh program untuk
menentukan ukuran huruf dan warna.
Contoh8.html
<HTML>
<HEAD>
<TITLE> Format Bentuk Text dan warna </TITLE>
</HEAD>
<BODY >
<FONT size=”+5″ face=”Arial” color=”RED”>Bentuk Text arial berwarna merah</FONT>
</BODY>
</HTML>
Memberikan Jarak pada Baris Text
Untuk
menentukan jarak spasi pada text yang kita ketikkan dapat kita lakukan
dengan perintah <br> untuk spasi 1 kali, bila 2 spasi kita beri
tag <br> sebanyak dua kali. Didalam HTML telah disediakan sebuah
tag yang berguna untuk itu. Untuk lebih jelasnya lihat contoh script
berikut.
<pre> … text … </pre>
Atau
<pre width=”?”> … text … </pre>
Untuk lebih jelasnya Anda dapat mengetikkan listing program berikut :
Contoh9.html
<HTML>
<HEAD>
<TITLE> Format Spasi Text </TITLE>
</HEAD>
<BODY >
<PRE WIDTH=”4″>IT Mandiri</PRE>
<PRE WIDTH=”4″>Sentra Edukasi Telematikan Indonesia </PRE>
<PRE>IT Reka</PRE>
</BODY>
</HTML>
Ganti Baris dan Paragraf
Dengan
menggunakan HTML kita mengenal tag <br> untuk ganti baris dan tag
<p> untuk ganti paragraph. Pada tag <br> akan memberikan
efek ganti baris sebanyak satu baris sedangkan <p> akan memberikan
efek pindah dua baris selanjutnya.
Untuk lebih jelasnya Anda dapat mengetikkan listing program berikut :
Contoh10.html
<HTML>
<HEAD>
<TITLE> Format ganti baris </TITLE>
</HEAD>
<BODY >
Pengakuan
<p>
Saya adalah seorang mahasiswa Teknik Informatika (TI) angkatan XX di SETI Jakarta<br>
<br>
Sebebarnya saya merupakan pindahan dari jurusan Teknik Komputer (TK) angkatan XX SETI Jakarta</p>
</BODY>
</HTML>
Membuat Identasi Halaman
Identasi halaman
adalah teknik pemfromatan halaman dengan text menjorok kedalam. Untuk
dapat membuat Identasi halaman HTML memiliki tag <blockquote>.
Sintaks penulisannya adalah sebagai berikut :
<blockquote> … text … </blockquote>
Coba ketik dan jalankan script berikut.
Contoh11.html
<HTML>
<HEAD>
<TITLE> Format identasi </TITLE>
</HEAD>
<BODY >
<p>BLOCKQUOTE</p>
<p>
<blockquote>
Tag ini digunakan untuk meciptakan Text Indentasi ,<br>
Yang di maksut Text Identasi adalah Text yang <br>
perataanya menjorok kedalam .</blockquote></p>
</BODY>
</HTML>
Menggunakan Tag <Pre>
Tag
Pre digunakan untuk membuat teks keluaran text yang sama persis dengan
format yang diketikkan dalam tag HTML, sehingga bentuk text apapun yang
diletakkan pada halaman web HTML akan dibaca pada browser sama dengan
aslinya. Sintaksnya adalah :
<pre. … text … </pre>
Coba ketik contoh berikut dengan menggunakan tag <pre>
Contoh12.html
<HTML>
<HEAD>
<TITLE> Format pre </TITLE>
</HEAD>
<BODY >
<p>PRE</p>
<PRE>
Tag ini digunakan untuk meciptakan Text dengan format
Yang seuai dengan yang di ketikan dalam Tag HTML
.</PRE>
</BODY>
</HTML>
Jalankan
program diatas, akan menghasilkan keluaran berupa text yang sama persis
dengan text yang diketikkan didalam tag HTML. Text tersebut tidak akan
berubah bentuk apabila halaman diperkecil atau diperbesar.
Format Text Alamat
Didalam halaman web suatu ketika akan memerlukan pengaturan alamat dalam membuat suatu halaman yang menyertakan alamat. Dalam HTML 4 untuk dapat membuat alamat dapat digunakan tag <address>. Berikut sintaks penulisannya.
<address> … text … </address>
Berikut merupakan contoh listing programnya.
Contoh13.html
<HTML>
<HEAD>
<TITLE> Membuat Alamat </TITLE>
</HEAD>
<BODY >
<address>
<pre>IT mandiri,
SETI Jakarta,
Jl Warung Jati Barat Raya No 43,
Buncit Jakarta Selatan,
12760,
Indonesia.
</pre>
</address>
</BODY>
</HTML>
Membuat Heading / Judul
Heading
adalah metode untuk membuat judul dalam paragraph. Dalam penggunaanya
heading dapat dibagi menjadi 6 yaitu Heading 1, Heading 2, sampai dengan
Heading 6. Sintaks penulisannya adalah :
<hx> … text … </hx>
Cobalah membuat halaman heading seperti script dibawah ini.
Contoh14.html
<HTML>
<HEAD>
<TITLE> Membuat Heading </TITLE>
</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>
Membuat Animasi Marquee
Marquee adalah sebuah bentuk animasi text yang diciptakan oleh HTML. Kita dapat mengciptakan gerakan-gerakan text maupun paragraph dalam web. Sintaks yang digunakan adalah :
<marquee atribut=” “> … text … </marquee>
Atribut dalam animasi marque.
|
Atribut
|
Value
|
Keterangan
|
|
Behavior
|
Alternate
|
Text bergerak ke kanan/kiri
|
|
Scroll
|
Text bergerak terus menerus
|
|
Slide
|
Text bergerak sekali
|
|
Direction
|
Left
|
Kiri
|
|
Right
|
Kanan
|
|
Top
|
Atas
|
|
Down
|
Bawah
|
|
Loop
|
N
|
Perulangan bernilai n
|
|
Bgcolor
|
Color
|
Untuk warna background
|
Contoh berikut adalah bentuk 3 buah animasi marquee dengan menggunakan arah/behavior yang berbeda.
Contoh15.html
<HTML>
<HEAD>
<TITLE>Membuat Animasi Marquee</TITLE>
</HEAD>
<BODY>
<MARQUEE behavior=”alternate” bgcolor=”#0099FF” >ANIMASI MARQUEE(ALTERNATE)</MARQUEE><br><br>
<MARQUEE behavior=”scroll” bgcolor=”#0099FF” direction=”left”>ANIMASI MARQUEE(SCROLL)</MARQUEE><br><br>
<MARQUEE behavior=”slide” bgcolor=”#0099FF” >ANIMASI MARQUEE(SLIDE)</MARQUEE><br><br>
</BODY>
</HTML>
Menciptakan Garis Horizontal
Sebagai
pembatas antara judul dengan isi, kita dapat menggunakan garis. Dalam
HTML desidakan Tag yang berfungsi membuat garis Horizontal yaitu tag
<hr>, kependekan dari Horizontal Row. Sintaks penulisannya :
<hr atribut=” “>
Atribut yang digunakan tag HR :
|
Atribut
|
Value
|
Keterangan
|
|
Size
|
N
|
Ukuran garis
|
|
Color
|
Color
|
Warna garis
|
|
Align
|
Left,right
|
Letak posisi garis
|
|
Width
|
Length
|
Lebar garis
|
Berikut adalah contoh penggunaan garis berwarna merah diletakkan di sebelah kanan halaman.
Contoh16.html
<HTML>
<HEAD>
<TITLE>Membuat Animasi Garis</TITLE>
</HEAD>
<BODY>
<H1 align=”right”>Kuis Siapa Dia</H1>
<HR align=”right” width=”60%” color=”#FF0000″ size=”3″>
<div align=”right”> Adalah kuis yang saya sukai</div>
</BODY>
</HTML>
4. Membuat Daftar
Daftar
atau list adalah merupakan kumpulan text yang disusun sedemikian rupa
sehingga item-item yang ada memiliki nomor urut atau bias berupa
tanda/symbol khusus.
Berikut adalah beberapa daftar Tag yang digunakan dalam pembuatan List/Daftar :
|
Tag
|
Atribut
|
Value
|
Keterangan
|
|
<UL>
|
Type
|
Square
Disc
|
Bulat kotak
Bulat titik
|
|
<OL>
|
Type
|
I
i
A
A
|
Huruf besar romawi
Huruf kecil romawi
Huruf besar
Huruf kecil
|
|
<OL>
|
Start
|
n
|
Nilai awal penomoran
|
Unordered List <UL>
Untuk
membuat daftar item dengan tanda bullet. List entries didefinisikan
dengan tag <LI>. Dan pada jenis ini tidak memerlukan pengurutan
data. Perhatikan sintaks program berikut :
<ul>
<li> daftar n </li>
<li> daftar n+1 </li>
</ul>
Sebagai contoh, coba ketik daftar jurusan yang ada di SETI Jakarta berikut ini.
Contoh17.html
<html>
<head>
<title>Membuat List</title>
</head>
<body>
Berikut ini adalah daftar jurusan yang ada di SETI Jakarta ?
<UL>
<LI>Teknik Informatika (TI/S1)</LI>
<LI>Sistem Informasi (SI/S1)</LI>
<LI>Teknik Komputer (TK/D3)</LI>
<LI>Manajemen Informatika (MI/D3)</LI>
<LI>Komputerisasi Akutansi(KA/D3)</LI>
</UL>
</body>
</html>
Selain
menggunakan sintaks diatas Anda juga dapat menggunakan beberapa sintaks
yang menghasilkan output yang sama. Sintaks itu adalah :
<menu>
<li> Daftar n </li>
<li> Daftar n+1 </li>
</menu>
atau dapat menggunakan :
<dir>
<li> Daftar n </li>
<li> Daftar n+1 </li>
</dir>
Menghilangkan Tanda pada Daftar
Apabila
Anda ingin menghilangkan semua kode daftar/list yang ada, maka tag yang
digunakan adalah <DL> sebagai pengganti tag <UL>, dan
<DD> sebagai pengganti tag <LI>. Cobalah membuat contoh
program seperti berikut :
Contoh18.html
<html>
<head>
<title>Membuat Nnone List</title>
</head>
<body>
Berikut ini adalah daftar jurusan yang ada di SETI Jakarta ?
<DL>
<DD>Teknik Informatika (TI/S1)</DD>
<DD>Sistem Informasi (SI/S1)</DD>
<DD>Teknik Komputer (TK/D3)</DD>
<DD>Manajemen Informatika (MI/D3)</DD>
<DD>Komputerisasi Akutansi(KA/D3)</DD>
</DL>
</body>
</html>
Teknik pembuatan daftar dengan DL dan DD dapat digantikan dengan menggunakan tag MENU seperti berikut.
<menu>
daftar 1 <br>
daftar 2 <br>
daftar ke-n <br>
</menu>
Contoh programnya adalah sebagai berikut.
Contoh19.html
<HTML>
<HEAD>
<TITLE>Membuat List</TITLE>
</HEAD>
<BODY>
Berikut ini adalah daftar jurusan yang ada di SETI Jakarta ?
<MENU>
Teknik Informatika (TI/S1)<BR>
Sistem Informasi (SI/S1)<BR>
Teknik Komputer (TK/D3)<BR>
Manajemen Informatika (MI/D3)<BR>
Komputerisasi Akutansi(KA/D3)<BR>
</MENU>
</BODY>
</HTML>
Daftar Menggunakan Nomor
Kita
dapat membuat daftar dengan menggunakan metode penomoran (1, 2, …n,
atau a, b, … n) atau dengan menggunakan huruf Romawi. Fungsi sintaks
yang digunakan adalah :
<ol type= A | a | I | I | 1 >
<li> Daftar 1 </li>
<li> Daftar 2 </li>
<li> Daftar ke-n </li>
</ol>
Berikut contoh script dengan metode penomoran.
Contoh20.html
<html>
<head>
<title>Membuat List</title>
</head>
<body>
Daftar Kelompok Study yang ada di SETI Jakarta :
<OL type=”A” >
<LI>Kelompok Study Linux (KSL)</LI>
<LI>Unix Network Club (UNC)</LI>
<LI>Linux Study Club (LSC)</LI>
</OL>
</body>
</html>
Pada
contoh diatas, jika dijalankan akan menghasilkan sebuah daftar dengan
menggunakan urutan abjad capital sebagai daftar listnya. Atau apabila
Anda menginginkan angka urutan tidak dimulai dengan alphabet A, tetapi
dari D, maka Anda harus menambahkan Atribut Start bernilai 4 pada tag
<OL>, karena dalam urutannya D termasuk abjad ke 4, sehingga
scriptnya berubah menjadi :
<html>
<head>
<title>Membuat List</title>
</head>
<body>
Daftar Kelompok Study yang ada di SETI Jakarta :
<OL type=”A” start=”4″>
<LI>Kelompok Study Linux (KSL)</LI>
<LI>Unix Network Club (UNC)</LI>
<LI>Linux Study Club (LSC)</LI>
</OL>
</body>
</html>
Mebuat Sub Daftar
Dengan
menggunakan Tag <UL> dan <OL>, HTML juga mengijinkan Anda
untuk membuat sebuah seub daftar. Maksud dari sub daftar adalah daftar
di dalam daftar. Untuk lebih jelasnya lihat sintaks yang digunakan dan
contoh scriptnya.
Contoh21.html
<HTML>
<HEAD>
<TITLE> Sub Daftar </TITLE>
</HEAD>
<BODY >
Jenis Prosesor yang Sering du gunakan :
<OL>
<LI>INTEL</LI>
<UL>
<LI>Pentium</LI>
<LI>Celeron</LI>
</UL>
<LI>AMD</LI>
<UL>
<LI>Atlon XP</LI>
<LI>Duron</LI>
<LI>Baltron</LI>
</UL>
</OL>
</BODY>
</HTML>
Membuat List Header
List
Header atau <LH> merupakan suatu cara dimana kita dapat
menampilkan bentuk Header didalam List, adapun cara penulisannya adalah :
<OL>
<LH> Header
<LI> Daftar 1 </LI>
<LI> Daftar 2 </LI>
</OL>
Berikut adalah Contoh Scriptnya penggunaanya :
Contoh22.html
<html>
<head>
<title>Membuat List</title>
</head>
<body>
Daftar Kelompok Study SETI Jakarta:
<OL type=”1″ >
<LH><b>Linux Riseach </b>
<LI>Kelompok Study Linux (KSL)</LI>
<LI>Unix Network Club (UNC)</LI>
<LI>Linux Study Club (LSC)</LI>
</OL>
</body>
</html>
Pada script diatas Kita menggunakan Header yang bernama “Linux Research”, yaitu :
<LH><b>Linux Research</B>
Daftar dengan Gambar
Untuk
membuat sebuah daftar dengan bentuk symbol yang dibat sendiri atau
berupa gambar. Kita dapat menggunakan metode yang dilakukan saat membuat
daftar tanpa symbol, yaitu menggunakan TD dan DD. Dan setelah
meletakkan komponen daftar kita dapat melakukan pemanggilan gambar yang
berupa symbol. Sebagai contoh lihatlah script berikut :
Contoh23.html
<html>
<head>
<title>Membuat List</title>
</head>
<body>
Daftar makanan jenis gorengan:
<DL>
<DD> <IMG src=”../gambar/bundar.gif”>Bakwan
<DD> <IMG src=”../gambar/bundar.gif”>Tahu Susor /Tahu Isi</DD>
<DD> <IMG src=”../gambar/bundar.gif”>Pisang Goreng</DD>
<DD> <IMG src=”../gambar/bundar.gif”>Tempe Goreng</DD>
<DD> <IMG src=”../gambar/bundar.gif”>Combro</DD>
</DL>
</body>
</html>
5. Menggunakan Tabel dan Pengaturannya
Pembuatan Tabel
Untuk
dapat membuat tabel Anda dapat menggunakan Tag HTML yang dimulai dengan
tag <TABLE>, yang kemudian diikuti dengan <TR> dan
<TD>
· <TABLE>
: adalah tag yang menerapkan kepada browser bahwa itu adalah sebuah
tabel. Tag TABLE dapat diikuti dengan beberapa atribut seperti lebar
maupun warna background.
· <TR> : adalah TABLE ROW merupakan Tag yang digunakan untuk membuat baris dalam tabel.
· <TD> :
Tabel Data adalah tag yang berguna untuk meletakkan data yang kita
isikan dalam tabel. TD dapat juga diartikan sebagai kolom, jadi kita
dapat membuat beberapa kolom didalam sebuah baris tabel.
Sintaks dalam mebuat tabel :
<TABLE atribut=”value”>
<TR><TD atribut=”value”> …. Isi … </TD>
….
<TR>
<TABLE>
:
