Pengantar Pemrograman Web - gembong.lecture.ub.ac.id · Tag Paragraf (Paragraph) paragraf Untuk...

PengantarPemrograman WebGEMBONG EDHI SETYAWAN

1

HTMLHyperText Markup LanguageGembong Edhi Setyawan

2

HTML

TUJUAN:

Mampu membuat halaman web dengan HTML

• Struktur HTML• Tag-tag Dasar HTML• Atribut Dasar HTML

3

TENTANG HTML

• HTML : format standar untuk membuat dokumen web– W3C (World Wide Web Consortium) Organisasi yang mengendalikan

standar internasional untuk WWW

• HTML merupakan bahasa (markup) bertanda, menggunakanrangkaian teks tertentu (tag) untuk menandai teks yangmempunyai interpretasi khusus

• File HTML berupa file teks (plain text file), sehingga dapatdibuat menggunakan editor teks biasa

• File HTML dapat dibuka dengan web browser (IE, Mozillafirefox, Opera, Google Chrome, dll)

4

EVOLUSI HTML

• Markup Language Dikembangkan pertama kali oleh IBMGML (Generalized Markup Language) – 1980

• ISO 8879Markup language sebagai standar untukpembuatan dokumen SGML (Standard GeneralizedMarkup Language) 1986

• HTML 1 diciptakan 1990– Diciptakan oleh Tim Berners – Lee dari CERN– Digunakan sebagai format standar untuk kolaborasi para fisikawan– Berdasarkan pada struktur SGML– HTML menambahkan hyperlink, sehingga menjadi halaman web

5

EVOLUSI HTML

• HTML 2.0 Disetujui sebagai standard pada 22 September1995

• HTML 3.2 dipublikasikan atas rekomendasi W3C Januari1997

• HTML 4.0 dipublikasikan atas rekomendasi W3C Desember 1997– Mendukung stylesheet– Adanya tag <object> untuk multimedia dan menyisipkan objek

• HTML 5.0– Mei, 2008 draft– Mei, 2011 versi stabil

6

Apa Kelebihan HTML 5• Tujuan utama untuk memperbaiki teknologi HTML agar mendukung

teknologi multimedia terbaru, mudah dibaca oleh manusia dan jugamudah dimengerti oleh mesin

• Fitur baru:– Unsur kanvas untuk menggambar– Video dan elemen audio untuk media pemutaran– Dukungan yang lebih baik untuk penyimpanan secara offline– Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav,

section– Bentuk kontrol form seperti kalender, tanggal, waktu, email, url,

search– Geolocation– Drag and drop

7

Skema Dasar Dokumen HTML

<HTML>

<HEAD>

<TITLE>Judul dokumen</TITLE>

</HEAD>

<BODY>

Isi dokumen

</BODY>

</HTML>

• HTML: menandai awal dan akhir dokumen HTML• HEAD: menandai bagian header dokumen HTML• TITLE: memberi judul pada dokumen HTML• BODY: menandai awal dan akhir isi dokumen (yang ditampilkan)

8

Contoh Isi Dokumen HTML

<html><head><title>Homepage saya</title>

</head><body><h1>Saya</h1><h2>Perkenalan</h2><p>Perkenalkan, nama saya ..... Ini adalah

<i>homepage</i><b>pertama</b> saya, karena saya baru belajar tentangcara membuat <b><i>homepage</i></b>.

</p></body>

</html> 

<html><head><title>Homepage saya</title>

</head><body><h1>Saya</h1><h2>Perkenalan</h2><p>Perkenalkan, nama saya ..... Ini adalah

<i>homepage</i><b>pertama</b> saya, karena saya baru belajar tentangcara membuat <b><i>homepage</i></b>.

</p></body>

</html> 

9

Daftar Tag• <html> Dokumen• <head> Header• <title> Judul dokumen• <body> Isi dokumen• <h1>…<h6> Judul paragraf• <p> Paragraf• <b>,<i>,<u>,<sup>,<sub> Atribut• <br> Ganti baris• <font> Font• <li>,<ol>,<ul> Enumerasi• <hr> Garis mendatar• <img> Gambar• <a> Link (kaitan/rujukan)• <table> Tabel•  Komentar• <frame>,<frameset>,<iframe> Frame (bingkai)• <form> Formulir isian• <input>,<textarea>,<select> Komponen isian pada formulir• <map> Link berdasar area pada gambar• <span>,<div> Pengelompokan elemen dokumen

10

Tag Judul (Heading)<hn>Judul paragraf</hn>n = 1,2,3,4,5,6 (tingkat judul)Untuk menuliskan judul suatu paragraf<h1>Judul Tingkat

1</h1><h2>Judul Tingkat





6</h6>

<h1>Judul Tingkat1</h1>






Judul Tingkat 1Judul Tingkat 2Judul Tingkat 3Judul Tingkat 4Judul Tingkat 5Judul Tingkat 6

11

Tag Paragraf (Paragraph)<p>paragraf</p>Untuk menandai suatu paragraf.

Suatu paragraf akan terlihat dibatasi oleh satu bariskosong sebelum dan sesudahnya.

<p>Ini adalah homepage pertamasaya, karena saya baru

belajartentang cara membuat

homepage.</p>

<p>Homepage ini masih dalamtahap pengembangan, oleh karenaitutampilannya masih terlalusederhana.</p><p>Saya akanberusaha untuk terusmemperbaiki homepage saya ini,sehingga semakin lama semakinmenarik untuk dilihat.</p>

<p>Ini adalah homepage pertamasaya, karena saya baru

belajartentang cara membuat

homepage.</p>

<p>Homepage ini masih dalamtahap pengembangan, oleh karenaitutampilannya masih terlalusederhana.</p><p>Saya akanberusaha untuk terusmemperbaiki homepage saya ini,sehingga semakin lama semakinmenarik untuk dilihat.</p>

Ini adalah homepage pertama saya,karena saya baru belajar tentang caramembuat homepage.

Homepage ini masih dalam tahappengembangan, oleh karena itutampilannya masih terlalu sederhana.

Saya akan berusaha untuk terusmemperbaiki homepage saya ini,sehingga semakin lama semakinmenarik untuk dilihat.

12

Tag Atribut 1 (Bold, Italic, Underline)<b>Kalimat yang dicetak tebal</b><i>Kalimat yang dicetak miring</i><u>Kalimat yang digarisbawahi</u>

Untuk menandai bagian kalimat agar dicetak tebal,miring, dan/atau digarisbawahi.

Kata dapat dicetak tebal, miring, garis bawah,tebal miring, dan kombinasi di tengah hurufnormal

<p>Kata dapat dicetak <b>tebal</b>, <i>miring</i>,<u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan<b><i><u>kombinasi</u></i></b> di tengah huruf normal</p>

<p>Kata dapat dicetak <b>tebal</b>, <i>miring</i>,<u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan<b><i><u>kombinasi</u></i></b> di tengah huruf normal</p>

13

Tag Atribut 2 (Superscript, Subscript)<sup>bagian yang dicetak tinggi</sup><sub>bagian yang dicetak rendah</sub>

Untuk menandai bagian karakter agar dicetaktinggi atau rendah, biasanya untuk rumusmatematika atau kimia.

<p>(x<sub>1</sub> + x<sub>2</sub>)<sup>2</sup> =x<sub>1</sub><sup>2</sup> + x<sub>2</sub><sup>2</sup> +2x<sub>1</sub>x<sub>2</sub></p>

<p>2H<sub>2</sub> + O<sub>2</sub> = 2 H<sub>2</sub>O

<p>(x<sub>1</sub> + x<sub>2</sub>)<sup>2</sup> =x<sub>1</sub><sup>2</sup> + x<sub>2</sub><sup>2</sup> +2x<sub>1</sub>x<sub>2</sub></p>

<p>2H<sub>2</sub> + O<sub>2</sub> = 2 H<sub>2</sub>O

(x1 + x2)2 = x12 + x2

2 + 2x1x2

2H2 + O2 = 2 H2O14

Tag Ganti Baris (Break line)<br>Untuk pindah ke baris berikutnya.Bentuk penulisan lain yang dianjurkan (XML style) :<br />

Perkenalkan,nama saya ..... Ini adalahhomepage pertama saya,karena saya baru belajar tentang caramembuat homepage.

Homepage ini masih dalam tahappengembangan,oleh karena itu tampilannya masih terlalusederhana.

Paragraf

Paragraf

Ganti baris

<p>Perkenalkan,<br />nama saya ..... Iniadalah<br />homepagepertama saya,<br /> karenasaya baru belajar tentangcara<br />membuat homepage.</p>

<p>Homepage ini masihdalam tahap pengembangan,oleh karena itutampilannya masih terlalusederhana.</p>

<p>Perkenalkan,<br />nama saya ..... Iniadalah<br />homepagepertama saya,<br /> karenasaya baru belajar tentangcara<br />membuat homepage.</p>

<p>Homepage ini masihdalam tahap pengembangan,oleh karena itutampilannya masih terlalusederhana.</p>

15

Tag Font (size)Memformat suatu bagian kalimat dengan ukuran,jenis huruf, atau warna tertentu.Tag : font Parameter : size, face, color

Ukuran<fontsize="1">satu,</font><font size="2">dua,</font><fontsize="3">tiga,</font><fontsize="4">empat,</font><fontsize="5">lima,</font><fontsize="6">enam,</font><fontsize="7">tujuh</font>

Ukuran<fontsize="1">satu,</font><font size="2">dua,</font><fontsize="3">tiga,</font><fontsize="4">empat,</font><fontsize="5">lima,</font><fontsize="6">enam,</font><fontsize="7">tujuh</font>

<font size="n"> kalimat </font>

<font size="m"> kalimat </font>

n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf)m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf)

16

Ukuran satu, dua, tiga, empat, lima, enam,

tujuh

Tag Font (face)

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

<font face="nama font"> kalimat </font>

nama font = Times New Roman, Arial,Courier New, Verdana, dll.

Homepage ini masih dalam tahap pengembanganHomepage ini masih dalam tahap pengembanganHomepage ini masih dalam tahap pengembanganHomepage ini masih dalam tahap pengembangan

<font face="Times New Roman">Homepage ini masih dalam tahappengembangan</font><br /><font face="Arial">Homepage ini masih dalam tahap pengembangan</font><br /><font face="Courier New">Homepage ini masih dalam tahap pengembangan</font><br/><font face="Verdana">Homepage ini masih dalam tahap pengembangan</font>

<font face="Times New Roman">Homepage ini masih dalam tahappengembangan</font><br /><font face="Arial">Homepage ini masih dalam tahap pengembangan</font><br /><font face="Courier New">Homepage ini masih dalam tahap pengembangan</font><br/><font face="Verdana">Homepage ini masih dalam tahap pengembangan</font>

17

Tag Font (color)

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

RedMaroonLimeGreenBlueNavyYellowFuschiaAqua

<b><font color="#FF0000">Red</font><br /><font color="#800000">Maroon</font><br /><font color="#00FF00">Lime</font><br /><font color="#008000">Green</font><br /><font color="#0000FF">Blue</font><br /><font color="#000080">Navy</font><br /><font color="#FFFF00">Yellow</font><br /><font color="#FF00FF">Fuchsia</font><br /><font color="#00FFFF">Aqua</font></b>

<b><font color="#FF0000">Red</font><br /><font color="#800000">Maroon</font><br /><font color="#00FF00">Lime</font><br /><font color="#008000">Green</font><br /><font color="#0000FF">Blue</font><br /><font color="#000080">Navy</font><br /><font color="#FFFF00">Yellow</font><br /><font color="#FF00FF">Fuchsia</font><br /><font color="#00FFFF">Aqua</font></b>

<font color="#RRGGBB"> kalimat</font>

RR = 00 .. FF (intensitas warna merah dalam heksadesimal)GG = 00 .. FF (intensitas warna hijau dalam heksadesimal)BB = 00 .. FF (intensitas warna biru dalam heksadesimal)

18

Tag Enumerasi (List, Unordered List, Ordered List)

<li>item</li>Untuk menandai suatu item dari daftar (enumerasi), diawalidengan simbol • (bullet)Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat.Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag <ol> </ol>

Ada beberapa sektor potensial:<li>Pariwisata</li><li>Seni</li><li>Budaya</li><br />Sektor tersebut merupakan ...<p>Fasilitas penginapan diIndonesia:<ol><li>Losmen</li><br />

Losmen merupakan tempatpenginapan yang berskala kecil

<li>Hotel</li><ul><li>Hotel melati</li><li>Hotel berbintang</li>

</ul></ol>Perkembangan dalam ...

Ada beberapa sektor potensial:<li>Pariwisata</li><li>Seni</li><li>Budaya</li><br />Sektor tersebut merupakan ...<p>Fasilitas penginapan diIndonesia:<ol><li>Losmen</li><br />

Losmen merupakan tempatpenginapan yang berskala kecil

<li>Hotel</li><ul><li>Hotel melati</li><li>Hotel berbintang</li>

</ul></ol>Perkembangan dalam ...

Ada beberapa sektor potensial: Pariwisata Seni BudayaSektor tersebut merupakan …

Fasilitas penginapan di Indonesia:

1. LosmenLosmen merupakan tempat

penginapanyang berskala kecil

2. Hotelo Hotel melatio Hotel berbintang

Perkembangan dalam ... 19

Tag Garis Mendatar (Horizontal Line)

<hr>membentuk garis pemisah mendatar.Bentuk penulisan lain yang dianjurkan (XML style) :<hr />

Perkenalkan, nama saya... Ini adalah homepagepertama saya, karenasaya baru belajartentang cara membuathomepage.<hr />Homepage ini masih dalamtahap pengembangan, olehkarena itu tampilannyamasih terlalu sederhana.

Perkenalkan, nama saya... Ini adalah homepagepertama saya, karenasaya baru belajartentang cara membuathomepage.<hr />Homepage ini masih dalamtahap pengembangan, olehkarena itu tampilannyamasih terlalu sederhana.

Perkenalkan, nama saya ... Iniadalah homepage pertama saya,karena saya baru belajar tentangcara membuat homepage.

Homepage ini masih dalam tahappengembangan,oleh karena itu tampilannya masihterlalu sederhana.

20

Tag Gambar (Image)<img src="NamaFileGambar">

NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG.Untuk menampilkan sebuah file gambar.Bentuk penulisan lain yang dianjurkan (XML style) :

<img src="NamaFileGambar" />

<img src="cover.jpg" align="left"/> Perkenalkan, nama saya ... Iniadalah homepage pertama saya,karena saya baru belajar tentangcara membuat homepage.Homepage ini masih dalam tahappengembangan, oleh karena itutampilannya masih terlalu <imgsrc="logo.gif" alt="Logo" />sederhana. Saya akan berusahauntuk terus memperbaiki homepagesaya ini, sehingga semakin lamasemakin menarik untuk dilihat.

<img src="cover.jpg" align="left"/> Perkenalkan, nama saya ... Iniadalah homepage pertama saya,karena saya baru belajar tentangcara membuat homepage.Homepage ini masih dalam tahappengembangan, oleh karena itutampilannya masih terlalu <imgsrc="logo.gif" alt="Logo" />sederhana. Saya akan berusahauntuk terus memperbaiki homepagesaya ini, sehingga semakin lamasemakin menarik untuk dilihat.

Perkenalkan, nama saya ...Ini adalah homepage pertama

saya, karena saya baru belajar tentangcara membuat homepage. Homepageini masih dalam tahap pengembangan,oleh karena itu tampilannya

masih terlalu sederhana. Sayaakan berusaha untuk terusmemperbaiki homepage saya ini,sehingga semakin lama semakinmenarik untuk dilihat.

21

Tag Tabel (Table) - data

<table> definisi tabel </table>Menampilkan data dalam bentuk tabelTabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom.Tag untuk penanda baris adalah <tr> definisi baris </tr>Tag untuk penanda kolom adalah <td>data</td>

<table border="1"><tr>

<td>aaa</td><td>bbb</td><td>ccc</td>

</tr><tr>

<td>ddd</td><td>eee</td><td>fff</td></tr>

</table>

<table border="1"><tr>

<td>aaa</td><td>bbb</td><td>ccc</td>

</tr><tr>

<td>ddd</td><td>eee</td><td>fff</td></tr>

</table>22

Tag Tabel (Table) - layoutUntuk menata letak (layout) isi dokumen

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

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

Desain/Layout Halaman

Navigasi

Logo

Navigasi

Navigasi

Navigasi

Logo

Navigasi

24

Tag Link (Anchor)<a href="Link">Kata yang di-click</a><a name="#Acuan">Kata yang dituju</a>

Link = Alamat URL atau nama file dan/atau acuan yang ditujuAcuan = Kata sembarang sebagai penanda (bookmark)

membentuk link ke URL/file/bagian dokumen lain.Saya ingin melihat <a href="hal2.html">halaman selanjutnya</a>. Sayainginlangsung menuju ke <a href="#akhir">bagian akhir</a>. Saya inginmenuju ke<a href="hal2.html#bawah">bagian bawah pada halamanselanjutnya</a>.<br /><a href="http://www.detik.com"><img src="gambar.gif" /></a> Homepagedetik.com.<br />Ini bagian tengah.<br /><a name="#akhir">Ini bagianakhir.</a>

Saya ingin melihat <a href="hal2.html">halaman selanjutnya</a>. Sayainginlangsung menuju ke <a href="#akhir">bagian akhir</a>. Saya inginmenuju ke<a href="hal2.html#bawah">bagian bawah pada halamanselanjutnya</a>.<br /><a href="http://www.detik.com"><img src="gambar.gif" /></a> Homepagedetik.com.<br />Ini bagian tengah.<br /><a name="#akhir">Ini bagianakhir.</a>

hal1.html

25

Frame & Frameset• Lebih dari satu dokumen dapat ditampilkan secara bersamaan dalam satu tampilan• Setiap dokumen ditampilkan dalam sebuah frame• Sebuah frameset menentukan tata letak, ukuran, dan banyaknya frame yang akan

ditampilkan• Di dalam frameset boleh ada frameset lain (beranak)• Dibutuhkan satu dokumen tersendiri yang berisi definisi frameset. Dokumen tersebut

tidak mempunyai isi dokumen (tidak ada <body> </body>)• Skema dasar dokumen frameset :

<html>

<head>

<title>Judul dokumen</title>

</head>

<frameset>

<frame src="namafile1">

<frame src="namafile2">

...dst (atau frameset yang lain)<noframes>

bagian ini ditampilkan jika browser tidak mendukung frame</noframes>

</frameset>

</html>

26

<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



4</a></li></ol></noframes>

</frameset></html>

Contoh Dokumen Frameset

27

iframe (inline frame)• Di dalam sebuah dokumen (induk) dapat ditampilkan satu atau beberapa dokumen lain

(anak)• Setiap dokumen (anak) yang disisipkan diletakkan dalam sebuah iframe• 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">

bagian ini ditampilkan jika browser tidak mendukung frame</iframe>

…isi dokumen…</body>

</html>

28

Contoh inline frame<html>

<head><title>Kisah Sekolah</title>

</head><body>

<h1>Kisah-kisah di sekolah</h1>Masa sekolah adalah masa yang menyenangkan

bagiku. Sebagian besar waktu hidupku sampaisaat ini dihabiskan untuk sekolah, dan aku

sangat menikmati saat-saat itu. Inilahsebagian 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-temanyang kudapat sungguh sangat mewarnaihidupku dan memberikan pengaruh besarterhadap diriku.

</body></html>

29

form• Sebuah dokumen interaktif dapat menangani input dari user• Analoginya : bahwa dokumen adalah sebuah formulir isian• Sebuah dokumen dapat mengandung satu atau beberapa form• Setiap form mewakili sebuah task spesifik (login, mengisi biodata, memilih bahasa, dll)• Setiap form dapat menghimpun satu atau beberapa elemen input• Ada beberapa jenis elemen input untuk menangani berbagai karakteristik data input• Di setiap form harus ditentukan nama program (di sisi server) yang akan menangani data

isian yang dikirim (di-submit)• Skema dasar dokumen form :

<form method="POST" action="namaprogram">

bagian ini berisi bagian dokumen HTML yang akan menggambarkan formulir isiandengan susunan sejumlah elemen input berbagai jenis

</form>

• Contoh sebuah form sederhana untuk meminta nama user :<form method="POST" action="proses.php">

<label for="nama">Ketikkan nama Anda:</label><br>

<input type="text" name="nama" id="nama"><br>

<input type="submit" value="Kirim">

</form>

30

Karakteristik data input• Teks satu baris (single-line text)

<input type="text">

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

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

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

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

• Centang (on/off)<input type="checkbox">

• Data bawaan/tersembunyi (hidden)<input type="hidden">

• File<input type="file">

• Koordinat 2D dalam sebuah bidang gambar<input type="image">

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

Tag input• <input type="jenis" name="nama" id="id" value="nilai"

disabled>

type : text, password, radio, checkbox, image, submit, reset, button, hidden, filename : identifier untuk sisi serverid : identifier untuk sisi browservalue : nilai defaultdisabled : jika disebutkan maka elemen tidak aktif (tidak digunakan)

• <input type="[text|password]" name="nama" readonlysize="m" maxlength="n">

readonly : jika disebutkan maka elemen tidak bisa diubah nilainyasize : ukuran lebar dalam banyaknya karakter (bisa di-override oleh CSS)maxlength : banyaknya karakter maksimal yang dapat dimasukkan user

• <input type="[radio|checkbox]" name="nama" checked>

checked : jika disebutkan maka defaultnya adalah dalam keadaan dipilih• <input type="image" src="gambar" name="nama"

alt="alternatif">

src : nama file gambaralt : teks yang ditampilkan bila browser tidak dapat menampilkan gambar 32

Tag textarea, select, button• <textarea name="nama" rows="b"

cols="k">nilai</textarea>

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

• <select name="nama" multiple size="r"><option value="nilai1" selected>teks1</option><option value="nilai2">teks2</option>

…</select>

multiple : jika disebutkan maka pilihan boleh lebih dari satu (sambil menekan tombol Ctrl)size : banyaknya baris pilihan yang ditampilkan (default=1)selected : jika disebutkan maka defaultnya dalam keadaan terpilih

• <button type="jenis" name="name" value="nilai">tampilan

</button>

type : submit, reset, buttontampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol 33

Contoh form (1)<form method="POST" action="proses.php">Silahkan isi data Anda<input type="hidden" name="halaman" value="1"><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>34

Contoh form (2)<form method="POST" action="proses.php" enctype="multipart/form-data">

<input type="hidden" name="halaman" value="2"><table border="1">

<tr><td><label for="kota">Kota:</label></td><td><select name="kota" id="kota">

<option value="">pilih kota...</option><option value="bdg">Bandung</option><option value="jkt">Jakarta</option><option value="sby">Surabaya</option>

</select></td></tr><tr>

<td><label for="kerja">Pekerjaan:</label></td><td><select name="kerja" id="kerja" size="4">

<option value="a">Mahasiswa</option><option value="b">Pegawai swasta</option><option value="c">Pegawai negeri</option><option value="d">Wiraswasta</option>


<td><label for="bahasa">Bahasa:</label><br>(bisa lebih dari satu)</td><td><select name="bahasa" id="bahasa" size="4" multiple>

<option value="id">Indonesia</option><option value="en">Inggris</option><option value="ch">Cina</option><option value="fr">Prancis</option>


<td>Hobi:<br>(bisa lebih dari satu)</td><td><input type="checkbox" name="hobi" value="1">Berenang<br>

<input type="checkbox" name="hobi" value="2">Nonton film<br><input type="checkbox" name="hobi" value="3">Musik</td>

</tr><tr><td><label for="foto">Foto:</label></td><td><input type="file" name="foto" id="foto" size="10"></td></tr>

</table><button type="submit">Kirim <img src="smiley.gif"></button><button type="reset">Reset <img src="tanya.gif"></button>

</form>35

Contoh form (3)

<form method="POST" action="proses.php"><table border="1">

<tr><td><label for="kode">Kode:</label></td><td><input type="text" name="kode" id="kode" maxlength="3" size="3"></td>

</tr><tr>

<td><label for="jenis">Jenis:</label></td><td><select name="jenis" id="jenis" size="4">

<option value="pat">Kapal patroli</option><option value="per">Kapal perusak</option><option value="pud">Pangkalan udara</option><option value="mar">Markas</option><option value="log">Logistik</option>

</select></td><tr>

<td colspan="2">Tunjuk lokasi penempatan :<br><input type="image" src="peta1.gif"></td>

</tr></table>

</form>

36

CSSCascading Style Sheet

Spesifikasi lengkap di :http://www.w3.org/TR/CSS3

Mengubah Text

Mengubah Warna

Mengubah Posisi

Mengubah Ukuran

Bagaimana cara menempatkan CSS?

Ada 3 cara yaitu :

• Inline ( pada tag HTML-nya )• Embedded ( Menempel pada tag <head> )• External ( File lain / biasanya file dengan extensi .css )

Inline CSS

<body><h1 style="color:red;">Contoh css inline </h1></body>

Embedded CSS

<head><style type="text/css">

p {color:red;

}</style></head><body>......</body>

Contoh efek <U>..</U> menjadi pengatur warna

Tag <U>..</U> memiliki “tugas” baru disamping“tugas” lama, yaitu warna tulisan.

Hasilnya sama dengan kodeberikut :

Efek yang sama pada dua kode I dan U

Tag <U>=under lineDan tag <I> =italicDiberi efekbaru, yaituwarna merahhurufnyaTag <B> =bold, diberiefek warnahijau

47

Beberapa efek pada satu kode B

• Misalkan pada tag <B>akan dilekatkan efekwarna, jenis huruf dangaya huruf

• Perintahnya CSS-style nya• B { color:lime;

text-decoration:underline;font-family:Arial }

External CSS: tag link (bagus)

<head><linkrel="stylesheet"href="css_ku.css">

</head><body>

......</body>

2. CSS-GLOBAL :Sekali Tulis, pakai bersama

Kita dapatmendefinisikan suatufile *.css yang berisikode-kode CSS

File tersebut dapatdiacu oleh setiap HTML

Jika file HTML akanmengacu file CSStersebut ditulis :

<HEAD> <LINK REL="stylesheet"

HREF="global.css" TYPE="text/css"> </HEAD>

B {color: red; text-decoration: underline;font-family: Arial }

I {color:blue; font-family:"MonotypeCorsiva"; font-size:20}

File : global.css

Css_global.html

Css_global2.html

Digunakan oleh

Dan Digunakanoleh

Selanjutnya 2 file html digabung dalam 1 frame

Klik lihathasil

Terlihat :Efek dari tag<B> dan tag <I>yangdidefinisikandalam STYLEdi file global.css

Bagaimana format / cara kerja CSS?

Ada 3 bagian penting css :1.Selector2.Properties3.Value / nilai

1. Selector

Pemilihan elemen

contoh :

p { color : red; }

2. Properties

Bagian apa yg ingin diubah

contoh :

p { color : red; }

3. Values / Nilai

Isi dari perubahan,contoh :

p { color : red; }

dengan kata lain css ini melakukan perubahan warna (color)merah (red) pada tag <p>

Aturan penulisan CSS

Sintaks CSS

1. Selector2. Deklarasi3. Cascade

1. Selector ( sebelum kurung kurawal )

Cara melakukan seleksi :1. Element2. Class3. Id4. Posisi dokument


Cara melakukan seleksi :1.Element

Contoh :p { color : red; }

Pilih semua element <p> pada semua dokumen HTML.Contoh :<body><p>tulisan ini akan berwarna merah</p></body>


Cara melakukan seleksi :2. Class

Contoh :.namakelas { color : red; }

Pilih semua element yang memiliki nama class "namakelas"pada semua dokumen HTML. Contoh :<body><div class="namakelas"><p> ini anggota div dengan nama kelas : "namakelas" </p></div>

Contoh class (untuk ubah warna)

Class :merah berefekwarna huruf menjadimerah dan class:biruberefek warna hurufmenjadi biru. Dapat di-inset pada tag <P> dantag <b>

Klik lihathasil

Contoh class (untuk ubah ukuran huruf)

Font-size : xx-small, x-small, small, medium,large, x-large, xx-large

Klik lihathasil

Contoh class (untuk ubah warna)

Class :merah berefekwarna huruf menjadimerah dan class:biruberefek warna hurufmenjadi biru. Dapat di-inset pada tag <P> dantag <b>

Klik lihathasil


Cara melakukan seleksi :3. Id

Contoh :#idunik { color : red; }

Pilih semua element yang memiliki nama id "idunik" padasemua dokumen HTML. Contoh :<body><div id="idunik"><p> ini anggota div dengan nama id unik : "idunik" </p></div>


Cara melakukan seleksi :4. Posisi di Dokumen

Pilih semua elemen p yang diturunkan dari elemen denganid yang sama dengan #about

1. Selector ( sebelum kurung kurawal )Contoh-contoh lain

2. Deklarasi ( properties dan value )

CSS mendeklarasikan sesuatu yang isinya bisa kita ubah,contoh :• font• color• background-color• border

(Kata diatas adalah properties)


Setiap properties memiliki nilai (values) yang bisa kitaaplikasikan, contoh :


Properti bisa granular, contoh properties "border" :


Properties granular bisa juga disingkat atau disebut shorthand


UNIT : unit adalah satuan yang digunakan untuk mengukursesuatu ( font, border, padding dll )

Unit ada 2 macam yaitu Absolut dan Relatif

Contoh absolut adalah px ( pixel )

Contoh relatf adalah em dan % (persen)

3. Cascade

Secara kata, cascade berarti mengalir kebawah. Pengertiancascade disini adalah :

Menentukan deklarasi yang manakah, yang akan diaplikasikankedalam elemen HTML

Contoh :p { color : red; }p { color : blue; }

maka yang menang adalah warna biru, karena biru adalah yangterakhir diaplikasikan.

3. Cascade

Jadi bisa dikatakan, deklarasi terakhirlah yang menang.

Tetapi sebenarnya pemenangnya adalah :

Deklarasi yang paling akhir DAN paling spesifik

3. Cascade

Layout

1.Model Box2.Display3.Position4.Float

1. Box Model

terdiri dari :• Content / isi• Padding• Border• Margin

TUGAS 3

• Buatlah subdomain pada domain yang telahAnda buat.

• Didalam subdomain tersebut buatlah halamanweb yang berisi :– HTML (wajib)– CSS eksternal (wajib)– Java script, JSON, VBScript, dll

• Sediakan link untuk download sourcecodeanda

78

Pengantar Pemrograman Web - gembong.lecture.ub.ac.id · Tag Paragraf (Paragraph) paragraf Untuk...

Documents

Transcript of Pengantar Pemrograman Web - gembong.lecture.ub.ac.id · Tag Paragraf (Paragraph) paragraf Untuk...