Top Banner
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom 1 HOMEPAGE UNTUK INFORMASI DAN KOMUNIKASI orld Wide Web (WWW) yang lebih umum disebut dengan web adalah media penyajian informasi dalam bentuk dokumen yang mempunyai referensi dan link (hubungan ke dokumen lain atau mesin lain di internet). Halaman depan web disebut Homepage. Penyajian informasi melalui web dapat dinikmati pemakai komputer melalui browser yang terhubung ke internet dengan menggunakan HTTP (HyperText Transfer Protocol) yang informasinya dibuat dengan HTML (HyperText Markup Language). Secara umum halaman web dibangun dengan sebuah bahasa pemrograman bernama HTML. Seperti bahasa pemrograman lainnya HTML memerlukan software atau program aplikasi tertentu yang dikenal dengan HTML Editor. HTML Editor ini yang nantinya berfungsi untuk menerjemahkan bahasa HTML menjadi tampilan web yang dapat dilihat oleh pemakai internet. Browser Web Browser Web adalah software yang digunakan untuk menampilkan informasi dari server web. Browser Web yang popular digunakan antara lain adalah Microsoft Internet Explorer, Netscape Navigator dan Mozilla. Browser Web bertugas menerjemahkan instruksi-instruksi berbentuk tag HTML untuk ditampilkan. Server Web Server Web adalah komputer yang dgunakan untuk menyimpan dokumen-dokumen web. Komputer ini akan melayani permintaan dokumen web dari kliennya. Browser web berkomunikasi melalui jaringan server web dengan menggunakan HTTP. Browser akan mengirimkan request kepada server untuk meminta dokumen tertentu atau layanan lain yang disediakan server. Server memberikan dokumen atau layanannya jika tersedia dengan menggunakan protokol HTTP. HyperText Transfer Protocol (HTTP) HTTP adalah protokol yang menentukan aturan yang harus diikuti oleh Browser Web dalam meminta atau mengambil suatu dokumen dari server web dalam menyediakan dokumen yang diminta. Protokol ini merupakan protokol standar yang digunakan untuk mengakses dokumen HTML. HTTP umumnya digunakan untuk melayani dokumen hypertext karena HTTP merupakan protokol dengan overhead yang sangat rendah. Pada kenyataannya navigasi informasi dapat ditambahkan langsung ke dalam dokumen dan dengan demikian protokolnya sendiri tidak harus mendukung navigasi secara penuh. Uniform Resources Locator (URL) URL adalah sarana yang digunakan untuk menentukan lokasi informasi pada suatu server web. Format umum suatu URL adalah sebagai berikut. Protokol transfer : //nama_host/path/nama_file Protokol transfer adalah protokol yang digunakan oleh suatu browser untuk mengambil informasi. Contohnya : http. Nama_host adalah nama dari komputer dimana informasi tersebut berada. Contohnya : smun47-jkt.sch.id. Path/nama_file adalah jalur serta nama file dari suatu informasi. Contohnya : soal/matematika.html Biasanya alamat yang diketik pada Address bar adalah protokol transfer dan nama host saja. Setelah homepage (halaman pertama website) tampil, maka kita dapat melakukan link ke bagian tertentu dari website tersebut. W
33

Homepage untuk informasi dan komunikasi

Dec 14, 2014

Download

Documents

Resa Firmansyah

 
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

1

HOMEPAGE UNTUK INFORMASI DAN KOMUNIKASI

orld Wide Web (WWW) yang lebih umum disebut dengan web adalah media penyajian informasi dalam bentuk dokumen yang mempunyai referensi dan link (hubungan ke dokumen lain atau mesin lain di

internet). Halaman depan web disebut Homepage. Penyajian informasi melalui web dapat dinikmati pemakai komputer melalui browser yang terhubung ke internet dengan menggunakan HTTP (HyperText Transfer Protocol) yang informasinya dibuat dengan HTML (HyperText Markup Language). Secara umum halaman web dibangun dengan sebuah bahasa pemrograman bernama HTML. Seperti bahasa pemrograman lainnya HTML memerlukan software atau program aplikasi tertentu yang dikenal dengan HTML Editor. HTML Editor ini yang nantinya berfungsi untuk menerjemahkan bahasa HTML menjadi tampilan web yang dapat dilihat oleh pemakai internet. Browser Web Browser Web adalah software yang digunakan untuk menampilkan informasi dari server web. Browser Web yang popular digunakan antara lain adalah Microsoft Internet Explorer, Netscape Navigator dan Mozilla. Browser Web bertugas menerjemahkan instruksi-instruksi berbentuk tag HTML untuk ditampilkan. Server Web Server Web adalah komputer yang dgunakan untuk menyimpan dokumen-dokumen web. Komputer ini akan melayani permintaan dokumen web dari kliennya. Browser web berkomunikasi melalui jaringan server web dengan menggunakan HTTP. Browser akan mengirimkan request kepada server untuk meminta dokumen tertentu atau layanan lain yang disediakan server. Server memberikan dokumen atau layanannya jika tersedia dengan menggunakan protokol HTTP. HyperText Transfer Protocol (HTTP) HTTP adalah protokol yang menentukan aturan yang harus diikuti oleh Browser Web dalam meminta atau mengambil suatu dokumen dari server web dalam menyediakan dokumen yang diminta. Protokol ini merupakan protokol standar yang digunakan untuk mengakses dokumen HTML. HTTP umumnya digunakan untuk melayani dokumen hypertext karena HTTP merupakan protokol dengan overhead yang sangat rendah. Pada kenyataannya navigasi informasi dapat ditambahkan langsung ke dalam dokumen dan dengan demikian protokolnya sendiri tidak harus mendukung navigasi secara penuh. Uniform Resources Locator (URL) URL adalah sarana yang digunakan untuk menentukan lokasi informasi pada suatu server web. Format umum suatu URL adalah sebagai berikut. Protokol transfer : //nama_host/path/nama_file Protokol transfer adalah protokol yang digunakan oleh suatu browser untuk mengambil

informasi. Contohnya : http. Nama_host adalah nama dari komputer dimana informasi tersebut berada. Contohnya : smun47-jkt.sch.id. Path/nama_file adalah jalur serta nama file dari suatu informasi.

Contohnya : soal/matematika.html Biasanya alamat yang diketik pada Address bar adalah protokol transfer dan nama host saja. Setelah homepage (halaman pertama website) tampil, maka kita dapat melakukan link ke bagian tertentu dari website tersebut.

W

Page 2: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

2

Protokol Transfer Protokol transfer adalah protokol yang digunakan untuk pengiriman informasi di internet. Selain HTTP dikenal beberapa protokol lain diantaranya adalah sebagai berikut : FTP (File Transfer Protocol)

Protokol ini dirancang agar memungkinkan pemakai mentransfer file dalam format teks atau biner dalam server komputer di internet. Contoh : ftp.usma.edu/pub/msdos/.

Gopher Protokol ini dirancang untuk mengakses server Gopher. Contoh : gopher://wiretrap.spies.com/.

News (Network News Transfer Protocol) Protokol ini digunakan untuk mendistribusikan berita Usenet. Usenet adalah sistem yang dirancang sebagai forum diskusi yang didasarkan pada topik-topik yang disebut newsgroup. Contoh : news:comp.infosystem.www.announce.

Telnet Protokol ini digunakan untuk login ke suatu server tertentu.

Domain Name Server (DNS) Untuk mempermudah pengelolaan server komputer di internet, maka digunakanlah suatu format penamaan standar atau yang dikenal DNS (Domain Name Server). DNS merupakan sistem penamaan untuk server komputer. DNS membuat tingkatan-tingkatan domain yang merupakan kelompok komputer yang terhubung ke internet. Berikut ini nama domain dan jenis organisasinya (Top Level Domain)

Nama Domain Jenis Organisasi com edu gov int mil net org id

Organisasi komersial, contoh : www.yahoo.com Lembaga pendidikan, contoh : www.usc.edu Lembaga pemerintah Organisasi internasional Organisasi militer Provider internet Organisasi umum, contoh : www.vlsm.org Domain untuk negara Indonesia, contoh : http://smun47-jkt.sch.id

Pembuatan Homepage Sederhana A. Editor dalam Mendesain Homepage Secara umum ada dua jenis HTML Editor, yaitu text editor dan WYSIWYG editor. Text editor digunakan oleh mereka yang terbiasa dengan bahasa pemrograman serta mahir bahasa HTML. Kode-kode HTML langsung ditulis sesuai aturan yang berlaku dalam penulisan HTML. Salah satu contoh text editor adalah Homesite. Jika anda menggunakan sistem operasi Windows, notepad bisa digunakan untuk menuliskan HTML walaupun fungsinya bukan sebagai HTML editor. WYSIWYG (What You See Is What You Get) merupakan HTML editor yang berbasis GUI (Graphic User Interface) yang cocok bagi pemakai yang tidak terbiasa dengan bahasa pemrograman atau sintaks HTML. Microsoft Frontpage yang terdapat dalam paket Microsoft Office, bisa anda gunakan sebagai HTML editor. WYSIWYG yang terkenal diantaranya adalah Macromedia Dreamweaver yang menyediakan fasilitas untuk membuat skrip-skrip tertentu. File HTML mempunyai ekstensi .HTML atau .HTM.

Page 3: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

3

B. Cara Membuka Source HTML pada suatu Homepage HTML merupakan client side scripting. Dengan demikian, anda sebagai pemakai (user) dapat melihat seluruh kode-kode pemrograman yang dibuat di browser dan dapat memodifikasinya sesuai keinginan anda. Untuk melihat kode HTML yang terdapat pada sebuah homepage, terlebih dahulu anda buka file HTML yang dimaksud dengan Browser Web, misalkan Internet Explorer.

Gambar 1 Web dengan HTML Kemudian lakukanlah langkah-langkah berikut ini Klik menu View pada Internet Explorer Klik Source

Gambar 2 Membuka Source HTML Maka akan tampak Source Code dalam program aplikasi notepad seperti gambar berikut.

Gambar 3 Source HTML

Page 4: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

4

C. Elemen-Elemen dalam Dokumen HTML Sebuah dokumen HTML bisa mengandung teks, gambar, suara, animasi atau video. Untuk membedakan antara teks HTML dengan dokumen lainnya, anda dapat melihat elemen beserta tag-tagnya. Dokumen HTML disusun oleh tiga bagian, yaitu : 1. Baris yang berisi informasi versi HTML yang digunakan 2. Deklarasi bagian header dengan elemen head 3. Deklarasi bagian body dengan elemen body atau frame-set Perhatikan gambar berikut ini.

Gambar 4 Elemen-elemen HTML

Lebih lengkapnya elemen dasar untuk pembuatan HTML adalah sebagai berikut :

Elemen Dasar Jenis Dokumen Judul Mukadimah (Header) Batang Tubuh

<HTML> </HTML> <TITLE> </TITLE> <HEAD> </HEAD> <BODY> </BODY>

Terdapat pada awal dan akhir dari file HTML Terdapat pada mukadimah Keterangan umum seperti judul Isi dari halaman HTML

Format penulisan HTML adalah sebagai berikut : <HTML> <HEAD> <TITLE> Tempat mendeskripsikan halaman HTML seperti judul, ............... pembuat, tanggal dibuat, hubungan antar dokumen </TITLE> dan lain-lain. </HEAD> <BODY> ............... ............... Tempat pengetikan informasi-informasi yang dimuncul- </BODY> kan pada halaman web. </HTML> Elemen dapat berupa teks murni, bukan teks atau keduanya. Suatu elemen HTML terdiri dari tag-tag dan atributnya. Untuk menandai berbagai elemen dalam suatu dokumen HTML, kita menggunakan tag. Tag HTML terdiri atas “tanda lebih kecil (<)”, sebuah nama tag dan sebuah “tanda lebih

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 Final//EN”> <html> <head> Deklarasi bagian header </head> <body> Deklarasi bagian body </body> </html>

Page 5: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

5

besar (>)”. Umumnya, tag berpasangan, misalnya <....> dengan </....>. Tag yang pertama menunjukkan tag awal yang berarti awal elemen dan tag yang kedua (dengan garis miring) menunjukkan tag akhir yang berarti akhir elemen. Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya dituliskan dengan <nama tag>....</nama tag>. Penulisan penamaan tag tidak case sensitive artinya tidak berpengaruh terhadap huruf besar atau huruf kecil. Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag <html>, <head> dan <body> berikut tag-tag pasangannya yang selalu diawali dengan tanda (/). Elemen head berisi informasi tentang dokumen tersebut seperti title, meta dan script tertentu. Elemen body berisi teks yang sebenarnya, yaitu tampilan halaman web yang tersusun dari link, grafik, paragraf dan elemen lainnya. Tag awal dapat disisipkan beberapa buah atribut yang menyatakan karakteristik tag tersebut, misalnya tag awal berikut ini. <P ALIGN = “center”> Tag ini digunakan untuk membuat teks di tengah-tengah suatu paragraf. Tag yang digunakan adalah <p> dan atribut yang menyertainya adalah ALIGN dengan nilai center.

Dalam HTML, nilai atribut diapit tanda petik ganda, kecuali jika : Nilai merupakan suatu kumpulan dari nilai tertentu (misalnya dalam <p align = “left”>,

tanda petik ganda boleh dihilangkan, maka penulisan boleh <p align = left>). Nilai left merupakan salah satu kumpulan dari nilai left, right dan center.

Nilai hanya berisi angka, huruf dan titik (dalam <IMG SRC = “picture/hiasan.gif” ALT = “Menampilkan hiasan”>. Kedua nilai tersebut memerlukan tanda petik ganda karena nila SRC mengandung tanda “/” dan nilai ALT mengandung spasi).

Heading Dokumen Heading dokumen berisi informasi mengenai bagian kepala suatu dokumen HTML. Elemen Head Kepala dokumen dinyatakan dengan pasangan tag <HEAD> </HEAD> yang merupakan pembuka dari dokumen HTML. Head berisi informasi-informasi yang menjelaskan dokumen HTML, seperti judul (title) dokumen, baris URL suatu dokumen, hubungan antar dokumen dalam html, indeks suatu dokumen, informasi dan script tertentu. Teks bagian head tidak akan terlihat saat dokumen tersebut dibuka pada suatu browser. D. Cara Mengedit Teks HTML dengan Microsoft Word Banyak cara untuk mengedit file HTML, termasuk bukan dengan program aplikasi HTML editor, sebagai contohnya adalah mengedit dengan Microsoft Word. Program pengolah kata ini dapat digunakan untuk membuat dan mengedit file HTML. Oleh karena Microsoft Word merupakan program aplikasi berbasis GUI, maka anda dapat mengedit layaknya pada sebuah WYSIWYG editor. Hal ini sangat memudahkan pemakai yang tidak terbiasa dengan bahasa pemrograman. Untuk dapat mengedit file HTML dengan Microsoft Word, anda dapat melakukannya dengan mengklik ikon Edit with Microsoft Word pada Internet Explorer. Untuk lebih jelasnya perhatikan langkah-langkah berikut ini.

Page 6: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

6

Buka sebuah website dengan Internet Explorer baik online atau offline

Gambar 5 Web dengan HTML Klik ikon Edit with Microsoft Word

Gambar 6 Ikon untuk mengedit HTML Hingga muncul program Microsoft Word dengan tampilan website yang bisa diedit.

Gambar 7 Web pada program Microsoft Word Setelah itu anda dapat mengedit website dalam Microsoft Word seperti mengedit teks

dalam Microsoft Word.

Page 7: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

7

E. Manipulasi Teks dengan HTML Agar lebih hidup, teks dalam web perlu dispesialisasi. Caranya adalah dengan memanipulasi atau yang lebih dikenal dengan istilah format teks, seperti menebalkan teks, memiringkan teks atau memperbesar ukuran teks. Bahasa HTML sangat berbeda dengan bahasa format teks yang sering kita lakukan pada program aplikasi pengolah kata. Pada bahasa HTML, format teks dilakukan dengan menggunakan tag-tag tertentu sesuai aturan. Beberapa pemformatan teks dan tag yang digunakan adalah sebagai berikut.

Tags Format Teks <B>....</B> <I>....</I> <U>....</U> <EM>....</EM> <S>....</S> <BIG>....</BIG> <SMALL>....</SMALL> <CENTER>....</CENTER> <SUB>....</SUB> <SUP>....</SUP> <BLINK>....</BLINK> <FONT FACE = “***”>....</FONT> <FONT SIZE = ?>....</FONT> <BR> <HR> <P>....</P>

Teks dengan huruf tebal Teks dengan huruf miring Teks dengan garis bawah Tekanan pada teks (emphasize) Coretan pada teks Memperbesar ukuran huruf Memperkecil ukuran huruf Menempatkan posisi teks / gambar di tengah Menggeser huruf ke bawah (subscript) Menggeser huruf ke atas (superscript) Huruf berkedip Memilih jenis huruf Menentukan ukuran huruf Pindah ke baris berikutnya / di bawahnya Garis datar Paragraf baru

1. Menambah Heading Heading adalah sekumpulan kata atau frasa yang menjadi judul atau subjudul suatu dokumen HTML. Walaupun merupakan judul, heading berbeda dengan elemen <TITLE> yang hanya muncul pada title bar dari suatu jendela browser, bukan dalam halaman web. HTML menyediakan enam tingkat heading. Untuk menyatakan suatu heading, digunakan tag <Hx> dengan x adalah nomor level heading dari 1 sampai 6. Untuk pemakaian heading perhatikan contoh berikut ini. <html> <head> <title>Heading dalam Dokumen</title> </head> <body> <H1>Heading Level 1</H1> <H2>Heading Level 2</H2> <H3>Heading Level 3</H3> <H4>Heading Level 4</H4> <H5>Heading Level 5</H5> <H6>Heading Level 6</H6> </body> </html>

Page 8: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

8

Gambar 8 Heading 2. Perataan Heading Atribut yang menyertai tag <H> adalah ALIGN yang memungkinkan sebuah heading ditampilkan rata kanan, kiri atau tengah. Berikut adalah tabel Align Tag Heading.

Nilai Fungsi ALIGN = left ALIGN = center ALIGN = right

Untuk meratakan heading ke kiri Untuk meratakan heading di tengah Untuk meratakan heading ke kanan

Perhatikan sintaks HTML di bawah ini : <html> <head> <title>Perataan Heading</title> </head> <body> <H1 align=center>Heading Level 1 Rata Tengah</H1> <H2 align=left>Heading Level 2 Rata Kiri</H2> <H3 align=right>Heading Level 3 Rata Kanan</H3> </body> </html>

Page 9: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

9

Gambar 9 Perataan Heading 3. Garis Pemisah Horizontal Untuk memberi pemisah antara baris yang satu dengan baris yang lain, anda dapat menggunakan elemen tag <HR>. Atribut yang menyertainya adalah sebagai berikut.

Nama Fungsi ALIGN WIDTH SIZE NOSHADE COLOR

Dapat diset dengan nilai left, center atau right. Untuk mengatur panjang garis horizontal yang dapat ditentukan dengan nilai pixel atau persen. Untuk mengatur ketebalan garis horizontal yang mempunyai nilai dalam satuan pixel. Untuk menampilkan garis horizontal tanpa bayang-bayang 3-D. Untuk memberi warna pada garis horizontal.

Untuk membuat garis pemisah horizontal, buatlah sintaks berikut. <html> <head> <title>Heading dengan Pemisah Horizontal</title> </head> <body> <H1 align=center>Heading dengan garis pembatas</H1> <HR size=4 color=red> <H2>Heading Level 2</H2> <H3>Heading Level 3</H3> </body> </html>

Page 10: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

10

Gambar 10 Garis Pemisah Horizontal 4. Entitas Karakter HTML Entitas karakter mempunyai 3 bagian, yaitu sebuah ampersand (&), sebuah nama entitas atau sebuah # dan nomor entitas serta sebuah tanda titik koma (; / semikolon).

Berikut ini tabel macam-macam entitas karakter HTML.

Hasil Keterangan Nama Entitas Nomor Entitas © Copyright &copy; &#169;2 ® Registered trademark &reg; &#174; ™ Trademark &#8482; Non-breaking space &nbsp; &#161;

& Ampersand &amp; &#38; « Angle quotation mark (left) &laquo; &#171; » Angle quotation mark (right) &raquo; &#187; " Tanda kutip &quot; &#34; < Lebih kecil &lt; &#60; > Lebih besar &gt; &#61; _ Tanda kali &times; &#215; ÷ Tanda bagi &divide; &#247;

Untuk pembuatan entitas, perhatikan contoh berikut. <html> <head> <title>Heading dengan Pemisah Horizontal dan Entitas</title> </head> <body> <H1 align=center>Heading dengan garis pembatas</H1> <HR size=4 color=red> <H2>Heading Level 2</H2> <H3>Heading Level 3</H3> <HR size=4 color=red> <center>tuesmay&reg;2009 </body> </html>

Page 11: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

11

Gambar 11 Garis Pemisah Horizontal dan Entitas F. Manipulasi Gambar dengan HTML Ada dua metode untuk menampilkan gambar-gambar (image) ke dalam halaman web, yaitu metode inline dan eksternal. Gambar inline menampilkan gambar secara langsung saat pengguna komputer membuka web yang berbasiskan grafis. Gambar eksternal tidal memunculkan gambar secara otomatis saat web dibuka. Gambar akan muncul ketika pemakai menginginkannya, yakni dengan mengklik link yang mewakili gambar tersebut. Link tersebut dapat berupa teks atau gambar lain yang ditampilkan secara eksternal dan biasanya berukuran lebih kecil. 1. Penggunaan Elemen IMG Elemen IMG yang dinyatakan dengan tag <IMG> adalah suatu tag tunggal yang tidak mempunyai tag pasangan. Elemen IMG mempunyai tiga buah atribut, yaitu SRC, ALT dan ALIGN. Atribut SRC berfungsi untuk menentukan sumber dari gambar inline. Atribut ALIGN digunakan untuk mengatur perataan teks pada suatu gambar inline. Atribut ALT digunakan sebagai alternatif untuk browser yang berbasis teks. 2. Teks Alternative untuk Gambar Jika browser yang digunakan pemakai adalah browser dengan mode teks, seperti Lynx yang tidak dapat menampilkan gambar, maka HTML menyediakan suatu alternatif gambar dengan teks. Sarana yang digunakan adalah atribut ALT pada elemen IMG, sintaksnya adalah sebagai berikut. <IMG SRC = ”URL_Gambar” ALT = ”Teks Pengganti”> “teks pengganti” adalah teks yang akan menggantikan gambar sewaktu ditampilkan di browser. Atribut ALT juga berguna sebagai pengganti gambar jika fasilitas pemanggilan gambar secara otomatis (Auto Load Images pada Netscape) dimatikan. 3. Gambar Sebagai Suatu Link Gambar dapat berfungsi sebagai link jika ditambahkan tag <A>. Jika gambar diklik, maka link akan menuju link tujuan yang diberikan pada tag <A>, seperti : <A HREF = ”Contoh.htm”> <IMG SRC = “Gambar_contoh.gif”> Contoh </A> 4. Pengaturan Perataan Atribut ALIGN digunakan untuk mengatur perataan gambar terhadap teks-teks yang ada di sekitarnya. Nilai untuk atribut ALIGN antara lain : LEFT, RIGHT, MIDDLE, TOP, BOTTOM dan TOPTEXT. Contoh :

Page 12: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

12

<IMG SRC = “Gambar_contoh.gif” ALIGN = “TOP”> 5. Perataan Ukuran Gambar Atribut HEIGHT dan WIDTH digunakan untuk menentukan tinggi dan lebar suatu image dalam ukuran pixel. Jika atribut ini tidak digunakan, maka browser akan memakai ukuran sebenarnya dari gambar tersebut. Contoh : <IMG SRC = “Gambar_contoh.gif” WIDTH = 170 HEIGHT = 120> 6. Atribut HSPACE dab VSPACE Atribut HSPACE dan VSPACE digunakan untuk menentukan jarak spasi antara gambar dengan objek di sekitarnya. Atribut HSPACE menentukan spasi horizontal (bagian kanan dan kiri) suatu gambar, sedangkan atribut VSPACE menentukan spasi vertikal (sebelah atas dan bawah) suatu gambar. Spasi ini dinyatakan dalam satuan pixel dan akan menyebabkan timbulnya ruangan kosong di antara gambar dan objek-objek yang mengelilinginya. Jika atribut ini tidak digunakan, maka browser akan meletakkan teks persis di samping gambar tanpa ada jarak antara teks dan gambar. Contoh : <IMG SRC = “Gambar_contoh.gif” VSPACE = 20> atau <IMG SRC = “Gambar_contoh.gif” HSPACE = 20> 7. Atribut Border Atribut border berfungsi untuk memberikan garis pada suatu Gambar Inline. Gambar Inline pada umumnya tidak mempunyai garis, kecuali Gambar Inline yang berfungsi sebagai suatu link. Nilai BORDER menggunakan satuan pixel. Gambar yang tidak mempunyai border memiliki atribut BORDER = 0. Jika nilai 0 digunakan pada gambar yang berfungsi sebagai suatu link, maka border pada gambar tersebut akan hilang. Hal ini menyebabkan ciri suatu gambar yang berfungsi sebagai link menjadi hilang dan menyebabkan pemakai tidak mengetahui bahwa gambar tersebut dapat diklik untuk menuju ke link lain. Contoh : <IMG SRC = “Gambar_contoh.gif” BORDER = 5> Contoh : <html> <head> <title>Menyisipkan Gambar</title> </head> <body> <p align = "center"> <img border = "2" src = "logo.jpg" width = "250" height = "250" hspace = "1" vspace = "1"></p> <hr size = "5" color = "blue"> <h2 align = "center" color = "red">Mozilla Firefox vs Internet Explorer</h2> <hr size = "5" color = "blue"> </body> </html>

Page 13: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

13

Output :

Gambar 12 Menyisipkan Gambar pada Halaman Web LATIHAN PRAKTEK Buatlah halaman web untuk menampilkan gambar yang dapat di link ke halaman lain Klik salah satu gambar untuk menuju ke halaman berikutnya Buatlah teks yang dapat di link ke halaman depan (utama)

Page 14: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

14

G. Manipulasi Daftar Item dengan HTML HTML menyediakan beberapa jenis daftar item, yaitu : Ordered list / numbered list (daftar berurut / daftar dengan nomor) Unordered list / bulleted list (daftar tak berurut / daftar dengan titik) Menu list (daftar menu) Directory list (daftar direktori) Definition list (glossary / daftar istilah) Pada pembahasan kali ini akan diperkenalkan dua dari lima item di atas. 1. Ordered List Ordered list atau numbered list adalah suatu daftar dengan item-item yang ada dalam daftar berupa nomor secara berurut. Ordered menggunakan tag <OL>....</OL>. Di antara kedua tag tersebut terdapat tag <LI> untuk menyatakan list item dalam daftar. Berikut ini contoh ordered list. <html> <head> <title>Ordered List</title> </head> <body> <h2> HTML menyediakan beberapa jenis daftar / list, yaitu :</h2> <OL> <LI>Ordered List / numbered list (daftar berurut / daftar dengan nomor) <LI>Unordered List / bulleted list (daftar tak berurut / daftar dengan titik) <LI>Menu List (daftar menu) <LI>Directory List (daftar direktori) <LI>Definition List (glossary / daftar istilah) </OL> </body> </html> Output :

Gambar 13 Ordered List

Page 15: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

15

Pada hasil di atas, browser secara otomatis memberi nomor secara berurut pada setiap item yang terdapat pada daftar tersebut. Setiap kali browser menemui tag <LI>, maka item otomatis berpindah ke baris baru. a. Atribut Type Untuk mengganti jenis pengurutan, anda dapat menggunakan atribut TYPE yang diletakkan pada tag <OL>. Berikut ini atribut untuk mengubah jenis nomor pada tag <OL>.

Atribut Fungsi TYPE = A Untuk membuat daftar berurut dengan huruf besar (A,B,C,D,.....) TYPE = a Untuk membuat daftar berurut dengan huruf kecil (a,b,c,d,.....) TYPE = I Untuk membuat daftar berurut dengan bilangan romawi berhuruf besar

(I,II,III,IV,.....) TYPE = i Untuk membuat daftar berurut dengan bilangan romawi berhuruf kecil

(i,ii,iii,iv,.....) TYPE = 1 Untuk mengembalikan daftar berurut pada nomor (default) (1,2,3,4,.....) TYPE = x Untuk menentukan nilai awal dari item dalam daftar, dimana x adalah

nilai awal daftar Selain TYPE, ada juga atribut START yang digunakan untuk mendefinisikan nomor awal yang akan digunakan pada ordered list. Contoh : <OL START = 7> Dengan contoh di atas, list akan dimulai dari nomor 7. b. Nested Ordered List (Daftar Bersarang) Nested ordered list adalah tampilan suatu daftar yang di dalamnya terdapat daftar lain. Contoh : <html> <head> <title>Nested Ordered List</title> </head> <body> <h2> HTML menyediakan beberapa jenis daftar / list, yaitu :</h2> <OL> <LI>Ordered List / numbered list (daftar berurut / daftar dengan nomor) <OL TYPE=a> <LI>Daftar berurut dengan nomor (default) <LI>Daftar berurut dengan bilangan romawi kecil <LI>Daftar berurut dengan bilangan romawi besar <LI>Daftar berurut dengan huruf besar <LI>Daftar berurut dengan huruf kecil </OL> <LI>Unordered List / bulleted list (daftar tak berurut / daftar dengan titik) <LI>Menu List (daftar menu) <LI>Directory List (daftar direktori) <LI>Definition List (glossary / daftar istilah) </OL> </body> </html>

Page 16: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

16

Output :

Gambar 14 Nested Ordered List

2. Unordered List Unordered list adalah suatu daftar yang mengabaikan urutan item. Setiap item dalam unordered list biasanya ditandai dengan bentuk objek tertentu, misalkan kotak atau bulat. Tag yang digunakan adalah tag <UL>....</UL> sedangkan setiap item didalamnya menggunakan tag yang sama seperti pada ordered list, yaitu <LI>. a. Atribut TYPE Pada unordered list terdapat atribut TYPE yang berguna untuk mengubah bentuk tanda item dari suatu list. Berikut ini uraian atribut TYPE beserta fungsinya.

Atribut Fungsi TYPE = circle Membuat tanda lingkaran untuk item TYPE = square Membuat tanda kotak untuk item TYPE = disc Membuat tanda cakram untuk item

Page 17: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

17

Contoh pemakaian order list dengan unordered list adalah sebagai berikut. <html> <head> <title>Ordered List dan Unordered List</title> </head> <body> <h2> HTML menyediakan beberapa jenis daftar / list, yaitu :</h2> <OL TYPE=I> <LI>Ordered List / numbered list (daftar berurut / daftar dengan nomor) <UL TYPE=square> <LI>Daftar berurut dengan nomor (default) <LI>Daftar berurut dengan bilangan romawi <OL TYPE=i> <LI>romawi kecil <LI>romawi besar </OL> <LI>Daftar berurut dengan huruf <OL TYPE=a> <LI>besar <LI>kecil </OL> </UL> <LI>Unordered List / bulleted list (daftar tak berurut / daftar dengan titik) <UL TYPE=disc> <LI>Daftar berurut dengan simbol kotak <LI>Daftar berurut dengan simbol bulat <LI>Daftar berurut dengan simbol disk </UL> <LI>Menu List (daftar menu) <LI>Directory List (daftar direktori) <LI>Definition List (glossary / daftar istilah) </OL> </body> </html> Output :

Gambar 15 Unordered List

Page 18: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

18

TUGAS PRAKTEK I Buatlah sebuah halaman HTML dengan bentuk tulisan sebagai berikut : 1. Microsoft Excel adalah salah satu program aplikasi yang berorientasi pada

pengolahan... A. kata B. angka C. data D. grafis E. web

2. Sistem Operasi yang dibutuhkan untuk dapat mengoperasikan program Microsoft Excel

adalah... A. linux B. windows C. Disk Operating System (DOS) D. unix E. novell netware

3. Kolom terakhir pada lembar kerja Microsoft Excel adalah...

A. z B. az C. ip D. iv E. zz

TUGAS PRAKTEK II Buatlah sebuah halaman HTML dengan bentuk tulisan sebagai berikut :

Tipe Data dan Operator : I Tipe Data 1 Tipe Data Sederhana i Tipe Data Standar

Integer Real Char String Boolean

ii Tipe Data Definisi o Enumerated o Subrange

2 Tipe Data Terstruktur 3 Tipe Data Penunjuk II Operator

Page 19: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

19

H. Manipulasi Form dengan HTML Form merupakan elemen HTML yang digunakan untuk memperoleh input (masukan) dari pengguna web (surfer). Pengguna web dapat memasukkan input melalui halaman HTML.

Suatu form dapat terdiri atas beberapa form, tetapi hanya satu form yang dapat dikirimkan ke server dalam satu saat. Form tidak dapat berbentuk nested (bersarang). Sintaks : <FORM ACTION=”_url_” METHOD=”get | post” ENCTYPE=” ”> </FORM> Atribut ACTION merupakan tempat menspesifikasikan URL yang akan digunakan

sebagai pemroses field input form. Jika ACTION tidak disebutkan, informasi akan dikirimkan ke URL yang sama dengan halaman web itu sendiri.

Atribut METHOD digunakan untuk menyatakan proses informasi yang dikirim ke URL yang disebutkan dalam ACTION. Nilai yang umum dipakai untuk atribut ini adalah GET dan POST. POST yang membuat informasi dikirimkan secara terpisah dengan URL, sedangkan GET yang akan membuat informasi dikirimkan menjadi satu dengan URL.

1. Jenis Masukan dalam Form

Tag <INPUT> digunakan untuk proses pemasukan data dan letaknya berada dalam pasangan tag <FORM>...</FORM>. Ada beberapa macam tipe pemasukan data, antara lain berupa kotak teks, password, tombol radio (radio button), kotak cek (check box) serta tombol SUBMIT dan RESET. Tag <INPUT> memiliki sejumlah atribut, yaitu : a. Name : untuk menentukan nama data. Atribut ini diperlukan oleh semua jenis

masukan kecuali SUBMIT dan RESET. b. Size : untuk menentukan ukuran kotak yang akan tampil yang berlaku untuk

input teks dan password. c. Maxlength : untuk menentukan jumlah karakter yang dapat dimasukkan dalam

kotak password dan kotak teks. d. Value : untuk menentukan nilai default kotak masukan. e. Checked : untuk mengatur agar kotak cek dalam keadaan terpilih pada kondisi

awal. f. Type : untuk menentukan tipe kotak masukan. Tipe masukan dalam form dibedakan menjadi 9, yakni : a. Text

Digunakan untuk memasukkan suatu nilai yang akan dikirimkan kepada server. Nilai dapat berupa angka atau teks. Contoh sintaksnya adalah sebagai berikut : <input type=”text” name=”var1” size=”8” maxlength=”8”>

b. Radio Sebagai input yang menyediakan beberapa pilihan (option) dan hanya satu pilihan yang bisa dipilih. Contoh sintaksnya adalah sebagai berikut : <input type=”radio”>Pilihan1 <input type=”radio”>Pilihan2 <input type=”radio”>Pilihan3

c. Check box Menyediakan beberapa pilihan, bisa lebih dari satu pilihan yang dipilih. Contoh sintaksnya adalah sebagai berikut :

Page 20: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

20

<input type=”checkbox”>Pilihan1 <input type=”checkbox”>Pilihan2 <input type=”checkbox”>Pilihan3

d. List Menyediakan pilihan dalam bentuk daftar pilihan. Hanya satu pilihan yang bisa dipilih. Contoh sintaksnya adalah sebagai berikut : <select name=".......">

<option value="......"> Pilihan1 <option value="......"> Pilihan2 <option value="......"> Pilihan3 </select> e. Password

Menyediakan tipe password yang akan membuat setiap karakter yang diketikkan oleh pemakai pada field ini akan disembunyikan, misalnya diganti dengan tanda asterix (*) untuk setiap karakter yang diketikkan. Contoh sintaksnya adalah sebagai berikut : <input type=”password” name=”kunci” size=”8” maxlength=”8”>

f. Submit Digunakan untuk memanggil URL setelah input selesai dimasukkan. Tipe SUBMIT pada tag <INPUT> akan membentuk tombol, yaitu tombol yang menyebabkan URL yang disebutkan pada ACTION pada tag <FORM> akan dimuat. Contoh sintaksnya adalah sebagai berikut : <input type=”submit”>

g. Button Digunakan untuk membuat form lebih interaktif untuk memanggil script yang ada di dalam dokumen HTML.

h. Image Digunakan sebagai pengganti button (tombol), berupa tombol yang berbentuk gambar. <input type=”image” src=”url_image”>

i. Text area Digunakan untuk memasukkan data dalam bentuk teks berupa memo. Atributnya adalah sebagai berkut : Name

Digunakan untuk menentukan nama area teks Rows

Digunakan untuk menentukan jumlah baris yang tampil pada layar Cols

Digunakan untuk menentukan jumlah kolom yang tampil pada layar Wrap

Digunakan untuk menentukan teks yang secara otomatis akan dilipat (jika baris tidak cukup menampung keseluruhan teks, maka teks akan diletakkan pada beberapa baris) pada area teks atau tidak jika terlalu panjang. Contohnya : <textarea cols=20 rows=10>.................</textarea>

Setiap elemen dapat diberikan nama dengan memberikan atribut NAME dengan value berupa string yang mendefinisikan nama elemen. Dalam pemrograman, name ini sering disebut sebagai nama variabel. Nama variabel sebaiknya mencerminkan fungsi dari variabel tersebut.

Page 21: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

21

LATIHAN PRAKTEK I

Source Code : <html> <head> <title>form2</title> </head> <body> <u><h1>DATA SISWA</h1></u> <form name="form1" method="post" action="bukutamu.php"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td>&nbsp;</td> </tr> <tr> <td width="20%">No Absen :</td> <td width="80%"><input type="text" name=text_absen size=5

maxlength=5></td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td width="20%">Nama Siswa :</td> <td width="80%"><input type="text" name=text_nama size=30

maxlength=30></td> </tr> <tr> <td>&nbsp;</td> </tr>

Page 22: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

22

<tr> <td>Kelas :</td> <td> <select name="kelas"> <option value="X">X <option value="XI">XI <option value="XII">XII </select> </td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>Program :</td> <td> <input type="radio" checked name="program">IPA <input type="radio" name="program">IPS </td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>Mata pelajaran disukai:</td> <td> <input type="checkbox">matematika <input type="checkbox">web design <input type="checkbox">fisika <input type="checkbox">TIK </td> </tr> <tr> <td>&nbsp;</td> </tr> <td>&nbsp;</td> <td> <input type="submit" name="submit" value="submit"> <input type="reset" name="submit2" value="reset"> </td> </table> </form> </body> </html>

Page 23: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

23

LATIHAN PRAKTEK II Source Code : <html> <head> <title>uts</title> </head> <body> <h1>Welcome</h1> <p>Selamat datang di website pertama saya!<br /> Silahkan melihat-lihat:<br /> <ul> <li><a href="photo.html">Photo-photo</a></li> <li><a href="catatan.html">Catatan-kecil</a></li> <li><a href="bukutamu.php">Lihat Buku Tamu</a></li> <li><a href="about.html">About</a></li> </ul> </p>

Page 24: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

24

<h2>Buku Tamu</h2> <p>Silahkan isi buku tamu dibawah ini:</p> <form name="form1" method="post" action="bukutamu.php"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%">Nama :</td> <td width="80%"><input type="text" name=textnama size=20 maxlength=20> </tr> <tr><td>&nbsp;</td></tr> <tr> <td>Jenis Kelamin :</td> <td> <input type="radio" checked name="jk">laki-laki <input type="radio" name="jk">perempuan </td> </tr> <tr><td>&nbsp;</td></tr> <tr> <td>Hobi :</td> <td> <input type="checkbox">musik <input type="checkbox">komputer <input type="checkbox">travelling </td> </tr> <tr><td>&nbsp;</td></tr> <tr> <td>Mata kuliah :</td> <td> <select name="mk"> <option value="dasar pemrograman">dasar pemrograman <option value="pemrograman web">pemrograman web <option value="kalkulus 1">kalkulus 1 <option value="sistem informasi manajemen">sistem informasi manajemen </select> </td> </tr> <tr><td>&nbsp;</td></tr> <tr> <td>Masukkan password :</td> <td> <input type="password" name=paswd1 size=6 maxlength=6> </td> </tr> <tr><td>&nbsp;</td></tr>

Page 25: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

25

<tr> <td>Confirm password :</td> <td> <input type="password" name=paswd2 size=6 maxlength=6> </td> </tr> <tr><td>&nbsp;</td></tr> <tr> <td>Kritik dan saran :</td> <td> <textarea cols=30 rows=7> </textarea> </td> </tr> <tr><td>&nbsp;</td></tr> <tr> <td>&nbsp;</td> <td> <input type="submit" name="submitOK" value="setuju"> <input type="reset" name="submitBTL" value="batal"> </td> </tr> </table> </form> </body> </html> I. Manipulasi Frame dengan HTML Salah satu kemampuan HTML adalah memanipulasi frame, yakni dengan membagi jendela browser menjadi beberapa bagian, baik ke arah horizontal maupun ke arah vertikal. Dalam penggunaannya frame memiliki 2 jenis dokumen yang berbeda, yakni : 1. Layout Document (Dokumen Tata Letak)

Dokumen ini berfungsi semata-mata hanya untuk membagi jendela menjadi beberapa bagian. Tag yang biasanya digunakan adalah tag <FRAMESET>....</FRAMESET>.

2. Content Document (Dokumen Isi) Dokumen ini digunakan untuk mengisi sebuah bingkai. Sebenarnya dokumen ini sama dengan dokumen biasa, satu-satunya variasi yang ada adalah letaknya pada link. Dokumen ini dapat dibuat beberapa link dalam satu bingkai dan dapat ditampilkan pada bingkai yang lain. Keberadaan dokumen ini pada dokumen HTML didefinisikan dengan tag <FRAME SRC=”url”>.

a. Pembuatan Frame

Untuk membuat frame, gunakan tag <FRAMESET>....</FRAMESET>. Tag <FRAMESET> ini sekaligus menggantikan elemen <BODY>.

Tag <FRAMESET>....</FRAMESET> mempunyai atribut ROWS dan COLS. Atribut ROWS berfungsi untuk membagi jendela browser menjadi beberapa baris sedangkan atribut COLS berfungsi untuk membagi jendela browser menjadi beberapa kolom. Atribut-atribut ini memiliki nilai yang menyatakan jumlah baris dan jumlah kolom yang dibuat dalam suatu jendela browser.

Page 26: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

26

Selain dua buah atribut tersebut masih ada atribut-atribut lainnya, seperti FRAMESPACING yang berfungsi untuk mendefinisikan spasi di sekitar frame dan atribut FRAMEBORDER yang berfungsi untuk membuat border dengan suatu nilai tertentu (nilai 0 berarti tidak menampilkan border). Untuk memberikan warna pada border, gunakan BORDERCOLOR pada tag FRAMESET.

Untuk menampilkan dokumen di dalam sebuah frame, gunakan tag <FRAME SRC=”url”> yang disisipkan antara tag FRAMESET. Tag ini merupakan tag tunggal dengan berbagai atribut yang menyertainya. Atribut-atribut tersebut antara lain adalah MARGIN WIDTH, MARGIN HEIGHT dan SCROLLING.

Sintaks yang biasa digunakan adalah sebagai berikut : <FRAMESET COLS=”15%,25%,*”> <FRAME SRC=”url”> </FRAMESET> Jumlah tag FRAME bergantung pada jumlah frame kolom atau frame baris yang

ditentukan pada tag FRAMESET. Artinya, bila kita membuat 3 buah frame maka harus memasukkan 3 buah tag frame juga kecuali jika tidak ingin mengisi semua frame.

<FRAMESET COLS=”15%,25%,*”> <FRAME SRC=”url”> <FRAME SRC=”url”> <FRAME SRC=”url”> </FRAMESET>

b. Pembuatan Frame Kolom

Jika ingin membuat tiga buah kolom dalam satu frame, maka buatlah listing seperti berikut :

<html> <head> <title>frame1</title> </head> <frameset cols="25%,25%,25%,25%"> <frame src="soal1.html"> <frame src="soal2.html"> <frame src="soal3.html"> <frame src="soal4.html"> </frameset> </html>

Output :

Gambar 16 Frame Kolom

Page 27: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

27

c. Pembuatan Frame Baris Jika ingin membuat tiga buah baris dalam satu frame, maka buatlah listing seperti berikut :

<html> <head> <title>frame1</title> </head> <frameset rows="25%,25%,25%,25%"> <frame src="soal1.html"> <frame src="soal2.html"> <frame src="soal3.html"> <frame src="soal4.html"> </frameset> </html>

Output :

Gambar 17 Frame Baris

d. Variasi Frame (Baris dan Kolom) Frame kolom dan baris juga dapat dipadukan dalam sebuah halaman web. Untuk membuat 2 baris dan 3 kolom, contoh list programnya adalah sebagai berikut :

<html> <head> <title>frame1a</title> </head> <frameset rows="75%,25%"> <frame src="soal4.html"> <frameset cols="25%,50%,25%"> <frame src="soal1.html"> <frame src="soal2.html"> <frame src="soal3.html"> </frameset> </frameset> </html>

Page 28: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

28

Output :

Gambar 18 Frame Baris dan Kolom e. Hubungan antar frame

Bagian dari sebuah frame dapat kita hubungkan (link) ke frame lain pada halaman itu. Untuk membuatnya, kita harus menentukan nama frame dan targetnya. Kode untuk menentukan nama frame adalah : <frame name="nama_frame"> Sedangkan kode untuk menentukan target adalah : <a href="url" target=" nama_frame "> Contoh :

Langkah-langkah membuat menu seperti diatas adalah sebagai berikut :

1. Buat menu untuk judul dan simpan dengan nama judul.html Baris programnya :

Page 29: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

29

<html>

<head> <title>judul</title>

</head> <body>

<h1 align=center><u>MACAM-MACAM KEGIATAN</u></h1> </body>

</html>

2. Buatlah isi dari menu-menu yang akan ditampilkan di dalam frame di sebelah kanan, diantaranya isi dari menu olahraga, kesenian dan hiburan. Beri nama masing-masing dengan menu1.html, menu2.html dan menu3.html Baris programnya (menu1.html) : <html> <head> <title>menu1</title> </head> <body> <h1 align="center"> <font size=9 face="tahoma">OLAHRAGA</h1> <h2><font size=5 face="tahoma">Macam-macam kegiatan Olahraga antara lain :</h2> <ul> <li><h4>bulutangkis</h2> <li><h4>sepak bola</h2> <li><h4>renang</h2> <li><h4>basket</h2> </ul> </body> </html> Dan seterusnya dimana isi dari menu 2 dan menu 3 adalah sebagai berikut :

Page 30: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

30

3. Sekarang buatlah halaman utama seperti gambar paling atas dimana halaman utama terbagi menjadi 3 frame (frame 1 untuk judul, frame 2 untuk menu dan frame 3 adalah isi dari masing-masing menu tersebut) Simpan dengan nama halamanutama.html Source codenya adalah sebagai berikut : <html> <head> <title>frame dengan menu</title> </head> <frameset rows="25%,75%"> <frame src="judul.html"> <frameset cols="25%,75%"> <frame src="menu.html"> untuk menentukan sumber <frame name="penjelasan"> dari frame sebelah kiri </frameset> </frameset> memberi nama pada frame </html> sebelah kanan

4. Berikutnya adalah membuat pilihan menu yang ada pada frame sebelah kiri (terdapat 3 pilihan yaitu olahraga, kesenian dan hiburan yang masing-masing terhubung / link ke isi dari menu yang telah dibuat sebelumnya). Jika klik pilihan olahraga maka terhubung ke menu1.html dan seterusnya. Simpan dengan nama menu.html Source codenya adalah sebagai berikut : <html> <head> <title>menu</title> </head> <body> <a href="menu1.html" target="penjelasan"><h2>OLAHRAGA</h2> <a href="menu2.html" target="penjelasan"><h2>KESENIAN</h2> <a href="menu3.html" target="penjelasan"><h2>HIBURAN</h2> </body> </html>

J. Manipulasi Tabel dengan HTML Tabel terdiri atas kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis. Setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan. Dasar-Dasar Pembuatan Tabel Tabel terdiri dari beberapa bagian yaitu : 1. Table Row atau baris tabel, yaitu baris-baris pada suatu tabel yang dinyatakan dengan

pasangan tag <TR>......</TR> 2. Table Data atau data tabel, yaitu tempat informasi dalam suatu tabel. Beberapa data

tabel yang terdapat dalam suatu baris membentuk baris tabel. Data tabel dinyatakan dengan pasangan tag <TD>......</TD>

3. Table Header adalah judul tabel. Umumnya, tabel ini terletak di bagian paling atas atau paling kiri dari tabel. Judul tabel yang terletak di bagian atas adalah judul kolom

Page 31: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

31

tabel, sedang judul tabel yang terletak di bagian kiri adalah judul baris tabel. Judul tabel dinyatakan dengan pasangan tag <TH>......</TH> dan biasanya ditampilkan dalam teks tebal.

4. Caption adalah judul tabel yang terletak di bagian luar suatu tabel, biasanya terletak di bagian atas atau bagian bawah tabel. Pasangan tag yang digunakan untuk membentuk suatu caption adalah <CAPTION>......</CAPTION> Selain elemen-elemen tersebut, tabel juga mempunyai bermacam-macam atribut yang berguna untuk melengkapi bentuk tabel tersebut. Berikut ini uraian atribut-atribut tersebut.

BORDER untuk membuat batas tepi dari suatu tabel. WIDTH dan HEIGHT untuk mengatur lebar dan tinggi tabel. ALIGN untuk mengatur bentuk perataan horisontal data di dalam tabel, seperti

di kiri, di tengah atau di bagian kanan. VALIGN untuk mengatur bentuk perataan vertikal data di dalam tabel, seperti

di atas, di tengah atau di bagian bawah. CELLSPACING dan CELLPADDING untuk mengatur spasi antar sel dan

spasi di dalam sel. Sel adalah tempat atau kotak keberadaan data atau judul kolom ataupun judul baris.

ROWSPAN dan COLSPAN, yaitu gabungan sel-sel dalam suatu kolom ataupun baris.

BGCOLOR untuk mengatur warna suatu sel dalam tabel. Contoh : a)

<table border="1" cellspacing="5" cellpadding="5"> <tr color="red"> <td>baris 1 kolom 1</td> <td>baris 1 kolom 2</td> </tr> <tr> <td>baris 2 kolom 1</td> <td>baris 2 kolom 2</td> </tr> </table>

Output : b) <table border="1" width="400" height="150">

<tr align="left" valign="top"> <td>baris 1 kolom 1</td> <td>baris 1 kolom 2</td> </tr> <tr align="right" valign="bottom"> <td>baris 2 kolom 1</td> <td>baris 2 kolom 2</td> </tr> </table>

Page 32: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

32

Output : c)

<table border="1"> <tr> <td>baris 1 kolom 1</td> <td rowspan="2">baris 1 gabung baris 2</td> </tr> <tr> <td>baris 2 kolom 1</td> </tr> </table>

Output : d) <html> <head> <title>tabel</title> <body bgcolor="#bff3f4"> <h3 align="center"><b>TABEL PENJUALAN ACCESORIES KOMPUTER</b></h3> <h3 align="center"><b>TH 2001-2006</b></h3><br> <table bgcolor="#c7f4bf" align="center" border="1" width="100"> <tr align="center"> <td bgcolor="#ecf4c2" rowspan="2"><b>JENIS</b></td> <td bgcolor="#ecf4c2" colspan="6"><b>TAHUN</b></td> </tr> <tr> <td bgcolor="#fbedd3" align="center"><b>2001</b></td> <td bgcolor="#fbedd3" align="center"><b>2002</b></td> <td bgcolor="#fbedd3" align="center"><b>2003</b></td> <td bgcolor="#fbedd3" align="center"><b>2004</b></td> <td bgcolor="#fbedd3" align="center"><b>2005</b></td> <td bgcolor="#fbedd3" align="center"><b>2006</b></td> </tr> <tr> <td bgcolor="#d7e7fc"><b>MOUSE</b></td> <td align="center">145</td> <td align="center">250</td> <td align="center">225</td> <td align="center">320</td> <td align="center">300</td> <td align="center">310</td> </tr>

Page 33: Homepage untuk informasi dan komunikasi

MODUL WEB DESAIN SMA NEGERI 3 LUMAJANG Oleh : Fanda Meilasa, S.Kom

33

<tr> <td bgcolor="#d7e7fc"><b>KEYBOARD</b></td> <td align="center">125</td> <td align="center">150</td> <td align="center">140</td> <td align="center">180</td> <td align="center">200</td> <td align="center">230</td> </tr> <tr> <td bgcolor="#d7e7fc"><b>MONITOR</b></td> <td align="center">75</td> <td align="center">120</td> <td align="center">145</td> <td align="center">115</td> <td align="center">165</td> <td align="center">200</td> </tr> <tr> <td bgcolor="#d7e7fc"><b>CD ROM</b></td> <td align="center">200</td> <td align="center">125</td> <td align="center">150</td> <td align="center">235</td> <td align="center">240</td> <td align="center">250</td> </tr> <tr> <td bgcolor="#d7e7fc"><b>PRINTER</b></td> <td align="center">210</td> <td align="center">230</td> <td align="center">185</td> <td align="center">225</td> <td align="center">250</td> <td align="center">300</td> </tr> </table> </body> </head> </html> Output :