Contoh: IMG SRC='button.gif' Struktur HTML. Dimulai denga

1
Paket Program Aplikasi
Semester Ganjil 2003 - 2004
2
What is PPA ?

• Menjadi HTML Programmer profesional
• Profesional tidak berarti dapat membuat situs
  yang indah, tetapi situs yang baik.

HOW ?
3
Internet

• What is Internet ?
• What can I do in Internet ?

Email WEB Chatting (yahoo, icq, msn) FTP
(download / upload) Netmeeting (teleconference) VO
IP Online game (ragnarok, gunbound, lagheim)
4
Term dalam WEB

• Homepage atau web dokumen/halaman informasi
  Internet
• Contoh homepage Yahoo, Petra dan Detik
• Browser program untuk melihat homepage / web
• Contoh Internet Explorer (IE), Mozilla,
  Netscape, Opera
• URL Uniform Resource Location, alamat sebuah
  homepage/web
• Contoh www.petra.ac.id
• HTTP Hyper Text Tranfer Protocol, sebuah
  protokol/standar yang dipakai untuk menampilkan
  homepage.
• Contoh http//www.petra.ac.id
• Catatan secara default, jika http// tidak
  ditulis di browser, browser akan memakai protokol
  HTTP.

5
Pengguna Internet
6
E-commerce Revenue
Revenue th. 2003 11.700.000.000.000.000 rupiah
7
Future trends

• Web services
• .Net, Java, XML, SOAP,
• Microsoft Hailstorm, Microsoft Passport,
• Web based ASP, online storage
• Hand helds
• Handphone, PDA, jam tangan, refrigerator,
  microwave oven, etc.
• Future world will be Internet connected World

8
Web team

• Web master
• HTML Programmer
• Graphic Designer
• Web Programmer

HTML / Hyper Text Markup Language Adalah satu
standar yang dipakai untuk dapat membuat
HomePage Contoh view source http//www.petra.ac.
id Ekstension yang dipakai .htm atau .html ?
dibuat di editor apapun ? dilihat di browser
9
HTML Programmer

• Kriteria profesional
• Situs memenuhi standar HTML 4.0
• Mampu membuat halaman HTML yang tampil "PERSIS"
  sama di semua kondisi
• Kondisi jumlah warna monitor yang berbeda
• Kondisi resolusi monitor yang berbeda
• contoh jelek www.detik.com www.petra.ac.id
• contoh bagus dewey.petra.ac.id, svl.petra.ac.id
• Jenis browser yang berbeda (IE vs Mozilla vs
  Netscape vs Opera vs Konqueror vs dll.)

10
Karakteristik HTML

• File text biasa hanya saja terdapat TAG / ELEMENT

• Penulisan TAG selalu diawali tanda lt dan
  diakhiri tanda gt
• Contoh ltHTMLgt, ltBODYgt, ltTITLEgt

• Bersifat incase sensitif, contoh ltHrgt lthrgt
  ltHRgt

• Ada 2 jenis TAG
• TAG yang berpasangan ltTITLEgt lt/TITLEgt
• Empty TAG ltBRgt

• TAG bisa memiliki atribut dan memiliki value
• . Contoh ltIMG SRCbutton.gifgt

11
Struktur HTML

• Dimulai dengan ltHTMLgt dan diakhiri dengan lt/HTMLgt
• Terdiri dari 2 bagian
• ltHEADgt .. lt/HEADgt dan
• ltBODYgt .. lt/BODYgt

12
Struktur HTML
ltHTMLgt ltHEADgt lt/HEADgt ltBODYgt lt/BODYgt lt/HTMLgt
TAG yang berpasangan
13
HEAD
HEAD berisi header dari dokumen (bukan isi
homepage tapi keterangan homepage itu sendiri)
? tidak tampil di browser Tag di bawah
HEAD ltTitlegt lt/Titlegt ? tag
berpasangan ltScriptgt...lt/Scriptgt ? tag
berpasangan ltMetagt ? empty tag Contoh (buat
di notepad) ltHTMLgt ltHEADgt ltTITLEgt Homepageku
yang pertama lt/TITLEgt ltMETA name"keyword"
content"Indonesia, University,Petra"gt lt/HEADgt ltB
ODYgt lt/BODYgtlt/HTMLgt
14
BODY
BODY berisi data-data atau isi dari homepage itu
sendiri Catatan sebetulnya tag ltBODYgt boleh
tidak dicantumkan. Contoh (buat di
notepad) ltHTMLgt ltHEADgt ltTITLEgt Homepageku yang
pertama lt/TITLEgt lt/HEADgt ltBODYgt Hari ini, PPA
membahas tentang HTML lt/BODYgt lt/HTMLgt Contoh
Atribut BODY adalah BGCOLOR ltBODY
BGColor007799gt Hari ini, PPA membahas
tentang HTML lt/BODYgt Atribut lainnya lihat di
HTML Element.doc
15
Overview of the Dreamweaver Environment

• Dreamweaver Environment
• The Document windows
• Properties Inspector
• Code Inspector
• Panels

16
Dreamweaver work areaOverview of the Dreamweaver
Environment
17
Toolbar Overview of the Dreamweaver Environment

• Show code view
• Show code and design view
• Show design view
• Title
• Preview in Browser
• lt?gt reference / help
• View options

18
Object panel, Property inspector dan Launcher
Overview of the Dreamweaver Environment

• Object panel berisi daftar object / tag yang
  dapat diinsertkan ke document
• Property inspector berisi property / atribut yang
  dapat diatur pada object / tag tertentu
• Launcher shortcut

19
Basic homepage

• Setting pada Page Properties (Modify gt Page
  Properties)
• Berakhiran .htm atau .html, disarankan .html
• File utama selalu bernama index, jadi nama
  lengkap index.html
• Selalu menggunakan huruf kecil

20
TAG BREAK
BREAK ganti baris (empty tag) Contoh ltBODYgt
Hari ini, PPA membahas tentang HTML lt/BODYgt
21
TAG PARAGRAPH
PARAGRAPH Contoh ltBODYgt Hari ini, ltBRgt PPA
membahas tentang HTML ltPgt Untuk mempelajari ASP
diperlukan Penguasaan HTML ltBRgt Karena tanpa
menguasai HTML ltBRgt mustahil anda akan
mampu menguasai ASP dengan baik dan
benar ltPgt Setelah anda menguasai HTML, anda
dituntut juga menguasai IIS. ltbrgt lt/BODYgt
22
TAG HEADING
HEADING standar huruf untuk judul atau sub judul
dalam HTML tercetak tebal dan otomatis ganti
baris Contoh ltBODYgt Hari ini, PPA membahasa
tentang HTML ltH1gt Heading pertamalt/H1gt langsung
ganti baris ltH2gt Heading kedualt/H2gt langsung
ganti baris ltH3gt Heading ketigalt/H3gt langsung
ganti baris ltH4gt Heading keempatlt/H4gt langsung
ganti baris ltH5gt Heading kelimalt/H5gt langsung
ganti baris ltH6gt Heading keenamlt/H6gt langsung
ganti baris lt/BODYgt
23
TAG HORISONTAL RULE

• Untuk membuat garis horisontal
• TAG ltHRgt
• Atribut
• Size
• Align
• Noshade
• Contoh
• ltHR Aligncenter noshade width150gt
• ltHR Size"5" Aligncenter width"50"gt

24
TAG List
Tag untuk bullet ltULgt Unordered
list ltOLgt Ordered List Tag untk item listnya
adalah ltLIgt Contoh Seri Operating Sistem ltOL
Start4 TypeAgt ltLIgt Microsoft Windows 2000
ltLIgt LINUX ltLIgt SCO UNIX lt/OLgt
25
Text emphasis Text Style
Tag untuk Mengatur FONT ltBgt bold ltIgt italic ltUgt
underline ltcentergt .lt/centergt ltFONTgt
lt/FONTgt Tag untuk Preformated Text
ltPREgt Contoh ltPREgt ------------------------------
-------- No Nama
Alamat --------------------------------------
lt/PREgt
26
Special Element Anchor

• Tag untuk link antar page di dalam web adalah
• ltA Hrefgt dan lt/Agt
• Contoh
• ltA HREF"http//letters.petra.ac.id/profiles.htm"gt
  Profile dosen Fak. Sastralt/Agt
• Tag untuk link ke bagian tertentu di web
• ltA Href....gt dan lt/Agt di bagian source
• ltA Name..gt dan lt/Agt di bagian destination
• Contoh
• Di bagian source
• ltA HREFhttp//letters.petra.ac.id/female.htm9"gt
  Junita, Andrianalt/Agt
• DI bagian Destination
• ltA Name9gt still studying in Oregon University
  lt/agt

27
Character level element IMAGE
Image yang dapat dimasukkan dalam file HTML adl
JPG,GIF, PCX TAG ltIMG SRC
gt Contoh ltIMG SRCimage/fotoku.jpggt Catatan
img src sangat tergantung pada lokasi dimana
file disimpan. Tip sebaiknya semua image
disimpan menjadi satu di folder image.
28
Character level element IMAGE (2)
ATRIBUT ALIGNMENT ALIGNBOTTOM / MIDDLE / TOP /
LEFT /CENTER/RIGHT Contoh ltIMG
SRCimage/fotoku.jpg ALIGNLEFTgt
29
Comment
Tag untuk COMMENT tidak tampil di web lt
!-- -- gt