modul html dasar dan pengenalan dreamweaver

Modul Praktikum Web – Sekolah Tinggi Informatika dan Komputer Indonesiahttp://www.stiki.ac.idTeam Penyusun: 1smail, Bhuedies, Chris, Shelly

PraktikumPraktikum

1Konsep Dasar Web

Tujuan: Mengetahui konsep dasar web & protokol dalam web

Mengetahui penggunaan dasar-dasar HTML, Tag, Atribut dan Format text.

Persiapan: Menjalankan editor perintah HTML berupa Notepad atau

Dreamweaver dalam mengikuti Percobaan yang diberikan sesuai dengan urutannya.

Pekerjaan: Bacalah teori yang ada pada modul.

Kerjakan Percobaan dan Latihan yang diberikan.

Kerjakan Laporan di rumah.

Hasil: Mahasiswa dapat mengerti konsep dasar web dan menggunakan

perintah/tag HTML, serta mengumpulkan laporan tugas pada pertemuan berikutnya.

Teori:

1. Pengertian WebInternet terdiri dari berjuta-juta halaman, dan setiap

halaman disebut dengan Page (halaman) atau Web Page (halaman web). Web Page biasanya disingkat dengan Web saja. Sedangkan halaman yang pertama kali muncul ketika anda membuka browser (mis: Internet Explorer) disebut Home Page. Keseluruhan isi web yang dimiliki oleh seseorang atau lembaga tertentu disebut dengan Web Site (Situs web). Web site bisa diibaratkan sebagai sebuah buku yang terdiri dari halaman-halaman tertentu, termasuk cover, daftar isi, dan sebagainya.

http://www.stiki.ac.id/


KONSEP DOMAIN NAME & URLDomain name adalah sebuah sistem penamaan alamat

internet, misalnya: www.stiki.ac.id. Domain name terdiri atas sebuah struktur hierarkis, di mana level tertinggi disebut sebagai Top-Level Domains (TLDs), misalnya: ".com", ".net", ".org", dll. Level kedua setelah TLDs adalah Second Level Domains (SLDs), misalnya: google merupakan SLD dari google.com.

Domain name hanya mengacu pada sistem penamaan alamat internet protokol, sedangkan URL (Uniform Resource Locator) adalah sarana untuk menentukan alamat yang akan kita pakai untuk mengakses internet. Misalnya alamat URL untuk stiki.ac.id adalah http://www.stiki.ac.id/

2. Server Side & Client SideDalam dunia web, terdapat dua kategori bahasa yang

digunakan untuk membangunnya, Client Side Scripting Languange dan Server Side Scripting Language. Perbedaan dari keduanya, terletak dari bagaimana bahasa tersebut diterjemahkan menjadi HTML

Client Side Scripting LanguangeClient Side melakukan proses kompilasinya pada sisi Client, tepatnya oleh browser yang dipakai oleh pengunjung. Itulah sebabnya tiap browser berbeda dalam menterjemahkan bahasa Client Side. Contoh bahasa Client Side antara lain adalah Javascript dan VBScript.

Server Side Scripting LanguangeSeperti namanya, Server Side melakukan kompilasi pada sisi server. Setelah melalui proses kompilasi, bahasa tersebut kemudian dikirim kembali kepada client berupa bahasa HTML. Itulah sebabnya, kode bahasa Server Side tidak akan terlihat pada browser anda. Contoh bahasa Server Side antara lain adalah PHP, ASP, JSP, Cold Fusion.

Web ServerBahasa Server Side memerlukan sebuah server sebagai tempat untuk melakukan proses kompilasi, dan server tersebut biasa dinamakan Web Server. Ada banyak pilihan menggunakan Web Server, tapi saat ini yang paling banyak digunakan adalah Apache. Microsoft sendiri mempunyai dua buah Web Server, yaitu Personal Web Server(PWS) dan Internet Information Service(IIS). Perbedaan diantara keduanya salah satunya terletak pada jenis OS yang digunakan. Untuk PWS, hanya akan berjalan pada Win9x, dan WinME, sedangkan untuk IIS, hanya berjalan

2





untuk sistem operasi yang berbasis NT, yaitu Win2000 dan WinXP.

3. Protokol WebProtocol merupakan beberapa aturan untuk melakukan

suatu pekerjaan tertentu. Satu tugas komputer, seperti mengirim email, dapat meliputi banyak protokol. Misalnya segrup protokol menjelaskan cara mengirim email dari komputer satu ke lainnya. Sementara grup protokol lain menjelaskan bagaimana data harus dijabarkan ketika pesan sampai di tujuan.

Ketika sebuah situs web dikunjungi, koneksi yang digunakan untuk menampilkan informasi di browser adalah HTTP (HyperText Transfer Protocol). Proses penampilan informasi ini melibatkan pengambilan berbagai unsur halaman situs web, seperti gambar dan teks.

FTP (File Transfer Protocol) merupakan suatu metode dalam internet untuk mengakses file secara langsung ke dalam server. Mengcopy atau memindahkan file/data dari komputer ke server.

Gambar 1.1 Arsitektur client-server layanan web

4. Dasar-dasar HTMLHTML adalah singkatan dari Hypertext Markup Language.

Gunanya arahan HTML di dalam sebuah dokumen Web adalah untuk mengatur struktur tampilan dokumen tersebut dan juga

3



untuk menampilkan "links" atau sambungan ke lokasi di internet yang lain. Sebenarnya, sebuah dokumen HTML atau Web, hanyalah sebuah dokumen teks yang berisi tag-tag HTML.

Biasanya sebuah dokumen HTML disimpan dengan menggunakan nama belakang .html atau .htm.

File HTML berupa file teks (plain text file), bukan binary file, sehingga dapat dibuat menggunakan editor teks biasa.

STRUKTUR DOKUMEN HTML

Dokumen web atau dokumen HTML berisi kode-kode yang mengikuti suatu aturan tertentu. Aturan tersebut diantaranya adalah struktur dokumen dan cara penulisan perintah. Dokumen web mempunyai struktur dasar sebagai berikut :

<HTML> <HEAD>

<TITLE>Judul dokumen</TITLE> </HEAD> <BODY>

Isi dokumen </BODY> </HTML>

Tanda yang dimulai < dan diakhir > disebut sebagai tag. <html> dan </html> dibaca sebagai tag html. <html> merupakan tag pembuka sedangkan </html> merupakan tag penutup, perbedaan hanya pada tanda < dan </ yang digunakan sebelum nama tag. Ada tag yang bersifat container yang dapat menampung tag lain seperti <body> dan <head> namun ada juga tag tunggal non-container yang tidak dapat menerima tag lain di antara tag pembuka dan penutup, misalnya tag <title>. Ada tag yang dalam penggunaannya tidak memerlukan penutup, misalnya <br> (break, ganti baris). Berikut ini adalah daftar beberapa tag yang sering digunakan di dalam halaman web :

Tag Kegunaan<html> menandai awal dan akhir dokumen HTML<head> menandai bagian header dokumen HTML<title> Membuat judul halaman web, tampil di title bar web

browser. Ditulis di antara <head> dan </head><body> menandai awal dan akhir isi dokumen (yang

ditampilkan)<h1> Untuk membuat Judul paragraf. Memiliki nilai <h1> ...

<h6><br> Membuat baris baru sehingga teks setelah tanda <br>

berada di baris berikutnya.<p> Membuat paragraf baru. Semua teks setelah <p> akan

4



ditempatkan pada paragraf berikutnya. Jika anda menulis lebih dari 1 <p>, hanya <p> pertama yang diproses.Parameter : Align

<b> Menebalkan teks yang berada di antara <b> dan </b><i> Memiringkan teks yang berada di antara <i> dan </i><u> Memberikan garis-bawah pada teks yang berada di

antara <u> dan </u><hr> Membuat garis horisontal<pre> Tag ini menggantikan peran dari <br> dan <p> serta

beberapa tag pengatur tata-letak lain. Jika anda menuliskan teks di antara <pre> dan <pre> maka teks tersebut akan ditampilkan apad adanya, sama seperti saat penulisan.

<sup> Membuat text superscript. Misal membuat X2

<sub> Membuat text subscript. Misal membuat H2O

<font> Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.Parameter : size, face, color

<img> Untuk menampilkan sebuah file gambar.Penulisan : <img src=”namafile.extensi”>

<a> Untuk membuat Link

<table> Untuk menata letak (layout) isi dokumen.

<marquee>

Untuk membuat teks/tulisan yang berada diantara <marquee>… </marquee> berjalan

<form> Untuk membuat formulir.

<input>,

<textarea>,

<select>

Komponen isian pada formulir.

<li>, <ol>, <ul> Memberikan penomoran

<frame>, <frameset

>, <iframe>

Untuk membuat frame (bingkai)

<span>,

<div> Pengelompokan elemen dokumen

Tabel 1.1 Tag-tag HTML

5



PEWARNAANWarna merupakan elemen penting dari sebuah dokumen.

Web browser dapat menampilkan ribuan warna yang terdaftar di dalam pustakanya. Secara default terdapat lebih 65.000 warna yang dapat ditampilkan oleh web browser. Warna dapat dikenakan terhadap teks dan background.

HTML memberikan dua cara pewarnaan teks atau background yaitu:

1. Menggunakan konstanta warna seperti blue (biru), yellow (kuning), brown (coklat), dll

2. Menggunakan nilai RGB (Red Green Blue) yaitu memadukan nilai-nilai hexa-decimal dari warna merah, hijau dan biru untuk mendapatkan suatu warna kedua.Bentuk penulisan nilai RGB adalah #RRGGBB

Contoh : #000000 untuk mendapatkan warna Hitam #FFFFFF untuk mendapatkan warna Putih.

Lakukan kombinasi untuk mendapatkan warna lainnya. Misal: #FFFF00 untuk mendapatkan warna Kuning.

Percobaan:Berikut ini adalah contoh penggunaan beberapa Tag HTML yang sering digunakan untuk menformat halaman web dan diharapkan anda dapat memahaminya.

Lakukan setiap perintah / petunjuk yang ada pada materi dibawah ini!

Tag <br>, <p>, <div>1. Ketiklah kode HTML di bawah ini kemudian simpan di

folder anda dengan nama c1.html<HTML> <HEAD> <TITLE>..:: Format Dasar Dokumen ::..</TITLE> </HEAD> <BODY> Dua teks ini ditulis satu baris <br> tetapi tidak dengan baris ini <p> Perhatikan jarak teks di atas dengan paragraf ini , beda khan antara br dan p ? </BODY></HTML>

2. Bukalah file yang anda buat dan amati hasilnya.

6



Jika ditampilkan pada browser maka akan terlihat seperti berikut:

Gambar 1.2 Perbedaan antara <br> dan <p>

Tag <p> dan <div> memiliki kegunaan yang sama, hanya saja tag <div> tidak membuat paragraf baru, namun hanya melakukan penggantian baris.Kedua tag ini memiliki atribut yang sama yaitu Align dengan nilai yang sama pula.

Nilai KegunaanCenter Teks di dalam paragraf diletakkan ditengah

halaman secara horisontalRight Teks di dalam paragraf dibuat rata sisi kanan

halamanLeft Teks di dalam paragraf dibuat rata sisi kiri

halaman. Left merupakan nilai default untuk atribut align, artinya jika atribut align tidak diberi nilai maka otomatis paragraf dianggap rata-kiri

Justify Teks di dalam paragraf dibuat rata sisi kiri-kanan halaman (justified)

3. Ketiklah kode HTML di bawah ini kemudian simpan di folder anda dengan nama c2.html

<HTML> <HEAD> <title>Penggunaan Tag Div</title> </HEAD> <BODY> Format terhadap halaman web merupakan pekerjaan penting yg tidak boleh diabaikan selama

7



pengembangan web site. <div align=justify> Pengembang perlu memikirkan bagaimana halaman web disajikan kepada para pengunjung sehingga menyenangkan,informatif,mudah dipahami dan menarik mereka untuk ingin tahu lebih banyak tentang website yang dibuat. </div > <div align=center> Teks di dalam paragraf ini rata-tengah </div> </BODY></HTML>

4. Bukalah file yang anda buat dan amati hasilnya.Adakah perbedaan jika anda menggunakan tag <p> dengan tag <div> dalam membuat sebuah paragraf?

Jika ditampilkan pada browser maka akan terlihat seperti berikut:

Gambar 1.3 Tag <div> tidak mempuat paragraf baru

Tag <body>Tag <body> mempunyai beberapa atribut yang jika digunakan akan mempengaruhi seluruh teks dokumen web, semua teks di dalam body. Atribut yang sering digunakan adalah :

Atribut KegunaanBackground Alamat (URL) gambar yang akan digunakan

sebagai latar belakang halaman web. Gambar yang dapat dijadikan background biasanya mempunyai format .jpg, .gif dan .bmp.

Bgcolor Warna yang akan dijadikan sebagai background. Anda dapat memberikan nama konstanta atau nilai RGB untuk atribut ini.

Text Warna teks di dalam body. Anda dapat

8



memberikan nilai RGB atau nama konstanta warna

Link Warna teks yang dijadikan link ke halaman lain atau ke bagian lain dalam satu halaman.

Alink Warna teks link yang sedang diakses (link aktif)Vlink Warna link yang telah dikunjungi, telah diklik.Bgproperties Biasanya bernilai “fixed” dan hanya dapat

diterapkan untuk browser Internet Explorer. Penggunaan atribut ini membuat background tidak bergerak saat halaman web di-scroll.

Percobaan:1. Ketiklah kode HTML di bawah ini kemudian simpan di

folder anda dengan nama c3.html

<HTML> <HEAD> </HEAD> <BODY bgcolor=black text=#FFFF00 link=white> Teks ini berwarna kuning <br> Klik link ini untuk pindah ke file c4.html <br> <a href="c4.html">Pindah ke file c4.html</a> </BODY></HTML>

2. Bukalah file yang anda buat dan amati hasilnya.Jika ditampilkan pada browser maka akan terlihat seperti berikut:

Gambar 1.4 Penggunaan atribut body

Tag <font>Digunakan untuk memberikan format default terhadap teks dan memiliki atribut sebagi berikut:

9



Atribut KegunaanColor Mengubah warna huruf, dapat berupa nilai RGB

maupun konstanta warna.Face Mengubah jenis font yang digunakanSize Mengubah ukuran huruf, dapat dalam ukuran

konstanta, pixel (px) atau point (pt)

Konversi nilai konstanta ukuran huruf ke point adalah

Nilai Konstanta

Nilai Point

1 8 pt2 10 pt3 12 pt4 14 pt5 18 pt6 24 pt7 36 pt

Percobaan:1. Ketiklah kode HTML di bawah ini kemudian simpan di

folder anda dengan nama c4.html<HTML><HEAD> <TITLE> Font </TITLE></HEAD><BODY> <font face=arial color=black size=6> Ini arial 6 warna hitam </font> <p> <font face=arial size=2 color=black> Ini arial 2 warna hitam</font> <p> <font size=7 face=verdana color=red> Ini verdana 7 warna merah </font> <p> <p> <font size=4 color=#000000 face=Courier New> Ini Courier New 4 warna hitam </font> <p> <font size=7pt color=yellow> Huruf default 7 point warna kuning </font> <p> <font size=3pt>Huruf default 3 point</font></BODY>

10



</HTML>

2. Bukalah file yang anda buat dan amati hasilnya.Jika ditampilkan pada browser maka akan terlihat seperti berikut:

Gambar 1.5 Penggunaan tag <font> & atributnya

HeadingHeading digunakan untuk membuat teks dengan ukuran

tertentu. Terdapat 6 tingkatan heading, yaitu h1, h2, h3, h4, h5 dan h6. tag h1 memberikan teks berukuran paling besar dibanding tag <h> lain dan <h6> menghasilkan teks terkecil.

Contoh :

<HTML><HEAD> <TITLE> Tag Body </TITLE></HEAD><BODY bgcolor=black text=yellow> <h1>teks heading no. 1</h1> <h2>teks heading no. 2</h2> <h3>teks heading no. 3</h3> <h4>teks heading no. 4</h4> <h5>teks heading no. 5</h5> <h6>teks heading no. 6</h6></BODY></HTML>

11



Gambar 1.6 Penggunaan heading

Latihan:Setelah Anda mempelajari dan melakukan percobaan di atas, mudah bukan?Sekarang, coba Anda kerjakan latihan berikut ini.Latihan 1 Tulis kode HTML berikut dan simpan dengan nama Lat1.html

<html><head> <title>Halaman Web 1</title></head><body> <p align="center"> <b><font size="4" color="#0000FF"> Halaman Web 1 </font> </b> </p> <p align="justify"><font size="2" face="Arial">Halaman web ini dibuat untuk menyelesaikan praktikum Web I. Praktikum ini menyenangkan karena asisten ganteng dan cantik. Ini merupakan praktikum pertama, semoga saya dapat mengikutinya dengan baik dan tentu saja berharap nilai yang baik.</font></p> <p align="left"> <font face="Arial" size="2"> Sesama praktikan dilarang naksir !</font></p></body></html>

12



Latihan 2 Tulis kode HTML berikut dan simpan dengan nama Lat2.html

<html><head> <title>Halaman web 2</title></head><body text="#000080" bgcolor="#C0C0C0"> <p align="center"> <b><font face="Verdana" size="5" color="#0000FF"> Halaman Web 2</font></b></p> <p> Halaman ini merupakan ke lanjutan halaman sebelumnya. </p> <hr noshade color="#800080" width="95%" size="3"></body></html>

Kemudian Amati hasil dari latihan yang telah Anda kerjakan!Mudah Bukan???.

Laporan: Buatlah sebuah halaman website menggunakan

penggabungan dari beberapa tag yang telah Anda pelajari pada praktikum 1. (Bawalah file yang telah Anda buat pada pertemuan berikutnya).

Buatlah ringkasan materi tentang tag list/daftar (<li>, <ul>, <ol>)Dan buatlah tampilan seperti berikut ini!

13



Buatlah ringkasan tentang berbagai istilah dalam dunia Internet! Anda bisa mencarinya diberbagai sumber : buku, internet, dll. (Dikumpulkan pada pertemuan berikutnya dalam bentuk Print Out).

Pelajari materi Praktikum 2!

Catatan :Jangan lupa membawa file latihan Praktikum 1 pada pertemuan berikutnya.

14



PraktikumPraktikum

2HTML Lanjut

Tujuan: Memahami konsep Link, Table, Form dan Frame.

Mampu membuat link, form, mengatur tampilan dengan menggunakan table dan frame.

Persiapan: Menjalankan editor perintah HTML berupa Notepad atau

Dreamweaver dalam mengikuti Percobaan yang diberikan sesuai dengan urutannya.




Hasil: Mahasiswa dapat mengerti konsep link, form, table, dan frame

serta mampu menggunakannya dalam membuat sebuah/beberapa halaman web.

Teori:

1. Konsep LinkLink atau hubungan, dalam antar bagian di dalam satu

halaman atau hubungan antar halaman merupakan layanan dasar yang harus disediakan oleh web site. Saat menjelajah berbagai web site di Internet, akan sulit sekali mencari halaman web tanpa link. Semua teks atau gambar di halaman web yang jika diklik dapat memindahkan anda ke bagian atau halaman lain dinamakan dengan teks link atau hyperlink.Bentuk dasarnya adalah : (href = Hipertext REFerence)

15



<a href=tujuanlink> Teks link</a>Terdapat berbagai bentuk link, yaitu :1. Link dari satu halaman atau file ke halaman lain yang berada

di dalam satu direktori. Artinya file asal dan tujuan lokasinya sama. Link akan berbentuk :

<a href=“nama_file.html”>Teks link</a>

2. Link ke file tujuan yang terletak di direktori lain, berbentuk :

<a href=“nama_direktori/nama_file.html”>Teks link</a>

Misalnya : <a href=“c:/webku/test/test1.html”>

Jika direktori tujuan berada tepat diatas direktori asal maka dapat ditulis dengan menyertakan dua titik diikuti nama direktori dan nama file tujuan :

<a href=“../nama_direktori/nama_file.html>Teks link</a>

3. Seperti dua kasus diatas, link juga dapat ditujukan ke suatu halaman web di Internet. Anda hanya perlu menyebut alamat dan nama file tujuan (URL), misalnya :

<a href=”http://www.yahoo.com”>Yahoo</a>

atau

<a href=”http://kuliah.topcities.com/web.html”>

Kuliah Web I </a>

Jika file tujuan adalah index.html atau file lain yang dijadikan index maka nama file boleh tidak disebutkan. Misalnya anda akan menuju www.google.com/index.php maka cukup ditulis www.google.com.

4. Link ke suatu alamat email. Link model ini akan membuat email client dan dapat digunakan untuk mengirim email ke tujuan link. Bentuknya adalah

<a href=“mailto:[email protected]”>Teks link</a>

5. Terakhir, link juga dapat diterapkan di dalam satu halaman web. Katakanlah anda membuat sebuah halaman web yang terdiri dari beberapa bagian. Anda dapat membuat link pada bagian atas halaman untuk memudahkan anda berpindah ke bagian tertentu.

Terdapat dua langkah untuk membangun halaman dengan fasilitas ini

1. Buat halaman web dan tandai (bookmark) bagian-bagian tujuan link dengan anchor <a name=namabagian></a>

16



2. Buat link pada bagian atas atau bagian lain halaman dan tujukan ke bagian tertentu, berbentuk

<a href=”#namabagian”>Teks link</a>

Jika tujuan link adalah bookmark pada halaman lain maka bentuk link menjadi

<a href=”namafile.html#namabagian”>Teks link</a>

2. GambarDalam halaman web, gambar dapat digunakan hanya

sebagai gambar yang sederhana, sebagai sebuah link ke halaman lain, sebagai sebuah imagemap yang berisi banyak link, bahkan sebagai pemisah antar satu bagian dokumen dengan bagian lainnya. Adanya gambar (image) membuat halaman web semakin ramai dan menyenangkan pengunjung.

Dalam HTML gambar atau grafik dimasukkan ke dokumen menggunakan tag <img>. Gambar-gambar yang dapat dimasukkan ke dalam dokumen web diantaranya adalah file gambar berformat .jpg, .jpeg, gif dan .bmp.

Tag <img> memiliki beberapa atribut, yaitu :

Atribut Kegunaansrc=url Untuk menentukan alamat URL dimana file

grafik yang akan ditampilkan berada

align=type Untuk menentukan posisi peletakan (alignment) sebuah gambar di dalam halaman web.Nilai Type = Top, Middle, Baseline, Bottom, Center

alt=teks Untuk memberikan suatu string alternatif yang akan tampil jika image (gambar) tidak dapat ditampilkan.

border=bilangan

Untuk menentukan lebar border (bingkai) dalam ukuran pixel yang mengelilingi gambar. Nilai default atribut ini adalah nol yang berarti tidak berbingkai.

height=bilangan atau %

Untuk menentukan tinggi gambar dalam ukuran pixel atau persentase dari tinggi image asli, nilai default adalah sama dengan ukuran image asli.

width= bilangan atau %

Untuk menentukan lebar gambar dalam ukuran pixel atau persentase dari lebar image asli, nilai default adalah sama dengan ukuran image asli.

hspace=bilangan

Untuk menentukan jumlah spasi dalam ukuran pixel terhadap elemen web lain baik sebelah

17



kiri maupun kanan.

vspace=bilangan

Untuk menentukan jumlah spasi dalam ukuran pixel terhadap elemen web lain baik atas maupun bawah.

3. TableTag-tag pembuatan tabel pada dokumen HTML pada

awalnya dikembangkan untuk menyajikan baris dan kolom data berbentuk tabular. Perancang web kemudian dengan cepat menggunakan tag-tag tabel tersebut dalam membentuk layout halaman web. Tabel memungkinkan anda membuat kolom-kolom teks dan mengatur ruang antara elemen-elemen. Jadi, memanfaatkan tabel, anda dapat mendesain sebuah halaman web yang berkualitas, bukan sekedar untuk menampilkan data dalam bentuk tabel.

Penulisan/syntaknya adalah sebagai berikut:<table> <tr>

<td></td>

</tr></table>Tabel didefinisikan dengan cara menyatakan baris2 dan kolom2.Tag untuk penanda baris adalah <tr> definisi baris </tr>Tag untuk penanda kolom adalah <td> data </td>

Contoh 1 :<html><head>

<title>Belajar Membuat Tabel</title></head><body><table border="1"> <tr> <td>aaa</td> <td>bbb</td> <td>ccc</td> </tr> <tr> <td>ddd</td> <td>eee</td> <td>fff</td> </tr>

18



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

Hasil yang diperlihatkan adalah

Contoh 2 :<html><head><title>Belajar Membuat Tabel</title></head><body><table border="5" cellpadding="5" cellspacing="10"

bordercolor="#111111" width="59%"> <tr> <td width="23%">Baris 1 Kolom 1</td> <td width="77%" colspan="2" bgcolor="#66CCFF">

<b>Baris 1 Kolom 2</b></td> </tr> <tr> <td width="23%">Baris 2 Kolom 1</td> <td width="22%">Baris 2 Kolom 2</td> <td width="55%">Baris 2 Kolom 3</td> </tr> <tr> <td width="45%" colspan="2" rowspan="2"

bgcolor="#FFCC99">Baris 3 Kolom 1 </td> <td width="55%" bgcolor="#008080">

<font color="#FFFFFF">Baris 3 Kolom 3</font> </td> </tr> <tr> <td width="55%">Baris 4 Kolom 3</td> </tr></table></body></html>

Deretan kode HTML di atas menghasilkan tampilan sebagai berikut:

19



Gambar 2.1 Penggunaan tag <table> dengan atribut colspan & rowspan

Contoh 3 :<table border="1" width="500"> <tr> <td>Header kiri</td> <td align="center" width="50%">Header tengah</td> <td align="right">Header kanan</td> </tr> <tr> <td valign="top" rowspan="2">Menu kiri</td> <td align="center" colspan="2" height="200">Bagian

Isi</td> </tr> <tr> <td align="center">Footer tengah</td> <td align="right">Footer kanan</td> </tr></table>Deretan kode HTML di atas menghasilkan tampilan sebagai

berikut:

20



Gambar 2.2 Penggunaan tag <table> untuk menata letak/layoutCatatan : Ada banyak sekali atribut-atribut yang digunakan dalam tag <table>, untuk mampu menguasainya, Anda diharapkan mempelajari nya sendiri.

4. FormJika Anda ingin pengunjung website Anda bisa berinteraksi

(memberikan masukan) kepada Anda, maka Anda bisa menggunakan Form (Formulir).Sintaks dasar dari form adalah :

<form method="POST" action="namaprogram">bagian ini berisi bagian dokumen HTML yang akan menggambarkan formulir isian dengan susunan sejumlah elemen input berbagai jenis

</form>

Contoh sebuah form sederhana untuk meminta nama user :

<form method="POST" action="proses.php"> Ketikkan nama Anda: <br> <input type="text" name="nama" id="nama"><br> <input type="submit" value="Kirim"></form>

21



Hasilnya adalah sebagai berikut :

Tag InputKarakteristik data input

o Teks satu baris (single-line text) <input type="text">

o Teks banyak baris (multi-line text) <textarea></textarea>

o Teks rahasia (password) <input type="password">

o Pilihan tunggal (single selection) <input type="radio">, <select></select>

o Pilihan majemuk (multiple selections)<select multiple> </select>

o Check (on/off) <input type="checkbox">

o Aksi user melalui penekanan tombol <input type="submit">, <input type="reset">,<input type="button">, <button></button>

Tag TextareaPenulisan:<textarea name="nama" rows="b" cols="k">

nilai</textarea>nilai : nilai defaultrows : banyaknya baris yang ditampilkan (tinggi)cols : banyaknya kolom/karakter yang ditampilkan (lebar)

Tag Select<select name="nama" multiple size="r"> <option value="nilai1" selected>teks1</option> <option value="nilai2">teks2</option> … </select>multiple : jika disebutkan maka pilihan boleh lebih dari satu (sambil menekan tombol Ctrl)size : banyaknya baris pilihan yang ditampilkan (default=1)selected : jika disebutkan maka defaultnya dalam keadaan terpilih

Tag Button

22



<button type="jenis" name="name" value="nilai"> tampilan</button>type : submit, reset, buttontampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol.

Contoh 1:<form method="POST" action="proses.php"> Silahkan isi data Anda <table border="1"> <tr> <td><label for="nama">Nama lengkap:</label></td> <td><input type="text" name="nama" id="nama"

maxlength="40" size="20"></td> </tr> <tr> <td><label for="pass">Password:</label></td> <td><input type="password" name="pass" id="pass" maxlength="8" size="8"></td> </tr> <tr> <td><label for="jenkel">Jenis kelamin:</label></td> <td><input type="radio" name="jenkel" id="jenkel" value="L">Laki-laki<br> <input type="radio" name="jenkel" id="jenkel" value="P">Perempuan</td> </tr> <tr> <td><label for="alamat">Alamat:</label></td> <td><textarea rows="3" cols="30" name="alamat" id="alamat"></textarea></td> </tr> <tr> <td><label for="bayar">Sudah bayar?</label></td> <td><input type="checkbox" name="bayar" id="bayar">Sudah</td> </tr> </table> <input type="submit" value="Kirim"> <input type="reset" value="Reset"></form>Hasilnya adalah sebagai berikut :

23



Gambar 2.3 Contoh penggunaan Form pada halaman Web

5. Menggunakan Frame Frame adalah suatu cara membagi jendela browser dalam

beberapa sub jendela yang lebih kecil yang masing-masing menampilkan dokumen HTML berbeda. Dengan frame, anda dapat membuat sebuah halaman web seperti sebuah buku lengkap dengan daftar isinya. Daftar isi berada di sebelah kiri dan setiap kali anda klik salah satu baris dalam daftar isi, rinciannya akan anda temui pada sisi kanannya.

Frame & Frameseto Lebih dari satu dokumen dapat ditampilkan secara

bersamaan dalam satu tampilano Setiap dokumen ditampilkan dalam sebuah frameSebuah

frameset menentukan tata letak, ukuran, dan banyaknya frame yang akan ditampilkan

o Di dalam frameset boleh ada frameset lain (beranak)o Dibutuhkan satu dokumen tersendiri yang berisi definisi

frameset. Dokumen tersebut tidak mempunyai isi dokumen (tidak ada <body> </body>)

Skema dasar dokumen frameset :<html> <head>

<title>Judul dokumen</title> </head>

24



<frameset> <frame src="namafile1"> <frame src="namafile2"> ...dst (atau frameset yang lain)

<noframes>bagian ini ditampilkan jika browser tidak

mendukung frame

</noframes> </frameset></html>

Contoh :<html> <head> <title>Document Frameset</title> </head> <frameset cols="33%,43%,23%" frameborder="1"> <frameset rows="*,200"> <frame src="page1.html" name="satu" scrolling="no" frameborder="0"> <frame src="page2.html" name="dua" scrolling="yes" noresize> </frameset> <frame src="page3.html" name="tiga" frameborder="0"> <frame src="page4.html" name="empat" frameborder="1"> <noframes> Ada 4 halaman : <ol> <li><a href="page1.html">Halaman 1</a></li> <li><a href="page2.html">Halaman 2</a></li> <li><a href="page3.html">Halaman 3</a></li> <li><a href="page4.html">Halaman 4</a></li> </ol> </noframes> </frameset></html>

Hasilnya adalah sebagai berikut :

25



Gambar 2.4 Tampilan halaman web menggunakan frame

Iframe (inline frame)Konsep iframe:o Di dalam sebuah dokumen (induk) dapat ditampilkan satu

atau beberapa dokumen lain (anak)o Setiap dokumen (anak) yang disisipkan diletakkan dalam

sebuah iframeo Dokumen induk merupakan dokumen biasa yang

mempunyai isi dokumen

Skema dasar dokumen dengan iframe :<html>

<head> <title>Judul dokumen</title></head><body> …isi dokumen… <iframe src="namafile">

Ini adalah isi halaman yang ingin disisipkan

</iframe> …isi dokumen…

</body></html>

Contoh :<html> <head> <title>Kisah Sekolah</title> </head> <body> <h1>Kisah-kisah di sekolah</h1>

26



Masa sekolah adalah masa yang menyenangkan bagiku. Sebagian besar waktu hidupku sampai saat ini dihabiskan untuk sekolah, dan aku sangat menikmati saat-saat itu. Inilah sebagian kisah-kisahku di sekolah.<p> <iframe width='200' height='179' src='sd.html'> <a href="sd.html">Kisah SD</a> </iframe> <iframe width='200' height='179' src='smp.html' frameborder='0'> <a href="smp.html">Kisah SMP</a> </iframe> <iframe width='200' height='179' src='smu.html' scrolling='no'> <a href="smu.html">Kisah SMU</a> </iframe> <p>Semua pengalaman dan teman-teman yang kudapat sungguh sangat mewarnai hidupku dan memberikan pengaruh besar terhadap diriku. </body></html>

Catatan : Anda harus memiliki file sd.html, smp.html & smu.html dan disimpan dengan folder yang sama dengan file diatas.Hasilnya adalah sebagai berikut :

Gambar 2.5 Tampilan halaman web menggunakan iframe

Percobaan:Lakukan setiap perintah / petunjuk yang ada pada percobaan berikut ini!

Percobaan 1

27



o Buka kembali file Lat1.html pada Praktikum 1 dan tambahkan baris-baris berikut pada bagian bawah tepat sebelum </body>

<a href="Lat2.html">Menuju ke file Lat2.html</a>Buka web browser, panggil file Lat1.html dan klik link yang dihasilkan. Apa yang terjadi ?

o Buka file Lat2.html Praktikum 1 dan berikan kode berikut tepat sebelum tag <body>

<a href=Lat1.html>Menuju ke file Lat1.html</a>

Panggul file Lat1.html dengan web browser. Klik link pada Lat1.html dan Lat2.html. Bagaimana ?

Percobaan 2Penggunaan file gambar dan link dengan gambar.Buatlah kode HTML dibawah ini dan simpan dengan nama Lat2Perc2.html

<html> <head> <title>..:: Bermain dengan Image ::..</title> </head> <body> <hr noshade color="#0000FF" width="90%" size="3"> <p>Image <img border="1" src="xxx.jpg" align="baseline" hspace="1" vspace="2" width="140" height="200" alt=”Gambar XXX yang bagus”> Image <img border="3" src="xxx.jpg" align="center" hspace="0" width="140" height="200"> Image <img border="0" src="yyy.jpg" align="top" hspace="0" width="153" height="219"> <p> Ini Gambar Untuk Link ke Lat1.html<br> <A HREF="Lat1.html"><IMG SRC="gambar.gif"></A> </body></html>

Catatan : Ganti file xxx.jpg, yyy.jpg dan gambar.gif dengan nama file gambar yang Anda miliki.

Percobaan 3Buatlah kode HTML dibawah ini dan simpan dengan nama Lat2Perc3.html.

<html><head>

28



<title> :: Menggunakan Table :: </title></head><body><center> <table border="1" width="90%" height="287" cellspacing="0" cellpadding="0" bordercolor="#000000"> <tr> <td width="12%" align="center" height="257" rowspan="3" bgcolor="#FFFFFF"> </td> <td width="53%" colspan="2" align="left" valign="top" height="110" bgcolor="#FFFFFF"> </td> <td width="99%" align="left" valign="top" height="110" bgcolor="#FFFFFF"> </td> </tr> <tr> <td width="31%" align="left" valign="top" height="128" bgcolor="#FFFFFF"> </td> <td width="121%" align="left" valign="top" colspan="2" height="128" bgcolor="#FFFFFF"> </td> </tr> <tr> <td width="31%" align="left" valign="top" height="19" bgcolor="#FFFFFF"> </td> <td width="121%" align="left" height="19" valign="bottom" colspan="2" bgcolor="#FFFFFF"> </td> </tr> </table> </center></body></html>

Setelah itu buka dan perhatikan hasilnya. Anda bisa mengatur dan menambahkan warna, teks, gambar dan lain-lain seperti pada gambar berikut ini.

29



Gambar 2.6 Tampilan halaman web menggunakan <table>

Laporan: Buatlah sebuah halaman utama (index.html) web dan beberapa

halaman lainnya dan lakukan hubungan / link dengan halaman2 yang telah anda buat. (Anda bisa membuatnya dengan tag-tag yang telah kita pelajari mulai dari praktikum 1 & 2 kemudian atur tampilan/layout menggunakan tag <table>)!

Pelajari Mmateri Praktikum 3

30



PraktikumPraktikum

3Editing Web Dengan Dreamweaver

Tujuan: Memahami perintah dasar menu Dreamweaver.

Mampu membuat / mendesain halaman web dengan menggunakan dreamweaver.

Persiapan: Menjalankan Macromedia Dreamweaver dalam mengikuti

Percobaan yang diberikan sesuai dengan urutannya.




Hasil: Mahasiswa dapat mengerti cara menggunakan Macromedia

Dreamweaver serta mampu menggunakannya dalam mendesain website.

Teori:Dreamweaver dari Macromedia merupakan salah satu

software web authoring terbaik saat ini. Meskipun dari sisi kemudahan terasa bahwa Frontpage dari Microsoft lebih unggul tetapi berbagai fasilitas seperti Layer dan CSS sangat jarang ditemui di software web authoring lain, termasuk pada Frontpage.

Anda telah belajar bagaimana membuat halaman web dengan cara langsung menulis tag-tag HTML dan ini tentu sangat melelahkan. Nah, web authoring seperti Dreamweaver sangat membantu dalam proses pengembangan halaman web. Anda tidak harus mengetik tag-tag HTML secara langsung, anda dapat menggunakan Dreamweaver semudah anda mengetik dokumen biasa, mengatur layout dan formatnya, semua semudah menggunakan Word Processor. Apakah anda menulis tag HTML ?

31



ya...tidak secara langsung, Dreamweaver telah melakukannya untuk anda.

Menjalankan Dreamweaver

Sebelum memulai pekerjaan mendesain halaman web menggunakan Dreamweaver, anda tentunya harus menjalankan software tersebut terlebih dahulu, yaitu sebagai berikut :

a. Klik tombol Start

b. Pilih All Programs

c. Pilih Macromedia

d. Klik Macromedia Dreamweaver MX

Akan muncul tampilan seperti berikut:

Gambar 3.1 Tampilan utama dreamweaver

Pada bagian bawah halaman utama Dreamweaver terdapat sebuat kotak berisi berbagai macam fasilitas untuk mengatur Layout. Kotak tersebut dinamakan dengan Property :

32



Gambar 3.2 Tampilan property dreamweaver

Anda tentu sudah tak asing lagi dengan fasilitas di atas, hampir sama dengan fasilitas yang terdapat pada kebanyakan word prcessing. Pada bagian atas kotak Property terdapat fasilitas pengaturan font, font-size, font-color, font-style, text-alignment, penambahan link, penentuan target link, bullet dan numbering. Sedangkan pada bagian bawah terdapat fasilitas pengaturan sel pada suatu tabel mencakup pengaturan aligment vertikal dan horisontal, tinggi dan lebar sel, no-wrap, header, warna background, warna border, dan gambar background.

Gambar Property di atas tersedia untuk obyek tabel. Perlu anda ketahui bahwa dalam pengaturan layout kotak Property tersebut akan sangat sering anda gunakan.

Percobaan:Membuat Halaman Web

Anda akan belajar membuat halaman web seperti di bawah ini :

33



Halaman web yang anda lihat di atas adalah hasil akhir pekerjaan yang ditampilkan oleh browser Internet Explorer. Halaman web tersebut dibuat menggunakan Dreamweaver dengan fasilitas tabelnya. Sesungguhnya, saat anda melakukan pengembangan halaman di atas, Dreamweaver membuat beberapa baris tag HTML yang berisi tag <table> dan didalamnya terdapat beberapa tag <tr> dan <td>. Anda dapat melihat kode HTML yang dihasilkan oleh halaman web yang anda buat.

Berikut ini adalah cara membuat halaman web di atas, lakukanlah langkah-langkah berikut:

1. Pembuatan Tabel Utama

Tabel utama adalah tabel yang akan menampung tabel-tabel lain yang akan membentuk layout halaman web menjadi lebih baik. Langkah-langkah pembuatan tabel utama adalah :

1. Jalankan DreamWeaver

2. Pembuatan halaman web di atas memerlukan tabel dengan 3 kolom dan 3 baris. Karena ini anda harus memasukkan tabel dengan kriteria tersebut, detailnya adalah sebagai berikut :

a. Klik menu Insert

b. Klik Table (Ctrl + Alt + T)

c. Pada kotak dialog Insert Table yang tampil isikan seperti pada gambar berikut :

Perhatikan nilai yang diberikan :

Rows : 3 Tabel yang dibuat memiliki 3 baris

Columns : 3 Tabel yang dibuat memiliki 3 kolom

Width : 80 percent Tabel yang dibuat lebarnya 80 % dari lebar jendela browser web. Anda dapat mengganti ukuran width dalam pixel, tidak dalam percent, misalnya 600 pixels. Penggunaan ukuran pixel akan membuat situs anda memiliki ukuran mati,

34



seberapa pun lebarnya jendela browser web tidak akan mengubah ukuran halaman web ditampilkan. Penggunakan ukuran persen mengakibatkan disesuaikannya lebar halaman web mengikuti lebar jendela browser.

• Cell Padding : 4 Pada tabel yang dibuat, jarak antara isi sel dengan border sel (batas sel) adalah 4 pixel. Pemberian nilai 0 menyebabkan tidak ada jarak antara teks (atau isi sel lain) dengan garis batasnya dan ini membuat pembacaan dokumen web menjadi tidak nyaman.

• Cell Spacing : 0 Pada tabel yang dibuat, jarak antara satu sel dengan sel lainnya adalah 0 pixel atau tidak ada jarak, sehingga jika dua sel yang bersebelahan diberi warna background sama maka akan terlihat bahwa dua sel tersebut menyatu, tidak ada jarak.

d. Klik OK

Berikut ini adalah tabel utama yang dihasilkan :

Perhatikan kotak Property dan ubah nilai atribut Align menjadi Center sehingga tabel yang lebarnya 80 % tersebut akan ditampilkan tepat di tengah jendela browser :

Blok semua sel pada tabel dan ubah nilai atribut Vertical Alignment (Vert) menjadi Top, artinya semua isi teks akan dimulai dari baris teratas.

2. Menggabungkan dua sel

35



Setelah tabel utama terbentuk, atribut align dan cell vertical aligment diubah nilainya maka proses penggabungan sel dapat segera dilakukan. Sel yang harus digabung (merge) adalah sel (1,1) dengan (2,1) dan sel (1,3), (2,3) dengan (3,3). Bentuk penulisan sel adalah (x,y), dimana x adalah nomor kolom dan y adalah nomor baris. Jadi sel (1,3) menunjukkan sel pada kolom pertama baris ketiga.

Langkah-langkah me-merge sel adalah :

1. Blok sel-sel yang akan di-merge, dalam hal ini adalah sel (1,1) dan (2,1)

2. Klik kanan tepat di atas sel yang diblok

3. Pilih Table

4. Klik Merge Cells

Lakukan hal yang sama untuk sel (1,3), (2,3) dan (3,3).

Proses merge sel-sel tabel memberikan hasil berikut ini :

Catatan:

Anda juga dapat me-merge sel dengan cara berikut :

1. Blok sel-sel yang akan di-merge (disatukan, digabung)

2. Klik menu Modify

3. Pilih Table

4. Klik Merge Cells (Ctrl + Alt + M)

3. Menulis isi sel

Sel dapat berisi bermacam-macam elemen : teks, gambar bahkan video. Anda harus menuliskan teks pada sel (1,1) dan (3,1). Cara menulis teks sangat mudah, letakkan kursor pada sel yang akan ditulis kemudian tulis apa yang anda inginkan.

Satu hal yang harus anda perhatikan adalah penulisan karakter khusus. Contoh halaman web di atas menyertakan sebuah karakter khusus Registered (®). Cara menyisipkan karakter tersebut adalah sebagai berikut :

1. Tampatkan kursor dimana karakter khusus akan ditempatkan

2. Klik menu Insert

36



3. Pilih Special Characters

4. Klik salah satu karakter khusus yang tersedia, misalnya Registered.

5.

Catatan

Anda harus mengatur format penulisan menggunakan kotak Property. Anda dapat mengubah jenis huruf, ukuran, style, warna dan alignment teks yang ditulis. Anda juga dapat memberikan warna tertentu terhadap suatu sel.

Pada bagian ini anda juga harus mengubah warna latar belakang suatu sel, sesuai tujuan halaman web yang diinginkan. Warna background sel yang harus diubah adalah sel (1,1), (2,1), (1,2), dan (1,3).

Cara mengubah warna background adalah :

1. Pilih sel yang akan di-ubah warnanya

2. Pada kotak Property, klik atribut Bg (Background Color), tepatnya pada warna palletnya :

klik disini

3. Pilih salah satu warna yang anda inginkan, misalnya hitam

Perhatikan perubahan pada sel yang dipilih

4. Lakukan untuk sel-sel yang lain.

Sejauh ini, hasil pekerjaan anda akan tampak sebagai berikut :

4. Menyisipkan tabel baru

Anda harus memasukkan tiga tabel baru ke dalam tabel utama. Tabel baru pertama diletakkan pada sel (1,2) dan tabel kedua serta ketiga pada sel (3,2). Khusus untuk sel (3,2) anda harus menekan enter beberapa kali sebelum memasukkan 2 tabel ke sel tersebut. Hal ini dilakukan agar anda dapat memasukkan lebih dari satu tabel ke dalam satu sel, dapat menempatkan elemen HTML lain seperti teks di antara dua tabel

37



dan tentu saja agar dua tabel tidak bersatu, karena terdapat elemen pemisahnya.

Cara menyisipkan tabel baru adalah :

1. Tempatkan kursor pada sel yang akan ditempati tabel baru, misalnya sel (1,2)

2. Klik menu Insert

3. Klik Table

4. Pada kotak dialog Insert Table, isikan nilai-nilai seperti pada gambar berikut :

Pemberian nilai Width : 100 percent akan membuat tabel baru di dalam sel (1,2) mempunyai lebar maksimal, menyesuaikan lebar sel (1,2). Atribut Cell Spacing sengaja diberi nilai 1 sehingga antar satu sel dengan sel lainnya akan terdapat jarak sebesar 1 pixel.

Klik OK

5. Lakukan hal yang sama untuk sel (3,2).

Selanjutnya anda dapat memberikan teks di dalam sel-sel tabel baru, mengubah warna teks tersebut, mengubah warna latar belakang sel, mengatur alignment, dan lain-lain. Anda juga dapat menulis apa yang anda inginkan pada sel-sel tabel utama, misalnya menulis keterangan situs web pada sel (2,2).

Setelah melakukan beberapa hal pada bagian ini, harusnya anda telah mendapatkan halaman web sebagai berikut :

38



5. Menambah Link

Pada tabel baru pertama, anda menulis 5 baris teks, 1 baris pada tiap sel. Teks tersebut dapat kita sebut sebagai menu atau link di dalam halaman web yang anda buat. Seperti telah anda ketahui, link adalah salah satu bentuk yang mengaitkan halaman web ini (sebut saja sebagai halaman utama) ke halaman web lain, dalam hal ini misalnya halaman web yang menampilkan informasi tentang Web, Delphi, Linux, dan Jaringan yang masing-masing disimpan pada file HTML terpisah.

Katakanlah anda menyimpan file halaman web utama ini dengan nama index.html, maka anda sebenarnya juga harus memiliki file-file delphi.html, web.html, viasual basic.html dan jaringan.html, misalnya.

Berikut ini adalah cara memberikan link ke suatu teks :

1. Blok teks yang akan diberi link, misalnya Utama. Teks ini akan me-link halaman web yang aktif ke halaman utama, ini sangat berguna saat anda menjelajah halaman lain dan ingin kembali ke halaman utama, file index.html.

2. Klik menu Modify

3. Klik Make Link (Ctrl + L)

4. Pada kotak dialog Select File pilih file tujuan link atau ketik nama file halaman web atau alamat URL-nya. Dalam contoh ini, karena file utama disimpan dengan nama index.html, maka anda dapat memilih file index.htm atau mengetik namanya di bagian File name atau URL.

39



5. Klik Select

6. Lakukan hal yang sama untuk teks Web, Delphi, visual basic dan Jaringan, tentunya dengan file tujuan link yang berbeda.

Latihan:1. Lakukan modifikasi pada file yang telah Anda buat pada

percobaan dan tambahkan file gambar kedalamnya.

2. Kemudian coba lakukan hubungan (link) lewat file gambar tersebut (seperti yang telah Anda pelajari pada praktikum sebelumnya)

Laporan: Pelajari Macromedia Dreamweaver dan buatlah halaman

seperti di atas. (tampilan sesuai dengan keinginan Anda)

Buatlah tutorial tentang Template pada Dreamweaver dan cara membuatnya (dikumpulkan dalam bentuk ptint out).

40


modul html dasar dan pengenalan dreamweaver

Documents