Paket Program Aplikasi Semester Ganjil 2003 - 2004.

Presentasi berjudul: "Paket Program Aplikasi Semester Ganjil 2003 - 2004."— Transcript presentasi:

1

2 Paket Program Aplikasi Semester Ganjil 2003 - 2004

3 What is PPA ? w Menjadi HTML Programmer profesional Profesional tidak berarti dapat membuat situs yang indah, tetapi situs yang baik. HOW ?

4 Internet w What is Internet ? w What can I do in Internet ? Email WEB Chatting (yahoo, icq, msn) FTP (download / upload) Netmeeting (teleconference) VOIP Online game (ragnarok, gunbound, lagheim)

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

6 Pengguna Internet

7 E-commerce Revenue Revenue th. 2003 = 11.700.000.000.000.000 rupiah

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

9 Web team wWwWeb master wHwHTML Programmer wGwGraphic Designer wWwWeb 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

10 HTML Programmer w 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.)

11 Karakteristik HTML File text biasa hanya saja terdapat TAG / ELEMENT Penulisan TAG selalu diawali tanda Contoh :,, Bersifat incase sensitif, contoh = = Ada 2 jenis TAG : TAG yang berpasangan Empty TAG TAG bisa memiliki atribut dan memiliki value. Contoh:

12 Struktur HTML w Dimulai dengan dan diakhiri dengan w Terdiri dari 2 bagian ………….. dan …………..

13 Struktur HTML TAG yang berpasangan

14 HEAD HEAD berisi header dari dokumen (bukan isi homepage tapi keterangan homepage itu sendiri)  tidak tampil di browser Tag di bawah HEAD: …  tag berpasangan...  tag berpasangan  empty tag Contoh (buat di notepad) Homepageku yang pertama <META name="keyword" content="Indonesia, University,Petra">

15 BODY berisi data-data atau isi dari homepage itu sendiri Catatan: sebetulnya tag boleh tidak dicantumkan. Contoh (buat di notepad) Homepageku yang pertama Hari ini, PPA membahas tentang HTML Contoh Atribut BODY adalah BGCOLOR Hari ini, PPA membahas tentang HTML Atribut lainnya lihat di HTML Element.doc

16 Overview of the Dreamweaver Environment w Dreamweaver Environment w The Document windows w Properties Inspector w Code Inspector w Panels

17 Dreamweaver work area Overview of the Dreamweaver Environment

18 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

19 Object panel, Property inspector dan Launcher Overview of the Dreamweaver Environment w Object panel berisi daftar object / tag yang dapat diinsertkan ke document w Property inspector berisi property / atribut yang dapat diatur pada object / tag tertentu w Launcher = shortcut

20 Basic homepage w Setting pada Page Properties (Modify > Page Properties) w Berakhiran.htm atau.html, disarankan.html w File utama selalu bernama index, jadi nama lengkap index.html w Selalu menggunakan huruf kecil

21 BREAK = ganti baris (empty tag) Contoh Hari ini, PPA membahas tentang HTML TAG: BREAK

22 PARAGRAPH Contoh Hari ini, PPA membahas tentang HTML Untuk mempelajari ASP diperlukan Penguasaan HTML Karena tanpa menguasai HTML mustahil anda akan mampu menguasai ASP dengan baik dan benar Setelah anda menguasai HTML, anda dituntut juga menguasai IIS. TAG: PARAGRAPH

23 TAG: HEADING HEADING: standar huruf untuk judul atau sub judul dalam HTML tercetak tebal dan otomatis ganti baris Contoh Hari ini, PPA membahasa tentang HTML Heading pertama langsung ganti baris Heading kedua langsung ganti baris Heading ketiga langsung ganti baris Heading keempat langsung ganti baris Heading kelima langsung ganti baris Heading keenam langsung ganti baris

24 TAG: HORISONTAL RULE Untuk membuat garis horisontal TAG: Atribut: Size Align Noshade Contoh:

25 TAG: List Tag untuk bullet Unordered list Ordered List Tag untk item listnya adalah: Contoh: Seri Operating Sistem Microsoft Windows 2000 LINUX SCO UNIX

26 Tag untuk Mengatur FONT: bold italic underline ……. …… Tag untuk Preformated Text : Contoh -------------------------------------- No Nama Alamat -------------------------------------- Text emphasis: Text Style

27 Special Element: Anchor w Tag untuk link antar page di dalam web adalah dan Contoh: Profile dosen Fak. Sastra w Tag untuk link ke bagian tertentu di web dan di bagian source dan di bagian destination Contoh: Di bagian source: Junita, Andriana DI bagian Destination: still studying in Oregon University

28 Character level element : IMAGE Image yang dapat dimasukkan dalam file HTML adl: JPG,GIF, PCX TAG : Contoh Catatan: img src sangat tergantung pada lokasi dimana file disimpan. Tip: sebaiknya semua image disimpan menjadi satu di folder image.

29 Character level element : IMAGE (2) ATRIBUT ALIGNMENT ALIGN=BOTTOM / MIDDLE / TOP / LEFT /CENTER/RIGHT Contoh

30 Comment Tag untuk COMMENT: tidak tampil di web