Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

HTML Lanjut & CSS By : Muhammad Zen S. Hadi Digital Communication Laboratory EEPIS-ITS.

Presentasi serupa


Presentasi berjudul: "HTML Lanjut & CSS By : Muhammad Zen S. Hadi Digital Communication Laboratory EEPIS-ITS."— Transcript presentasi:

1 HTML Lanjut & CSS By : Muhammad Zen S. Hadi Digital 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 :

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

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

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 : …  Untuk membuat form : …

9 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 ("http://www.microsoft.com"); window.open ("http://www.microsoft.com"); } <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>

10  Untuk memasukkan data.  Atribut : type, name, size, maxlength, value. HTML Input Element - Text <body> Nama : Nama : Hobby : Hobby : </form></body>

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

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

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

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

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

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

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

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

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


Download ppt "HTML Lanjut & CSS By : Muhammad Zen S. Hadi Digital Communication Laboratory EEPIS-ITS."

Presentasi serupa


Iklan oleh Google