HTML Lanjut

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

ltIMG SRC URLgt
4
IMAGE Cont. 1

• Contoh

lthtmlgt ltheadgt lttitlegtWorking with
Imagelt/titlegt lt/headgt ltbodygt ltpgt ltimg
src"MIR.jpg" height"100" width"100" align"midd
le"gtAligned at Middle lt/pgt lt/bodygt lt/htmlgt
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

ltbodygt ltimg src"coba/mir.jpg" width"400"
height"200" border"5" usemap"satelit"gt ltmap
name"satelit"gt ltarea shape"rect"
coords"0,0,200,100" href"file1.htm"
alt"kotak link"gt lt/mapgt lt/bodygt
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 ltformgt lt/formgt

9
HTML Input Element - Button

• Atribut type, value, onclick.

lthtmlgt ltheadgt lttitlegtContoh Buttonlt/titlegt ltscript
language"JavaScript"gt function kirim_form ()
window.alert ("Form telah sukses dikirim")
window.open ("http//www.microsoft.com")
lt/scriptgt lt/headgt ltbodygt ltformgt Klik tombol
dibawah ini.ltbrgt ltinput type"button"
value"Kirim Form" onclick"kirim_form()"gt lt/f
ormgt lt/bodygt lt/htmlgt
10
HTML Input Element - Text

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

ltbodygt ltform action"info.htm" method"post"gt
Nama ltinput type"text" name"nama"
size"20"gt ltbrgt Hobby ltinput type"text"
name"hobby" size"20"gt ltbrgt ltinput
type"submit" value"kirim"gt ltinput
type"reset" value"kosongkan"gt lt/formgt lt/bodygt
11
HTML Input Element - CheckBox

• Atribut Type, Name, Checked.

ltbodygt ltformgt Buah yang anda sukai ltbrgt
ltinput type"checkbox" name"anggur" checkedgt
Anggur ltbrgt ltinput type"checkbox"
name"jeruk"gt Jeruk ltbrgt ltinput
type"checkbox" name"melon"gt Melon
ltbrgt lt/formgt lt/bodygt
12
HTML Input Element - Radio

• Atribut Type, name, value, checked.

ltbodygt ltformgt Jenis Kelamin ltbrgt ltinput
type"radio" name"sex" value"p" checkedgt
Pria ltbrgt ltinput type"radio" name"sex
value"w"gt Wanita ltbrgt lt/formgt lt/bodygt
13
HTML Input Element - TextArea

• Atribut cols, rows, name, size.

ltbodygt ltformgt Komentar anda ltbrgt lttextarea
name"komentar" rows"5" cols"40"gt
lt/textareagt lt/formgt lt/bodygt
14
HTML Input Element - Combo

• Perintah tag ltselectgt

ltformgt Musik yang paling anda sukai ltbrgt
ltselect name"musik"gt ltoption value"Jazz"gt
Jazz ltoption value"Rock"gt Rock ltoption
value"Pop"gt Pop ltoption value"Lain2"gt Lain
lt/selectgt lt/formgt
15
HTML Input Element List Box

• Hampir sama dengan combo, tambahan
  sizejml_yg_ditampilkan

ltformgt Musik yang paling anda sukai ltbrgt
ltselect name"musik" size"2"gt ltoption
value"Jazz" selectedgt Jazz ltoption
value"Rock"gt Rock ltoption value"Pop"gt Pop
ltoption value"Lain2"gt Lain lt/selectgt lt/formgt
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
  ltH1gt 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

ltlink relstylesheet typetext/css
hrefcss_files.cssgt

• ltlink, merupakan tag pembuka diakhiri dengan
  tanda gt
• relstylesheet, menerangkan halaman ini akan
  dikenai efek style sheet
• typetext/css, file yang dipanggil berupa css
• hrefcss_files.css, alamat dokumen stylesheet
  yang dipanggil

19
Contoh External Style Sheet
Contoh script efek.css body color green
background white font-family arial
ltHTMLgt ltHEADgt ltTITLEgtcentranetlt/TITLEgt
ltLINK REL"STYLESHEET" TYPE"text/css"
HREF"efek.css"gt lt/HEADgt ltBODYgt ltH1gtPENS
ITSlt/H1gt ltPgt PENS ITS adalah kampus teknik
yang concern ke bidang elektro lt/BODYgt lt/HTMLgt
20
Cara Penggunaan Cont.1
ltHTMLgt ltHEADgt ltTITLEgtcentranetlt/TITLEgt
ltSTYLE type"text/css"gt body color
white background green font-family
arial lt/STYLEgt lt/HEADgt ltBODYgt
ltH1gtZefnetlt/H1gt ltPgtZefnet adalah sebuah web
Developer dan Linux Center lt/BODYgt lt/HTMLgt

• Internal Style Sheet
• Bentuk umum
• ltstyle typetext/cssgt
• definisi style
• lt/stylegt

21
Cara Penggunaan Cont.2

• Inline Style sheet

ltHTMLgt ltHEADgt ltTITLEgtcentranetlt/TITLEgt
lt/HEADgt ltBODY style"color white
background green font-family arial
gt ltH1gtZEFNETlt/H1gt ltPgtZEFNET adalah sebuah web
Developer dan Linux Center lt/BODYgt lt/HTMLgt