Add to collection(s) Add to saved
  1. Rekayasa & Teknologi
  2. Perancangan web

materi 2 - Zenhadi Website

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