PPA
advertisement
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 < !--- >
