praktek 1 desain halaman web

http://kuliah.msyani.com Pemrograman Web

Design Halaman Web 2-1

2 DESIGN HALAMAN WEB

Overview

Untuk membangun sebuah web site, diperlukan modal dasar berupa bahasa

yaitu Hypertext Markup Language(HTML). Setiap tampilan pada halaman web

dapat diformat menggunakan tag HTML sesuai dengan kebutuhan pengguna.

Tujuan

1. Mengenal dasar-dasar HTML

2. Membuat dokumen HTML dan melakukan pemformatan dokumen yang

sederhana.

3. Membuat teks preformat dan karakter spesial

4. Membuat list pada dokumen HTML

5. Membuat list bersarang pada dokumen HTML



2.1 Pengenalan HTML

HyperText Markup Language adalah bahasa yang digunakan untuk

membuat suatu situs web atau homepage. Setiap dokumen dalam Web ditulis

dalam format HTML. Semua format dokumen, hyperlink yang dapat di klik,

gambar, dokumen multimedia, form yang dapat di isi dan sebagainya

didasarkan atas HTML.

2.1.1 HTML Editor

Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi

teks editor biasa seperti notepad. Namun sekarang ini di pasaran terdapat

banyak sekali HTML editor (software yang digunakan untuk membuat atau mendesain halaman web), contohnya Macromedia Dreamweaver, Adobe

GoLive, Microsoft FrontPage dan Notepad++.

Gambar 2-1 Lembar Kerja Microsoft FrontPage



Kemudahan Microsoft FrontPage :

Pengeditan “What You See Is What You Get” (WYSIWYG)

Menambahkan, menghapus dan mengubah teks.

Menambahkan paragraf dan gaya karakter ke dalam teks.

Mengubah huruf, ukuran dan warnanya.

Memasukkan tabel, gambar, garis horisontal dan hyperlink dalam

dokumen web yang anda buat.

Drag-and-drop hyperlink dan gambar dari dokumen yang lain.

2.1.2 Struktur Dasar HTML

Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan

disebut sebagai Markup Language yakni bahasa yang mengandung kode

penanda yang disebut tag HTML yang digunakan untuk mengatur format

tampilan suatu dokumen. Kode ini diselipkan ke dalam teks HTML, berfungsi

untuk mengontrol format dan layout dalam dokumen, menunjuk ke suatu

hyperlink, dan lain-lain. Tag HTML ini menggunakan simbol khusus untuk

menandakan suatu kode instruksi, simbol ini adalah kurung siku, < dan >.

Hal yang harus diperhatikan adalah kode tag HTML ini tidak bersifat

case-sensitif artinya <body> sama dengan <BODY> ataupun <bOdY>. Pada

umumnya banyak dari pemakai HTML menggunakan huruf besar dalam

penulisan tag HTML sehingga menyebabkan kode-kode ini terlihat jelas,

sehingga mempermudah proses pembacaan. Semua dokumen HTML terdiri

dari dua bagian logikal, yaitu:

bagian kepala (head). Secara umum, bagian kepala dari dokumen HTML

berisi informasi umum mengenai dokumen

dan bagian badan (body) yaitu berisi dokumen yang sebenarnya.

Setiap dokumen HTML harus dimulai dan diakhiri dengan tag <HTML> yang mendeklarasikan suatu dokumen sebagai dokumen HTML. Struktur

dasarnya adalah sebagai berikut:

<html>

<head>

<title>Judul Form/Caption</title>

</head>

<body>

ISI WEB

</body>

</html>



Keterangan:

<html> .. </html>

Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut

adalah file HTML.

<head> .. </head>

Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan

tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.

<title> .. </title>

Sebagai titel atau judul halaman/form, digunakan sebagai identifikasi

dokumen. Kalimat yang terletak di dalam tag ini akan muncul pada

bagian paling atas browser Anda (pada title bar).

<body> .. </body>

Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi

halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti

bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin. Contoh

dari penggunaan tag <HTML> seperti ini:

<HTML>

<HEAD>

<TITLE> Judul dari dokumen HTML </TITLE>

</HEAD>

<BODY>

My Homepage

</BODY>

</HTML>

Untuk mencoba script di atas, anda bisa membuka aplikasi notepad

ataupun program teks editor yang lain. Tuliskan script di atas dan simpan

dengan ekstensi *.html atau *.htm, misalkan MyPage.html. Bukalah dokumen

html yang telah anda buat tadi dengan menggunakan web browser, misalkan

Internet Explorer. Maka akan terlihat tampilan seperti di bawah ini.



Gambar 2-2 Tampilan MyPage.html

2.2 Memformat Dokumen HTML

2.2.1 Bagian Body

Pada bagian tag <BODY> digunakan untuk mendefinisikan teks beserta

formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini

bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link,

vlink, alink, leftmargin dan topmargin.

1) Background : digunakan untuk mengatur latar belakang dengan

gambar/image.

2) Bgcolor : digunakan untuk mengatur warna latar belakang

dokumen, dengan warna putih sebagai default-nya.

3) Teks : digunakan untuk mengatur warna teks dokumen,

dengan warna hitam sebagai warna default.

4) Link : Untuk mengatur warna link dokumen dengan warna

biru sebagai warna default

5) Vlink : Untuk mengatur warna visited link dokumen dengan

default ungu

6) Alink : digunakan untuk mengatur warna active link dokumen

dengan default merah.

2.2.2 Membuat Heading

Heading digunakan untuk mengatur ukuran huruf pada header. Tag

heading <Hn>..</Hn>, "n" mempunyai nilai antara 1 - 6 atau antara <H1>

sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6>

merupakan ukuran terkecil.



Dalam banyak dokumen, heading pertama digunakan sebagai judul

tulisan. Heading ini mempunyai atribut untuk menentukan letak tulisan, di kiri,

kanan ataupun tengah. Jika atribut ini tidak ditambahkan, maka heading akan

otomatis rata kiri. Contoh penggunaannya : <HTML>

<HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD>

<BODY>

My Homepage

<H1>Heading tingkat 1</H1>






<H1 ALIGN=LEFT>Heading 1 rata kiri</H1>

<H2 ALIGN=CENTER>Heading 2 rata tengah</H2>

<H3 ALIGN=RIGHT>Heading 3 rata kanan</H1>

</BODY>

</HTML>

Tampilan dari script diatas dapat dilihat pada gambar berikut ini :

Gambar 2-3 Contoh Heading



2.2.3 Memformat Paragraf

Dalam membuat paragraf, ada beberapa hal yang harus diperhatikan.

Dengan adanya perbedaan browser web yang berjalan pada komputer yang

berbeda, memiliki kemampuan untuk menampilkan grafis yang berbeda

sehingga menyebabkan dokumen yang ditampilkan juga ikut berbeda-beda.

Seperti pada pembuatan paragraf pada HTML ini akan berbeda letaknya untuk

browser web yang memiliki ukuran satu halaman penuh dan yang tidak.

Untuk membuat paragraf ini digunakan tag <P>, hal yang perlu dicatat

adalah tag <P> ini akan mengabaikan spasi dan pindah baris. Dalam

pembuatan paragraf pun, kita bisa menggunakan atribut ALIGN untuk

mengatur letak paragraf, rata kiri, tengah ataupun rata kanan. Attribut align

mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY.

Contoh penggunaan paragraf dapat dilihat pada script berikut ini.

<HTML>

<HEAD>

<TITLE> Belajar membuat HTML yuk </TITLE>

</HEAD>

<BODY>

<H2>My Homepage</H2>

<h3>Paragraf rata kiri</h3>

<P ALIGN=LEFT>Lajunya perkembangan Teknologi Informasi

semakin meningkatkan penggunaan sumber daya

yang bersifat digital. Sejak kemunculan internet, merupakan

suatu titik terang bukan hanya bagi masyarakat IT, tetapi

sekarang sudah berdampak ke seluruh lapisan masyarakat.

</P>

<h3>Paragraf rata tengah</h3>

<P ALIGN=CENTER>Lajunya perkembangan Teknologi Informasi



suatu titik terang bukan hanya bagi masyarakat IT,

tetapi sekarang sudah berdampak ke seluruh lapisan

masyarakat.

</P>



<h3>Paragraf rata kanan</h3>

<P ALIGN=RIGHT>Lajunya perkembangan Teknologi Informasi



suatu titik terang bukan hanya bagi masyarakat IT, tetapi

sekarang sudah berdampak ke seluruh lapisan masyarakat.

</P>

</BODY>

</HTML>

Tampilan di browser akan seperti ini.

Gambar 2-4 Contoh Format Paragraf

2.2.4 Line Breaks

Line breaks digunakan untuk menambahkan baris baru pada teks dalam

dokumen HTML dengan cara menambahkan tag <BR>. <CENTER>

digunakan untuk membuat teks dalam posisi di tengah. Setiap teks yang



terdapat diantara <CENTER> dan </CENTER> akan ditempatkan di tengah-

tengah margin kiri dan kanan.

Contoh script penggunaan Line Breaks dan <CENTER> :

<HTML>

<HEAD>


</HEAD>

<BODY>


<h3>Penggunaan Line Breaks</h3>

Contoh penggunaan line break<BR>

baris baru<BR>sudaaaahhh<br><br>

<CENTER>contoh teks ditengah</CENTER>

</BODY>

</HTML>

Hasilnya :

Gambar 2-5 Contoh Penggunaan Line Break dan Center



2.2.5 Teks Preformat

Berbeda dengan pembuatan paragraf yang mengabaikan setiap

tambahan spasi, tag <PRE> ini akan membuat spasi ikut diperhitungkan.

Dengan kata lain tag <PRE> akan menampilkan teks pada halaman web sesuai

dengan yang kita tuliskan dan dengan tag ini data tabular dapat dibuat.

Biasanya spasi dan tab ini digunakan untuk membuat baris dan kolom, yang

membutuhkan banyak spasi untuk membuat urutan baris dan kolom. Berikut

ini contoh penggunaan dari tag <PRE>.

<HTML>


<BODY>


<h3>Penggunaan Teks Preformat</h3>

Contoh dibawah adalah penggunaan tag Preformat untuk

membuat tabel<br>

<PRE>

Tabel data mahasiswa

----------------------------------

Nama Umur

----------------------------------

Adi Sasongko 19

Budi Swarga 20

Chev Sampurna 18

Della Rossa 19

----------------------------------

</PRE>

</BODY>

<HTML>

Hasil :

Gambar 2-6 Contoh Penggunaan Teks Preformat



2.2.6 Memformat Bentuk Tulisan

Untuk pengaturan teks, terdapat beberapa tag yang dapat digunakan.

Cara menggunakannya adalah awali dengan <tag>, terus masukkan tulisan

yang akan diatur dan akhiri dengan </tag>. Tag-tag yang dapat digunakan

untuk mengatur teks adalah :

<B> Bold text

<I> Italic text

<U> Underscore

<TT> Typewriter

<S> Strikeout - draws a line through the text

<BLINK> Text berkedip (lebih baik jangan digunakan)

<CITE> Digunakan untuk quoting text

<BIG> Ukuran teks akan lebih besar satu ukuran

<SMALL> Ukuran teks akan lebih kecil satu ukuran

<SUP> Membuat tekssuperscript

<SUB> membuat tekssub script

<ABBREV> Abbreviations

<ACRONYM> Untuk akronim

<PERSON> Digunakan untuk indexing

<Q> Membuat short inline quotation

<VAR> Membuat variable name, selalu dalam italics.

Contoh menggunakan tag untuk teks ini bisa dilihat dari script di bawah ini. <HTML>


<BODY>


Contoh menggunakan Tag pada Teks<BR><BR>

<B>tag untuk menebalkan huruf</B><BR><BR>

<I>tag untuk membuat huruf miring</I><BR><BR>

tag untuk membuat huruf<SUP>superscript</SUP><BR><BR>

tag untuk membuat huruf<SUB>subscript</SUB><BR><BR>

untuk membuat huruf yang <U>digaris bawahi</U><BR><BR>

untuk membuat huruf yang lebih <BIG>BESAR</BIG><BR><BR>

untuk membuat huruf yang lebih <SMALL>kecil</SMALL><BR><BR>

</BODY>

</HTML>



Tampilan dari Script di atas akan terlihat seperti berikut ini.

Gambar 2-7 Contoh Menggunakan Tag pada Teks

2.2.7 Tag Font

Tag <FONT> digunakan untuk mengatur huruf dokumen HTML. Tag

FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR.



SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang

digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan

7 merupakan ukuran terbesar.

FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa

memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma.

Bila terdapat spasi yang terletak pada nama font maka harus digunakan

tanda garis bawah (_). Dalam memilih jenis font ini harus

dipertimbangkan apakah font yang kita gunakan pada halaman web kita

nantinya akan terdapat pada komputer pengguna yang lain (pengakses

web kita). Pendeknya kita tidak usah menggunakan font-font yang

bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.

COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan

menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama

warna (red misalnya).

Contoh menggunakan tag font ini bisa dilihat dari script di bawah ini.

<html>

<head>

<title>::: Ukuran, Jenis dan Warna Font:::</title>

</head>

<body>

<font size=1 Face=arial color=#FF0000>Ukuran font 1</font><br>

<font size=2 Face=arial color=green>Ukuran font 2</font><br>

<font size=3 Face=arial color=blue>Ukuran font 3</font><br>

<font size=4 Face=verdana color=red>Ukuran font 4</font><br>

<font size=5 Face=verdana color=blue>Ukuran font 5</font><br>

<font size=6 Face=tahoma color=green>Ukuran font 6</font><br>

<font size=7 Face=tahoma color=red>Ukuran font 7</font><br>

</body>

</html>

Hasilnya :



Gambar 2-8 Contoh Tag Font dan Atributnya

2.2.8 Karakter Spesial

Terdapat empat karakter yaitu tanda lebih kecil (<), tanda lebih besar

(>), tanda dan (&) dan kutip ganda (“), yang mempunyai arti khusus dan

digunakan sebagai kode dalam HTML sehingga tidak dapat digunakan secara

langsung sebagai teks dalam dokumen HTML kita. Untuk menggunakan

karakter-karakter di atas ke dalam dokumen HTML, diperlukan suatu

karakter spesial untuk menggantikan karakter-karakter di atas.

Karakter spesial tersebut antara lain : < karakter spesial untuk <

> karakter spesial untuk >

& karakter spesial untuk &

" karakter spesial untuk "

@ karakter spesial untuk @

© karakter spesial untuk ©

© karakter spesial untuk ©

® karakter spesial untuk ®

® karakter spesial untuk ®

karakter spesial untuk spasi yang tak dapat dipecah



Dibawah ini script untuk memperlihatkan contoh penggunaan karakter spesial

dalam dokumen HTML :

<HTML>

<HEAD>


</HEAD>

<BODY>


<h3>Penggunaan Karakter Spesial</h3>

Berikut ini contoh penggunaan karakter spesial<br>

Sekarang kita mencoba menggunakan tanda lebih kecil seperti

ini < dan

sekarang kita akan coba menggunakan tanda lebih besar

seperti ini >.

Bagaimana? dapat terlihat kan? yang akan ditampilkan saat

ini adalah tanda dan &.

tanda kutip ganda " dan tanda @ seperti yang

sering digunakan dalam alamat email.

Pernah lihat tanda © atau tanda © atau tanda

® atau tanda ®.

Pasti salah satunya sudah pernah lihat kan?

&nbsp

;Terlihat perbedaannya tidak? ya, saya tambahkan beberapa

spasi

di kalimatnya.

</BODY>

</HTML>

Hasilnya akan terlihat seperti gambar di bawah ini.



Gambar 2-9 Contoh Penggunaan Karakter Spesial

2.2.9 Membuat Garis Horizontal

Tag <HR> digunakan untuk membuat garis horizontal pada jendela

browser. Defaultnya adalah membuat garis yang solid.

Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE.

<HR NOSHADE> digunakan untuk membuat garis yang tidak ada efek baying-bayang 3-D.

<HR SIZE=ukuran> untuk menentukan panjang garis dalam satuan pixel,

default 2.

<HR WIDTH=ukuran atau persentase> untuk menentukan ketebalan

garis.

<HR ALIGN=LEFT atau RIGHT atau CENTER> untuk membuat garis

dengan letak sebelah kiri (left), kanan (right) atau tengah (center-default).

Contoh pembuatan garis horizontal :

<HTML>


<BODY>


<h3>Membuat Garis Horizontal</h3>



Garis horizontal biasa (Shade dan solid) <HR>

Garis horizontal No Shade <HR NOSHADE>

Garis horizontal dengan ukuran 10 (berongga, bukan solid)

<HR SIZE=10>

Garis horizontal dengan Lebar 100

<HR WIDTH=100>

Garis horizontal dengan lebar 50% dari lebar dokumen

<HR WIDTH=50%>

Garis horizontal dengan lebar 100 dan diletakkan di

sebelah kiri

<HR WIDTH=100 ALIGN=LEFT>

Garis horizontal dengan ukuran 10, lebar 100 dan

diletakkan di sebelah kanan

<HR SIZE=10 WIDTH=100 ALIGN=RIGHT>

</BODY>

</HTML>


Gambar 2-10 Contoh membuat Garis Horizontal



2.3 List

Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian

rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga berupa

tanda-tanda khusus/simbol.

Terdapat tiga tipe list yang dapat digunakan, yaitu:

2.3.1 List Tanpa Urutan (Unordered Lists)

Tag <UL> untuk membuat daftar item dengan tanda bullet (tidak

bernomor). List entri didefinisikan dengan tag <LI>. Pada jenis ini tidak

memerlukan pengurutan data. Kita juga dapat menentukan jenis bullet yang

akan digunakan dengan menentukan type-nya. Beberapa tipe yang dapat dipilih ditunjukkan pada tabel di bawah ini :

Tabel 2-1 Tabel Jenis Bullet

Tipe Penjelasan

Disc Bullet berbentuk cakram

Circle Bullet berbentuk lingkaran

Square Bullet berbentuk kotak

Contoh penggunaannya adalah sebagai berikut :

<HTML>

<HEAD>


</HEAD>

<BODY>

<h3>Membuat List tanpa urutan</h3>

<UL>

<LI>apel</LI>

<LI>jeruk</LI>

<LI>mangga</LI>

<LI>jambu</LI>

</UL>

</BODY>

</HTML>




Gambar 2-11 Contoh Unordered List

2.3.2 List Berurut (Ordered Lists)

<OL> Juga digunakan untuk membuat daftar item bernomor, dengan

tiap item dapat menggunakan angka arab atau romawi. List entri juga

didefinisikan dengan tag <LI>.

Contoh pembuatan list berurut adalah sebagai berikut :

<HTML>

<HEAD>


</HEAD>

<BODY>

<h3>Membuat List berurut</h3>

<OL>

<LI>apel</LI>

<LI>jeruk</LI>

<LI>mangga</LI>

<LI>jambu</LI>

</OL>

</BODY>

</HTML>




Gambar 2-12 Contoh Ordered List

Atribut yang ada pada Ordered List adalah TYPE dan START. Beberapa

type penomoran yang dapat digunakan pada ordered list ditunjukkan pada

tabel di bawah ini :

Tabel 2-2 Tipe Penomoran pada Ordered List

Tipe Penjelasan

I Angka ditampilkan dalam angka romawi huruf besar

i Angka ditampilkan dalam angka romawi huruf kecil

a Angka ditampilkan dalam abjad huruf kecil

A Angka ditampilkan dalam abjad huruf besar

Pada tag <OL> juga terdapat atribut START untuk memulai list dari nomor

tertentu. Pada tag <LI> terdapat atribut VALUE untuk melewati nomor yang

tidak diinginkan.

Contoh penggunaannya adalah sebagai berikut: <HTML>


<BODY>

<h3>Membuat List berurut</h3>

Contoh penggunaan atribut START dan VALUE<br>

<OL START=3>



<LI>apel</LI>

<LI>jeruk</LI>

<LI VALUE=7>mangga</LI>

<LI>jambu</LI>

</OL>

Contoh penggunaan atribut START dan VALUE dengan

type=A<br>

<OL TYPE=A START=3>

<LI>apel</LI>

<LI>jeruk</LI>

<LI VALUE=7>mangga</LI>

<LI>jambu</LI>

</OL>

</BODY>

</HTML>

Gambar 2-13 Contoh Penomoran dengan Ordered List



2.3.3 Definition Lists

Definition lists biasanya digunakan untuk membuat suatu list singkatan

dan definisinya atau istilah-istilah. Definition List dinyatakan dengan tag <DL>

dan diantara tag tersebut ditambahkan tag <DT> Definition Term yaitu

bagian istilah yang dijabarkan dan tag <DD> Definition Data yang merupakan

penjabaran dari istilah.

Contoh :

<HTML>


<BODY>

<h3>Membuat Definition LIsts</h3>

<DL>

<DT> HTTP

<DD> HyperText Transfer Protocol

<DT> FTP

<DD> File Transfer Protocol

</DL>

</BODY>

</HTML>

Gambar 2-14 Contoh Definition List



2.3.4 List Bersarang (Nested Lists)

Dalam pembuatan list bersarang menggunakan tag-tag yang telah

dijelaskan sebelumnya seperti tag <UL>, <OL> dan <LI>. Contoh pembuatan

list bersarang adalah sebagai berikut :

<HTML>


<BODY>

<h3>Membuat List Bersarang</h3>

<UL>

<LI>List item Number 1</LI>

<LI>List item number 2</LI>

<UL>

<LI>Item 2 sub-item A</LI>

<LI>Item 2 sub-item B</LI>

</UL>

<LI>List item number 3</LI>

<UL>

<LI>Item 3 sub-item A</LI>

<LI>Item 3 sub-item B</LI>

</UL>

</UL>

</BODY>

</HTML>

Gambar 2-15 Contoh Nested List



Rangkuman

1. HyperText Markup Language adalah bahasa yang digunakan untuk

membuat suatu situs web atau homepage.

2. Hal yang harus diperhatikan adalah kode tag HTML ini tidak bersifat

case-sensitif artinya <body> sama dengan <BODY> ataupun <bOdY>. 3. Untuk mengatur tampilan pada dokumen HTML dapat dilakukan dengan

mengatur warna latar belakang, format teks, pewarnaan teks dan

pengaturan paragraf.

4. List ada tiga macam antara lain : ordered list, unordered list dan

definition list. Dari ketiga macam list tersebut dapat dibuat bentuk List

Bersarang.

Latihan

1. Jelaskan masing-masing fungsi dari tag-tag berikut ini :

a. <h3>

b. <br>

c. <sub>

d. <b>

e. <small>

2. Jelaskan perbedaan antara <p> dan <pre>!

3. Untuk pengaturan font dapat digunakan atribut size, face dan color.

Jelaskan masing-masing atribut tersebut dan berikan conroh

penggunaannya!

4. Tuliskan tag HTML untuk karakter spesial @, &, ©, ®, spasi!

5. Sebutkan jenis-jenis list yang ada pada dokumen HTML!

6. Tuliskan perintah HTML untuk membuat list dengan menggunakan

penomoran angka Romawi!

praktek 1 desain halaman web

Documents