PPA - PCU Teaching Staffs
Download
Report
Transcript PPA - PCU Teaching Staffs
Paket Program Aplikasi
Semester Ganjil 2003 - 2004
What is PPA ?
Menjadi HTML Programmer profesional
Profesional tidak berarti dapat membuat situs yang
indah, tetapi situs yang baik.
HOW ?
Internet
What is Internet ?
What can I do in Internet ?
Email
WEB
Chatting (yahoo, icq, msn)
FTP (download / upload)
Netmeeting (teleconference)
VOIP
Online game (ragnarok, gunbound, lagheim)
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.
Pengguna Internet
Worldwide Population
Worldwide Internet User
6,3
6,3
6,23
6,2
6,15
6,07
6,1
Billion 6
5,97
600
510
500
400
256
Million 300
5,92
5,9
200
5,8
100
5,7
0
104
291
320
147
1998 1999 2000 2001 2002 2003
1998 1999 2000 2001 2002 2003
Year
Year
E-commerce Revenue
Worldwide E-Commerce Revenue
1400
1317
1200
US$
Billions
1000
800
733
600
400
200
0
398
111
217
50
15
1997 1998 1999 2000 2001 2002 2003
Year
Revenue th. 2003 = 11.700.000.000.000.000 rupiah
S1
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”
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
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.)
Karakteristik HTML
• File text biasa hanya saja terdapat TAG / ELEMENT
• Penulisan TAG selalu diawali tanda < dan diakhiri tanda >
Contoh : <HTML>, <BODY>, <TITLE>
• Bersifat incase sensitif, contoh <Hr> = <hr> = <HR>
• Ada 2 jenis TAG :
TAG yang berpasangan
<TITLE> </TITLE>
Empty TAG
<BR>
• TAG bisa memiliki atribut dan memiliki value
. Contoh: <IMG SRC=“button.gif”>
Struktur HTML
Dimulai dengan <HTML> dan diakhiri
dengan </HTML>
Terdiri dari 2 bagian
• <HEAD> ………….. </HEAD> dan
• <BODY> ………….. </BODY>
Struktur HTML
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
TAG yang berpasangan
HEAD
HEAD berisi header dari dokumen (bukan isi homepage tapi
keterangan homepage itu sendiri) tidak tampil
di browser
Tag di bawah HEAD:
<Title> … </Title> tag berpasangan
<Script>...</Script> tag berpasangan
<Meta>
empty tag
Contoh (buat di notepad)
<HTML>
<HEAD>
<TITLE> Homepageku yang pertama </TITLE>
<META name="keyword" content="Indonesia,
University,Petra">
</HEAD>
<BODY> </BODY></HTML>
BODY
BODY
berisi data-data atau isi dari homepage itu sendiri
Catatan: sebetulnya tag <BODY> boleh tidak dicantumkan.
Contoh (buat di notepad)
<HTML>
<HEAD> <TITLE> Homepageku yang pertama </TITLE> </HE
<BODY> Hari ini, PPA membahas tentang HTML </BODY>
</HTML>
Contoh Atribut BODY adalah BGCOLOR
<BODY BGColor=“#007799”>
Hari ini, PPA membahas tentang HTML
</BODY>
Atribut lainnya lihat di HTML Element.doc
Overview of the Dreamweaver
Environment
Dreamweaver Environment
The Document windows
Properties Inspector
Code Inspector
Panels
Dreamweaver work area
Overview of the Dreamweaver Environment
Toolbar
Overview of the Dreamweaver Environment
•
•
•
•
•
•
•
Show code view
Show code and design view
Show design view
Title
Preview in Browser
<?> : reference / help
View options
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
Basic homepage
Setting pada Page Properties (Modify >
Page Properties)
Berakhiran .htm atau .html, disarankan
.html
File utama selalu bernama index, jadi nama
lengkap index.html
Selalu menggunakan huruf kecil
TAG: BREAK
BREAK = ganti baris (empty tag)
Contoh
<BODY> Hari ini,
PPA membahas tentang HTML
</BODY>
TAG: PARAGRAPH
PARAGRAPH
Contoh
<BODY>
Hari ini, <BR> PPA membahas tentang HTML <P>
Untuk mempelajari ASP diperlukan Penguasaan HTML
<BR>
Karena tanpa menguasai HTML <BR> mustahil anda akan
mampu
menguasai ASP dengan baik dan benar
<P>
Setelah anda menguasai HTML, anda dituntut juga
menguasai IIS.
<br>
</BODY>
TAG: HEADING
HEADING: standar huruf untuk judul atau sub judul dalam HTML
tercetak tebal dan otomatis ganti baris
Contoh
<BODY>
Hari ini, PPA membahasa tentang HTML
<H1> Heading pertama</H1> langsung ganti baris
<H2> Heading kedua</H2> langsung ganti baris
<H3> Heading ketiga</H3> langsung ganti baris
<H4> Heading keempat</H4> langsung ganti baris
<H5> Heading kelima</H5> langsung ganti baris
<H6> Heading keenam</H6> langsung ganti baris
</BODY>
TAG: HORISONTAL RULE
Untuk membuat garis horisontal
TAG: <HR>
Atribut:
Size
Align
Noshade
Contoh:
<HR Align=center noshade width=“150”>
<HR Size="5" Align=center width="50%">
TAG: List
Tag untuk bullet
<UL> Unordered list
<OL> Ordered List
Tag untk item listnya adalah: <LI>
Contoh:
Seri Operating Sistem
<OL Start=“4” Type=“A”>
<LI> Microsoft Windows 2000
<LI> LINUX
<LI> SCO UNIX
</OL>
Text emphasis: Text Style
Tag untuk Mengatur FONT:
<B> bold
<I>
italic
<U> underline
<center> …….</center>
<FONT> …… </FONT>
Tag untuk Preformated Text : <PRE>
Contoh
<PRE>
-------------------------------------No Nama
Alamat
-------------------------------------- </PRE>
Special Element: Anchor
Tag untuk link antar page di dalam web adalah
<A Href> dan </A>
Contoh:
<A HREF="http://letters.petra.ac.id/profiles.htm">Profile dosen Fak. Sastra</A>
Tag untuk link ke bagian tertentu di web
<A Href=“…..#..”> dan </A> di bagian source
<A Name=“………..”> dan </A> di bagian destination
Contoh:
Di bagian source:
<A HREF=“http://letters.petra.ac.id/female.htm#9"> Junita, Andriana</A>
DI bagian Destination:
<A Name=“9”> still studying in Oregon University </a>
Character level element : IMAGE
Image yang dapat dimasukkan dalam file HTML adl:
JPG,GIF, PCX
TAG : <IMG SRC=“
“>
Contoh
<IMG SRC=“image/fotoku.jpg”>
Catatan: img src sangat tergantung pada lokasi dimana file
disimpan.
Tip: sebaiknya semua image disimpan menjadi satu di folder
image.
Character level element :
IMAGE (2)
ATRIBUT ALIGNMENT
ALIGN=BOTTOM / MIDDLE / TOP / LEFT
/CENTER/RIGHT
Contoh
<IMG SRC=“image/fotoku.jpg” ALIGN=LEFT>
Comment
Tag untuk COMMENT: tidak tampil di web
< !--- >