You are on page 1of 171

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
(content), grafis, komponen web.
• Web Programmer, orang yang ahli dalam bahasa pemrograman web seperti
ASP, PHP, JavaScript dan Applet.
• Web Administrator, orang yang bertugas untuk memelihara web khususnya
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 harus
dapat melakukan Troubleshooting.
• Web Master, orang yang menguasai semua bidang-bidang di atas, namun tidak
perlu harus menguasai secara mendetail, bertanggung jawab atas jalannya situs
web pada internet dan memastikan tidak ada kendala apapun pada situs web.

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

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 1963.
• Tahun 1965 muncul sebuah ide untuk membuat teknologi Hypertext. Hypertext
adalah teks yang mempunyai hubungan dengan teks lain.
• System RFC (Request for Cmments) dimulai pada tahun 1969.
• Pada bulan September 1970 terbentuk sebuah jaringan “global” untuk pertama
kalinya yang dinamakan ARPANET, yaitu sebuah jaringan computer yang terdiri dari
5 komputer yang menghubungkan antar kampus.
• Aplikasi E-mail diperkenalkan pada tahun 1972.
• Protokol TCP/IP yang digunakan untuk mengatur traffic jaringan diperkenalkan
dan didefinisikan pada tahun 1974.
• Tahun 1977 terdapat 111 komputer di internet

5
Modul Perkuliahan Pemrograman Web

• Protokol TCP/IP menjadi standar protokol untuk jaringan computer pada tahun
1980
• Tahun 1981 terdapat 213 komputer di internet.
• Tahun 1983 terdapat 502 komputer di internet.
• Tahun 1985 internet sudah menghubungkan beberapa jaringan (BIT-NET,
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
Institusi Fisika Nuklir) pada buln Oktober 1990
• Tanggal 12 Desember 1991 sebuah web server yang pertamadi luar Eropa
dibuat.
• Tahun 1992 terdapat sekitar 1000000 komputer di internet.
• Bulan Januari 1993 terdapat 50 web server, 3 browser untuk computer Unix dan
WWW menggunakan 0,1% dari seluruh traffic di internet.
• Bulan Februari 199 diperkenalkan sebuah browser mosaic.
• Tanggal 30 April 1993 teknologi WWWsecara resmi digunakan untuk semua
orang.
• Bulan Oktober 1993 terdapat 200 web server.
• Bulan Agustus 1994 diperkenalkan Browser Netscape.
• W3C dibentuk pada tanggal 1 Oktober 1994.
• Spesifikasi HTML 4.01 diumumkan.
• Tahun 2001 terdapat sekitar 150-175 juta komputer di internet.
• Tahun 2002 terdapat lebih dari 200 juta komputer di internet dengan 840 juta
pemakai.

Lapisan-lapisan (layers) 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 ap-
proach. 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, com-
prehensive 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 proses Top-Down diperlihatkan oleh


diagram berikut:

Defenisi
Persoalan
- Eksplorasi
Konsep
Analisa
Kebutuhan
- Spesifikasi
Desain
- Prototipe

Integrasi dan
Pengujian
Sistim

Rilis, Operasi 9
dan
pemeliharaan
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 Sebagai Halaman Cover / halaman
 index.html Pertama,

 AboutUs.html Nama yang telah standard secara


 Product.htm internasional, adalah: Index.html atau
Default.html
 Clients.htm
 ContactUs.htm
 News.htm

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, dalam tim
pengembangan web :

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

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 criteria-
kriteria 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 apa yang menjadi penekanan
disuguhkan oleh situs kita, tampilan komunikasinnya tidak hanya teks tapi juga
secara visual)
5. Use Common Sense Technology (web kita akan menarik jika senantiasa sesuai
dengan perkembangan teknologi, seperti standar teknologi web terbaru, bisa
ditampilkan oleh multi browser dll )
6. Offer Alternatives (menawarkan alternative, misalnya dalam aplikasi
Macromedia flash selalu menghendaki update dalam versi terbarunya, sehingga
aplikasi web harus menjamin update secara otomatis. Hindari file gambar yang
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
atau lebih baik lagi jika memiliki fasilitas search engine).
9. Web Design is Dynamic and Proactive (lakukan evaluasi secara berkala
terhadap desain dan isi nya, senantiasa berorientasi pada selera pengunjung)
10.And Above All ….(poin-poin penting dari sembilan kaidah sebelumnya)

22
Modul Perkuliahan Pemrograman Web

 Avoid busy, cluttered backgrounds that make the text in the foreground
hard to read.
 Adjust the background colr to suit the background pattern. This prevents
a shock effect when opening the page.
 Avoid web page that merely offer screen-filling plug—ins without
providing analternative HTML version for the user who does not have that plug-
in.
 Always make background music an option ; unwanted sounds are
annoying.
 Ensure readable text sizes, and do not use too many different fonts and
font sizes on the same page.
 Avoid unnecessary GIF images when the same information can be
offered in text only HTML.
 Be conservative with all-uppercase text-it’s difficult to read and is
associated with shouting.
 Do not turn your site into “brochureware” ; try to avoid reusing exiting
information. The web is an interactive medium and requires a different approach.
 Be wary of actions your visitors won’t expect. They won’t appreciate an
applet that loads suddenly or an unannounced pop-up window.
 GIF animations are cool and frequently the only dynamic element on the
page. However, too many of them are not at all cool and speed suffers as well.
 Regularly check your site. Pages that can no lnger be found and java or
javascript error messages aggravate the user.

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

1. Situs web dibuat untuk pengguna

Dalam proses perancangan web, seorang web desainer harus memfokuskan


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 dibuat
setidaknya harus mewakili selera sebagian besar pengguna.

2. Utility dan Usability

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 image-
imagenya 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 diulang-
ulang 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 web-
nya.

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 masing-
masing 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. Perhatikan ukuran format file untuk dapat sekecil mungkin dengan


menjaga nilai visualisasi optimal gambar aslinya.
2. Pertimbangkan koneksi user yang berbeda-beda.
3. Gunakanlah selalu plugs-in untuk membantu web browser dalam
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. Use Common Sense Technology


b. Offer Alternatives
c. Design with Intelligence and Restraint
d. Clear and Consistent Navigation
e. Web Design is Dynamic and Proactive

4. 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. User oriented
b. optimasi
c. manajemen situs
d. testing
e. dimensi halaman

7. Fitur berikut paling banyak digunakan dalam akses informasi

a. TV kabel
b. Satelit
c. Dedicated line
d. Dial up
e. 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. User oriented
b. optimasi
c. manajemen situs
d. testing
e. dimensi halaman

9. 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. Kelayakan standardisasi
b. Validasi
c. Linting
d. Testing script
e. 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. Kronologi
perkembangan HTML sejak diperkenalkan pertamakali hingga saat ini
diperlihatkan sbb:
 Oktober tahun 1990: pertama kali oleh Berners-Lee's
 Musim panas tahun 1991: spesifikasi HTML di rilis pada Internet

49
Modul Perkuliahan Pemrograman Web

 Juni 1993: draft yang 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
 Januari 1997: HTML 3.2 (Wilbur) direkomendasi oleh W3C (World Wide Web
Consortium
 Juli 1997: darft HTML 4.0 (dikembangkan dari Cougar) di rilis
 Nopember 1997: HTML 4.0 menjadi usulan rekomendasi W3C
 Desember 1997: HTML 4.0 direkomendasi oleh W3C
 April 1998: HTML 4.0 direvisi dan direkomendasi oleh W3C

 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>
<head>
<title>My Title</title>
</head>
<body>
Hello, World!
</body>
</html>

tag <HTML> dan </HTML> digunakan untuk menandai awal dan akhir dari suatu file
HTML

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 Hasil
<H1>Heading 1</H1> Heading 1
<H2>Heading 2</H2> Heading 2

<H3>Heading 3</H3> Heading 3


<H4>Heading 4</H4> Heading 4
<H5>Heading 5</H5> Heading 5
<H6>Heading 6</H6>
Heading 6

Tabel tag untuk Formating dan Style


Align Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

52
Modul Perkuliahan Pemrograman Web

Align Heading <H? ALIGN=LEFT|CENTER|RIGHT></H?>

Author's Address <ADDRESS></ADDRESS>

Block Quote <BLOCKQUOTE></BLOCKQUOTE>

Citation <CITE></CITE>

Code <CODE></CODE>

Definition <DFN></DFN>

Division <DIV></DIV>

Emphasis <EM></EM>

Heading <H?></H?>

Keyboard Input <KBD></KBD>

Large Font Size <BIG></BIG>

Sample Output <SAMP></SAMP>

Small Font Size <SMALL></SMALL>

Strong Emphasis <STRONG></STRONG>

Variable <VAR></VAR>

Tabel tag Formatting Presentasi/tampilan


Base Font Size <BASEFONT SIZE=?>

Blinking <BLINK></BLINK>

Bold <B></B>

Center <CENTER></CENTER>

Change Font Size <FONT SIZE=+|-?></FONT>

Font Color <FONT COLOR="#$$$$$$"></FONT>

Font Size <FONT SIZE=?></FONT>

Italic <I></I>

Preformatted <PRE></PRE>

53
Modul Perkuliahan Pemrograman Web

Strikeout <S></S>

Subscript <SUB></SUB>

Superscript <SUP></SUP>

Typewriter <TT></TT>

Underline <U></U>

Width <PRE WIDTH=?></PRE>

Tabel tag Pengaturan Baris Halaman (Dividers)


Alignment <HR ALIGN=LEFT|RIGHT|CENTER>

Align Text <P ALIGN=LEFT|CENTER|RIGHT> </P>

Line Break <BR>

Clear Textwrap <BR CLEAR=LEFT|RIGHT|ALL>

Horizontal Rule <HR>

No Break <NOBR> </NOBR>

Paragraph <P> </P>

Solid Line <HR NOSHADE>

Thickness <HR SIZE=?>

Width <HR WIDTH=?>

Width Percent <HR WIDTH=%>

Word Break <WBR>

Tabel tag Pengaturan Warna dan Backgrounds


Active Link <BODY ALINK="#$$$$$$">

Background Color <BODY BGCOLOR="#$$$$$$">

Text Color <BODY TEXT="#$$$$$$">

Tiled Background <BODY BACKGROUND="URL">

54
Modul Perkuliahan Pemrograman Web

Link Color <BODY LINK="#$$$$$$">

Visited 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 (“pre” singkatan dari
“preformatted”)

Karakter khusus Yang di Cadangkan


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

&copy; copyright symbol ©

&reg; registered trademark symbol ®

&#153; trademark symbol ™

&nbsp; nonbreaking space

55
Modul Perkuliahan Pemrograman Web

&lt; Less-than symbol <

&gt; greater-than symbol >

&amp; ampersand &

&quot; quotation mark "

Contoh :
Kode Hasil
2 &lt; 3, adalah benar<br> 2 < 3, adalah benar
3 > 4, adalah salah
3 &gt; 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> • Sugar
<li>Sugar</li> • Chips
<li>Chips</li> • Caffeine
<li>Caffeine</li> • Chocolate
<li>Chocolate</li>
</ul>

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> 1. Sugar
<li>Caffeine</li> 2. Chips
3. Caffeine
<li>Chocolate</li>
4. Chocolate
</ol>

<ol type="A">
<li>Sugar</li>
<li>Chips</li> A. Sugar
<li>Caffeine</li> B. Chips
C. Caffeine
<li>Chocolate</li>
D. Chocolate
</ol>

Tabel tag Lists


<UL TYPE=DISC|CIRCLE|SQUARE><LI
Bullet Type
TYPE=DISC|CIRCLE|SQUARE>

Defination List <DL> <DT> <DD> </DL>

Directory List <DIR> <LI> </DIR>

Menu List <MENU> <LI> </MENU>

Numbering Type <OL TYPE=A|a|I|i|1><LI TYPE=A|a|I|i|1>

Ordered Lists <OL> <LI> </OL>

Starting Number <OL VALUE=?><LI VALUE=?>

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

<IMG SRC="URL"ALIGN=LEFT|RIGHT|
Alignment
TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>

Alternate <IMG SRC="URL" ALT="***">

Border <IMG SRC="URL" BORDER=?>

<META HTTP-EQUIV="Refresh" CONTENT="?;


Client Pull
URL=URL">

Define Target <A NAME="***"> </A>

Dimensions <IMG SRC="URL" WIDTH="?" HEIGHT="?">

Display Image <IMG SRC="URL">

Embed Object <EMBED SRC="URL">

Imagemap <IMG SRC="URL" ISMAP>

Imagemap <IMG SRC="URL" USEMAP="URL">

URL Link <A HREF="URL"> </A>

Link to Target <A HREF="URL#***"> </A><A HREF="#***"> </A>

Low-Res Proxy <IMG SRC="URL" LOWSRC="URL">

Map <MAP NAME="***"> </MAP>

Object Size <EMBED SRC="URL" WIDTH="?" HEIGHT="?">

Runaround Space <IMG SRC="URL" HSPACE=? VSPACE=?>

<AREA SHAPE="RECT" COORDS=",,," HREF="URL"|


Section
NOHREF>

Target Window <A HREF="URL" TARGET="***"> </A>

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 Hasil

<table border="1">
<tr>
<th>Name</th> <th>Phone</th>
</tr>
<tr>
<td>Dick</td> <td>555-1234</td>
</tr>
<tr>
<td>Jane</td> <td>555-2345</td>
</tr>
<tr>
<td>Sally</td> <td>555-3456</td>
</tr>
</table>

Tabel tag untuk Tables


Define Table <TABLE> </TABLE>

Table Border <TABLE BORDER> </TABLE>

Table Border <TABLE BORDER=?> </TABLE>

Cell Spacing <TABLE CELLSPACING=?>

Cell Padding <TABLE CELLPADDING=?>

60
Modul Perkuliahan Pemrograman Web

Table Width <TABLE WIDTH=?>

Table Width (%) <TABLE WIDTH=%>

Table Caption <CAPTION> </CAPTION>

Table Alignment <CAPTION ALIGN=TOP|BOTTOM>

Table Row <TR> </TR>

Table Header <TH> </TH>

<TD ALIGN=LEFT|RIGHT|CENTER
Alignment
VALIGN=TOP|MIDDLE|BOTTOM>

No Line Breaks <TD >

Columns to Span <TD COLSPAN=?>

Rows to Span <TD ROWSPAN=?>

Desired Width <TD WIDTH=?>

Width Percent <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 rows atau
columns
<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 <FRAMESET COLS=,,,> </FRAMESET>

Column Widths <FRAMESET COLS=*> </FRAMESET>

Define Frame <FRAME>

Display Document <FRAME SRC="URL">

Frame Document <FRAMESET> </FRAMESET>

Frame Name <FRAME NAME="***"|_blank|_self|_parent|_top>

Margin Width <FRAME MARGINWIDTH=?>

Margin Height <FRAME MARGINHEIGHT=?>

Not Resizeable <FRAME NORESIZE>

Scrollbar <FRAME SCROLLING="YES|NO|AUTO">

Row Heights <FRAMESET ROWS=,,,> </FRAMESET>

Row Heights <FRAMESET ROWS=*> </FRAMESET>

Unframed Content <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 submit button:
<input type="submit" name="Submit" value="Submit">
A reset button:
<input type="reset" name="Submit2" value="Reset">
• A plain button:
<input type="button" name="Submit3" value="Push Me">

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 Hasil
<html>
<head>
<title>Get Identity</title>
<meta 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 <INPUT CHECKED>

Default Option <OPTION SELECTED>

<FORM ACTION="URL" METHOD=GET|POST>


Define Form
</FORM>

Field Name <INPUT NAME="***">

Field Size <INPUT SIZE=?>

Field Value <INPUT VALUE="***">

<FORM ENCTYPE="multipart/form-
File Upload
data></FORM>

Input Box Size <TEXTAREA ROWS=? COLS=?> </TEXTAREA>

<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|
Input Field RADIO
|IMAGE|HIDDEN|SUBMIT|RESET">

Max Length <INPUT MAXLENGTH=?>

Multiple Choice <SELECT MULTIPLE>

68
Modul Perkuliahan Pemrograman Web

Name of Box <TEXTAREA NAME="***"> </TEXTAREA>

Name of List <SELECT NAME="***"> </SELECT>

Option <OPTION>

Selection List <SELECT> </SELECT>

<TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL>
Wrap Text
</TEXTAREA>

# of Options <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” berarti gambar


tersebut terletak dua folder di atas
dokumen html.

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 di-
upload 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 contoh : http://localhost/www.stmik-
subang.com

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" target="isi"><font


color="red"> T.Informatika?</font></a><br>

<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/stmik-
subang.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" target="isi"><font


color="red"> T.Informatika?</font></a><br>

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

<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="../stmik-


subang.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. Bahasa pemrograman untuk desain web


b. Bahasa pengkodean
c. Bahasa pemrograman untuk berbagai aplikasi
d. Merupakan editor desain aplikasi berbasis web
e. Merupakan browser

2 Yang termasuk pada rentetan sejarah HTML sebagai berikut, kecuali :

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


b. Musim panas tahun 1991: spesifikasi HTML di rilis pada Internet
c. September 1995: HTML 2.0 diterima sebagai standar - (RFC 1866)
d. 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

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

Tampilan pada browser diatas memiliki kode HTML sebagai berikut :

a. <ol> <li> Web Desain. <li> Pemrograman Web .</ul>


b. <el> <li> Web Desain. <li> Pemrograman Web .</el>
c. <al> <li> Web Desain. <li> Pemrograman Web .</al>
d. <ol> <li> Web Desain. <li> Pemrograman Web .</ol>
e. <ul> <li> Web Desain. <li> 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>

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 sama dengan 4
dan pada tabel B sama dengan 3
b. Rowspan pada tabel A untuk kolom yang berisi nilai 1 sama dengan
tiga dan pada tabel B sama dengan 4
c. Colspan pada tabel A untuk kolom yang berisi nilai 2 sama dengan 2
dan colspan pada tabel B sama dengan 2
d. Colspan pada tabel A untuk kolom yang berisi nilai 2 sama dengan 3
dan colspan pada tabel B sama dengan 3
e. Colspan pada tabel A untuk kolom yang berisi nilai 2 sama dengan 2
dan colspan pada tabel B sama dengan 3

8 Perhatikan tampilan berikut pada browser:

107
Modul Perkuliahan Pemrograman Web

Tampilan pada browser berikut memiliki kode HTML sebagai berikut:

108
Modul Perkuliahan Pemrograman Web

109
Modul Perkuliahan Pemrograman Web

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 Sehingga posisi kursor
datang ..... 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 , maka
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

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 kursor berada di


dalam content,

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. Pilih Text > CSS Styles > Cdit Style Sheet


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

153
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. Menuliskan
langsung ke sebuah halaman HTML (Embeded Sheet).

Jika kita hanya ingin menggunakan sebuah style ke dalam sebuah halaman HTML dan
tidak ingin berpengaruh ke halaman HTML lainnya, kita tuliskan

langsung style yang kita pakai ke halaman yang bersangkutan. Contohnya adalah sama
dengan pada contoh pertama.

Berikut ini adalah file HTML yang kita pakai :

<!DOCTYPE HTML PUBLIC "-//W3C!/DTD HTML 4.0//EN">


<HTML>
<HEAD>
<STYLE type="text/css">
p{font-family:Verdana, Arial,Helvetica;font-size: 12px ; color:
#000000}

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 akan lebih teratur.<br>
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

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. H1
b. <Body>
c. <P>
d. H1 dan <body>
e. <Body> dan <P>

2 <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 biru, sedangkan aku anak pintar juga
berwarna merah
b. aku anak pintar berwarna biru, dan aku anak pintar juga
berwarna biru juga
c. aku anak pintar berwarna merah, sedangkan aku anak pintar
juga berwarna biru
d. aku anak pintar berwarna merah, dan aku anak pintar juga
berwarna merah
e. aku anak pintar berwarna biru, sedangkan aku anak pintar juga
berwarna merah dan biru

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

.unggas{color:red}

.mamalia{color:blue}

</style>

</HEAD>

<BODY>

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 :


.
1 <HEAD>
<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. :visited
2. :hover
3. :active
4. :focus

Keterangan : menu pada tugas pertemuan VII

170
Modul Perkuliahan Pemrograman Web

171

You might also like