MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom1HOMEPAGE UNTUK INFORMASI DAN KOMUNIKASIorld Wide Web (WW...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom2Protokol TransferProtokol transfer adalah protokol yang ...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom3B. Cara Membuka Source HTML pada suatu HomepageHTML meru...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom4C. Elemen-Elemen dalam Dokumen HTMLSebuah dokumen HTML b...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom5besar (>)”. Umumnya, tag berpasangan, misalnya <....> de...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom6 Buka sebuah website dengan Internet Explorer baik onli...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom7E. Manipulasi Teks dengan HTMLAgar lebih hidup, teks dal...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom8Gambar 8 Heading2. Perataan HeadingAtribut yang menyerta...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom9Gambar 9 Perataan Heading3. Garis Pemisah HorizontalUntu...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom10Gambar 10 Garis Pemisah Horizontal4. Entitas Karakter H...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom11Gambar 11 Garis Pemisah Horizontal dan EntitasF. Manipu...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom12<IMG SRC = “Gambar_contoh.gif” ALIGN = “TOP”>5. Perataa...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom13Output :Gambar 12 Menyisipkan Gambar pada Halaman WebLA...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom14G. Manipulasi Daftar Item dengan HTMLHTML menyediakan b...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom15Pada hasil di atas, browser secara otomatis memberi nom...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom16Output :Gambar 14 Nested Ordered List2. Unordered ListU...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom17Contoh pemakaian order list dengan unordered list adala...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom18TUGAS PRAKTEK IBuatlah sebuah halaman HTML dengan bentu...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom19H. Manipulasi Form dengan HTMLForm merupakan elemen HTM...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom20<input type=”checkbox”>Pilihan1<input type=”checkbox”>P...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom21LATIHAN PRAKTEK ISource Code :<html><head><title>form2<...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom22<tr><td>Kelas :</td><td><select name="kelas"><option va...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom23LATIHAN PRAKTEK IISource Code :<html><head><title>uts</...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom24<h2>Buku Tamu</h2><p>Silahkan isi buku tamu dibawah ini...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom25<tr><td>Confirm password :</td><td><input type="passwor...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom26Selain dua buah atribut tersebut masih ada atribut-atri...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom27c. Pembuatan Frame BarisJika ingin membuat tiga buah ba...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom28Output :Gambar 18 Frame Baris dan Kolome. Hubungan anta...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom29<html><head><title>judul</title></head><body><h1 align=...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom303. Sekarang buatlah halaman utama seperti gambar paling...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom31tabel, sedang judul tabel yang terletak di bagian kiri ...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom32Output :c)<table border="1"><tr><td>baris 1 kolom 1</td...
MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom33<tr><td bgcolor="#d7e7fc"><b>KEYBOARD</b></td><td align...
Upcoming SlideShare
Loading in …5
×

Homepage untuk informasi dan komunikasi

570 views
439 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
570
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Homepage untuk informasi dan komunikasi

  1. 1. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom1HOMEPAGE UNTUK INFORMASI DAN KOMUNIKASIorld Wide Web (WWW) yang lebih umum disebut dengan web adalahmedia penyajian informasi dalam bentuk dokumen yang mempunyaireferensi dan link (hubungan ke dokumen lain atau mesin lain diinternet). Halaman depan web disebut Homepage.Penyajian informasi melalui web dapat dinikmati pemakai komputer melaluibrowser yang terhubung ke internet dengan menggunakan HTTP (HyperText TransferProtocol) yang informasinya dibuat dengan HTML (HyperText Markup Language).Secara umum halaman web dibangun dengan sebuah bahasa pemrograman bernamaHTML. Seperti bahasa pemrograman lainnya HTML memerlukan software atau programaplikasi tertentu yang dikenal dengan HTML Editor. HTML Editor ini yang nantinyaberfungsi untuk menerjemahkan bahasa HTML menjadi tampilan web yang dapat dilihatoleh pemakai internet.Browser WebBrowser Web adalah software yang digunakan untuk menampilkan informasi dari serverweb. Browser Web yang popular digunakan antara lain adalah Microsoft Internet Explorer,Netscape Navigator dan Mozilla. Browser Web bertugas menerjemahkan instruksi-instruksiberbentuk tag HTML untuk ditampilkan.Server WebServer 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 menggunakanHTTP. Browser akan mengirimkan request kepada server untuk meminta dokumen tertentuatau layanan lain yang disediakan server. Server memberikan dokumen atau layanannyajika tersedia dengan menggunakan protokol HTTP.HyperText Transfer Protocol (HTTP)HTTP adalah protokol yang menentukan aturan yang harus diikuti oleh Browser Webdalam meminta atau mengambil suatu dokumen dari server web dalam menyediakandokumen yang diminta. Protokol ini merupakan protokol standar yang digunakan untukmengakses dokumen HTML.HTTP umumnya digunakan untuk melayani dokumen hypertext karena HTTPmerupakan protokol dengan overhead yang sangat rendah. Pada kenyataannya navigasiinformasi dapat ditambahkan langsung ke dalam dokumen dan dengan demikianprotokolnya sendiri tidak harus mendukung navigasi secara penuh.Uniform Resources Locator (URL)URL adalah sarana yang digunakan untuk menentukan lokasi informasi pada suatu serverweb. Format umum suatu URL adalah sebagai berikut.Protokol transfer : //nama_host/path/nama_file Protokol transfer adalah protokol yang digunakan oleh suatu browser untuk mengambilinformasi. 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.htmlBiasanya alamat yang diketik pada Address bar adalah protokol transfer dan nama hostsaja. Setelah homepage (halaman pertama website) tampil, maka kita dapat melakukan linkke bagian tertentu dari website tersebut.W
  2. 2. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom2Protokol TransferProtokol 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 teksatau biner dalam server komputer di internet.Contoh : ftp.usma.edu/pub/msdos/. GopherProtokol 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 sistemyang dirancang sebagai forum diskusi yang didasarkan pada topik-topik yang disebutnewsgroup.Contoh : news:comp.infosystem.www.announce. TelnetProtokol ini digunakan untuk login ke suatu server tertentu.Domain Name Server (DNS)Untuk mempermudah pengelolaan server komputer di internet, maka digunakanlah suatuformat penamaan standar atau yang dikenal DNS (Domain Name Server). DNS merupakansistem penamaan untuk server komputer. DNS membuat tingkatan-tingkatan domain yangmerupakan kelompok komputer yang terhubung ke internet.Berikut ini nama domain dan jenis organisasinya (Top Level Domain)Nama Domain Jenis OrganisasicomedugovintmilnetorgidOrganisasi komersial, contoh : www.yahoo.comLembaga pendidikan, contoh : www.usc.eduLembaga pemerintahOrganisasi internasionalOrganisasi militerProvider internetOrganisasi umum, contoh : www.vlsm.orgDomain untuk negara Indonesia,contoh : http://smun47-jkt.sch.idPembuatan Homepage SederhanaA. Editor dalam Mendesain HomepageSecara umum ada dua jenis HTML Editor, yaitu text editor dan WYSIWYG editor. Texteditor digunakan oleh mereka yang terbiasa dengan bahasa pemrograman serta mahirbahasa HTML. Kode-kode HTML langsung ditulis sesuai aturan yang berlaku dalampenulisan HTML. Salah satu contoh text editor adalah Homesite. Jika anda menggunakansistem operasi Windows, notepad bisa digunakan untuk menuliskan HTML walaupunfungsinya bukan sebagai HTML editor.WYSIWYG (What You See Is What You Get) merupakan HTML editor yangberbasis GUI (Graphic User Interface) yang cocok bagi pemakai yang tidak terbiasa denganbahasa pemrograman atau sintaks HTML. Microsoft Frontpage yang terdapat dalam paketMicrosoft Office, bisa anda gunakan sebagai HTML editor. WYSIWYG yang terkenaldiantaranya adalah Macromedia Dreamweaver yang menyediakan fasilitas untuk membuatskrip-skrip tertentu. File HTML mempunyai ekstensi .HTML atau .HTM.
  3. 3. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom3B. Cara Membuka Source HTML pada suatu HomepageHTML merupakan client side scripting. Dengan demikian, anda sebagai pemakai (user)dapat melihat seluruh kode-kode pemrograman yang dibuat di browser dan dapatmemodifikasinya sesuai keinginan anda. Untuk melihat kode HTML yang terdapat padasebuah homepage, terlebih dahulu anda buka file HTML yang dimaksud dengan BrowserWeb, misalkan Internet Explorer.Gambar 1 Web dengan HTMLKemudian lakukanlah langkah-langkah berikut ini Klik menu View pada Internet Explorer Klik SourceGambar 2 Membuka Source HTMLMaka akan tampak Source Code dalam program aplikasi notepad seperti gambar berikut.Gambar 3 Source HTML
  4. 4. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom4C. Elemen-Elemen dalam Dokumen HTMLSebuah dokumen HTML bisa mengandung teks, gambar, suara, animasi atau video. Untukmembedakan antara teks HTML dengan dokumen lainnya, anda dapat melihat elemenbeserta tag-tagnya.Dokumen HTML disusun oleh tiga bagian, yaitu :1. Baris yang berisi informasi versi HTML yang digunakan2. Deklarasi bagian header dengan elemen head3. Deklarasi bagian body dengan elemen body atau frame-setPerhatikan gambar berikut ini.Gambar 4 Elemen-elemen HTMLLebih lengkapnya elemen dasar untuk pembuatan HTML adalah sebagai berikut :Elemen DasarJenis DokumenJudulMukadimah (Header)Batang Tubuh<HTML> </HTML><TITLE> </TITLE><HEAD> </HEAD><BODY> </BODY>Terdapat pada awal dan akhir dari file HTMLTerdapat pada mukadimahKeterangan umum seperti judulIsi dari halaman HTMLFormat 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 HTMLterdiri 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>
  5. 5. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom5besar (>)”. Umumnya, tag berpasangan, misalnya <....> dengan </....>. Tag yang pertamamenunjukkan 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 tagnyadituliskan dengan <nama tag>....</nama tag>. Penulisan penamaan tag tidak case sensitiveartinya tidak berpengaruh terhadap huruf besar atau huruf kecil.Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengantag <html>, <head> dan <body> berikut tag-tag pasangannya yang selalu diawali dengantanda (/). Elemen head berisi informasi tentang dokumen tersebut seperti title, meta danscript tertentu. Elemen body berisi teks yang sebenarnya, yaitu tampilan halaman web yangtersusun dari link, grafik, paragraf dan elemen lainnya.Tag awal dapat disisipkan beberapa buah atribut yang menyatakan karakteristik tagtersebut, misalnya tag awal berikut ini.<P ALIGN = “center”>Tag ini digunakan untuk membuat teks di tengah-tengah suatu paragraf. Tag yangdigunakan 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 leftmerupakan 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 gandakarena nila SRC mengandung tanda “/” dan nilai ALT mengandung spasi).Heading DokumenHeading dokumen berisi informasi mengenai bagian kepala suatu dokumen HTML.Elemen HeadKepala dokumen dinyatakan dengan pasangan tag <HEAD> </HEAD> yang merupakanpembuka dari dokumen HTML. Head berisi informasi-informasi yang menjelaskandokumen HTML, seperti judul (title) dokumen, baris URL suatu dokumen, hubungan antardokumen dalam html, indeks suatu dokumen, informasi dan script tertentu. Teks bagianhead tidak akan terlihat saat dokumen tersebut dibuka pada suatu browser.D. Cara Mengedit Teks HTML dengan Microsoft WordBanyak cara untuk mengedit file HTML, termasuk bukan dengan program aplikasi HTMLeditor, sebagai contohnya adalah mengedit dengan Microsoft Word. Program pengolah kataini dapat digunakan untuk membuat dan mengedit file HTML. Oleh karena Microsoft Wordmerupakan program aplikasi berbasis GUI, maka anda dapat mengedit layaknya padasebuah WYSIWYG editor. Hal ini sangat memudahkan pemakai yang tidak terbiasa denganbahasa pemrograman. Untuk dapat mengedit file HTML dengan Microsoft Word, andadapat melakukannya dengan mengklik ikon Edit with Microsoft Word pada InternetExplorer. Untuk lebih jelasnya perhatikan langkah-langkah berikut ini.
  6. 6. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom6 Buka sebuah website dengan Internet Explorer baik online atau offlineGambar 5 Web dengan HTML Klik ikon Edit with Microsoft WordGambar 6 Ikon untuk mengedit HTMLHingga 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 teksdalam Microsoft Word.
  7. 7. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom7E. Manipulasi Teks dengan HTMLAgar lebih hidup, teks dalam web perlu dispesialisasi. Caranya adalah denganmemanipulasi atau yang lebih dikenal dengan istilah format teks, seperti menebalkan teks,memiringkan teks atau memperbesar ukuran teks. Bahasa HTML sangat berbeda denganbahasa format teks yang sering kita lakukan pada program aplikasi pengolah kata.Pada bahasa HTML, format teks dilakukan dengan menggunakan tag-tag tertentusesuai 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 tebalTeks dengan huruf miringTeks dengan garis bawahTekanan pada teks (emphasize)Coretan pada teksMemperbesar ukuran hurufMemperkecil ukuran hurufMenempatkan posisi teks / gambar di tengahMenggeser huruf ke bawah (subscript)Menggeser huruf ke atas (superscript)Huruf berkedipMemilih jenis hurufMenentukan ukuran hurufPindah ke baris berikutnya / di bawahnyaGaris datarParagraf baru1. Menambah HeadingHeading adalah sekumpulan kata atau frasa yang menjadi judul atau subjudul suatudokumen 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>
  8. 8. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom8Gambar 8 Heading2. Perataan HeadingAtribut yang menyertai tag <H> adalah ALIGN yang memungkinkan sebuah headingditampilkan rata kanan, kiri atau tengah. Berikut adalah tabel Align Tag Heading.Nilai FungsiALIGN = leftALIGN = centerALIGN = rightUntuk meratakan heading ke kiriUntuk meratakan heading di tengahUntuk meratakan heading ke kananPerhatikan 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>
  9. 9. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom9Gambar 9 Perataan Heading3. Garis Pemisah HorizontalUntuk memberi pemisah antara baris yang satu dengan baris yang lain, anda dapatmenggunakan elemen tag <HR>. Atribut yang menyertainya adalah sebagai berikut.Nama FungsiALIGNWIDTHSIZENOSHADECOLORDapat diset dengan nilai left, center atau right.Untuk mengatur panjang garis horizontal yang dapat ditentukan dengannilai pixel atau persen.Untuk mengatur ketebalan garis horizontal yang mempunyai nilai dalamsatuan 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>
  10. 10. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom10Gambar 10 Garis Pemisah Horizontal4. Entitas Karakter HTMLEntitas karakter mempunyai 3 bagian, yaitu sebuah ampersand (&), sebuah nama entitasatau 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; ©2® Registered trademark &reg; ®™ Trademark ™Non-breaking space &nbsp; ¡& Ampersand &amp; &« Angle quotation mark (left) &laquo; «» Angle quotation mark (right) &raquo; »" Tanda kutip &quot; "< Lebih kecil &lt; <> Lebih besar &gt; =_ Tanda kali &times; ×÷ Tanda bagi &divide; ÷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>
  11. 11. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom11Gambar 11 Garis Pemisah Horizontal dan EntitasF. Manipulasi Gambar dengan HTMLAda dua metode untuk menampilkan gambar-gambar (image) ke dalam halaman web, yaitumetode inline dan eksternal. Gambar inline menampilkan gambar secara langsung saatpengguna komputer membuka web yang berbasiskan grafis. Gambar eksternal tidalmemunculkan gambar secara otomatis saat web dibuka. Gambar akan muncul ketikapemakai menginginkannya, yakni dengan mengklik link yang mewakili gambar tersebut.Link tersebut dapat berupa teks atau gambar lain yang ditampilkan secara eksternal danbiasanya berukuran lebih kecil.1. Penggunaan Elemen IMGElemen IMG yang dinyatakan dengan tag <IMG> adalah suatu tag tunggal yang tidakmempunyai tag pasangan. Elemen IMG mempunyai tiga buah atribut, yaitu SRC, ALT danALIGN. Atribut SRC berfungsi untuk menentukan sumber dari gambar inline. AtributALIGN digunakan untuk mengatur perataan teks pada suatu gambar inline. Atribut ALTdigunakan sebagai alternatif untuk browser yang berbasis teks.2. Teks Alternative untuk GambarJika browser yang digunakan pemakai adalah browser dengan mode teks, seperti Lynxyang tidak dapat menampilkan gambar, maka HTML menyediakan suatu alternatif gambardengan teks. Sarana yang digunakan adalah atribut ALT pada elemen IMG, sintaksnyaadalah sebagai berikut.<IMG SRC = ”URL_Gambar” ALT = ”Teks Pengganti”>“teks pengganti” adalah teks yang akan menggantikan gambar sewaktu ditampilkan dibrowser. Atribut ALT juga berguna sebagai pengganti gambar jika fasilitas pemanggilangambar secara otomatis (Auto Load Images pada Netscape) dimatikan.3. Gambar Sebagai Suatu LinkGambar dapat berfungsi sebagai link jika ditambahkan tag <A>. Jika gambar diklik, makalink akan menuju link tujuan yang diberikan pada tag <A>, seperti :<A HREF = ”Contoh.htm”> <IMG SRC = “Gambar_contoh.gif”> Contoh </A>4. Pengaturan PerataanAtribut ALIGN digunakan untuk mengatur perataan gambar terhadap teks-teks yang ada disekitarnya. Nilai untuk atribut ALIGN antara lain : LEFT, RIGHT, MIDDLE, TOP,BOTTOM dan TOPTEXT. Contoh :
  12. 12. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom12<IMG SRC = “Gambar_contoh.gif” ALIGN = “TOP”>5. Perataan Ukuran GambarAtribut HEIGHT dan WIDTH digunakan untuk menentukan tinggi dan lebar suatu imagedalam ukuran pixel. Jika atribut ini tidak digunakan, maka browser akan memakai ukuransebenarnya dari gambar tersebut. Contoh :<IMG SRC = “Gambar_contoh.gif” WIDTH = 170 HEIGHT = 120>6. Atribut HSPACE dab VSPACEAtribut HSPACE dan VSPACE digunakan untuk menentukan jarak spasi antara gambardengan objek di sekitarnya. Atribut HSPACE menentukan spasi horizontal (bagian kanandan kiri) suatu gambar, sedangkan atribut VSPACE menentukan spasi vertikal (sebelah atasdan bawah) suatu gambar. Spasi ini dinyatakan dalam satuan pixel dan akan menyebabkantimbulnya ruangan kosong di antara gambar dan objek-objek yang mengelilinginya. Jikaatribut ini tidak digunakan, maka browser akan meletakkan teks persis di samping gambartanpa ada jarak antara teks dan gambar. Contoh :<IMG SRC = “Gambar_contoh.gif” VSPACE = 20> atau<IMG SRC = “Gambar_contoh.gif” HSPACE = 20>7. Atribut BorderAtribut border berfungsi untuk memberikan garis pada suatu Gambar Inline. Gambar Inlinepada umumnya tidak mempunyai garis, kecuali Gambar Inline yang berfungsi sebagai suatulink. Nilai BORDER menggunakan satuan pixel. Gambar yang tidak mempunyai bordermemiliki atribut BORDER = 0. Jika nilai 0 digunakan pada gambar yang berfungsi sebagaisuatu link, maka border pada gambar tersebut akan hilang. Hal ini menyebabkan ciri suatugambar yang berfungsi sebagai link menjadi hilang dan menyebabkan pemakai tidakmengetahui 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 InternetExplorer</h2><hr size = "5" color = "blue"></body></html>
  13. 13. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom13Output :Gambar 12 Menyisipkan Gambar pada Halaman WebLATIHAN PRAKTEKBuatlah halaman web untuk menampilkan gambar yang dapat di link ke halaman lainKlik salah satu gambar untuk menuju ke halaman berikutnyaBuatlah teks yang dapat di link ke halaman depan (utama)
  14. 14. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom14G. Manipulasi Daftar Item dengan HTMLHTML 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 ListOrdered list atau numbered list adalah suatu daftar dengan item-item yang ada dalam daftarberupa nomor secara berurut. Ordered menggunakan tag <OL>....</OL>. Di antara keduatag 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 dengannomor)<LI>Unordered List / bulleted list (daftar tak berurut / daftardengan 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
  15. 15. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom15Pada hasil di atas, browser secara otomatis memberi nomor secara berurut pada setiap itemyang terdapat pada daftar tersebut. Setiap kali browser menemui tag <LI>, maka itemotomatis berpindah ke baris baru.a. Atribut TypeUntuk mengganti jenis pengurutan, anda dapat menggunakan atribut TYPE yang diletakkanpada tag <OL>.Berikut ini atribut untuk mengubah jenis nomor pada tag <OL>.Atribut FungsiTYPE = 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 adalahnilai awal daftarSelain TYPE, ada juga atribut START yang digunakan untuk mendefinisikan nomor awalyang 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 dengannomor)<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 / daftardengan titik)<LI>Menu List (daftar menu)<LI>Directory List (daftar direktori)<LI>Definition List (glossary / daftar istilah)</OL></body></html>
  16. 16. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom16Output :Gambar 14 Nested Ordered List2. Unordered ListUnordered list adalah suatu daftar yang mengabaikan urutan item. Setiap item dalamunordered list biasanya ditandai dengan bentuk objek tertentu, misalkan kotak atau bulat.Tag yang digunakan adalah tag <UL>....</UL> sedangkan setiap item didalamnyamenggunakan tag yang sama seperti pada ordered list, yaitu <LI>.a. Atribut TYPEPada unordered list terdapat atribut TYPE yang berguna untuk mengubah bentuk tanda itemdari suatu list. Berikut ini uraian atribut TYPE beserta fungsinya.Atribut FungsiTYPE = circle Membuat tanda lingkaran untuk itemTYPE = square Membuat tanda kotak untuk itemTYPE = disc Membuat tanda cakram untuk item
  17. 17. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom17Contoh 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 dengannomor)<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 / daftardengan 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
  18. 18. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom18TUGAS PRAKTEK IBuatlah sebuah halaman HTML dengan bentuk tulisan sebagai berikut :1. Microsoft Excel adalah salah satu program aplikasi yang berorientasi padapengolahan...A. kataB. angkaC. dataD. grafisE. web2. Sistem Operasi yang dibutuhkan untuk dapat mengoperasikan program Microsoft Exceladalah...A. linuxB. windowsC. Disk Operating System (DOS)D. unixE. novell netware3. Kolom terakhir pada lembar kerja Microsoft Excel adalah...A. zB. azC. ipD. ivE. zzTUGAS PRAKTEK IIBuatlah sebuah halaman HTML dengan bentuk tulisan sebagai berikut :Tipe Data dan Operator :I Tipe Data1 Tipe Data Sederhanai Tipe Data Standar Integer Real Char String Booleanii Tipe Data Definisio Enumeratedo Subrange2 Tipe Data Terstruktur3 Tipe Data PenunjukII Operator
  19. 19. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom19H. Manipulasi Form dengan HTMLForm merupakan elemen HTML yang digunakan untuk memperoleh input (masukan) daripengguna web (surfer). Pengguna web dapat memasukkan input melalui halaman HTML.Suatu form dapat terdiri atas beberapa form, tetapi hanya satu form yang dapatdikirimkan 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 digunakansebagai pemroses field input form. Jika ACTION tidak disebutkan, informasi akandikirimkan ke URL yang sama dengan halaman web itu sendiri. Atribut METHOD digunakan untuk menyatakan proses informasi yang dikirim ke URLyang disebutkan dalam ACTION. Nilai yang umum dipakai untuk atribut ini adalahGET dan POST. POST yang membuat informasi dikirimkan secara terpisah denganURL, sedangkan GET yang akan membuat informasi dikirimkan menjadi satu denganURL.1. Jenis Masukan dalam FormTag <INPUT> digunakan untuk proses pemasukan data dan letaknya berada dalampasangan tag <FORM>...</FORM>. Ada beberapa macam tipe pemasukan data, antara lainberupa kotak teks, password, tombol radio (radio button), kotak cek (check box) sertatombol SUBMIT dan RESET.Tag <INPUT> memiliki sejumlah atribut, yaitu :a. Name : untuk menentukan nama data. Atribut ini diperlukan oleh semua jenismasukan kecuali SUBMIT dan RESET.b. Size : untuk menentukan ukuran kotak yang akan tampil yang berlaku untukinput teks dan password.c. Maxlength : untuk menentukan jumlah karakter yang dapat dimasukkan dalamkotak password dan kotak teks.d. Value : untuk menentukan nilai default kotak masukan.e. Checked : untuk mengatur agar kotak cek dalam keadaan terpilih pada kondisiawal.f. Type : untuk menentukan tipe kotak masukan.Tipe masukan dalam form dibedakan menjadi 9, yakni :a. TextDigunakan untuk memasukkan suatu nilai yang akan dikirimkan kepada server. Nilaidapat berupa angka atau teks.Contoh sintaksnya adalah sebagai berikut :<input type=”text” name=”var1” size=”8” maxlength=”8”>b. RadioSebagai input yang menyediakan beberapa pilihan (option) dan hanya satu pilihan yangbisa dipilih.Contoh sintaksnya adalah sebagai berikut :<input type=”radio”>Pilihan1<input type=”radio”>Pilihan2<input type=”radio”>Pilihan3c. Check boxMenyediakan beberapa pilihan, bisa lebih dari satu pilihan yang dipilih.Contoh sintaksnya adalah sebagai berikut :
  20. 20. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom20<input type=”checkbox”>Pilihan1<input type=”checkbox”>Pilihan2<input type=”checkbox”>Pilihan3d. ListMenyediakan 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. PasswordMenyediakan tipe password yang akan membuat setiap karakter yang diketikkan olehpemakai 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. SubmitDigunakan untuk memanggil URL setelah input selesai dimasukkan.Tipe SUBMIT pada tag <INPUT> akan membentuk tombol, yaitu tombol yangmenyebabkan URL yang disebutkan pada ACTION pada tag <FORM> akan dimuat.Contoh sintaksnya adalah sebagai berikut :<input type=”submit”>g. ButtonDigunakan untuk membuat form lebih interaktif untuk memanggil script yang ada didalam dokumen HTML.h. ImageDigunakan sebagai pengganti button (tombol), berupa tombol yang berbentuk gambar.<input type=”image” src=”url_image”>i. Text areaDigunakan untuk memasukkan data dalam bentuk teks berupa memo.Atributnya adalah sebagai berkut : NameDigunakan untuk menentukan nama area teks RowsDigunakan untuk menentukan jumlah baris yang tampil pada layar ColsDigunakan untuk menentukan jumlah kolom yang tampil pada layar WrapDigunakan untuk menentukan teks yang secara otomatis akan dilipat (jika baris tidakcukup 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 denganvalue berupa string yang mendefinisikan nama elemen. Dalam pemrograman, name inisering disebut sebagai nama variabel. Nama variabel sebaiknya mencerminkan fungsi darivariabel tersebut.
  21. 21. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom21LATIHAN PRAKTEK ISource 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=5maxlength=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=30maxlength=30></td></tr><tr><td>&nbsp;</td></tr>
  22. 22. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom22<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>
  23. 23. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom23LATIHAN PRAKTEK IISource 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>
  24. 24. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom24<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=20maxlength=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 informasimanajemen</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>
  25. 25. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom25<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 HTMLSalah satu kemampuan HTML adalah memanipulasi frame, yakni dengan membagi jendelabrowser 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 beberapabagian.Tag yang biasanya digunakan adalah tag <FRAMESET>....</FRAMESET>.2. Content Document (Dokumen Isi)Dokumen ini digunakan untuk mengisi sebuah bingkai. Sebenarnya dokumen ini samadengan dokumen biasa, satu-satunya variasi yang ada adalah letaknya pada link.Dokumen ini dapat dibuat beberapa link dalam satu bingkai dan dapat ditampilkan padabingkai yang lain. Keberadaan dokumen ini pada dokumen HTML didefinisikan dengantag <FRAME SRC=”url”>.a. Pembuatan FrameUntuk membuat frame, gunakan tag <FRAMESET>....</FRAMESET>. Tag<FRAMESET> ini sekaligus menggantikan elemen <BODY>.Tag <FRAMESET>....</FRAMESET> mempunyai atribut ROWS dan COLS. AtributROWS berfungsi untuk membagi jendela browser menjadi beberapa baris sedangkanatribut COLS berfungsi untuk membagi jendela browser menjadi beberapa kolom. Atribut-atribut ini memiliki nilai yang menyatakan jumlah baris dan jumlah kolom yang dibuatdalam suatu jendela browser.
  26. 26. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom26Selain dua buah atribut tersebut masih ada atribut-atribut lainnya, sepertiFRAMESPACING yang berfungsi untuk mendefinisikan spasi di sekitar frame dan atributFRAMEBORDER yang berfungsi untuk membuat border dengan suatu nilai tertentu (nilai0 berarti tidak menampilkan border). Untuk memberikan warna pada border, gunakanBORDERCOLOR pada tag FRAMESET.Untuk menampilkan dokumen di dalam sebuah frame, gunakan tag <FRAMESRC=”url”> yang disisipkan antara tag FRAMESET. Tag ini merupakan tag tunggaldengan berbagai atribut yang menyertainya. Atribut-atribut tersebut antara lain adalahMARGIN 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 yangditentukan pada tag FRAMESET. Artinya, bila kita membuat 3 buah frame maka harusmemasukkan 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 KolomJika ingin membuat tiga buah kolom dalam satu frame, maka buatlah listing sepertiberikut :<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
  27. 27. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom27c. Pembuatan Frame BarisJika ingin membuat tiga buah baris dalam satu frame, maka buatlah listing sepertiberikut :<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 Barisd. Variasi Frame (Baris dan Kolom)Frame kolom dan baris juga dapat dipadukan dalam sebuah halaman web. Untukmembuat 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>
  28. 28. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom28Output :Gambar 18 Frame Baris dan Kolome. Hubungan antar frameBagian 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.htmlBaris programnya :
  29. 29. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom29<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 sebelahkanan, diantaranya isi dari menu olahraga, kesenian dan hiburan. Beri nama masing-masing dengan menu1.html, menu2.html dan menu3.htmlBaris 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 kegiatanOlahraga 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 :
  30. 30. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom303. Sekarang buatlah halaman utama seperti gambar paling atas dimana halaman utamaterbagi menjadi 3 frame (frame 1 untuk judul, frame 2 untuk menu dan frame 3adalah isi dari masing-masing menu tersebut)Simpan dengan nama halamanutama.htmlSource 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 kanan4. Berikutnya adalah membuat pilihan menu yang ada pada frame sebelah kiri(terdapat 3 pilihan yaitu olahraga, kesenian dan hiburan yang masing-masingterhubung / link ke isi dari menu yang telah dibuat sebelumnya).Jika klik pilihan olahraga maka terhubung ke menu1.html dan seterusnya.Simpan dengan nama menu.htmlSource 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 HTMLTabel terdiri atas kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis.Setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satukesatuan.Dasar-Dasar Pembuatan TabelTabel terdiri dari beberapa bagian yaitu :1. Table Row atau baris tabel, yaitu baris-baris pada suatu tabel yang dinyatakan denganpasangan tag <TR>......</TR>2. Table Data atau data tabel, yaitu tempat informasi dalam suatu tabel. Beberapa datatabel yang terdapat dalam suatu baris membentuk baris tabel. Data tabel dinyatakandengan pasangan tag <TD>......</TD>3. Table Header adalah judul tabel. Umumnya, tabel ini terletak di bagian paling atasatau paling kiri dari tabel. Judul tabel yang terletak di bagian atas adalah judul kolom
  31. 31. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom31tabel, sedang judul tabel yang terletak di bagian kiri adalah judul baris tabel. Judul tabeldinyatakan dengan pasangan tag <TH>......</TH> dan biasanya ditampilkan dalam tekstebal.4. Caption adalah judul tabel yang terletak di bagian luar suatu tabel, biasanya terletak dibagian atas atau bagian bawah tabel. Pasangan tag yang digunakan untuk membentuksuatu caption adalah <CAPTION>......</CAPTION>Selain elemen-elemen tersebut, tabel juga mempunyai bermacam-macam atribut yangberguna untuk melengkapi bentuk tabel tersebut. Berikut ini uraian atribut-atributtersebut. 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, sepertidi kiri, di tengah atau di bagian kanan. VALIGN untuk mengatur bentuk perataan vertikal data di dalam tabel, sepertidi atas, di tengah atau di bagian bawah. CELLSPACING dan CELLPADDING untuk mengatur spasi antar sel danspasi di dalam sel. Sel adalah tempat atau kotak keberadaan data atau judulkolom ataupun judul baris. ROWSPAN dan COLSPAN, yaitu gabungan sel-sel dalam suatu kolomataupun 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>
  32. 32. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom32Output :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>
  33. 33. MODUL WEB DESAIN SMA NEGERI 3 LUMAJANGOleh : Fanda Meilasa, S.Kom33<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 :

×