Download
1 / 21
210 likes | 367 Views
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
E N D
HTML Lanjut & CSS By : Muhammad Zen S. HadiDigital 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 : <IMG SRC “URL”>
IMAGE – Cont. 1 • Contoh : <html> <head> <title>Working with Image</title> </head> <body> <p> <img src="MIR.jpg" height="100" width="100" align="middle">Aligned at Middle </p> </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"> <map name="satelit"> <area shape="rect" coords="0,0,200,100" href="file1.htm" 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 : <form> … </form>
HTML Input Element - Button • Atribut : type, value, onclick. <html> <head> <title>Contoh Button</title> <script language="JavaScript"> function kirim_form () {window.alert ("Form telah sukses dikirim"); window.open ("http://www.microsoft.com"); } </script> </head> <body> <form> Klik tombol dibawah ini.<br> <input type="button" value="Kirim Form" onclick="kirim_form()"> </form> </body> </html>
HTML Input Element - Text • Untuk memasukkan data. • Atribut : type, name, size, maxlength, value. <body> <form action="info.htm" method="post"> Nama : <input type="text" name="nama" size="20"> <br> Hobby : <input type="text" name="hobby" size="20"> <br> <input type="submit" value="kirim"> <input type="reset" value="kosongkan"> </form> </body>
HTML Input Element - CheckBox • Atribut : Type, Name, Checked. <body> <form> Buah yang anda sukai : <br> <input type="checkbox" name="anggur" checked> Anggur <br> <input type="checkbox" name="jeruk"> Jeruk <br> <input type="checkbox" name="melon"> Melon <br> </form> </body>
HTML Input Element - Radio • Atribut : Type, name, value, checked. <body> <form> Jenis Kelamin : <br> <input type="radio" name="sex" value="p" checked> Pria <br> <input type="radio" name="sex“ value="w"> Wanita <br> </form> </body>
HTML Input Element - TextArea • Atribut : cols, rows, name, size. <body> <form> Komentar anda : <br> <textarea name="komentar" rows="5" cols="40"> </textarea> </form> </body>
HTML Input Element - Combo • Perintah : tag <select> <form> Musik yang paling anda sukai : <br> <select name="musik"> <option value="Jazz"> Jazz <option value="Rock"> Rock <option value="Pop"> Pop <option value="Lain2"> Lain </select> </form>
HTML Input Element – List Box • Hampir sama dengan combo, tambahan : size=“jml_yg_ditampilkan” <form> Musik yang paling anda sukai : <br> <select name="musik" size="2"> <option value="Jazz" selected> Jazz <option value="Rock"> Rock <option value="Pop"> Pop <option value="Lain2"> Lain </select> </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 <H1> 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 : <link rel=“stylesheet” type=“text/css” href=“css_files.css”> • <link, merupakan tag pembuka diakhiri dengan tanda “>” • 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; background: white; font-family : arial; } <HTML> <HEAD> <TITLE>centranet</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="efek.css"> </HEAD> <BODY> <H1>PENS ITS</H1> <P> PENS ITS adalah kampus teknik yang concern ke bidang elektro </BODY> </HTML>
Cara Penggunaan – Cont.1 <HTML> <HEAD> <TITLE>centranet</TITLE> <STYLE type="text/css"> body { color: white; background: green; font-family : arial; } </STYLE> </HEAD> <BODY> <H1>Zefnet</H1> <P>Zefnet adalah sebuah web Developer dan Linux Center </BODY> </HTML> • Internal Style Sheet Bentuk umum : <style type=“text/css”> …definisi style… </style>
Cara Penggunaan – Cont.2 • Inline Style sheet <HTML> <HEAD> <TITLE>centranet</TITLE> </HEAD> <BODY style="color: white; background: green; font-family : arial;“ > <H1>ZEFNET</H1> <P>ZEFNET adalah sebuah web Developer dan Linux Center </BODY> </HTML>
