Praktikum Pemrograman Web.pdf
1 DESAIN HALAMAN WEB
Overview
Sebuah aplikasi web dibangun menggunakan tag HTML. Pada praktikum pertama ini akan dipelajari bagaimana membuat dokumen HTML sederhana, memformat tampilan pada dokumen HTML dan membuat list yang yang biasa kita gunakan untuk menampilkan daftar dengan urutan tertentu. Untuk praktikum ini akan menggunakan notepad sebagai HTML editornya.
Tujuan
1. Mengenal dasar-dasar HTML
2. Mengenal HTML Editor
3. Membuat dokumen HTML dan melakukan pemformatan dokumen yang
sederhana.
4. Membuat teks preformat dan karakter spesial
5. Membuat list pada dokumen HTML
6. Membuat list bersarang pada dokumen HTML
1.1 Pengenalan HTML
1.1.1 Format Penulisan Dokumen HTML
Untuk membuat suatu halaman HTML standar digunakan tag <html>, <head>, <body> beserta tag penutupnya masing-masing. Susunan tag – tag tersebut membentuk dokumen HTML sebagai berikut :
<html> <head>
... informasi tentang dokumen HTML </head> <body> ... informasi yang akan ditampilkan di web browser </body> </html>
1.1.2 Memulai Membuat Dokumen dengan Format HTML
Langkah – langkah untuk memulai membuat dokumen HTML sebagai berikut :
1. Buka notepad sebagai editor dokumen HTML.
2. Buat skrip sederhana seperti di bawah ini di notepad : Contoh 1.1 Dokumen HTML Sederhana
<html> <head>
<title>Halaman Web Pertamaku</title> </head> <body>
Ini adalah halaman web pertamaku </body> </html>
3. Simpan dokumen yang telah dibuat dengan menggunakan ekstensi .htm atau .html
Gambar 1.1 Penyimpanan Dokumen HTML
4. Untuk melihat hasil dari dokumen HTML yang telah dibuat, buka dokumen tersebut menggunakan web browser.
Judul Dokumen HTML
Informasi yang dituliskan pada tag <body>
Gambar 1.2 Hasil Eksekusi Contoh 1.1
5. Alamat file yang diakses ditunjukkan pada url. Untuk contoh diatas, url
adalah D:\WDM\TPSDP 2005\HTML\contoh_1.1.htm
yang
dimaksud
1.2 Tag – Tag Dasar HTML
1.2.1 Heading
Contoh 1.2 Menggunakan Heading
<html> <head>
<title>Menggunakan Heading</title> </head> <body>
Dokumen HTML berikut ini menggunakan heading <h1>Heading 1</h1> <h2 align=”right”>Heading 2</h2> <h3 align=”center”>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
</body> </html>
Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini :
Gambar 1.3 Hasil Eksekusi Contoh 1.2
1.2.2 Paragraf
Contoh 1.3 Memformat paragraf
<html> <head>
<title>Memformat Paragraf</title> </head> <body>
<p>Paragraf Pertama</p> <p>Paragraf pertama ini menggunakan rataan kiri.</p> <p></p> <p align=”center”>Paragraf Kedua</p>
<p align=”center”>Paragraf kedua ini menggunakan rataan tengah</p> <p></p> <p align=”right”>Paragraf Ketiga</p>
<p align=”right”>Paragraf ketiga ini menggunakan rataan kanan</p> </body> </html>
Hasil :
Gambar 1.4 Hasil Eksekusi Contoh 1.3
1.2.3 Line Break
Contoh 1.4 Menggunakan Line Break
<html>
<head> <title>Menggunakan Line Break</title> </head> <body>
Menggunakan Line Break<br><br> Dengan menggunakan line break, kita dapat memindahkan kalimat<br> setelah elemen tersebut satu baris di bawahnya.<br> seperti halnya menggunakan ENTER pada word processing.
</body> </html>
Hasil :
Gambar 1.5 Hasil Eksekusi Contoh 1.4
1.2.4 Preformatted Text
Contoh 1.5 Menggunakan Preformatted Text
<html> <head>
<title>Menggunakan Preformatted Text</title> </head> <body>
<pre> Dokumen HTML ini menggunakan Preformatted Text
Dimana informasi yang ditampilkan pada web browser
Sesuai dengan apa yang dituliskan pada editor
Apakah tag ini mempermudah penyampaian informasi Melalui dokumen HTML ?
</pre> </body> </html>
Hasil :
Gambar 1.6 Hasil Eksekusi Contoh 1.5
1.2.5 Memformat Bentuk Tulisan
Contoh 1.6 Memformat Tulisan
<html> <head>
<title>Memformat Tulisan</title> </head> <body>
<!-- membuat tulisan menjadi tebal --> <b>Tulisan ini akan tercetak tebal</b> <p> <!-- membuat tulisan menjadi miring --> <i>Tulisan ini akan tercetak miring</i> <p> <!-- menggarisbawahi tulisan --> <u>Pada tulisan ini terdapat garis bawah</u> <p> <!-- membuat superscript --> Dalam matematika, x pangkat 2 ditulis dengan X <sup>2</sup> <p> <!-- membuat subscript --> Rumus kimia untuk oxygen adalah O <sub>2</sub>
</body> </html>
Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini :
D:/dokumen/contoh_1.6.htm
Gambar 1.7 Hasil Eksekusi Contoh 1.6
1.2.6 Tag Font
Contoh 1.7 Menambahkan atribut pada tag font
<html> <head>
<title>Mengolah Font dengan Properties Font</title> </head> <body>
<font size="1" face=verdana color=#FF0000>Tulisan ini dengan font size adalah 1, face Verdana dan berwarna merah</font>
<br> <font size="4" face=arial color=green>Tulisan ini dengan
font size adalah 4, <br>face arial dan berwarna hijau</font> </body> </html>
Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini :
Gambar 1.8 Hasil Eksekusi Contoh 1.7
1.2.7 Horizontal Rules
Contoh 1.8 Menambahkan Garis Horisontal
<html> <head>
<title>Horizontal Rules</title> </head> <body>
Menambahkan garis horisontal pada dokumen HTML <hr size="15">
<hr width="100" align=”left”> <hr color="blue"> <h color="red" size="3" width="300" noshade>
</body> </html>
Hasil :
Gambar 1.9 Hasil Eksekusi Contoh 1.8
1.3 List
List merupakan bentuk umum yang biasa kita gunakan untuk menampilkan daftar dengan urutan tertentu. Dalam HTML, dikenal 3 (tiga) istilah list : ordered list, unordered list dan definition list.
1.3.1 List Tanpa Urutan (Unordered Lists)
Contoh 1.9 Menggunakan Unordered List
<html> <head>
<title>Menggunakan List</title> </head> <body>
<h3>Menggunakan Unordered List</h3> <hr> <h4>Ordered List dengan Type Default</h4> <ul>
<li>Manchester United</li> <li>Chelsea</li> <li>Arsenal</li>
</ul> <h4>Unordered List dengan Type Circle</h4> <ul type="circle">
<li>Juventus</li> <li>AC Milan</li> <li>AS Roma</li>
</ul> <h4>Unordered List dengan Type Disc</h4> <ul type="disc">
<li>Real Madrid</li> <li>Barcelona</li> <li>Malaga</li>
</ul> <h4>Unordered List dengan Type Square</h4> <ul type="square">
<li>PSV</li> <li>Ajax Amsterdam</li> <li>Feyenord</li>
</ul> </body> </html>
Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini :
Gambar 1.10 Hasil Eksekusi Contoh 1.9
1.3.2 List Berurut (Ordered Lists)
Contoh 1.10 Menggunakan Ordered List
<html> <head>
<title>Menggunakan List</title> </head> <body>
<h3>Menggunakan Ordered List</h3> <hr> <h4>Ordered List dengan Type Default</h4> <ol>
<li>Nasi Goreng</li> <li>Nasi Rames</li> <li>Pecel Lele</li>
</ol> <h4>Ordered List dengan Type a</h4> <ol type="a">
<li>Nasi Goreng</li> <li>Nasi Rames</li> <li>Pecel Lele</li>
</ol> <h4>Ordered List dengan Type I</h4> <ol type="I">
<li>Nasi Goreng</li> <li>Nasi Rames</li> <li>Pecel Lele</li>
</ol> <h4>Ordered List dengan Menambahkan Atribut Start</h4> <ol start="4">
<li>Nasi Goreng</li> <li>Nasi Rames</li> <li>Pecel Lele</li>
</ol> </body> </html>
Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini :
Gambar 1.11 Hasil Eksekusi Contoh 1.10
1.3.3 Definition Lists
Contoh 1.11 Menggunakan Definition List :
<HTML> <HEAD> <TITLE> Belajar membuat HTML yuk </TITLE> </HEAD> <BODY>
<h3>Membuat Definition Lists</h3> <DL>
<DT> HTTP <DD> HyperText Transfer Protocol <DT> FTP <DD> File Transfer Protocol </DL> </BODY> </HTML>
Hasil :
Gambar 1.12 Hasil Eksekusi Contoh 1.11
1.3.4 List Bersarang (Nested Lists)
Dalam pemakaian list, kita dapat menggabungkan penggunaan unordered list dan ordered list dalam bentuk list bersarang.
Jurnal
1. Buatlah halaman HTML untuk menampilkan teks di bawah ini :
X 2 + 4X + 4
Linux adalah sistem operasi yang bersifat open source.
2. Buatlah dokumen HTML dengan tampilan sebagai berikut : Keterangan : garis berwarna merah
2 LINK DAN GAMBAR
Overview
Kemudahan dalam aplikasi berbasis web salah satunya adalah bisa menghubungkan satu dokumen dengan dokumen lainnya, baik dalam satu server aplikasi web maupun dengan server aplikasi web yang berbeda di seluruh dunia maya.
HTML menyediakan hypertext link yang merupakan daerah teks (ataupun gambar) yang bisa link (menyambungkan) ke dokumen HTML yang lain. Seiring berkembangnya teknologi internet, bukan hanya teks dan gambar yang bisa link ke dokumen tertentu, file multimedia pun sudah dapat dibuat link ke dokumen yang diinginkan.
Tujuan
1. Membuat link antar dokumen HTML
2. Relative Links versus Absolute Pathnames.
3. Membuat link ke bagian tertentu dari dokumen (anchor) yang sama
4. Memasukan gambar ke halaman HTML
5. Membuat link dari gambar
2.1 Link
Kekuatan utama dokumen HTML terletak pada hypertext link atau hyperlink atau lebih singkat lagi disebut link. Dengan hyperlink ini kita bisa membuka dokumen HTML lain atau langsung menuju ke bagian tertentu sebuah dokumen HTML. Hyperlink ini dapat diletakkan pada teks tertentu ataupun pada sebuah image, bila diletakkan pada teks maka teks tersebut (secara default) akan digaris-bawahi dan warnanya menjadi berbeda. Sintaksis penulisan :
<A href=url_tujuan> nama_link </A> Beberapa atribut yang dapat ditambahkan dalam tag <a> diantaranya :
Atribut Kegunaan
Href Menunjukkan url yang dituju Name
Memberikan nama pada bagian tertentu pada dokumen Target
Menunjukkan target ditampilkannya link
Title Menunjukkan title dari link ketika cursor digerakkan di sekitar area hyperlink
2.1.1 Membuat Link antar Dokumen HTML
Contoh membuat link ini, dapat dilihat dari script di bawah ini, sebelumnya siapkan halaman html dengan nama jur_MI.htm, jur_KA.htm, jur_TK.htm (disimpan di direktori /web/prodi/) dan simpan script dibawah ini dengan nama file Link.htm :
<html> <head> <title> Politeknik Telkom </title> </head> <body>
<a href="http://www.politekniktelkom.ac.id"> <img src="poltek.gif" width="100" height="100"
alt="Politeknik Telkom" align=left> </A> <center> <h3>Politeknik Telkom</h3> <h5>Jl. Telekomunikasi No. 1 Dayeuh Kolot Bandung</h5> <hr>
[ <a href="jur_MI.htm"> Manajemen Informatika </a> ] [ <a href="jur_KA.htm" target="_blank"> Komputer Akuntansi
</a> ] [ <a href="D:/web/jur_TK.htm"> Teknik Komputer </a> ] <br><br>
[ <a href="mailto:baa@politekniktelkom.ac.id"> BAA </a> ] [ <a href=http://www.dikti.org target="_blank">Dikti</a> ]
</center> </body> </html>
Pada contoh diatas menu „Manajemen Informatika‟ dan „Komputerisasi Akuntansi‟ merupakan Relative Link, menu „BAA‟ merupakan link ke alamat email, menu „Teknik Komputer‟ dan menu „Dikti‟ merupakan link dengan Absolute Pathnames sedangkan logo Politeknik Telkom merupakan gambar yang bisa link ke alamat web tertentu.
Untuk tampilan script diatas pada browsernya akan tampak seperti ini :
Gambar 2-1 Contoh link ke dokumen tertentu
2.1.2 Membuat Link ke Bagian Tertentu dalam Dokumen
Seringkali halaman web adalah halaman yang panjang dan selalu membukanya dari posisi awal akan sangat melelahkan bagi pengguna. Untuk itu akan lebih memudahkan bila kita langsung merujuk pada bagian tertentu sebuah halaman web. Caranya dengan menyisipkan Tag Anchor <a> dengan atribut "name" di bagian dokumen yang akan dituju.
Berikut ini sintaksisnya :
<a name="nama_section"> </a>
Untuk menggunakan link yang akan merujuk ke bagian dokumen itu, ditambahkan '#nama_section" menjadi :
<a href="sebuah_halaman.html#nama_section">langsung ke nama section</a>
Cobalah script berikut ini : <HTML>
<HEAD> <TITLE>Membuat Link Ke Bagian dalam Dokumen</TITLE> </HEAD> <BODY>
<H4>Membuat Link ke Bagian dalam Dokumen</H4> <A NAME="bab1"></A> <B>Bab 1</B><BR> Pada bab ini akan dijelaskan tutorial membuat dokumen HTML.<BR> Mulai dari membuat dokumen HTML yang sederhana sampai membuat sebuah web.<Br> Sebagai pendahuluan, coba klik link ini untuk <A HREF="#sejarah">menuju ke bagian lain</A> pada dokumen ini.. <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <P> </P> <A NAME="sejarah"></A> <B>1.1 Sekilas Sejarah Internet</B><BR> Bab ini adalah bagian lain pada dokumen yang dituju ketika link pada Bab 1 diklik.<BR> Untuk kembali ke Bab 1, klik <A HREF="#bab1">disini</A>
</BODY> </HTML>
Gambar 2-2 Contoh link ke dokumen yang sama
2.2 Gambar
Untuk menyisipkan gambar kita dapat memanfaatkan tag <IMG>. Format file gambar yang bisa ditampilkan bisa bermacam-macam, misalnya jp, jpeg, pcx, gif, psd, dan sebagainya. Pada umumnya, perancang web hanya menggunakan kombinasi dari tiga format file gambar saja yaitu jpeg, gif dan psd.
Sintaksis:
<IMG src="url_file" width="img_width" height="img_height" vspace="10" hspace="10" alt="alt_teks">
Contoh Menambahkan Image ke Dokumen HTML
<html> <head> <title> Menambahkan Image </title> </head> <body>
<h4>Menambahkan image ke dalam dokumen HTML</h4> <img src="Clock-hands.bmp" width="150" height="120"> <br> <h4>Mengatur border pada image</h4> <img src="Clock-hands.bmp" border="5"> <br> <h4>Alternating Text</a> pada image di bawah ini terdapat alternating text. silahkan gerakkan mouse melewati image<br> <img src="Clock-hands.bmp" alt="Alternating Text">
</body> </html>
Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini :
Gambar 2-3 Menambahkan image
2.2.1 Gambar sebagai Hyperlink
Contoh penerapan gambar sebagai hyperlink adalah sebagai berikut :
<HTML> <HEAD>
<TITLE>Halaman Awal</TITLE> </HEAD> <BODY>
<H4>Selamat Datang di Situs Pribadi Saya</H4> 2untuk bisa menjelajahi situs ini, silahkan klik pada gambar berikut <A HREF="contoh_4.2.htm"> <IMG SRC="lambang_poltek_telkom.bmp"
ALT="Link Menggunakan Image"></A> <BR><BR> Selamat menikmati penjelajahan di situs ini.
</BODY> </HTML>
Hasilnya seperti gambar di bawah ini :
Gambar 2-4 Menambahkan image
Jurnal
3. Buatlah link untuk masing-masing menu pada gambar di bawah ini :
Gambar 2-5 Studi Kasus Hyperlink
4. Berikan contoh penggunaan gambar sebagai hyperlink ke dokumen yang
sama!
3 FORM
Overview
Pada praktikum ini akan mempelajari pembuatan dokumen HTML yang lebih interaktif dan menarik. Dokumen HTML harus mampu menyediakan fasilitas yang dapat menerima masukan atau isian data dari user. Data isian dari pengguna ini untuk kemudian dapat diproses lebih lanjut menjadi informasi yang dibutuhkan baik oleh user maupun oleh pemilik web itu sendiri. Pengguna web dapat memasukkan inputan pada dokumen HTML melalui elemen form.
Tujuan
7. Membuat form pada dokumen HTML
8. Mengerti cara penggunaan form pada halaman dokumen HTML.
9. Mampu menggunakan Input Field sesuai kegunaannya.
3.1 Form
Form merupakan media untuk menampung elemen - elemen yang terdapat didalamnya. Informasi yang diisikan oleh pengguna akan dikirimkan ke server melalui form ini. Sintaks umum pembuatan form pada dokumen HTML :
<form action=”_url_” method=”get|post” enctype=””>
... elemen – elemen yang ditambahkan dalan form ... </form>
3.2 Jenis Inputan dalam Form
3.2.1 Text
Jenis inputan type text digunakan untuk menerima masukan dari user berupa data yang berupa huruf, angka dan simbol untuk dikirim ke server.
Contoh 4.1 Menambahkan Elemen Text
<html> <head>
<title>Menambahkan Elemen Text</title> </head> <body>
nama : <input type="text" name="nama"> <br> nim : <input type="text" name="nim" value="901" maxlength="9" size="9">
</body> </html>
Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini :
Gbr. Hasil Eksekusi Contoh 4.1
3.2.2 Password
Dengan menggunakan elemen input dengan type password, isian pada text box akan diubah menjadi tanda bintang (*). Elemen ini biasanya digunakan untuk pengisian password. Contoh 4.2 Menyembunyikan Password
<html> <head>
<title>Menyembunyikan Password</title> </head> <body>
Password Anda : <input type="password" name="nama" size="30" maxlength="15"> </body> </html>
Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini :
Gbr. Hasil Eksekusi Contoh 4.2
3.2.3 Radio
Dengan menggunakan elemen radio, pada form disediakan beberapa pilihan, namun hanya satu yang dapat dipilih dari pilihan tersebut.
Contoh 4.3 Menampilkan Pilihan pada Dokumen HTML
<html> <head>
<title>Menambahkan Pilihan pada Dokumen HTML</title> </head> <body>
Jenis kelamin :
<br><input type="radio" name="jns_kelamin" value="L" checked>Laki- laki <br><input type="radio" name="jns_kelamin" value="P">Perempuan </body> </html>
Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini :
Gbr. Hasil Eksekusi Contoh 4.3
3.2.4 Checkbox
Berbeda dengan elemen radio, elemen checkbox menyediakan beberapa pilihan yang dapat dipilih lebih dari 1 (satu). Masing – masing elemen checkbox harus mempunyai nama yang berbeda satu sama lain. Contoh 4.4 Pilihan Ganda pada Dokumen HTML
<html> <head>
<title>Pilihan Ganda pada Dokumen HTML</title> </head> <body>
Hobi Anda : <br><input type="checkbox" name="hobi1" value="baca" checked>Baca <br><input type="checkbox" name="hobi2" value="belanja">Belanja <br><input type="checkbox" name="hobi3" value="coding" checked>Coding <br><input type="checkbox" name="hobi4" value="nonton">Nonton
</body> </html>
Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini :
Gbr. Hasil Eksekusi Contoh 4.4
3.2.5 Button
Ada 4 (empat) jenis varian pada elemen ini : - Submit Tombol ini berfungsi untuk memanggil url yang sudah didefisikan di
atribut action. - Reset
Tombol ini berfungsi untuk mengembalikan form ke kondisi awal (mengosongkan nilai semua elemen yang ada pada form)
- Button Tombol ini berfungsi untuk membuat form lebih interaktif dengan memanggil script lain.
- Image Menggunakan gambar sebagai pengganti tombol.
Contoh 4.5 Menambahkan Tombol di Dokumen HTML
<html> <head> <html> <head>
<title>Menambahkan Tombol di Dokumen HTML</title>
</head> <body>
<input type="submit" value ="Kirim" name="Submit"> <input type="reset" value ="Ulangi" name ="Reset"> <input type="button" value ="Batal" name ="Cancel"> <input
name="Gambar" src="lambang_profesional.bmp" width="50" height="50"> </form> </body> </html>
type="image"
Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini :
Gbr. Hasil Eksekusi Contoh 4.5
3.2.6 Textarea
Untuk mendapatkan masukan dari user dengan karakter dalam jumlah banyak (masukan berupa kalimat yang panjangnya lebih dari 255 karakter) dibutuhkan elemen yang mampu menampung inputan tersebut. Dalam dokumen HTML disediakan elemen yang mampu menampung inputan tersebut. Elemen tersebut dinamai textarea. Contoh 4.6 Menerima Masukan yang Panjang
<html> <head>
<title>Menerima Masukan yang Panjang</title> </head> <body>
Deskripsi diri : <br>
<textarea name="deskripsi" cols="25" rows="5">Tuliskan deskripsi diri Anda disini</textarea> </body> </html>
Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini :
Gbr. Hasil Eksekusi Contoh 4.6
3.2.7 Select
Pada dokumen HTML disediakan elemen untuk membentuk pilihan dalam bentuk dropdown. Tag yang digunakan untuk membuat pilihan dalam bentuk dropdown adalah tag <select>. Contoh 4.7 Pilihan Menggunakan Dropdown
<html> <head>
<title>Pilihan Menggunakan Dropdown</title> </head> <body>
Peminatan pilih salah satu: <br> <select name="peminatan">
<option value="wm">Web Master</option> <option value="db">Database Management</option>
<option value="cnm">Computer Network Management</option> </select> <br> Kemampuan : <br> <select size="4" name="kemampuan" multiple>
<option value="asp">asp</option> <option value="php">php</option> <option value="mysql">mysql</option> <option value="oracle">oracle</option> <option value="hardware">hardware</option> <option value="jaringan">jaringan</option>
</select> </body> </html>
Jika skrip pada contoh diatas dieksekusi melalui web browser akan didapatkan hasil seperti pada gambar di bawah ini :
Gbr. Hasil Eksekusi Contoh 4.7
Rangkuman
1. Form digunakan untuk menerima masukan berupa informasi atau data dari pengguna.
2. User memasukkan informasi melalui sejumlah elemen yang disebut kontrol. Kontrol ini dapat berupa input field TEXT, PASSWORD, CHECKBOX, RADIO BUTTON, BUTTON, TEXTAREA, LIST MENU.
3. Terdapat dua atribut metoda penanganan form, yaitu metoda GET dan metoda POST.
Jurnal
5. Buatlah sebuah form lengkap seperti pada gambar di bawah ini :
4 LAYOUT HALAMAN WEB
Overview
Untuk membuat desain halaman web, dapat dibuat menggunakan tabel dan frame. Hasil tampilan tidak ada perbedaan, namun pada proses pengaksesan halaman web mungkin akan berpengaruh terhadap waktu yang diperlukan.
Tabel merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris. Hampir semua web site yang berkualitas dan profesional, dirancang dengan menggunakan tabel. Layaknya sebuah spreadsheet yang memiliki sel dan berisi angka-angka, tabel dalam web juga mempunyai sel yang berisi link, gambar dan text.
Frame akan membagi satu halaman HTML menjadi beberapa dokumen HTML, yang masing-masing bagian frame dihubungkan dengan dokumen HTML yang terpisah.
Tujuan
10. Membuat dan memformat tabel pada halaman dokumen HTML
11. Memahami pembuatan frame pada dokumen HTML
12. Memahami penggunaan frame
13. Memahami pembagian tampilan layar ke dalam beberapa bagian, yang masing-masing dihubungkan dengan dokumen HTML yang terpisah
14. Mengatur border pada frame
15. Menentukan target frame cells dari hypertext links
4.1 Tabel
4.1.1 Membuat Tabel dan Judul Tabel
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table, yaitu: <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tag <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> . Susunan sederhana dalam membuat tabel di dokumen HTML sebagai berikut :
<TABLE> <TH>... berisi judul tabel</TH> <TR>
<TD> ... berisi informasi yang ditampilkan di web browser </TD> </TR> </TABLE>
Cobalah eksekusi contoh penerapan pembuatan tabel berikut ini :
<html> <head> <title>::: Pembuatan Table:::</title> </head> <body>
<font face=arial size=2 color=maroon> <table border=1>
<caption align=top><b><u>Daftar Alamat</u></b></caption> <tr bgcolor=yellow>
<th width=40>No.</td> <th width=150>Nama</td> <th width=200>Alamat</td>
</tr> <tr>
<td align=center>1.</td> <td>Raihan Umar</td> <td>Tarogong Garut</td>
</tr> <tr bgcolor='sky blue'>
<td align=center>2.</td> <td>Ari Mulyaningsih</td> <td>Wringin Anom Gresik</td>
</tr> <tr>
<td align=center>3.</td> <td>Ananda Denira</td> <td>Cicadas Bandung</td>
</tr> <tr bgcolor='sky blue'>
<td align=center>4.</td> <td>Ari Wibowo</td> <td>Sariwangi Tangerang</td>
</tr> </table> </body> </html>
Gambar 4-1 Hasil eksekusi pembuatan Tabel
4.1.2 Memformat Baris dan Kolom
Setiap tabel pasti terdiri atas baris – baris yang diwakili dengan tag <TR> dan juga kolom-kolom yang diwakili oleh tag <TD>. Setiap baris dan kolom pada tabel memiliki atribut masing-masing.
Contoh penerapan memformat baris dan kolom : <HTML>
<HEAD> <TITLE> Memformat Baris dan Kolom </TITLE> </HEAD> <BODY>
<TABLE BORDER=3 CELLSPACING=3 CELLPADDING=5> <CAPTION>Daftar Order Barang</CAPTION> <TH>No</TH> <TH>Barang</TH> <TH>Jenis</TH> <TH>Harga</TH> <TH>Jumlah</TH> <TH>Total Harga</TH>
<TR> <TD ALIGN=CENTER>1</TD> <TD>Pocari Sweat</TD> <TD ROWSPAN=2>Minuman</TD> <TD>Rp. 4500</TD> <TD ALIGN=RIGHT>5</TD> <TD>Rp. 22500</TD>
</TR> <TR>
<TD ALIGN=CENTER>2</TD> <TD>Nutrisari Jus Jeruk</TD> <TD>Rp. 2450</TD> <TD ALIGN=RIGHT>3</TD> <TD>Rp. 7350</TD>
</TR> <TR>
<TD ALIGN=CENTER>3</TD> <TD>Kacang Kulit Garuda</TD> <TD ROWSPAN=3>Makanan</TD> <TD>Rp. 9800</TD> <TD ALIGN=RIGHT>2</TD> <TD>Rp. 19600</TD>
</TR> <TR>
<TD ALIGN=CENTER>4</TD> <TD>Tango Coklat</TD> <TD>Rp. 2750</TD> <TD ALIGN=RIGHT>1</TD> <TD>Rp. 2750</TD>
</TR> <TR>
<TD ALIGN=CENTER>5</TD> <TD>Snack Ringan</TD> <TD>Rp. 6450</TD> <TD ALIGN=RIGHT>2</TD> <TD>Rp. 12900</TD>
</TR> <TR HEIGHT=30 BORDERCOLOR="RED">
<TD COLSPAN=5 BGCOLOR="GRAY"><B>TOTAL</B></TD> <TD BGCOLOR="GRAY"><B>Rp. 65100</B></TD>
</TR> </TABLE>
</BODY> </HTML>
Gambar 4-2 Hasil eksekusi pembuatan Tabel
4.1.3 Lebih Lanjut dengan Tabel
Pada bagian ini kita akan mempelajari bagaimana menambahkan gambar pada sebuah tabel. Tabel dalam halaman web dapat berisi hyperlink, gambar, gambar yang menunjuk pada hyperlink dan teks dengan huruf yang berwarna. Sebagai contoh, berikut ini akan ditunjukkan penggunaan tabel dengan berbagai macam konten :
<HTML> <HEAD>
<TITLE> Menyisipkan Gambar pada Tabel </TITLE> </HEAD> <BODY>
<TABLE BORDER=2> <CAPTION> Dokumentasi Fotograpi </CAPTION> <TR>
<TH>1.</TH> <TH>2.</TH>
<TH>3.</TH> </TR> <TR>
<TD>Pemandangan Awan</TD> <TD>Hutan Lindung</TD> <TD>Pinguin</TD> </TR>
<TR> <TD ALIGN=CENTER> <IMG SRC="dock.jpg" width="100" height="100"></TD> <TD ALIGN=CENTER> <IMG SRC="forest.jpg" width="100" height="100"></TD> <TD ALIGN=CENTER> <A HREF="Student.html"> <IMG SRC="image.jpg" ALT="Pinguin"></A></TD> </TR>
</TABLE> </BODY> </HTML>
Gambar 4-3 Hasil eksekusi pembuatan Tabel
4.2 Frame
Frame HTML dapat digunakan untuk membuat tampilan halaman HTML yang terbagi-bagi menjadi beberapa dokumen HTML, dimana setiap bagian merupakan satu halaman HTML terpisah. Sehingga tampilan halaman HTML yang salah satu atau beberapa bagian berganti-ganti isinya sedangkan bagian lain tetap sehingga dapat menghemat bandwidth internet dan mempercepat proses download secara keseluruhan.
Sintaks umum yang digunakan untuk membuat frame :
<HTML> <HEAD> </HEAD> <FRAMESET BORDER=”#” { [ROWS | COLS] } = { #,[#,[...]] }>
<FRAME SRC=”url” NAME=”FrameName”> </FRAMESET> </HTML>
Tabel 4-1 Atribut-atribut pada Frame
Atribut
Fungsi
FRAMESET COLS Membuat frame vertikal dengan lebar kolom tertentu
FRAMESET ROWS Membuat frame horizontal dengan tinggi baris tertentu
FRAME SRC Memasukkan dokumen HTML ke dalam FRAME NOFRAME
Memasukkan body teks untuk browser yang tidak dapat menampilkan frame
Contoh Penerapan : Sebelum mencoba membuat frame, silahkan buat beberapa dokumen web
yang nanti akan ditampilkan di tiap frame. Misalkan terdapat tiga halaman yang akan ditampilkan yang terdiri dari halaman header.htm, menu.htm, main.htm, jur_mi.htm.
1. header.htm
<html> <head>
<title> Header Politeknik Telkom </title> </head>
<body> <center> <h3>Politeknik Telkom</h3> <h5>Jl. Telekomunikasi No. 1 Dayeuh Kolot Bandung</h5> <hr>
</center> </body> </html>
2. main.htm
<html> <head>
<title>Main Politel</title> </head> <body>
<h3>Selamat datang di Politeknik Telkom</h3> Saat ini kami berlokasi di Kampus Politeknik Telkom
<br>Jl. Telekomunikasi No. 1 Dayeuh Kolot Bandung.<br>
Beberapa jurusan yang terdapat di Politeknik Telkom diantaranya : <ol> <li>Jurusan Manajemen Informatika</li> <li>Jurusan Komputer Akuntansi</li> <li>Jurusan Teknik Komputer</li>
</ol> </body> </html>
3. jur_mi.htm
<html> <head>
<title>Jurusan Manajemen Informatika</title> </head> <body>
<h3>Jurusan Manajemen Informatika</h3> <hr>
Jurusan ini berkonsentrasi untuk mencetak lulusan yang mampu menguasai teknologi ICT yang handal dan siap pakai. Kurikulum yang dipersiapkan untuk mencapai tujuan tersebut seperti diperlihatkan pada tabel berikut ini :
<table width="100%" border="1" cellpadding="1" cellspacing="1">
<tr bgcolor="#e2e2e2"> <td>Tahapan</td> <td>Mata Kuliah / Praktikum</td>
</tr> <tr>
<td rowspan="7">Semester 1</td> <td>Algoritma Pemrograman</td>
</tr> <tr><td>Bahasa Inggris</td></tr> <tr><td>Pengenalan Komputer</td></tr> <tr><td>Praktikum Pascal</td></tr> <tr><td>Praktikum Pengenalan Komputer</td></tr> <tr><td>Praktikum Aplikasi Internet</td></tr> <tr><td>Praktikum Dasar Jaringan Komputer</td></tr>
</table> </body> </html>
4. menu.htm
<html> <head>
<title> Header Politeknik Telkom </title> </head> <body>
[ <a href="_menu.html"> Home </a> ]<br> [
<a href="Jur_MI.htm" target="main"> Manajemen Informatika </a> ]<br> [ <a href="#"> Komputer Akuntansi </a> ]<br> [ <a href="#"> Teknik Komputer </a> ]
</center> </body> </html>
5. home.htm
<html> <head>
<title>Menggunakan Frame</title> </head> <frameset rows=100,*>
<frame src="header.htm" scrolling="no" name="atas"> <frameset cols=250,*>
<frame src="menu.htm" name="kiri"> <frame src="main.htm" name="main">
</frameset> </frameset> <noframes><body> </body></noframes> </html></html>
Gambar 4-4 Hasil eksekusi pembuatan Frame
Jurnal
Gambar 4-5 Halaman Studi Kasus Layout Web
6. Buatlah layout web seperti di atas dengan menggunakan tabel!
7. Buatlah layout web seperti di atas dengan menggunakan frame!
Ketentuan : untuk target frame dari menu ‟Program Keahlian‟ adalah di bagian kanan. Untuk target frame dari ‟Unit Kegiatan Mahasiswa‟ adalah di halaman window yang baru
5 CSS (CASCADING STYLE SHEETS)
Overview
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan untuk pengembangan website pada tahun 1996. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian akan membentuk hubungan parent-child pada setiap style.
Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C). CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.
Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
Tujuan
16. Memberikan uraian tentang konsep dasar, sintaks CSS, dan pemanfaatannya untuk representasi dan layout dokumen pada lingkungan web
17. Mahasiswa mampu membuat halaman web dan mengimplementasikan CSS untuk menambahkan style pada halaman web tersebut
5.1 Penempatan CSS
Terdapat 3 (tiga) cara penempatan CSS pada halaman web, ketiga cara ini dapat digunakan untuk memformat halaman web dengan style yang diinginkan.
5.1.1 Inline Style Sheet
CSS dalam posisi inline style sheet dituliskan menjadi satu dengan halaman web yang akan diatur style-nya dan menjadi bagian dari body. Penulisan style dilakukan dengan cara menambahkan atribut title pada elemen (tag) HTML yang akan diatur style-nya. Oleh karena itu, untuk mengimplementasikan CSS pada halaman web, semua tag harus diformat secara independen.
Dengan menggunakan model penempatan inline style sheet, jika ada sebuah tag HTML yang digunakan berulang kali dalam sebuah halaman web, pembuat website dapat mengimplementasikan style yang berbeda pada tag tersebut. Ketika menggunakan inline style sheet untuk memanipulasi halaman web, pembuat web hanya dapat menggunakan satu property saja pada tag HTML yang akan dimanipulasi.
5.1.2 Embedded Style Sheet
Sama halnya dengan CSS dalam posisi inline style sheet, penulisan CSS dalam posisi embedded style sheet juga menjadi satu dengan halaman web yang akan diatur style-nya, hanya saja, posisi CSS menjadi bagian dari header (berada diantara tag <head>) dengan menambahkan tag <style type=”text/css”>.
Dengan menggunakan model penempatan CSS sebagai embedded style sheet, pembuat web cukup satu kali mendefinisikan style yang akan dikenakan pada tag – tag yang berada dalam halaman web. Jika ada sebuah tag yang digunakan secara berulang, secara otomatis akan mempunya style yang sama, berbeda dengan model inline style sheet yang mengharuskan pembuat web menentukan style pada tag – tag yang digunakan berulang kali dan memungkinkan untuk menentukan style yang berbeda pada tag tersebut.
5.1.3 Linked Style Sheet
Berbeda dengan 2 (dua) model penempatan CSS sebelumnya, menggunakan linked style sheet berarti harus menyediakan sebuah file CSS khsusus berisi berbagai format style yang terpisah dari halaman web. File ini Berbeda dengan 2 (dua) model penempatan CSS sebelumnya, menggunakan linked style sheet berarti harus menyediakan sebuah file CSS khsusus berisi berbagai format style yang terpisah dari halaman web. File ini
Dengan menggunakan model ini, style akan terpusat pada sebuah file, sehingga jika ada pengubahan style, pembuat website tidak perlu merubah di semua halaman web yang dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file CSS.
5.2 Penggunaan CSS pada Halaman Web
Seorang pembuat web dapat memilih salah satu dari ketiga penempatan CSS yang tersedia, atau bahkan dapat menggunakan dua atau tiga penempatan secara bersama – sama dalam sebuah halaman web jika diperlukan.
5.2.1 Memanipulasi Font
Salah satu tag HTML yang biasa digunakan untuk memanipulasi font adalah paragraf (<p>). Beberapa tag yang lain juga memungkinkan untuk dimanipulasi atau ditambahkan CSS untuk memanipulasi font jika pada tag HTML tersebut akan berisi tulisan / text, seperti : <th><td>, <a>, <li>, <h1>…<h6>, dan tag – tag lain yang memungkinkan berisi text.
Bentuk manipulasi font yang dimungkinkan dapat dilihat pada tabel di bawah ini :
Tabel 5-1 Property Font
Nama Property Value Contoh Penggunaan Font-family
Nama font
P { font-family: arial. Helvetica}
Font-size Nilai integer dengan
P {font-size:24em}
pilihan satuan : em|pt|px|%
Font-style Oblique|italic|normal
P {font-style:italic}
Font-variant Normal|small-caps
P {font-variant:small- caps}
Font-weight Normal|bold|bolder|100- P {font-weight:bold} 900
5.2.1.1 Menggunakan Inline Style Sheet
Contoh penggunaan CSS untuk memanipulasi font dengan memposisikan CSS pada inline style sheet sebagai berikut :
Contoh 5-1 Menggunakan sebuah property untuk memanipulasi font. <htm> <head>
<title>CSS untuk memanipulasi font</title> </head>
<body>
<h3 style="font-family:'Courier New', Courier ">Peresmian
Politeknik Telkom</h3> <p style="font-family:Verdana, Arial, Helvetica, sans- serif">Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl. Japati</p>
<p style="font-size:16px">Pada acara ini, dihadiri juga oleh perwakilan siswa yang berasal dari program pelatihan yang berada di bawah Yayasan Pendidikan Telkom, yaitu Program Profesional STT Telkom dan NIIT & Telkom Center (NTC) </p>
<p style="font-style:italic">Pada acara ini pula, Direktur PT Telkom berkesempatan untuk mencoba Online Test yang nantinya akan digunakan oleh Politeknik Telkom untuk seleksi/test guna menyaring calon - calon mahasiswa Politeknik Telkom</p>
</body> </html>
Jika dijalankan pada web browser, akan didapatkan hasil seperti yang ditampilkan pada gambar di bawah ini :
Gambar 5-1 CSS sebuah property untuk memanipulasi font.
5.2.1.2 Menggunakan Embedded Style Sheet
Jika akan memanipulasi font menggunakan CSS yang ditempatkan pada embedded style sheet, pembuat website harus mendefinisikan semua property yang akan digunakan pada tag <style> pada bagian header.
Berikut ini adalah contoh CSS untuk memanipulasi font dan ditempatkan pada embedded style sheet :
Contoh 5-2 Memanipulasi font dengan memberikan sebuah nilai pada selector <html>
<head> <title>CSS untuk memanipulasi font</title> <style type="text/css">
p{ font-family:Verdana, Arial, Helvetica, sans-serif } td {
font-weight:bold } a{
font-size:24px } </style> </head>
<body>
<h2>Peresmian Politeknik Telkom</h2> <p>Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl. Japati</p> <table width="100%">
<tr> <td> Pada acara ini, dihadiri juga oleh perwakilan siswa yang berasal dari program pelatihan yang berada di bawah Yayasan Pendidikan Telkom, yaitu Program Profesional STT Telkom dan NIIT & Telkom Center (NTC)
</td> </tr> <tr>
<td> Pada acara ini pula, Direktur PT Telkom berkesempatan untuk mencoba Online Test yang nantinya akan digunakan oleh Politeknik Telkom untuk seleksi/test guna menyaring calon - calon mahasiswa Politeknik Telkom
</td> </tr> </table> <br> Untuk mencoba menggunakan aplikasi Online Test, silahkan klik link di bawah ini :<br> <a href="http://www.politekniktelkom.ac.id/olt">Online Test</a>
</body> </html>
Gambar 5-2 Memanipulasi font dengan memberikan sebuah nilai pada selector
Selain mengisikan sebuah nilai pada selector, ketika menempatkan CSS sebagai embedded style sheet, pembuat website dapat mengisikan beberapa nilai sekaligus pada selector yang diinginkan.
Contoh berikut ini menunjukkan penggunaan beberapa nilai pada sebuah selector.
Contoh 5-3 Memanipulasi font dengan mengisikan beberapa nilai pada sebuah selector <html>
<head> <title>CSS untuk memanipulasi font</title> <style type="text/css">
td { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-style:italic; } a{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; font-weight:bold }
</style> </head>
<body> <h3>Peresmian Politeknik Telkom</h3> <table width="100%"> <tr>
<td> Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl. Japati<br>
</td> </tr><tr><td> Pada acara ini, dihadiri juga oleh perwakilan siswa yang berasal dari program pelatihan yang berada di bawah Yayasan Pendidikan Telkom, yaitu Program Profesional STT Telkom dan NIIT & Telkom Center (NTC) <br> </td>
</tr> <tr>
<td> Pada acara ini pula, Direktur PT Telkom berkesempatan untuk mencoba Online Test yang nantinya akan digunakan oleh Politeknik Telkom untuk seleksi/test guna menyaring calon - calon mahasiswa Politeknik Telkom <br> </td>
</tr> <tr>
<td>Untuk kembali ke berita sebelumnya, <a <td>Untuk kembali ke berita sebelumnya, <a
Gambar 5-3 Memanipulasi font dengan mengisikan beberapa nilai pada sebuah selector
Selain menggunakan selector yang bertipe tag/elemen, jika penempatan CSS pada embedded style sheet, pembuat website dapat pula menggunakan selector tipe lain, seperti : selector bebas, class, atau ID.
Contoh di bawah ini menunjukkan penggunaan tipe selector selain tag/elemen untuk memanipulasi font.
Contoh 5-4 Memanipulasi font dengan menggunakan selector bebas, class, dan ID <html>
<head> <title>CSS untuk memanipulasi font</title> <style type="text/css">
tulisan_miring { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-style:italic;
} . cetak_tebal {
font-family:Verdana, Arial, Helvetica, sans-serif; font-family:Verdana, Arial, Helvetica, sans-serif;
} #14pt {
font-size:14pt; } </style> </head>
<body> <h3>Peresmian Politeknik Telkom</h3> <table width="100%"> <tr>
<td> <tulisan_miring> Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl.Japati </tulisan_miring><br>
</td> </tr> <tr>
<td class="cetak_tebal"> Pada acara ini, dihadiri juga oleh perwakilan siswa yang berasal dari program pelatihan yang berada di bawah Yayasan Pendidikan Telkom, yaitu Program Profesional STT Telkom dan NIIT & Telkom Center (NTC) <br>
</td> </tr> <tr>
<td id="14pt"> Pada acara ini pula, Direktur PT Telkom berkesempatan untuk mencoba Online Test yang nantinya akan digunakan oleh Politeknik Telkom untuk seleksi/test guna menyaring calon - calon mahasiswa Politeknik Telkom <br>
</td> </tr> </table>
</body> </html>
Gambar 5-4 Memanipulasi font dengan menggunakan selector bebas, class, dan ID
5.2.1.3 Menggunakan Linked Style Sheet
Menggunakan linked style sheet sama halnya memindahkan style – style yang didefinisikan pada selector di bagian header menjadi sebuah file yang akan digunakan secara berulang – ulang oleh halaman web yang membutuhkan.
Berikut adalah langkah – langkah yang dapat digunakan dalam menggunakan linked style sheet untuk memanipulasi font.
Langkah 1. Menyiapkan file untuk mendefinisikan style /* CSS Document */
tulisan_miring { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-style:italic;
} .cetak_tebal {
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold
} #14pt {
font-size:14pt;
} p{
font-family:Verdana, Arial, Helvetica, sans-serif } td {
font-weight:bold } a{
font-size:24px }
Langkah 2. Simpan file yang berisi define style tersebut dengan nama mystle.css Langkah 3. Pemanggilan file CSS ke dalam halaman web <html>
<head> <title>CSS untuk memanipulasi font</title> <link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body> <h3>Peresmian Politeknik Telkom</h3> <table width="100%"> <tr>
<td> <tulisan_miring> Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl.Japati </tulisan_miring><br>
</td> </tr> <tr>
<td class="cetak_tebal"> Pada acara ini, dihadiri juga oleh perwakilan siswa yang berasal dari program pelatihan yang berada di bawah Yayasan Pendidikan Telkom, yaitu Program Profesional STT Telkom dan NIIT & Telkom Center (NTC) <br>
</td> </tr> <tr>
<td id="14pt"> Pada acara ini pula, Direktur PT Telkom berkesempatan untuk mencoba Online Test yang nantinya akan digunakan oleh Politeknik Telkom untuk seleksi/test guna menyaring calon - calon mahasiswa Politeknik Telkom <br>
</td> </tr> </table>
</body> </html>
Jika script pada langkah ketiga dijalankan di web browser, hasil yang akan didapatkan sama seperti yang diperlihatkan pada Gambar 5-4. Coba perhatikan perbedaan penggunaan CSS pada contoh 5-4 dengan langkah 3 menggunakan linked style sheet !
5.2.2 Memanipulasi Color dan Background
Bentuk lain dari memanipulasi halaman web adalah dengan menentukan warna pada tulisan, menambahkan warna background, atau dengan menambahkan gambar sebagai background.
Beberapa property yang bisa digunakan untuk memanipulasi beberapa hal di atas, ditampilkan pada tabel di bawah ini.
Tabel 5-2 Property Color dan Background
Nama Value Contoh Penggunaan Property Background- Rangkaian 6 digit
Body {
color heksadesimal atau nama
Background-color : green;
} warna Background- url dimana image disimpan
Body {
Image
Background-image : url(gambar1.jpg); }
Background- Fixed|scroll|inherit
Body {
attachment
Background-attachment : scroll; }
Background- Inherit|repeat|no-
Body {
Repeat repeat|repeat-x|repeat-y
Background-repeat : repeat; Background-image : url(image/gambar1.jpg); }
Background- Bottom|center|left|right|top Body { position
|inherit
Background-repeat : no- repeat; Background-image : url(image/gambar1.jpg); Background-position : bottom center }
Color Rangkaian 6 digit
H1 { color : red } H1 { color : red }
Seorang pembuat website dapat menerapkan property – property (yang tertera pada tabel di atas) kepada selector secara individu ataupun menggunakan beberapa property secara bersama – sama pada sebuah selector.
Contoh 5-5 Memanipulasi color dan background halaman web <html> <head>
<title>CSS untuk memanipulasi color dan background</title> <style type="text/css">
.warna_background { background-color:#00CCFF } .mewarnai_tulisan {
color:red } .background_bergambar {
background-image:url(mawar.jpg); background-repeat:no-repeat
} .background_bergambar_bawah {
background-image:url(mawar.jpg); background-position:right; background-repeat:repeat-y
} </style> </head>
<body> <h3>Peresmian Politeknik Telkom</h3> <table width="100%"> <tr>
<td class="mewarnai_tulisan"> Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl. Japati<br>
</td> </tr> <tr>
<td class="warna_background"> Pada acara ini, dihadiri juga oleh perwakilan siswa yang berasal dari program pelatihan yang berada di bawah Yayasan Pendidikan Telkom, yaitu Program Profesional STT Telkom dan NIIT & Telkom Center (NTC) <br>
</td> </tr> </table> <br>
<table width="100%" border=”1”> <tr> <td height="350" width="50%" class="background_bergambar" valign="bottom">
Acara yang diselenggarakan terasa meriah dengan dihadir kurang lebih 450 tamu undangan dan sekitar 100 wartawan dari media cetak dan elektronik
</td> <td class="background_bergambar_bawah"> </td>
</tr> </table> </body> </html>
Gambar 5-5 Memanipulasi color dan background halaman web
5.2.3 Memanipulasi List
Memanipulasi list juga dapat dilakukan dengan menggunakan CSS. Bentuk manipulasi yang diperbolehkan kepada list adalah menentukan bentuk bullet dari list dan posisi list.
Tabel berikut menunjukkan property – property yang dapat digunakan untuk memanipulasi list.
Tabel 5-3 Property list
Nama Value Contoh Penggunaan Property List-style-
Disc|circle|square|lower-
Ul {
type roman|upper-
List-style-type : disc ;
roman|none|lower- } alpha|upper-alpha
List-style- url dimana image disimpan
Ul {
image atau none
List-style-image : url(gambar1.jpg) ; }
List-style- Inside|outside
Ul {
position
List-style-position : inside; }
Contoh penggunaan property untuk memanipulasi list diperlihatkan pada contoh di bawah ini :
Contoh 5-6 Memanipulasi list <html> <head>
<title>CSS untuk memanipulasi list</title> <style type="text/css">
.bullet1 { list-style-type:square } .bullet2 {
list-style-position:inside; list-style-type:circle
} .bullet_image {
list-style-image:url(mawar2.gif) } </style> </head>
<body> <h3>Peresmian Politeknik Telkom</h3> <table width="100%"> <tr>
<td> Pada peresmian Poiteknik Telkom dihadiri : <ul>
<li class="bullet1">Dirjen DIKTI</li> <li class="bullet1">Jajaran PT Telkom</li> <li class="bullet2">GM Keuangan</li> <li class="bullet2">GM Pemasaran</li>
</ul> </td> </tr> <tr>
<td> Selain itu juga dihadiri beberapa wartawan dari media cetak dan media elektronik :
<ul class="bullet_image"> <li>Media Cetak</li> <li class="bullet2">Pikiran Rakyat</li> <li class="bullet2">Kompas</li> <li>Media Elektronik</li>
<ul class="bullet1"> <li>RCTI</li> <li>Trans TV</li>
</ul> </ul> </td> </tr> </table>
</body> </html>
Gambar 5-6 Memanipulasi list
5.2.4 Memanipulasi Text
Bentuk manipulasi text merupakan pelengkap yang dapat digunakan untuk memanipulasi tulisan secara lebih kompleks. Jika pada manipulasi font hanya menentukan jenis dan ukuran font yang digunakan, maka pada manipulasi text, bentuk tulisan secara keseluruhan dapat dimanipulasi dengan lebih kompleks.
Tabel di bawah ini menggambarkan property yang digunakan untuk memanipulasi text.
Tabel 5-4 Property text
Nama Value Contoh Penggunaan Property
Color Rangkaian 6 digit
P{
heksadesimal atau nama
color :red;
warna } text-align
Left|right|center|justify
P{ Text-align :justify; }
text- None|underline|overline|lin P{ decoration
e-through|blink
Text-decoration :overline; }
text- None|capitalize|,uppercase|l P{ transform
owercase)
Text-transform : capitalize; }
Letter- Nilai integer dengan pilihan
P{
spacing satuan : em|pt|px|%
letter-spacing : 20px; }
Text-indent Nilai integer dengan pilihan
P{
satuan : em|pt|px|%
Text-indent : 50px; }
Contoh 5-7 Memanipulasi text <html>
<head> <title>CSS untuk memanipulasi text</title> <style type="text/css">
td { text-align:justify; color:#000000
} .lowercase {
text-transform:lowercase; text-indent:30px
} .capitalize { text-transform:capitalize } h3 {
text-decoration:overline; text-align:center; text-transform:uppercase; letter-spacing:4px;
} </style> </head>
<body> <h3>Peresmian Politeknik Telkom</h3> <table width="100%"> <tr>
<td class="lowercase"> Politeknik Telkom lahir pada tanggal 27 September 2007 dengan diresmikan oleh Direktur PT Telkom dalam sebuah acara yang diselenggarakan di PT Telkom Jl. Japati<br>
</td> </tr><tr> <td class="capitalize"> Pada acara ini, dihadiri juga oleh perwakilan siswa yang berasal dari program pelatihan yang berada di bawah Yayasan Pendidikan Telkom, yaitu Program Profesional STT Telkom dan NIIT & Telkom Center (NTC) <br>
</td> </tr> </table>
</body> </html>
Gambar 5-7 Memanipulasi text
5.2.5 Memanipulasi Tabel
Bentuk manipulasi pada tabel yang paling sering digunakan adalah memanipulasi border (garis tepi) tabel.
Tabel berikut ini menampilkan property yang dapat digunakan untuk memanipulasi tabel.
Tabel 5-5 Property tabel
Nama Value Contoh Penggunaan Property border-style None|dotted|dashed|solid|do .b1 {
uble|groove|ridge|inset|outset Border-style-type :
groove ; }