materi word

HTML Lanjut & CSSHTML Lanjut & CSS

By : Muhammad Zen S. HadiBy : Muhammad Zen S. HadiDigital Communication Laboratory EEPIS-ITSDigital Communication Laboratory EEPIS-ITS

ObjectivesObjectives

Setelah menyelesaikan bab ini,Setelah menyelesaikan bab ini,anda diharapkan dapat:anda diharapkan dapat: Mengerti tag-tag tentang images di HTMLMengerti tag-tag tentang images di HTML Memahami tag-tag pembuatan Form dan FrameMemahami tag-tag pembuatan Form dan Frame Mengerti tag-tag CSS dalam design webMengerti tag-tag CSS dalam design web Membuat halaman web dinamis dengan CSS.Membuat halaman web dinamis dengan CSS.

IMAGEIMAGEFormat image :Format image : GIF (Graphical Interchange Format) (.GIF) JPEG (Joint Photographic Expert Image) (.JPG) PNG (Portable Network Graphics)

Insert image ke dokumen :Insert image ke dokumen :

<IMG SRC “URL”>

Contoh :Contoh :

IMAGE – IMAGE – Cont. 1Cont. 1

<html><html><head><head><title>Working with <title>Working with Image</title>Image</title></head></head><body><body><p><p><img src="MIR.jpg" <img src="MIR.jpg" height="100" width="100"height="100" width="100"align="middle">Aligned at align="middle">Aligned at Middle </p>Middle </p></body></body></html></html>

IMAGE MAPIMAGE MAP Image map yaitu suatu area pada image yang bisa kita Image map yaitu suatu area pada image yang bisa kita

beri hyperlink area ini biasanya disebut “hot spots”beri hyperlink area ini biasanya disebut “hot spots” Coordinat hotspots ditentukan oleh bidang geometry :Coordinat hotspots ditentukan oleh bidang geometry :

IMAGE MAP – IMAGE MAP – Cont. 1Cont. 1

Contoh :Contoh :<body><body><img src="coba/mir.jpg" <img src="coba/mir.jpg" width="400" height="200"width="400" height="200"border="5" usemap="#satelit">border="5" usemap="#satelit"><map name="satelit"><map name="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></map></body></body>

FORMFORM

Kegunaan Form :Kegunaan Form : memperoleh data-data user baik nama, memperoleh data-data user baik nama,

alamat dan data lainnya untuk mendaftar alamat dan data lainnya untuk mendaftar pada service yang di sediakan.pada service yang di sediakan.

memperoleh informasi pembelian secara memperoleh informasi pembelian secara onlineonline

memperoleh feedback dari user mengenai memperoleh feedback dari user mengenai website anda.website anda.

Element FormElement Form Untuk membuat form : <form> … </form>Untuk membuat form : <form> … </form>

HTML Input Element - HTML Input Element - ButtonButton Atribut : type, value, onclick.Atribut : type, value, onclick.

<html> <head><html> <head><title>Contoh Button</title><title>Contoh Button</title><script language="JavaScript"><script language="JavaScript"> 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"); }}</script> </head></script> </head><body><body><form><form> Klik tombol dibawah ini.<br>Klik tombol dibawah ini.<br> <input type="button" <input type="button" value="Kirim Form"value="Kirim Form" onclick="kirim_form()">onclick="kirim_form()"></form></form></body></body></html></html>

Untuk memasukkan data.Untuk memasukkan data. Atribut : type, name, size, maxlength, value.Atribut : type, name, size, maxlength, value.

HTML Input Element - HTML Input Element - TextText

<body><body><form action="info.htm" method="post"><form action="info.htm" method="post"> Nama :Nama : <input type="text" name="nama" size="20"><input type="text" name="nama" size="20"> <br><br> Hobby :Hobby : <input type="text" name="hobby" size="20"><input type="text" name="hobby" size="20"> <br><br> <input type="submit" value="kirim"><input type="submit" value="kirim"> <input type="reset" value="kosongkan"><input type="reset" value="kosongkan"></form></form></body></body>

Atribut : Type, Name, Checked.Atribut : Type, Name, Checked.<body><body><form><form> Buah yang anda sukai : <br>Buah yang anda sukai : <br> <input type="checkbox" name="anggur" checked><input type="checkbox" name="anggur" checked> Anggur <br>Anggur <br> <input type="checkbox" name="jeruk"><input type="checkbox" name="jeruk"> Jeruk <br>Jeruk <br> <input type="checkbox" <input type="checkbox" name="melon">name="melon"> Melon <br>Melon <br></form></form></body></body>

HTML Input Element - HTML Input Element - CheckBoxCheckBox

Atribut : Type, name, value, checked.Atribut : Type, name, value, checked.

HTML Input Element - HTML Input Element - RadioRadio

<body><body><form><form> Jenis Kelamin : <br>Jenis Kelamin : <br> <input type="radio" name="sex" <input type="radio" name="sex" value="p" checked>value="p" checked> Pria <br>Pria <br> <input type="radio" name="sex“<input type="radio" name="sex“ value="w"> value="w"> Wanita <br>Wanita <br></form></form></body></body>

Atribut : cols, rows, name, size.Atribut : cols, rows, name, size.

HTML Input Element - HTML Input Element - TextAreaTextArea

<body><body><form><form> Komentar anda : <br>Komentar anda : <br> <textarea name="komentar"<textarea name="komentar" rows="5" cols="40">rows="5" cols="40"> </textarea></textarea></form></form></body></body>

Perintah : tag <select>Perintah : tag <select>

HTML Input Element - HTML Input Element - ComboCombo

<form><form> Musik yang paling anda sukai : <br>Musik yang paling anda sukai : <br> <select name="musik"><select name="musik"> <option value="Jazz"> Jazz<option value="Jazz"> Jazz <option value="Rock"> Rock<option value="Rock"> Rock <option value="Pop"> Pop<option value="Pop"> Pop <option value="Lain2"> Lain<option value="Lain2"> Lain </select></select></form></form>

HTML Input Element – HTML Input Element – List BoxList Box Hampir sama dengan combo, tambahan : Hampir sama dengan combo, tambahan :

size=“jml_yg_ditampilkan”size=“jml_yg_ditampilkan”

<form><form> Musik yang paling anda sukai : <br>Musik yang paling anda sukai : <br> <select name="musik" size="2"><select name="musik" size="2"> <option value="Jazz" selected> Jazz<option value="Jazz" selected> Jazz <option value="Rock"> Rock<option value="Rock"> Rock <option value="Pop"> Pop<option value="Pop"> Pop <option value="Lain2"> Lain<option value="Lain2"> Lain </select></select></form></form>

CASCADING STYLE SHEETSCASCADING STYLE SHEETS

Feature untuk membuat dynamic HTML.Feature untuk membuat dynamic HTML. Style sheet mendeskripsikan bagaimana Style sheet mendeskripsikan bagaimana

tampilan document HTML di layar (template)tampilan document HTML di layar (template) Membuat special efek (mendefinisikan style Membuat special efek (mendefinisikan style

untuk <H1> dengan style bold dan italic dan untuk <H1> dengan style bold dan italic dan berwarna biru)berwarna biru)

Support ke semua browser.Support ke semua browser.

Aturan Penulisan CSSAturan Penulisan CSS

Nilai untuk property tidak boleh dalam Nilai untuk property tidak boleh dalam tanda petik. tanda petik.

contoh : contoh : color : green;color : green; Nama property bersifat case sensitive.Nama property bersifat case sensitive.

color : green;color : green;

property : colorproperty : color

valuevalue : green : green

Cara PenggunaanCara Penggunaan External Style SheetExternal Style Sheet Bentuk :Bentuk :

<link rel=“stylesheet” type=“text/css” href=“css_files.css”>

<link, merupakan tag pembuka diakhiri dengan tanda “>”<link, merupakan tag pembuka diakhiri dengan tanda “>”

rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheetrel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet

type=“text/css”, file yang dipanggil berupa csstype=“text/css”, file yang dipanggil berupa css

href=“css_files.css”, alamat dokumen stylesheet yang dipanggilhref=“css_files.css”, alamat dokumen stylesheet yang dipanggil

Contoh External Style SheetContoh External Style SheetContoh script efek.cssContoh script efek.css

body {body { color: green;color: green; background: white;background: white; font-family : arial;font-family : arial; }}

<HTML><HTML> <HEAD><HEAD> <TITLE>centranet</TITLE><TITLE>centranet</TITLE> <LINK REL="STYLESHEET" <LINK REL="STYLESHEET" TYPE="text/css" HREF="efek.css">TYPE="text/css" HREF="efek.css"> </HEAD></HEAD> <BODY><BODY> <H1>PENS ITS</H1><H1>PENS ITS</H1> <P> PENS ITS adalah kampus teknik yang <P> PENS ITS adalah kampus teknik yang concern ke bidang elektroconcern ke bidang elektro</BODY></BODY></HTML></HTML>

Cara Penggunaan – Cara Penggunaan – Cont.1Cont.1

Internal Style SheetInternal Style Sheet

Bentuk umum : Bentuk umum :

<style type=“text/css”><style type=“text/css”>

… …definisi style…definisi style…

</style></style>

<HTML><HTML> <HEAD><HEAD> <TITLE>centranet</TITLE><TITLE>centranet</TITLE> <STYLE type="text/css"><STYLE type="text/css"> body {body { color: white;color: white; background: green;background: green;

font-family : arial;font-family : arial; }} </STYLE></STYLE> </HEAD></HEAD> <BODY><BODY> <H1>Zefnet</H1><H1>Zefnet</H1> <P>Zefnet adalah sebuah web <P>Zefnet adalah sebuah web Developer dan Linux CenterDeveloper dan Linux Center</BODY></BODY></HTML></HTML>

Inline Style sheetInline Style sheet

Cara Penggunaan – Cara Penggunaan – Cont.2Cont.2

<HTML><HTML> <HEAD><HEAD> <TITLE>centranet</TITLE><TITLE>centranet</TITLE>

</HEAD></HEAD> <BODY <BODY style="color: white; style="color: white; background: green; background: green; font-family : arial;“font-family : arial;“ > ><H1>ZEFNET</H1><H1>ZEFNET</H1><P>ZEFNET adalah sebuah web <P>ZEFNET adalah sebuah web Developer dan Linux CenterDeveloper dan Linux Center</BODY></BODY></HTML></HTML>

materi word

Education