HTML Lanjut & CSS By : Muhammad Zen S. Hadi Digital Communication Laboratory EEPIS-ITS
Objectives Setelah menyelesaikan bab ini, anda diharapkan dapat: Mengerti tag-tag tentang images di HTML Memahami tag-tag pembuatan Form dan Frame Mengerti tag-tag CSS dalam design web Membuat halaman web dinamis dengan CSS.
IMAGE Format image : GIF (Graphical Interchange Format) (.GIF) JPEG (Joint Photographic Expert Image) (.JPG) PNG (Portable Network Graphics) Insert image ke dokumen :
Contoh : IMAGE – Cont. 1 <html><head> Working with Image Working with Image </head><body><p> <img src="MIR.jpg" height="100" width="100" align="middle">Aligned at Middle align="middle">Aligned at Middle </body></html>
IMAGE MAP Image map yaitu suatu area pada image yang bisa kita beri hyperlink area ini biasanya disebut “hot spots” Coordinat hotspots ditentukan oleh bidang geometry :
IMAGE MAP – Cont. 1 Contoh : <body> <img src="coba/mir.jpg" width="400" height="200" border="5" usemap="#satelit"> <area shape="rect" <area shape="rect" coords="0,0,200,100" coords="0,0,200,100" href="file1.htm" href="file1.htm" alt="kotak link"> alt="kotak link"></map></body>
FORM Kegunaan Form : memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang di sediakan. memperoleh informasi pembelian secara online memperoleh feedback dari user mengenai website anda.
Element Form Untuk membuat form : … Untuk membuat form : …
HTML Input Element - Button Atribut : type, value, onclick. Contoh Button Contoh Button function kirim_form () function kirim_form () {window.alert ("Form telah sukses dikirim"); {window.alert ("Form telah sukses dikirim"); window.open (" window.open (" } <body><form> Klik tombol dibawah ini. Klik tombol dibawah ini. <input type="button" <input type="button" value="Kirim Form" value="Kirim Form" onclick="kirim_form()"> onclick="kirim_form()"></form></body></html>
Untuk memasukkan data. Atribut : type, name, size, maxlength, value. HTML Input Element - Text <body> Nama : Nama : Hobby : Hobby : </form></body>
Atribut : Type, Name, Checked. <body><form> Buah yang anda sukai : Buah yang anda sukai : Anggur Anggur Jeruk Jeruk <input type="checkbox" <input type="checkbox" name="melon"> name="melon"> Melon Melon </form></body> HTML Input Element - CheckBox
Atribut : Type, name, value, checked. HTML Input Element - Radio <body><form> Jenis Kelamin : Jenis Kelamin : <input type="radio" name="sex" <input type="radio" name="sex" value="p" checked> value="p" checked> Pria Pria <input type="radio" name="sex“ <input type="radio" name="sex“ value="w"> value="w"> Wanita Wanita </form></body>
Atribut : cols, rows, name, size. HTML Input Element - TextArea <body><form> Komentar anda : Komentar anda : <textarea name="komentar" <textarea name="komentar" rows="5" cols="40"> rows="5" cols="40"> </form></body>
Perintah : tag Perintah : tag HTML Input Element - Combo <form> Musik yang paling anda sukai : Musik yang paling anda sukai : Jazz Jazz Rock Rock Pop Pop Lain Lain </form>
HTML Input Element – List Box Hampir sama dengan combo, tambahan : size=“jml_yg_ditampilkan” <form> Musik yang paling anda sukai : Musik yang paling anda sukai : Jazz Jazz Rock Rock Pop Pop Lain Lain </form>
CASCADING STYLE SHEETS Feature untuk membuat dynamic HTML. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template) Membuat special efek (mendefinisikan style untuk dengan style bold dan italic dan berwarna biru) Support ke semua browser.
Aturan Penulisan CSS Nilai untuk property tidak boleh dalam tanda petik. contoh : color : green; Nama property bersifat case sensitive. color : green; property : color value : green
Cara Penggunaan External Style Sheet Bentuk : Bentuk : ” rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet type=“text/css”, file yang dipanggil berupa css href=“css_files.css”, alamat dokumen stylesheet yang dipanggil
Contoh External Style Sheet Contoh script efek.css body { color: green; color: green; background: white; background: white; font-family : arial; font-family : arial; } <HTML> centranet centranet <LINK REL="STYLESHEET" <LINK REL="STYLESHEET" TYPE="text/css" HREF="efek.css"> TYPE="text/css" HREF="efek.css"> PENS ITS PENS ITS PENS ITS adalah kampus teknik yang concern ke bidang elektro PENS ITS adalah kampus teknik yang concern ke bidang elektro</BODY></HTML>
Cara Penggunaan – Cont.1 Internal Style Sheet Bentuk umum : …definisi style… …definisi style…</style> <HTML> centranet centranet body { body { color: white; color: white; background: green; background: green; font-family : arial; } <H1>Zefnet</H1> Zefnet adalah sebuah web Developer dan Linux Center Zefnet adalah sebuah web Developer dan Linux Center</BODY></HTML>
Inline Style sheet Cara Penggunaan – Cont.2 <HTML> centranet centranet <BODY style="color: white; <BODY style="color: white; background: green; background: green; font-family : arial;“ > font-family : arial;“ ><H1>ZEFNET</H1> ZEFNET adalah sebuah web Developer dan Linux Center ZEFNET adalah sebuah web Developer dan Linux Center</BODY></HTML>