Modul HTML Dasar Dan Pengenalan Dreamweaver

Modul Praktikum Web Sekolah Tinggi Informatika dan Komputer Indonesia http://www.stiki.ac.
.id Team Penyusun: 1smail, Bhuedies, Chris, Shelly
Praktikum
1
Konsep 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 Web
Internet 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
Modul Praktikum Web Sekolah Tinggi Informatika dan Komputer Indonesia http://www.stiki.ac.id Team Penyusun: 1smail, Bhuedies, Chris, Shelly
diibaratkan sebagai sebuah buku yang terdiri dari halamanhalaman tertentu, termasuk cover, daftar isi, dan sebagainya. KONSEP DOMAIN NAME & URL Domain 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 Side

Dalam 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 Languange Client 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 Languange Seperti 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 Server Bahasa 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 untuk sistem operasi yang berbasis NT, yaitu Win2000 dan WinXP.
3.
Protokol Web
Protocol 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 HTML
HTML adalah singkatan dari Hypertext Markup Language. Gunanya arahan HTML di dalam sebuah dokumen Web adalah untuk mengatur struktur tampilan dokumen tersebut dan juga 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
<html> <head> <title>
Kegunaan
menandai awal dan akhir dokumen HTML menandai bagian header dokumen HTML Membuat judul halaman web, tampil di title bar web
<body> <h1> <br> <p>
<b> <i> <u> <hr> <pre>
browser. Ditulis di antara <head> dan </head> menandai awal dan akhir isi dokumen (yang ditampilkan) Untuk membuat Judul paragraf. Memiliki nilai <h1> ... <h6> Membuat baris baru sehingga teks setelah tanda <br> berada di baris berikutnya. Membuat paragraf baru. Semua teks setelah <p> akan ditempatkan pada paragraf berikutnya. Jika anda menulis lebih dari 1 <p>, hanya <p> pertama yang diproses. Parameter : Align Menebalkan teks yang berada di antara <b> dan </b> Memiringkan teks yang berada di antara <i> dan </i> Memberikan garis-bawah pada teks yang berada di antara <u> dan </u> Membuat garis horisontal 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. Membuat text superscript. Misal membuat X 2 Membuat text subscript. Misal membuat H2O
<sup> <sub>
<font>
Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Parameter : size, face, color Untuk menampilkan sebuah file gambar. Penulisan : <img src=namafile.extensi> Untuk membuat Link Untuk menata letak (layout) isi dokumen. Untuk membuat teks/tulisan yang berada diantara <marquee> </marquee> berjalan Untuk membuat formulir.
<img> <a> <table> <marquee > <form> <input>, <textarea >, <select>
Komponen isian pada formulir.
<li>, <ol>, Memberikan penomoran <ul>
<frame>, <frameset >, <iframe> <span>, <div>
Untuk membuat frame (bingkai)
Pengelompokan elemen dokumen Tabel 1.1 Tag-tag HTML
PEWARNAAN Warna 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>
2. Bukalah file yang anda buat dan amati hasilnya.
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>
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 Center Right Left Kegunaan Teks di dalam paragraf diletakkan ditengah halaman secara horisontal Teks di dalam paragraf dibuat rata sisi kanan halaman 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 Teks di dalam paragraf dibuat rata sisi kirikanan halaman (justified)
Justify
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 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 Background Kegunaan Alamat (URL) gambar yang akan digunakan sebagai latar belakang halaman web. Gambar yang dapat dijadikan background biasanya mempunyai format .jpg, .gif dan .bmp. Warna yang akan dijadikan sebagai background. Anda dapat memberikan nama konstanta atau nilai RGB untuk atribut ini. Warna teks di dalam body. Anda dapat memberikan nilai RGB atau nama konstanta warna Warna teks yang dijadikan link ke halaman lain atau ke bagian lain dalam satu halaman. Warna teks link yang sedang diakses (link aktif) Warna link yang telah dikunjungi, telah diklik. Biasanya bernilai fixed dan hanya dapat diterapkan untuk browser Internet Explorer. Penggunaan atribut ini membuat background tidak bergerak saat halaman web di-scroll.
Bgcolor Text Link Alink Vlink Bgproperties
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:
10
Gambar 1.4 Penggunaan atribut body Tag <font>

Digunakan untuk memberikan format default terhadap teks dan memiliki atribut sebagi berikut:
Atribut Color Face Size
Kegunaan Mengubah warna huruf, dapat berupa nilai RGB maupun konstanta warna. Mengubah jenis font yang digunakan Mengubah ukuran huruf, dapat dalam ukuran konstanta, pixel (px) atau point (pt)
Konversi nilai konstanta ukuran huruf ke point adalah

Nilai Konstanta 1 2 3 4 5 6 7 Nilai Point 8 pt 10 pt 12 pt 14 pt 18 pt 24 pt 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
11
</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> </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 Heading Heading 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.
12
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>
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>
13
<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>
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!
14
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.
15
16
Praktikum
2
HTML 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.
Pekerjaan:
Hasil:
Mahasiswa dapat mengerti konsep link, form, table, dan frame serta mampu menggunakannya dalam membuat sebuah/beberapa halaman web.
Teori:
1. Konsep Link
Link 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)
17
<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:username@servermail.com>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
18
1. Buat halaman web dan tandai (bookmark) bagian-bagian tujuan link dengan anchor <a name=namabagian></a> 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. Gambar
Dalam 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 src=url align=type
Kegunaan Untuk menentukan alamat URL dimana file grafik yang akan ditampilkan berada Untuk menentukan posisi peletakan (alignment) sebuah gambar di dalam halaman web. Nilai Type = Top, Middle, Baseline, Bottom, Center Untuk memberikan suatu string alternatif yang akan tampil jika image (gambar) tidak dapat ditampilkan. Untuk menentukan lebar border (bingkai) dalam ukuran pixel yang mengelilingi gambar. Nilai default atribut ini adalah nol yang berarti tidak berbingkai. Untuk menentukan tinggi gambar dalam ukuran pixel atau persentase dari tinggi image asli, nilai default adalah sama dengan ukuran image asli. Untuk menentukan lebar gambar dalam ukuran pixel atau persentase dari lebar image asli, nilai
alt=teks border=bilang an height=bilang an atau % width= bilangan atau
19
% hspace=bilan gan vspace=bilan gan
default adalah sama dengan ukuran image asli. Untuk menentukan jumlah spasi dalam ukuran pixel terhadap elemen web lain baik sebelah kiri maupun kanan. Untuk menentukan jumlah spasi dalam ukuran pixel terhadap elemen web lain baik atas maupun bawah.
3. Table
Tag-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 kolomkolom 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>
20
<td>ddd</td> <td>eee</td> <td>fff</td> </tr> </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:
21
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:
22
Gambar 2.2 Penggunaan tag <table> untuk menata letak/layout Catatan : Ada banyak sekali atribut-atribut yang digunakan dalam tag <table>, untuk mampu menguasainya, Anda diharapkan mempelajari nya sendiri.
4. Form
Jika 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>
23
<input type="text" name="nama" id="nama"><br> <input type="submit" value="Kirim"> </form>
Hasilnya adalah sebagai berikut :
Tag Input Karakteristik 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 Textarea Penulisan: <textarea name="nama" rows="b" cols="k"> nilai </textarea> nilai : nilai default rows : 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>
24
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 <button type="jenis" name="name" value="nilai"> tampilan </button> type : submit, reset, button tampilan : 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>
25
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 & Frameset o Lebih dari satu dokumen dapat ditampilkan secara bersamaan dalam satu tampilan o Setiap dokumen ditampilkan dalam sebuah frame o Sebuah 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 :
26
<html> <head> <title>Judul dokumen</title> </head> <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>
27
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 iframe o 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>
28
<h1>Kisah-kisah di sekolah</h1> 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!
29
Percobaan 1 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 2 Penggunaan 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 3
30
Buatlah kode HTML dibawah ini dan simpan dengan nama Lat2Perc3.html.
<html> <head> <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.
31
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
32
Praktikum
3
Editing 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.
Pekerjaan:
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
33
biasa, mengatur layout dan formatnya, semua semudah menggunakan Word Processor. Apakah anda menulis tag HTML ? 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 :
34
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, textalignment, 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 :
35
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
36
percent, misalnya 600 pixels. Penggunaan ukuran pixel akan membuat situs anda memiliki ukuran mati, 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.
37
2.
Menggabungkan dua sel 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
38
2. Klik menu Insert 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
39
memasukkan lebih dari satu tabel ke dalam satu sel, dapat menempatkan elemen HTML lain seperti teks di antara dua tabel 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 :
40
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.
41
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).

Modul HTML Dasar Dan Pengenalan Dreamweaver

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul HTML Dasar Dan Pengenalan Dreamweaver

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul Praktikum Web Sekolah Tinggi Informatika dan Komputer Indonesia http://www.stiki.ac.

.id Team Penyusun: 1smail, Bhuedies, Chris, Shelly

Server Side & Client Side

Gambar 1.1 Arsitektur client-server layanan web

<body> <h1> <br> <p>

<b> <i> <u> <hr> <pre>

Komponen isian pada formulir.

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

<frame>, <frameset >, <iframe> <span>, <div>

Untuk membuat frame (bingkai)

Pengelompokan elemen dokumen Tabel 1.1 Tag-tag HTML

2. Bukalah file yang anda buat dan amati hasilnya.

Jika ditampilkan pada browser maka akan terlihat seperti berikut:

semua teks di dalam body. Atribut yang sering digunakan adalah :

Bgcolor Text Link Alink Vlink Bgproperties

Gambar 1.4 Penggunaan atribut body Tag <font>

Atribut Color Face Size

Konversi nilai konstanta ukuran huruf ke point adalah

Gambar 1.6 Penggunaan heading

<a href=tujuanlink> Teks link </a>

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

Atribut src=url align=type

alt=teks border=bilang an height=bilang an atau % width= bilangan atau

% hspace=bilan gan vspace=bilan gan

<td>ddd</td> <td>eee</td> <td>fff</td> </tr> </table> </body> </html>

Hasil yang diperlihatkan adalah

Deretan kode HTML di atas menghasilkan tampilan sebagai berikut:

Deretan kode HTML di atas menghasilkan tampilan sebagai berikut:

Contoh sebuah form sederhana untuk meminta nama user :

<input type="text" name="nama" id="nama"><br> <input type="submit" value="Kirim"> </form>

Hasilnya adalah sebagai berikut :

Hasilnya adalah sebagai berikut :

Gambar 2.3 Contoh penggunaan Form pada halaman Web

Hasilnya adalah sebagai berikut :

Gambar 2.5 Tampilan halaman web menggunakan iframe

Gambar 2.6 Tampilan halaman web menggunakan <table>

Anda mungkin juga menyukai