P. 1
Modul Pemrograman Web

Modul Pemrograman Web

|Views: 1,850|Likes:
Published by thebygdanns

More info:

Published by: thebygdanns on Feb 10, 2010
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

08/21/2013

pdf

text

original

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 yang digunakan dalam merekayasa Web

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

1

Modul Perkuliahan Pemrograman Web

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 financial) 6. Content Sensitive , kualitas isi (content) dan sifat dasar estetika (design grafis) nya, merupakan 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.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 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. • Interaction--communication among a community of users occurs via chatroom,

bulletin boards, or instant messaging.
• User input-forms-based input is the primary mechanism for communicating need.

2

Modul Perkuliahan Pemrograman Web
• Transaction-oriented-the user makes a request (e.g., places an order) 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 merupakan tim yang mengerjakan pengembangan web. Terdiri dari web desainer, web 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 Web Programmer, orang yang ahli dalam bahasa pemrograman web seperti Web Administrator, orang yang bertugas untuk memelihara web khususnya

(content), grafis, komponen web. ASP, PHP, JavaScript dan Applet. pada server. Hal-hal yang harus dipahami secara mendalam oleh seorang web administrator adalah tentang system operasi yang digunakan pada server, proses penginstalan, memahami jaringan LAN, WAN, keamanan data server dan 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. harus

Tim web developer, bekerjasama dan melakukan pembagian tugas yang sesuai dengan bidang masing-masing untuk menjamin dihasilkan akan semakin baik. kinerja dan web yang

3

Modul Perkuliahan Pemrograman Web

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 ( book online)

4

Modul Perkuliahan Pemrograman Web

Sekilas sejarah Web menurut Wahana komputer sebagai berikut : • • • • Sebuah ide untuk membuat jaringan global muncul untuk pertama kalinya pada Tahun 1965 muncul sebuah ide untuk membuat teknologi Hypertext. Hypertext System RFC (Request for Cmments) dimulai pada tahun 1969. Pada bulan September 1970 terbentuk sebuah jaringan “global” untuk pertama

tahun 1963. adalah teks yang mempunyai hubungan dengan teks lain.

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 Tahun 1977 terdapat 111 komputer di internet

dan didefinisikan pada tahun 1974.

5

Modul Perkuliahan Pemrograman Web

• • • •

Protokol TCP/IP menjadi standar protokol untuk jaringan computer pada tahun Tahun 1981 terdapat 213 komputer di internet. Tahun 1983 terdapat 502 komputer di internet. Tahun 1985 internet sudah menghubungkan beberapa jaringan (BIT-NET,

1980

USENET, CSNET dan NSFNET) dan terdapat sekitar 1000 komputer yang terhubung di internet. • • • • • • • • • • • • • • • Tahun 1986 terdapat sekitar 5000 komputer di internet. Tahun 1987 terdapat sekitar 10000 komputer di internet. Tahun 1989 terdapat sekitar 100000 komputer di internet. Konsep WWW dan Browser dikembangkan dan dipakai di CERN (sebuah Tanggal 12 Desember 1991 sebuah web server yang pertamadi luar Eropa Tahun 1992 terdapat sekitar 1000000 komputer di internet. Bulan Januari 1993 terdapat 50 web server, 3 browser untuk computer Unix dan Bulan Februari 199 diperkenalkan sebuah browser mosaic. Tanggal 30 April 1993 teknologi WWWsecara resmi digunakan untuk semua 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

Institusi Fisika Nuklir) pada buln Oktober 1990 dibuat.

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

orang.

pemakai.

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

6

Modul Perkuliahan Pemrograman Web

1. Proses proses dalam rekayasa web menerapkan kaidah pengembangan ‘agile’, 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 ini, kita akan dihadapkan pada dua tugas, yaitu menganalisis bisnis dan formulasi. Menganalisis bisnis, berarti menentukan perhitungan-perhitungan bisnis untuk aplikasi web yang akan dibuat, mengidentifikasi stakeholder, potensi-potensi perubahan dalam lingkungan bisnis atau prediksi-prediksi perkembangan dalam lingkungan bisnis, dan integrasi antara aplikasi web dengan aplikai bisnis yang lainnya, basisdata, dan fungsi-fungsi yang terdefinisi. Dalam formulasi, kita harus mampu mendeskripsikan permasalahan yang dimiliki atau yang dimiliki stakeholder, dan aplikasi web yang dibuat harus menjadi solusi, dengan menggunakan informasi yang tersedia.

7

Modul Perkuliahan Pemrograman Web

Planning, pendefinisian tugas-tugas yang ada, menentukan jadwal waktu penyelesaian proyek rekayasa aplikasi web (biasanya dalam satuan minggu). Modeling, mengadopsi atau menggunakan proses analisis dan desain perangkat lunak konvensional dalam pengembangan aplikasi web. Construction, membuat aplikasi berbasis web yang sudah dimodelkan dalam proses modeling dengan menggunakan tool dan teknologi yang ada, yang sesuai 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 perkembangan permasalahan terbarunya. 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 approach. Stakeholders must be convinced to develop use-cases (discussed 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

Modul Perkuliahan Pemrograman Web

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 and sequence diagrams along with other selected 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 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 pembuatan web dengan pendekatan diagram berikut:
Defenisi Persoalan - Eksplorasi Konsep Analisa Kebutuhan - Spesifikasi Desain - Prototipe

proses Top-Down diperlihatkan oleh

Integrasi dan Pengujian Sistim Rilis, Operasi dan pemeliharaan

9

Modul Perkuliahan Pemrograman Web

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.

Setelah goal ditetapkan, kemudian ditentukan spesifikasinya. Spesifikasi ini merupakan syarat-syarat untuk situs dimana dalam hal ini perlu dipertimbangkan faktor audience (pemirsa).

• • •

Langkah selanjutnya memulai pembangunan situs termasuk prototipe secara teknik dan visual Selanjutnya tahap implementasi hasil dari disain dan melakukan pengujian (Integrasi dan Pengujian). Terakhir adalah Rilis (Release) atau Publikasi situs. Kadang-kadang masih diperlukan modifikasi berdasarkan umpan balik dari user.

Secara umum, persiapan membuat WebSite, sebagai berikut: 1. Merumuskan tujuan pembuatan WebSite. 2. Menentukan Isi. 3. Menentukan Target Marketnya. 4. Menentukan Strukturnya.

Merumuskan tujuan Pembuatan Web Site 10

Modul Perkuliahan Pemrograman Web

Berdasarkan Isi maupun Tujuan, WebSite biasanya dapat digolongkan, antara lain: 1. Profil Perusahaan (Company Profile), Profil Pribadi (Artis, Curiculum 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/Berita, Media Informasi dan Berita adalah yang terutama (Majalah/Koran online). Keakuratan dan kelengkapan informasi dari web semacam ini sangat penting. 3. Services, Media untuk pelayanan, seperti Free 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

Modul Perkuliahan Pemrograman Web

Pengelolaan Dokumen Hal ini memegang peranan penting dalam 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  Bahan Web 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. Design Decisions

[Web Site Purpose – Audience – Domain Name]
2. Design Phase I – Page Elements & Layout of 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

Modul Perkuliahan Pemrograman Web

3. Design Phase I I – Programming [Graphic Design – Multimedia Design – Programming – Up-Loading]

4. Web Site Asesoris [Search Engines – News Groups – Mail Forums – Intenet Malls/Internet Indices – Internet Classified Ads – Billboard Ads – Reciprocal Links – “What’s New” Lists – Printed Comunications]

5. Web Site Maintenance [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 rapih, jelas dan sedetail mungkin, mulai dari struktur situs – benar-benar terstruktur dan terorganisir, Interface – benar-benar mempunyai detail fungsi dalam mengakomodasi system navigasi dan links sebagai penunjuk arah untuk user serta tampilan halaman web yang bisa dibaca dengan mudah dan jelas oleh user sampai visualisasi 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 setiapsesi perancangan yang dilakukan, maka langkah awal sebelum mendesain web, yang perlu diketahui adalah mengetahui “ tujuannya”. Apa 13

Modul Perkuliahan Pemrograman Web

yang menjadi tujuan membuat web tersebut. 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 akan dilayout

Strategi Desain Selain itu, melalui kajian “Kaidah Desain Web”, tujuan mendesain web dapat dijadikan sebagai acuan. Biasanya, strategi desain didasarkan pada acuan deskripsi sebagai berikut : Who > Siapa yang ingin membuat ?

(Produsen, Distributor, Agen, Pendidikan, Instansi, ….) Siapa saja yang akan mengaksesnya ? (public, community, new ebble, advanced user, ….) What > Apa saja yang akan ditampilkan di web sitenya ?

(product, service, e-Commerce, took online, promo, profile, ….) Bagaimana bentuknya ? (static, animasi, codeless html, ……) Where > Dimana/pakai tools apa akan di buat ?

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

14

Modul Perkuliahan Pemrograman Web

(publish to internet, due date) Setiap kapan harus di update/ubah tampilan ? (maintenance) Why > Kenapa harus static 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 membuka website kita. Dengan demikian kita dapat menyusun tampilan berdasarkan factor-faktor internal “user” – user minded, misalnya disesuaikan dengan knowledge mereka dalam ber-internet (new webble atau advanced user), interest dan keinginan mereka dari semua fitur informasi yang akan ditampilkan.
Tampilan website dengan susunan yang jelas, tepat, mudah dan cepat dalam mengakses juga dapat dijadikan acuan oleh para web designer, misalnya dengan menampilkan teks-teks menu se-detail mungkin, adanya index page atau site map sebagai pembantu, merupakan tindakan komprehensif untuk membantu mereka ketika “search” atau “retrieval”. Yang akan menambah nilai keakuratan informasi yang kita berikan ke mereka dan dapat menjadi point-point yang diharapkan oleh para user pengguna internet ketika mem-browsing.

Mengenai masalah tampilan, dengan meng-customisasi, semua 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 look yang dihadirkan membuat visualisasi kepada mereka enak dipandang dan dramatis untuk dilihat. 15

Modul Perkuliahan Pemrograman Web

2. Metoda-metoda Metoda Rekayasa Web merupakan seperangkat teknik yang memungkinkan seorang designer web dapat mengembangkan aplikasi web yang berkualitas diantaranya sebagai berikut : a. Communication method, dengan cara memfasilitasi komunikasi antara

designer web dengan tim yang terlibat dalam pengembangan web dan dengan stakeholder (stakeholder, e.g., end-users, business clients, problem domain experts, content designers, team leaders, project managers). b. Requirement analysis method, menentukan kebutuhan isi (content) yang akan di tampilkan dalam Aplikasi Web , fungsi atau fasilitas, dan model interaksi antar pengguna termasuk navigasi yang 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 teknik pengujian tata letak isi dan arsitektural, design antar muka dan struktur navigasi.

3. Kakas (tools) dan Teknologi Merupaka seperangkat kakas dan teknologi yang senantiasa berkembang dari waktu ke waktu. Teknologi menekankan pada seperangkat bahasa pengkodean dan pemodelan (contohnya HTML,VRML,XML), bahasa pemrograman seperti java, browser, tool toolmultimedia, site autoring tools, tool - tool koneksi ke data base, security tools, servers and server utilities, site management and analysss tools.penjelasan lebih lanjut dapat dipelajari melalui web site : www.wdlv.com , www.webddeveloper.com, www.webknowhow.net, www.webreference.com

16

Modul Perkuliahan Pemrograman Web

Tugas

Carilah penjelasan untuk profesi-profesi berikut, secara lebih rinci, pengembangan web : web architec, web specialist, web page developer dan web site developer

dalam tim

17

Modul Perkuliahan Pemrograman Web

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 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 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

Modul Perkuliahan Pemrograman Web

Filosofi Desain web

… Usability determination – Description Web Design principles, ……

Bahasan atau pengkajian Kaidah Desain Web, merupakan penjabaran atau penjelasan dari Web Design Principles pada setiap aspek atau semua aplikasi mendesain web.

… Usability First – Practice Simplicity, ……

19

Modul Perkuliahan Pemrograman Web

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 sebagai salah satu aspek bahan kajian Kaidah Desain Web yang cukup fundamental dalam mendesain web, merupakan salah satu metodologi yang cukup prinsipil dan meng-global dalam merancang 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 dalam mempelajari atau memahami prosesi mendesain web dengan mengadaptasikan dan menerapkan nilai-nilai kelayakan yang harus diterapkan pada setiap hasil rancangannya.
… Web Design Principles – Basic Rules Designing Content, ……

20

Modul Perkuliahan Pemrograman Web

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 “mendesain web yang baik dan benar”. Berdasarkan misinya yang berangkat dari alur komunikasi visual, diharapkan mampu membuat tampilan di web yang nyata-nyata harus menarik dalam menyampaikan pesan atau informasi yang dikonsepkan. “Kaidah Desain Web” akan memberikan 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 Kaidah dalam proses mendesain, ditujukan untuk mendukung 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  Pengunjung akan merasa puas dalam mengakses situs tersebut dan kemungkinan besar akan kembali untuk mengaksesnya

21

Modul Perkuliahan Pemrograman Web

Sepuluh (10) kaidah desain Web menurut Peter Kentie, sebagai berikut : 1. First Create a Structure (menentukan struktur informasi, struktur 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 patience last as long as possible ‘ so you must give your public their money’s worth”) 3. Test the Site Before and During Design (mengukur kehandalan situs yang berorientasi pada pengunjung merupakan keharusan, berbagai cara bisa dilakukan misalnya kuisioner, opini pengunjung potensial terhadap situs anda bagaimana?) 4. The First Impression is Key, sesuatu yang membuat pengunjung memastikan terus akses atau meninggalkannya (informasi secara visual) 5. Use Common Sense Technology (web kita akan menarik jika senantiasa sesuai dengan 6. Offer perkembangan teknologi, seperti standar teknologi web terbaru, bisa Alternatives (menawarkan alternative, misalnya dalam aplikasi ditampilkan oleh multi browser dll ) Macromedia flash selalu menghendaki update dalam versi terbarunya, sehingga aplikasi web harus menjamin update secara otomatis. Hindari file terlalu berat, yang akan membebani akses). 7. Design with Intelligence and Restraint (perbedaan standar kecepatan akses yang dimiliki pengguna seharusnya tidak menjadi hambatan, sehingga 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 and Consistent Navigation ( dengan menggunakan navigasi yang disediakan pengunjung sangat mudah mengakses isi atau content informasinya secara berkala atau lebih baik lagi jika memiliki fasilitas search engine). 9. Web Design is Dynamic and Proactive (lakukan evaluasi terhadap desain dan isi nya, senantiasa berorientasi pada selera pengunjung) 10.And Above All ….(poin-poin penting dari sembilan kaidah sebelumnya) gambar yang apa yang menjadi penekanan disuguhkan oleh situs kita, tampilan komunikasinnya tidak hanya teks tapi juga

22

Modul Perkuliahan Pemrograman Web

   in.        

Avoid busy, cluttered backgrounds that make the text in the foreground Adjust the background colr to suit the background pattern. This prevents Avoid web page that merely offer screen-filling plug—ins without

hard to read. a shock effect when opening the page. providing analternative HTML version for the user who does not have that plugAlways make background music an option ; unwanted sounds are Ensure readable text sizes, and do not use too many different fonts and Avoid unnecessary GIF images when the same information can be Be conservative with all-uppercase text-it’s difficult to read and is Do not turn your site into “brochureware” ; try to avoid reusing exiting Be wary of actions your visitors won’t expect. They won’t appreciate an GIF animations are cool and frequently the only dynamic element on the Regularly check your site. Pages that can no lnger be found and java or

annoying. font sizes on the same page. offered in text only HTML. associated with shouting. information. The web is an interactive medium and requires a different approach. applet that loads suddenly or an unannounced pop-up window. page. However, too many of them are not at all cool and speed suffers as well. 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 desainnya pada kepentingan pengguna. Hal ini juga berarti, web desainer harusmenganggap pengguna adalah seorang yang awam terhadap segala aspek yang ada pada situs web. Apa yang diinginkan oleh desainer belum tentu menjadi apa yang diinginkan pengguna. Web desainer juga harus mempertimbangkan karakter pengguna yang berbeda satu sama lain. Pengguna

23

Modul Perkuliahan Pemrograman Web

yang mengunjungi situs web berasal darilatar belakang, kebudayaan, pendidikan dan kepentingan yang berbeda-beda maka desain web yang setidaknya harus mewakili selera sebagian besar pengguna. 2. Utility dan Usability dibuat

Utility adalah kegunaan atau fungsionalitas suatu web, sedangkan usability adalah sifat situs web yang mendukung kemampuan pengguna dalam memanipulasi situs web sehingga pengguna memperoleh apa yang diperlukannya. Beberapa ciri dari usability antara lain: dapat dipelajari dengan mudah, penggunaannya efisien, kesalahannya minimal, mudah diingat oleh pengguna, dan membuat pengguna menjadi puas. Situs web yang dibuat harus menggabungkan kedua aspek ini untuk 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 yang interaktif (JavaScript, CGI, dan lain-lain) dapat berfimgsi dengan benar. Tidak ada kesalahan dalam sistem navigasi (link yang kosong atau broken link).

4.

Batasan media Internet dan web Browser

Membuat situs web yang bisa dipakai setiap browser. Untuk itu web desainer harus menggunakan fitur-fitur pendukung yang bisa dijalankan di semua atau sebagian besar browser. Sebaiknya web desainer tidak menggunakan fitur-fitur yang hanya mendukung satu browser saja (misalnya, Active X untuk browser IE).

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

24

Modul Perkuliahan Pemrograman Web

dapat dilihat dengan optimal melalui sebuah browser yang tidak mengijinkan pemakaian JavaScript. Untuk itu dapat diusahakan dengan tidak memakai fitur-fitur yang mungkin "bermasalah" kalau pemakaiannya tidak memberikan keuntungan pada halaman web tersebut, atau paling tidak diberikan pesan werning kepada pengguna untuk kebutuhan setting pada fitur-fitur yang ada Misalnya "Java Script Needed' (Untuk kebutuhan JavaScript pada situs web) atau "Better viewed on 1024 X 768 resolution' (anjuran kepada pengguna untuk membuka situs web dengan resolusi layar tersebut).

Sedapat mungkin buatlah situs web dengan teknologi yang paling 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:

Membuat halaman yang dapat di-load browser dengan cepat. Hindari pemakaian atau buanglah tag-tag HTML yang tidak diperlukan atau yang kosong. Untuk tag-tag HTML dengan for-mat tertentu yang harus diulangulang di setiap penulisan halaman, sebaiknya tag itu digantikan 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

Modul Perkuliahan Pemrograman Web

halaman

di-load

secara

lengkap

dari

web

server

(browser

dapat

menggunakan incremental rendering). Menggunakan format citra yang efisien. Untuk itu, dalarn pembuatan situs web, format citra yang digunakan sebaiknya format yang menggunakan kompresi yang cukup bagus, seperti format GIF, PNG atau JPEG.
5.

Situs web harus memperhatikan aspek GUI (Graphical User Interface) Dalam proses perancangan situs web, web desainer harus menggunakan prinsip-prinsip yang telah dikenal oleh sebagian besar pengguna. Contohnya sebagai berikut: Sebuah image yang menghubungkan ke halaman depan sebaiknya adalah image yang menyerupai bentuk rumah, karena bentuk rumah itu telah dikenal oleh pengguna sebagai rumah tempat dimana ia pulang atau kembali. Bila image tersebut menyerupai bentuk mobil, tentu pengguna akan menjadi bingung apa maksud dari image tersebut, bisa saja pengguna menganggap bahwa 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 halaman dengan mudah. Pengguna harusmendapatkan informasi tentang halaman yang sedang dikunjungi dan sudah dikunjungi. Perlu juga diperhatikan kecepatan pengguna dalam mendapatkan informasi yang diinginkan misalnya dengan cara mengatur link sedemikian rupa sehingga pengguna mendapatkan

26

Modul Perkuliahan Pemrograman Web

informasi kurang dari 5 kali melakukan klik. Hal ini sangat penting artinya untuk kepuasan dan kenyamanan pengguna terhadap situs web.

Penggunaan struktur yang tepat dalam navigasi. Dalam proses perancangan situs web, web desainer harus menggunakan struktur link yang tepat sesuai dengan jenis informasi yang ingin ditampilkan. Hal ini penting karena jenis informasi sangat menentukan cara atau bagaimana pengguna mendapatkan infoi -masi tersebut. Sebagai contoh, sebuah informasi tutorial yang harus disampaikan tahap demi tahap lebih cocok menggunakan struktur linear karena pengguna harus memahami informasi tersebut dari halaman satu ke halaman lainnya tanpa ada pilihan link menuju ke lebih darisatu halaman.

Beberapa tips yang dapat digunakan untuk membuat struktur link dan navigasi yang baik adalah:
• Usahakan agar navigasi yang digunakan dalam perancangan situs web tetap konsisten. • Sebelum membangun situs web sebaiknya membuat flowchart dari struktur link dan navigasi. • Mempertimbangkan prioritas dan jenis isi situs web dengan menempatkan isi yang lebih penting pada halaman-halaman pertama dalam struktur link dan navigasi.

7.

Alat Bantu
• Site Map Web desainer dapat menggunakan site map untuk mempermudah pengguna dalam memahami tentang isi dan halaman pada situs web dan dapat mempermudah pengembangan dan pemeliharaan situs 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

Modul Perkuliahan Pemrograman Web

Apabila jumlah halaman web mencapai lebih dari 100 halaman, sebaiknya dibuat sebuah search engine. • Site Index Selain search engine, site index juga memiliki fungsi yang sama, yaitu untuk membantu pengguna dalam mencari informasi yang diinginkan. • Help Sistem Tugas web desainer untuk membuat suatu layanan Help sistem yang dapat menjelaskan tentang hal-hal yang bersifat tutorial bagi pengguna, misalrrya membuat sebuah halaman khusus yang berisi informasi tentang penggunaan fasilitas e-mail, forum, cara mengakses, cara mendapatkan password dan lain sebagainya.

8. Tampilan Visual
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 singkat desain yang dibuat memiliki keunikan tersendiri. Selain keunikan tentunya juga harus dapat menarik bagi sebagian besar pengguna. Hal ini juga penting artinya bagi tercapainya tujuan pembuatan situs web yaitu dapat menarik pengunjung sebanyak-banyaknya ke situs web tersebut. Beberapa hal yang perlu diperhatikan dalam pembuatan tampilan visual yang menarik adalah sebagai berikut: • Sebelum memulai proses perancangan tampilan visual, sebaiknya web desainer memahami tujuan pembuatan situs web tersebut dan mengolah imajinasinya • agar tampilan visual ini dapat mendukung dan mengkomunikasikan tema dari situs web. Web desainer harus selektif dalam memilih imagei-mage yang ingin ditampilkan sehingga memiliki keunikan tersendiri dan klien tidak, berpikir bahwa situs webnya mirip atau mengambil desain situs web lain.

Web

desainer

harus

tetap

menjaga

aspek

kesederhanaan

penggunaan untuk menjaga kepuasan pengguna yang mengunjungi situs web tersebut 28

Modul Perkuliahan Pemrograman Web

9.

Kombinasi tampilan, isi, teknologi, kegunaan dan tujuan Prinsip ini pada dasarnya adalah gabungan dari semua prinsip di atas karena sebuah situs web yang baik harus dapat menggabungkan semua pinsip tersebut menjadi satu kesatuan yang mendukung tujuan pembuatan situs web tersebut.

Aksesibilitas

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

User Oriented
Materi 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 kilobyte semakin baik untuk diakses). Menurut data statistic, bahwa 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 toleransi tinggi sesuai fitur koneksi mereka, sebagai contoh : tidak mungkin kita menambahkan fitur multimedia (e.g. movie, footage video atau file-file yang berat) untuk

29

Modul Perkuliahan Pemrograman Web

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
Sebelum mendesain halaman web, ada acuan yang perlu diperhatikan berkenaan dengan user oriented, berupa kaidah estetis yang perlu diperhatikan mengenai 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, mempunyai perangkat akses yang berbeda-beda, contohnya : Platform 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 platform mereka karena perbedaan tersebut. Berikut adalah contoh pertimbangan sesuai konteks ini, diantaranya : • Tampilan monitor, antara [640x480] [800x600] dan [1024x68] mana yang pantas/sesuai rancangan kita, agar bisa tampil maksimal pada semua 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

Modul Perkuliahan Pemrograman Web

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 semua elemen desain web, mulai dari graphic berupa ilustrasi, image digital, bitmap- vector sampai dengan format sound dan animasi multimedia, dengan meminimalkan jumlah bytes setiap file graphic sekecil mungkin, tapi tetap menjaga tampilan visual optilnya, merupakan langkah efficient design, dalam melayout sebuah rancangan website, guna me-relevansi-kan kemudahan akses para user sebagai 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

Modul Perkuliahan Pemrograman Web

1. 2. 3.

Perhatikan ukuran format file untuk dapat sekecil mungkin dengan Pertimbangkan koneksi user yang berbeda-beda. Gunakanlah selalu plugs-in untuk membantu web browser dalam

menjaga nilai visualisasi optimal gambar aslinya.

menampilkannya.

Contoh aplikasi teknik optimasi dalam desain 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

Modul Perkuliahan Pemrograman Web

Sebelum optimasi (design original)

Setelah optimasi

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

33

Modul Perkuliahan Pemrograman Web

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, Struktur Situs seperti terminal-panel atau file explorer di 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

Modul Perkuliahan Pemrograman Web

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 tidaknya sebuah dokumen untuk tampil di web. Penyusunan alur tatanan dokumen dengan desain seimbang antara yang satu dengan yang lainnya, juga aluran sistematis konsep navigasi, mencerminkan pula aluran dokumen yang mudah dan cepat untuk diakses, sehingga memudahkan pula untuk dirancang sesuai designing target. Berikut ini adalah contoh penyusunan dokumen pada struktur hierarchy yang seimbang, sebagai berikut :

35

Modul Perkuliahan Pemrograman Web

Contoh :

Dasar Struktur Situs dalam bentuk folder berorientasi seperti ini :

Contoh :

36

Modul Perkuliahan Pemrograman Web

Perlu diketahui pula bahwa proses uploading file untuk ditampilkan diinternet, 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 standarisai dari halaman web untuk layak tampil, harus diuji kelayakannya melalui studi kelayakan standarisasi.

37

Modul Perkuliahan Pemrograman Web

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 telah didesain jika ada kesalahan-kesalahan teknis dan perlu memperbaikinya. Technical error disini diorientasikan pada kesalahan-kesalahan teknis HTML dalam hal kompetibelitas pada browser. Ini adalah tugas dari validator sebagai toolsnya, diantaranya adalah : 1. W3C HTML – Validation Service 2. CSS Check, a Cascading Style Sheets Lint 3. Net Mechanic 4. Spare the Rod and Spoil the Web

Linting
Merupakan metode lain dalam pemeriksaan kesalahan di halaman web. Jika validator berguna untuk memeriksa kesalahan teknis pada fitur HTML, Linter berguna untuk memeriksa kesalahan HTML secara keseluruhan, seperti missing ALT text, no HEIGHT and WIDTH tags pada images, PERL dan sebagainya. Toolsnya dinamakan Linter, diantaranya : 1. WWW.eblint 2. HTML Tidy

38

Modul Perkuliahan Pemrograman Web

Browser Testing
Menguji kompatibelitas halaman web merupakan langkah yang tepat bagi seorang desainer web, dalam melihat tampilan desainnya pada multiple platforms, browser versions, colr depths dan resolusinya. Gunakan Browser Testing ini untuk melihat kelayakan tampilan desain kita di browser, diantaranya dengan menggunakan : 1. Public Lynx Access 2. BrowserWatch – Browser Blvd (berisi listing available browsers) 3. Web page Backward Compability Viewer

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 yang akan digunakan harus diuji dulu, jalan tidaknya. Langkah berikut merupakan contoh untuk menguji fitur script : • Menggunakan Template Halaman Lakukan pengujian script pada web template, untuk melihat 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 melihat kesalahan penggunaan script yang mengakibatkan error pages yang sering terjadi, kemudian kita dapat menentukan editing untuk memperbaikinya pada source tersebut atau pada tools lain. • Perhatikan Invalid Code Erroe pages, biasanya terjadi karena adanya invalid code yang digunakan, jika seorang web designer menguasai pemrograman

39

Modul Perkuliahan Pemrograman Web

script, perbaiki invalid code menjadi valid code, jika tidak menguasai pemrograman script, beritahukan kepada web programmer 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

Modul Perkuliahan Pemrograman Web

• • • • •

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” web mempunyai special needs yang harus dipertimbangkan oleh para web designer. Mendesain situs yang mempunyai aksesibelitas yang tinggi oleh semua browser merupakan pemikiran iovatif untuk membuat situs bisa diakses oleh semua orang dengan segala perbedaan fiturnya, tetapi tidak ada salahnya jika 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 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
Mengingat internet itu mendunia, tidak ada salahnya jika para web designer memperhatikan permasalahan waktu, tanggal, lokasi dan mata uang yang akan berbeda ketika para user mengaksesnya karena perbedaan Negara atau daerah misalnya. Perlunya informasi tersebut untuk ditampilkan serelevan mungkin di situs, untuk

41

Modul Perkuliahan Pemrograman Web

membantu kemudahan akses informasi para user. Ini pun disesuaikan dengan 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 desain dengan bahasa internasional. Jika mungkin menggunakan 2 bahasa, internasional atau local, menggunakan bahasa inggris dan Indonesia atau salah satunya sesuai kepentingan, agar berbagai user dengan berbagai kalangan dan perbedaan 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/korelasi pemahaman antara Desain Grafis, Desain Multimedia dan Desain Web. Desain Komunikasi Visual yang menjembatani perancangan tampilan materi promosi dan publikasi, diaplikasikan kepada 2 media, 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

Modul Perkuliahan Pemrograman Web

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 sinilah Desain Web mulai dikenal sebagai media visualisasi yang menjembatani 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 sebelumnya yang kita kenal, yaitu Desain Grafis dan Desain 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, sangat layak jika kita mempunyai latar belakang pemahaman tentang Desain Grafis dan Desain Multimedia agar dapat dijadikan nilai tambah terhadap skill merancang atau melayout systematic visual content untuk web bagi profesi seorang Desainer Web, dengan pemahaman tambahan mengenai masalah kaidah yang dikloning dengan mengurangi atau menambahkan fitur batasan dan acuannya. Begitupun ketika sesi men-desain struktur situs dan interface. Dimana adanya acuan-acuan yang diprinsipkan seperti kepada Graphic Design Principles dan Multimedia Design Principles.

43

Modul Perkuliahan Pemrograman Web

44

Modul Perkuliahan Pemrograman Web

Kuis

1.

Yang dimaksudkan dengan filosofi Usability Concept Maker dalam prosesi mendesain web adalah : a. pertama kali yang harus dipahami adalah memahami Kaidah-nya lalu kemudian menerapkan konsep desain yang dibuat dengan se-Simple mungkin b. Kaidah merupakan sebuah acuan dalam membuat konsep, agar web yang dibuat mudah dipelajari dan mudah digunakan c. Para web desainer dalam mempelajari atau memahami prosesi mendesain web dengan mengadaftasikan dan menerapkan nilai – nilai kelayakan yang harus diterapkan pada setiap hasil rancangannnya. d. Kaidah dalam proses mendesain, ditujukan untuk mendukung 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 memahami kaidah desain web, seorang desianer web diharapkan memiliki 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 gambar- gambar animasi yang menarik perhatian

3.

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

45

Modul Perkuliahan Pemrograman Web

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

Use Common Sense Technology Offer Alternatives Design with Intelligence and Restraint Clear and Consistent Navigation Web Design is Dynamic and Proactive

Untuk menghasilkan sebuah situs web yang menarik namun tetap cepat di-load maka sangat diperlukan untuk memperhatikan atau melakukan hal-hal berikut, kecuali : a. Ukuran file dari web b. Format file gambar c. Untuk beberapa tag HTML (khususnya image dan tabel) browser dapat menggunakan incremental rendering d. menggunakan CSS untuk tag HTML yang berulang - ulang e. menggunakan bandwidth yang besar

5.

Sebuah situs web yang sering memakai Java Script tidak dapat dilihat dengan 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 8 - 15 menit waktu loading untuk tiap halaman web b. Better viewed on 1024 X 768 resolution c. mengatur link sedemikian rupa sehingga pengguna mendapatkan informasi kurang 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.

Berikut yang termasuk pada kaidah dalam aksesibilitas, kecuali : a. b. c. d. e. User oriented optimasi manajemen situs testing dimensi halaman

7.

Fitur berikut paling banyak digunakan dalam akses informasi a. b. c. d. e. TV kabel Satelit Dedicated line Dial up Radio

8.

Dalam aksesibilitas, kesesuaian dengan flatform berikut (tampilan monitor 640 x 480,

46

Modul Perkuliahan Pemrograman Web

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 oriented optimasi manajemen situs testing dimensi halaman

Tujuan kaidah optimasi dalam aksesibilitas sebagai berikut a. Digunakan untuk mengelompokkan dokumen masing-masing section di setiap halaman web b. Untuk memudahkan visualisasi aluran system navigasi dan alur links antar halaman dokumen c. Untuk memudahkan explorasi file ketika editing halaman web d. untuk mengantisipasi isu-isu seputar akses informasi yang layak disikapi oleh para web designer terutama masalah bandwidth yang harus diperhitungkan. e. Untuk menjamin standardisasi dari halaman web untuk layak tampil

10.

Berikut yang merupakan bagian dari kaidah testing adalah, kecuali : a. b. c. d. e. Kelayakan standardisasi Validasi Linting Testing script Browser support/availability

Tugas : 1. Berikan 2 contoh apliksi proses optimasi pada kakas desain 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

Modul Perkuliahan Pemrograman Web

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

Modul Perkuliahan Pemrograman Web

Pendahuluan HTML adalah singkatan dari Hypertext Markup Language Suatu file HTML merupakan file text yang diapit oleh tag-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 Berners-Lee pada tahun 1989 yang mengusulkan suatu sistim dokumen hypertext untuk digunakan oleh organisasi riset nuklir Eropa, CERN. HTML yang didasarkan Standard Generalized Markup Language (SGML) belakangan iperkenalkan pertama kali dalam sistim yang disebut "The World-Wide Web" (WWW) pada Oktober 1990. diperlihatkan sbb:
 

Kronologi

perkembangan HTML sejak diperkenalkan pertamakali hingga saat ini
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 mendefenisikan 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 Consortium

   

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

 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

 Desember 1998: draft untuk formulasi HTML dalam XML (eXtensible 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 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, <b> dan </b> (tag awal dan akhir) Text yang berada diantara kedua tag adalah unsur content (tag bertindak sebagai container) 50

Modul Perkuliahan Pemrograman Web

Tag harus tersusun secara baik (properly nested ) yaitu tidak saling tumpang tindih Tag tidak case sensitive; <b> mempunyai arti sama dengan <B> XHTML adalah case sensitive dan harus lower case

Struktur dokumen HTML Dokumen HTML minimal memliki tag sbb: <html> <title>My Hello, </html> tag <HTML> dan </HTML> digunakan untuk menandai awal dan akhir dari suatu file
HTML

<head> Title</title> </head> <body> World! </body>

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

51

Modul Perkuliahan Pemrograman Web

tag <HEAD> </HEAD> , Berisi keterangan informasi halaman, seperti

title dan jenis dokumen dll
tag <BODY> </BODY> , menandai awal dan akhir dari badan dokumen

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

Menformat Text
HTML mengandung tag yang dapat digunakan memformat tampilan tulisan pada halaman anda. Tag yang digunakan a.l: tag <i> dan </i> untuk membuat text italic tag <b> and </b> untuk membuat text boldface tag <h1>, <h2>, <h3>, <h4>, <h5>, atau <h6> untuk header dalam dokumen dengan ukuran font besar untuk <h1>dan terkecil untuk <h6> (lebih lanjut lihat modul) Contoh : Kode
<H1>Heading 1</H1> <H2>Heading 2</H2> <H3>Heading 3</H3> <H4>Heading 4</H4> <H5>Heading 5</H5> <H6>Heading 6</H6>

Hasil Heading 1 Heading 2

Heading 3
Heading 4 Heading 5 Heading 6

Tabel tag untuk Formating dan Style
Align Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

52

Modul Perkuliahan Pemrograman Web

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

<H? ALIGN=LEFT|CENTER|RIGHT></H?> <ADDRESS></ADDRESS> <BLOCKQUOTE></BLOCKQUOTE> <CITE></CITE> <CODE></CODE> <DFN></DFN> <DIV></DIV> <EM></EM> <H?></H?> <KBD></KBD> <BIG></BIG> <SAMP></SAMP> <SMALL></SMALL> <STRONG></STRONG> <VAR></VAR>

Tabel tag Formatting Presentasi/tampilan
Base Font Size Blinking Bold Center Change Font Size Font Color Font Size Italic Preformatted <BASEFONT SIZE=?> <BLINK></BLINK> <B></B> <CENTER></CENTER> <FONT SIZE=+|-?></FONT> <FONT COLOR="#$$$$$$"></FONT> <FONT SIZE=?></FONT> <I></I> <PRE></PRE>

53

Modul Perkuliahan Pemrograman Web

Strikeout Subscript Superscript Typewriter Underline Width

<S></S> <SUB></SUB> <SUP></SUP> <TT></TT> <U></U> <PRE WIDTH=?></PRE>

Tabel tag Pengaturan Baris Halaman (Dividers)
Alignment Align Text Line Break Clear Textwrap Horizontal Rule No Break Paragraph Solid Line Thickness Width Width Percent Word Break <HR ALIGN=LEFT|RIGHT|CENTER> <P ALIGN=LEFT|CENTER|RIGHT> </P> <BR> <BR CLEAR=LEFT|RIGHT|ALL> <HR> <NOBR> </NOBR> <P> </P> <HR NOSHADE> <HR SIZE=?> <HR WIDTH=?> <HR WIDTH=%> <WBR>

Tabel tag Pengaturan Warna dan Backgrounds
Active Link Background Color Text Color Tiled Background <BODY ALINK="#$$$$$$"> <BODY BGCOLOR="#$$$$$$"> <BODY TEXT="#$$$$$$"> <BODY BACKGROUND="URL">

54

Modul Perkuliahan Pemrograman Web

Link Color Visited Link

<BODY LINK="#$$$$$$"> <BODY VLINK="#$$$$$$">

Whitespace
Whitespace adalah karakter yang tidak diprint seperti: space, 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 <br> atau tag <p> dan </p> membuat kumpulan text dalam satu pragraf Tag <pre> dan </pre> dapat digunakan pada text sehingga whitespace ditampilkan sesuai dengan apa yang ditulis “preformatted”) (“pre” singkatan dari

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 &copy; &reg; &#153; &nbsp; Keterangan copyright symbol registered trademark symbol trademark symbol nonbreaking space Contoh © ® ™

55

Modul Perkuliahan Pemrograman Web

&lt; &gt; &amp; &quot;

Less-than symbol greater-than symbol ampersand quotation mark

< > & "

Contoh : Kode
2 &lt; 3, adalah benar<br> 3 &gt; 4, adalah salah

Hasil 2 <

3,

adalah

benar

3 > 4, adalah salah

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

Contoh : Kode Hasil

<ul> <li>Sugar</li> <li>Chips</li> <li>Caffeine</li> <li>Chocolate</li> </ul>

• • • •

Sugar Chips Caffeine Chocolate

Attributes Beberapa tag mempunyai atribut untuk tambahan informasi: 56

Modul Perkuliahan Pemrograman Web

Bentuk: nama attribut="nilai atribut"

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

<ol> <li>Sugar</li> <li>Chips</li> <li>Caffeine</li> <li>Chocolate</li> </ol> <ol type="A"> <li>Sugar</li> <li>Chips</li> <li>Caffeine</li> <li>Chocolate</li> </ol>

1. 2. 3. 4.

Sugar Chips Caffeine Chocolate

A. B. C. D.

Sugar Chips Caffeine Chocolate

Tabel tag Lists
Bullet Type Defination List Directory List Menu List Numbering Type Ordered Lists Starting Number Unordered List <UL TYPE=DISC|CIRCLE|SQUARE><LI TYPE=DISC|CIRCLE|SQUARE> <DL> <DT> <DD> </DL> <DIR> <LI> </DIR> <MENU> <LI> </MENU> <OL TYPE=A|a|I|i|1><LI TYPE=A|a|I|i|1> <OL> <LI> </OL> <OL VALUE=?><LI VALUE=?> <UL> <LI> </UL>

57

Modul Perkuliahan Pemrograman Web

Links
Untuk me link kehalaman lain: <a href="URL"> ke halaman </a>

Contoh:

I'm

taking

<a

href

=

"http://www.stmik.edu/news/index.html">Berita </a> alumni. Link text secara otomatis akan berwarna biru dan underlined (purple jika telah dikunjungi)
Untuk link ke bagian lain dari halaman yang sama:

Insert nama anchor: <a name="refs">References</a> Lakukan link: <a href="#refs">My references</a>
Untuk link dari halam lain ke nama anchor: <a href="PageURL#refs">My references</a> • Untuk link e-mail <A HREF="mailto:psagala@yahoo.com">Mail!</A>

Images
Images (pictures) bukanlah bagain dari halaman HTML; HTML hanya memberitahu dimana image di temukan <img src="URL" alt="text description" width="150" height="100">

Atribut src attribute yang diperlukan sedang lainnya optional The URL alamat dan nama image seperti:.gif, .jpg, atau .png Atribut alt memberi text sebagai representasi jika image gagal ditampilkan Atribut height and width jika disertakan memperbaiki tampilan image (jika ukuran salah maka tampilan gambar akan terganggu) Tidak ada tag akhir </img> karena tag <img> bukan container

Tabel tag Links dan Gambar
Alignment <IMG SRC="URL"ALIGN=TOP|BOTTOM|MIDDLE>

58

Modul Perkuliahan Pemrograman Web

Alignment Alternate Border Client Pull Define Target Dimensions Display Image Embed Object Imagemap Imagemap URL Link Link to Target Low-Res Proxy Map Object Size Runaround Space Section Target Window

<IMG SRC="URL"ALIGN=LEFT|RIGHT| TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM> <IMG SRC="URL" ALT="***"> <IMG SRC="URL" BORDER=?> <META HTTP-EQUIV="Refresh" URL=URL"> <A NAME="***"> </A> <IMG SRC="URL" WIDTH="?" HEIGHT="?"> <IMG SRC="URL"> <EMBED SRC="URL"> <IMG SRC="URL" ISMAP> <IMG SRC="URL" USEMAP="URL"> <A HREF="URL"> </A> <A HREF="URL#***"> </A><A HREF="#***"> </A> <IMG SRC="URL" LOWSRC="URL"> <MAP NAME="***"> </MAP> <EMBED SRC="URL" WIDTH="?" HEIGHT="?"> <IMG SRC="URL" HSPACE=? VSPACE=?> <AREA SHAPE="RECT" COORDS=",,," HREF="URL"| NOHREF> <A HREF="URL" TARGET="***"> </A> CONTENT="?;

Tables
Tables digunakan untuk mengorganisir informasi dalam dua dimensi (baris dan kolom) 59

Modul Perkuliahan Pemrograman Web

Suatu <table> dapat terdiri satu atau lebih baris table, <tr> Setiap baris table terdiri dari satu atau lebih cell table data, <td>, atau cell table header, <th>

Perbedaan antara <td> dan <th> hanya pada format text. Pada cell <th> otomatis dalam format “boldface” dan “centered”
Borders (batas) pada cell dapat diberi dengan menambah attribute: border="1" pada tag awal <table>

Contoh table: Kode <table <th>Name</th> border="1"> <tr> <th>Phone</th> </tr> <tr> <td>555-1234</td> </tr> <tr> <td>555-2345</td> </tr> <tr> <td>555-3456</td> </tr> Hasil

<td>Dick</td>

<td>Jane</td>

<td>Sally</td> </table>

Tabel tag untuk Tables
Define Table Table Border Table Border Cell Spacing Cell Padding <TABLE> </TABLE> <TABLE BORDER> </TABLE> <TABLE BORDER=?> </TABLE> <TABLE CELLSPACING=?> <TABLE CELLPADDING=?>

60

Modul Perkuliahan Pemrograman Web

Table Width Table Width (%) Table Caption Table Alignment Table Row Table Header Alignment No Line Breaks Columns to Span Rows to Span Desired Width Width Percent

<TABLE WIDTH=?> <TABLE WIDTH=%> <CAPTION> </CAPTION> <CAPTION ALIGN=TOP|BOTTOM> <TR> </TR> <TH> </TH> <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> <TD > <TD COLSPAN=?> <TD ROWSPAN=?> <TD WIDTH=?> <TD WIDTH=%>

Frames
Frames adalah cara membagi jendela browser dalam beberapa bingkai. Halaman HTML terpisah dapat ditempatkan pada tiap bingkai.

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

61

Modul Perkuliahan Pemrograman Web

Contoh: <frameset cols="20%,80%"> Menambah frames pada frameset Letakkan tag <frame> dalam <frameset> yang merupakan columns rows atau

<frame> bukan container maka tidak ada tag akhir </frame>
Setiap <frame> mempunyai atribut seperti ini: src=”URL “ Dan beberapa tag e optional:

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

Kode

<HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET cols="20%,80%"> <FRAMESET rows="30%,70%"> <FRAME src="overview-frame.html" name="packageListFrame"> <FRAME src="allclasses-frame.html" name="packageFrame"> </FRAMESET> <FRAME src="overview-summary.html" name="classFrame"> </FRAMESET> <NOFRAMES> <H2>If you see this, you have frames turned off!</H2> </NOFRAMES> </HTML>

62

Modul Perkuliahan Pemrograman Web

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 <FRAMESET COLS=,,,> </FRAMESET> <FRAMESET COLS=*> </FRAMESET> <FRAME> <FRAME SRC="URL"> <FRAMESET> </FRAMESET> <FRAME NAME="***"|_blank|_self|_parent|_top> <FRAME MARGINWIDTH=?> <FRAME MARGINHEIGHT=?> <FRAME NORESIZE> <FRAME SCROLLING="YES|NO|AUTO"> <FRAMESET ROWS=,,,> </FRAMESET> <FRAMESET ROWS=*> </FRAMESET> <NOFRAMES> </NOFRAMES>

Forms
<form> merupakans tag HTML yang digunakan untuk rancangan interface 63

Modul Perkuliahan Pemrograman Web

pada halam web:

Untuk meminta informasi dari user yang kemudian dikirim ke server
Suatu form terdiri dari:

: <form parameters> ...form elements... </form> 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"

(diperlukan)

menetapkan kemana informasi dikirim jika button “Submit” diklik

method="get" (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 <input>

Kebanyakan elemen form menggunakan tag input dengan, type="..." berupa: text, checkbox, radio, password, 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

Modul Perkuliahan Pemrograman Web

disabled: user tak dapat melakukan apa pun pada elemen ini

Contoh-contoh Text input:

A text field: <input type="text" name="textfield" value="with an initial value">

Hasil:

A password field: <input type="password" name="textfield3" value="secret">

Hasil:

textarea

A multi-line text field <textarea name="textarea" cols="24" rows="2">Hello</textarea>

65

Modul Perkuliahan Pemrograman Web

Hasil:

Buttons

A

A
• A

submit <input type="submit" name="Submit" value="Submit"> reset <input type="reset" name="Submit2" value="Reset">
plain <input type="button" name="Submit3" value="Push Me">

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

Modul Perkuliahan Pemrograman Web

A

checkbox: <input type="checkbox" name="checkbox” value="checkbox" checked>

Radio buttons Radio buttons:<br> <input type="radio" name="radiobutton" value="myValue1"> male<br> <input type="radio" name="radiobutton" value="myValue2" checked> female
Hasil:

Drop-down menu or list
Kode Hasil

A

menu or list: <select name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option> </select>

Contoh lengkap: Kode <html> <head> <title>Get <meta Hasil Identity</title> http-equiv="Content-Type" 67

Modul Perkuliahan Pemrograman Web

content="text/html; charset=iso-8859-1"> </head> <body> <p><b>Who are you?</b></p> <form method="post" action=""> <p>Name: <input type="text" name="textfield"> </p> <p>Gender: <input type="radio" name="gender" value="m">Male <input type="radio" name="gender" value="f">Female</p> </form> </body> </html>

Tabel tag Forms
Checked Default Option Define Form Field Name Field Size Field Value File Upload Input Box Size Input Field Max Length Multiple Choice <INPUT CHECKED> <OPTION SELECTED> <FORM ACTION="URL" METHOD=GET|POST> </FORM> <INPUT NAME="***"> <INPUT SIZE=?> <INPUT VALUE="***"> <FORM data></FORM> ENCTYPE="multipart/form-

<TEXTAREA ROWS=? COLS=?> </TEXTAREA> <INPUT TYPE="TEXT|PASSWORD|CHECKBOX| RADIO |IMAGE|HIDDEN|SUBMIT|RESET"> <INPUT MAXLENGTH=?> <SELECT MULTIPLE>

68

Modul Perkuliahan Pemrograman Web

Name of Box Name of List Option Selection List Wrap Text # of Options

<TEXTAREA NAME="***"> </TEXTAREA> <SELECT NAME="***"> </SELECT> <OPTION> <SELECT> </SELECT> <TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL> </TEXTAREA> <SELECT SIZE=?> </SELECT>

Contoh Komplit kombinasi form dan table: Kode: <html> <body> <center> <form method="POST" action="Kuesioner.php3"> <div align="center"> <center> <table border="0" width="500"> <tr> <th colspan=2> Kuesioner Mahasiswa </th> </tr> <tr> <td width="106">Nama</td> <td width="471"><input type="text" name="Nama" size="20"></td> </tr> <tr> <td width="106">Password</td> <td width="471"><input type="password" name="Password" size="20"></td> </tr> <tr> 69

Modul Perkuliahan Pemrograman Web

<td width="106">Jenis Kelamin</td> <td width="471"><input type="radio" value="0" checked name="Kelamin">Pria <input type="radio" name="Kelamin" value="1">Wanita</td> </tr> <tr> <td width="106">Hobby</td> <td width="471"><input type="checkbox" name="C1" value="ON">Membaca, <input type="checkbox" name="C2" value="ON">Sport, <input type="checkbox" name="C3" value="ON">Music, <input type="checkbox" name="C4" value="ON">Memasak, <input type="checkbox" name="C5" value="ON">Tamasya </td> </tr> <tr> <td width="106">Komentar</td> <td width="471"><textarea rows="2" name="Komentar" cols="55"></textarea></td> </tr> <tr> <td width="106">Jurusan</td> <td width="471"><select size="1" name="Jurusan"> <option selected>Komputer</option> <option>Akuntansi</option> <option>Sekretaris</option> </select></td> </tr> </table> </center> </div> <p><input type="submit" value="Submit" name="Submit"> <input type="reset" value="Reset" name="Reset"></p> </form> </center> </body> </html> Hasil:

70

Modul Perkuliahan Pemrograman Web

Link Absolut dan Relatif Pada bab diatas telah ditunjukan kode html yang berfungsi sebagai link ke objek gambar taupun ke halaman html seperti: <a href=”URL”> ke halaman </a>.
URL (Uniform Resource Location) merupkan alamat/lokasi tempat objek gambar atau halaman yang hendak dilink berda. Objek tersebut dapat berada dalam satu folder dengan file pemanggil atau berda pada folder lain yang berbeda.

Ada dua cara menuliskan lokasi atau alamat yang dilink/dipanggil tersebut yaitu dengan menuliskan secara lengkap URL yang dilink seperti (link _bsolute):
http://www.hair.net/~squiggie/LottzaStuff/other/images/chef.gif

Dalam contoh ini chef.gif adalah nama objek gambar yang dipanggil/dilink dengan lokasi seperti ditunjukkan diatas. Sedangkan file yang memanggil adalah page1.html. Cara lain adalah dengan menuliskan alamat relatif seperti berikut (link relatif): SRC=”chef.gif” berarti gambar tersebut
ada di folder yang sama dengan dokumen html

71

Modul Perkuliahan Pemrograman Web

SRC=”images/chef.gif” berarti gambar
tersebut terletak satu folder di bawah (sub folder) dokumen html.

SRC=”../chef.gif” berarti gambar tersebut
terletak satu folder di atas dokumen html.

SRC=”../../chef.gif”
tersebut terletak dua dokumen html.

berarti folder

gambar di atas

SRC=”../images/chef.gif” berarti gambar
tersebut terletak satu folder di atas kemudian satu folder ke bawah di direktori images.

72

Modul Perkuliahan Pemrograman Web

SRC=”../../../other/images/chef.gif”

Ada baiknya menggunakan URL relatif dibandingkan dengan pemakaian URL absolut (lengkap). Karena dalam perancangan web site, hasil rancangan dapat disimpan di hard disk sendiri dan semua link akan berfungsi pada saat diupload ke server di internet, dan juga file/gambar tersebut akan lebih cepat ditampilkan oleh

browser. Adapun URL absolut digunakan jika gambar tadi terletak di server yang sama sekali berbeda.

Implementasi dalam pembuatan home page sederhana : Dalam hal ini kita sudah menyertakan aplikasi PHP triad yang memiliki aplikasi server lokal Apache secara include.sehingga kita bisa menampilkan hasil desain pada browser menggunakan URL dengan alamat lokal subang.com contoh : http://localhost/www.stmik-

73

Modul Perkuliahan Pemrograman Web

Direktori tempat menyimpan file-file hasil desain adalah C:\apache\htdocs

74

Modul Perkuliahan Pemrograman Web

Folder situs stmik-subang.com, memiliki sub folder image sebagai tempat menyimpan gambar – gambar yang kita butuhkan, sebagai berikut :

75

Modul Perkuliahan Pemrograman Web

76

Modul Perkuliahan Pemrograman Web

77

Modul Perkuliahan Pemrograman Web

Code frame dalam HTML untuk mendesain halaman web yang kita inginkan :

78

Modul Perkuliahan Pemrograman Web

<frameset rows="20%,80%" border=5> <frame src="header.html" name="header" scrolling="no"> <frameset cols="20%,60%,20%"> <frame src="menu.html" name="menu" scrolling="no"> <frame src="welcome.html" name="isi" scrolling="yes"> <frame src="iklan.html" name="iklan" scrolling="no"> </frameset> </frameset>

79

Modul Perkuliahan Pemrograman Web

80

Modul Perkuliahan Pemrograman Web

Tampilan pada browser untuk rangka frame di ata adalah sebagai berikut :

81

Modul Perkuliahan Pemrograman Web

Membuat file baru untuk mendefinisikan bagian header adalah dengan header.html

82

Modul Perkuliahan Pemrograman Web

Misalnya kita baru mengeset atau mengisikan warna #FFFFFF pada header :

83

Modul Perkuliahan Pemrograman Web

Hasilnya sebagai berikut :

84

Modul Perkuliahan Pemrograman Web

Kita akan menampilkan header yang telah di desain menggunakan makromedia firework

Maka pada toolbar klik image lalu cari dan klik gambar yang kita inginkan

85

Modul Perkuliahan Pemrograman Web

86

Modul Perkuliahan Pemrograman Web

Gambar yang telah kita pilih terlihat dalam kode dengan identitas IMG

Perubahan yang terdapat pada code harus di save agar tampil hasil perubahannya dalam browser. Perubahan yang belum disimpan (di save akan terlihat dari) tanda merah pada filenya.

87

Modul Perkuliahan Pemrograman Web

Perubahan yang telah disimpan akan terlihat dengan warna biru pada nama filenya :

88

Modul Perkuliahan Pemrograman Web

Hasilnya dapat dilihat pada browser dengan cara merefresh.

Tampak header dengan warna background dan gambar header yang kita inginkan :

Berikut mendefinisikan file dan isi menu dengan file : menu.html

89

Modul Perkuliahan Pemrograman Web

Memilih warna untuk background dari menu dengan bgcolor=”#FFFFFF”

90

Modul Perkuliahan Pemrograman Web

Hasilnya sebagai berikut :

91

Modul Perkuliahan Pemrograman Web

Tampil di browser sebagai berikut (baru objek warna dengan #FFFFFF):

92

Modul Perkuliahan Pemrograman Web

Mendefinisikan menu dengan hyperlink :

Code lengkapnya dari menu.html <BODY bgcolor="#FFFFFF"> <a href="tinformatika.html" STYLE="TEXT-DECORATION:NONE" color="red"> T.Informatika?</font></a><br> target="isi"><font

<a href="minformatika.html" STYLE="TEXT-DECORATION:NONE" target="isi"><font color="red">M.Informatika?</font></a><br>

<a href="kakuntansi.html" STYLE="TEXT-DECORATION:NONE" target="isi"><font color="red">K.Akuntansi?</font></a><br>
<a href="html.html" target="isi" STYLE="TEXT-DECORATION:NONE"><font color="red"> apa itu HTML?</font></a><br><br>

93

Modul Perkuliahan Pemrograman Web

<a href="php.html" target="isi"><font color="red"><CENTER><IMG SRC="image/PHP.png" WIDTH="137" HEIGHT="50" BORDER="0" ALT="apa itu PHP"></CENTER></font></a><br> </BODY>

Mendefinisikan hyperlink T.Informatika dengan objek teks jurusan Teknik Informatika dan warna background kuning:

94

Modul Perkuliahan Pemrograman Web

Seterusnya untuk hyperlink yang lainnya :

95

Modul Perkuliahan Pemrograman Web

<BODY bgcolor="#FFFFCC">

96

Modul Perkuliahan Pemrograman Web

<CENTER><IMG SRC="C:/apache/htdocs/stmiksubang.com/image/yudhistira_iklan4.gif" WIDTH="100" HEIGHT="350" BORDER="0" ALT=""></CENTER> </BODY>

Hyperlink juga dapat berupa gambar, seperti gambar image PHP dalam menu :

Inilah kode hyperlink-nya :

<a href="php.html" target="isi"><font color="red"><CENTER><IMG SRC="image/PHP.png" WIDTH="137" HEIGHT="50" BORDER="0" ALT="apa itu PHP"></CENTER></font></a><br> 97

Modul Perkuliahan Pemrograman Web

Definisi dari file php.html sebagai berikut :

Tampilan dalam browser sebagai berikut :

98

Modul Perkuliahan Pemrograman Web

index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <frameset rows="20%,80%" border=5> <frame src="header.html" name="header" scrolling="no">

99

Modul Perkuliahan Pemrograman Web

<frameset cols="20%,60%,20%"> <frame src="menu.html" name="menu" scrolling="no"> <frame src="welcome.html" name="isi" scrolling="yes"> <frame src="iklan.html" name="iklan" scrolling="no"> </frameset> </frameset> </HTML>

Menu.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD>

<BODY bgcolor="#FFFFFF"> <a href="tinformatika.html" STYLE="TEXT-DECORATION:NONE" color="red"> T.Informatika?</font></a><br> target="isi"><font

100

Modul Perkuliahan Pemrograman Web

<a href="minformatika.html" STYLE="TEXT-DECORATION:NONE" target="isi"><font color="red">M.Informatika?</font></a><br> <a href="kakuntansi.html" STYLE="TEXT-DECORATION:NONE" color="red">K.Akuntansi?</font></a><br> target="isi"><font

<a href="html.html" target="isi" STYLE="TEXT-DECORATION:NONE"><font color="red"> apa itu HTML?</font></a><br><br>

<a href="php.html" target="isi"><font color="red"><CENTER><IMG SRC="image/PHP.png" WIDTH="137" HEIGHT="50" BORDER="0" ALT="apa itu PHP"></CENTER></font></a><br> </BODY> </HTML>

101

Modul Perkuliahan Pemrograman Web

Mendesain halaman Web dengan menggunakan Teknik Table pada HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <table border=0 width=720 align=center height=600> <tr bgcolor=blue> <td colspan=3 align=center height=100> untuk header </td></tr> <tr bgcolor=white> <td bgcolor=yellow width=100 align=center>untuk menu </td> <td width=300 align=center> untuk isi</td> <td bgcolor=fuchsia width=100 align=center> untuk iklan </td> </tr> <tr bgcolor=blue> <td colspan=3 align=center height=100> untuk footer </td></tr> </table> </BODY> </HTML>

102

Modul Perkuliahan Pemrograman Web

103

Modul Perkuliahan Pemrograman Web

<BODY> <table border=0 width=720 align=center height=600> <tr bgcolor=blue> <td colspan=3 align=center height=100> <IMG SRC="../stmiksubang.com/image/header.png" WIDTH="720" HEIGHT="100" BORDER="0" ALT=""> </td></tr> <tr bgcolor=white> <td bgcolor=yellow width=100 align=center>untuk menu </td> <td width=300 align=center> untuk isi</td> <td bgcolor=fuchsia width=100 align=center> untuk iklan </td> </tr> <tr bgcolor=blue> <td colspan=3 align=center height=100> untuk footer </td></tr> </table> </BODY>

Setelah di save pada editor edit plus, maka pada browser di refresh akan menghasilkan tampilan sebagai berikut :

104

Modul Perkuliahan Pemrograman Web

KUIS

1 Pada dasarnya HTML merupakan : a. b. c. d. e. Bahasa pemrograman untuk desain web Bahasa pengkodean Bahasa pemrograman untuk berbagai aplikasi Merupakan editor desain aplikasi berbasis web Merupakan browser

2 Yang termasuk pada rentetan sejarah HTML sebagai berikut, kecuali : Oktober tahun 1990: pertama kali oleh Berners-Lee's Musim panas tahun 1991: spesifikasi HTML di rilis pada Internet September 1995: HTML 2.0 diterima sebagai standar - (RFC 1866) Maret 1995: draft HTML 3.0 dihilangkan dari peredaran (belakangan habis masa nerlakunya/expired) e. Januari 1997: HTML 3.2 (Wilbur) direkomendasi oleh W3C (World Wide Web Consortium
a. b. c. d.

3 Berikut pernyataan tentang tag HTML, kecuali :

105

Modul Perkuliahan Pemrograman Web

Tag HTML ditempatkan dalam kurung, < … > Kebanyakan tag HTML merupakan pasangan, <b> dan </b> (tag awal dan akhir) Text yang berada diantara kedua tag adalah unsur content (tag bertindak sebagai container) Tag harus tersusun secara baik (properly nested ) yaitu tidak saling tumpang tindih Tag HTML case sensitive
4 <PRE></PRE>, merupakan kelompok tag :

a. untuk Formating dan Style b. Formatting Presentasi/tampilan c. Pengaturan Baris Halaman (Dividers)
d. Pengaturan Warna dan Backgrounds e. pengaturan teks 5

Tampilan pada browser diatas memiliki kode HTML sebagai berikut : a. b. c. d. e. 6 <ol> <el> <al> <ol> <ul> <li> <li> <li> <li> <li> Web Desain. Web Desain. Web Desain. Web Desain. Web Desain. <li> <li> <li> <li> <li> Pemrograman Web .</ul> Pemrograman Web .</el> Pemrograman Web .</al> Pemrograman Web .</ol> Pemrograman Web .</ul>

Tampilan table diatas memiliki kode sebagai berikut :

a

<TABLE border=1><TR> <TD>1</TD> <TD>2</TD> </TR ><TR> <TDcolspan=2>3</TD></TR><TR><TD>5</TD><TD>6</TD></TR> </TABLE>

b

<TABLE border=1><TR> <TD>1</TD> <TD>2</TD> </TR ><TR> <TD colspan=2>3</TD></TR><TR><TD>5</TD><TD>6</TD></TR></TA

106

Modul Perkuliahan Pemrograman Web BLE>

c

<TABLE border=1><TR> <TD>1</TD> <TD>2</TD> </TR ><TR> <TDcolspan=2>3</TD></TR><TR><TD>5</TD><TD>6</TD></TR> </TABLE>

d

<TABLE border=1><TR> <TD>1</TD> <TD>2</TD> </TR ><TR> <TDcolspan=2>3</TD></TR><TR><TD>5</TD><TD>6</TD></TR> </TABLE>

e

<TABLE border=1><TR> <TD>1</TD> <TD>2</TD> </TR ><TR> <TDcolspan=2>3</TD></TR><TR><TD>5</TD><TD>6</TD></TR> </TABLE>

7

A.

B.

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

107

Modul Perkuliahan Pemrograman Web

a

b

c

d

e

Tampilan pada browser berikut memiliki kode HTML sebagai berikut:

108

Modul Perkuliahan Pemrograman Web

a

b

c

109

Modul Perkuliahan Pemrograman Web

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

Modul Perkuliahan Pemrograman Web

(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

Modul Perkuliahan Pemrograman Web

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

Modul Perkuliahan Pemrograman Web

FORM Sebuah halaman web biasanya menyertakan 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 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

Modul Perkuliahan Pemrograman Web

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, bentuknya hampir sama dengan Text Field, bedanya hanya ketika diketik 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 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

Modul Perkuliahan Pemrograman Web

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

Modul Perkuliahan Pemrograman Web

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

Modul Perkuliahan Pemrograman Web

Dalam kondisi file sedang dibuka

Hapus selamat datang .....

Sehingga posisi kursor seperti ini

Pada menu insert klik form

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

117

Modul Perkuliahan Pemrograman Web

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

Pada code

, lengkapi skripnya sebagai berikut :

<form name="input_pengunjung" method="post" action="proses_input.php"> <div align="center"> <p>Input Data Pengunjung </p> <p>&nbsp;</p> </div> </form>

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

Klik OK

118

Modul Perkuliahan Pemrograman Web

Atur dan lengkapi tabel sebagai berikut :

Simpan kursor pada kolom ketiga di baris pertama sebagi berikut :

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

119

Modul Perkuliahan Pemrograman Web

Lakukan pengaturan pada properties TextField sebagai berikut :

Hasilnya sebagi berikut :

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

120

Modul Perkuliahan Pemrograman Web

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

Modul Perkuliahan Pemrograman Web

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

Modul Perkuliahan Pemrograman Web

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

Modul Perkuliahan Pemrograman Web

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

Modul Perkuliahan Pemrograman Web

Pada properties, lakukan pengaturan sebagai berikut :

Coba Anda seleksi List/menu bulan dan lakukan klik pada window Code akan diperoleh skrip sebagai berikut : <select name="bulan" id="bulan"> <option value="-"><option value="Januari">Januari <option value="Februari">Februari <option value="Maret">Maret <option value="April">April <option value="Mei">Mei <option value="Juni">Juni <option value="Juli">Juli <option value="Agustus">Agustus <option value="September">September <option value="Oktober">Oktober <option value="November">November <option value="Desember">Desember </select> Untuk tempat lahir kembali menggunakan Text Field

, maka

125

Modul Perkuliahan Pemrograman Web

Dengan mengatur propertiesnya sebagai berikut :

Berikut Objek Form baris ketujuh, dengan properties dan skripnya :

<td><select name="member" id="member"> <option value="Ya">ya <option value="Tidak">tidak </select></td>

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

126

Modul Perkuliahan Pemrograman Web

<td><select name="asal" id="asal"> <option value="-">-</option> <option value="bekasi">bekasi</option> <option value="purwakarta">purwakarta</option> <option value="karawang">karawang</option> <option value="subang">subang</option> </select></td>

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

127

Modul Perkuliahan Pemrograman Web

Lalu lakukan pengaturan pada propertiesnya sebagai berikut :

Sehingga diperoleh hasil sebagai berikut :

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

128

Modul Perkuliahan Pemrograman Web

Lakukan pengaturan pada properties sebagai berikut :

Hasilnya :

Hasil desain form keseluruhan :

129

Modul Perkuliahan Pemrograman Web

Tampilan keseluruhan pada browser :

130

Modul Perkuliahan Pemrograman Web

Skript keseluruhan :

<FORM METHOD=POST ACTION="proses_input.php"> <TABLE> <TR> <TD width="159">nama</TD> <TD width="10">:</TD> <TD width="294"><INPUT TYPE="text" NAME="nama"></TD> </TR> <TR> <TD>password</TD>

131

Modul Perkuliahan Pemrograman Web <TD>:</TD> <TD><INPUT TYPE="password" NAME="pass"></TD> </TR> <TR> <TD>jenis kelamin</TD> <TD>:</TD> <TD> <INPUT TYPE="radio" NAME="jenkel" value="L"> laki-laki <br> <INPUT TYPE="radio" NAME="jenkel" value="P"> perempuan </TD> </TR> <TR> <TD>email</TD> <TD>:</TD> <TD><input type="text" name="email"></TD> </TR> <TR> <TD>tanggal lahir</TD> <TD>:</TD> <TD> <SELECT NAME="tanggal"> <option value="-">- </option> <option value="1">1 </option> <option value="2">2 </option> <option value="3">3 </option> <option value="4">4 </option> <option value="5">5 </option> <option value="6">6 </option> <option value="7">7 </option> <option value="8">8 </option>

132

Modul Perkuliahan Pemrograman Web <option value="9">9 </option> <option value="10">10 </option> <option value="11">11 </option> <option value="12">12 </option> <option value="13">13 </option> <option value="14">14 </option> <option value="15">15 </option> <option value="16">16 </option> <option value="17">17 </option> <option value="18">18 </option> <option value="19">19 </option> <option value="20">20 </option> <option value="21">21 </option> <option value="22">22 </option> <option value="23">23 </option> <option value="24">24 </option> <option value="25">25 </option> <option value="26">26 </option> <option value="27">27 </option> <option value="28">28 </option> <option value="29">29 </option> <option value="30">30 </option> <option value="31">31 </option> </SELECT> <SELECT NAME="bulan"> <option value="-">- </option> <option value="Januari">Januari </option> <option value="Februari">Februari </option> <option value="Maret">Maret </option>

133

Modul Perkuliahan Pemrograman Web <option value="April">April </option> <option value="Mei">Mei </option> <option value="Juni">Juni </option> <option value="Juli">Juli </option> <option value="Agustus">Agustus </option> <option value="September">September </option> <option value="Oktober">Oktober </option> <option value="November">November </option> <option value="Desember">Desember </option>

</SELECT> <INPUT TYPE="text" NAME="tahun"> </TD> </TR> <TR> <TD>tempat lahir</TD> <TD>:</TD> <TD><INPUT TYPE="text" NAME="tempat"></TD> </TR> <TR> <TD>ikutan jadi member</TD> <TD>:</TD> <TD> <SELECT NAME="member"> <option value="Ya">ya </option> <option value="Tidak">tidak </option> </select></TD> </TR> <TR> <TD>kewarganegaraan</TD>

134

Modul Perkuliahan Pemrograman Web <TD>:</TD> <TD> <SELECT NAME="asal"> <option value="-">- </option> <option value="SUMBAR">SumBar </option> <option value="SUMUT">SumUt </option> <option value="NAD">NAD </option> <option value="SULTENG">SulTeng </option> </SELECT> </TD> </TR> <TR> <TD>komentar anda untuk kami</TD> <TD>:</TD> <TD><TEXTAREA NAME="pesan" ROWS="5" COLS="20"></TEXTAREA></TD> </TR> <TR> <td></td> <td></td> <TD></TD> </TR> <TR colspan=3> <td >&nbsp;</td> <td>&nbsp;</td> <TD><INPUT TYPE="submit" name="submit" value="input data"></TD> </TR> </TABLE> </FORM> &nbsp; </td> </tr>

135

Modul Perkuliahan Pemrograman Web

Pembuatan Check box

136

Modul Perkuliahan Pemrograman Web

Tuliskan Indonesia setelah kotak check box

Lakukan hal yang sama untuk pilahan yang lainnya :

137

Modul Perkuliahan Pemrograman Web

<body> <form name="form1" method="post" action=""> <p>Bahasa yang anda kuasai :</p> <p> <input type="checkbox" name="checkbox" value="checkbox"> Indonesia <input type="checkbox" name="checkbox2" value="checkbox"> I nggris <input type="checkbox" name="checkbox3" value="checkbox"> Jepang <input type="checkbox" name="checkbox4" value="checkbox"> Korea </p> </form> </body>

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

Modul Perkuliahan Pemrograman Web

dan dalam content,

kursor berada di

Klik window code

139

Modul Perkuliahan Pemrograman Web

Tuliskan skrip berikut : pada bagian yang ada kursor tersebut
<TABLE width="550" align="center" > <!--DWLayoutTable--> <TR> <TD width="211" height="21" valign="top">selamat siang </TD> <TD width="6">&nbsp;</TD> <TD width="363" valign="top"> <?= $_POST["nama"]?> </TD> </TR> <TR> <TD height="21" valign="top">password anda adalah</TD> <TD valign="top">:</TD> <TD valign="top"> <?= $_POST["pass"]?> </TD>

140

Modul Perkuliahan Pemrograman Web </TR> <TR> <TD height="21" valign="top">jenis kelamin</TD> <TD valign="top">:</TD> <TD valign="top"> <?= $_POST["jenkel"]?> </TD> </TR> <TR> <TD height="21" valign="top">email</TD> <TD valign="top">:</TD> <TD valign="top"> <?= $_POST["email"]?> </TD> </TR> <TR> <TD height="21" valign="top">usia anda</TD> <TD valign="top">:</TD> <TD valign="top"> <?= 2004-$_POST["tahun"]?> </TD> </TR> <TR> <TD height="21" valign="top">anda lahir di</TD> <TD valign="top">:</TD> <TD valign="top"> <?= $_POST["tempat"]?> </TD>

141

Modul Perkuliahan Pemrograman Web </TR> <TR> <TD height="21" valign="top">apakah anda member kami</TD> <TD valign="top">:</TD> <TD valign="top"> <?= $_POST["member"]?> </TD> </TR> <TR> <TD height="21" valign="top">asal anda dari propinsi</TD> <TD valign="top">:</TD> <TD valign="top"> <?= $_POST["asal"]?> </TD> </TR> <TR> <TD height="21" valign="top">pesan yang anda berikan</TD> <TD valign="top">: </TD> <TD valign="top"> <?= $_POST["pesan"]?> </TD> </TR> </TABLE>

Kembali ke desain, dengan mengklik

, hasilnya :

142

Modul Perkuliahan Pemrograman Web

143

Modul Perkuliahan Pemrograman Web

144

Modul Perkuliahan Pemrograman Web

145

Modul Perkuliahan Pemrograman Web

All programe >PHP Triad>Star Apache

All programe >PHP Triad>Mysql-D-NT

146

Modul Perkuliahan Pemrograman Web

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, lalu isikan data berikut :

147

Modul Perkuliahan Pemrograman Web

148

Modul Perkuliahan Pemrograman Web

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

Modul Perkuliahan Pemrograman Web

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 : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

150

Modul Perkuliahan Pemrograman Web

<HTML> <HEAD> <TITLE>Contoh CSS</TITLE> </HEAD> <BODY> <H1> Cascading Style Sheet</Hl> <P>Mencoba menuliskan halaman HTML ditambah CSS.</p> <?BODY> < /HTML> Dengan script HTML diatas, kita akan mendapatkan sebuah bentuk format tulisan yang standar, format yang 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 <style> dan </style>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Contoh CSS</TITLE> </HEAD> <style type="text/css"> H1 {color:blue} </style> <BODY> <H1> Cascading Style Sheet</Hl> <P>Mencoba menuliskan halaman HTML ditambah CSS.</p> <BODY> </HTML>

151

Modul Perkuliahan Pemrograman Web

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 aturan CSS diatas, dikenal adanya selector(“H1”) dan deklarasinya (“color: biue”). Deklarasinya mempunyai dua property yaitu (“color”) dan nilainya (“blue”)

Cara Penulisan
Untuk mengintegrasikan style yang telah kita definisikan dalam CSS ke dalam sebuah halaman HTML, kita bisa menggunakan beberpa cara. Kita bisa memilih cara pemasukan CSS sesuai dengan kebutuhan kita. Beberapa 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 rupa yang sama, misalnya untuk paragraph mempunyai font 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

Modul Perkuliahan Pemrograman Web

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 } Kemudian jangan lupa, di dalam file HTML kita panggil file css tersebut dengan memakai tag "link", untuk lebih lengkapnya silahkan lihat contoh berikut.

<!DOCTYPE HTML PUBLIC "-//W3C!/DTD HTML 4.0//EN">
<HTML> <HEAD> <link rel="stylesheet" href="style.css” type="text/css"> <TITLE>Contoh CSS dari file External</TITLE> </HEAD> <BODY bgcolor="#FFFFFF"> <H1> Cascading Style Sheet</H1> <P>Mencoba menuliskan halaman HTML dengan memanggil file style.CSS.</p> <P>Semua tag Paragraph akan mempunyai bentuk yang sama</P> <P>Kita tidak perlu memakai tag FONT lagi</P> </BODY> </HTML>

Pada Dreamweaver, cara menambah aturan CSS pada style yang sudah ada, adalah dengan cara : 1. 2. Pilih Text > CSS Styles > Cdit Style Sheet Pilih tab New 3. Pilih Type Redefine HTML Tag 4. Pilih Define In New Style 5heet File

153

Modul Perkuliahan Pemrograman Web

5. Pada Dialog box Save Style File as, ketik"mystyle.css", lalu Save 6. Pada Tag , pilih p 7. Pastikan categori/ Type dan pilih Font : 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 teks, berwarna hitam, berukuran 12 dan mempunyai font*_ Verdana, 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

Modul Perkuliahan Pemrograman Web

Dengan cara ini, kita bisa memakai style ini berulang-ulang untuk halaman-nalaman lainnya yang ingin kita kenakan style seperi yang ada di file css. 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 : <!DOCTYPE HTML PUBLIC "-//W3C!/DTD HTML 4.0//EN"> <HTML> <HEAD> <STYLE type="text/css"> p{font-family:Verdana, #000000} Arial,Helvetica;font-size: 12px ; color: Menuliskan

155

Modul Perkuliahan Pemrograman Web

Hl ( color: blue} </STYLE> <TITLE>Contoh CSS dari file External</TITLE> </HEAD> <BODY bgcolor="#ffffff"> <H1> Cascading Style Sheet</H1> <P>Mencoba menuliskan halaman HTML dengan memanggil file style.CSS.</p> <P>Semua tag Paragraph akan mempunyai bentuk yang sama</P> <P>Kita tidak perlu memakai tag FONT lagi</P> </BODY> </HTML> 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

Modul Perkuliahan Pemrograman Web

<!DOCTYPE HTML PUBLIC "-//W3C!/DTD HTML 4.0//EN"> <TITLE>Contoh:CSS dari file Ekternal</TITLE> <style type="text/css"> <!@import url(style.css) --> </style> </HEAD> <BODY bgcolor="#FFFFFF"> <H1> Cascading Style Sheet </H1> <P>Semua tag Paragraph akan mempunyai bentuk yang sama</P> <P>Kita tidak perlu memakai tag FONT lagi</P> </BODY> </HTML>

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

Modul Perkuliahan Pemrograman Web

Penulisan Inline (Inline Style Sheet) Cara penulisan ini adalah cara yang dipakai jika kita membutuhkan 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.

<!DOCTYPE HTML PUBLIC "-//W3C!/DTD HTML 4.0//EN"> <TITLE>Contoh:CSS dengan cara inline</TITLE> </HEAD> <BODY bgcolor="#FFFFFF"> <H1> Cascading Style Sheet </H1> <P> <font style="font-family:'Courier New', Courier, mono; color: red">mencoba menuliskan halaman </font> <font style="font-family:Verdana, Arial, Helvetica; Sans Serif">HTML dengan inline CSS </font> </P>

158

Modul Perkuliahan Pemrograman Web

</BODY> </HTML>

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 Menggunakan class dan selector pada CSS akan lebih mempermudah pengaturan model dokumen kita. Sebagai contoh jika kita mempunyai dua 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

Modul Perkuliahan Pemrograman Web

contoh berikut ini : <!DOCTYPE HTML PUBLIC "-//W3C!/DTD HTML 4.0//EN"> <TITLE>Contoh CSS dengan cara inline</TITLE> <style type="text/css"> <!-.teori { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; color: #000000; text-daacoration: none} .contoh {font-family: "Courier New", Courier, mono; color: #000000; text-decoration: underline; background-color: #cccccc} --> </style> </HEAD> <BODY bgcolor="#FFFFFF"> <H1> Cascading Style Sheet </H1> <P class="teori">CSS akan lebih mempermudah kerja kita,ada banyak keuntungan dengan memakai css</P> <P class="contoh">denagn CSS,dokumen perawatan web site aka lebih mudah</P> </BODY> </HTML> 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 akan lebih teratur.<br>

160

Modul Perkuliahan Pemrograman Web

Kita bisa saja menggunakan class ini untuk tag HTML lainnya.

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

<!DOCTYPE HTML PUBLIC "-//W3C!/DTD HTML 4.0//EN"> <TITLE>Contoh CSS dengan cara inline</TITLE> <style type="text/css"> <!-.teori { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; color: #000000; text-daacoration: none} .contoh {font-family: "Courier New", Courier, mono; color: #000000; text-decoration: underline; background-color: #cccccc} H1.contoh{font-family: "Courier New", Courier, mono; color: #FFFFFF; text-decoration:none; background-color:#0000FF} -->

161

Modul Perkuliahan Pemrograman Web

</style> </HEAD> <BODY bgcolor="#FFFFFF"> <H1> Cascading Style Sheet </H1> <P class="teori">CSS akan lebih mempermudah kerja kita,ada banyak keuntungan dengan memakai css</P> <P class="contoh">denagn CSS,dokumen akan lebih teratur.<br> perawatan web site aka lebih mudah</P> <H1 class="contoh">ini contoh lagi</H1> </BODY> </HTML>

Class yang kita pakai adalah khusus untuk Heading 1, sehingga tidak 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

Modul Perkuliahan Pemrograman Web

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 menggunakan style a:link semua link akan berupa seperti yang 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

:hover bersama-sama dengan :active dan :focus termasuk dynamic 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

Modul Perkuliahan Pemrograman Web
• :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 : . <style type="text/css"> H1 {color:blue} </style>

165

Modul Perkuliahan Pemrograman Web

<BODY> <H1> Cascading Style Sheet</Hl> <P>Mencoba menuliskan halaman HTML ditambah CSS.</p> <BODY> a. b. c. d. e. 2 . H1 <Body> <P> H1 dan <body> <Body> dan <P>

<HEAD> <TITLE>Contoh CSS</TITLE> </HEAD> <style type="text/css"> H1 {color:blue} </style> <BODY> <H1> Cascading Style Sheet</Hl> <P>Mencoba menuliskan halaman HTML ditambah CSS.</p> <BODY> Struktur Penulisan CSS pada kode diatas adalah sebagai berikut : a. dikenal adanya selector(“H1”) b. deklarasinya (“color : biue”). c. Deklarasinya mempunyai dua property yaitu (“color”) dan nilainya (“blue”) d. Hasilnya sebagai berikut : e. Hasilnya sebagai berikut :

3 <HTML> .

<HEAD> <style type="text/CSS">

166

Modul Perkuliahan Pemrograman Web pre{color:blue} </style> </HEAD> <BODY> <pre> aku anak pintar <b color="red"> aku anak pintar juga </b> </pre> </BODY> </HTML>

Pada kode diatas, dalam broser adalah sebagai berikut : a. aku anak pintar berwarna berwarna merah b. aku anak pintar berwarna berwarna biru juga c. aku anak pintar berwarna juga berwarna biru d. aku anak pintar berwarna berwarna merah e. aku anak pintar berwarna berwarna merah dan biru 4 <HEAD> . <style type="text/CSS"> .unggas{color:red} .mamalia{color:blue} </style> </HEAD> <BODY> biru, sedangkan aku anak pintar juga biru, dan aku anak pintar juga merah, sedangkan aku anak pintar merah, dan aku anak pintar juga biru, sedangkan aku anak pintar juga

167

Modul Perkuliahan Pemrograman Web

<b.unggas>ayam, bebek, angsa, merpati</b> <b.mamalia>kambing, sapi, kera</b> </BODY> Pada kode diatas sebagai berikut, kecuali (pilih dua) : a. kode CSS untuk pengaturan warna teks b. konsep pewarisan dalam CSS c. teks untuk semua kategori unggas akan berwarna merah dan mamalia biru d. teks untuk semua kategori unggas akan berwarna biru dan mamalia merah e. semua teks akan berwarna biru atau merah 5 p{font-family:Verdana, Arial,Helvetica;font-size: 12px ; color: . #000000} pada kode diatas, maksudnya sebagai berikut, kecuali : a. Semua teks, berwarna hitam, berukuran 12 dan mempunyai font*_ Verdana, arial, Helvetica. b. jika font verdana tidak tersedia pada komputer pemakai, font yang dipakai seianjutnya adalah font Arial, c. jika tidak ada font Arial maka yang dipakai adaiah font Helvetica, jika tidak ada juga maka font yang digunakan adalah font standar HTML. d. jika tidak ada font Helvetica maka font yang digunakan adalah font standar HTML. e. Deklarasinya memiliki 2 property yaitu jenis dan ukuran huruf serta warna 6 Struktur CSS yang sering digunakan adalah : . a. menggunkan jenis dan ukuran huruf b. menggunkan warna pada propertis CSS c. menandai link yang pernah dikunjungi dan belum d. mengatur margin isi halaman web e. mengatur warna image pada tampilan halaman web 7 Perhatikan kedua kode berikut : . <HEAD> 1
<STYLE type="text/css"> p{font-family:Verdana, Arial,Helvetica;font-size: 12px ; color: #000000}

168

Modul Perkuliahan Pemrograman Web Hl ( color: blue} </STYLE> <TITLE>Contoh CSS dari file External</TITLE> </HEAD>

2

HEAD> <link rel="stylesheet" href="style.css” type="text/css"> <TITLE>Contoh CSS dari file External</TITLE> </HEAD>

Perbedaan dan persamaan dari kedua kode diatas adalah, kecuali : a. jika pada file eksternal (style.css) berisi selector dan deklarasi serta isinya sama, maka hasilnya sama b. yang membedakan adalah style pada kode pertama tidak akan bisa dipakai oleh halaman HTML lainnya c. yang membedakan adalah style pada kode kedua tidak akan bisa dipakai oleh halaman HTML lainnya d. kedua kode merupakan struktur penulisan CSS standar e. kedua kode mangatur teks 8 Pernyataan berikut semuanya benar, kecuali : . a. link artinya style berlaku pada link 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

Modul Perkuliahan Pemrograman Web

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. :visited :hover :active :focus

Keterangan : menu pada tugas pertemuan VII

170

Modul Perkuliahan Pemrograman Web

171

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->