HTML www.amikom.info HTML HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumendokumen web yang ditulis atau berformat HTML (hypertext markup language). STRUKTUR HTML DOCUMENT Document HTML bisa di bagi mejadi tiga bagian utama: HTML Setiap document HTML harus di awali dan di tutup dengan tag HTML <HTML></HTML> tag HTML memberi tahu browser bahawa yang di dalam kedua tag tersebut adalah document HTML. HEAD Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. BODY Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page. PENGATURAN PROPERTI HALAMAN WEB Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen. Atribut elemen body background= lokasi dan nama file (latar belakang image dokumen) bgcolor = warna (warna latar belakang dokumen, default putih) text = warna (warna teks dokumen, default hitam) link = warna (warna link dokumen, default biru) vlink = warna (warna visited link dokumen, default ungu) alink = warna (warna active link dokumen, default merah) 1
KODE WARNA Berikut ini adalah contoh beberapa kode warna : Warna Heksadesimal White #FFFFFF Black #000000 Red #FF0000 Green #00FF00 Blue #0000FF Magenta #FF00FF Cyan #00FFFF Yellow #FFFF00 Aquamarine #70DB93 Chocolate #5C3317 Violet #9F5F9F Brass #B5A642 Copper #B87333 Pink #FF6EC7 Orange #FF7F00 HEADING Block level element yang sering di gunakan : Heading (H1 sampai H6) title>heading Elements</title> <h1>heading one</h1> <h2>heading two</h2> <h3>heading three</h3> <h4>heading four</h4> <h5>heading five</h5> <h6>heading six</h6> PARAGRAF (P) <title>formating Paragraf</title> <h3>stmik AMIKOM</h3> <p> tempat kuliah orang berdasi</p> <h2>amikom PURWOKETO</h2> <p>sarana pasti meraij prestasi</p> 2
LISTING Properti <li> digunakan untuk menampilkan informasi dalam bentuk daftar (list). Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format bullet (unordered list <ul>) dan dalam bentuk nomor (ordered list <ol>). Atribut Elemen List Ordered list type = [ 1 a A i I ] (tipe penomoran, default 1) Unordered list type = [ disc square circle ] (tipe bullet, default disc) <title>latihan Listing</title> <li> <ul> <ol> <body bgcolor=#990066 text=#ffccff> <h1>toko BUKU SERBA MURAH</h1> <hr width=50% align=left> Toko kami menyediakan <h2>alat Tulis</h2> <ol> <li>pensil <li>ballpoint <li>penggaris <li>dll. </ol> <h2>buku-buku Pelajaran</h2> <ol type=a> <li>ilmu pasti <ul> <li>fisika <li>kimiya <li>biyologi </ul> <li>ilmu bumi <li>sejarah <li>dll. </ol> 3
TABLE Membuat table Tag <TABLE> digunaka untuk membuat table dalam document HTML, bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag <TD>. <title> Table</title> <table border="1"> <td>table dengan sigle cell</td> </table> Atribut Elemen Tabel width = panjang (lebar tabel, pixel atau persen) height = panjang (tinggi tabel, pixel atau persen) border = pixel (tebal garis tepi) cellspacing = pixel (spasi antar sel) cellpadding = pixel (spasi di dalam sel) align = [ left center right ] (perataan tabel) bgcolor = warna (warna latar belakang tabel) Atribut Table Row align = [left center right] (perataan sebaris sel secara horisontal) valign = [top middle bottom] (perataan sebaris sel secara vertikal) bgcolor = warna (warna latar belakang baris) Atribut Table Data rowspan = angka (baris yang di span oleh sel) colspan = angka (kolom yang di span oleh sel) align = [ left center right ] (perataan horisontal) valign = [ top middle bottom ] (perataan vertikal) width = pixel (lebar sel, pixel atau persen) height = pixel (tinggi sel, pixel atau persen) bgcolor = warna (warna latar belakang sel) IMAGE A. Format Image Ada banyak format image, tapi ada tiga jenis format yang paling sering di gunakan : GIF (Graphical Interchange Format) (.GIF) JPEG (Joint Photographic Expert Image) (.JPG) PNG (Portable Network Graphics) B. Insert Image ke Document Tag IMG di gunakan untuk menginsertkan image ke document HTML. Syntax nya: <IMG SRC = URL > 4
<title> Image</title> <img src="gambar.gif"> Attribute Value Description Align Center justify left right Baseline top bottom middle.. Top, bottom, middle digunakan untuk menentukan posisi image terhadap text Left, right, center untuk menentukan posisi image di document MEMBUAT LINK Elemen link berfungsi sebagai penghubung antara suatu halaman dengan halaman lain, atau ke URL lain bahkan dalam satu halaman untuk berpindah ke sub judul yang lain. <a href = URL_tujuan>hypertext</A> Absolute Address - merupakan full internet address (URL) yang meliputi protocol, network location dan path dan nama file. Contoh: http ://www.yahoo.com/ Relatif Address - URL yang tidak menyebutkan protocol dan network locationya FORM Atribut Elemen Form action = lokasi dan nama file (file yang menangani form) method = [ get post ] (metoda HTTP untuk men-submit form) Properti Masukan Pada Elemen Form 1. Text Box <input type="text"> Digunakan untuk memasukkan input berupa text. size = ukuran dari textbox dalam karakter, default 20 maxsize = maksimal banyaknya karakter yang dapat diterima value = akan menampilkan isinya sebagai nilai default 2. Password <input type="password"> 5
Digunakan untuk memasukkan password. size = ukuran dari textbox dalam karakter, default 20 maxsize = maksimal banyaknya karakter yang dapat diterima 3. Hidden <input type="hidden"> Digunakan untuk mengirim data ke suatu aplikasi yang tidak diinginkan untuk dilihat oleh browser. value = nilai dari variabel 4. Check Box <input type="checkbox"> Check box digunakan untuk dapat memilih lebih dari satu pilihan. value = nilai dari variabel checked (checkbox yang sudah ditandai) 5. Radio Button <input type="radio"> Radio button digunakan untuk dapat memilih hanya salah satu pilihan. value = nilai dari variabel checked (radio button yang sudah ditandai) 6. Push Button <input type="button"> Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi. value = label teks diatas tombol 7. Submit <input type="submit"> Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen FORM. value = label teks diatas tombol 8. Image Submit Button <input type="image" src="url"> Digunakan untuk menggantikan tombol standar submit dengan image. 9. Reset <input type="reset"> Digunakan untuk mereset semua masukan dalam form. value = text label on the button 10. Text Area <textarea> </textarea> Elemen untuk memasukkan teks secara leluasa seperti notepad. rows = panjang baris dalam karakter cols = tinggi dalam karakter 11. Select <select> </select> Daftar isi dalam properti select mengunakan tag <option> size = jumlah pilihan yang dapat terlihat 6
File formulir1.php: <title> Formulir Online </title> <body bgcolor="#ffffff"> <form action=formulir2.php method=post> <font face=verdana size=2 color="#000000"> <h3 align=left> FORMULIR ONLINE </h3> </font> <pre> Nama : <input type=text name=nama size=15> E-Mail : <input type=text name=email size=20> Alamat : <input type=text name=alamat size=20> Kota : <input type=text name=kota size=12> Telepon : <input type=text name=telepon size=12> Tulis pesanan Anda dibawah ini: <textarea name=pesanan rows=5 cols=30> </textarea> <input type=submit value="kirim"> <input type=reset value="hapus"> </pre> </form> www.amikom.info 7