HOMEPAGEUNTUKINFORMASIDANKOMUNIKASI

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


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.


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


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

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 : Tempat mendeskripsikan halaman HTML seperti judul, ............... pembuat, tanggal dibuat, hubungan antar dokumen dan lain-lain. ............... ............... Tempat pengetikan informasi-informasi yang dimuncul- kan pada halaman web. 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 (


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 ..... 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 , dan 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. Tag ini digunakan untuk membuat teks di tengah-tengah suatu paragraf. Tag yang digunakan adalah 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 ,

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

Nilai hanya berisi angka, huruf dan titik (dalam . 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 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.


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.


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 .... .... .... .... .... .... .... .... .... .... .... .... .... ....

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 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 dengan x adalah nomor level heading dari 1 sampai 6. Untuk pemakaian heading perhatikan contoh berikut ini. Heading dalam Dokumen Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6


8

Gambar 8 Heading 2. Perataan Heading Atribut yang menyertai tag 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 : Perataan Heading Heading Level 1 Rata Tengah Heading Level 2 Rata Kiri Heading Level 3 Rata Kanan


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 . 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. Heading dengan Pemisah Horizontal Heading dengan garis pembatas Heading Level 2 Heading Level 3


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 2 Registered trademark Trademark Non-breaking space

& Ampersand & & Angle quotation mark (left) Angle quotation mark (right) " Tanda kutip " " < Lebih kecil < < > Lebih besar > = _ Tanda kali Tanda bagi

Untuk pembuatan entitas, perhatikan contoh berikut. Heading dengan Pemisah Horizontal dan Entitas Heading dengan garis pembatas Heading Level 2 Heading Level 3 tuesmay2009


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 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. 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 . Jika gambar diklik, maka link akan menuju link tujuan yang diberikan pada tag , seperti : Contoh 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 :


12

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 : 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 : atau 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 : Contoh : Menyisipkan Gambar Mozilla Firefox vs Internet Explorer


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)


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 ..... Di antara kedua tag tersebut terdapat tag untuk menyatakan list item dalam daftar. Berikut ini contoh ordered list. Ordered List HTML menyediakan beberapa jenis daftar / list, 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) Output :

Gambar 13 Ordered List


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 , maka item otomatis berpindah ke baris baru. a. Atribut Type Untuk mengganti jenis pengurutan, anda dapat menggunakan atribut TYPE yang diletakkan pada tag . Berikut ini atribut untuk mengubah jenis nomor pada tag .

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 : 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 : Nested Ordered List HTML menyediakan beberapa jenis daftar / list, yaitu : Ordered List / numbered list (daftar berurut / daftar dengan nomor) Daftar berurut dengan nomor (default) Daftar berurut dengan bilangan romawi kecil Daftar berurut dengan bilangan romawi besar Daftar berurut dengan huruf besar Daftar berurut dengan huruf kecil Unordered List / bulleted list (daftar tak berurut / daftar dengan titik) Menu List (daftar menu) Directory List (daftar direktori) Definition List (glossary / daftar istilah)


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 .... sedangkan setiap item didalamnya menggunakan tag yang sama seperti pada ordered list, yaitu . 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


17

Contoh pemakaian order list dengan unordered list adalah sebagai berikut. Ordered List dan Unordered List HTML menyediakan beberapa jenis daftar / list, yaitu : Ordered List / numbered list (daftar berurut / daftar dengan nomor) Daftar berurut dengan nomor (default) Daftar berurut dengan bilangan romawi romawi kecil romawi besar Daftar berurut dengan huruf besar kecil Unordered List / bulleted list (daftar tak berurut / daftar dengan titik) Daftar berurut dengan simbol kotak Daftar berurut dengan simbol bulat Daftar berurut dengan simbol disk Menu List (daftar menu) Directory List (daftar direktori) Definition List (glossary / daftar istilah) Output :

Gambar 15 Unordered List


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


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 : 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 digunakan untuk proses pemasukan data dan letaknya berada dalam pasangan tag .... 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 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 :

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

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


20

Pilihan1 Pilihan2 Pilihan3

d. List Menyediakan pilihan dalam bentuk daftar pilihan. Hanya satu pilihan yang bisa dipilih. Contoh sintaksnya adalah sebagai berikut :

Pilihan1 Pilihan2 Pilihan3 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 :

f. Submit Digunakan untuk memanggil URL setelah input selesai dimasukkan. Tipe SUBMIT pada tag akan membentuk tombol, yaitu tombol yang menyebabkan URL yang disebutkan pada ACTION pada tag akan dimuat. Contoh sintaksnya adalah sebagai berikut :

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.

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 : .................

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.


21

LATIHAN PRAKTEK I

Source Code : form2 DATA SISWA No Absen : Nama Siswa :


22

Kelas : X XI XII Program : IPA IPS Mata pelajaran disukai: matematika web design fisika TIK


23

LATIHAN PRAKTEK II Source Code : uts Welcome Selamat datang di website pertama saya! Silahkan melihat-lihat: Photo-photo Catatan-kecil Lihat Buku Tamu About


24

Buku Tamu Silahkan isi buku tamu dibawah ini: Nama : Jenis Kelamin : laki-laki perempuan Hobi : musik komputer travelling Mata kuliah : dasar pemrograman pemrograman web kalkulus 1 sistem informasi manajemen Masukkan password :


25

Confirm password : Kritik dan saran : 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 .....

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 .

a. Pembuatan Frame

Untuk membuat frame, gunakan tag ..... Tag ini sekaligus menggantikan elemen .

Tag .... 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.


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 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 : 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.

b. Pembuatan Frame Kolom

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

frame1

Output :

Gambar 16 Frame Kolom


27

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

frame1

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 :

frame1a


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 : Sedangkan kode untuk menentukan target adalah : Contoh :

Langkah-langkah membuat menu seperti diatas adalah sebagai berikut :

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


29

judul

MACAM-MACAM KEGIATAN

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) : menu1 OLAHRAGA Macam-macam kegiatan Olahraga antara lain : bulutangkis sepak bola renang basket Dan seterusnya dimana isi dari menu 2 dan menu 3 adalah sebagai berikut :


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 : frame dengan menu untuk menentukan sumber dari frame sebelah kiri memberi nama pada frame 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 : menu OLAHRAGA KESENIAN HIBURAN

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 ...... 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 ......

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


31

tabel, sedang judul tabel yang terletak di bagian kiri adalah judul baris tabel. Judul tabel dinyatakan dengan pasangan tag ...... 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 ...... 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)

baris 1 kolom 1 baris 1 kolom 2 baris 2 kolom 1 baris 2 kolom 2

Output : b)

baris 1 kolom 1 baris 1 kolom 2 baris 2 kolom 1 baris 2 kolom 2


32

Output : c)

baris 1 kolom 1 baris 1 gabung baris 2 baris 2 kolom 1

Output : d) tabel TABEL PENJUALAN ACCESORIES KOMPUTER TH 2001-2006 JENIS TAHUN 2001 2002 2003 2004 2005 2006 MOUSE 145 250 225 320 300 310


33

KEYBOARD 125 150 140 180 200 230 MONITOR 75 120 145 115 165 200 CD ROM 200 125 150 235 240 250 PRINTER 210 230 185 225 250 300 Output :

Documents

HOMEPAGEUNTUKINFORMASIDANKOMUNIKASI