Diktat pemrograman Web 1

DIKTAT

PEMROGRAMAN WEB I

DISUSUN UNTUK MENUNJANG

PERKULIAHAN PEMROGRAMAN WEB I

Oleh :

Asih Winantu, S.Kom

STMIK EL RAHMA YOGYAKARTA

2009

PENGANTAR

Alhamdulillah kami ucapkan kehadirat Allah SWT karena dengan izin-Nya lah diktat ini bisa terselesaikan.

Perkembangan teknologi komputer dan internet dewasa ini semakin cepat. Web sebagai media informasi juga mengalami perkembangan yang signifikan, seiring dengan semakin banyaknya sistem informasi berbasis web. Hal ini dikarenakan sifat internet yang cepat, akurat dan real time.

Diktat ini disusun sebagai bahan acuan mahasiswa dalam mempelajari pemrograman web dasar. Dengan adanya diktat ini diharapkan para mahasiswa dapat terbantu dalam mengikuti mata kuliah pemrograman web .

Tentu saja diktat ini masih jauh dari sempurna, untuk itu kami mengharap masukan dari pembaca sekalian, untuk perbaikan dari diktat ini. Ucapan terimakasih tak lupa kami ucapkan kepada berbagai pihak, terutama Dosen-dosen dan karyawan STMIK El Rahma, yang telah banyak membantu terwujudnya diktat ini.

DAFTAR ISI

Pengantar --- 1

Daftar isi --- 2

Silabi Pemrograman Web--- 3

Bab I : PENDAHULUAN--- 4

Bab II : Pengenalan HTML --- 7 Bab III : Teks dalam paragraf --- Bab IV : Pemformatan Teks HTML--- Bab V : Link HTML--- Bab VI : Penyisipan Gambar --- Bab VII : Image Map --- Bab VIII : List --- Bab IX : Tabel --- Bab X : Frame --- Bab XI :Form dan input --- Bab XII : Javascript--- Bab XIII : CSS --- Bab XIV : Mengupload Web --- Bab XV : Project : membuat web pribadi---

SILABI

PEMROGRAMAN WEB I

A. Deskripsi

Mata kuliah Pemrograman Web adalah bersifat teori-praktek. Mata kuliah ini membahas tentang kode-kode program untuk mendesain dan membuat website. Selain hal tersebut dibahas pula komponen-komponen atau script-script pendukung untuk membuat web.

B. Tujuan

Setelah menempuh matakuliah ini, mahasiswa diharapkan mampu merancang dan membuat web sederhana menggunakan kode-kode HTML dan juga script-script pendukung yang sudah dipelajari.

C. Penilaian

Ujian Akhir Semester : 40 % Ujian Tengah Semester : 30 %

Tugas : 20 %

Presensi : 10 %

D. Metode Kuliah

Metode yang digunakan selama perkuliahan berlangsung yaitu dengan pola tutorial atau penjelasan di kelas disertai tanya jawab. Beberapa sesi selama perkuliahan akan

diberikan tugas-tugas guna mengimplementasikan materi yang telah diperoleh. Kegiatan diskusi juga diselenggarakan selama perkuliahan berlangsung

E. Literatur

1 Betha Sidik,Pemrograman Web Dengan HTML, Informatika, Bandung, 2001. 2 Tim Evans,HTML 4: 10 Minute Guide,QUE,USA,1998.

3 Wahana Komputer, Pembuatan Program Sistem Informasi Akademik Berbasis ASP, Salemba Infotek,Jakarta,2003.

4 Wahana Komputer, Pemrograman HTML 4.1,Andi, Yogyakarta, 2003.

F. Materi Kuliah

PERTEMUAN TOPIK BAHASAN BACAAN/BAB

Pertemuan 1 Pengenalan web Diktat kuliah/

Pertemuan 2,3 Pengenalan HTML Diktat kuliah/

Pertemuan 5 Pemformatan teks HTML Diktat kuliah/ Pertemuan 6,7 Tabel

UJIAN TENGAH SEMESTER

Pertemuan 8 Hyperlink Diktat kuliah/

Pertemuan 9 Pengelolaan gambar Diktat kuliah/

Pertemuan 10 Form Diktat kuliah/

Pertemuan 11 Javascript Diktat kuliah/

Pertemuan CSS Diktat kuliah/

Pertemuan 14 Mengupload web Diktat kuliah/

BAB I PENDAHULUAN

A. Internet

Interconnected Network - atau yang lebih populer dengan sebutan Internet - adalah sebuah sistem komunikasi global yang menghubungkan komputer-komputer dan jaringan-jaringan komputer di seluruh dunia.

Dalam berkomunikasi antar komputer global tersebut diperlukan suatu protokol yang disebut TCP/IP (transmission Control Protocol/Internet Protocol)

Protokol adalah suatu petunjuk yang menunjukkan pekerjaan yang akan user lakukan dengan internet (bahasa komunikasi), apakah akan mengakses website, melakukan transfer file, mengirim email, dan sebagainya. Protocol bisa dibayangkan seperti suatu bahasa yang digunakan untuk berkomunikasi antara berbagai jenis komputer maupun system operasi yang terhubung di internet.

B. Web

Web (World Wide Web) merupakan salah satu layanan yang didapat oleh pemakai komputer yang terhubung ke internet, yang dapat memudahkan pengguna komputer untuk berinteraksi dengan pengguna internet lainnya dan mencari informasi yang diperlukan. Informasi-informasi dalam web mempunyai link yang menghubungkan informasi tersebut ke informasi lain dalam jaringan internet. Link mempunyai tanda khusus, bisa berupa teks bergaris bawah dan berwarna, ikon maupun gambar yang dikelilingi suatu kotak.

Untuk mengetahui apakah suatu teks atau gambar tersebut merupakan tanda link adalah dengan melihat perubahan bentuk pointer mouse. Jika penunjuk mouse berubah bentuk menjadi gambar tangan yang sedang menunjuk,berarti teks atau gambar merupakan suatu link yang menghubungkan anda ke informasi lain dalam World Wide Web.

System yang menghubungkan informasi-informasi melalui link disebut dengan nama hypertext. Istilah hypertext kemudian berubah menjadi hypermedia, dimana link-link penghubung antar informasi bukan lagi hanya berupa teks, tetapi juga bisa berupa file multimedia seperti gambar, suara dan video.

WWW sendiri bukan sekedar jaringan seperti internet namun didalamnya terdapat set aplikasi komunikasi dan system perangkat lunak yang memiliki karakteristik sebagai berikut :

Terletak pada internet host dan client. Protocol yang digunakan adalah TCP/Ip. Mengenal tag-tag HTML.

Mampu merelasikan komunikasi data dua arah.

Pengguna dapat mengakses informasi text, gambar, suara. Model alamat URL (Uniform Resource Locator).

Pengguna dapat juga mengakses server dengan protocol HTTP, FTP, Telnet dan sebagainya.

Web saat ini digunakan sebagai standar interface pada layanan-layanan yang ada diinternet. Kegunaan web antara lain sebagai :

Penyedia informasi Media komunikasi email Transaksi bisnis

Didamping itu belakangan ini semakin bnyak perusahaan-perusahaan dan instansi yang menggunakan web sebagai suatu sistem informasi, karena :

Akses informasi yang mudah (real time) Setup server lebih mudah

Informasi mudah didistribusikan Multiplatform

C. Sejarah lahirnya Web

Pada tahun 1993, tim yang dikepalai oleh Berners-Lee di European Particle Physics Lab (CERN) di Geneva Swiss,mengembangkan suatu cara untuk menshare data antar koleganya dengan sesuatu yang disebut Hypertext. Pemakai di CERN dapat menampilkan dokumen pada layar komputer dengan menggunakan software baru. Dengan kode2 khusus yang disisipkan dalam dokumen tersebut maka pemakai dimungkinkan untuk meloncat dari dokumen satu ke dokumen lainnya pada monitor dengan memilih sebuah hyperlink. Cara inilah yang digunakan sebagai dasar dari yang disebut sekarang dengan World Wide Web,yang sekarang diteliti dan dikembangkan oleh W3C, World Wide Web Consortium.

D. Cara Kerja Web

Informasi web disimpan dalam dokumen yang disebut dengan halaman-halaman web (web pages)

Web page adalah file-file yang disimpan dalam sebuah komputer yang disebut web server.

Komputer-komputer membaca webpage,disebut sebagai web client.

Web client menampilkan page (halaman web) dengan menggunakan program yang disebut sebagai browser.

E. HomePage

Setiap institusi perseorangan atau perusahaan yang memiliki informasi di web memerlukan suatu alamat (URL) khusus yang disebut website. Setiap informasi yang disimpan dalam suatu file yang berbeda disebut web page. Dalam page tersimpan berbagai

informasi dan link yang menghubungkan suatu informasi ke informasi lain baik dalam web page yang sama atau web page lain pada website yang berbeda.

Sebelum mengakses berbagai informasi pada suatu website,yang pertama dijumpai adalah halaman web pembuka yang disebut home page. Home page ini merupakan halaman pertama dari suatu website yang berisi apa dan siapa dari perusahaan atau organisasi pemilik website tersebut. Home page juga berisi link-link ke dokumen informasi lebih lanjut tentang isi website tersebut. Pada dasarnya home page adalah sarana untuk memperkenalkan secara singkat tentang apa yang menjadi isi dari keseluruhan website dari suatu organisasi atau pribadi.

F. Hypertext Transfer Protocol (HTTP)

HTTP adalah suatu protocol untuk menentukan aturan yang harus diikuti oleh web browser dalam meminta atau mengambil suatu dokumen, dan oleh web server dalam menyediakan suatu dokumen yang diminta.

Protocol ini merupakan protocol standar yang digunakan untuk mengakses dokumen HTML. Jika kita sedang browsing dan pada address bar ada tulisan http://www.yahoo.com

maka ini merupakan salah satu penggunaan protocol HTTP dalam web.

G. Universal Resource Locator

Salah satu subyek internet yang paling awal harus dikenal adalah URL (Uniform Resource Locator). URL dapat didefinisikan sebagai sarana untuk menentukan alamat yang akan dipakai untuk mengakses internet, khususnya website.

Secara garis besar , URL terdiri dari jenis protocol yang dipakai, nama webserver, dan direktori. Keseluruhan URL yang lengkap akan berbentuk seperti :

Protocol:// nama host / path / nama file

Penjelasan :

Protocol adalah protocol yang digunakan oleh suatu browser untuk mengambil informasi (http,ftp,mailto,dan lain-lain)

Nama host adalah nama dari host yang dipanggil atau internet protocol. Path adalah lokasi path/direktori tempat file-file diletakkan pada webserver. nama file adalah nama file yang dipanggil.

Contoh pemanggilan URL :

http://www.stmikelrahma.ac.id/dosen/daftardosen.php

keterangan :

www.stmikelrahma.ac.id adalah nama dari server komputer dimana informasi yang dicari berada.

Dosen adalah jalur/path dari informasi yang dicari

Daftardosen.php adalah nama file dimana informasi tersebut berada.

Macam-macam URL sesuai konteksnya :

URL file (FTP : File Transfer Protocol) :

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

URL Gopher :

Protocol ini dirancang untuk mengakses server gopher. Server gopher lebih rumit untuk diakses dari pada server FTP. Beberapa server gopher dapat berada

Contoh : gopher://wiretrap.spies.com/

URL News (Network News Transfer Protocol) :

Merupakan protocol untuk mendistribusikan berita di usenet. Usenet adalah system yang dirancang sebagai forum diskusi dengan didasarkan pada topik-topik yang disebut newsgroup.

Contoh : news:comp.infosystems.www.announce

Telnet

Adalah protocol yang digunakan untuk login ke suatu server komputer.

URL HTTP (Hypertext Transfer Protocol) :

HTTP adalah suatu protocol internet yang digunakan oleh World Wide Web. Dengan protocol ini sebuah web client (browser) seperti Internet Explorer atau netscape dapat melakukan pertukaran data hypermedia, seperti teks, gambar, suara, bahkan video dengan web server.

H. Domain Name System (DNS)

Komputer-komputer di internet menggunakan suatu format penamaan standar untuk mempermudah pengelolaan server komputer di internet. System penamaan server komputer adalah Domain Name System (DNS). DNS membuat suatu tingkat-tingkat domain yang merupakan kelompok komputer yang terhubung ke internet.

Suatu host dikenali berdasarkan nomor IP address, pengalamatan IP address, ini berupa susunan angka-angka, sedangkan manusia lebih mudah mengingat huruf dibandingkan angka. Unutk mempermudah maka dilakukan mapping (pemetaaan) IP address ke name address.

Dengan menggunakan name address ini maka perubahan konfigurasi terhadap sebuah host tidak mempengaruhi keberadaan host tersebut. Sehingga 1 mesin dapat menggunakan banyak nama tetapi 1 nama hanya boleh digunakan oleh 1 mesin saja.

Berikut ini adalah nama domain beserta jenis organisasinya :

Nama domain Jenis Organisasi Com Organisasi komersial Edu Lembaga pendidikan Gov Lembaga pemerintahan Int Organisasi international Mil Organisasi militer Net Provider internet

Org Organisasi umum

Au Australia

At Austria

BAB II

PENGENALAN HTML

HTML kependekan dari HyperText Markup Language. Yaitu suatu format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca dari satu platform komputer ke platform komputer lainnya,tanpa perlu melakukan suatu perubahan apapun.

HTML tidak hanya mampu menampilkan teks tapi juga dapat menampilkan format-format lain dari teks tersebut, misalnya tabel, list, form, frame serta dapat digabungkan dengan obyek suara, gambar, video maupun Java.

Dokumen HTML :

Dokumen HTML adalah adalah file teks murni yang dapat dibuat dengan sembarang teks editor. Disebut juga sebagai web page. Dokumen HTML/web page adalah dokumen yang disajikan dalam browser,umunya berisi informasi ataupun interface aplikasi dalam internet. Dokumen ini mempunyai ekstensi file “htm” atau “html”.

Dokumen HTML disebut markup language karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Kita dapat menentukan baris-baris mana yang merupakan judul, menentukan gambar yang harus tampil dan pengaturan format teks dan lain sebagainya.

Cara membuat dokumen HTML :

1. dengan text editor (notepad,editplus,dll)

2. HTML editor (frontpage,dreamweaver, publisher, webpagemaker,dll)

Elemen HTML

Suatu elemen HTML terdiri dari tag-tag dan atributnya.

Tag :

Sewaktu browser menampilkan halaman web. Browser akan membaca teks pada dokumen HTML dan mencari kode khusus yang disebut tag. Tag biasanya merupakan suatu pasangan tag awal <…> dan tag akhir </…>.

Tag yang mengandung tag lain didalamnya disebut sebagai nested tag.

Sebagai catatan,tidak semua tag didukung oleh semua browser. Jika suatu browser tidak mengenali suatu tag tertentu, browser tersebut akan mengabaikan tag yang tidak dikenalinya dan menampilkan isi tag sebagai teks biasa.

Atribut :

Tag awal biasanya memiliki beberapa buah atribut yang menyatakan karakteristiknya. Misal :

<p align =”left”>

digunakan untuk membuat rata kiri suatu paragraph. Tag yang digunakan adalah <p> dan atribut yang menyertainya adalah align dengan nilai left.

Dalam HTML nilai atribut dalam pasangan tanda petik ganda kecuali jika :

Nilai merupakan suatu kumpulan dari nilai tertentu (misal dalam <P ALIGN=”left”>, tanda petik ganda boleh dihilangkan. Maka penulisannya boleh <P ALIGN=left>).

Nilai hanya berisi angka,h uruf,dan titik (dalam <IMG SRC=”Picture/alam.gif” ALT=”menampilkan gambar pemandangan alam”>, kedua nilai tersebut memerlukan tanda petik ganda karena SRC mengandung tanda “/”, dan ALT mengandung spasi).

Atribut yang menyertai elemen HTML adalah :

Version = cdata (data adalah urutan karakter termasuk karakter khusus. Nilai atribut ini sudah dispesifikasi oleh HTML DTD yaitu HTML Document Type Definition,yang berupa definisi tipe dokumen.

Atribut lain yang boleh disertakan :

Lang (language information) = language kode,digunakan untuk mengontrol browser dalam menampilkan karakter khusus. Atribut ini dangat membantu mencari alamat web,karakter khusus,dan lainnya.

Format dokumen HTML :

Dokumen HTML disusun oleh elemen-elemen/komponen dasar pembentuk dokumen HTML. Elemen tersebut dapat berupa teks murni atau bukan teks,atau kombinasinya.

Beberapa elemen yang tidak mengharuskan tag berpasangan : 1. paragraph <p>

2. line break <br> 3. horisontal rule <hr> 4. list item <li>

Aturan penulisan tag :

1. tag HTML diapit dengan dua karakter kurung bersudut < dan > 2. tag HTML secara normal selalu berpasangan seperti <b> dan >/b>

4. Bebas (huruf kapital atau kecil atau campuran huruf besar –kecil) dan tidak sensitif case artinya tag <b> berarti sama dengan <B>.

5. jika dalam suatu tag ada tag lagi,maka penulisan tag akhir tidak boleh bersilang,harus berurut. Misalnya <b><I> maka akhirnya harus </I></b>.

Pola dasar penulisan dokumen HTML :

<HTML > <HEAD>

…….informasi tentang dokumen HTML </HEAD>

<BODY>

……Informasi yang ditampilkan dalam browser web </BODY>

Penjelasan :

Bagian Head :

Kepala dokumen dinyatakan dengan pasangan tag <HEAD>…</HEAD> yang merupakan pembuka dari dokumen HTML. HEAD berisi informasi-informasi yang menjelaskan tentang dokumen HTML,seperti judul dokumen, basis URL suatu dokumen, hubungan antar dokumen dalam HTML, dan indeks suatu dokumen. Informasi yang ada di bagian HEAD tidak akan terlihat ketika dokumen tersebut dibuka pada suatu browser.

Elemen-elemen pada bagian Head bertugas mengerjakan hal-hal berikut : 1. menyediakan judul dokumen

2. menjadi jembatan antar dokumen

3. memberi tahu browser untuk membuat form pencarian 4. menyediakan metode untuk mengirim pesan.

Elemen-elemen yang ada pada head : Elemen Title

Untuk membuat judul pada suatu dokumen HTML digunakan pasangan tag <TITLE>….</TITLE>. Tag TITLE hanya boleh berada di bagian HEAD dan setiap dokumen hanya boleh memiliki satu judul.

TITLE bukan bagian dari teks dokumen dan tidak boleh mengandung tag-tag lain. TITLE biasanya ditampilkan oleh browser pada title bar dari jendela browser dan berfungsi sebagai label untuk jendela dari browser tersebut.

Listing program 2.1 contoh penggunaan elemen title

<HTML> <HEAD>

<TITLE> Judul Dokumen HTML</TITLE> </HEAD>

<BODY> </BODY> </HTML>

Hasilnya dapat dilihat pada gambar berikut :

Gambar 2.1 menampilkan judul dokumen HTML

Elemen Base

Elemen ini dapat digunakan untuk mempersingkat penulisan URL dengan memberikan hubungan relatif pada link dari dokumen. BASE merupakan suatu elemen pada HTML yang berfungsi menyediakan suatu jalur pencarian bagi dokumen-dokumen yang mempunyai hubungan dengan dokumen pengguna tag BASE.

Dengan menggunakan BASE, user dapat mengikuti link dari dokumen HTML yang kita buat,meskipun dokumen telah berpindah tempat. Hal ini terjadi jika user mengambil suatu file dan membacanya secara local di komputernya. Tanpa menggunakan BASE referensi yang menuju dokumen lain akan menjadi kacau karena dokumen yang direferensikan berada di komputer kita, bukan di komputer user.

Listing program 2.2 : penggunaan tag base

<HTML> <HEAD>

<TITLE> Link Berita</TITLE>

<BASE HREF=”//www.ia.net/~rmeegantara”> </HEAD>

<BODY>

<IMG SRC=/Gambar/Actual.Gif ALT=”Kantor Berita”> <UL>

<A HREF=HTTP://www.cnn.com>CNN Today</A>

<BR><A HREF=HTTP://www.voa.com>VOA on Focus</A> </UL>

</BODY> </HTML>

Elemen Link

Tag <LINK> menyatakan hubungan antara dokumen saat ini dengan dokumen lain. LINK juga digunakan untuk menyatakan pengarang, indeks dan istilah.

LINK berpengaruh pada keseluruhan isi dokumen,karena itu LINK berada di bagian kepala. Suatu dokumen dapat banyak mempunyai LINK dengan berbagai atributnya untuk menyatakan semua hubungan yang mungkin antara dokumen tersebut dengan dokumen lain yang berhubungan.

Lihat tabel berikut :

Atribut Fungsi

HREF Menunjuk pada dokumen atau bagian dokumen yang dituju oleh LINK tersebut.

REL Menyatakan hubungan antar dokumen saat ini dengan nilai pada HREF REV Menyatakan hubungan antara dokumen saat ini dengan nilai

HREF,hanya saja dalam hubungan yang berlawanan dengan REL. TYPE Spesifikasi tipe dan parameter untuk link style sheet.

Listing program 2.3 : penggunaan tag LINK

<HTML> <HEAD>

<TITLE> penggunaan tag LINK</TITLE>

<LINK REV=”made” HREF=”mailto:vegie_2506@yahoo.co.id”> <LINK REL=”toc” HREF=”contents.htm”>

<LINK REL=”index” HREF=”index.htm”>

<LINK REL=”copyright” HREF=”copyright.htm”>

<META NAME=”description” CONTENT=” penggunaan tag LINK”>

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

Elemen Meta

Elemem META digunakan untuk memberikan informasi tentang suatu dokumen. Elemen ini tidak dimaksudkan untuk menggantikan elemen TITLE yang memberikan informsi tentang judul suatu dokumen tetapi untuk memberikan informasi lain yang ber manfaat bagi browser ataupun server. Berikut ini contoh penggunaan tag meta :

<META HTTP-EQUIV=”refresh” CONTENT=”60” URL=”www.friendster.com/asihwinantu”>

elemen META diatas dimaksudkan untuk menginstruksikan browser untuk menunggu 60 detik untuk kemudian memanggil dokumen baru. Instruksi semacam ini digunakan jika dokumen pindah ke lokasi lain.

Atribut Fungsi

HTTP-EQUIV Atribut ini menghubungkan elemen META ke respon protokol tertentu.

NAME Untuk menambahkan keterangan elemen. Jika atribut ini tidak ada diasumsikan sama dengan HTTP-EQUIV.

URL Mendefinisikan target dokumen.

CONTENT Menunjukkan respon nilai dari properti.

META dengan HTTP Header

Atribut HTTP-EQUIV digunakan sebagai pengganti atribut name untuk menampilkan dokumen yang ditunjuk lewat HTTP .

Lihat kode berikut :

<META HTTP-EQUIV=”Expires” CONTENT=”tue,23 Jul 2006 17:10:50 GMT”>

dan menghasilkan dalam header HTTP :

Expires : tue,23 Jul 2006 17:10:50 GMT

Dengan demikian,bisa digunakan untuk menentukan slainan yang baru untuk dokumen.

META dengan search engine

Digunakan untuk spesifikasi keyword (kata kunci) oleh search engine. Jika beberapa META menggunakan atribut “lang” untuk menampilkan hasil pencarian oleh atribut “lang”, lihat contoh berikut :

< -- for speakers of US english -- > <META NAME=”keywords” lang=”en-us” content=”vacation,Greece,Water”>

< -- for speakers of British english -- > <META NAME=”keywords” lang=”en-us”

content=”holiday,Greece,Water”>

META dan PICS

PICS adalah Platform for Internet Content Selection, merupakan infrastruktur untuk mengelompokkan label (meta data) dengan isi internet, digunakan untuk membantu orangtua dan guru mengontrol apa yang bisa diakses anak-anak diinternet.

Listing program 2.4 : deklarasi META untuk menyisipkan PICS <HEAD>

<META HTTP-EQUIV=”pics-Label” Content=’ (PICS-1.1 “http://www.yahooligans.com/v2.5”

labels on “2006.11.05T08:15-0500” until “2007.12.31T23:59-00:00”

for http://w3.org/PICS/overview.html ratings (suds 0.5 density 0 color/hue 1)) ‘>

<TITLE> …. CHILDREN’S EDUCATION….</TITLE> </HEAD>

META dan data profile

Atribut profile dalam HEAD menunjukkan lokasi profile meta data. Nilai atribut profile adalah URL. Browser menggunakan URL untuk 2 hal,yaitu sebagai nama unik dan sebagai link.

Berikut contoh META dengan “author”, “copyright”, “keywords” dan “date”.

Listing program 2.5 : deklarasi META Data Profile

<HEAD profile=”http://www.stmikelrahma.ac.id/profiles/core”> <TITLE>STMIK El Rahma</TITLE>

<META name=”author” content=”Uunboy”>

<META name=”copyright” content=”&copy;2006 STMIK El Rahma”> <META name=”keywords” content=”Komputer, visi-misi, sejarah, jurusan”>

<META name=”date” content” 2006.11.05T08:15:30+00:00”> </HEAD>

Bagian Body :

Section BODY yang dinyatakan dengan tag <BODY>…</BODY> merupakan elemen terbesar di dalam dokumen HTML. Bagian ini bukan hanya untuk memasukkan informasi atau isi dokumen tetapi juga bisa memberikan format tertentu pada suatu kelompok teks, membuat tabel, form dan lain sebagainya.

Listing program 2.6 : contoh dokumen dasar HTML <HTML>

<HEAD>

<TITLE> Judul Dokumen HTML</TITLE> </HEAD>

<BODY>

masukkan teks dan isi tampilan halaman HTML disini </BODY>

</HTML>

Simpan dokumen tersebut dengan ekstensi .htm atau .html. dan buka dengan program web browser yang ada, Internet Explorer, mozzila, opera atau konqueror. Browser akan mengenali

file teks tersebut sebagai suatu dokumen HTML dan akan menampilkan isinya sebagai suatu halaman web.

Gambar 2.2 tampilan dokumen html Atribut Elemen Body

Elemen BODY mempunyai banyak atribut. Berikut ini adalah atribut-atribut yang menyertai elemen BODY.

Atribut Fungsi

ALINK Menyatakan warna link yang sedang aktif

BACKGROUND Menyatakan file gambaryang akan digunakan sebagai gambar latar belakang dari halaman HTML.

BGCOLOR Menyatakan warna yang digunakan sebagai latar belakang halaman web. BGPROPERTIES Jika diset FIXED, membuat suatu watermark yaitu background tetap (tidak

ikut menggulung jika halaman di scrooling)

LEFTMARGIN Mengatur margin kiri dari isi dokumen dengan ukuran pixel. LINK Menyatakan warna dari link yang belum pernah dikunjungi. TEXT Mengatur warna teks dokumen web.

TOPMARGIN Mengatur margin atas dari isi dokumen dengan ukuran pixel. VLINK Menyatakan warna dari link yang pernah dikunjungi.

Tabel 2.3 : Atribut BODY dan fungsinya

Warna yang digunakan dalam dokumen HTML menggunakan kode heksadesimal atau nama dari RGB. Berikut ini adalah tabel nama warna dan nomor hexadesimalnya.

Warna Nomor Hexadesimal

Black #000000

Maroon #800000

Elemen body Judul

Green #008000

Olive #808000

Navy #000080

Purple #800080

Teal #008080

Grey #808080

Silver #C0C0C0

Red #FF0000

Lime #00FF00

Yellow #FFFF00

Blue #0000FF

Fuchsia #FF00FF

Aqua #00FFFF

White #FFFFF

Tabel 2.4 : Tabel warna dan Nomor Hexadecimal

Tag-tag Dasar HTML :

1. HTML

Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini harus dituliskan oleh pemrogram web sebagai tag pertama dalam dokumen HTML. Sintaks:

Tag awal : <HTML> Tag akhir : </HTML>

2. Head

Merupakan tag setelah <HTML>,digunakan untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan.

Sintaks:

Tag awal : <HEAD> Tag akhir : </HEAD>

3. Title

Merupakan tag dalam head yang harus dituliskan untuk memberi judul/informasi pada caption browser web tentang topik atau judul dari dokumen web yang ditampilkan dalam browser.

Sintaks:

4. Body

Merupakan section utama dalam dokumen web. Di bagian body inilah semua bagian dokumen yang akan ditampilkan dalam browser harus dituliskan/didefinisikan.

5. Paragraph

Dalam web,informasi yang merupakan satu pikiran utama disimpan dalam 1 paragraf. Setiap paragraf dimulai dengan tag <P>, tidak harus dituliskan </P> sebagai akhir paragraf,karena tag <P> tidak didefinisikan mempunyai tag akhir.

Setiap pergantian paragraf harus dimulai dengan <P>.

6. Line break

Menyisipkan satu baris baru dalam satu paragraf.

7. Heading

Heading = judul topik dalam dokumen

Heading akan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading juga dimanfaatkan untuk menunjukkan tingkatan kepentingan dari teks yang akan ditampilkan. Dalam HTML terdapat enam tingkatan heading,yang diberi nomor dari 1-6,dimana heading nomor 1 merupakan heading terbesar.

Sintaks :

<Hy> teks yang menjadi heading </Hy> dimana y merupakan nilai/nomor dari heading.

8. Garis mendatar/horisontal rule

Garis pada umumnya digunakan sebagai pemisah antar bagian atau paragraf. Tag <hr> disisipkan pada bagian yang akan diberi garis. Lebar dan ukuran garis dapat diatur dalam bentuk poit atau dalam bentuk ukuran relatif dalam window browser.

Sintaks :

<hr width=”x” size=”x”> dimana x berupa angka/nilai.

9. Komentar

Dalam dokumen web ada sebagian teks yang berfungsi sebagai catatan atau komentar terhadap dokumen itu sendiri, yang tidak ditampilkan dalam browser.

Komentar bisa disisipkan di bagian mana saja di seluruh dokumen web,diletakkan pada bagian-bagian teks dokumen yang memang perlu dikomentari.

Listing program 2.7 : Contoh penyisipan komentar dalam dokumen HTML

<!DOCTYPE HTML PUBLIC “ -//W3C//DTD HTML 4.0 Frameset//EN”> <!saved from url=(0024)http://www.webgaul.com/ -- >

<HTML><HEAD><TITLE> ::: Web gaul ::: </TITLE>

Listing program 2.8 : Contoh dokumen HTML

<HTML> <HEAD>

<TITLE> World Wide Web</TITLE> <BODY>

<CENTER><H1>Definisi World Wide Web</H1></CENTER>

<P ALIGN=”LEFT”>

WWW adalah layanan yang paling sering digunakan dan memiliki perkembangan yang sangat cepat karena dengan layanan ini kita bisa menerima informasi dalam berbagai format (multimedia). Untuk mengakses layanan WWW dari sebuah komputer (yang disebut WWW server atau web server) digunakan program web client yang disebut web browser atau browser saja. Jenis-jenis browser yang sering digunakan adalah: Netscape Navigator/Comunicator, Internet Explorer, NCSA Mosaic, Arena, Lynx, dan lain-lain.

<P ALIGN=”RIGHT”>

Surfing merupakan istilah umum yang digunakan bila menjelajahi dunia maya atau web. Tampilan web yang sangat artistik yang tidak hanya menampilkan teks tapi juga gambar-gambar yang di tata sedemikian rupa sehingga selalu membuat betah netter untuk surfing berjam-jam. Karena itu para netter harus sangat memperhitungkan rencana web mana saja yang akan dikunjungi atau batasi informasi yang ingin diakses, karena bila tidak netter akan tersesat kedalam rimba informasi yang maha luas.

</BODY> </HTML>

BAB III

TEKS DALAM PARAGRAF

Suatu paragraf dalam dokumen HTML ditandai dengan tag <P>…</P>. Tag akhir boleh tidak dipergunakan. Suatu paragraf secara otomatis akan berakhir jika paragraf baru dimulai,pemakaian heading, tabel, blockquote, atau list. Atribut yang digunakan dalam paragraf adalah ALIGN yang mempunyai tiga nilai, yaitu LEFT untuk rata kiri, RIGHT untuk rata kanan, CENTER untuk rata tengah.

Menambah dan menghapus baris baru

Dalam membuat halaman web, teks dapat ditulis dalam baris baru. Tag <BR> dipergunakan untuk membuat teks, ditulis pada baris berikutnya. Tag ini merupakan single text, artinya hanya mempunyai tag awal tetapi tidak mempunyai tag akhir.

Menambahkan heading

Heading adalah sekumpulan kata atau frasa yang menjadi judul atau subjudul dalam suatu dokumen HTML.HTML menyediakan enam tingkatan heading. Heading dinyatakan dengan tag <Hx>….</Hx>, dimana x merupakan nomor level heading, dari 1-6.

Atribut yang menyertai tag <H> adal;ah ALIGN, yang memungkinkan sebuah heading untuk ditampilkan rata kanan,kiri mapupun tengah,yaitu ALIGN = left, ALIGN =right, ALIGN =center.

Listing program 3.1 : Pemakaian heading

<HTML> <HEAD>

<TITLE>heading </TITLE> </HEAD>

<BODY>

<H1>heading 1</H1> <H2>heading 2</H2> <H3>heading 3</H3> <H4>heading 4</H4> <H5>heading 5</H5> <H6>heading 6</H6> </BODY>

Gambar 3.1 Pemakaian tingkatan heading

Menambahkan garis horisontal

Untuk memberi garis pemisah antar baris, digunakan tag <HR>. tag ini akan membuat garis horisontal, selebar jendela browser. Atribut yang dipunyai adalah :

Atribut Fungsi

ALIGN Untuk perataaan garis, diset dengan nilai left, right, center.

WIDTH Untuk mengatur panjang garis horisontal yang dapat ditentukan dengan nilai pixel atau persen.

SIZE Untuk mengatur ketebalan garis horisontal,nilai dalam satuan pixel. NOSHADE Menampilkan garis horisontal tanpa bayangan 3D.

COLOR Memberi warna pada garis horisontal.

Tabel 3.1 : atribut dari tag <HR>

Penggunaan tag DIV

Tag <DIV> digunakan untuk membagi dokumen HTML dala hierarki yang terstruktur. Teks yang dikelilingi oleh tag <DIV>…</DIV> akan diformat menurut nilai atribut ALIGN yang ditentukan di dalamnya. Nilai atribut ALIGN yang digunakan adalah left, right, center.

Tag ADDRESS digunakan untuk memberikan informasi pembuat situs web, seperti nama, e-mail, organisasi atau tanggal terakhir update halaman web. Informasi ini biasanya diletakkan di bagian bawah dokumen.

Listing program 3.2 : penggunaan tag ADDRESS

<ADDRESS>

<H5> author : </H5> Asih Winantu,S.Kom

<A Href=mailto:asihwinantu@lycos.com><BR> asihwinantu@lycos.com </A><BR>

</ADDRESS>

Gambar 3.2 tag ADDRESS untuk informasi dokumen

Menggunakan tag blokquote

Tag BLOCKQUOTE digunakan untuk menuliskan suatu kutipan teks. Browser akan menampilkan kutipan teks dengan mengindentasi teks tersebut atau dengan membuatnya miring. Tag ini bisa berisi paragraf dan tag-tag yang lain, kecuali tag heading.

Listing program 3.3 : penggunaan tag BLOCKQUOTE

<HTML>

<HEAD><TITLE>QUOTATION</TITLE> </HEAD>

<BODY>

<H4> Wisdom Of The Day : </H4> <BLOCKQUOTE>

Kita mengukur diri kita dari apa yang kita rasa mampu untuk Kerjakan. Orang lain menilai diri kita dengan mengukur dari apa yang telah kita lakukan

</BLOCKQUOTE>

<H5>By :Henry Wadsworth Longfellow</H5> </BODY>

</HTML>

BAB IV

PEMFORMATAN TEKS HTML

Teks dalam dokumen web dapat diformat secara khusus untuk menunjukkan perbedaaan dan penekanan terhadap isi dan maksud dari teks tersebut.perbedaan ditampilkan dalam bentuk huruf tebal,miring,garisbawah dan lain sebagainya.

Jenis-jenis pemformatan teks antara lain : 1. Teks pre format

Jarak antar kata/kalimat dalam dokumen web adalah sebesar 1 spasi. Jarak antar kata atau kalimat yang ditampilkan dalam browser web adalah 1 spasi,berapapun jumlah spasi dalam dokumen web sesungguhnya.

Agar browser dapat menampilkan dokumen tersebut sesuai dengan yang ada di dalam editor teks,maka teks yang bersangkutan harus diberi tanda/tag <Pre>…</pre>.

Dengan tag <pre>,teks akan ditampilkan dalam browser dengan ukuran font dan lebar fix. Tag ini juga akan menjaga spasi,baris baru dan tab sesuai dengan aslinya pada saat ditampilkan dalam browser. Jadi tag <pre> akan membuat tampilan dokumen HTML pada browser sama dengan tampilan pada teks editor. Tag ini sangat berguna bila dokumen HTML digunakan untuk menampilkan kode pemrograman komputer.

Contoh : <html> <head>

<title> menggunakan tag pre </title> </head>

<body> <pre>

Daftar menu :

Nasi Goreng Rp. 4500

Udang Asam Manis Rp. 7500

Spagheti Rp.15000

Atau untuk menampilkan kode program seperti ini : For I = 1 to 10

For J = 1 to 5 A(I,j) = I*J Next

Next </pre> </body>

</html>

Hasilnya di browser :

gambar 2 : tampilan kode program di browser

2. Pemformatan karakter/font

Tag <font> digunakan untuk mengatur jenis,ukuran & warna huruf.

Sintaks :

<font face=”nama font” color =warna size=ukuran> teks </font>

Keterangan sintaks :

Nama font adalah nama dar jenis font yang terdapat pada komputer. Penggunaan tanda kutip pada atribut boleh dihilangkan dengan syarat nama font tidak mengandung spasi.

Ukuran font merupakan bilangan,sedangkan warna adalah jenis warna atau kode dari warna yang bersangkutan.

#000000=hitam #FFFFFF = putih.

3. Pemformatan tampilan teks

Pemformatan tampilan teks pada HTML dibedakan menjadi dua,yaitu logical format dan physical format.

a. Logical format

Logical format menerapkan layout dokumen secara logis dan terstruktur. Tag-tag yang termasuk logical format adalah sebagai berikut :

Tag Fungsi <cite> Untuk menandai suatu kutipan /citation <code> Untuk menampilkan kode-kode pemrograman

<em> Untuk menandai teks yang ditekankan oleh penulis / emphasis

<kbd> Untuk menandai teks yang harus dimasukkan oleh user melalui keyboard <samp> Untuk menandai teks yang dimaksudkan sebagai contoh

<strong> Untuk menandai teks yang dianggap sebagai bagian yang penting <var> Untuk menampilkan nama variabel

<dfn> Untuk menandai sebuah subdefinisi dari daftar definisi <abbr> Untuk mendefinisikan suatu singkatan

<acronym> Untuk mendefinisikan suatu akronim <address> Untuk mendefinisikan suatu alamat

<bdo> Untuk mendefinisikan suatu arah teks (by direction order> <blockquote> Untuk mendefinisikan quotation yang panjang

Table 2 : table daftar tag-tag logical format

b. Physical format

Physical format adalah format terhadap fisik suatu font. Tag yang termasuk physical format adalah :

Tag Fungsi

<B> Untuk membuat teks tebal /bold <I> Untuk membuat teks miring/italic

<U> Untuk membuat teks yang digaris bawahi

<TT> Untuk membuat teks yang seperti cetakan mesin ketik / texttype <s> Untuk membuat teks yang tercoret / strikethrough

<big> Untuk memnampilkan teks dengan huruf lebih besar <small> Untuk menampilkan teks dengan huruf lebih kecil <sub> Untuk membuat teks subscript

<sup> Untuk membuat teks superscript.

<strong> Untuk mendefinisikan teks yang ditebalkan

Table 3 : table daftar tag-tag physical format

Contoh penggunaan : <HTML> <HEAD>

</HEAD> <BODY> <b>Bold</b> <BR>

<u>Underline</u> <BR>

<I>Italic</I> <BR>

<strong>Strong</strong> <BR>

<em>Emphasis</em> <BR>

<cite>Citation</cite> <BR>

<S>strikethrough</s> <BR>

CO² <BR>

H₂O </BODY>

</HTML>

Hasilnya di browser :

gambar 3 : tampilan hasil pemformatan font pada dokumen HTML

4. Karakter khusus/entitas

Beberapa karakter mempunyai arti khusus dalam HTML, seperti tanda lebih kecil (<) yang berarti awal tag HTML dan tanda lebih besar (>) yang berarti akhir tag HTML. Jika kita

menginginkan browser untuk menampilkan karakter-karakter tersebut,jkita harus menyisipkan entitas karakter ke dalam source HTML.

Entitas karakter mempunyai 3 bagian : sebuah ampersand (&),sebuah nama entitas atau sebuah # dan nomor entitas,dan terakhir adalah sebuah titik koma(;,semicolon).

Kelebihan menggunakan nama dibanding nomor adalah mudah diingat. Kekurangannya adalah tidak semua browser mendukung nama entitas terbaru;sedangkan dukungan untuk nomor entitas hampir ada pada setiap browser.

Sebagai catatan , bahwa entitas HTML mempunyai sifat case sensitive.

Untuk mendapatkan kode-kode entitas yang lainnya, kita dapat mengunjungi situs

www.w3.org/TR/WD-entities .

Entitas-entitas yang sering digunakan :

Tabel 4 : Daftar kode-kode entitas

Contoh penggunaan entitas : <HTML>

<HEAD>

<TITLE> karakter khusus </TITLE> </HEAD>

<BODY>

Copyright &copy; <br> Trademark &trade; <br> Registered &reg; <br> Poundsterling &pound; <br> Yen &yen; <br>

Euro &euro;<br> </BODY>

Entitas Keterangan &copy; Copyright

&reg; Registered &#153; Trade mark

&nbsp; Non breaking space &amp; Ampersand

&laquo; Anggle quotation mark (left) &raquo; Anggle quotation mark (right) &poun Poundsterling

&euro Euro &yen Yen

</HTML>

Hasil di browser :

BAB V LINK HTML

Kelebihan utama dokumen HTML adalah kemampuannya untuk memberikan link dari satu teks dan atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web akan memberikan hightlight pada teks atau gambar yang diidentifikasikan sebagai link dengan warna atau garis bawah untuk menunjukkan bahwa itu adalah hyperteks link,sering disingkat sebagai hyperlink atau link saja. Jadi link merupakan suatu gambar/teks yang terkait dengan suatu alamat tertentu. Jika link diklik,maka dokumen HTML akan menuju ke alamat tersebut.

Link berhubungan erat dengan anchor. Anchor merupakan suatu yang dapat digunakan untuk menandai sebuah dokumen HTML dan bagian yang ditandai tersebut dapat digunakan sebagai link atau alamat tujuan dari link. Sebuah anchor ditandai dengan tag <A>.

Tag <A> mempunyai dua atribut,yaitu href dan name.

Atribut href digunakan jika sebuah anchor akan digunakan sebagai link, sedangkan atribut name digunakan jika anchor akan digunakan sebagai tujuan.

Jenis-jenis link : link relatif

Link ini dibuat jika kita membuat suatu link pada page ke page lain pada komputer yang sama,tidak perlu menggunakan alamat internet yang lengkap . jika dua page pada direktori yang sama,kita dapat menuliskan nama file html seperti berikut :

<a href=”file2.html”>Berikutnya </a>

link absolut

Link ini dibuat apabila kita membuat link ke page web lain yang berada pada website lain di internet. Dalam hal ini anda harus menuliskan alamat internet secara lengkap. Berikut ini adalah contohnya:

<A href=http://asihwien.blogs.friendster.com/> my own blog</a>

link dalam dokumen yang sama/ pada 1 halaman

Link ini dibuat bila dokumen terlalu panjang,sehingga apabila ditampilkan dalam web browser akan mengharuskan kita melakukan scroll layar berulang-ulang.

Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antarbagian, dengan menandai sertiap bagian tersebut dengan memberinya nama. Sehingga pada beberapa tempat di dalam dokumen akan ada bagian yang bernama,dan di bagian lainnya dapat diletakkan link untuk menuju bagian-bagian tersebut.

Umumnya teknik ini diimplementasikan pada dokumen-dokumen yang menampilkan daftar isi dokumen tersebut keudian pada daftar isi ini dimungkinkan untuk diklik langsung menuju ke isinya.

Caranya:

1 Memberi nama suatu bagian dalam dokumen

a. letakkan kursor pada baris atau teks yang akan menjadi awal dari bagian tersebut. b. Sisipkan nama bagian tersebut dengan : <a name=”nama bagian”>

2 Membuat link menuju bagian dokumen

Membuat link disini sama dengan cara membuat link absolut atau relatif,hanya saja nama dokumen dalam link diganti dengan nama bagian dokumen tersebut ditambah tanda #.

<a href=”#namabagian”>Bagian Tentang </a>

Tanda # menunjukkan bahwa link tersebut ditujukan kepada link dalam dokumen yang sama.

BAB VI

PENYISIPAN GAMBAR

Gambar didalam suatu web page merupakan daya penarik bagi pengunjung suatu website. Umumnya website dilengkapi dengan gambar-gambar untuk membuat orang tertarik untuk melihat dan membaca isi yang ada di suatu website.

Umumnya browser web dapat menampilkan inline image (yaitu gambar yang disajikan bersamaan dengan teks),yang mempunyai format :

Graphic Intercahange Format (GIF) Joint Photographic Experts Group (JPEG)

X Windows / X Bitmap (XBM),gambar dengan tipe hitam-putih. X-Pixelmap (XPM),yang merupakan tipe lain dari format X-windows. Portable Network Graphic (PNG)

Format file gambar akan diketahui darti ekstensi nama file gambar tersebut. Untuk menyertakan sebuah inline image dalam dokumen web digunakan tag :

<img src=”nama image”>

dimana “nama image” adalah URL dari gambar tersebut.

Bila ingin menggunakan gambar sebagai background/latar belakang dokumen HTML

<body background=”nama_image.ext”>

Tag <img> mempunyai beberapa atribut sebagai berikut :

Atribut Kegunaan

Src Menunjukkan URL atau direktori file gambar

Align Menentukan posisi teks di sekitar gambar dengan nilai : Top,middle,bottom,left,right

Width Menentukan lebar dari gambar (dalam ukuran pixel) Height Menentukan tinggi gambar (dalam ukuran pixel)

Alt Menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan.

Pada browser tertentu dapat pula ditampilkan sebagai tooltip.

Untuk mengatur penampilan gambar / alignment,kita mempunyai kefleksibelan pada saat menampilkan gambar. Kita dapat membuat gambar yang ditampilkan terpisah dari teksnya dan kemudian menaruhnya agar ditampilkan di kiri,tengah,atau kanan. Atau bisa juga gambar tersebut ditampilkan bersamaan dengan teks,kemudian diletakkan pada bagian atas,bawah,atau tengah paragraf. Bila kita tidak mendefinisikan alignment gambar pada atribut,maka secara default gambar akan ditampilkan secara rata kiri.

Atribut alt pada tag <img> menyediakan tempat untuk menampilkan teks sebagai pengganti gambar. Pada beberapa browser teks pada atribut alt akan ditampilkan secara mengambang untuk memberi tahu maksud dari gambar,teks ini muncul apabila kita menaruh pointer diatas gambar agak lama,disebut juga sebagai tooltips. Atribut “alt” akan memberitahu reader apa yang dimaksud pada page jika browser tidak dapat menampilkan image.

Contoh image align :

Contoh ini mendemonstrasikan bagaimana mengatur align image dengan teks.

<html> <head>

<title>Wisata Dunia</title> </head>

<body background="Bgd.gif">

<p align="center"><b><u>Tempat-tempat yang indah didunia </u></b></p>

<hr>

<p align="left">Inilah tempat-tempat wisata dunia yang banyak dikunjungi oleh

wisatawan tiap tahunnya:</p>

<p align="left"><img border="0" src=" lawu.jpg" width="148" height="103">

<b>Gunung Lawu</b> : terletak di Propinsi Jawa Timur Indonesia</p>

<p align="left"><b>Hawaii</b> : Terletak di Benua Amerika <img border="0" src=" Hawaii.jpg" width="203" height="134"></p> </body>

</html>

Menggunakan gambar sebagai hyperlink :

Menu dalam web page merupakan pilihan link informasi ke web page yang lain. Menu umumnya dibuat dalam bentuk list ataupun teks bisaa yang mempunyai link. Kita pun dapat menggunakan image untuk membuat menu,dengan gambar maka menu bisa lebih interaktif dan langsung memberi gambaran kepada user tentang apa yang akan didapat kalau memilih menu tersebut.

Contoh <html> <body> <p>

anda bisa menggunakan sebuah gambar sebagai link : <a href=”galery.html”>

<img boder=0 src=”galery.jpg” width=”65” height =”38”> </a>

</p> </body> </html>

BAB VII IMAGE MAP

Image map adalah gambar/image yang mempunyai hyperlink-hyperlink di dalam gambar tersebut, jadi saat kita mengklik gambar,kita akan diarahkan ke alamat URL yang lain,tergantung dari bagian gambar yang kita klik. Metode ImageMap mengharuskan pemrogram web untuk mendefinisikan daerah-daerah dalam suatu gambar (image) yang mempunyai link. Derah yang didefinisikan berupa bentuk daerah dan koordinat pembatasnya.

Koordinat daerah menggunakan posisi titik (point). Adapun ketentuan pendefinisian koordinat (0,0) dimulai dari pojok kiri atas gambar, dan maksimum koordinat adalah pojok kanan bawah gambar (lebar_maks, tinggi_maks).

Definisi bagian atau daerah (map) dalam gambar dinyatakan dalam bentuk obyek : 1. titik (pint)

2. poligon

3. persegi panjang (rect : rectangle) 4. lingkaran (circle)

Informasi dan pemrosesan link yang didefinisikan dengan map ini dibedakan menjadi 2 macam,yaitu :

1. server side 2. client side

Server Side Image Map:

Definisi map disimpan dalam server,sehingga jika suatu daerah dalam gambar yang mempunyai image map diklik maka browser mengirimkan koordinat daerah gambar yang diklik. Oleh server koordinat tadi dicocokkan dengan definisi daerah yang ada. Jika koordinat yang diklik tersebut berada pada definisi daerah yang mempunyai link,maka secara otomatis server akan memberikan web page baru sesuai definisi link.

Penerapan pada server side image map :

1. definisi peta dari gambar disimpan dalam file teks dengan ekstensi MAP. 2. berikan link berupa URL (dengan nama file berekstensi map),mengapit tag img.

3. tambahkan dalam tag Img atribut ISMAP.atribut ISMAP berfungsi untuk mengindikasikan bahwa gambar adalah clickable image map.

Format definisi server side imagemap ada dua macam : format CERN

format ini mempunyai isi yang sama,akan tetapi berbeda pada peletakan informasinya.

Contoh format NCSA : #

circle xx.html 52,38,52,17

Contoh format CERN : #

circle (56,58) xx.html

Berikut ini adalah contoh isi dokumen HTML yang menggunakan server side image map :

<a href =”http://www.situsku.com/cgi-bin/imagemap/bookshelf”> <img src=”bookshelf.gif” ISMAP> </a>

Client Side Image Map:

Definisi map disertakan ke dalam dokumen web. Surfer dapat melihat secara langsung link/webpage yang akan disajikan pada saat pointer mouse berada diatas gambar (pada status bar dari browser).

Sintaks :

<img src=”nama gambar sebagai map” width=”lebar tampilan gambar” height=”tinggi tampilan gambar” usemap=”#nama_map” border=0>

<map name=”nama_map”>

<area shape=”jenis map” coords=”koordinat map” href=”file yang dipanggil”>

</map>

pada atribut Shape di definisikan nama bentuk daerah:

RECT untuk persegi panjang,dengan coords berupa koordinat pojok kiri atas dan pojok kanan bawah.

POINT untuk daerah berupa titik,dengan coords berupa x,y.

CIRCLE untuk daerah berupa lingkaran dengan coords berupa x,y untuk pojok kiri atas dan x,y untuk pojok kanan bawah,bentuk lingkaran akan disesuaikan dengan definisi koordinatnya,karena bisa jadi koordinat yang ditampilkan setelah diinterpolasi menunjukkan suatu bentuk elips.

Penerapan pada client side image map : berikan definisi map seperti diatas

sisipkan pada tag Img sebuah atribut Usemap isikan value untuk atribut usemap =”#namapeta”

Value pada atribut usemap diberi tanda # didepan untuk mendefinisikan bahwa definisi peta berada didalam dokumen html yang bersangkutan.

Software Image Map

Software untuk image map dipergunakan untuk mempermudah pembuatan peta link. Salah satu contoh software imagemap freeware,adalah MapEdit.

Pada saat mendefinisikan map,maka setiap obyek daerah dalam image tidak boleh beririsan/overlapping koordinatnya. Maka harus dipersiapkan software pendukungnya,yakni software untuk membuat gambar/image dan untuk membuat image map.

Software minimum yang fungsional yang dibutuhkan adalah : MSPaint

MapEdit WebImage

gambar 7 : contoh image map

Script dari image map diatas adalah : <html>

<head><title>Image Map</title></head> <body>

<p align="center"><map name="Peta">

<area href="profile.html" shape="rect" coords="114, 4, 228, 118">

<area href="fasilitas.html" shape="rect" coords="115, 119, 229, 234">

<area href="Prodi.html" shape="rect" coords="4, 2, 114, 118">

<area href="alumni" shape="rect" coords="4, 115, 114, 232"></map>

<img border="0" src="logostmik.jpg" width="230" height="235" usemap="#peta"></p>

<p align="center"><b>Selamat Datang</b></p> </body>

</html>

Link 1 Link 2

Link 3 Link 4

BAB VIII LIST

List merupakan bentuk yang umum,yang bisaa kita gunakan untuk membuat daftar sesuatu, jenisnya :

1. list bernomor (ordered list)

list dengan nomor adalah model daftar yang setiap itemnya diberi nomor. 2. list tanpa nomor (unordered list)

adalah model daftar yang setiap itemnya tidak diberi nomor,hanya diberi tanda bullet. 3. list definisi (definition list)

adalah list yang memberikan uraian terhadap suatu item dalam daftar.

Ordered list (list bernomor)

Nomor item secara default adalah menggunakan angka 1,2,3…,dst sampai dengan sejumlah item dalam list tersebut.

Kita dapat mengubah nomor dalam ordered list tersebut dengan model angka yang lain dengan mengisi atribut type pada tag <ol>. Type atau jenis nagka yang bisa digunakan untuk membuat daftar adalah”

• angka romawi (I,II,III atau I,ii,iii)

• huruf (A,B,C atau a,b,c)

Kita bisa mengeset nomor awal permulaan dari daftar dengan memberikan nilai pada atribut “start” pada tag <ol>.

Contoh: <html> <head> <title>Ordered List</title> </head> <body>

<P>Shedule for HTML Course</P> <ol start="1" type="I">

<li>Sunday</li> <ol type="a">

<li>Introduction to HTML</li> <li>Creating List</li>

</ol>

<li>Monday</li> <ol type="A">

<li>Creating table</li> <li>Inserting Image</li> </ol>

<li>Tuesday</li> <ol type="I">

<li>Creating Link</li> <li>Preparing Website</li> </ol>

<li>Wednesday</li> </ol>

</body> </html>

Gambar 8.1 : penggunaan list bernomor

Unordered list (list tanpa nomor/bulleted list) secara default adalah menggunakan tanda dot.

Type-type yang bisa digunakan adalah :

• SQUARE / kotak

• DISC / titik

Contoh :

<html> <head>

<title>Unordered List</title> </head>

<body>

<P>Shedule for HTML Course</P> <ul>

<li>Sunday</li> <li>Monday</li> <li>Tuesday</li> <li>Wednesday</li> </ul>

</body> </html>

Gambar 8.2 : penggunaan list tanpa nomor

Definition list

Definition List terdiri diapit oleh tag <DL> … </DL> dan <DT> tag untuk menentukan definition term serta <DD> tag untuk menentukan definition itu sendiri.

Contoh:

<html> <head>

<title>Definition List</title> </head>

<body>

<p><b>List of Internet Resource</b></p> <dl>

<dt>HTML

<dd>HyperText Markup Langguage is not Language Programming</dd>

</dt> <dt>HTTP

<dd>HyperText Transfer Protocol is TCP/IP Protocol</dd>

</dt>

<dt>Internet

<dd>A network of network</dd> </dt>

<dt>TCP/IP

<dd>Internet protocol</dd> </dt>

</dl> </body>

BAB IX TABEL

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data (item data) dalam satu kesatuan.

Gambar 9.1 : tabel

Elemen-elemen tabel :

Tag Keterangan

<table>...</table> Mendefinisikan sebuah tebel dalam HTML. Jika atribut border dituliskan, maka browser akan menampilkan tabel dengan border. <th>…</th> Mendefinisikan sel header tabel, secara default teks dalam sel ini

ditebalkan dan rata tengah.

<tr>…</tr> Mendefinisikan sebuah baris tabel dalam tabel. Anda dapat mendefinisikan atribut untuk seluruh baris : align(left,center,right) dan/atau valign (top,middle,bottom)

<td>…</td> Mendefinisikan sebuah sel data tabel, secara default teks dalam sel ini akan ditampilkan rata kiri dan ditengah secara vertikal. Sel data tabel dapat berisi atribut untuk mendefinisikan karakteristik dari sel dan isinya.

<capion>..</caption> Untuk mendefinisikan judul tabel. Caption akan diletakkan rata tengah dengan huruf tebal /bold.

kolom

Atribut-atribut dalam tabel :

atribut Keterangan

Align={left / center / right} Mendefinisikan perataan sel secara horisontal Valign={top / middle / bottom } Mendefinisikan perataan sel secara vertikal Colspan=n Memperlebar sel sejumlah n kolom

Rowspan=n Memperbesar sel sejumlah n baris

Cellpadding = n Mendefinisikan jarak antara isi sel dengan border Cellspacing=n Mendefinisikan jarakk antar sel

Contoh penggunaan tabel : <HTML>

<HEAD>

<TITLE> Belajar Tabel </TITLE> </HEAD>

<BODY>

<h4>Daftar Pegawai STMIK</h4 > <TABLE BORDER="1">

<TR ALIGN="CENTER" BGCOLOR="PINK"> <TD>No</TD> <TD>Nama</TD> <TD>Alamat</TD> <TD>Telepon</TD> </TR> <TR> <TD>1</TD> <TD>Asih Winantu</TD> <TD>Bantul Yogyakarta</TD> <TD>0274-441170</TD> </TR> <TR> <TD>2</TD> <TD>Agus Riyanto</TD> <TD>Sleman Yogyakarta</TD> <TD>0274-568912</TD> </TR> <TR> <TD>3</TD> <TD>Suhartini</TD> <TD>Kulon Progo</TD> <TD>0274-377982</TD>

</TR> </TABLE> </BODY> </HTML>

Tampilan dibrowser :

Gambar 9.2 : contoh tabel di browser

Contoh penggunaan tabel dengan rowspan dan colspan : <html>

<head> </head> <body>

<table border="1" cellpadding="0" cellspacing="0" width="100%">

<caption><b>Daftar Nilai Pemrograman Web 1</b></caption> <tr>

<th width="33%" rowspan="2" valign="middle">Nama</th> <th width="67%" colspan="2" >Nilai</th>

</tr> <tr>

<th width="33%">Tugas</th> <th width="34%">Praktikum</th> </tr>

<tr>

<td width="33%">Lutfia</td>

<td width="34%" align="center">85</td> </tr>

<tr>

<td width="33%">yulia </td>

<td width="33%" align="center">90</td> <td width="34%" align="center">93</td> </tr>

<tr>

<td width="33%">Ardian</td>

<td width="33%" align="center">100</td> <td width="34%" align="center">98</td> </tr>

</table> </body> </html>

Tampilan dibrowser :

Gambar 9.3 : tabel dengan elemen rowspan dan colspan

Memberikan background tabel :

Tabel dapat diberi background berupa gambar, dengan cara menambahkan atribut Background="nama gambar.ext"

Contoh aplikasi penggunaan atribut background : <html>

<head> </head> <body>

<table border="1" Background="isa.jpg" width="50%" height=50%>

<caption><b>tabel dengan background gambar</b></caption> <tr>

<td align="center">A</td> <td align="center">B</td> </tr>

<tr>

<td align="center">C</td> <td align="center">D</td> </tr>

</table> </body> </html>

Tampilan di browser :

BAB X FRAME

Frame adalah elemen dalam HTML yang digunakan untuk membangun halaman web yang memungkinkan penampilan beberapa halaman web di dalam satu jendela browser. Model ini sering digunakan untuk memperjelas penyajian informasi.

Tidak semua browser dapat mendukung frame, hanya internet explorer 3.0 keatas dan netscape navigator 2.0 keatas yang dapat menampilkan frame.

Sintaks :

<frameset border=n {{row/cols]}={n,[n[,..]]}> <frame src=”url” name=”nama frame”>

</frameset>

Dimana n adalah nilai yang digunakan untuk menf=definisikan frame.

Tag-tag pada frame :

Tag Fungsi

<frameset> </frameset> Mendefinisikan himpunan frame

<frame></frame> Mendefinisikan suatu subwindow (frame)

<noframes> Mendefinisikan suatu session tanpa frame, untuk browser yang tidak mendukung frame

<Iframe></iframe> Mendefinisikan inline frame

Target frame :

Nama target frame Fungsi

_self Digunakan bila target frame adalah ditempat link berada.

_top Digunakan bila target frame adalah window tempat frame berada _parent Target frame adalah setingkat diatas frame link berada.

Iframe/inline frame :

Dengan inline frame, memungkinkan pemrogram web untuk membuat frame window yang mengambang, frame ini berlaku seperti suatu text box, jika browser emlakukan scrool, maka frame juga aka ikut ter-scroll.

Sintaks :

<iframe name=”nama_frame” src=”url” rows=n cols=n> </iframe>

Contoh inline frame : <html> <body>

<iframe src="web.txt"></iframe> </body>

</html>

Tampilan dari script diatas :

Contoh pengaplikasian frame :

<frameset framespacing="0" border="0" rows="64,*,79" frameborder="0">

<frame name="top" scrolling="no" noresize target="contents" src="atas.htm">

<frameset cols="150,*">

<frame name="contents" target="main" src="kiri.htm"> <frame name="main" src="utama.htm" scrolling="no"> </frameset>

<frame name="bottom" scrolling="no" noresize target="contents" src="bawah.htm">

</frameset>

Tampilan dari script diatas adalah :

BAB XI FORM DAN INPUT

Form merupakan elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman web.

Sintaks :

<form action=” URL “ method=”get/post” enctype=””> </form>

Keterangan :

1. Atribut action digunakan untuk mendefinisikan URL yang akan digunakan sebagai pemroses field input form. URL adalah lokasi dokumen yang akan melakukan proses terhadap input dari form.

2. Pemroses dari form bisa berupa suatu file web, ataupun berupa email : Contoh Sintaks :

Action berupa file (action=”proses_simpan.php)

Action berupa alamat email (action=mailto:asihwinantu@gmail.com)

3. Method adalah atribut yang digunakan untuk menyatakan bagaimana masukan-masukan dari form dikirimkan ke proram CGI (common gateway interface suatu program yang berada di web server)

Jenis masukan dalam suatu form dibedakan menjadi :

Text : digunakan untuk memasukkan suatu nilai untuk dikirimkan ke server. Nilai bisa berupa angka atau teks.

Text Area : digunakan untuk memasukkan data dalam bentuk teks yang jumlah karakternya banyak.

Radio : menyediakan beberapa pilihan, hanya satu pilihan yang bisa dipilih. Check Box : menyediakan beberapa pilihan, bisa lebih dari satu pilihan.

List : pilihan dalam bentuk list., pilihan dapat lebih dari satu.

File : untuk menyediakan tombol browse file, untuk inputan yang berupa file Button : mendefinisikan tombol untuk melakukan pemrosesan form.

o Submit : untuk memenggil url, setelah selesai penginputan form. o Reset : untuk menginisialisasi setiap elemen form.

o Button : untuk memebuat form lebih interaktif, untuk memanggil script (fungsi) yang ada dalam dokumen HTML.

Contoh penggunaan form : <html> <head> <title>formulir</title> </head> <body>

<p><b>Formulir Pendaftaran Kursus</b></p>

<form method="POST" action=" simpan.php" name=”form_kursus”> <table width="100%">

<tr>

<td>Nama</td> <td>:</td>

<td><input type="text" name="nama" size="39"></td> </tr>

<tr>

<td>Jenis Kelamin</td> <td>:</td>

<td><input type="radio" value="L" checked name="jkl">Laki-laki

<input type="radio" name="jkl" value="p">Perempuan</td> </tr>

<tr>

<td>Alamat</td> <td>:</td>

<td><input type="text" name="alamat" size="39"></td> </tr>

<tr>

<td>Propinsi</td> <td>:</td>

<td><select size="1" name="propinsi"> <option>Jawa Barat</option> <option>Jawa Tengah</option> <option>Jawa Timur</option> </select></td> </tr> <tr> <td>Pilihan Kursus</td> <td>:</td>

<td><input type="checkbox" name="kursus" value="inggris">Bahasa Inggris<br>

<input type="checkbox" name="kursus" value="komputer">Komputer</td>

</tr> <tr>

<td>Foto</td> <td>:</td>

<td><input type="file" name="foto" value="foto"></td> </tr>

</table>

<p><input type="submit" value="Submit" name="Bsubmit"> <input type="reset" value="Reset" name="Breset"></p> </form>

</body> </html>

Tampilan di browser :

BAB XII JAVASCRIPT

Javascript adalah bahasa pemrograman script yang digunakan untuk web, yang bersifat open source dan open architecture yang diletakkan di komputer klien. Perbedaannya dari bahasa java adalah, jika java adalah bahasa pemrograman kompiler, maka javascript adalah skrip intrepreter yang diletakkan pada bagian skrip html dan penulisan javascript hanyalah memerlukan editor teks biasa, seperti notepad, editplus dan lain sebagainya.

Javascript bersifat case sensitif , artinya ada pembedaan antara menggunakan huruf kapital dan huruf kecil. Untuk komentar dalam javascript, digunakan tanda // atau /* */.

Contoh penggunaan komentar :

<script language=”Javascript”> //ini adalah komentar

/* ini adalah komentar juga * / </script>

Atau :

<SCRIPT LANGUAGE=”Javascript”> //ini adalah komentar

/* ini adalah komentar juga * / </SCRIPT>

Struktur javascript :

Perintah javascript dapat ditulis dalam dokumen html atau pada file terpisah, dengan ekstensi “.JS” yang nantinya dipanggil dengan perintah src. Javascript dituliskan pada bagian head.

Berikut ini adalah contoh dokumen html menggunakan javascript : <html>

<head>

<title>contoh javascript</title> <script language=”Javascript”>

document.write(“javascript yang pertama”) </script>

</head> <body> </body> </html>

Perintah javascript dapat dituliskan terpisah dari dokumen html, dan dipanggil dengan perintah :

< script src=http://nama_file_js.js> </script>

Menggunakan javascript untuk validasi data form : <html>

<head>

<title>Membuat Validasi</title> <script LANGUAGE="JAVASCRIPT"> function ValidasiForm()

{ if (document.FormTamu.nama.value=="") {

alert("Kolom nama tidak boleh kosong"); return false;

}

if (document.FormTamu.alamat.value=="") {

alert("Kolom Alamat tidak boleh kosong"); return false;

}

if (document.FormTamu.email.value=="") {

alert("Kolom Email tidak boleh kosong"); return false; } } </script> </head> <body>

<form onSubmit="return ValidasiForm()" name="FormTamu" method="post" action="">

<table class="TABLE" width="307" border="0" cellspacing="0" cellpadding="3">

<tr align="left" bgcolor="#00FF00">

<th colspan="2" scope="col">Form Validasi </th> </tr>

<tr>

<td width="92">Nama </td> <td width="246">

<input name="nama" type="text" id="nama" size="25" maxlength="35"></td>

</tr> <tr>

<td>Alamat</td>

<td><input name="alamat" type="text" id="alamat" size="25" maxlength="35"></td>

</tr> <tr>

<td>Email</td>

<td><input name="email" type="text" id="email" size="25" maxlength="35"></td>

</tr> <tr>

<td>&nbsp;</td>

<td><input type="submit" name="Submit" value="Kirim"></td> </tr> </table> </form> </body> </html>

Dokumen html diatas akan menampilkan sebuah formulir isian. Jika ser tidak mengisi data pada textbox nama,alamat dan email maka akan ada konfirmasi atau pesan dari javascript yang berupa alert (message box).

BAB XIII

CSS (CASCADING STYLE SHEET)

Pengertian css :

Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada. Style sheet mendeskripsikan bagaiman tampilan document HTML di layar. Anda juga bisa menyebutnya sebagai template dari document HTML yang menggunakannya.

Anda juga bisa membuat efek-efek sepesial di web anda dengan menggunakan style sheet. Sebagai contoh anda bisa membuat style sheet yang mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna biru. Atau pada tag <P> yang akan di tampilkan dengan warna kuning dan menggunakan font verdana dan masih banyak lagi yang bisa anda lakukan dengan style sheet.

Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet (CSS) technology yang didukung oleh hampir semua web Browser. Hal ini dikarenakan CSS telah distandarkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser.

Mengaplikasikan CSS pada Dokumen HTML

Style Sheet dapat digunakan dengan 3 cara, sesuai dengan kebutuhan anda:

• Dengan membuat link ke file CSS dari file HTML.

Metode seperti ini memungkinkan anda mengubah style sejumlah halaman web dengan hanya mengedit satu file CSS. Untuk membuat link ke Style Sheet eksternal, anda dapat dengan mudah membuat sebuah file berisi definisi style kemudian simpan (save) dengan ekstensi .CSS, kemudian buat link ke file tersebut dari halaman web. Dengan cara ini, anda dapat memanfaatkan Style Sheet yang sama untuk beberapa halaman dalam site anda.

Sebagai contoh, bila Style Sheet anda dinamai style-saya.css dan terletak di alamat http://alamat-internet/style-saya.css, diantara tag <HEAD> anda harus menambahkan skrip berikut ini:

<HEAD>

<TITLE>Judul artikel</TITLE> <LINK REL=STYLESHEET

HREF="http://alamat-internet/style-saya.css" TYPE="text/css">

</HEAD>

• Dengan menyisipkan Style Sheet pada file HTML.

Metode seperti ini memungkinkan anda mengubah style suatu halaman web dengan hanya mengedit beberapa baris Style Sheet. Untuk menyisipkan Style Sheet kedalam dokumen HTML,

tambahkan blok <STYLE> </STYLE> di awal dokumen, di antara tag-tag <HTML> dan <BODY>. Hal ini memungkinkan anda untuk mengubah penampilan satu halaman web. Tag <STYLE> memiliki satu parameter yaitu TYPE, yang menspesifikasi type media internet sebagai “text/css” (memungkinkan browser yang tidak mendukung type ini untuk mengabaikan Style Sheet). Tag <STYLE> diikuti oleh sejumlah definisi style dan berakhir dengan tag </STYLE>.

Contoh :

<HTML>

<STYLE TYPE="text/css"> <!--

BODY {font: 10pt "Arial"} H1 {font: 15pt/17pt "Arial"; font-weight: bold;

color: maroon}

H2 {font: 13pt/15pt "Arial"; font-weight: bold;

color: blue}

P {font: 10pt/12pt "Arial"; color: black} --> </STYLE> <BODY> ... </BODY> </HTML>

• Dengan menyisipkan secara inline pada tag dalam file HTML.

Hal ini memberi cara tercepat untuk mengubah suatu tag, sejumlah tag, atau satu blok informasi pada halaman web.

Bila anda menginginkan pemformatan pada sebagian kecil saja dari web anda, anda dapat menggunakan inline style.

Definisi style pada inline style hanya berpengaruh pada tag dimana inline style tersebut berada. Contoh inline style pada tag <p> berikut:

<P STYLE="margin-left: 0.5in; margin-right: 0.5in"> Baris ini akan terlihat rata di bagian kanan dan kiri. <P> Baris ini tidak mempunyai indentasi.

Sintax Dasar CSS

Style sheets terdiri dari dua bagian: 1. Selector

2. Declaration

Terdiri dari property dan nilainya. Syntax :

Selector { property1: value; property2:value, . . .}

Contoh :

BAB XIV

MENGUPLOAD WEB

Membuat website adalah suatu hal yang sudah biasa di masa sekarang ini. Setelah kita membuat website, supaya bisa diakses dari internet, maka kita harus mempublishnya/meletakkan di server Hosting. Atau istilahnya kita meminjam tempat /space pada hardisk yang berada di computer server milik penyedia layanan Web Hosting. Sudah banyak sekali tempat yang menyediakan layanan ini.

Web hosting ada yang berbayar (istilahnya sewa tempat/ hosting) maupun yang gratis. Hosting yang berbayar contohnya : Rumah Web, IDWebHost. Dan contoh hosting yang gratis salah satunya adalah http://www.100webspace.com.

Nah tutorial kali ini kita akan membahas langkah-langkah untuk meletakkan file-file web kita di tempat yang gratis aja, tempat yang dibahas kali ini adalah di

http://www.100webspace.com.

1. masuklah ke situs http://www.100webspace.com.

2. Setelah masuk, kita daftar dulu. Kalo pingin yang gratis tentunya pilih yang Free Hosting. Klik Sign Up Now.

3. Selanjutnya kita harus mengisi formulir yang dah disediakan, dengan benar.

5. lalu, account kita akan dikirimkan ke email kita. Tapi sabar ya, biasanya server akan memerlukan waktu beberapa menit atau mungkin dalam hitungan jam, untuk memproses pendaftaran kita.

6. cek email anda, jika server sudah merespon pendaftaran kita, maka emailpun akan sudah dikirimkan ke kita, dengan tampilan seperti berikut ini.

7. kemudian lakukan login menggunakan username dan password yang sudah dikirim ke alamat kita.

8. Ini dia tampilan dari Control Panel milik 100 Web Space. Dengan Control Panel ini kita bisa memanage hosting kita,misalkan kita mau upload filenya. Atau bisa juga untuk mengatur FTP, domain, database, yang jelas macem2 lah.

9. Untuk mulai mengupload file yang udah kita buat ke hosting, kita pilih File Manager. Setelah itu masuk ke folder www

10. Setelah itu masuk lagi ke folder dibawahnya

11. Masukkan file2 yang mau kita upload dengan cara klik tombol browse. Setelah itu cari dimana filenya berada. Payahnya di sini kita harus memasukkan filenya satu per satu. Untuk mulai mengupload, selanjutnya klik aja tombol Upload File. Kalo pingin file yang diupload bersamaan lebih banyak lagi, kita bisa klik pada More Files.

12. nah, kalau upload file udah selesai, maka kita bisa melihat hasilnya di browser, ketikkan alamatnya di address bar. Dan sekarang website anda siap di nikmati.

7. isikan tulisan, sebagai contoh :

8. untuk tulisan nama-nama teman anda, cukup gunakan enter saja untuk menambahkan tulisan selanjutnya (baris baru)

9. berikan link ke tulisan-tulisan tersebut. Link merupakan jalan pintas menuju alamat web/blog teman anda.

10. nah, lihat hasil akhir dari website anda dengan membukanya di browser.

Membuat halaman profil

1. anda buka index.html di dreamweaver 2. lalu simpan sebagai profil.html

3. ganti judul halaman dengan ”Profilku”

4. kemudian edit halaman profil, isikan dengan profil anda

Membuat halaman CV

Sama seperti cara membuat halaman profil, dan ketikkan CV anda sebagai isi dari halaman web tadi.

Membuat halaman Galery

Galery merupakan tempat kita memajang foto-foto ataupun gambar-gambar yang bercerita tentang kita.

1. Sama seperti cara membuat halaman profil, dan edit isi dari halaman web tadi, dan simpan sebagai galery.html.

2. Kemudian untuk menambahkan foto kedalam web, terlebih dahulu, anda harus menyiapkan foto-foto yang akan anda sisipkan kedalam web anda, yang disimpan dalam folder tersendiri. 3. Anda buka file galery.html, Lalu pilih menu Commands > Create Web Photo Album

Yang harus anda isi pada kotak dialog diatas adalah judul album (Photo album title) , kemudian di kolom source images folder, anda harus memilih sumber gambar/foto yang akan anda tampilkan di album, disarankan untuk memilih foto-foto terlebih dahulu, kemudian menyimpannya di folder tersendiri.

Kemudian pada destination folder anda pilih forlder tujuan penyimpanan gambar, disarankan untuk menyimpan gambar di tempat yang sama dengan tempat anda menyimpan file-file web anda.

Pada thumbnail size : pilihlah 100x100, ini menentukan ukuran thumbnail gambar /preview gambar di album anda.

Pada columns isikan angka 3. 4. Setelah selesai, pilihlah tombol OK.

5. Tunggulah sebentar sampai proses pembuatan album selesai.

6. setelah proses pembuatan album selesai, maka akan muncul kotak dialog, tekan OK. nah...album anda sudah selesai. Maka halaman album akan langsung ditampilkan di editor

8. alamat source inline frame tentu saja harus anda sesuaikan dengan nama dan alamat letak file foto album anda.

9. simpan file web anda. Kira-kira beginilah hasil tampilan dari file galery.html

Membuat halaman Buku tamu

Buku tamu akan menampung data tamu yang mengunjungi website anda.

1. Sama seperti cara membuat halaman profil, anda harus mengedit bagian utama halaman website, beri judul Buku tamu.

2. Kemudian anda tambahkan formulir buku tamu. Pilih menu insert > form > form.

Jika anda melihat tampilan seperti diatas, maka form telah berhasil ditambahkan di halaman web anda.

3. untuk membuat form isian data, anda harus membuat layout form anda terlebih dahulu menggunakan tabel.

Caranya, pilih menu insert > table, setelah itu maka kotak dialog tabel akan ditampilkan ke hadapan anda.

4. Pada Rows isikan 5, kemudian pada Columns isikan 3, untuk width pilihlah 100 percent. Pada border thickness, berikan angka 0. Kemudian tekan tombol ok. Maka, anda akan melihat hasil layout tabel anda seperti gambar berikut ini.

5. kemudian untuk membuat formulir, anda harus membuat label-label terlebih dahulu Caranya, silahkan isikan seperti pada tabel di bawah ini :

Nama :

Lokasi :

Email :

Pesan :

6. kemudian anda bisa mengisikan komponen form di kolom ke-tiga. Caranya dengan insert > form > text field

7. Jika kotak dialog seperti tampilan diatas sudah tampil, anda klik tombol OK.

8. lalu, setelah itu, klik pada text field yang sudah tercipta di form anda. Dan pada panel properties. Silahkan anda ganti nama textfield anda sesuai dengan tujuan dari textfield tersebut. Contoh : beri nama text field anda dengan Txt_nama untuk textfield yang digunakan untuk menginputkan nama.

9. lakukan hal yang sama untuk membuat textfield-textfield yang lain.

10. khusus untuk textfield pesan, berilah tanda centang pada type multi line, dan pada tab num lines isikan angka 5.

11. untuk baris terakhir anda harus buat sebagai satu kolom, caranya blok semua sel di baris tersebut, lalu klik kanan dan pilih menu table > merge cells

12. di baris terakhir kita akan tambahkan tombol submit untuk memproses formulir dan juga tombol reset untuk membatalkan pemrosesan formulir. Caranya pilih menu Insert > Form > Buttons, lakukan hal tersebut sebanyak 2 kali. Inilah hasilnya :

13. pada tombol yang pertama, secara otomatis akan tercipta tombol submit. Untuk tombol yang kedua, anda harus mengubahnya menjadi tombol reset, caranya aktifkan tombol tersebut, lalu pada panel properties, ubahlah nama tombol tersebut menjadi Reset , kemudian ubah juga action-nya menjadi Reset Form

15. DAFTAR PUSTAKA

Betha Sidik, Pemrograman Web Dengan HTML, Informatika, Bandung, 2001.

Nur hasyim, HTML dan CSS, IlmuKomputer.com.

Tim Evans, HTML 4: 10 Minute Guide, QUE,USA,1998.

Wahana Komputer, Pembuatan Program Sistem Informasi Akademik Berbasis ASP, Salemba Infotek, Jakarta, 2003.

Wahana Komputer, Pemrograman HTML 4.1, Andi, Yogyakarta, 2003.

Wahju Tjahjo, Dasar-dasar Pemrograman HTML & Javascript, Ardana Media, Yogyakarta, 2007.