Modul Pemrograman Web

Modul Perkuliahan Pemrograman Web

Pertemuan I

Pengantar Desain Web dan Rekayasa Aplikasi Berbasis Web :     

Karakteristik Aplikasi berbasis Web Sejarah singkat perkembangan internet dan Web Proses Metoda – metoda Kakas (tools) dan teknologi

Target Pembelajaran Mahasiswa dapat mengetahui, menjelaskan & memahami       

lingkup profesi desainer Web & profesi lainnya dalam tim pengembangan Web karakteristik Aplikasi Web sejarah perkembangan internet & Web konsep rekayasa Web proses rekayasa Web metoda-metoda rekayasa Web kakas & teknologi teknologi yang digunakan digunakan dalam merekayasa Web

Karakteristik Karakteristi k aplikasi berbasis web

Karakteristik - karakteristik karakteristik pada aplikasi berbasis web web pada umumnya adalah : 1


1. Network Intensiveness ( terpasang pada jaringan internet maupun intranet) 2. Unpredictable load (pengunjung atau pengguna , yang mengakses aplikasi setiap harinya bervariasi jumlahnya, secara umum kecenderungannya terus meningkat meningkat) 3. Performansi (kususnya dalam hal kecepatan akses, pengguna Aplikasi web jika merasakan terlalu lama menunggu[untuk akses, proses server side, client –side formatting dan display], mereka akan meninggalkannya) 4. Availability (harus memenuhi kecenderungan pengguna, yang boleh jadi ditiap belahan dunia yang berbeda memiliki perbedaan kecenderungan) 5. Data driven (kemampuan mengakses data base yang selalu berubah datanya, seperti pada aplikasi e-commerce atau atau financial) 6. Content Sensitive , kualitas isi ( content ) dan sifat dasar estetika (design grafis) nya, merupakan faktor faktor penting kualitas aplikasi web. 7. Continuous evaluation , membutuhkan evaluasi , update terus menerus, dari menit ke menit bahkan detik-kedetik seperti situs berita dan e-commerce, dalam melayani permintaan dan transaksi sesuai perkembangan yang dinamis. 8. Immediacy ,aplikasi Web harus dapat diselesaikan dengan cepat, bahkan dengan tools yang modern, web yang sangat mengesankan dapat dibuat dalam jangka waktu beberapa jam saja. 9. Security , keamanan, khususnya menjamin keamanan data dan aplikasinya itu sendiri. 10. Aesthetics. Aesthetics. Web App adalah sesuatu yang dapat dilihat dan dirasakan, design grafis yang bagus menjadi kunci keberhasilan aplikasi web.

Aplikasi – aplikasi yang secara umum ada pada Web [Pressman: 504] •

Informational-read-only Informational- read-only content is provided with simple navigation and links.

•

Download--a user downloads information from the appropriate server.

•

Customizable-the user customizes content to specific needs.

•

Interacti Interaction-on--comm communic unicatio ation n among among a communi community ty of users users occurs occurs via chatroo chatroom, m, bulletin boards, or instant messaging.

•

User input-forms-based input is the primary mechanism for communicating need.

2

Modul Perkuliahan Pemrograman Web •

Transact Transaction-o ion-orien riented ted-the -the user user makes makes a request request (e.g., (e.g., places places an order) order) that that is fulfilled by the WebApp.

•

Service-oriented-the application provides a service to the user, e.g., assists the user in determining a mortgage payment.

•

Portal-the application channels the user to other Web content or services outside the domain of the portal a pplication.

•

Database access-the user queries a large database and extracts information

•

Data warehousing-the user queries a collection of large databases and extracts information.

Profesi Web desainer dan profesi lainnya dalam tim pengembangan Web [wahana komputer]

Web Developer Developer merupakan merupakan tim yang mengerjakan mengerjakan pengembangan pengembangan web. Terdiri Terdiri dari web desainer, web programmer, programmer, web administrator dan web master. Namun, web yang sederhana mungkin saja dibuat oleh satu atau dua orang saja. •

Web Desainer , orang yang melakukan aktifitas desain interface, struktur, isi

(content ), ), grafis, komponen web. •

Web Programmer , orang yang ahli dalam bahasa pemrograman web seperti

ASP, PHP, JavaScript dan Applet. •

Web Administrator , orang yang bertugas bertugas untuk untuk memelihara memelihara web khususnya khususnya

pada server. server. Hal-hal yang yang harus dipahami dipahami secara secara mendalam mendalam oleh seorang web administrator adalah tentang system operasi yang digunakan pada server, proses penginstalan penginstalan,, memahami memahami jaringan jaringan LAN, LAN, WAN, WAN, keamanan keamanan data data server server dan

harus

dapat melakukan Troubleshooting. •

Web Master , orang yang menguasai semua bidang-bidang di atas, namun tidak

perlu harus menguasai secara mendetail, bertanggung jawab atas jalannya situs web pada internet dan memastikan tidak ada kendala apapun pada situs web.

Tim web developer, bekerjasama dan melakukan pembagian tugas yang sesuai denga dengan n bidang bidang mas masing ing-m -mas asin ing g untuk untuk menj menjam amin in

kine kinerja rja dan dan

web web yang yang

dihasilkan akan semakin baik.

3


Selain itu secara lebih khusus terdapat juga profesi web architec, web specialist, web page developer dan web site developer [eko endrajit]

Sejarah Internet dan Web

Sejarah internet dan Web dalam cisco cisco ( book online)

4


Sekilas sejarah Web menurut Wahana komputer sebagai berikut : •

Sebuah ide untuk membuat membuat jaringan global muncul untuk pertama pertama kalinya pada

tahun 1963. •

Tahun 1965 muncul sebuah ide untuk membuat teknologi Hypertext. Hypertext

adalah teks yang mempunyai hubungan dengan teks lain. •

System RFC (Request for Cmments) dimulai pada tahun 1969.

•

Pada bulan September 1970 terbentuk sebuah jaringan “global” untuk pertama

kalinya yang dinamakan ARPANET, yaitu sebuah jaringan computer yang terdiri dari 5 komputer yang menghubungkan antar kampus. •

Aplikasi E-mail diperkenalkan pada tahun 1972.

•

Protokol TCP/IP yang digunakan untuk mengatur traffic jaringan diperkenalkan

dan didefinisikan pada tahun 1974. •

Tahun 1977 terdapat 111 komputer di internet

5


Protokol TCP/IP menjadi standar protokol protokol untuk jaringan jaringan computer pada tahun

1980 •

Tahun 1981 terdapat 213 komputer di internet.

•

Tahun 1983 terdapat 502 komputer di internet.

•

Tahun Tahun 1985 1985 intern internet et sudah sudah menghu menghubun bungka gkan n bebera beberapa pa jaring jaringan an (BIT-N (BIT-NET, ET,

USEN USENET ET,, CSNE CSNET T dan dan NSFN NSFNET ET)) dan dan terd terdap apat at seki sekita tarr 1000 1000 komp komput uter er yang yang terhubung di internet. •

Tahun 1986 terdapat sekitar 5000 komputer di internet.

•


•


•

Konsep Konsep WW WWW W dan Browse Browserr dikemb dikembang angkan kan dan dipaka dipakaii di CERN CERN (sebua (sebuah h

Institusi Fisika Nuklir) pada buln Oktober 1990 •

Tangga Tanggall 12 Desemb Desember er 1991 1991 sebuah sebuah web server yang pertam pertamadi adi luar luar Eropa Eropa

dibuat. •


•

Bulan Januari 1993 terdapat 50 web server, 3 browser untuk computer Unix dan

WWW menggunakan 0,1% dari seluruh traffic di internet. •

Bulan Februari 199 diperkenalkan sebuah browser mosaic.

•

Tanggal 30 April 1993 teknologi WWWsecara resmi digunakan untuk semua

orang. •

Bulan Oktober 1993 terdapat 200 web server.

•

Bulan Agustus 1994 diperkenalkan Browser Netscape.

•

W3C dibentuk pada tanggal 1 Oktober 1994.

•

Spesifikasi HTML 4.01 diumumkan.

•

Tahun 2001 terdapat sekitar 150-175 juta komputer di internet.

•

Tahun 2002 terdapat lebih dari 200 juta komputer di internet dengan 840 juta

pemakai.

Lapisan-lapisan (layers ( layers)) pada rekayasa Aplikasi berbasis Web, sebagai berikut :

6


1. Proses

prose proses s dala dalam m reka rekaya yasa sa web web mene menera rapk pkan an kaid kaidah ah peng pengem emba bang ngan an ‘agile’, yang yang menekankan pendekatan pengembangan yang ramping, siklus pengembangan yang ringkas. Agility adalah dinamis, spesifik, mencakup perubahan yang aggressive dan berorientasi kepada pengembangan

Menentukan, menetapkan aplikasi web ( Defining the Framework) :

Customer communication, dalam proses proses ini, kita kita akan dihadap dihadapkan kan pada dua dua tugas, tugas, yaitu yaitu mengan menganali alisis sis bisnis bisnis dan formul formulasi asi.. Mengan Menganali alisis sis bisnis bisnis,, berart berartii menent menentuka ukan n perhitungan-perhitungan bisnis untuk aplikasi web yang akan dibuat, mengidentifikasi potensi-potensi ensi perubahan perubahan dalam lingkungan bisnis bisnis atau prediksi-prediks prediksi-prediksii stakeholder , potensi-pot perkemb perkembang angan an dalam dalam lingku lingkunga ngan n bisnis bisnis,, dan integra integrasi si antara antara aplika aplikasi si web dengan dengan aplika aplikaii bisnis bisnis yang yang lainny lainnya, a, basisd basisdata ata,, dan fungsi fungsi-fu -fungs ngsii yang yang terdef terdefini inisi. si. Dalam Dalam formulasi, kita harus mampu mendeskripsikan permasalahan yang dimiliki atau yang dimili dimiliki ki stakeh stakehold older, er, dan aplika aplikasi si web yang yang dibuat dibuat harus harus menjad menjadii solusi solusi,, dengan dengan menggunakan informasi yang tersedia.

7


Planning, pendefinisian tugas-tugas yang ada, menentukan jadwal waktu penyelesaian proyek rekayasa aplikasi web (biasanya dalam satuan minggu). Modeling, mengadopsi atau menggunakan menggunakan proses analisis analisis dan desain desain perangkat perangkat lunak konvensional dalam pengembangan pengembangan aplikasi aplikasi web. Construction , membuat aplikasi berbasis web yang sudah dimodelkan dalam proses

modeli modeling ng dengan dengan menggu menggunak nakan an tool tool dan teknol teknologi ogi yang yang ada, ada, yang yang sesuai sesuai dengan dengan kebutuhan. Deployment , disampaikan, untuk dipakai pengguna (end-users ), dijual ke pasaran, dan

di evaluasi secara terus menerus.

Menyempurnakan aplikasi web (Refining the Framework)

Suatu keniscayaan, untuk melakukan modifikasi secara terus menerus misalnya dengan berbagai berbagai perkembangan perkembangan permasalahan permasalahan terbarunya. terbarunya. Aplikasi Aplikasi web yang di buat harus menjamin adaptable, sesuai dan bisa menjawab, menjadi solusi permasalahan yang hadir berikutnya. Web Engineering Best Practices : 1. Take the time to understand business needs and product objectives, even if the details of the WebApp are vague. Many WebApp developers erroneously believe

that vague requirements (which are quite common) relieve them from the need to be sure that the system they are about to engineer has a legitimate business purpose. The end result is (too often) good technical work that results in the wrong system built for the wrong reasons for the wrong audience. If stakeholders cannot enunciate a business need for the WebApp, proceed with extreme caution. If stakeholders struggle to identify a set of clear objectives for the product (WebApp), do not proceed until they can. 2. Describe how users will interact with the WebApp using a scenario-based apStakeh ehol olde ders rs must must be conv convin ince ced d to deve develo lop p use-c use-cas ases es (dis (discu cuss ssed ed proach. Stak throughout Part 2 of this book) to reflect how various actors will interact with the WebApp. These scenarios can then be used (1) for project planning and tracking, (2) to guide analysis and design modeling, and (3) as important input for the design of 8


tests. 3. Develop a project plan, even if it is very brief. Base the plan on a predefined process framework that is acceptable to all stakeholders. Because project timelines are very short, schedule granularity should be fine; i.e., in many instances, the project should be scheduled and tracked on a daily basis. 4. Spend some time modeling what it is that you're going to build. Generally, comprehensive analysis and design models are not developed during Web engineering. However, UML class class and sequen sequence ce diagra diagrams ms along along with with other other select selected ed UML notation (e.g., state diagrams) may provide invaluable insight. 5. Review the models for consistency and quality. Formal technical reviews should be conducted throughout a WebE project. The time spent on reviews pays important dividends because it often eliminates rework and results in a WebApp that exhibits high quality-thereby increasing customer satisfaction. 6. Use tools and technology that enable you to construct the system with as many reusable components as possible. A wide array of WebApp tools are available for

virtually every aspect of WebApp construction. Many of these tools enable a Web engineer to build significant portions of the application using reusable components. 7. Don't rely on early users to debug the WebApp-design WebApp-design comprehensive tests and execute them before releasing the system. Users of a WebApp will often give it a one

chance. If it fails to perform, they move elsewhere-never to return. It is for this reason that "test first, then deploy" should be an overriding philosophy, even if deadlines must be stretched.

Dalam Dalam pembua pembuatan tan web dengan dengan pendekata pendekatan n

proses proses Top-Down Top-Down diperliha diperlihatka tkan n oleh oleh

diagram berikut: Defenisi Persoalan - Eksplorasi Konsep Analisa Kebutuhan - Spesifikasi Desain - Prototipe

Integrasi dan Pengujian Sistim Rilis, Operasi dan pemeliharaan

9


•

Pertama yang perlu diketahui adalah kegunaan atau tujuan dari situs dibangun. Secara seksama didefenisikan problem dari situs yang mengacu pada setiap goal yang hendak dicapai.

•

Setela Setelah h goal goal diteta ditetapka pkan, n, kemudi kemudian an ditent ditentuka ukan n spesif spesifika ikasin sinya. ya. Spesif Spesifika ikasi si ini merupakan syarat-syarat untuk situs dimana dalam hal ini perlu dipertimbangkan faktor audience (pemirsa).

•

Langkah selanjutnya memulai memulai pembangunan situs termasuk prototipe secara teknik dan visual

•

Selanjutnya tahap implementasi hasil dari disain dan melakukan pengujian (Integrasi dan Pengujian).

•

Terak Terakhi hirr adal adalah ah Rili Rilis s (Rel (Relea ease se)) atau atau Publ Publik ikas asii situ situs. s. Kada Kadang ng-ka -kada dang ng masi masih h diperlukan modifikasi berdasarkan umpan balik dari user.

Secara umum, persiapan membuat WebSite, sebagai berikut: 1. Merumus Merumuskan kan tujua tujuan n pembuat pembuatan an WebSit WebSite. e. 2. Mene Menent ntuk ukan an Isi. Isi. 3. Menent Menentukan ukan Target Target Market Marketnya. nya. 4. Mene Menent ntuka ukan n Struk Struktu turny rnya. a.

Merumuskan tujuan Pembuatan Web Site

10


Berdasarkan Isi maupun Tujuan, WebSite biasanya dapat digolongkan, antara lain: 1. Profil Perusahaan Perusahaan (Company (Company Profile), Profile), Profil Profil Pribadi Pribadi (Artis, (Artis, Curicul Curiculum um Vitae, Web Personal, dst) Berfungsi sebagai media Presentasi, informasi, publikasi, Promosi, dan Pemasaran. Web ini harus memiliki daya tarik bagi pengunjung untuk menyimak isi web sehingga faktor desain menjadi paling utama. 2. Informasi/Be Informasi/Berita, rita, Media Media Informasi Informasi dan dan Berita Berita adalah adalah yang terutama terutama (Majalah/Koran online). Keakuratan dan kelengkapan informasi dari web semacam ini sangat penting. 3. Services, Services, Media Media untuk pelayanan, pelayanan, seperti seperti Free Email, Email, Search Engine, SMS via Internet, E-Commerce (Media Transaksi Online), dst. Sebuah Web dapat mencakup lebih dari satu Kategori saja, namun ada kategori yang lebih dominan. Menentukan Isi/Content/menu Web

Dengan tujuan dan target yang jelas maka kita dapat mempersiapkan isi/Content yang akan ditampilkan. Contoh: Web sebuah Company, isinya antara lain: [About Us], [Product], [Clients], [Contact Us], [News] Web Seorang Artis, isinya antara lain: [Profil Singkat], [Photo Galeri], [Jumpa Fans], [Seputar Gossip], [Agenda], [NEWS] Masing-masing Content dapat ditambahkan lagi Sub-Content, Contoh: Dalam content [NEWS], terdapat Sub Content yaitu:    

Berita Terkini Berita Terdahulu Berita Anda Kirim Berita 11


Pengelolaan Dokumen

Hal ini memegang memegang peranan penting penting dalam kemudahan kemudahan me-maintenance sebuah web. Berikut adalah sebuah gambaran bagaimana pengaturan Folder: Sediakan Dua Folder. data-data/dokument Image, Hasil Scan, Ketikan, dll disimpan dalam Web



Bahan

Jangan campur adukkan dalam folder utama (Data WebSite yang akan di UpLoad) 

NamaWeb 

Images Gambar1.JPG Gambar2.JPG Logo.GIF



index.html



AboutUs.html



Product.htm



Clients.htm



ContactUs.htm



News.htm

Sebagai Halaman Cover / halaman Pertama, Nama yang telah standard secara internasional, adalah: Index.html atau Default.html

Secara khusus untuk desain web, Dapat disampaikan secara ringkas bahwa segmentasi proses desain web dalam pembuatan Artwork, difiturkan melalui : 1. Desi Design gn Deci Decisi sion ons s

[Web Site Purpose – Audience – Domain Name] 2. Design Design Phase Phase I – Page Page Elemen Elements ts & Layout Layout of of Pages Pages

[Page Title – Text – Background – Hypertext Links – Images – Tips for using images on the internet – Clickable Images – Bullets – Buttons - Clickable Imagemaps – Horizontal Lines – Fill-out Forms – Custom Programming Elements] 12


3. Desig Design n Phas Phase e I I – Prog Program rammin ming g

[Graphic Design – Multimedia Design – Programming – Up-Loading]

4. Web Web Site Site Ases Asesor oris is

[Sea [Searc rch h Engin ngines es – News ews Gro Groups ups – Mai Mail Forum orums s – Int Intenet enet Malls/ Malls/Int Intern ernet et Indice Indices s – Interne Internett Classi Classifie fied d Ads – Billbo Billboard ard Ads – Reciprocal Links – “What’s New” Lists – Printed Comunications]

5. Web Web Site Site Main Mainte tena nanc nce e

[Keep Information Accurate – Keep Web Site Modem – Keep Web Site Visible]

Mendesain halaman web, berarti mendesain Struktur Situs, Interface/Sistem Navigasi dan Halaman Web. Dalam setiap proses desain yang dilakukan, berfilosofi terhadap acuan Simplicity . Acuan untuk selalu menerapkan nilai-nilai dalam membuat atau merancang sesuatu dengan se-simple mungkin – sesederhana mungkin dengan tidak mengurangi daya tariknya….. Selain Simplicity , lakukanlah selalu “ …. Keep it clean ”, rancanglah web dengan dengan rapih, jelas jelas dan sedeta sedetailil mungki mungkin, n, mulai mulai dari dari strukt struktur ur situs situs – benarbenar-ben benar ar terstr terstrukt uktur ur dan terorganisir, Interface – benar-benar mempunyai detail fungsi dalam mengakomodasi system navigasi dan links sebagai penunjuk arah untuk user serta tampilan halaman web web yang yang bisa bisa diba dibaca ca deng dengan an muda mudah h dan dan jela jelas s oleh oleh user user samp sampai ai visu visual alis isas asii keseluruhan yang benar-benar menarik dan “tidak merugikan” para user.

Memulai Mendesain Web Mulailah dengan menentukan hal – hal berikut : 

Tujuan Desain

Pentingnya mengetahui tujuan dalam mendesain, acuan dan batasan ke setiap setiapses sesii peranc perancang angan an yang yang dilaku dilakukan kan,, maka maka langk langkah ah awal awal sebelu sebelum m mendesain web, yang perlu diketahui adalah mengetahui “ tujuannya”. Apa 13


yang menjadi tujuan membuat web tersebut. Statement-nya Statement-nya harus jelas dan objektif. Perencanaan yang matang dan terstruktur merupakan kunci sukses dalam mendesain web. Simpulkanlah tujuan dengan memperhatikan hal tersebut di bawah ini :



•

Mengetahui kerangka pemikiran yang menjadi tujuan

•

Mengetahui objek-objek yang utama yang akan disertakan

•

Mengetahui kerangka materi isi (outline) yang akan ditampilkan

•

Mengetahui resources tentang isi dan graphics yang yang akan dilayout

Strategi Desain

Selain itu, melalui kajian “Kaidah “Kaidah Desain Desain Web”, tujuan mendesain mendesain web dapat dijadikan dijadikan sebagai sebagai acuan. Biasanya, Biasanya, strategi strategi desain didasarkan didasarkan pada acuan deskripsi deskripsi sebagai sebagai berikut : Who

> Siapa yang ingin membuat ?

(Produsen, Distributor, Agen, Pendidikan, Instansi, ….) Siapa saja yang akan mengaksesnya ? (public, community, new ebble, advanced user, ….) What What

> Apa Apa saja saja yang yang akan akan dita ditamp mpil ilka kan n di di web web site siteny nya a?

(product, service, e-Commerce, took online, promo, profile, ….) Bagaimana bentuknya ? (static, animasi, codeless html, ……) Where Where

> Dima Dimana/ na/pa paka kaii tools tools apa apa aka akan n di di buat buat ?

(Dreamweaver, Golive, Frontpage, Photo Express, dsb) Kemana akan dipublikasikan ? (fitur reliable web server atau hosting) When When

> Kap Kapan an haru harus s dip dipub ubli lika kasi sika kan n?

14


(publish to internet, due date) Setiap kapan harus di update/ubah tampilan ? (maintenance) Why

> Ke Kenapa ha harus st static ht html ?

Bagaimana kalau animated website ? Kenapa harus formal layout ?

(look & feel formation) 

Menentukan target pengunjung potensial

Langkah selanjutnya adalah mengetahui para pengunjung potensial yang akan akan membuk membuka a websit website e kita. kita. Dengan Dengan

demiki demikian an kita dapat dapat menyusun menyusun

tampilan berdasarkan factor-faktor internal “user” – user minded, misalnya disesuaik disesuaikan an dengan dengan knowledge knowledge mereka dalam ber-internet ber-internet (new webble webble atau atau adva advanc nced ed user user), ), inte intere rest st dan dan kein keingi gina nan n mere mereka ka dari dari semu semua a fitu fitur r informasi yang akan ditampilkan. Tamp Tampililan an webs websit ite e deng dengan an susu susuna nan n yang yang jela jelas, s, tepa tepat, t, muda mudah h dan dan cepa cepatt dala dalam m mengak mengakses ses juga juga dapat dapat dijadi dijadikan kan acuan acuan oleh oleh para web design designer, er, misaln misalnya ya dengan dengan menamp menampilk ilkan an teks-t teks-teks eks menu menu se-det se-detail ail mungki mungkin, n, adanya adanya index index page page atau atau site site map sebagai pembantu, merupakan tindakan komprehensif untuk membantu mereka ketika “search” atau “retrieval”. Yang akan menambah nilai keakuratan informasi yang kita berikan berikan ke mereka mereka dan dapat dapat menjad menjadii point-p point-poin ointt yang yang dihara diharapka pkan n oleh oleh para user pengguna internet ketika mem-browsing.

Mengenai Mengenai masalah masalah tampila tampilan, n, dengan dengan meng-cust meng-customis omisasi, asi, semua semua tampilan tampilan webpage dengan look & feel yang benar dan tepat sesuai tema isi, juga akan membuat betah para pengunjung untuk berlama-lama membrowsing setiap halaman. Selain mereka mendapatkan informasi melalui alur system link yang mudah dan cepat, tampilan teks yang jelas juga total rancangan nice nice look look yang yang diha dihadi dirk rkan an memb membua uatt visu visual alis isas asii kepa kepada da mere mereka ka enak enak dipandang dan dramatis untuk dilihat. 15


2. Meto Metoda da-m -met etod oda a

Metoda Rekayasa Web merupakan seperangkat teknik yang memungkinkan seorang designer web dapat mengembang mengembangkan kan aplikasi aplikasi web yang berkualitas diantaranya sebagai berikut : a. Communic dengan an cara cara memfas memfasililit itas asii komu komuni nika kasi si Communication ation method method , deng

anta antara ra

designer designer web web dengan dengan tim yang yang terlibat terlibat dalam dalam pengemba pengembangan ngan web web dan dengan stakeholder (stakeholder, e.g., end-users, business clients, problem domain experts,

content designers, team leaders, project managers). b. Requirement Requirement analysis method , menentukan kebutuhan isi (content ) yang akan di tampilkan tampilkan dalam Aplikasi Aplikasi Web , fungsi atau fasilitas, fasilitas, dan model interaksi interaksi antar pengguna termasuk navigasi navigasi yang tersedia tersedia dalam web. c. Design method , serangkaian teknik design dalam hal tata letak isi aplikasi web, arsitektur aplikasi dan informasi, design antar muka dan struktur navigasi d. Testing method , merupakan mekanisme formal dalam memeriksa ulang model isi, design serta seperangkat seperangkat teknik pengujian tata letak letak isi dan arsitektural, design antar muka dan struktur navigasi.

3. Kaka Kakas s (tools (tools)) dan dan Tekno Teknolog logii

Merupaka seperangkat kakas dan teknologi yang senantiasa senantiasa berkembang dari waktu ke waktu. waktu. Teknologi Teknologi menekankan menekankan pada seperangkat seperangkat bahasa pengkodean pengkodean dan pemodelan pemodelan (conto (contohny hnya a HTML, HTML,VRM VRML,X L,XML) ML),, bahasa bahasa pemrog pemrogram raman an seperti seperti java, java, browser browser,, tool tool toolmultimedia, site autorin autoring g tools tools , tool - tool koneksi ke data base, security security tools tools, servers and server utilities , site management and analysss tools .penjelasan lebih lanjut

dapa dapatt dipe dipela laja jari ri

mela melalu luii web web site site : www.wdlv.com , www.webddeveloper.com www.webddeveloper.com,,

www.webknowhow.net,, www.webreference.com www.webknowhow.net

16


Tugas

Cari Carila lah h penj penjel elas asan an untu untuk k profe profesi si-p -pro rofe fesi si beri beriku kut, t, seca secara ra lebi lebih h rinc rinci, i, pengembangan web :

dala dalam m tim tim

web architec, web specialist, web page developer dan web site developer

17


Pertemuan II dan III

Pengantar Kaidah Desain Web dan Aksesibilitas : • • • • • • • • •

Filosofi Desain Web Sepuluh (10) kaidah desain Web menurut Peter Kentie Sembilan (9) prinsip desain web web menurut tim wahana computer User oriented Optimasi Manajemen Situs Testing Informasi Kelayakan Aksesibilitas korelasi antara Desain web dan desain komunikasi visual

Target pembelajaran : Mahasiswa dapat : • • • • • • •

Memahami filosofi mendesain web Mengetahui rambu-rambu dalam mendesain mendesain web Menyebutkan kaidah – kaidah utama dalam mendesain web Memahami konsep aksesibilitas dalam mendesain web Memperhatikan aspek-aspek aksesibilitas dalam mendesain web Melakukan testing kelayakan aksesibilitas Menyebutkan korelasi antara desain web dan desain komunikasi visual

18


Filosofi Desain web

… Usability determination – Description Web Design principles, ……

Bahasan Bahasan atau atau pengkaj pengkajian ian Kaidah Kaidah Desain Desain Web, Web, merupak merupakan an penjaba penjabaran ran atau atau penjelasan dari Web Design Principles pada setiap aspek atau semua aplikasi mendesain web.

… Usability First – Practice Simplicity, …… 19


Filosofi tersebut mengacukan bahwa pertama kali yang harus dipahami adalah memahami Kaidah-nya lalu kemudian menerapkan konsep desain yang dibuat dengan se-Simple mungkin – sesederhana mungkin dengan tidak mengurangi daya tariknya. Simplicity Simplicity sebagai salah satu aspek bahan kajian Kaidah Desain Web yang cukup fundamental dalam mendesain web, merupakan salah satu metodo metodolog logii yang yang cukup cukup prinsip prinsipilil dan meng-gl meng-global obal dalam dalam meranca merancang ng sebuah sebuah situs, dimana dengan mengacukan simplicity merupakan motivator yang cukup kompeten dan potensial serta memberi kemampuan signifikan bagi para web designer dalam menampilkan sebuah situs web yang layak tampil di internet dan relevan dengan fitur akses/download point.

… Usability Concept Maker – Easy to Learn and Use ……

Filosofi di atas merupakan tujuan yang diintisarikan dalam kaidah desain web. Kaidah merupakan sebuah acuan dalam membuat sebuah konsep, untuk dikaji berulang-ulag sebagai pemahaman lebih lanjut terhadap kontekstual merancang sebuah web, agar web tersebut dibuat mudah dipelajari dan mudah digunakan oleh user.

… Usability Doing Progressive – Appropriateness, ……

Kaidah disini bisa diartikan sebagai studi kelayakan bagi para web designer dala dalam m

memp mempel elaj ajar arii

atau atau

mema memaha hami mi

prose roses si

mend mendes esai ain n

web web

den dengan gan

mengadaptasikan dan menerapkan nilai-nilai kelayakan yang harus diterapkan pada setiap hasil rancangannya. … Web Design Principles – Basic Rules Designing Content, ……

20


Adanya pemikiran dan pertimbangan dalam mendesain, itulah yang menjadi dasar acuan prinsipil yang di jabarkan oleh Web Design Principles. Intinya “ bagaimana sebuah halaman web itu agar mudah dan cepat untuk diakses “ atau “bagaimana membuat tampilan dokumen di web agar mempunyai image/citra tertentu“, “bagaimana agar para pengunjung serasa betah untuk berlama-lama membrowsing content sesuai tujuannya” dan semuanya terfokus pada kajian kaidah kaidah “men “mende desa sain in web web yang yang baik baik dan dan benar benar”. ”. Berd Berdasa asarka rkan n misi misiny nya a yang yang berangkat dari alur komunikasi visual, diharapkan mampu membuat tampilan di web web yang yang nyat nyataa-ny nyat ata a haru harus s mena menari rik k dala dalam m meny menyam ampa paik ikan an pesa pesan n atau atau inform informasi asi yang yang dikonse dikonsepka pkan. n. “Kaidah “Kaidah Desain Desain Web” Web” akan akan memberi memberikan kan bahan bahan kajian untuk itu, berupa isi yang sarat akan fitur-fitur bahasan mengenai acuan, batasan, kelayakan, merancang sebuah image publikasi di web. … Usability in Designing – Purposed Visual Concept,……

untuk untuk Kaidah Kaidah dalam dalam proses proses mendesa mendesain, in, dituju ditujukan kan untuk untuk menduku mendukung ng sebuah sebuah konsep visual hasil perancangan yang eye catching (menarik perhatian) serta mempunyai sisi point of interest secara keseluruhan, untuk yang melihatnya. … Usability in mind – Be Understandeble Web Designer, ……

Dengan memahami kaidah Desain Web bagi seorang web designer, diharapkan dapat membuat sebuah situs dengan tampilan situs yang mempunyai criteriakriteria seperti : 

Tampilan yang menarik sesuai tema isi situs



Layout content page yang eye catching



Mudah dipelajari cara penggunaannya oleh pengunjung



Sistem navigasi yang mudah dan lugas digunakan oleh pengunjung



Mempunyai penggunaan dengan tingkat efisiensi yang tinggi (doing the right things)



Mempunyai tingkat kesalahan minimal, dalam pengoperasian oleh user



Pengun Pengunjun jung g akan akan merasa merasa puas puas dalam dalam mengak mengakses ses situs situs terseb tersebut ut dan kemungkinan besar akan kembali untuk mengaksesnya

21


Sepuluh (10) kaidah desain Web menurut Peter Kentie, sebagai berikut :

1. First First Create Create a Struct Structur ure e (menentukan (menentukan struktur struktur informasi, informasi, struktur struktur navigasi, navigasi, melalui diagram sederhana yang menggambarkan bagian-bagian situs ) 2. Put Valuable Content on Every Page (pastikan setiap halaman berisi informasi berharga atau bernilai,” competition on the web is intense, and web site visitor patienc patience e last as long as possible possible ‘

so you must give your your public their their money’s money’s

worth”)

3. Test Test the Site Site Befo Before re and and Durin During g Desig Design n (mengukur (mengukur kehandalan kehandalan situs

yang

berorientasi berorientasi pada pengunjung pengunjung merupakan merupakan keharusan, keharusan, berbagai cara bisa dilakukan dilakukan misalnya kuisioner, opini pengunjung potensial terhadap situs anda bagaimana?) 4. The First Impression is Key , sesuatu yang membuat pengunjung memastikan terus terus akses atau meningg meninggalk alkann annya ya (informa (informasi si

apa yang menjadi menjadi penekana penekanan n

disugu disuguhka hkan n oleh oleh situs situs kita, kita, tampil tampilan an komuni komunikas kasinn innya ya tidak tidak hanya hanya teks teks tapi tapi juga juga secara visual) 5. Use Common Sense Technology (web kita akan menarik jika senantiasa sesuai dengan dengan

perkem perkemban bangan gan teknologi teknologi,, sepert sepertii stand standar ar teknol teknologi ogi web terbar terbaru, u, bisa bisa

ditampilkan oleh multi browser dll ) 6. Offer Offer

Alter Alterna nativ tives es

(men (menaw awar arka kan n

alte altern rnat ativ ive, e,

misa misaln lnya ya

dala dalam m

apli aplika kasi si

Macromedia Macromedia flash selalu menghendaki menghendaki update dalam versi terbarunya, terbarunya, sehingga aplikasi aplikasi web harus menjamin menjamin update secara secara otomatis. otomatis. Hindari Hindari file gambar yang yang terlalu berat, yang akan membebani akses). 7. Design with Intelligence and Restraint

(per (perbe beda daan an

stan standa darr

kece kecepa pata tan n

akses akses yang yang dimili dimiliki ki penggu pengguna na seharu seharusny snya a tidak tidak menjad menjadii hambat hambatan, an, sehing sehingga ga designer web harus mengatur agar web mudah tampil, kurangi bahkan hindari logo iklan yang tergantung pada koneksi luar? “Try to isolate the banner in the lay out, so that the entire page does not have to wait for it )

8. Clear dengan an meng menggu guna naka kan n navi naviga gasi si yang yang Clear and and Consis Consisten tentt Navig Navigati ation on ( deng disediakan disediakan pengunjung pengunjung sangat mudah mengakses mengakses isi atau content content informasinya informasinya atau lebih baik lagi jika memiliki fasilitas search engine) . 9. Web Web Desig Design n is Dynam Dynamic ic and and Proac Proactiv tive e (lakuk (lakukan an evalu evaluasi asi

secara secara berk berkala ala

terhadap desain dan isi nya, senantiasa berorientasi pada selera pengunjung) 10. And And Above All ….(poin-poin penting dari sembilan kaidah sebelumnya)

22

Modul Perkuliahan Pemrograman Web 

Avoid busy, cluttered backgrounds that make the text in the foreground

hard to read. 

Adjust the background colr to suit the background pattern. This prevents

a shock effect when opening the page. 

Avoid Avoid web web page page that that merel merely y offer offer scree screen-f n-fill illin ing g plug plug—in —ins s witho without ut

providing analternative HTML version for the user who does not have that plugin. 

Alwa Always ys make make backg backgrou round nd music music an optio option n ; unwa unwante nted d sound sounds s are

annoying. 

Ensure readable text sizes, and do not use too many different fonts and

font sizes on the same page. 

Avoid Avoid unne unnece cessa ssary ry GIF image images s when when the same same inform informati ation on can be

offered in text only HTML. 

Be conse conserva rvativ tive e with with all-up all-uppe perca rcase se text-i text-it’s t’s diffic difficul ultt to read read and and is

associated with shouting. 

Do not turn your site into “brochureware” ; try to avoid reusing exiting

information. The web is an interactive medium and requires a different approach. 

Be wary of actions your visitors won’t expect. They won’t appreciate an

applet that loads suddenly or an unannounced pop-up window. 

GIF animations are cool and frequently the only dynamic element on the

page. However, too many of them are not at all cool and speed suffers as well. 

Regularly check your site. Pages that can no lnger be found and java or

javascript error messages aggravate the user.

Sembilan (9) prinsip desain web [wahana computer] :

1. Situs web dibuat untuk pengguna Dalam proses perancangan web, seorang web desainer harus memfokuskan desa desain inny nya a pada pada kepe kepent ntin inga gan n peng penggu guna na.. Hal Hal ini ini juga juga bera berart rti, i, web web desa desain iner er harusmengangga harusmenganggap p pengguna adalah seorang seorang yang awam terhadap terhadap segala aspek yang yang ada ada pada pada situs itus web. web. Apa Apa yang yang diinginka diinginkan n oleh desainer desainer belum belum tentu tentu m en ja di

ap a

ya ng

diinginkan

pengguna.

Web

desainer

juga

harus

mempertimbangkan karakter pengguna yang berbeda satu sama lain. Pengguna 23


yang mengunjungi mengunj ungi situs web berasal dari da rilatar latar belaka belakang, ng, kebud kebuday ayaan aan,, pendidikan pendidikan dan kepe kepent ntin inga gan n yang yang berb berbed edaa-be beda da maka maka desa desain in web web yang yang dibu dibuat at setidaknya harus mewakili selera sebagian besar pengguna pengguna.. 2. Utility dan Usability

Utility adalah kegunaan atau fungsionalitas suatu web, sedangkan usability ada adalah lah sifat sifat situ situs s web yang yang mend menduk ukung ung kema kemamp mpua uan n peng penggu guna na dalam dalam mema memani nipu pula lasi si situ situs s web web sehi sehing ngga ga peng penggu guna na memp memper erol oleh eh apa apa yang yang diperlu diperlukann kannya. ya. Beberap Beberapa a ciri ciri dari usabi usabilility ty anta antara ra lain lain:: dapat dapat dipela dipelajar jarii dengan dengan mudah, mudah, penggun penggunaan aannya nya efisie efisien, n, kesalaha kesalahannya nnya minima minimal, l, mudah mudah diingat oleh pengguna, dan membuat pengguna peng guna menjadi puas. puas . Situs web yang dibuat dibua t harus ha rus menggabungkan menggabungkan kedua aspek aspek ini untuk mencapai mencapai tujuan dari pembuatan situs web. 3. Correctness Correctness maksudnya tidak ada kesalahan dalam penulisan script situs

web, antara lain: •

Dalam penulisan sript HTML tidak ada kesalahan.

•

Gambar-gambar yang ditampilkan sesuai yang diharapkan.

•

Elemen Elemen-el -eleme emen n yang interak interaktif tif (JavaSc (JavaScript ript,, CGI, CGI, dan lain-la lain-lain) in) dapat berfimgsi dengan benar.

•

Tidak ada kesalahan dalam sistem navigasi (link yang kosong atau broken link).

4. Batasan media Internet Internet dan web

Browser •

Membuat Membuat situs situs web yang bisa dipakai dipakai setiap setiap browser. browser. Untu Untuk k itu web desainer

harus rus

menggunakan

fitur-fitur

penduk pendukung ung

yang yang

bisa bisa

dijalankan di semua atau seba sebagi gian an besa besarr brow browse ser. r. Seba Sebaik ikny nya a web web desain desainer er tidak tidak menggunaka menggunakan n fitur-fi fitur-fitur tur yang hanya hanya mendukung mendukung satu browser saja (misalnya, Active X untuk browser IE). •

Membuat Membuat situs web dengan dengan memperhati memperhatikan kan pilihan pilihan setting setting browser browser para pengguna, sehingga ha laman tersebut dapat tampil tampil dengan lebih maksimal. Sebuah situs web yang sering memakai Java Script tidak 24


dapa dapatt dili diliha hatt deng dengan an opti optima mall mela melalu luii sebu sebuah ah brow browse serr yang yang tida tidak k mengi mengiji jinka nkan n pemak pemakai aian an Java JavaSc Scri ript. pt. Untu Untuk k itu itu dapat dapat diusah diusahak akan an dengan tidak memakai fitur-fitur fitur-fitur yang yang mung mungki kin n "ber "berma masa sala lah" h" kala kalau u pema pemaka kaia iann nnya ya tida tidak k memb member erik ikan an keun keuntu tung ngan an pada pada hala halama man n web web tersebut, atau paling paling tidak tidak diberika diberikan n pesan pesan werning kepada pengguna untuk untuk kebutuhan kebutuhan setting setting pada pada fiturfitur-fit fitur ur yang ada Misalny Misalnya a "J ava ava Script (Untuk uk kebutuhan kebutuhan JavaScript JavaScript pada situs web) atau "Better Needed' (Unt (anjuran an kepada pengguna untuk viewed on 1024 X 768 resolution' (anjur membuka situs web dengan resolusi layar tersebut). •

Seda Sedapa patt mung mungki kin n buat buatla lah h situ situs s web web deng dengan an tekn teknol olog ogii yang yang pali paling ng compatible dan dapat di-load oleh sebagian besar browser sehingga bisa

diterima oleh lebih banyak pengguna. Oleh sebab itu, hindari pemakaian teknologi yang terlalu tua (kuno) yang sudah banyak ditinggalkan orang atau teknologi yang terlalu baru atau canggih yang belum banyak dikenal orang.

Bandwidth

Besar bandwith merupakan kendala yang paling sering dijumpai. Untuk menghasilkan sebuah situs web yang menarik namun tetap cepat di-load maka ini berpengaruh juga terhadap besarnya file total situs web yang akan dibuat, juga termasuk gambar-gambar yang digunakan. Untuk situs web yang baik, web desainer harusmengusahakan loading halaman web tidak lebih dari 8 detik dan ukuran file setiap halaman HTML beserta imageimagenya tidak lebih dari 65 Kb, agar pengguna yang mengunjungi situs web tersebut tidak menjadi jenuh dan pindah ke situs web lain. Untuk itu hal-hal yang harus diperhatikan adalah: •

Memb Membua uatt hala halama man n yang yang dapa dapatt di-l di-loa oad d brow browse serr deng dengan an cepa cepat. t. Hind Hindari ari pemakaian atau buanglah tag-tag HTML yang tidak diperlukan atau yang kosong. Untuk tag-tag HTML dengan for -mat tertentu yang harus diulangulang ulang di setiap setiap penuli penulisan san halama halaman, n, sebaik sebaiknya nya tag itu digant digantika ikan n dengan dengan pemakaian CSS (Cascading Style Sheets).

•

Beberapa tag-tag HTML (khususya image dan table), ada atribut yang akan membantu browser untuk menampilkan halaman walaupun belum seluruh 25


hala halama man n

di-l di-loa oad d

sec secara ara

leng lengka kap p

dari dari web serve erverr

(bro (brow wser dapa dapatt

menggunakan incremental rendering). •

Menggunakan format citra yang efisien. Untuk itu, dalarn pembuatan situs web, web, format format citra citra yang yang diguna digunakan kan sebaik sebaiknya nya format format yang yang menggu menggunak nakan an kompresi yang cukup bagus, seperti format GIF, PNG atau JPEG.

5. Situs Situs web harus memperhatikan aspek GUI GUI (Graphical User Interface)

Dalam proses perancangan situs web, web desainer harus menggunakan prin prinsi sipp-pr prin insi sip p yang yang tela telah h dike dikena nall oleh oleh sebag sebagian ian besar besar penggu pengguna. na. Contohnya sebagai berikut: Sebuah image yang menghubungkan ke halam halaman an depan depan sebai sebaikny knya a adalah adalah image image yang yang menye menyerup rupai ai bentuk bentuk rumah, rumah, karena bentuk rumah itu telah dikenal oleh pengguna seba sebaga gaii ruma rumah h temp tempat at dima dimana na ia pula pulang ng atau atau kemb kembal ali. i. Bila Bila image image terse tersebut but menyerupai bentuk mobil, tentu pengguna akan menjadi bingung apa maksud maksud dari image image tersebut tersebut,, bisa bisa saja saja penggu pengguna na meng mengang angga gap p bahw bahwa a image tersebut adalah link menuju halaman penjualan mobil. Contoh lain adalah penggunaan warna pada text. Warna merah biasanya digunakan untuk menekankan arti suatu informasi atau peringatan akan suatu hal yang penting. Jadi informasi yang bersifat biasa dan bukan peringatan sebaiknya tidak menggunakan warna merah. Situs web yang baik harus mudah dipahami pada saat pertama kali pengguna mengunjungi situs web tersebut karena pada saat itulah yang menentukan apakah pengguna akan mengunjungi situs web itu lagi. 6. Struktur Link dan Navigasi

Situs web yang baik memiliki sistem navigasi yang jelas.

Dalam proses perancangan situs web, web desainer harus membuat navigasi yang jelas bagi pengguna sehingga pengguna tidak tersesat karena link yang disediakan tidak atau kurang jelas. Pengguna harus dapat menjelajahi semua hala halama man n deng dengan an muda mudah. h. Peng Penggu guna na harusmenda harusmendapa patk tkan an info inform rmas asii tent tentan ang g halaman yang sedang dikunjungi dan sudah dikunjungi. Perlu juga diperhatikan kecepatan pengguna dalam mendapatkan mendapatkan informasi informasi yang diin diingi gink nkan an misalnya misalnya dengan cara cara mengatu mengaturr link link sedemi sedemikia kian n rupa rupa sehing sehingga ga pengguna pengguna mendapat mendapatkan kan 26


info inform rmas asii kura kurang ng dari dari 5 kali kali mela melaku kuka kan n klik klik.. Hal Hal ini ini sang sangat at penting penting artinya artinya untuk kepuasan dan kenyamanan pengguna terhadap situs web.

Penggunaan struktur yang tepat dalam navigasi.

Dalam proses perancangan situs web, web desainer harus mengguna menggunakan kan struktur link yang yang tepat sesuai dengan dengan jenis informasi yang ingin ditampilkan . Hal Hal ini ini penti penting ng karen karena a jenis jenis info inform rmas asii sang sangat at menen menentu tuka kan n cara cara atau atau bagaima bagaimana na penggu pengguna na menda mendapat patka kan n infoi infoi-masi ters terseb ebut ut.. Seba Sebaga gaii cont contoh oh,, sebuah informasi informasi tutorial tutorial yang harus disampaika disampaikan n tahap tahap demi tahap lebih cocok cocok menggu menggunak nakan an struk struktur tur linear linear karena karena penggu pengguna na harus harus memaha memahami mi informas informasii tersebut tersebut dari halaman satu ke halaman halaman lainnya lainnya tanpa tanpa ada pilihan pilihan link link menuju ke lebih darisatu halaman.

Beberapa tips yang dapat digunakan untuk membuat struktur link dan navigasi yang baik adalah: •

Usahakan Usahakan agar navigasi navigasi yang digunakan dalam peranca perancanga ngan n situs situs web tetap konsisten.

•

Sebelu Sebelum m membang membangun un situs situs web sebaik sebaiknya nya membua membuatt flow flowch char artt dari dari struktur link dan navigasi.

•

Mempertimba Mempertimbangkan ngkan priorit prioritas as dan jenis isi isi situs situs web web denga de nga n men emp atk an isi yang lebih penting pada halaman-halaman halaman-halaman pertama dalam struktur struktur link dan navigasi. navigasi.

7.

Alat Bantu •

Site Map

Web desai desaine nerr dapat dapat mengg mengguna unaka kan n site m ap memper ermu muda dah h ap untuk memp peng penggu guna na dalam dalam mema memaha hami mi tentan tentang g isi isi dan halaman halaman pada situs web dan dapat dapat mempe memperm rmuda udah h penge pengemb mbang angan an dan pemeli pemelihar haraan aan situs situs web web karena hubungan antar halaman pada situs web mudah dipahami oleh pihak-pihak yang terkait dalam pengembangan situs web seperti web programmer, web administrator dan web desainer. •

Search Engine

27


Apab Apabil ila a juml jumlah ah hala halama man n web web menc mencap apai ai lebi lebih h dari dari 100 100 hala halama man, n, sebaiknya dibuat sebuah search engine. •

Site Index

Selain search juga memi memililiki ki fungs fungsii yang sama, sama, yaitu search engine, engine, site index juga untuk membantu pengguna dalam mencari informasi informasi yang yang diinginka diinginkan. n. •

Help Sistem Tugas web desainer untuk membuat suatu layanan Help sistem yang dapa t menjelas menjelaskan kan tentang tentang hal-hal yang yang bersifat bersifat tutorial tutorial bagi pengguna, pengguna, misa misalr lrry rya a membuat membuat sebuah sebuah halaman halaman khusus yang berisi informasi tentang penggunaan penggunaan fasilitas e-ma e-mailil,, forum, forum, cara cara meng mengak akse ses, s, cara cara mend mendap apat atka kan n password dan lain sebagainya.

8. Tamp Tampililan an Visu Visual al Tampilan visual sangat mempengaruhi persepsi awal pengguna mengenai suatu situs web. Yang terpenting dalam tampilan visual adalah bagaimana tampilan visual situs web dapat memberikan kesan tersendiri bagi pengguna atau secara sing singka katt desa desain in yang yang dibu dibuat at memi memililiki ki keun keunik ikan an ters tersen endi diri ri.. Sela Selain in keun keunik ikan an tentunya juga harus dapat menarik bagi sebagian be sar pengguna. pengguna. Hal Hal ini juga juga penting artinya bagi tercapai tercapainya nya tujuan pembuatan situs web yaitu dap at men arik arik pengunjung sebanyak-banyaknya ke situs web tersebut. Beberapa hal yang perlu diperhatikan dalam pembuatan tampi tampilan lan vis visual ual yan yang g menarik adalah sebagai berikut: •

Sebelum Sebelum memula memulaii proses proses perancan perancangan gan tampila tampilan n visual visual,, sebaikny sebaiknya a web desainer memahami tujuan pembuatan situs web tersebut dan mengolah i m a ji n a s i n ya

ag a r

tampilan

visual

ini

dapat

mendukung

dan

mengkomunikasikan tema dari situs web. •

Web desaine desainerr harus harus selekt selektif if dalam dalam memili memilih h imagei-m imagei-mage age yang ingin ditamp ditampilk ilkan an sehing sehingga ga memili memiliki ki keun keunik ikan an ters tersen endi diri ri dan dan klie klien n tida tidak, k, berpikir bahwa situs webnya mirip atau mengambil desain situs web lain.

•

We b

desainer

ha r u s

tetap

menjaga

aspek

kesederhanaan

penggunaan untuk menjaga kepuasan pengguna yang mengunjungi situs web tersebut 28


9.

Kombinasi tampilan, isi, teknologi, kegunaan dan tujuan Prins Prinsip ip ini pada pada dasarn dasarnya ya adalah adalah gabungan gabungan dari semua semua prinsip di atas karena sebua h situs web yang baik haru s dapat menggab menggabung ungkan kan semua semua pins pinsip ip terseb tersebut ut menjadi satu kesatuan yang mendukung tujuan pembuatan situs web tersebut.

Aksesibilitas

“Kaidah yang berorientasi berorientasi pada pembahasan pembahasan masalah Aksesibelitas Aksesibelitas merupakan acuan untuk menilai seberapa mudahnya situs dapat diakses dan dibaca berikut manilai fitur isi yang layak.”

User Oriented

Materi aksesibilitas aksesibilitas yang berorientasi kepada Pengguna (user ), ), meliputi : 

Isu-isu seputar Akses Informasi



Isu-isu Cross Platform

Isu-isu seputar Akses Informasi

Sistem koneksi yang digunakan oleh user merupakan standar ukuran dalam mengakses situs yang kita rancang. Pertimbangkanlah, kira-kira jumlah kilobyte semua isi situs, diusahakan untuk bisa reliable dengan fitur kecepatan koneksi mereka (semakin kecil jumlah jumlah kilobyte kilobyte semakin baik untuk diakses). diakses). Menurut data statistic statistic,, bahwa pengakses pengakses internet diseluruh dunia hamper 75% adalah menggunakan koneksi via modem 28 kpbs s.d 56 kpbs dengan fitur dial-up, sisanya fitur fast connected dengan bandwith yang berbeda-beda seperti dedicated line, TI,TV kabel, Satelit dan sebagainya. Jadi hal ini patut menjadi pertimbangan agar situs yang kita rancang mempunyai sikap tolera toleransi nsi tinggi tinggi sesuai sesuai fitur fitur koneks koneksii mereka mereka,, sebaga sebagaii contoh contoh : tidak tidak mungki mungkin n kita kita menambahkan fitur multimedia (e.g. movie, footage video atau file-file yang berat) untuk 29


bisa diakses oleh mereka yang menggunakan koneksi dial-up, paling tidak fitur situs ini pantas untuk mereka yang terbiasa dengan fitur koneksi cepat – high access.

Isu-isu Cross Platform Sebelu Sebelum m mendes mendesain ain halama halaman n web, web, ada acuan acuan yang yang perlu perlu diperh diperhati atikan kan berken berkenaan aan deng dengan an user user orien oriente ted, d, beru berupa pa kaid kaidah ah este esteti tis s yang yang perl perlu u dipe diperh rhat atik ikan an meng mengen enai ai kepentingan-kepentingan user pada sesi Akses Point, yang mempunyai perbedaan yang cukup significant antara asing-masing user. Perbedaan inilah yang dimaksudkan untuk diperhatikan dan dipertimbangkan oleh para web designer sebelum mendesain webnya. Para netter sebagai pengakses internet di seluruh dunia yang akan membrowsing situs kita, kita, mempun mempunyai yai perang perangkat kat akses akses yang yang berbed berbeda-be a-beda, da, contoh contohnya nya : Platfo Platform rm yang yang mereka gunakan- computer. Platform diklasifikasikan oleh 2 perangkat yang telah kita kenal, yaitu Personal Computer (PC- Desktop, Laptop, Workstation, Server, dsb) dan Mac (Macintosh). Keberadaan mekanisme fitur seperti tampilan monitor, kalibrasi warna dan browser, pada masing-masing platform berbeda-beda. Hal ini patut dipertimbangkan oleh para web designer, karena kemungkinan besar tampilan halaman situs yang kita buat sesuai platform yang kita pakai ketika merancang, akan berbeda tampilannya di platfo platform rm mereka mereka karena karena perbed perbedaan aan terseb tersebut. ut. Beriku Berikutt adalah adalah contoh contoh pertim pertimban bangan gan sesuai konteks ini, diantaranya : •

Tamp Tampililan an moni monito tor, r, anta antara ra [640 [640x4 x480 80]] [800 [800x6 x600 00]] dan dan [102 [1024x 4x68 68]] mana mana yang yang pantas pantas/se /sesua suaii rancan rancangan gan kita, kita, agar agar bisa bisa tampil tampil maksim maksimal al pada pada semua semua ukuran ukuran tampilan monitor tersebut.

•

Kalibrasi warna monitor, antara Indexed color, 256 color atau 8,16, 32 bit, mana yang reliable dengan image warna pada rancangan kita.

•

Browser, bisakah tampilan maksimal atau paling bisa compatible antara tampilan di internet explorer, netscape, opera, neoplanet, dsb, sesuai versinya masingmasing dengan platform kita.

30


Dengan mengetahui isu ini, kita dapat mem-prediksikan atau mengusahakan agar situs yang kita rancang dapat tampil fleksible pada semua aspek isu Cross Platform ini, dengan acuan desain yang bisa sebijaksana mungkin.

Optimasi

Material Optimasi meliputi : 

Pentingnya Optimasi



Acuan Langkah Optimasi

Pentingnya Optimasi

Para web designer patut bersikap bijaksana dalam mengolah tampilan dan fitur situs sesuai hal tersebut. Langkah optimasi inilah untuk mengantisipasi isu-isu seputar akses informasi yang layak disikapi oleh para web designer terutama masalah bandwidth yang harus diperhitungkan. Optimasi Optimasi semua elemen elemen desain desain web, mulai dari graphic graphic berupa ilustrasi, ilustrasi, image digital, digital, bitm bitmap ap-- vect vector or samp sampai ai deng dengan an form format at soun sound d dan dan anim animas asii mult multim imed edia ia,, deng dengan an meminimalka meminimalkan n jumlah jumlah bytes setiap file graphic graphic sekecil sekecil mungkin, mungkin, tapi tetap menjaga menjaga tampilan visual optilnya, merupakan langkah efficient design, dalam melayout sebuah rancang rancangan an websit website, e, guna guna me-rel me-releva evansi nsi-ka -kan n kemuda kemudahan han akses akses para para user user sebaga sebagaii internet audience-modem-based, dengan visualisasi yang layak dan maksimal.

Acuan Langkah Optimasi

Pada sesi Langkah Optimasi_Elemen Desain Web yang harus diperhatikan adalah :

31


1.

Perhat Perhatika ikan n ukuran ukuran format format file file untu untuk k dapat dapat sekeci sekecill mungki mungkin n dengan dengan

menjaga nilai visualisasi optimal gambar aslinya. 2.

Pertim Pertimban bangka gkan n kone koneksi ksi user user yang yang berbed berbeda-b a-beda eda..

3.

Gunakan Gunakanlah lah sela selalu lu plugs plugs-in -in untuk untuk memban membantu tu web web brows browser er dalam dalam

menampilkannya.

Contoh aplikasi teknik optimasi optimasi dalam desain web web

Optimasi untuk menghsilkan ukuran file dibawah 50 k dan kecepatannya dibawah 8 detik, dalam desain antar muka menggunakan Makromedia Firework :

panel optimasi pada Makromedia Firework

32


Sebelum op optimasi (d (design or original)

Setelah op optimasi

Menyimpan pada setting optimasi kita, klik klik tanda +, pada optimize and swatches

33


Manajemen Situs

Material manajemen situs Meliputi : 

Pentingnya Struktur Situs



Hirearchy & Keseimbangan Struktur



Sesi Testing

Pentingnya Struktur Situs Setelah kita mengetahui job description, langkah selanjutnya adalah mengorganisasikan atau mengelompokkan file dokumen/data situs yang akan menjadi content web, secara terstruktur dan terkonsentrasi di dalam sebuah struktur situs. Analoginya, Analoginya, Struktur Situs seperti seperti terminal-pa terminal-panel nel atau file explorer explorer di windows windows yang sering kita gunakan dalam mengelompokkan dokumen masing-masing section di setiap halaman web, juga memudahkan visualisasi aluran system navigasi dan alur links antar halaman dokumen, selain itu untuk memudahkan explorasi file ketika editing halaman web. Jika penyusunan dokumen web dalam struktur situs dapat terstrukturisasi dengan baik, ini akan me-refleksi-kan aluran system navigasi dan links yang baik pula.

Contoh :

34


Hirearchy & Keseimbangan Struktur Pengelmpokkan dokumen dalam situs, divisualisasikan dalam bentuk hierarchy. Skema concept general dokumen beserta link system antara dokumen di halaman web dapat dilihat melalui strukturisasi hierarchy ini. Konsep penyusunan dokumen dalam bentuk hierarchy terstruktur, mencerminkan layak tidakn tidaknya ya sebuah sebuah dokume dokumen n untuk untuk tampil tampil di web. web. Penyus Penyusuna unan n alur alur tatana tatanan n dokume dokumen n dengan desain seimbang antara yang satu dengan yang lainnya, juga aluran sistematis konsep navigasi, mencerminkan pula aluran dokumen yang mudah dan cepat untuk diakses, diakses, sehingga sehingga memudahkan memudahkan pula untuk dirancang dirancang sesuai sesuai designing designing target. Berikut Berikut ini adalah adalah contoh contoh penyus penyusuna unan n dokume dokumen n pada pada strukt struktur ur hierar hierarchy chy yang yang seimba seimbang, ng, sebagai berikut :

35


Contoh :

Dasar Struktur Situs dalam bentuk folder berorientasi seperti ini :

Contoh :

36


Perlu Perlu diketa diketahui hui pula pula bahwa bahwa proses proses uploadi uploading ng file file untuk untuk ditamp ditampilk ilkan an diinte diinterne rnet, t, juga juga dikoordinasi oleh struktur situs ini. Jadi perancangan struktur situs dapat menentukan proses final result yang benar-benar harus dipahami dalam penyusunannya oleh para web designer. Testing

Materi Testing Aksesibilitas meliputi :   

Kelayakan Standarisasi Validasi, Lint dan Browser Testing Testing Script

Kelayakan Standarisasi

Acuan Acuan stand standari arisai sai dari dari halama halaman n web untuk untuk layak layak tampil tampil,, harus harus diuji diuji kelaya kelayakan kannya nya melalui studi kelayakan standarisasi. 37


Standarisasi ini dimaksudkan ntuk semua fitur web site dalam format bahasa HTML agar sesuai dengan bahasa HTML yang standar. Berikut adalah acuan standarisasinya : •

W3C – The Word Wide Web Consortium

•

HTML 2.0/3.2/4.0

•

Web Design Group – Standards for HTML Auhtoring for the world Wide Web

•

The WDVL : HTML Standards Compliance

Validasi

Memvalidasi HTML pada halamanweb adalah sesi pengujian jika ada technical error pada fitur HTML. Layak dilakukan oleh para web designer dalam mengecek HTML yang tela telah h dide didesa sain in jika jika ada ada kesa kesala laha han-k n-kes esal alah ahan an tekn teknis is dan dan perl perlu u memp memperb erbai aiki kiny nya. a. Technical error disini diorientasikan pada kesalahan-kesalahan teknis HTML dalam hal komp kompet etib ibel elit itas as pada pada brow browse ser. r. Ini Ini adal adalah ah tuga tugas s dari dari vali valida dato torr seba sebaga gaii tool toolsn snya ya,, diantaranya adalah : 1. W3C HTML HTML – Valida Validatio tion n Serv Service ice 2. CSS Chec Check, k, a Casc Cascadi ading ng Style Style Shee Sheets ts Lint Lint 3. Net Mecha echani nic c 4. Spar Spare e the the Rod Rod and and Spoi Spoill the the Web Web

Linting Merupakan metode lain dalam pemeriksaan kesalahan di halaman web. Jika validator berguna berguna untuk untuk memeri memeriksa ksa kesala kesalahan han teknis teknis pada pada fitur fitur HTML, HTML, Linter Linter berguna berguna untuk untuk memeriksa kesalahan HTML secara keseluruhan, seperti missing ALT text, no HEIGHT and WIDTH WIDTH tags tags pada pada images images,, PERL PERL dan sebaga sebagainy inya. a. Toolsn Toolsnya ya dinama dinamakan kan Linter Linter,, diantaranya : 1. WWW.eblint 2. HTML Tidy 38


Browser Testing Menguj Mengujii kompat kompatibe ibelit litas as halama halaman n web merupa merupakan kan langka langkah h yang yang tepat tepat bagi bagi seorang seorang desain desainer er web, web, dalam dalam meliha melihatt tampil tampilan an desain desainnya nya pada pada multip multiple le platfo platforms rms,, browse browser r versio versions, ns, colr colr depths depths dan resolu resolusin sinya. ya. Gunakan Gunakan Browse Browserr Testin Testing g ini untuk untuk meliha melihatt kelayakan tampilan desain kita di browser, diantaranya dengan menggunakan : 1. Publ Public ic Lyn Lynx x Acce Access ss 2. BrowserWat BrowserWatch ch – Browser Browser Blvd (berisi (berisi listing listing available available browse browsers) rs) 3. Web page page Back Backwar ward d Compab Compabili ility ty Viewe Viewer r

Testing Script Jika halaman web ditambahkan dengan menggunakan fitur script, seperti Javascript, Java, Perl, CGI dan sebagainya, pastikan halaman tersebut mendukung aksesibelitas. Oleh karena itu, script script yang akan digunakan harus diuji dulu, jalan tidaknya. tidaknya. Langkah berikut merupakan contoh untuk menguji fitur script : •

Menggunakan Template Halaman

Lakuka Lakukan n penguj pengujian ian script script pada pada web templa template, te, untuk untuk meliha melihatt jalan jalan tidaknya, jika reliable, kita mengeditnya dan dikloning ke halaman desai yang sedang kita buat. •

Melihat Source

Pada setiap web desain tools, ada fitur opsi source. Disinilah kita bisa meliha melihatt kesala kesalahan han penggu penggunaan naan scrip scriptt yang yang mengak mengakiba ibatka tkan n error error pages yang sering terjadi, kemudian kita dapat menentukan editing untuk memperbaikinya pada source tersebut atau pada tools lain. •

Perhatikan Invalid Code

Erroe Erroe pages, pages, biasan biasanya ya terjad terjadii karena karena adanya adanya invali invalid d code code yang yang diguna digunakan kan,, jika jika seoran seorang g web design designer er mengua menguasai sai pemrog pemrogram raman an 39


script, script, perbaiki invalid code menjadi menjadi valid valid code, jika tidak menguasai menguasai pemrogr pemrograma aman n script script,, berita beritahuk hukan an kepada kepada web program programmer mer untuk untuk memperbaikinya.

Informasi Kelayakan Aksesibilitas

Materi Informasi Kelayakan Aksesibilitas meliputi : 

Konservasi Kelayakan Bandwidth



Browser Support/Availiability



“User” Special Needs



World Wide Issues

Konservasi Kelayakan Bandwidth Perhatikanlah selalu bandwith yang digunakan user dalam mengakses situs dengan parameter media koneksi (baca isu-isu seputar akses informasi). Para web designer patut melakukan hal ini untuk mempertimbangkan desain web yang dibuat sesuai fitur koneksi aksesibelitas yang layak akses. Mengenai informasi lengkap tentang konservasi bandwith, bisa di dapatkan di : •

Bandwith Conservation Society

•

If it’s, SAY So!

•

Optimizing Web Graphics – webreference.com

Browser Support/Availiability Tidak ada salahnya bagi seorang web designer mengetahui berbagai jenis browser yang mendukung fitur desain web, untuk menambah khasanah kreatif tampilan atau idea sites yang diinginkan. Informasi ini bisa didapatkan melalui : 40


A Compendium of HTML Elements (lists compatible browser)

•

BrowserWath (browser news dan beberapa statistic)

•

Webmonkey – Browser Kit

•

Bobby (check sites untuk disability access dan kompatibel browser)

•

Public Lynx Access

“User” Special Needs “User” “User” web mempun mempunyai yai specia speciall needs needs yang yang harus harus dipert dipertimb imbang angkan kan oleh oleh para web design designer. er. Mendes Mendesain ain situs situs yang yang mempun mempunyai yai aksesi aksesibel belita itas s yang yang tinggi tinggi oleh oleh semua semua browser merupakan pemikiran iovatif untuk membuat situs bisa diakses oleh semua orang orang dengan dengan segala segala perbeda perbedaan an fiturn fiturnya, ya, tetapi tetapi tidak tidak ada salahn salahnya ya jika jika para para web desainer mengetahui detail informasi mengenai hal special needs tersebut. Informasinya dapat ditemukan pada : •

Design Considerations : Readers with Visual Impairments

•

W3C Accessibility Developments – Design Guidelines

•

Designing More Usable Web Sites

•

Bobby (check sites untuk disability access dan kompatibel browser)

•

An Introduction to Speech- Access Realities for Interested Sighted Internauts

•

Colour Blind People and Link Colours

•

Color Perception Issues

•

About Color Blindness

World Wide Issues Hal yang dipandang isu-isu yang yang perlu diperhatikan diantaranya adalah :

Masalah Waktu, Tanggal, Lokasi dan Mata Uang 

Bahasa Internasional, Lokal, Non-English atau Multiple Languages

Masalah Waktu, Tanggal, Lokasi dan Mata Uang Meng Mengin inga gatt inte intern rnet et itu itu mend mendun unia ia,, tida tidak k ada ada sala salahn hnya ya jika jika para para web web desi design gner er memperhatikan permasalahan waktu, tanggal, lokasi dan mata uang yang akan berbeda ketika ketika para para user user mengak mengakses sesnya nya karena karena perbeda perbedaan an Negara Negara atau atau daerah daerah misaln misalnya. ya. Perluny Perlunya a inform informasi asi terseb tersebut ut untuk untuk ditamp ditampilk ilkan an serele serelevan van mungki mungkin n di situs, situs, untuk untuk 41


memb memban antu tu kemu kemuda daha han n akse akses s info inform rmas asii para para user user.. Ini Ini pun pun dise disesu suai aika kan n deng dengan an kepentingan masing-masing situs dalam tujuannya. Untuk informasi lebih detail bisa anda dapatkan di Confusion on the Net.

Bahasa Internasional, Lokal, Non-English atau Multiple Languages Sekali lagi karena internet itu mendunia dan user oriented , sajikanlah situs yang di desa desain in deng dengan an baha bahasa sa inte intern rnas asio iona nal. l. Jika Jika mung mungki kin n meng menggu guna naka kan n 2 baha bahasa sa,, internasional atau local, menggunakan bahasa inggris dan Indonesia atau salah satunya sesuai sesuai kepent kepenting ingan, an, agar agar berbaga berbagaii user user dengan dengan berbag berbagai ai kalang kalangan an dan perbed perbedaan aan dapat mengerti apa yang disampaikan oleh situs. Bagaimanapun bahasa adalah alat komunikasi. Walau dalam bentuk bahasa komunikasi visual, peranannya sama-sama penting dalam berkomunikasi yaitu antara user dengan informasi pada situs yang kita rancang. Informasi lengkap bisa anda dapatkan di ; •

W3C International and Localization

•

Babel – Internationalization of the Internet

•

Multilingual WWW Recources

•

Asia to Europe Multilingual Hypertext

Korelasi antara Desain Web dan desain Komunikasi Visual

Desain Komunikasi Visual sebagai bagian dari Apply Art , merupakan akar klasifikasi/ klasifikasi/korela korelasi si pemahaman pemahaman antara Desain Grafis, Grafis, Desain Multimedia Multimedia dan Desain Desain Web. Web. Desa Desain in Komun Komunika ikasi si Visu Visual al yang yang menj menjem emba bata tani ni pera peranc ncang angan an tampil tampilan an materi materi promosi promosi dan publik publikasi, asi, diapli diaplikas kasika ikan n kepada kepada 2 media, media, yaitu yaitu media cetak dan media interaktif dimana media cetak oleh Desain Grafis dan media interaktif oleh Desain Multimedia seperti animasi, video/audio editing dan TV Commercial/Broadast, dsb.

42


Seiring berkembangnya teknlogi internet, media world wide web dijadikan media alternative sebagai media untuk promosi dan publikasi, maka aplikasi desain komunikasi visualpun bertambah, konsep visualnya tidak hanya kepada media cetak atau media interaktif saja, juga merambah ke media internet dengan world wide web-nya. Dari sinila sinilah h Desain Desain Web mulai mulai dikena dikenall sebaga sebagaii media media visual visualisa isasi si yang yang menjem menjembat batani ani tampilan materi promosi dan publikasi untuk aplikasi internet – world wide web. Dengan demikian, esensi merancang atau men-desain tampilan di web, konsepsi visual dan sistematika prosesi merancangnya hampir sama, terkorelasi oleh 2 media perancangan perancangan sebelumnya sebelumnya yang kita kenal, kenal, yaitu Desain Grafis dan Desain Desain Multimedia, Multimedia, yang membedakan hanyalah fitur baku aplikasinya saja, dimana adanya acuan atau kaidah yang membatasinya yang harus diperhatikan. Mengenai visualisasinya kurang lebih sama yaitu keterpaduan antara tampilan teks dan gambar baik statis maupun multimedia dengan format html agar dapat ditampilkan di web. Jadi dalam men-desain web, terkhususkan untuk masalah konsep visual/tampilan web, web, sangat sangat layak layak jika jika kita kita mempun mempunyai yai latar latar belaka belakang ng pemaha pemahaman man tentan tentang g Desain Desain Grafi Grafis s dan dan Desa Desain in Mult Multim imed edia ia agar agar dapa dapatt dija dijadik dikan an nila nilaii tamb tambah ah terh terhad adap ap skil skilll merancang atau melayout systematic visual content untuk web bagi profesi seorang Desa Desain iner er Web, Web, deng dengan an pema pemaha hama man n tamb tambah ahan an meng mengen enai ai masa masala lah h kaid kaidah ah yang yang dikloning dengan mengurangi atau menambahkan fitur batasan dan acuannya. Begitupun Begitupun ketika ketika sesi men-desain men-desain struktur struktur situs dan interface. Dimana adanya acua acuan-a n-acu cuan an yang yang dipri diprins nsip ipka kan n sepe sepert rtii kepa kepada da Graph Graphic ic Desi Design gn Prin Princi cipl ples es dan dan Multimedia Design Principles.

43


44


Kuis

1.

Yang Yang dima dimaks ksud udka kan n deng dengan an filo filoso sofi fi Usability Concept Maker dalam prosesi mendesain web adalah : a. pertama kal kali yang harus dip dipahami adalah memahami Kaidah-nya lalu kemudian menerapkan konsep desain yang dibuat dengan se-Simple mungkin b. Kaidah me merupakan se sebuah ac acuan da dalam me membuat ko konsep, ag agar we web ya yang dibuat mudah dipelajari dan mudah digunakan c. Para Para web desa desain iner er dala dalam m mem mempe pela lajjari ari ata atau u mem memah aham amii pro pros sesi esi men mende des sain ain web dengan mengadaftasikan dan menerapkan nilai – nilai kelayakan yang harus diterapkan pada setiap hasil rancangannnya. d. Kaidah Kaidah dalam dalam proses proses mendes mendesain ain,, dituju ditujukan kan untuk untuk menduk mendukung ung sebuah sebuah konsep visual untuk hasil perancangan yang eye catching (menarik perhatian) e. Pengkajian kaidah desain web, merupakan penjabaran atau penjelasan dari web design principles pada semua aspek atau semua aplikasi mendesain web

2.

Dengan Dengan memah memahami ami kaid kaidah ah desain desain web, web, seora seorang ng desian desianer er web diha diharap rapkan kan memil memiliki iki rambu rambu – rambu untuk menghasilkan Kriteria – kriteria berikut, kecuali : Tampilan yang menarik sesuai tema isi situs Layout content page yang eye catching Mudah dipelajari cara penggunaannya oleh pengunjung Sistem navigasi yang mudah dan lugas digunakan oleh pengunjung e. Menampilkan ga gambar- ga gambar an animasi ya yang me menarik pe perhatian

3.

Menurut Peter Kentie Fasilitas search engine, merupakan implementasi dari kaidah berikut :

45


a. b. c. d. e. 4.

Use Common Sense Technology Offe Offerr Alt Alter erna nati tive ves s Design with Intelligence and Restraint Clear and Consistent Navigation Web Design is Dynamic and Proactive

Untu Untuk k mengha menghasi silk lkan an sebua sebuah h situ situs s web yang yang mena menari rik k namun namun teta tetap p cepat cepat di-loa di-load d maka maka sangat diperlukan diperlukan untuk memperhatikan atau melakukan hal-hal hal-hal berikut, kecuali : a. Ukur Ukuran an fil file e dari dari web web b. Form Format at fil file e gamb gambar ar c. Untuk beberapa tag HTML (khususnya image dan tabel) browser dapat menggunakan incremental rendering d. menggunakan menggunakan CSS untuk untuk tag HTML HTML yang yang berulang berulang - ulang ulang e. menggu menggunak nakan an bandw bandwidt idth h yang yang besa besar r

5.

Sebuah Sebuah situs situs web yang sering sering memaka memakaii Java Java Scri Script pt tida tidak k dapat dapat dilihat dilihat dengan dengan optimal optimal melalui sebuah browser yang tidak mengijinkan pemakaian JavaScript. Untuk itu dapat diusahakan dengan tidak memakai fitur-fitur yang mungkin "bermasalah", salah satunya sangat dianjurkan : a. Maksimal Maksimal 8 - 15 menit menit waktu waktu loading loading untuk untuk tiap tiap halaman halaman web web b. Better Better viewed on 1024 X 768 resolution c. mengatur link sedemikian rupa sehingga pengguna pe ngguna mendapatkan inform informasi asi kura kurang ng dari 5 kali melakukan klik. d. Apabila jumlah halaman web mencapai lebih dari 100 halaman, sebaiknya dibuat sebuah search engine e. sebuah informasi tutorial yang harus disampaikan tahap demi tahap lebih cocok menggunakan struktur linear

6.

Beri Beriku kutt yan yang g term termas asuk uk pad pada a kai kaida dah h dala dalam m aks akses esib ibililit itas as,, kec kecua ualili : a. b. c. d. e.

7.

Fitu Fiturr beri beriku kutt pali paling ng ban banya yak k digu diguna naka kan n dala dalam m akse akses s info inform rmas asii a. b. c. d. e.

8.

User ser ori orien ente ted d optimasi mana manajjemen emen si situs tus testing dime dimens nsii hala halama man n

TV kabel Satelit Dedic edicat ated ed line ine Dial up Radio

Dalam Dalam akse aksesib sibili ilitas tas,, kese kesesua suaian ian dengan dengan flatfo flatform rm beriku berikutt (tam (tampil pilan an moni monitor tor 640 x 480, 480, 46


800 x 600, 1024 x 768 ; kalibrasi warna monitor indexed color, 256 color, 8,16,32 bit ; tampilan yang compatibel dengan browser internet explorer, netscape, Opera, Neoplanet dsb) termasuk pada kaidah a. b. c. d. e. 9.

User ser ori orien ente ted d optimasi mana manajjemen emen si situs tus testing dime dimens nsii hala halama man n

Tuju Tujuan an kaid kaidah ah opti optima masi si dala dalam m aks akses esib ibililit itas as seba sebaga gaii ber berik ikut ut a. Digunakan Digunakan untuk untuk mengelompok mengelompokkan kan dokume dokumen n masing-ma masing-masing sing section section di di setiap setiap halaman web b. Untuk memudah memudahkan kan visualisa visualisasi si aluran aluran system naviga navigasi si dan alur links links antar antar halaman halaman dokumen c. Untuk memudahkan memudahkan explorasi explorasi file file ketika ketika editing editing halaman halaman web web d. untuk mengantisipasi isu-isu seputar akses informasi yang layak disikapi oleh para web designer terutama masalah bandwidth yang harus diperhitungkan. e. Untuk menjami menjamin n standardisa standardisasi si dari halaman halaman web web untuk untuk layak tampil

10.

Beriku Berikutt yang yang merupa merupakan kan bagi bagian an dari dari kaida kaidah h testin testing g adalah adalah,, kecual kecualii : a. b. c. d. e.

Kela Kelaya yaka kan n stand standard ardis isas asii Validasi Linting Test Testin ing g scri script pt Browse Browserr support support/av /avail ailabi abilit lity y

Tugas : 1. Berikan Berikan 2 contoh contoh apliksi apliksi proses proses optimasi optimasi pada kakas kakas desain desain Adhob Adhob Photoshop atau Mromedia Firework, bisa berupa desain antar muka web atau elemennya serta Jelaskan proses dan hasil optimasinya. 2. Analisa dan Gambarkanlah Struktur Situs teknisi.jardiknas.org

47


Pertemuan IV dan V

Dasar-Dasar HTML 

Pengantar

Sejarah HTML 

Tag HTML

Struktur dokumen HTML 

Fungsi dan Pengunaan tag-tag dalam HTML



Link Absolut dan Relatif



Mendesain web dengan teknik Frame



Mendesain web menggunakan teknik table



Memasukkan objek gambar dan teks



Membuat link pada halaman web

Target Mahasiswa dapat : 

Mengetahui HTML sebagai bahasa pengkodean

Mengetahui Sejarah HTML 

Memahami dan menerapkan Tag –tag HTML



Memahami struktur dokumen HTML



Memahami dan menggunakan Link Absolut dan Relatif



Mendesain web dengan teknik Frame



Mendesain web menggunakan teknik table



Memasukkan objek gambar dan teks



Membuat link pada halaman web

48


Pendahuluan HTML adalah singkatan dari Hypertext Markup Language Suatu file HTML merupakan file text yang diapit oleh tag-tag markup tag-tag markup Tag markup Tag markup memberitahu Web browser bagaimana halaman ditampilkan Suatu file HTML haruslah mempunyai ekstensi sebagai htm atau html

html lebih disukai htm digunakan karena masih ada server dengan sistim operasi lama yang hanya dapat menangani nama “8+3” (8 characters, dot, 3 characters) Suatu file HTML dapat dibuat menggunakan editor text sederhana seperti notepad

Sejarah HTML Tim Tim Berne Bernersrs-Le Lee e pada pada tahu tahun n 1989 1989 yang yang meng mengus usul ulka kan n suat suatu u sist sistim im dokumen dokumen hypertext untuk untuk digunakan digunakan oleh organisasi organisasi riset nuklir nuklir Eropa, CERN. HTML yang didasarkan Standard Generalized Markup Language (SGML) belakangan iperkenalkan pertama kali dalam sistim yang disebut "The "The Worl Worldd-Wi Wide de Web" Web" (WWW (WWW)) pada pada Okto Oktobe berr 1990 1990..

Kron Kronol olog ogii

perkemb perkembang angan an HTML HTML sejak sejak diperke diperkenal nalkan kan pertam pertamaka akalili hingga hingga saat ini diperlihatkan sbb: 

Oktober tahun 1990: pertama kali oleh Berners-Lee's



Musim panas tahun 1991: spesifikasi HTML di rilis pada Internet 49

Modul Perkuliahan Pemrograman Web 

Juni 1993: draft yang yang mendefenisikan HTML HTML di rilis



Juli 1994: draft untuk HTML 2.0 di rilis



Februari 1995: draft HTML 2.0 hasil perbaikan diusulkan sebagai suatu RFC (Request For Comments)



September 1995: HTML 2.0 diterima sebagai standar - (RFC 1866)



Maret 1995: draft HTML 3.0 di rilis (belakangan habis masa nerlakunya/expired)



Mei 1996: draft HTML 3.2 di rilis



Juli 1996: HTML experimental DTD 'Cougar' di rilis



Januari 1997: HTML 3.2 (Wilbur) direkomendasi oleh W3C (World Wide Web Consortium



Juli 1997: darft HTML 4.0 (dikembangkan dari Cougar) di rilis



Nopember 1997: HTML 4.0 menjadi usulan rekomendasi W3C



Desember 1997: HTML 4.0 direkomendasi oleh W3C



April 1998: HTML 4.0 direvisi dan direkomendasi oleh W3C



Desemb Desember er 1998: 1998: draft draft untuk untuk formul formulasi asi HTML HTML dalam dalam XML (eXtens (eXtensibl ible e Markup Markup Language) dengan codename ‘Voyager’ di rilis



Januari 1999: draft kerja awal XHTML 1.0 di rilis



Desember 1999: XHTML 1.0 menjadi usulan rekomendasi W3C



September 1999: draft kerja awal XHTML 1.1 di rilis



Januari 2000: XHTML XHTML 1.0 direkomendasi oleh W3C



April 2001: XHTML 1.1 menjadi usulan rekomendasi W3C



Mei 2001: XHTML 1.1 direkomendasi oleh W3C

Tag HTML Tag HTML digunakan untuk mark elemen HTML Tag HTML ditempatkan dalam kurung, < … > Kebanyakan tag HTML merupakan pasangan,

dan (tag awal

dan akhir) Text yang berada diantara kedua tag adalah unsur content (tag bertindak sebagai container) 50


Tag harus tersusu tersusun n secara secara baik baik (properl (properly y nested nested ) yaitu yaitu tidak tidak saling saling tumpang tindih Tag tidak case sensitive; mempunyai arti sama dengan XHTML adalah case sensitive dan harus lower case

Struktur dokumen HTML Dokumen HTML minimal memliki tag sbb:

My Hello, <head> Title World!

tag dan digunakan untuk menandai awal dan akhir dari suatu file HTML

tag dan , Tulisan yang berada diantara tag ini akan ditampilkan oleh browser pada bagian title yang mana mana merupakan title dari jendela browser.

51


tag , Berisi keterangan informasi halaman, seperti

title dan jenis dokumen dll tag , menandai awal dan akhir dari badan dokumen

HTML yang ditampilkan pada browser Fungsi dan Pengunaan tag-tag dalam HTML

Menformat Text HTML mengandung mengandung tag yang dapat digunakan memformat tampilan tulisan pada halaman anda. Tag yang digunakan a.l: tag dan untuk membuat text italic tag and untuk membuat text boldface tag
,
,
,
,
, atau
untuk header dalam dokumen dengan ukuran font besar untuk
dan terkecil untuk
(lebih lanjut lihat modul)

Contoh : Hasil Heading 1

Kode
Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4

Heading 5

Heading 5

Heading 6

Heading 6

Tabel tag untuk Formating dan Style Align Di Division

52


Align Heading

Author's Address

Block Quote

Citation

Code

Definition

Division

Emphasis

Heading

Keyboard Input

Large Font Size

Sample Output

Small Font Size

Strong Emphasis

Variable

Tabel tag Formatting Presentasi/tampilan Base Font Size

Blinking

Bold

Center

Change Fo Font Si Size

Font Color

Font Size

Italic

Preformatted

53


Strikeout

Subscript

Superscript

Typewriter

Underline

Width

Tabel tag Pengaturan Baris Halaman (Dividers) Alignment

Align Text

Line Break

Clear Te Textwrap

Horizontal Rule

No Break

Paragraph

Solid Line

Thickness

Width

Width Percent

Word Break

Tabel tag Pengaturan Warna dan Backgrounds Active Link

Back Ba ckgr grou ound nd Col Color or

">

Text Color

Tile Ti led d Ba Back ckgr grou ound nd

> 54


Link Color

Visited Link

Whitespace White Whitesp space ace adala adalah h karak karakte terr yang yang tidak tidak dipri diprint nt sepert seperti: i: spac space, e, tab, tab, newline, dan lainnya HTML memperlakukan whitespace sebagai pemisah kata, dan baris text secara otomatis mengikuti lebar dari halaman Untuk pidah baris halaman dapat digunakan tag
atau tag
dan
membuat kumpulan text dalam satu pragraf Tag
dan
dapat digunakan digunakan pada text text sehingga sehingga whitespace whitespace ditampil ditampilkan kan sesuai sesuai dengan dengan apa yang yang ditulis

(“pre” (“pre” singkatan singkatan dari dari

“preformatted”)

Karakter khusus Yang di Cadangkan Ada sejumlah karakter yang tidak dapat diketik langsung pada bagian body HTML, termasuk symbol untuk bahasa asing. Tabel Karakter khusus Entitas

Keterangan

Contoh

©

copyright symbol

©

®

registered trademark symbol

®

™

trademark symbol

™

nonbreaking space

55


<

Less-than symbol

<

>

greater-than symbol

>

&

ampersand

&

"

quotation mark

"

Contoh : Kode 2 < 3, adalah benar
3 > 4, adalah salah

Hasil 2 <

3,

adalah

benar

3 > 4, adalah salah

Lists Ada dua jenis list HTML yaitu ordered,
to
, dan unordered,
to
Ordered lists menggunakan nomor: 1, 2, 3, ... Unordered lists menggunakan bullets (•) Elements dari list adalah
dan

Contoh : Kode

Hasil

•

Sugar

Chips

Caffeine

Chocolate

• • •

Sugar Chips Caffeine Chocolate

Attributes Beberapa tag mempunyai atribut untuk tambahan informasi: 56


Bentuk: nama attribut ="nilai ="nilai atribut "

Contoh Contoh:: ordered ordered list dapat dapat digant digantii menjadi menjadi A, B, C, ... dengan dengan memberi atribut sbb: Kode

Hasil

Sugar

Chips

Caffeine

Chocolate

Sugar

Chips

Caffeine

Chocolate

1. 2. 3. 4.

Sugar Chips Caffeine Chocolate

A. B. C. D.

Sugar Chips Caffeine Choc Chocol olat ate e

Tabel tag Lists Bullet Type

E>

Defination List

Directory List

Menu List

Numbering Type

Ordered Lists

Starting Number

Unordered List

57


Links Untuk me link kehalaman lain: URL"> ke halaman

Contoh:

I'm

taking

href

=

"http://www.stmik.edu/news/index.html">Berita alumni. Link Link text text seca secara ra otoma otomatis tis akan akan berwa berwarna rna biru biru dan dan under underlin lined ed (purple jika telah dikunjungi) Untuk link ke bagian lain dari halaman yang sama:

Insert nama anchor: References Lakukan link: My references Untuk link dari halam lain ke nama anchor: My #refs">My references •

Untuk link e-mail Mail!

Images Image Images s (pict (picture ures) s) bukan bukanla lah h bagai bagain n dari dari halam halaman an HTML HTML;; HTML HTML hany hanya a memberitahu dimana image di temukan

Atribut src attribute yang diperlukan sedang lainnya optional The URL alamat dan nama image seperti:.gif, seperti:.gif, .jpg, atau .png Atri Atribu butt alt alt memb member erii text text seba sebaga gaii repr repres esen enta tasi si jika jika imag image e gaga gagall ditampilkan Atribut height and width jika disertakan memperbaiki tampilan image (jika ukuran salah maka tampilan gambar akan terganggu) Tidak ada tag akhir karena tag bukan container

Tabel tag Links dan Gambar Alignment

58


Alignment

Alternate

Border

Client Pull

<META

Define Target

Dimensions

Display Image

Embed Object

Imagemap

Imagemap

URL Link

Link to Target

Low-Res Proxy

Map

Object Size

Runaround Sp Space

Section

Target Window

CONT CO NTEN ENT= T="? "?;;

Tables Tables Tables diguna digunakan kan untuk untuk mengor mengorgan ganisir isir informa informasi si dalam dalam dua dimensi dimensi (baris dan kolom) 59


Suatu dapat terdiri satu atau lebih baris table, Setiap baris table terdiri dari satu atau lebih cell table data, > >
106

Modul Perkuliahan Pemrograman Web BLE>

c

< > > > 3
, atau cell table header,

Perbeda Perbedaan an antara antara dan hanya pada format text. Pada Pada cell otomatis dalam format “boldface “ boldface” ” dan “centered “centered ” Borders Borders (batas) (batas) pada pada cell dapat dapat diberi diberi dengan dengan menambah menambah attribu attribute: te: border="1" pada tag awal

Contoh table: Kode

Hasil

border="1"> /th>

/td>

/td>

/th> > >

Name< Name Dick Dick Jane< Jane Sally< Sally
Phone< Phone

555-12 555-1234 d>

555-234 555-2345

555-345 555-3456

Tabel tag untuk Tables Define Table

Table Border

Table Border

Cell Spacing

Cell Padding

60


Table Width

Table Width (%)

Table Caption

Table Alignment

Table Header

Alignment

> > 3

Table Row

No Line Breaks

Columns to Span

Rows to Span

Desired Width

Width Percent

Frames Frames Frames adalah adalah cara cara membagi membagi jendel jendela a browse browserr dalam dalam bebera beberapa pa bingkai bingkai.. Halaman HTML terpisah dapat ditempatkan pada tiap bingkai.

Framesets Frames ditempatkan dalam frameset Gantikan ... dengan ... Pada Tag awal gunakan atribut: rows= nilai dari tinggi baris _ cols= nilai dari lebar koloml_ Nilai dapat berupa % atau pixel)

61


Contoh:

Menambah frames pada frameset Letakk Letakkan an tag dalam dalam t> yang yang merupa merupakan kan

rows rows atau atau

columns

bukan container maka tidak ada tag akhir Setiap mempunyai atribut seperti ini: src=” URL “

Dan beberapa tag e optional:

scrolling="yes|no|auto scrolling="yes|no|auto" " (default is "auto") noresize Contoh lengkap Frame:

Kode

me"> ">

62


Tabel tag Frames Column Widths

Column Widths

Define Frame

Display Document

Frame Document

Frame Name

Margin Width

Margin Height

Not Resizeable

Scrollbar

Row Heights

Row Heights

Unframed Content

Forms
merupakans tag HTML yang digunakan untuk rancangan interface

63


pada halam web:

Untuk Untuk memin meminta ta inform informas asii dari dari user user yang yang kemudi kemudian an dikiri dikirim m ke server Suatu form terdiri dari:

: > ...form elements... Elemen Form termasuk:: buttons, checkboxes, text fields, radio buttons, drop-down menus, dll Form biasanya dilenkapi button untuk kirim informasi ke server “Submit button” Parameters form memberitahu bagaimana informasi dikirim:.

action="url action=" url "

(diperlukan)

menetapkan kemana informasi dikirim jika button “Submit” diklik

method= method="get" "get" (default) (default) Data Form dikirim sebagai suatu URL dengan menyertakan info data form form Dapat digunakan jika hanay menggunkan data l ASCII dan tidak lebih dari 100 karakter

method="post" Data Form dikirim dalam body URL request

tag

Keba Kebany nyak akan an elem elemen en form form meng menggu guna naka kan n tag tag

inpu inputt

deng dengan an,,

type=" type="... ..." " berupa berupa:: text, text, check checkbox box,, radio, radio, passw password ord,, hidden hidden,, submit, reset, button, file, atau image Parameter tag input a.l:

name: nama dari elemen value: “value”/nilai dari elemen readonly: nila yang tak bisa dirobah 64


disabled: user tak dapat melakukan apa pun pada elemen ini

Contoh-contoh Text input:

A text field:

Hasil:

A password field:

Hasil:

textarea

A multi-line text field Hello rows="2">Hello

65


Hasil:

Buttons •

A

submit reset plain

A •

A

button: button: button:

Hasil:

Keterangan: Submit : kirim data Reset : restore semua lemen form ke keadaan semula Button : ada aksi dari java script

Checkboxes Kode

Hasil

66


A

checkbox:

Radio buttons Radio buttons:
value="myValue1"> male
female Hasil:

Drop-down menu or list Kode

A

Hasil

menu or list:

Contoh lengkap: Kode Get <me <m eta Hasil Identity http-e tp-eq quiv=" iv="C Conten tent-Typ -Type" e" 67


content="text/html; charset=iso-8859-1">
Who are you?

Name:

Gender: Male Female

Tabel tag Forms Checked

Default Option

1< 1 2 >2 >
5 6

b

< >
1< 1 2 >2 >
3
5 6

1< 1 2 >2 >
5 6

d

< > > 1< 12 >2 > > 356

e

< > > 1< 12 >2 > > 356

7

A.

B.

Pada kode HTML, apa yang membedakan secara mendasar kedua hasil format table pada browser diatas (pilih dua) : a. Rowspa Rowspan n pada pada tabel tabel A untuk kolom kolom yang berisi berisi nilai nilai 1 dan pada tabel B sama dengan 3 b. Rowspa Rowspan n pada tabe tabell A untuk untuk kolom kolom yang yang berisi berisi nilai nilai tiga dan pada tabel B sama dengan 4 c. Colspa Colspan n pada tabel tabel A untuk kolom kolom yang beris berisii nilai nilai 2 dan colspan pada tabel B sama dengan 2 d. Colspa Colspan n pada tabel tabel A untuk kolom kolom yang beris berisii nilai nilai 2 dan colspan pada tabel B sama dengan 3 e. Colspa Colspan n pada tabel tabel A untuk kolom kolom yang beris berisii nilai nilai 2 dan colspan pada tabel B sama dengan 3

sama dengan dengan 4 1 sama sama denga dengan n sama sama dengan dengan 2 sama sama dengan dengan 3 sama sama dengan dengan 2

8 Perhat Perhatika ikan n tampi tampilan lan beriku berikutt pada pada brow browser ser::

107


a

b

c

d

e

Tampilan pada browser berikut memiliki kode HTML sebagai berikut:

108


a

b

c

109


d

e

Tugas :

Dengan menggunakan teknik tabel dalam kode HTML Buatlah desain halaman web dengan layout sebagai berikut

header (lebar=500, tinggi=80)

Menu : Profil Produk

Isi (content)

110


(lebar=100, tinggi=320)

Footer (lebar=500,tinggi=60)

Keterangan : Profile dan Produk merupakan hyperlink untuk navigasi, dengan target penyimpanan informasi pada isi(content).Informasi atau objek bebas.

111


Pertemuan VI

Pembuatan Form dan Koneksi Database • • • • • • • •

Text Field List/menu Radio Button Button TextArea Koneksi data base menggunakan PHPMYADMIN Pembuatan database menggunkana DBMS MYSQL Membuat file-file PHP

Tujuan Setelah mengikuti perkuliahan dipertemuan ini, mahasiswa dapat memahami dan membuat: • • • • • • • •

Text Field List/menu Radio Button Button TextArea Koneksi data base menggunakan PHPMYADMIN Pembuatan database menggunkana DBMS MYSQL Membuat file-file pengolah data dengan PHP

112


FORM

Sebuah halaman web biasanya biasanya menyertaka menyertakan n sebuah sebuah form untuk meminta pemakai memasukkan informasi untuk persyaratan tertentu. Fungsi form ini secara umum adalah sebagai jembatan untuk berinteraksi dengan pengunjung website. Contoh penggunaan form pada website antara lain: •

Buku tamu

•

Form pendaftaran

•

Jajak pendapat

•

Search engine

•

Password Login

•

Web Chat

Pada dasarnya fungsi sebuah form adalah sebagai input data. Data yang telah dimasukkan tersebut diproses server melalui script server server side seperti PHP atau ASP, kemudian disimpan pada database . kemudian ditampilkan kembali pada halaman website menggunakan script berbasis server, antara lain:

•

•

PHP (PHP Hypertext Preprocessor)

•

ASP (Active Server Pages)

•

CGI (Common Gateway Interface) JSP (Java Server Pages)

Pada sebuah form terdapat beberapa komponen di dalamnya yang disesuaikan dengan fungsi form tersebut, antara lain adalah:

113


Text Field: digunakan sebagai kotak input datayang tidak

terlalu banyak datanya, ditampilkan hanya dalam satu baris.

Password Field: digunakan sebagai kotak input data pass

word, word, bentuk bentuknya nya hampir hampir sama sama dengan dengan Text Text Field, Field, bedany bedanya a hanya hanya ketika ketika diketi diketik k sesuatu di atasnya yang muncul hanyalah bulatan hitam.

Text Area: digunakan sebagai input data yang banyak, ditampilkan lebih dari satu baris.

Radio Button: bentuknya berupa lingkaran, digunakan untuk memberikan beberapa

input data pilihan kepada user, namun hanya satu pilihan saja yang bisa dipilih oleh user. Lebih sering digunakan digunakan pada form jajak pendapat. Ketika lingkaran Radio Button diklik, maka akan muncul lingkaran kecil di dalamnnya.

List/Menu: berisikan daftar pilihan yang diberikan oleh user, namun user hanya dapat

memilih satu dari beberapa pilihan tersebut.

114


Jump Menu: bentuknya hampir sama dengan List/Menu, bedanya hanya daftar pilihan

di dalamnya memiliki link ke halaman lain.

Submit Button: merupakan tombol yang dapat digunakan untuk mulai memproses input

data yang dimasulclcan user

Reset Button: merupakan tombol yang dapat digunakan untuk mereset semua data

yang telah diketik ke dalam form sehingga form tersebut akan bersih kembali dari data yang telah diketik user sebelumnya

Check Button: bentuknya berupa kotak, biasanya digunakan untuk memberikan

beberapa input pilihan kepada user dan user dapat memberikan lebih dari satu pilihan• Ketik.kotak Check Button diklik akan muncul tanda ceklist di dalamnya

115


File Field: berbentuk kotak panjang disertai tombol browse di laiarurya. Ini digunakan

untuk mencari file yang terdapat dalam komputer karena berfungsi sebagai input file. Penggunaannya lebih sering untuk meng-upload sebuah file. Hidden Field: merupakan input data yang tersembunyi, biasanya nilainya sudah

ditentukan, misalnya sebagai input waktu, maka nilainya adalah waktu saat form tersebut disubmit untuk diproses. Ketika memasukkan Hidden Field pada dokumen website, yang tampil hanyalah sebuah simbol hidden fieldnya saja

Pembuatan form ini dilakukan pada halaman buku tamu.html. Setelah membuat halaman buku tamu.

116


Dala Dalam m kon kondi disi si file file seda sedang ng dib dibuk uka a

Hapu Hapus s sel selam amat at

Sehingga posisi kursor

datang .....

seperti ini

Pada menu insert klik form

Terlihat ada kotak merah bergaris putus-putus, lalu tuliskan Input Data Pengunjung

117


Tekan enter pada keyboard, sehingga letak kursor berada di bawah tulisan Input Data Pengunjung

Pada Pada code ode

, len lengk gkap apii sk skripn ripnya ya seba sebaga gaii ber berik ikut ut :

Input Data Pengunjung

Kembali ke windows, desain lalu dari menu insert pilih table, sehingga keluar dialog sebagai berikut :

Klik OK 118


Atur dan lengkapi tabel sebagai berikut :

Simpan kursor pada kolom ketiga di baris pertama sebagi sebagi berikut :

Lalu kembali pada menu insert > Form Object dan pilih Text Field

119


Lakukan pengaturan pada properties TextField sebagai berikut :

Hasilnya sebagi berikut :

Simpan kursor pada kolom ketiga dari baris kedua, untuk password pilih TextField

120


Lakukan pengaturan pada properties sebagai berikut :

Pada baris ketiga, untuk jenis kelamin, kita akan membuat objek form, radio button. Kembali ke menu insert, pilih form objects, pilih Radio group

Sehingga muncul dialog sebagi berikut :

121


Lakukan pengisian dan pengaturan sebagi berikut , lalu klik OK

Hasilnya sebagi berikut :

Untuk baris keempat, email, kembali menggunakan Textfield, hasil dan propertiesnya sebagai berikut :

Untuk baris kelima, tanggal lahir, kita akan menggunakan Objek Form List/Menu. Simpan kursor pada kolom ketiga baris kelima 122


Propertiesnya diatur sebagai berikut:

Seleksi atau klik Objek List/Menu, lalu klik List values... pada properties

Diperoleh dialog, dan isiskan sebagi berikut (untuk semua tanggal dari 1 s/d 31) :

123


Simpan kursor di sebelah kanan Objek List/Menu tanggal lahir, pilih Objek list/Menu kembali

Lakukan pengaturan sebagi berikut pada propertiesnya

Sambil memlih objek List/Menu, klik List values….

Lalu isikan pada dialog sebagi berikut (untuk semua nama bulan) :

Untuk tahun lahir menggunkan TextField

124


Pada properties, lakukan pengaturan sebagai berikut :

Coba Coba And Anda a sel selek eksi si List List/m /men enu u bula bulan n dan dan laku lakuka kan n klik klik pada pada win windo dow w Cod Code e

, mak maka a

akan diperoleh skrip sebagai berikut : Untuk tempat lahir kembali menggunakan Text Field

125


Dengan mengatur propertiesnya sebagai berikut :

Berikut Objek Form baris ketujuh, dengan properties dan skripnya :

Berikut Objek Form pada baris ke delapan dengan properties dan list values serta skripnya :

126


Pada baris kesembilan kita akan membuat Objek Form berupa Textarea, Textarea, untuk menuliskan komentar atau pesan. Pada pilihan Form Object > Textarea

127


Lalu lakukan pengaturan pada propertiesnya sebagai berikut :

Sehingga diperoleh hasil sebagai berikut :

Pada baris kesepuluh, letakkan kursor pada kolom ketiga, pilih Button.

128


Lakukan pengaturan pada properties sebagai berikut :

Hasilnya :

Hasil desain desain form keseluruhan :

129


Tampilan keseluruhan pada browser :

130


Skript keseluruhan :

ACTION="proses_input.php"> width="159">nama

131

Modul Perkuliahan Pemrograman Web name="email">

134


nama :

password :

jenis kelamin : laki-laki
perempuan

email :

tanggal lahir :

tempat lahir :

ikutan ikutan jadi member :

kewarganegaraan :

komentar anda untuk kami :

135


Pembuatan Check box

136


Tuliskan Indonesia setelah kotak check box

Lakukan hal yang sama untuk pilahan yang lainnya :

137


Bahasa yang anda kuasai :

Indonesia I nggris Jepang Korea

Pembuatan file pemroses dalam format PHP. Seperti pembuatan halaman bukutamu.html, dari halaman index.html hapus objek pada content dan save as dengan proses_input.php Kursor berada pada ruang/elemen content :

138


dan

kursor berada di

dalam content,

Klik window code 139


Tuliskan skrip berikut : pada bagian yang ada kursor tersebut

140

Modul Perkuliahan Pemrograman Web valign="top">email

141

Modul Perkuliahan Pemrograman Web kami propinsi

selamat valign="top">selamat siang $_POST["nama"]?>

password anda adalah :

jenis kelamin : $_POST["jenkel"]?>

email : $_POST["email"]?>

usia anda : 2004-$_POST["tahun"]?>

anda lahir di : $_POST["tempat"]?>

apakah anda member kami : $_POST["member"]?>

asal anda dari propinsi : $_POST["asal"]?>

pesan yang anda berikan :

Kembali ke desain, dengan mengklik

, hasilnya :

142


143


144


145


All programe >PHP Triad>Star Apache

All programe >PHP Triad>Mysql-D-NT 146


Biarkan jendela berikut tetap aktif, yang menandakan aplikasi server aktif :

Klik browser internet explorer dan tuliskan URL :http://localhost/web_desain/

Tuliskan URL : http://localhost/web_desain/bukutamu.html http://localhost/web_desain/bukutamu.html,, lalu isikan data berikut : 147


148


Pertemuan VII

CSS (Cascading Style Set)     

Pendahuluan Cara penulisan CSS Clsss dan Selector Pseudo Class dan dynamic Pseudo Class Contoh - contoh

Target Mahasiswa dapat :     

Mengetahui CSS sebagai bahasa pengkodean Dapat menggunakan CSS bersama – sama HTML Dapat meningkatkan kualitas Web dengan CSS Memahami CSS Clsss dan Selector Memahami Pseudo Class dan dynamic Pseudo Class

149


Pendahuluan

“Style Sheet adalah sebuah bahasa pengkodean yang digunakan bersama-lama HTML untuk mempermudah pembuatan sebuah dokumen HTML yang terstruktur, rapi, dan mudah dalam perawatan”.

Dengan menggunakan CSS kita bisa saja mengubah tampilan font, tombol, dsb yang ada dalam satu homepage hanya dengan melakukan perubahan pada sebuah file CSS saja. Marilah kita mulai dengan sebuah halaman HTML sederhana. Contoh : 150


Contoh CSS
Cascading Style Sheet
Mencoba menuliskan halaman HTML ditambah CSS.
< /HTML> Dengan script HTML diatas, kita akan mendapatkan sebuah bentuk format tulisan yang standar, standar, format yang diakui diakui oleh standar HTML. Sekarang kita ingin mengubah semua bagian teks yang merupakan Heading 1 (diantara tag Hl) dari yang semula berwarna standar menjadi berwarna biru. Sekarang, masukkan aturan CSS berikut H1{color:blue} Tentunya kita tidak bisa begitu saja menuliskan aturan CSS tersebut. Yang perlu kita lakukan adalah meletakkan aturan tersebut diantara tag : Contoh CSS

151


Pada Dreamweaver, cara menambah aturan CSS pada style yang sudah ada, adalah dengan cara : 1. Pilih Text > CSS Styles > Edit Style Sheet

2. Pilih tab new 3. piiih Type Redefine HTML Tag

4. Fiiih Define In This Document Only 5. Pada Tag , pilih hl 6. Pastikan category Type dan pilih Color:Biue Dengan ditambahkan aturan CSS tersebut, kita telah mengubah warna dari elemen H1 menjadi berwarna biru. Dalam Dalam aturan aturan CSS diatas diatas,, dikena dikenall adanya adanya selector (“H1”) (“H1”) dan deklarasiny deklarasinya a (“color: (“color: biue”). Deklarasinya mempunyai dua property yaitu (“color”) dan nilainya (“blue”)

Cara Penulisan Untuk mengintegrasi mengintegrasikan kan style yang telah kita definisikan definisikan dalam CSS ke dalam sebuah hala halama man n HTML HTML,, kita kita bisa bisa meng menggu guna naka kan n bebe beberpa rpa cara cara.. Kita Kita bisa bisa memi memililih h cara cara pemasukan pemasukan CSS sesuai dengan dengan kebutuhan kita. kita. Beberapa contoh contoh (dari contoh cara memasukkan style CSS ke da!am sebuah halaman H TML adalah : Link ke sebuah file CSS external (Linked Style Sheet)

Cara ini adalah cara yang paling mudah jika kita ingin semua halaman HTML kita mempunyai mempunyai rupa yang sama, misalnya untuk paragraph paragraph mempunyai font verdana verdana dan berwama hitam dengan latar putih. Yang perlu kita lakukan adalah membuat sebuah fiie *.css yang berisi style yang ingin kita buat. Sesudah fiie tersebut ada, lalu di dalam file HTML kita berikan link ke halaman css tersebut.

152


Ini yang kita tuliskan kedalam file css kita, misalnya simpan dengan nama style.css. p{font-family:Verdana, Arial,Helvetica;font-size: 12px ; color: #000000} Hl ( color: blue } Kemu Kemudi dian an jang jangan an lupa lupa,, di dala dalam m file file HTML HTML kita kita pang panggi gill file file css css ters terseb ebut ut deng dengan an memakai tag "link", untuk lebih lengkapnya silahkan lihat contoh berikut. berikut.

Contoh CSS dari file External

Mencoba menuliskan halaman HTML HTML dengan memanggil memanggil file style.CSS.

Semua tag Paragraph akan mempunyai bentuk yang sama

Kita tidak perlu memakai tag FONT lagi

Pada Dreamweaver, cara menambah aturan CSS pada style yang sudah ada, adalah dengan cara : 1.

Pilih Text > CSS Styles > Cdit Style Sheet

2.

Pilih tab New 3. Pilih Type Redefine HTML Tag 4. Pilih Define In New Style 5heet File 153


5. Pada Dialog box Save Style File as, ketik"mystyle.css", lalu Save 6.

Pada Tag , pilih p 7. Pastikan Pastikan categori categori// Type dan pilih pilih Font Font : Verdana, Verdana, Size : 12

Pada contoh diatas, semua style yang ada di file style.css akan dipakai oleh halaman HTML yang memanggil file tersebut. Dengan cara ini, maka semua paragraph yang ada di halaman HTML kita akan bisa diseragamkan.

D:\web_design_material\Web

Desain

(provider

STMIK

SUBANG)\desain_web(7_pert)\script_CSS

Semua Semua teks, teks, berwar berwarna na hitam, hitam, beruku berukuran ran 12 dan mempun mempunyai yai font*_ font*_ Verdan Verdana, a, arial, arial, Helvetica. Penulisan font-family: Verdana, Arial, Helvetica; maksudnya jika font verdana tidak

tersedia pada komputer pemakai, font yang dipakai selanjutnya ada!ah font Arial, jika tidak ada juga maka yang dipakai adaiah font Helvetica, jika tidak ada juga maka font yang digunakan adalah font standar HTML.

154


Dengan cara ini, kita bisa memakai style ini berulang-ulang untuk halaman-nalaman lainnya lainnya yang ingin kita kenakan kenakan style style seperi yang ada di file css.

Menuliskan Menuliskan

langsung ke sebuah halaman HTML (Embeded Sheet). Jika kita hanya ingin menggunakan sebuah style ke dalam sebuah halaman HTML dan tidak ingin berpengaruh ke halaman HTML lainnya, kita tuliskan langsung style yang kita pakai ke halaman yang bersangkutan. Contohnya adalah sama dengan pada contoh pertama. Berikut ini adalah file HTML yang kita pakai : Contoh CSS dari file External

Mencoba menuliskan halaman HTML dengan memanggil file style.CSS.


hasil yang didapat akan sama dengan cara meletakkan style pada halaman eksternal

Yang membedakan adalah style ini tidak akan bisa dipakai oleh halaman HTML lainnya.

Mengimport C55 dari sebuah file css ke halaman HTML (Imported Style Sheet )

Kombinasi dari kedua cara diatas adalah dengan mengimpor style yang berada di file css lain ke halaman HTML yang ingin kita beri style. Impor maksudnya disini adalah memasukkan style di File lain tersebut menjadi satu bagian dari Fi!e HTML

156


Contoh:CSS dari file Ekternal



Hasilnya akan sama dengan yang sebelumnya, yang membedakannya adalah cara pemanggilannya dimana disini seakan-akan seluruh style yang ada di file style.css diambil dan diletakkan di dalam file HTML kita.

157


Penulisan Inline (Inline Style Sheet)

Cara penulisan penulisan ini adalah cara yang dipakai jika kita membutuhka membutuhkan n style style yang spesifik terhadap tiap tag HTML. Atribut-atribut style langsung diterapkan pada tag yang ingin dikenai style. Sebagai contoh adalah style yang dipakai khusus pada sebuah tag font.

Contoh:CSS dengan cara inline

mencoba menuliskan halaman HTML dengan inline CSS
158


Pemakaian cara penulisan style seperti ini jauh lebih fleksibel jika dibandingkan cara yang lain karena kita menentukan secara spesifik tag apa saja yang ingin kita beri style. Namun pemakaian ini akan mengurangi banyak keunggulan yang dimiliki oleh CSS, misalnya dengan menggunkan cara file eksternal, kita hanya perlu mengubah satu file CSS untuk mengubah seluruh halaman HTML yang menggunakan sebuah style tertentu. Tapi dengan cara ini kita harus mengedit satu persatu tag HTML kita.

CSS Class dan Selector

Menggu Menggunak nakan an class class dan select selector or pada pada CSS akan akan lebih lebih memperm mempermuda udah h pengat pengaturan uran model dokumen dokumen kita. Sebagai Sebagai contoh contoh jika kita mempunyai mempunyai dua paragraph paragraph. Paragraph pertama berisi teori dan paragraph kedua berisi contoh. Kta bisa menggunakan dua class berbeda untuk masing-masing paragraph. Untuk lebih jelasnya, mari kita lihat 159


contoh berikut ini : Contoh CSS dengan cara inline

ri">CSS CSS akan akan lebih lebih memper mempermud mudah ah ker kerja ja kita,a kita,ada da banyak banyak keuntungan dengan memakai css

d >den enag agn n CSS, CSS,do doku kume men n perawatan web site aka lebih mudah

akan ak an

leb lebih

tera teratu tur. r. r>

Perhatikan bahwa kita menggunakan 2 class disini, contoh dan teori;. C1ass tersebut kita pakai untuk menspesifikan dari tiap paragraph. Hasil yang muncul adaiah, sebagai berikut

160


Kita bisa saja menggunakan class ini untuk tag HTML lainnya. Penulisan class pada pendeklarasian style adalah d imulai dengan "."(titik) yang artinya semua yan memakai class ini akan memakai style tersebut. Sebagai Sebagai contoh lagi, kita ingin sebuah class yang bernama sama yaitu "contoh" tapi mempunyai style yang berbeda dan hanya berlaku untuk Heading 1(
), hal ini berarti "H1.contoh" tersbut menjadi sebuah selector untuk Heading 1 dan class "contoh". Kita tambahkan pada file HTML tadi sbb :

Contoh CSS dengan cara inline

CSS akan lebih mempermudah kerja kita,ada banyak keuntungan dengan memakai css

denagn CSS,dokumen akan lebih teratur.
perawatan web site aka lebih mudah

ini contoh lagi

Clas Class s yang yang kita kita paka pakaii adal adalah ah khus khusus us untu untuk k Head Headin ing g 1, sehi sehing ngga ga tida tidak k akan akan mempengaruhi tag yang lainnya adalah sebagai berikut :

Pada prakteknya kita akan banyak menggunakan Class dan selector ini. Pseudo Class dan Dynamic Pseudo Class

162


Yang dimaksud dengan Pseudo Gass adalah class dalam CSS yang sebenarnya sudah ada dan tidak perlu kita definisikan lagi karena termasuk standar CSS (Pseudo= semu). Contoh Pseudo Class adalah class yang kita pakai dalam mengubah perilaku link. Kita bisa menentukan style dari link yang ada di halaman HTML kita dengan cara ini. Misalnya kita ingin menghilangkan garis bawah yang biasanya selalu ada pada teks yang merupakan link. Dengan Dengan menggu menggunak nakan an style style a:link semu semua a link link akan akan beru berupa pa sepe sepert rtii yang yang kita kita deklarasikan dalam class a:link. Sedangkan ketika kita mengarahkan mouse ke link yang kita beri class a:hover yang terjadi adalah link yang ditunjuk akan berubah sesuai dengan apa yang dideklasrasikan disitu.

link dan visited termasuk pseudo class sedangkan

:hove :hoverr bers bersam ama-s a-sam ama a denga dengan n :act :activ ive e dan dan :foc :focus us term termasu asuk k dynam dynamic ic pseudo class, artinya class ini akan berlaku ketika sesuatu terjadi. •

link artinya style berlaku pada link

•

visited artinya style berlaku ketika link tersebut

sudah pernah dikunjungi sebelumnya

163


:hover artinya style berlaku ketika mouse

diarahkan pada link tersebut •

:active artinya style berlaku ketika mouse di-klik

pada link tersebut •

:focus artinya style berlaku ketika mouse difokuskan pada bagian link tersebut

Berikut ini adalah beberapa contoh style yang banyak dipakai dalam mendesain sebuah halaman web. Untuk lebih lengkapnya, anda bisa melihat refcrensinya di situs World Wide Web Confederation (W3C) yang beralamat di http://www.w3c.org . background background-attachment background-color background-image background-position bacnground-repeatat borderbcrder-bcttom bcrder-colcr border-style bcrder-width font font-family font-size font-size-adjust font-style font-variant font-weight list-styie list-style-image

164

Modul Perkuliahan Pemrograman Web list-style-position list-style-type position size text-align text-decoration text-indent text-transform

KUIS

1 Potongan kode CSS berikut yang termasuk pada selektor adalah : .

165


a. b. c. d. e. 2 .

H1
H1 dan dan > y> dan dan

Contoh CSS
Struktur Penulisan CSS pada pada kode diatas adalah adalah sebagai berikut berikut : a. dike dikena nall ada adany nya a selector (“H1”) (“H1”) b. dekla deklaras rasinya inya (“co (“color lor : biue biue”). ”). c. Dekl Deklar aras asin inya ya memp mempun unya yaii dua dua prop proper erty ty yait yaitu u (“co (“colo lor” r”)) dan dan nilainya (“blue”) d. Hasilnya sebagai berikut :

e. Hasilnya

sebagai

berikut

:

3 .

aku anak pintar aku anak pintar juga

Pada kode diatas, dalam broser adalah sebagai berikut : a. aku anak anak pintar pintar berwarna berwarna biru, biru, sedangkan sedangkan aku aku anak pintar pintar juga juga berwarna merah b. aku anak anak pintar pintar berwarna berwarna biru, biru, dan dan aku anak anak pintar pintar juga juga berwarna biru juga c. aku anak anak pintar pintar berwarna berwarna merah, merah, sedangk sedangkan an aku anak pintar pintar juga berwarna biru d. aku anak anak pintar pintar berwarna berwarna merah, merah, dan aku aku anak pintar pintar juga juga berwarna merah e. aku anak anak pintar pintar berwarna berwarna biru, biru, sedangkan sedangkan aku aku anak pintar pintar juga juga berwarna merah dan biru 4 .

167


ayam, bebek, angsa, merpati kambing, sapi, kera Pada kode diatas sebagai berikut, kecuali (pilih dua) : a. kode kode CSS untu untuk k pengat pengatura uran n warna warna teks teks b. konsep konsep pewari pewarisan san dalam dalam CSS CSS c. teks untuk untuk semua semua kategori kategori unggas unggas akan berwar berwarna na merah merah dan mamalia biru d. teks untuk untuk semua semua kategori kategori unggas unggas akan berwar berwarna na biru dan mamalia merah e. semua teks akan berwarna berwarna biru atau merah 5 p{font-family:Verdana, Arial,Helvetica;font-size: Arial,Helvetica;font-size: 12px ; color: . #000000} pada kode diatas, maksudnya sebagai berikut, kecuali : a. Semua teks, berwarna berwarna hitam, hitam, berukuran berukuran 12 12 dan mempuny mempunyai ai font*_ Verdana, arial, Helvetica. b. jika font font verdana verdana tidak tersedi tersedia a pada kompute komputerr pemakai, pemakai, font yang dipakai seianjutnya adalah font Arial, c. jika tidak tidak ada font font Arial maka maka yang dipaka dipakaii adaiah adaiah font Helvetica Helvetica,, jika tidak ada juga maka font yang digunakan adalah font standar HTML. d. jika tidak tidak ada font font Helvetica Helvetica maka maka font yang diguna digunakan kan adalah adalah font standar HTML. e. Deklarasiny Deklarasinya a memilik memilikii 2 property property yaitu yaitu jenis dan ukuran ukuran huruf serta warna 6 Struktur CSS yang sering digunakan adalah : . a. meng enggunk unkan jenis dan ukura uran huru uruf b. meng enggunk unkan wa warna pada pr propertis CS CSS c. mena enanda ndai lin link k yan yang g per perna nah h di dikunj kunjun ung gi da dan be belum lum d. mengatur ma margin is isi ha halaman we web e. meng mengat atur ur warn warna a imag image e pada pada tamp tampil ilan an hala halama man n web web 7 Perhatikan kedua kode berikut : . 1 Contoh CSS dari file External

2

HEAD>

Contoh CSS dari file External

Perbedaan dan persamaan dari kedua kode diatas adalah, kecuali : a. jika jika pad pada a fil file e eks ekste terna rnall (sty (style le.c .css ss)) ber beris isii sele select ctor or dan dan dek dekla lara rasi si serta isinya sama, maka hasilnya sama b. yang yang memb membed edak akan an adal adalah ah styl style e pada pada ko kode de pert pertam ama a tida tidak k akan bisa dipakai oleh halaman HTML lainnya c. yang yang memb membed edak akan an adal adalah ah styl style e pad pada a kod kode e ked kedua ua tida tidak k aka akan n bisa dipakai oleh halaman HTML lainnya d. kedu ke dua a kod kode e mer merup upak akan an stru strukt ktur ur penu penuli lisa san n CSS CSS stan standa darr e. kedua ko kode ma mangatur te teks 8 Pernyataan berikut semuanya benar, kecuali : . a. link link arti artiny nya a st style yle ber berla laku ku pada ada lilink b. visited artinya style berlaku ketika link tersebut sudah pernah dikunjungi sebelumnya c. :hover artinya style berlaku ketika mouse diarahkan pada link tersebut d. :active artinya style berlaku ketika mouse di-klik pada link tersebut e. :focus artinya style berlaku ketika mouse diarahkan pada bagian link tersebut

169


Tugas :

Buatlah kode CSS untuk mengatur link, hyperlink yang ada pada bar menu di tugas pertemuan VII, masing-masing sebagai berikut : 1. 2. 3. 4.

:vis visited ted :hover :acti activ ve :focus

Keterangan : menu pada tugas pertemuan VII

170


171

nama	:
password	:
jenis kelamin	:	laki-laki perempuan
email	:
tanggal lahir	:
tempat lahir	:
ikutan	ikutan jadi member	:
kewarganegaraan	:
komentar anda untuk kami	:

selamat valign="top">selamat siang		$_POST["nama"]?>
password anda adalah	:
jenis kelamin	:	$_POST["jenkel"]?>
email	:	$_POST["email"]?>
usia anda	:	2004-$_POST["tahun"]?>
anda lahir di	:	$_POST["tempat"]?>
apakah anda member kami	:	$_POST["member"]?>
asal anda dari propinsi	:	$_POST["asal"]?>
pesan yang anda berikan	:

Modul Pemrograman Web

Recommend Documents

,

,

,

,

, atau

untuk header dalam dokumen dengan ukuran font besar untuk

dan terkecil untuk

(lebih lanjut lihat modul) Contoh : Hasil Heading 1 Kode

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Cascading Style Sheet

Cascading Style Sheet

Cascading Style Sheet

Cascading Style Sheet

Cascading Style Sheet

Cascading Style Sheet

ini contoh lagi

Cascading Style Sheet Mencoba menuliskan halaman HTML ditambah CSS. a. b. c. d. e. 2 . H1 H1 dan dan > y> dan dan Contoh CSS H1 {color:blue}

(lebih lanjut lihat modul)

Contoh : Hasil Heading 1

Kode

Cascading Style Sheet
Mencoba menuliskan halaman HTML ditambah CSS.
a. b. c. d. e. 2 .

H1
H1 dan dan > y> dan dan

Contoh CSS