slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML Lanjut & CSS PowerPoint Presentation
Download Presentation
HTML Lanjut & CSS

Loading in 2 Seconds...

play fullscreen
1 / 21
medge-cruz

HTML Lanjut & CSS - PowerPoint PPT Presentation

139 Views
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. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

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