Materi Word

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

Internal Style Sheet
Bentuk umum :
<style type=“text/css”>
…definisi style…
</style>

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

Cara Penggunaan – Cont.2


Inline Style sheet

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

Materi Word

Recommended

Recommended

More Related Content

What's hot

What's hot (7)

Viewers also liked

Viewers also liked (15)

Similar to Materi Word

Similar to Materi Word (20)

Recently uploaded

Recently uploaded (20)

Materi Word