1 / 21

HTML Lanjut & CSS

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

medge-cruz
Download Presentation

HTML Lanjut & CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Lanjut & CSS By : Muhammad Zen S. HadiDigital Communication Laboratory EEPIS-ITS

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

  3. 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”>

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

  5. 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 :

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

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

  8. Element Form • Untuk membuat form : <form> … </form>

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

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

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

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

  13. HTML Input Element - TextArea • Atribut : cols, rows, name, size. <body> <form> Komentar anda : <br> <textarea name="komentar" rows="5" cols="40"> </textarea> </form> </body>

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

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

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

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

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

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

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

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

More Related