Pemograman Web 1 X

PEMROGRAMAN WEB SEMESTER 1
HALAMAN SAMPUL
ii | P a g e
KATA PENGANTAR
Puji syukur kami panjatkan kepada Tuhan yang Maha Esa atas tersusunnya buku
teks ini, dengan harapan dapat digunakan sebagai buku teks untuk Peserta Didik
Sekolah Menengah Kejuruan (SMK) Bidang Studi Keahlian Teknologi Informasi
dan Komunikasi, Program Keahlian Teknik Komputer dan Informatika.
Penerapan kurikulum 2013 mengacu pada paradigma belajar kurikulum abad 21

menyebabkan terjadinya perubahan, yakni dari pengajaran (teaching) menjadi
BELAJAR (learning), dari pembelajaran yang berpusat kepada guru (teachers-
centered) menjadi pembelajaran yang berpusat kepada peserta didik (student-
centered), dari pembelajaran pasif (pasive learning) ke cara belajar peserta didik
aktif (active learning-CBSA) atau Student Active Learning-SAL.
Buku teks Pemrograman Web ini disusun berdasarkan tuntutan paradigma

pengajaran dan pembelajaran kurikulum 2013 diselaraskan berdasarkan
pendekatan model pembelajaran yang sesuai dengan kebutuhan belajar
kurikulum abad 21, yaitu pendekatan model pembelajaran berbasis peningkatan
keterampilan proses sains.
Penyajian buku teks untuk Mata Pelajaran Pemrograman Web ini disusun
dengan tujuan agar supaya peserta didik dapat melakukan proses pencarian
pengetahuan berkenaan dengan materi pelajaran melalui berbagai aktivitas
proses sains sebagaimana dilakukan oleh para ilmuwan dalam melakukan
eksperimen ilmiah (penerapan scientifik), dengan demikian peserta didik
diarahkan untuk menemukan sendiri berbagai fakta, membangun konsep, dan
nilai-nilai baru secara mandiri.
Kementerian Pendidikan dan Kebudayaan, Direktorat Pembinaan Sekolah

Menengah Kejuruan, dan Direktorat Jenderal Peningkatan Mutu Pendidik dan
Tenaga Kependidikan menyampaikan terima kasih, sekaligus saran kritik demi
kesempurnaan buku teks ini dan penghargaan kepada semua pihak yang telah
berperan serta dalam membantu terselesaikannya buku teks siswa untuk Mata
Pelajaran Pemrograman Web kelas X /Semester 1 Sekolah Menengah Kejuruan
(SMK).
Jakarta, 12 Desember 2013

Menteri Pendidikan dan Kebudayaan
Prof. Dr. Mohammad Nuh, DEA
GLOSARIUM
CERN adalah Organisation Europeenne pour la Recherche Nucleaire, Pusat
Penelitian Fisika Partikel Eropa.
Domain adalah Pola penamaan host di Internet.
HTML adalah Hyper Text Markup Language, sebuah bahasa markup yang
digunakan untuk membuat sebuah halaman web.
HTTP adalah Hyper Text Transfer Protocol, tata cara komunikasi untuk
mentransfer Web dari server ke komputer lain.
ISP adalah Interrnet Service Provider, perusahaan pemberi jasa akses Internet.
Server adalah komputer yang memberikan layanan di jaringan.
Tag HTML adalah kata kunci (nama tag) yang dikelilingi oleh kurung sudut
seperti <html>
W3C adalah World Wide Web Consortium organisasi yang mengembangkan

teknologi web beralamat di www.w3c.org.
Web browser adalah sebuah perangkat lunak aplikasi yang

memungkinkan pengguna mengakses Web atau Server di jaringan.
WWW; World Wide Web sering di singkat Web.

BAB 1 PENDAHULUAN
A.Diskripsi
Pemrograman web 1 merupakan salah satu mata pelajaran wajib dasar pada
dasar program keahlian Teknik Komputer dan Informatika (TKI). Berdasarkan
struktur kurikulum mata pelajaran Pemrograman web 1 disampaikan dikelas X
semester 1 yang disampaikan dalam waktu 4 jam pelajaran per minggu.
Pada semester 1 ini materi pemrograman web ditekankan pada pengenalan
teknologi web, profesi yang berhubungan dengan dunia web sehingga peserta
didik mendapatkan gambaran akan dunia kerja nantinya. Perintah-perintah dari
HTML untuk pembuatan halaman web juga merupakan materi pokok pada
pemrograman web 1. Dikenalkan juga pengintegrasian komponen multimedia
kedalam teknologi web sehingga dapat menyajikan sebuah halaman web sesuai
dengan kaidah/aturan yang berlaku.
B.Prasyarat
Untuk kelancaran pencapaian kompetensi dalam mata pelajaran
pemrograman web ini dibutuhkan beberapa peryaratan baik pengetahuan
maupun ketrampilan dasar. Persyaratan tersebut antara lain ialah: peserta didik
mempunyai kompetensi dalam hal pemanfaatan teknologi informasi, seperti
mengoperasikan hardware komputer dan mengoperasikan perangkat lunak
aplikasi. Perangkat lunak aplikasi tersebut antar lain ialah pengolah data untuk
menganalisis data hasil eksperimen, pengolah kata untuk membuat laporan dan
aplikasi presentasi untuk mengkomunikasikan dan mempresentasikan hasil
laporan.
C.Petunjuk
Buku pedoman siswa ini disusun berdasarkan kurikulum 2013 yang
mempunyai ciri khas penggunaan metode scientific. Buku ini terdiri dari dua bab
yaitu bab satu pendahuluan dan bab dua pembelajaran. Dalam bab pendahuluan
beberapa yang harus dipelajari peserta didik adalah diskripsi mata pelajaran
yang berisi informasi umum, rasionalisasi dan penggunaan metode scientifik.
Selanjutnya pengetahuan tentang persyaratan, tujuan yang diharapkan,
kompetensi inti dan dasar yang akan dicapai serta test kemampuan awal.
Bab dua menuntun peserta didik untuk memahami deskripsi umum tentang
topik yang akan dipelajari dan rincian kegiatan belajar sesuai dengan kompetensi
dan tujuan yang akan dicapai. Setiap kegiatan belajar terdiri dari tujuan dan
uraian materi topik pembelajaran, tugas serta test formatif. Uraian pembelajaran
berisi tentang diskripsi pemahaman topik materi untuk memenuhi kompetensi
pengetahuan. Uraian pembelajaran juga menjelaskan deskripsi unjuk kerja atau
langkah-langkah logis untuk memenuhi kompetensi skill.
Tugas yang harus dikerjakan oleh peserta didik dapat berupa tugas praktek,
eksperimen atau pendalaman materi pembelajaran. Setiap tugas yang dilakukan
melalui beberapa tahapan scientifik yaitu : 1) melakukan pengamatan setiap
tahapan unjuk kerja 2) melakukan praktek sesuai dengan unjuk kerja 3)
mengumpulkan data yang dihasilkan setiap tahapan 4) menganalisa hasil data
menggunakan analisa diskriptif 5) mengasosiasikan beberapa pengetahuan
dalam uraian materi pembelajaran untuk membentuk suatu kesimpulan 6)
mengkomunikasikan hasil dengan membuat laporan portofolio. Laporan tersebut
merupakan tagihan yang akan dijadikan sebagai salah satu referensi penilaaian
D.Tujuan Akhir
Setelah mempelajari uraian materi dalam bab pembelajaran dan kegiatan
belajar diharapkan peserta didik dapat memiliki kompetensi sikap, pengetahuan
dan ketrampilan yang berkaitan dengan materi:
1. Teknologi aplikasi web
2. Format teks halaman web
3. Multimedia pada halaman web
4. Hyperlink web
5. Format halaman web
E.Kompetensi inti dan kompetensi dasar

Kompetensi Inti 1 : Menghayati dan mengamalkan ajaran agama yang dianutnya.
Kompetensi Dasar :
1.1. Memahami nilai-nilai keimanan dengan menyadari hubungan keteraturan
dan kompleksitas alam dan jagad raya terhadap kebesaran Tuhan yang
menciptakannya
1.2. Mendeskripsikan kebesaran Tuhan yang menciptakan berbagai sumber
energi di alam
1.3. Mengamalkan nilai-nilai keimanan sesuai dengan ajaran agama dalam
kehidupan sehari-hari.
Kompetensi Inti 2: Menghayati dan Mengamalkan perilaku jujur, disiplin,
tanggung jawab, peduli (gotong royong, kerjasama, toleran, damai), santun,
responsif dan proaktif dan menunjukan sikap sebagai bagian dari solusi atas
berbagai permasalahan dalam berinteraksi secara efektif dengan lingkungan
sosial dan alam serta dalam menempatkan diri sebagai cerminan bangsa
dalam menempatkan diri sebagai cerminan bangsa dalam pergaulan dunia.
Kompetensi Dasar:
2.1. Menunjukkan perilaku ilmiah (memiliki rasa ingin tahu; objektif; jujur; teliti;
cermat; tekun; hati-hati; bertanggung jawab; terbuka; kritis; kreatif;
inovatif dan peduli lingkungan) dalam aktivitas sehari-hari sebagai wujud
implementasi sikap dalam melakukan percobaan dan berdiskusi
2.2. Menghargai kerja individu dan kelompok dalam aktivitas sehari-hari
sebagai wujud implementasi melaksanakan percobaan dan melaporkan
hasil percobaan.
Kompetensi Inti 3: Memahami,menerapkan dan menganalisis pengetahuan
faktual, konseptual dan prosedural berdasarkan rasa ingintahunya tentang
ilmu pengetahuan, teknologi, seni, budaya, dan humaniora dalam wawasan
kemanusiaan, kebangsaan, kenegaraan, dan peradaban terkait penyebab
fenomena dan kejadian dalam bidang kerja yang spesifik untuk memecahkan
masalah.
Kompetensi Dasar:
3.1.Memahami konsep teknologi aplikasi web
3.2.Memahami format teks pada halaman web
3.3.Memahami format tabel pada halaman web
3.4.Memahami tampilan format multimedia
3.5.Memahami format kaitan pada halaman web
3.6.Memahami format formulir pada halaman web
Kompetensi Inti 4: Mengolah, menalar, dan menyaji dalam ranah konkret dan
ranah abstrak terkait dengan pengembangan dari yang dipelajarinya di
sekolah secara mandiri, dan mampu melaksanakan tugas spesifik dibawah
pengawasan langsung.
Kompetensi Dasar:
4.1.Menyajikan pelbagai teknologi pengembangan aplikasi web
4.2.Menyajikan teks dalam format tertentu pada halaman web
4.3.Menyajikan tabel pada halaman web
4.4.Menyajikan tampilan format multimedia pada halaman web
4.5.Menyajikan format kaitan pada halaman web
4.6.Menyajikan formulir pada halaman web
4.7.Menyajikan style tertentu pada halaman web
BAB 2 PEMBELAJARAN
A.Diskripsi
Pemrograman web 1 merupakan salah satu mata pelajaran wajib dasar pada
dasar program keahlian Teknik Komputer dan Informatika (TKI). Berdasarkan
struktur kurikulum mata pelajaran Pemrograman web 1 disampaikan dikelas X
semester 1 yang disampaikan dalam waktu 4 jam pelajaran per minggu.
Pada semester 1 ini materi pemrograman web ditekankan pada pengenalan
teknologi web, profesi yang berhubungan dengan dunia web sehingga peserta
didik mendapatkan gambaran akan dunia kerja nantinya. Perintah-perintah dari
HTML untuk pembuatan halaman web juga merupakan materi pokok pada
pemrograman web 1. Dikenalkan juga pengintegrasian komponen multimedia
kedalam teknologi web sehingga dapat menyajikan sebuah halaman web sesuai
dengan kaidah/aturan yang berlaku.
B. Kegiatan Belajar
1. Kegiatan Belajar 1: Profesi dalam Pengembangan Aplikasi Web
a. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar 1 ini Peserta Didik diharapkan dapat :
Memahami profesi dalam bidang Teknologi Informasi
Memahami profesi dalam pengembangan aplikasi web
Memahami sejarah web
Memahami cara kerja web
Menyajikan cara kerja web
b. Uraian Materi
Profesi dalam bidang Teknologi Informasi
Saat ini ada banyak aneka profesi di bidang Teknologi Informasi atau TI.
Perkembangan dunia TI telah melahirkan bidang baru yang tidak terlepas dari
tujuan utamanya yaitu untuk semakin memudahkan manusia dalam melakukan
segala aktifitas. Munculnya bidang TI yang baru juga memunculkan profesi di
bidang TI yang semakin menjurus sesuai dengan keahlian masing-masing.
Secara umum, pekerjaan di bidang teknologi informasi setidaknya dapat
dikelompokan sesuai bidangnya, misalnya.
a. Kelompok pertama, adalah mereka yang bergelut di dunia perangkat lunak

(software), baik mereka yang merancang sistem operasi, database maupun
sistem aplikasi.
Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti :

*Sistem analis, merupakan orang yang bertugas menganalisa system yang akan
diimplementasikan, mulai dari menganalisa system yang ada, kelebihan dan
kekurangannya, sampai studi kelayakan dan desain system yang akan
dikembangkan
Programer, merupakan orang yang bertugas mengimplementasikan rancangan
system analis, yaitu membuat program ( baik aplikasi maupun system operasi )
sesuai system yang dianalisa sebelumnya.
Web designer, merupakan orang yang melakukan kegiatan perencanaan,
termasuk studi kelayakan, analisis dan desain terhadap suatu proyek pembuatan
aplikasi berbasis web.
Web programmer, merupakan orang yang bertugas mengimplementasikan
rancangan web designer, yaitu membuat program berbasis web sesuai desain
yang telah dirancang sebelumnya.
b. Kelompok kedua, adalah mereka yang bergelut di bidang perangkat keras

(hardware).

Technical engineer, sering juga disebut teknisi, yaitu orang yang berkecimpung
dalam bidang teknik, baik mengenai pemeliharaan maupun perbaikan perangkat
system computer.
Networking engineer, adalah orang yang berkecimpung dalam bidang teknis
jaringan computer dari maintenance sampai pada troubleshooting-nya.
c. Kelompok ketiga, adalah mereka yang berkecimpung dalam operasional

system informasi.

*EDP Operator, adalah orang yang bertugas mengoperasikan program-program
yang berhubungan dengan electronic data processing dalam lingkungan sebuah
perusahaan atau organisasi lainnya.
*System Administrator, merupakan orang yang bertugas melakukan administrasi
terhadap system, memiliki kewenangan menggunakan hak akses terhadap
system, serta hal-hal lain yang berhubungan dengan pengaturan operasional
sebuah system.
2) Profesi dalam pengembangan aplikasi web

Ada banyak ragam dalam profesi di dalam bidang Teknologi Informasi,
bagaimana dengan profesi yang berada dalam lingkungan pengembangan
aplikasi web? Berikut ini adalah profesi-profesi yang langsung terkait dalam
pengembangan aplikasi web, diantaranya :
Web Designer
Seorang desainer Web adalah orang yang bertanggung jawab untuk menentukan
tampilan sebuah website. Tugasnya adalah pendisainan tampilan situs (web)
mulai dari pengolahan gambar, tata letak, warna, dan semua aspek visual situs.
Fokus utama mereka adalah tampilan / layout dari web. Mereka lebih konsen
dengan bagaimana halaman terlihat dan apakah berfungsi sempurna ketika
sudah diberikan bahasa pemrograman. Didalam pendandanan suatu situs
seorang Web Designer harus menguasai :
HTML, DHTML
Pengolah Gambar
Animasi, Movie (Film)
Web Programmer
Web Programmer bertugas dalam melakukan pengcodingan atau pemograman
sebuah website agar dinamis. dimana agar sebuah web tersebut dapat telihat
mudah bagi seorang web admin.
Jika situs yang akan dibuat mempunya fasilitas interaksi antara pengunjung dan
situs misalnya menyangkut dengan transaksi, input output data dan database
maka seorang Web Programmer yang akan mengerjakannya dengan membuat
aplikasi-aplikasi yang berkerja diatas situs (web). Penguasaan yang biasanya
harus dikuasai pada umumnya oleh Web Programmer :
CGI Perl, PHP, MySQL (Unix base)
ASP (NT base)
Java Script dan Applet
Web Administrator
Tugasnya adalah untuk memaintenance suatu server, mengerti akan Sistem
Operasi Server, baik itu mulai dari instalasi sampai kepada masalah
(troubleshooting), biasanya seorang Web Administrator harus menguasai :
OS Unix (LInux, FreeBSD, dll)
OS NT
Jaringan (LAN, WAN, Intranet)
Keamanan Server
Web Master
Seoarang Web Master adalah seorang yang mengerti akan kesemua hal mulai
dari disain, program dan keamanan server namun tidak terlalu turut mencampuri
ke masing-masing divisi, cukup dengan mempertanggun jawabkan atas jalannya
suatu situs (web). Penguasaan yang harus dimiliki :
HTML, DHTML
CGI Perl, PHP, MySQL, ASP, Java
Penguasaan bermacam OS (Operating System)
Keamanan Server
Jaringan (LAN, WAN, Intranet)
Web Developer
Kegiatan diatas secara keseluruhan dinamakan suatu team yang dinamakan
Web Developer.
Web developer memberi bantuan seperti konsultasi web, konsep web yang akan
di buat, membangun sebuat website..
Dari semua jenis pekerjaan diatas tidak semua adalah sebuah profesi karena
tidak semua orang ahli dalam bidang tersebut. Yang bisa dikatakan sebagai
sebuah profesi yaitu jika seseorang sudah ahli di dalam bidang pekerjaan
tersebut. Jika di pekerjaan diatas yang bisa dikatakan sebagai sebuah profesi
adalah web designer, web programmer, web administrator, web master dan web
developer karena dalam bidang tersebut seseorang memang sudah memiliki
keahlian di dalamnya.
Standart Web
HTML (Hypertext Markup Language) merupakan bahasa standar web yang didefinisikan
dan dikelola penggunaannya oleh W3C (World Wide Web Consurtium). HTML dibuat dan
dikembangkan oleh Tim Berners-Lee. Selanjutnya , bahasa tersebut dipopulerkan oleh
browser Mosaic. Selama tahun 90-an telah muncul berbagai versi HTML dengan
berbagai macam fiturnya. Versi HTML yang ada tersebut antara lain:
Versi 1.0
Merupakan versi pertama setelah lahirnya HTML dan mempunyai kemampuan
seperti untuk heading, paragraph, hypertext, list, cetak tebal, dan cetak miring
pada teks. Selain itu juga dukungan peletakan image pada dokumen dengan
tidak memperbolehkan peletakan teks di sekelilingnya (wrapping).
Versi 2.0
Diliris pada tanggal 14 Januari 1996 dengan beberapa kemampuan tambahan
seperti penambahan form. Hal ini menjadi pionir untuk membuat sebuah web
yang interaktif.
Versi 3.0
Diliris pada tanggal 18 Desember 1997, yang dikenal dengan HTML+. Versi ini
memiliki beberapa vitur tambahan seperti fitur table dalam paragraph.
Versi 3.2
Diliris pada buan Mei 1998, merupakan versi terbaru penyempurnaan dari versi
3.0.
Versi 4.0
diliris pada tanggal 24 Desember 1999 dengan penambahan beberapa fitur

seperti adanya link, imagemaps, image, dan lain-lain.
Versi 5.0
Diliris pada tahun 2009 yang menjadi standar baru untuk HTML, XHTML, dan
DOM HTML. HTML5 ini merupakan proyek kerja sama antara W3C (World Wide
Web Consurtium) dan WHATG (Web Hypertext Application Technology Working
Group).
Spesifikasi HTML5 belum final saat ini, tetapi diyakini oleh banyak orang
akan menjadi standar yang diterima di masa depan. Beberapa browser (lihat
Tabel 1.1) sudah mendukung HTML5.
Tabel 1.1 Browser yang mendukung HTML5
Browser Keterangan
Chrome Mulai versi 1.0
Firefox Mulai versi 1.5
Internet Explorer Mulai versi 8
Opera Mulai versi 9.0
Safari Mulai versi 1.3
Pada HTML5, dalam menuliskan tag dan atribut dengan huruf kecil
tidak ada lagi. Diberi kebebasan untuk menggunakan huruf kecil, huruf
capital, atau kombinasinya. Bahkan, nilai suatu atribut akan diberi
tanda petik atau tidak sama saja. Browser tidak lagi mempedulikan hal-
hal seperti itu.
Cara kerja web

Sebuah web browser adalah program perangkat lunak yang gunakan untuk
mengakses World Wide Web dari Internet. Browser pertama, yang disebut
NCSA Mosaic, dikembangkan di Pusat Nasional untuk Aplikasi Super
Komputer di awal 1990-an. Yang mudah digunakan, cukup klak-klik sehingga
membantu mempopulerkan Web.
Meskipun banyak browser yang berbeda yang tersedia, Microsoft Internet
Explorer dan Mozilla Firefox yang jauh yang paling populer. (Banyak
pengguna Mac lebih memilih browser Safar) Persaingan untuk mendominasi
pasar telah membawa perbaikan terus-menerus untuk perangkat lunak.
(keduanya didasarkan pada NCSA Mosaic)
dapat mendownload Internet Explorer dan Firefox secara gratis dari situs web
masing-masing perusahaan. Jika sudah memiliki satu browser, dapat menguji
yang lain. Juga mencatat bahwa ada sedikit perbedaan antara versi Windows
dan Macintosh.
c. Rangkuman
Secara umum, pekerjaan di bidang teknologi informasi setidaknya dapat
dikelompokan sesuai bidangnya, misalnya.
Kelompok pertama, adalah mereka yang bergelut di dunia perangkat lunak
(software), baik mereka yang merancang system operasi, database
maupun system aplikasi.
Kelompok kedua, adalah mereka yang bergelut di bidang perangkat keras
(hardware).
Kelompok ketiga, adalah mereka yang berkecimpung dalam operasional
system informasi.
Profesi-profesi yang langsung terkait dalam pengembangan aplikasi web,

diantaranya : Web Designer, Web Programmer, Web Administrator, Web
Master, Web Developer
Kegiatan Belajar 2: Alur dan Perangkat Pengembangan Aplikasi
Web
Memahami Alur Pengembangan Aplikasi Web
Menyajikan Perangkat Pengembangan Aplikasi Web b.
Uraian Materi
Alur Pengembangan Aplikasi Web
Berdasarkan persepsi dari beberapa pengembang perangkat lunak dan ahli-ahli
dalam bidang rekayasa perangkat lunak (software engineering professional),
Pengembangan Aplikasi Web tidaklah sama dengan rekayasa perangkat lunak
walaupun keduanya melibatkan pemrograman dan pengembangan perangkat
lunak.
Walaupun banyak mengadopsi prinsip-prinsip rekayasa perangkat lunak,
Pengembangan Aplikasi Web memiliki banyak pendekatan, metoda, alat bantu,
teknik dan panduan yang memenuhi persyaratan pembuatan sistem berbasis
web.
Pengembangan sistem berbasis web berbeda dengan pengembangan perangkat
lunak konvensional, dimana pengembangan sistem berbasis web lebih banyak
menghadapi tantangan. Pengembangan Aplikasi Web adalah gabungan dari
print publishing dan pengambangan perangkat lunak, diantara marketing dan
perhitungan dan diantara seni dan teknologi.
Alternatif model dari Pengembangan Aplikasi Web adalah sebagai berikut :
Formulasi (formulation)
Kegiatan yang berfungsi untuk merumuskan tujuan dan ukuran dari aplikasi
berbasis web serta menentukan batasannya sistem.
Tujuan yang ingin dicapai bisa dibedakan menjadi dua kategori, yaitu :
1. Tujuan yang bersifat informatif
Menyediakan suatu informasi tertentu kepada pengguna, berupa teks, grafik,
audio, dan video.
2. Tujuan yang bersifat fungsional
Kemampuan untuk melakukan suatu fungsi yang dibutuhkan pengguna, misal

dengan menggunakan aplikasi tersebut seorang guru dapat memperoleh nilai
akhir dan statistik nilai guru dari data-data ujian, tugas, kuis yang ia input ke
dalam aplikasi.
Perencanaan (planning)
Kegiatan yang digunakan untuk menghitung estimasi biaya proyek pembuatan

aplikasi berbasis web ini, estimasi jumlah pengembang, estimasi waktu
pengembangan, evaluasi resiko pengembangan proyek, dan mendefinisikan
jadwal pengembangan untuk versi selanjutnya (jika diperlukan).
Analisis (analysis)
Kegiatan untuk menentukan persyaratan-persyaratan teknik dan mengidentifikasi

informasi yang akan ditampilkan pada aplikasi berbasis web. Analisis yang
digunakan pada rekayasa web dilakukan dari empat sisi, yaitu :
1. Analisis isi informasi
Mengidentifikasi isi yang akan ditampilkan pada aplikasi berbasis web ini. Isi
informasi dapat berupa teks, grafik, audio, maupun video.
2. Analisis interaksi
Analisis yang menunjukkan hubungan antara web dengan pengguna.
3. Analisis fungsional
Analisis tentang proses bagaimana aplikasi berbasis web ini akan menampilkan
informasi kepada pengguna.
4. Analisis konfigurasi
Konfigurasi yang digunakan pada aplikasi berbasis web, internet, intranet, atau
extranet. Selain itu, analisis ini juga meliputi relasi database dengan web jika
diperlukan.
Rekayasa (engineering)
Terdapat dua pekerjaan yang dilakukan secara paralel, yaitu desain isi informasi
dan desain arsitektur web.
Pada saat tahap desain, ada beberapa hal yang perlu dilakukan :
Pembuatan Diagram Wireframe (Gambar Rangka), tujuan dari diagram

gambar rangka adalah untuk menunjukkan bagaimana lay out halaman
web dan menunjukkan di mana fungsi dan konten seperti navigasi, kotak
pencarian, elemen bentuk dan sebagainya, tanpa desain grafis. Berikut ini
contohnya :
Gambar. 2.1 Diagram Wireframe sebuah halaman web.
Diagram Situs, Sebuah diagram situs menunjukkan struktur situs secara

keseluruhan dan bagaimana halaman individual berhubungan satu sama
lain. Gambar 2.2 menunjukkan diagram situs yang sangat sederhana
Gambar 2.2. Diagram Situs
Storyboard dan diagram alir pengguna, Storyboard ini bertujuan untuk

menunjukkan langkah-langkah yang diperlukan untuk menyelesaikan
tugas-tugas, opsi yang mungkin, dan juga memperkenalkan beberapa
standar jenis halaman. Gambar 1-3 menunjukkan storyboard sederhana
Gambar. 2.3 Desain Visual (Sumber: www.idwebhost.com, www.idebagus.com)
Implementasi (page generation) & pengujian (testing)
Suatu kegiatan pengembangan untuk mewujudkan desain menjadi suatu web

site. Teknologi yang digunakan tergantung dengan kebutuhan yang telah
dirumuskan pada tahap analisis.
Dalam tahap pengembangan ini, meliputi kegiatan:
Authoring, adalah istilah yang digunakan untuk proses

mempersiapkan konten untuk nantinya diunggah di Web, atau lebih
khusus, menandai konten dengan tag HTML yang menggambarkan
isi dan fungsinya.
Styling, dalam development web, penampilan halaman dalam browser
dikendalikan oleh aturan style yang ditulis dalam CSS ( Cascading
Style Sheets )
Scripting dan pemrograman, ada bahasa pemrograman web terkait
diantaranya PHP, Ruby, Python, dan ASP.NET, yang berjalan pada
server dan mengolah data dan informasi sebelum dikirim ke
browser pengguna.
Pengujian dilakukan setelah implementasi selesai dilaksanakan. Pengujian
meliputi beberapa parameter yang akan menentukan standar aplikasi berbasis
web yang telah dibuat. Tahap pengujian adalah suatu proses untuk menguji
aplikasi berbasis web yang telah selesai dibuat. Hal ini bertujuan untuk
menemukan kesalahan dan kemudian memperbaikinya. Pengembang suatu
aplikasi berbasis web mendapat tantangan besar untuk melakukan pengujian
karena karakter aplikasi ini yang beroperasi pada jaringan dengan berbagai
macam pengguna, berbagai macam sistem operasi, perangkat keras, browser,
protokol komunikasi, dll.
Ada beberapa pendekatan yang digunakan untuk melakukan pengujian, yaitu :

1. Pengujian fungsional dan operasional (fungsional and operational testing)
Bertujuan untuk menguji masukan dan keluaran dari aplikasi ini. Hasil keluaran
aplikasi bergantung dari teknologi yang digunakan, baik itu
bahasa pemrograman maupun bahasa skrip yang digunakan. Untuk menguji
code HTML dan CSS yang digunakan dapat menggunakan alat bantu W3C
HTML Validation Service di http://validator.w3.org/ dan W3C CSS Validation
Service di http://jigsaw.w3.org/css-validator/
2. Pengujian navigasi (navigation testing)
Hal ini digunakan untuk melihat kesesuaian antara desain navigasi dengan
navigasi yang ada di aplikasi. Navigasi berhubungan dengan link-link yang
terdapat didalam aplikasi.
Untuk menguji link dapat digunakan alat bantu W3C Link Checker Service di
http://validator.w3.org/checklink
3. Pengujian konfigurasi (configuration testing)
Pengujian ini dilakukan pada sistem operasi, browser, sistem perangkat keras
dan perangkat lunak pendukung. Pengujian ini dilakukan untuk menentukan
batas toleransi kebutuhan aplikasi akan perangkat lunak dan perangkat keras
pendukungnya.
32 | P a g e
Pengujian keamanan dan performansi (security and performance testing)

Pengujian ini dilakukan untuk melihat tingkat keamanan aplikasi dengan cara
menguji aspek-aspek yang dapat menimbulkan gangguan keamanan aplikasi
maupun server. Keamanan aplikasi sangat bergantung pada teknologi
pengembangan website, konfigurasi server yang digunakan dan kelakuan sistem.
Pengujian performansi dapat dilakukan bersamaan dengan pengujian keamanan
aplikasi, karena keamanan aplikasi berbasis web juga tergantung dari
performansi server dan aplikasi tersebut.
Evaluasi oleh konsumen (customer evaluation)
Suatu kegiatan akhir dari siklus proses rekayasa web, akan menentukan apakah
web yang telah selesai dibuat tersebut sesuai dengan yang mereka inginkan.
Apabila aplikasi berbasis web ini belum sesuai dengan kehendak mereka, maka
proses rekayasa web akan terus dilakukan dan dimulai lagi dari tahap formulasi
untuk versi berikutnya.
Perangkat pengembangan aplikasi web
Untuk perangkat pengembangan aplikasi web dapat dikelompokan menjadi

perangkat keras dan perangkat lunak.
Perangkat Keras
Untuk lingkungan pengembangan web yang nyaman, berikut ini peralatan yang
sebaiknya disediakan:
Komputer Utama, dengan operating system Macintosh, Windows, ataupun
Linux. Perusahaan pengembangan web profesional cenderung berbasis
Macintosh.
Memori tambahan. sebaiknya computer memiliki memori yang besar, karena
dalam pengembangan web cenderung kita akan membuka beberapa
aplikasi sekaligus.
Sebuah monitor besar. Meskipun bukan keharusan, monitor besar
memudahkan untuk desainer visual. Semakin besar monitor, semakin
banyak jendela dan panel kontrol dapat terbuka pada waktu yang sama.
Sebuah scanner dan / atau kamera digital. Jika mengantisipasi membuat
gambar dan tekstur sendiri, akan memerlukan beberapa alat untuk
membuat gambar.
Sebuah komputer kedua. Banyak web designer merasa berguna memiliki
komputer penguji yang menjalankan platform yang berbeda dari komputer
utama yang mereka gunakan untuk pengembangan. Karena browser
kerja yang berbeda pada Mac dan pada mesin Windows, itu penting untuk
menguji halaman web dalam sebanyak mungkin system operasi berbeda.
Perangkat mobile/smartphone. Saat ini banyak orang mengakses web
melalui smartphone/tablet, sehingga kita perlu menguji penampilan dan
kinerja situs web yang kita buat pada mobile browser pada smartphone
atau perangkat tablet. Namun saat ini banyak web emulator yang dapat
digunakan sebagai penguji web kita
Perangkat Lunak
Untuk perangkat lunak pengembangan web dapat dikelompokkan menjadi
beberapa, diantaranya :
Web page authoring

Ini adalah kelompok perangkat lunak seperti desktop publishing tetapi format
yang dihasilkan adalah halaman web. Aplikasi ini biasanya bersifat “WYSIWYG”
(What You See Is What You Get, dibaca “whizzy-wig”) yaitu apa yang kamu lihat,
itulah yang kamu dapatkan. Jadi aplikasi ini biasanya ketika membuat
tampilannya seperti yang akan dihasilkan.
Beberapa contoh aplikasi yang termasuk dalam kelompok ini :
Adobe Dreamweaver, aplikasi ini berbayar dan dibawah lisensi perusahaan
Adobe, aplikasi ini banyak digunakan oleh pengembang web. Memiliki
banyak fasilitas dan fiture.
Microsoft Expression Web (lisensi dari Windows). Bagian dari Microsoft’s
suite yang merupakan aplikasi perancangan professional.
Nvu (Linux, Windows, dan Mac OS X). Tidak ingin membayar untuk Editor
WYSIWYG? Nvu (diucapkan N-view, untuk "pandangan baru") adalah
sebuah aplikasi open source (sumber terbuka) yang cocok dengan

banyak fitur dalam Adobe Dreamweaver, dan dapat diunduh secara gratis
di nvu.com.
Editor
Ini adalah kelompok perangkat lunak yang kebalikan dari Adobe Dreamweaver
Microsoft Expression Web. Aplikasi ini tidak lagi “WYSIWYG” (What You See Is
What You Get”) tetapi lebih ke kode HTML. Beberapa contoh aplikasi yang
termasuk dalam kelompok ini :
TextPad (Windows saja). TextPad adalah plain-text sederhana dan murah
untuk editor kode di Windows.
Teks Sublime (Window, Mac, Linux). Editor teks ini terlihat dipreteli namun
memiliki banyak fungsi (seperti kode warna dan ikhtisar kode penuh) bagi
pengembang web.
Coda oleh Panic (hanya Macintosh). Pengguna Coda seperti alur kerja yang
visual, alat-alat manajemen file, dan built-in akses terminal.
Textmate oleh MacroMates (hanya Macintosh). Editor teks canggih ini
memiliki alat manajemen proyek dan antarmuka yang terintegrasi dengan
sistem operasi Mac. Hal ini semakin populer karena disesuaikan, kaya
fitur, dan murah.
BBEdit oleh Bare Bones Software (hanya Macintosh). Untuk pengembang
web banyak fitur shortcut yang besar telah membuat editor terkemuka
berbasis Mac
Aplikasi editing gambar dan menggambar

Untuk menambahkan gambar ke halaman web, akan perlu program editing
gambar. Berikut ini beberapa aplikasi yang cukup populer :
Adobe Photoshop. Photoshop dapat dikatakan sebagai standar industri
untuk penciptaan gambar baik dalam cetak maupun dunia web.
Adobe Photoshop Elements. Versi ini lebih ringan dari Photoshop
dirancang untuk mengedit foto dan manajemen, tetapi beberapa
penggemar menemukan bahwa ia memiliki semua alat yang diperlukan
untuk menempatkan gambar pada halaman web.
Adobe Illustrator. Karena desainer perlu membuat logo, ikon, dan ilustrasi di
berbagai ukuran dan resolusi, untuk itu semua aplikasi ini sangat
membantu. Aplikasi ini juga dapat dipadukan dengan Photoshop
Adobe Fireworks. Program grafis web ini menggabungkan editor foto

dengan alat untuk membuat ilustrasi berbasis vektor. Ia juga memiliki alat-
alat canggih untuk grafis web.
Corel Paint Shop Photo Pro (Windows saja). Editor gambar yang penuh
fitur ini populer di pengguna Windows, terutama karena harga yang
rendah.
Aplikasi Internet
Karena hasil akhir dari pengembangan halaman web digunakan di Internet, maka
diperlukan beberapa aplikasi untuk membuka halaman web, biasa disebut
“browser”. Berikut ini beberapa aplikasi browser yang cukup populer :
Windows:
Internet Explorer
Chrome
Firefox
Safari
Opera
Macintosh OS X:
Safari
Chrome
Firefox
Opera
Browser perangkat bergerak (mobile)
Mobile Safari (iOS)
Android Browser (Android) o
BlackBerry Browser (RIM)
o Nokia Series 40 dan Nokia Browser for Symbian
o Opera Mobile dan Mini (installed on any device)
o Internet Explorer Mobile (Windows Phone)
o Silk (Kindle Fire)
Aplikasi transfer file (FTP/File Transfer Protokol).
Sebuah aplikasi FTP memungkinkan untuk mengunggah dan mengunduh file

antara komputer kita dan komputer yang akan menjadi tempat halaman web/web
server. Beberapa aplikasi authoring web sebelumnya juga memiliki aplikasi FTP
yang terintegrasi langsung. Ada juga aplikasi FTP khusus, seperti yang
tercantum di bawah ini:
Windows
WS_FTP
CuteFTP
AceFTP
Filezilla
Macintosh
Transmit
Cyberduck
Fetch
Rangkuman
Alternatif model dari Pengembangan Aplikasi Web adalah sebagai berikut :
Formulasi, Perencanaan (planning), Analisis (analysis), Rekayasa
(engineering), Implementasi (page generation) & pengujian (testing),
Evaluasi oleh konsumen (customer evaluation).
Untuk perangkat pengembangan aplikasi web dapat dikelompokan menjadi
perangkat keras dan perangkat lunak. Perangkat lunak terdiri dari Web page
authoring, HTML Editor, Aplikasi editing gambar dan menggambar, Aplikasi
Internet, dan Aplikasi transfer file.
Tugas
Membuat Ringkasan Tampilan Web pada Aplikasi Browser
Sebelum mengerjakan tugas, buatlah kelompok terdiri atas 2-3 orang.
Peserta Didik mengamati dan memahami berbagai aplikasi web browser.
Masing-masing kelompok membuat ringkasannya. Kemudian secara
bergantian masing-masing kelompok mempresentasikan hasilnya didepan
kelas.
1.1. Carilah beberapa aplikasi browser di Internet dan installah.
1.2. Bukalah beberapa web tentang pariwisata, instansi pemerintah

atau lainnya dengan beberapa aplikasi browser.
1.3. Bandingkan tampilan website dari berbagai aplikasi browser
1.4. Presentasikan hasil ringkasan di depan kelas.
e. Tes Formatif
1.Pada saat tahap desain, ada kegiatan Pembuatan Diagram Wireframe dan
Diagram Situs, jelaskan kegiatan tersebut!
2.Dalam tahap pengembangan, ada kegiatan Authoring, Styling, dan Scripting &
Pemrograman, jelaskan kegiatan tersebut!
3.Sebutkan Perangkat keras yang diperlukan dalam pengembangan web!
4.Sebutkan contoh aplikasi yang termasuk dalam kelompok Web page Authoring!
5.Sebutkan contoh aplikasi yang termasuk dalam kelompok HTML Editor!
6.Sebutkan contoh aplikasi yang termasuk dalam kelompok Editing gambar!
3. Kegiatan Belajar 3 : Menyajikan format teks dalam dokumen web
Memahami Dasar-dasar HTML
Memahami Properti Dokumen Web
Menyajikan teks dalam format tertentu pada halaman dokumen web b.
Uraian Materi
1. Anatomi dokumen Web
Dasar-Dasar HTML
HTTP (Hypertext transfer protocol) merupakan protokol yang digunakan untuk

mentransfer data antara web server ke web browser. Protocol ini mentransfer
dokumen-dokumen web yang ditulis atau berformat HTML (Hypertext Markup
Language). Dikatakan markup language karena HTML berfungsi untuk
‘memperindah’ file teks biasa untuk ditampilkan pada program web browser hal
ini dilakukan dengan menambahkan elemen atu sering disebut sebagai tag-tag
pada file teks biasa tersebut.
Saat ini sudah dikenal HTML5 yang menawarkan berbagai fitur menarik yang
tidak didukung oleh HTML sebelumnya. Beberapa fitur yang tersedia pada
HTML5 antara lain sebagai berikut.
Canvas. Memungkinkan pembuatan gambar dalam kanvas.
Jadi, gambar tidak lagi diambil dari gambar utuh, melainkan
bisa disusun sendiri, bak menggunakan program Paint.
Header. Berguna untuk menyatakan suatu judul, yang bisa diisi
dengan elemen logo dan nama perusahaan.
Footer. Merupakan kebalikan dari header. Sebagai catatan kaki,
elemen ini berguna untuk menaruh informasi di bagian
bawah halaman web.
o Time. Elemen ini berguna untuk menyajikan informasi
tentang waktu.
o Audio. Memungkinkan penyajian player untuk memutar
suara.
Video. Memungkinkan player untuk memainkan film.
Secara prinsip, fitur pada HTML dapat dikelompokkan ke dalam :

Struktur halaman ;
Presentasi visual ;
Peranti penyaji gambar ;
Pendukung media ; dan Peningkatan
koneksi dengan JavaScript.
Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai

dengan symbol lebih besar (<) dan (>). Pasangan dari sebuah tag
ditandai dengan symbol garis miring (/). Misalnya pasangan dari tag
<contoh > adalah</contoh>. Dalam hal ini <contoh> kita sebut
sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-
atribut untuk mengatur elemen itu. Jadi misalnya elemen <contoh>
bila ditulis dengan atributnya adalah sebagai berikut:
<contoh atribut1=”nilai_atribut1”atribut2=”nilai_atribut2=”…>.
Dalam penulisan tag HTML tidaklah case sensitive artinya

pengguna huruf kecil ataupun capital tidaklah menjadi masalah.
Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar atau susunan file

sebagai berikut :
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Berisi tentang text, gambar,
atau apapun yang
tampil pada dokumen web.
</body>
</html>
Seperti terlihat, struktur file HTML diawali dengan sebuah tag<html>

dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah
bagian besar, yaitu yang diapit oleh tag<head>…</head> dan tag
<body>…</body>.
Bagian yang diapit oleh tag HEAD merupakan header dari halaman
HTML dan tidak ditampilkan pada browser. Bagian ini
berisi tag-tag header seperti <tittle>… </tittle> yang berpungsi
untuk mengeluarkan judul pada tittle bar window web browser.
Bagian kedua, yang diapit ole tag BODY merupakan bagian yang
akan ditampilkan pada halaman web browser nantinya. Pada
bagian ini anada akan menuliskan semua jenis informasi berupa
teks dengan bermacam format maupun gambar yang ingin
sampaikan pada pengguna nantinya.
Pengaturan Properti Dokumen
Properti document diatur melalui atribut-atribut yang terdapat dalam

elemen <body>. Sebagai contoh adalah pengaturan warna latar
belakng halaman, wana teks, warna link dan lain-lain.
Kode Warna
Dalam pengaturan warna menggunakan kode RGB yang mana

ditampilkan dalam nilai heksadesimal. Setiap bagian dua gigit kode
menunjukkan banyaknya intensitas dari kombinasi warna merah,
hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti
tidak ada warna merah dalam kobinasi warna berikut ini adalah
contoh kode warna :
Color hexadecimal Color Hexadecimal

White #FFFFFF Black #000000
Red #FF0000 Green #00FF00
Blue #0000FF Magenta #FF00FF
Cyan #00FFFF Yellow #FFFF00
Aquamarine #70DB93 Chocolate #5C3317
Violet #9F5F9F Brass #B5A642
Coper #B87333 Pink #FF6EC7
Atribut Elemen <body>
BACKGROUND = Lokasi dan nama file (latar belakng dokumen

image dokumrn)
BGCOLOR = Warna (warna latar belakng dokumen,
default putih)
TEXT = Warna (warna teks dokumen, default hitam)

Link = Warna (warna link dokumen, default biru)
Vlin = Warna (warna visited link dokumen default unggu)
Alin = Warna (warna aktif link dokumen, default merah)
Elemen Heading <h1>… <h6>
Tag heading berfungsi untuk memformat heading (judul dan sub-

judul) dari suatu halam web. Heading ini akan memperbesar ukuran
huruf unruk setiap jenis heading. Ad 7 buah heading yang dikenal di
HTML, yaitu dari <h1> sampai <h6>.
Elemen yang dihilangkan di HTML5

Berikut ini elemen HTML 4.01 yang dihilangkan di HTML5:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
Dokumen HTML5
Sebuah dokumen HTML5 seperti berikut ini, cukup ditulis dengan Text Editor
ataupun HTML Editor :
<html>
<head>
<title>Tes HTML5</title>
</head>
<body>
Selamat belajar HTML5
</body>
</html>
Berikut ini penjelasan dari dokumen HTML5 di atas :

Sebuah dokumen HTML5 diawali dengan <!DOCTYPE HTML>.
Tanda seperti <html> disebut tag. Sebuah tag seperti itu menyatakan
sebuah elemen dalam dokumen html.
Beberapa tag berpasangan. Sebagai contoh, <head> berpasangan dengan
</head>.
Namun, tidak semua tag berpasangan. Sebagai contoh, <br> tidak punya
pasangan. Khusus untuk tag seperti ini, tidak ada keharusan untuk
menyertakan tanda / sebelum >. Pada XHTML, tanda seperti / memang
diharuskan untuk ditulis.
Pasangan <html>..</html> menyatakan awal dokumen HTML.
Di dalam <html>..</html> terdapat pasangan <head>..</head> dan
<body>..</body>.
Pasangan <head>..</head> menyatakan bagian judul dokumen HTML. Isinya
paling tidak berupa pasangan <tittle>..</tittle>.
Pasangan <body>..</body> menyatakan bagian tubuh dokumen. Pada contoh,
Selamat belajar HTML5
muncul pada badan dokumen. Apabila dibuka di web browser tampilannya

sebagai berikut :
Gambar 3.1 Tampilan Dokumen HTML di Web Browser

Gambar 3.2 berikut ini memperlihatkan penjelasan secara visual
terhadap dokumen HTML di depan.
Gambar 3.2 Penjelasan dokumen HTML
Rangkuman
Dokumen-dokumen web ditulis dalam format HTML (Hypertext Markup
Language). Dikatakan markup language karena HTML berfungsi untuk
‘memperindah’ file teks biasa untuk ditampilkan pada program web
browser hal ini dilakukan dengan menambahkan elemen atu sering
disebut sebagai tag-tag pada file teks biasa tersebut
Struktur file HTML diawali dengan sebuah tag<html> dan ditutup dengan
tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu
yang diapit oleh tag<head>…</head> dan tag <body>…</body>
Tugas
Untuk membuat dokumen HTML dengan Text Editor paling tidak ada 4 tahap :
Buka Text Editor/HTML Editor
Ketikkan dokumen HTML
Simpan dengan format *.html
Buka hasilnya/dokumen html dengan web browser
Buatlah beberapa dokumen HTML berikut ini. :
HTML Heading
<html>
<head>
<title>Heading</title>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Bagaimana tampilannya? Apa yang dapat kamu simpulkan tentang
elemen Heading?
ii. HTML Paragraph
<!DOCTYPE html>
<html>
<head>
<tittle>Paragraf</tittle>
</head>
<body>
<p> Ini adalah paragraf. Ini adalah paragraf. Ini
adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. </p>
<p> Ini paragraph lainnya. Ini paragraph lainnya.
Ini paragraph lainnya. Ini paragraph lainnya. Ini
paragraph lainnya. </p>
</body>
</html>

elemen Paragraph?
HTML Link
<!DOCTYPE html>
<html>
<head>
<tittle>Link</tittle>
</head>
<body>
<a
href="http://www.w3schools.com">
Ini adalah link</a> </body>

</html>

elemen Paragraph?
HTML Image
<!DOCTYPE html>
<html>
<head>
<tittle>Gambar/Image</tittle>
</head>
<body>
<img src="w3schools.jpg" alt="W3Schools.com"

width="104" height="142">
</body>
</html>

elemen Image?
Tes Formatif
HTML kepanjangan dari

Hyperlinks and Text Markup Language
Hyper Text Markup Language
Home Tool Markup Language
Homepage Text Markup Language
Siapakah yang membuat standar Web?

Google
Microsoft
Mozilla
The World Wide Web Consortium
Pilih tag HTML yang benar untuk ukuran huruf heading terbesar
<head>
<h6>
<heading>
<h1>
Pilih tag HTML yang benar untuk membuat huruf italic
<italic>
<i>
Apa Tag HTML yang benar untuk membuat hyperlink?

<a name="http://www.w3schools.com">W3Schools.com</a>
<a>http://www.w3schools.com</a>
<a href="http://www.w3schools.com">W3Schools</a>
<a url="http://www.w3schools.com">W3Schools.com</a>
Sebutkan 4 tag minimal dalam sebuah dokumen HTML!

Kegiatan Belajar 4 : Menyajikan pemformatan Teks dan Paragraf
Web
Tujuan Pembelajaran
Memahami Pemformatan Teks
Memahami Pemformatan Paragrap Web
Menyajikan pemformatan paragraph pada halaman dokumen web
Uraian Materi
Pemformatan Teks
Berikut ini adalah contoh yang dihasilkan pemformatan teks pada dokumen
web :
HTML menggunakan tag seperti <b> dan <i> untuk memformat output,
seperti teks tebal atau miring.
Tag HTML ini disebut tag format, selengkapnya dalam tabel berikut :
Tag HTML Pemformatan Teks
Tag Deskripsi
<b> Mendefinisikan teks tebal
<em> Mendefinisikan teks menekankan
<i> Mendefinisikan teks miring
<small> Mendefinisikan teks kecil
<strong> Mendefinisikan teks penting
<sub> Mendefinisikan teks di bawah garis

<sup> Mendefinisikan teks di atas garis
<ins> Mendefinisikan teks sisipan
<del> Mendefinisikan teks dicoret
<mark> Mendefinisikan teks ditandai
Tag HTML “keluaran computer”
Tag Deskripsi
<code> Mendefinisikan teks kode komputer
<kbd> Mendefinisikan teks keyboard
<samp> Mendefinisikan teks contoh kode
<var> Mendefinisikan teks variabel
<pre> Mendefinisikan teks terformat
HTML Citations, Quotations, and Definition Tags
Tag Deskripsi
<abbr> Mendefinisikan sebuah singkatan
<address> Mendefinisikan alamat atau kontak informasi
<bdo> Mendefinisikan arah teks
<blockquote> Mendefinisikan sebuah bagian yang dikutip dari sumber
lain
<q> Mendefinisikan sebuah kutipan pendek
<cite> Mendefinisikan judul karya
<dfn> Mendefinisikan sebuah istilah definisi
2. Pemformatan Paragrap
Tag HTML untuk paragrap adalah <p>, dengan tag penutup </p>. Berikut ini
contohnya :
<p>ini adalah paragrap</p>

p>Ini paragrap yang lain</p>
Rangkuman
Pemformatan teks digunakan untuk memformat teks, seperti huruf tebal,
miring dsb.
Perfomatan teks ini juga digunakan untuk menampilkan “keluaran computer”,
HTML Citations, Quotations, and Definition
Tugas
Buatlah dokumen-dokumen HTML berikut ini, diskusikan hasilnya dengan
teman-temanmu.
1.Format Teks
<html>
<head>
<title>Format Teks</title>
</head>
<body>
<p>
<b>Tulisan ini ditebalkan (bold)</b>
</p>
<p>
<strong>Tulisan ini ditebalkan
(strong)</strong>
</p>
<p>
<em>Tulisan ini miring (emphasize)
</em>
</p>
<p>
<big>Tulisan ini besar (big)</big>
</p>
<p>
<i>Tulisan ini miring (italic) </i>
</p>
<p>Tulisan ini
<sub>subscript</sub>
</p>
<p>Tulisan ini
<sup>superscript</sup>
</p>
</body>
</html>
2.Pre Format
<HTML>
<HEAD>
<TITLE>Preformat </TITLE>
</HEAD>
<BODY>
<H2>Daftar Harga Keladi:</H2>
<PRE>
Red Flash.........35.000
Red Fire..........60.000
Fannie Munson.....60.000
</PRE>
Harga sewaktu-waktu bisa berubah.
</BODY>
</HTML>
3.Pre Format
<html>
<head>
<title>Tag Preformatted</title>
</head>
<body>
<pre>
This section provides a brief overview of the menus
in Dreamweaver.
The File menu and Edit menu contain the standard menu
items for File and Edit.
menus, such as New, Open, Save, Save All, Cut, Copy,

Paste,
Undo,and Redo
</pre>
<pre>
Ini adalah
preformatted text.
Menampilkan spasi
Dan line break apa adanya.
</pre>
<p>Tag PRE cocok digunakan untuk menampilkan kode bahasa
pemrograman komputer :</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
5.Quotation
<html>
<head>
<title>quotation</title>
</head>
<body>
tulisan ini BUKAN quotation
<blockquote>
tulisan ini adalah quotation <br>
</blockquote>
</body>
</html>
5. Kegiatan Belajar 5 : Menyajikan hasil Pembuatan List Minimal
Memahami Pembuatan list minimal
Menyajikan hasil pembuatan list minimal
b. Uraian Materi
Pengertian List
List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu
kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang bertema
kuliner, list dapat berupa daftar dari makanan dan minuman, beserta
harganya. List dapat juga berupa prosedur (urutan langkah-langkah) dari
suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan
dari langkah pertama sampai langkah terakhir. Contoh List :
Daftar Makanan :
Bakso
Soto
Sate
Gule Daftar
Minuman :
Juice Jambu
Juice Alpukat
Juice Tomat
Tipe Daftar dalam Dokumen HTML

Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu :
Daftar berurutan (ordered list)
Daftar tidak berututan (unordered list)
Daftar definisi (definition list)
Daftar Berurutan (Ordered List)

Daftar yang berurutan biasanya ditandai dengan penggunaan penomoran
tertentu. Penomoran ini bias menggunakan angka (1, 2, 3,…) maupun karakter
alphabet terntentu (a, b, c,… atau i, ii, iii,…). Daftar yang berurutan umumnya
dipakai untuk item-item yang saling berhubungan satu sama lain, atau untuk
menuliskan langkah-langkah atau prosedur dari kegiatan terntentu yang tidak
dapat dilakukan secara acak.
Contoh daftar yang berurutan adalah pada cara membuat dokumen HTML,
misalnya :
Langkah-langkah membuat dokumen HTML :
Jalankan aplikasi Text Editor
Isikan kode HTML ke dalam Text Editor
Simpan file dengan ekstension .htm atau .html
Jalankan file HTML menggunakan aplikasi Web browser

untuk menampilkan hasilnya
Untuk membuat suatu daftar yang berurutan dalam dokumen HTML, digunakan
tag <ol> (ordered list), yang berpasangan dengan tag </ol>. Tag <ol> digunakan
untuk memulai suatu daftar berurutan tertentu, sedangkan </ol> berfungsi untuk
menandakan bahwa daftar tersebut sudah berakhir.
Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item,
yang kemudian perlu ditutup dengan tag </li>. Contoh penulisan adalah sebagai
berikut :
<ol>
<li>Urutan Pertama</li>
<li>Urutan Kedua</li>
</ol>
Adapun atribut untuk tag <ol> adalah “type” yang menunjukan jenis
penomorannnya. Secara standart, tipenya adalah menggunakan penomoran 1,
2, 3, 4 dst.
Selain tipe default, tipe lain yang dapat digunakan untuk keperluan penomoran dalam suatu list
adalah :
Tipe Keterangan
A Membuat list dengan penomoran berupa karakter A, B, C, dst
a Membuat list dengan penomoran berupa karakter a, b, c, dst
I Membuat list dengan penomoran berupa karakter I, II, III, dst
i Membuat list dengan penomoran berupa karakter i, ii, iii, dst
4) Daftar Tidak Berurutan (Unordered List)

Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat diubah
posisinya secara acak. Daftar seperti ni tidak menggunakan penomoran seperti
di atas, melainkan hanya dengan menggunakan tanda atau symbol tertentu,
misalnya gambar kotak atau bulat (bullet). Contoh :
Daftar buah :
Mangga
Jambu
Semangka
Rambutan
Jeruk
Pada contoh di atas, kita dapat mengubah/mengacak secara bebas
urutan dari masing-masing item yang ada. Hal ini disebabkan karena setiap item
yang ada tidak memiliki keterkaitan satu sama lain dengan item lainnya, berbeda
dengan suatu urutan langkah tertentu yang harus ditulis secara berurutan.
Untuk membuat suatu daftar yang tidak berurutan dalam dokumen HTML,
digunakan tag <ul> (unordered list), yang berpasangan dengan tag </ul>. Tag
<ul> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ul>
berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir.
Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item,
yang kemudian perlu ditutup dengan tag </li>. Contoh penulisan adalah sebagai
berikut :
<ul>
<li>Item satu</li>
<li>Item dua</li>
</ul>
Adapun atribut untuk tag <ul> adalah “type” yang menunjukan jenis tanda untuk
setiap item berupa tanda bulatan untuk defaultnya..
Selain tipe default, tipe lain yang dapat digunakan untuk keperluan unordered list adalah :
Tipe Keterangan Contoh Penulisan
Disk Tanda bulatan hitam <ul type=”disk”>
Circle Tanda bulatan putih <ul type=”circle”>
Square Tanda kotak <ul type=”square”>
5) Daftar Definisi (Definition List)

Daftar Definisi adalah suatu daftar yang berisi kumpulan definisi dari suatu istilah
tertentu, misalnya daftar definisi istilah HTML. Contoh :
HTML
Hyper Text Mark-up Language
WWW
World Wide Web

Browser
Aplikasi untuk membuka dokumen html/situs

web.
c. Rangkuman
Tag Fungsi
<div> ... </div> Sebuah wilayah teks yang akan diformat
<dl> ... </dl> Sebuah daftar definisi
<dt> ... </dt> Sebuah istilah definisi, sebagai bagian dari
daftar definisi.
<dd> ... </dd> Sesuai untuk istilah definisi, sebagai
bagian dari daftar definisi
<ol> ... </ol> Ordered List atau daftar berurutan
<ul> ... </ul> Un-Ordered List atau daftar tidak berurutan
<li> ... </li> Sebuah daftar item untuk digunakan dengan
<ol> atau <ul>.
d. Tugas
Buatlah dokumen HTML berikut ini :
<!DOCTYPE >
<html>
<head>
<title>Vertebrata</title>
</head>
<body>
<h1>Vertebrata</h1>
<ul>
<li>Ikan</span>
<ul>
<li>Patin</li>
<li>Gurami</li>
<li>Mujair</li>
</ul>
</li>
<li>Amfibi</span>
<ul>
<li>Ordo Anura
<ul>
<li>Katak Hijau </li>
<li>Katak Darat</li>
<li>Katak Ungu</li>
</ul>
</li>
<li>Ordo Urodela
<ul>
<li>Salamander</li>
<li>Mudpuppy</li>
</ul>
</li>
</ul>
</li>
<li>Reptil</span>
<ul>
<li>Buaya</li>
<li>Ular Kobra</li>
<li>Penyu</li>
</ul>
</li>
</ul>
</body>
</html>
Apa yang dapat kamu simpulkan dari daftar di atas?
Coba buatlah tipe bentuk bullet yang berbeda dari daftar di atas!
6. Kegiatan Belajar 6 : Menyajikan Pembuatan List Kombinasi

Memahami Pembuatan list kombinasi
Menyajikan Pembuatan list kombinasi b.
Uraian Materi
Pembuatan list Kombinasi
Perhatikan daftar berikut ini :
Daftar Menu
Makanan
Bakso
Mie Ayam
Soto
Minuman
Teh Panas
Jeruk Panas
Kopi
Dapat dilihat bahwa daftar di atas adalah gabungan daftar berurutan dan
daftar tidak berurutan.
Untuk membuat daftar diatas pada dokumen HTML maka cukup
menggabungkan <ol> dangan <ul>.
Perhatikan penggabungan <ol> dengan <ul> berikut ini :
<ol>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ol>
Ketika kita menggabungkan tag tidak berurutan <ul> tipe bullet dengan tag
tidak berurutan <ul> pada daftar berikutnya, maka daftar yang kedua oleh
browser akan ditampilkan secara otomatis menjadi daftar bullet.
Tidak demikian dengan daftar berurutan <ol>, maka agar tipenya sama
dengan daftar berurutan sebelumnya, kita harus memberikan atribut tipe
yang sama dengan daftar berurutan sebelumnya. Contoh :
<ul>
<li> </li>
<ol type=i>
<li > </li>
<li> </li>
</ol>
<li>
<ol type=i>
<li > </li>
<li> </li>
</ol>
</li>
<li>
</li>
</ul>
Memulai dengan nomor tertentu

Untuk membuat daftar bernomor dengan urutan yang tidak dimulai dengan 1
(nomor/huruf awal), maka kita harus mendefinisikan dengan atribut “start”
pada elemen tag <ol>.
Misalnya contoh berikut :
<ol start="17">
<li>Blok huruf dengan text tool</li>
<li>Klik tab karakter</li>
<li>Pilih jenis huruf pada menu pop-up .</li>
</ol>
Maka urutan daftar yang ditampilkan akan dimulai dengan 17, selanjutnya 18
dan 19.
Demikian juga apabila :
<ol type=”A” start="17">
<li>Klik tab karakter</li>
<li>Pilih jenis huruf pada menu pop-up
.</li> </ol>
Maka urutan daftar yang ditampilkan akan dimulai dengan Q, selanjutnya R,

dan S.
Penggunaan daftar bernomor yang tidak dimulai dengan nomor awal,
biasanya diperlukan apabila daftar yang kita buat sudah diselingi beberapa
paragraph, sehingga ketika dibuat daftar bernomor, secara default akan
dimulai dari awal, padahal harusnya melanjutkan nomor sebelumnya. Maka
digunakanlah atribut “start=” tersebut.
c. Rangkuman
List kombinasi adalah kombinasi daftar berurutan dengan tidak berurutan
sekaligus. Untuk membuat daftar/list kombinasi yaitu menggabungkan atau
mengkombinasikan tag <ol> dengan <ul>. Daftar berurutan tidak selalu diawali
dengan nomor satu, tetapi dapat diawali dengan nomor tertentu, yaitu dengan
memberi atribut start=” ”
Tugas
Buatlah daftar seperti berikut ini dalam dokumen web :
2. Buatlah daftar seperti berikut ini dalam dokumen web :
e. Tes Formatif
1.Bagaimana cara membuat list kombinasi?
Atribut apa yang digunakan untuk memulai list berurutan yang tidak dimulai
dengan 1 (pertama)? Berikan contohnya!
Ketika membuat daftar berurutan diselingi daftar tidak berurutan, maka agar
tipenya sama dengan daftar berurutan sebelumnya, apa yang harus dilakukan?
Apa yang ditampilkan dari tag berikut ini :
<ol type="A" start="10">
<li>Tekan CTRL+C</li>
<li>Berikutnya tekan CTRL+V untuk</li>
</ol>
5. Apa yang ditampilkan dari tag berikut ini :
<ol type="I" start="10">
<li>Tekan CTRL+C</li>
<li>Berikutnya tekan CTRL+V untuk paste</li>
</ol>
7. Kegiatan Belajar 7 : Menyajikan Pembuatan Tabel
Memahami Pembuatan Tabel
Menyajikan Pembuatan Tabel b.
Uraian Materi
Pembuatan Tabel
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang
terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table
pada HTML, digunakan Tag<Table>.
Elemen table berisi property <tr> untuk menentukan baris(table row) yang
didalamnya terdapat properti <td> untuk menampkan data pada setiap sel
table(table data).
<table>
<tr>
<td>data baris 1 kolom 1</td>
</tr>
</table>
Struktur elemen table adalah sebagai berikut:

<table>
<tr>

</tr>
</table>
Untuk mendifinisikan table heading atau judul tiap kolom menggunakan

tag <th> ….. </th>
Atribut Elemen Tabel
Width =panjang(lebar table, pixel atau persen)
Height =panjang(tinggi table, pixel atau persen)
Border =pixel(tebal garis tepi)
Cellspacing =pixel(spasi antar sel)
Cellpadding =pixel(spasi di dalam sel)
Align =[left|center|right](perataan table)
Bgcolor =warna(warna latar belakang table)

Align =[left|center|right](perataan sebaris sel secara horizontal)
Valign =[top|middle|bottom](perataaan sebaris sel secara vertical)
Bgcolor =warna(warna latar belakang baris)
Atribut Tabel Data
Align =[left|center|right](perataan horizontal)
Width =[top|middle|bottom](perataan vertical)
Height =pixel(tinggi sel, pixel atau persen)
Bgcolor =warna(warna latar belakang sel)
c. Rangkuman
Untuk mengatur teks ataupun gambar dalam baris dan kolom, digunakanlah
pemformatan Tabel
Tag Utama untuk tabel adalah :
Tag Fungsi
<table> ….. </table> Mendifinisikan Tabel
<tr> … </tr> Mendifinisikan table row atau baris
<td> … </td> Data pada tabel/sel
<th> … </th> Mendifinisikan table heading atau judul tiap kolom
d. Tugas
01:tabel1.html
Salin script HTML berikut untuk mencoba tag table berikut property kolom
dan barisnya, jangan lupa disimpan dengan ekstensi .html.kemudian coba di
web browser.
<html>
<head>
<title>tabel</title>
</head>
<body>
berikut contoh tabel dengan rowspan dan colspan
<table width=80% border=2 cellspacing=0
cellpadding=0> <tr>
<td>baris 1 kolom 1</td>
</tr>
<tr>
<td colspan=2>baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan=2baris 3 kolom 1</td>
</tr>
</table>
</body>
</html>
02: tabel2.html
<html>
<head>
<tittle>penggunaan
ALIGN</tittle> </head>
<body>
<table border="1">
<caption>Daftar
wiraniaga</caption> <tr>
<th colspan ="2" rowspan = "2">WIRANIAGA</th>
<th colspan ="3">KOTA</th>
</tr>
<tr>
<th>SEMARANG</th>
<th>Kudus</th><th>Solo</th>
<tr>
<tr>
<th rowspan ="2">Jenis
Kelamin</th> <th>Pria</th>
<th align= "right">30</td>
<td align= "right">20</td>
</tr>
<tr>
<th>wanita</th>
</tr>
</table>
</body>
</html>
03: tabel3.html
Buatlah dokumen HTML sehingga menghasilkan tampilan tabel seperti berikut

ini (aturlah sedemikian rupa pada atribut-atribut tabel untuk mendapatkan dua
buah tampilan yang berbeda, sebagaimana dibawah ini ).
Tabel 1.
Nama Usia
Ali 25
Fahmianto 27
Tampilan tabel 2
Nama Usia
Ali 25
Fahmianto 27
e. Tes Formatif
Buatlah tabel sederhana, dengan dua baris dan dua kolom, berilah border
keseruhannya
Bagaimana jika pada tabel di atas akan diberi spasi Antara border/batas
tabel dengan sel sebesar 30?
Dari tabel di atas, buatlah warna berbeda tiap sel-nya, dengan ketentuan : sel
kiri atas hijau, sel kanan atas merah, sel kiri bawah kuning, dan sel kanan
bawah biru?
Lembar Jawaban Tes Formatif

8. Kegiatan Belajar 8 : Menyajikan Tabel dengan Spaning
Memahami Tabel dengan Spaning
Menyajikan Tabel dengan Spaning
b. Uraian Materi
Pembuatan Tabel
Ada kalanya kita membuat table dengan menggabungkan baris, ataupun
kolom. Berikut ini contoh tabel yang menggabungkan baris :
Benua Negara
ASIA Arab Saudi
India
Indonesia
Singapura
Berikut ini contoh tabel yang menggabungkan kolom :
Benua EROPA
Negara Belanda Italia Inggris Jerman
Untuk membuat table seperti di atas, maka Tabel Atribut Data yang digunakan
adalah sebagai berikut
Rowspan =angka(baris yang di span oleh sel)
Colspan =angka(kolom yang di span oleh sel)
Jadi untuk menggabungkan 4 baris seperti table di atas adalah :
<td rowspan=4> …….</td>
Sedangkan untuk menggabungkan 4 kolom seperti table di atas adalah :
<th colspan=4> …….</th>

c. Rangkuman
Untuk menggabungkan baris ataupun kolom pada tabel, digunakan atribut :
Rowspan : untuk baris

Colspan : untuk kolom d.
Tugas
<html
<head>
<title>Tabel Dengan
Rowspan</title> </head>
<body>
<table width="500" border="1">
<tr>
<th scope="col">Nama Perumahan </th>
<th scope="col">Tipe / Luas tanah

(m<sup>2</sup>) </th>
</tr>
<tr>
<td rowspan="4">Griya Indah Permai
</td> <td>21 / 60 </td>
</tr>
<tr>
<td>36 / 90 </td>
</tr>
<tr>
<td>45 / 120 </td>
</tr>
<tr>
<td>54 / 120 </td>
</tr>
</table>
</body>
</html>
Bagaimana hasilnya? Apa yang dapat kamu simpulkan?
<html >
<head>
<title>Tabel dengan
Colspan</title> </head>
<body>
<table width="500" border="1">
<tr>
<th scope="col">Perumahan</th>
<th colspan="4" scope="col">Tipe / Luas

tanah (m<sup>2</sup>) </th>
</tr>
<tr>
<td>Griya Indah Permai </td>
<td>21/60</td>
<td>36/90</td>
<td>45/120</td>
<td>54/120</td>
</tr>
</table>
</body>
</html>
3. Buatlah dokumen HTML dari tampilan table berikut ini :
Benua Negara
ASIA Arab Saudi
India
Indonesia
Singapura
EROPA Belanda
Italia
Inggris
Jerman
4. Buatlah dokumen HTML dari tampilan tabel berikut ini :
Benua EROPA ASIA

Negara Belanda Italia Indonesia India
5. Buatlah dokumen HTML dari tampilan table berikut ini :
apel mangga
pisang jeruk nanas
9. Kegiatan Belajar 9 : Pembuatan Tabel dalam Tabel
1). Memahami tabel di dalam tabel
2). Menyajikan tabel dalam tabel
b. Uraian Materi
1. Tabel di dalam Tabel (Tabel bersarang)
Coba perhatikan gambar tabel berikut ini :
Gambar 9.1. Tabel Online Order
Dapat kita lihat bahwa di kolom “Email account note” ada table berisi tentang
catatan jenis email. Jadi ada tabel di dalam tabel atau istilahnya “nested table”
atau tabel bersarang.
Dalam penulisan HTML “tabel bersarang” ini adalah dengan menuliskan
HTML Tabel di dalam sebuah sel dari tabel, letaknya adalah pada
<td>….</td>, seperti berikut ini :
<table>
<tr>
<td> <table>
<tr>
<td>tabel ke 2</td>
<td>tabel ke 2</td>
/tr>
</table></td>
</tr>
</table>
Teknik tabel bersarang adalah salah satu cara untuk menghasilkan layout
tabel yang kompleks tanpa membuat tabel yang sangat kompleks. Sehingga
ketika harus membuat tabel yang kompleks, maka cara sederhananya adalah
membuat tabel di dalam sebuah sel (<td></td>). Berikut ini contoh langkah-
demi langkah :
Buatlah tabel dengan 2 kolom dan 2 baris. HTML tag-nya adalah sebagai
berikut :
<table border=1>
<tr>
<td>kolom 1 baris 1</td>
</tr>
<tr>
</tr>
</table>
Tentukan sel dimana kita ingin menempatkan tabel bersarang. Kita akan
menaruh di kolom 2 baris 2.
Ganti teks dalam sel itu dengan tabel kedua. HTML akan terlihat seperti ini
<table border=1>
<tr>
</tr>
<tr>

<td>
<table border=1>
<tr>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
</table>
Hasilnya adalah sebagai berikut :
Trik untuk tabel bersarang adalah untuk selalu menutup tag tabel dalam
sebelum menutup sel tabel luar.
c. Rangkuman
Teknik tabel bersarang adalah salah satu cara untuk menghasilkan layout
tabel yang kompleks tanpa membuat tabel yang sangat kompleks. Sehingga
ketika harus membuat tabel yang kompleks, maka cara sederhananya adalah
membuat tabel di dalam sebuah sel (<td></td>).
Tugas
<html
<head>
<title>Tabel Bersarang</title>
</head>
<body>
<table border=1>
<tr>
<td>
<table border=1>
<tr>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
<tr>
</tr>
</table></body>
</html>
2. Buatlah dokumen HTML berikut ini :
<html>
<head><title>nested table 3</title></head>
<body>
<table border="3" cellpadding="10"
cellspacing="10">
<td>
sel berikutnya yang satu ini memiliki tabel kecil di
dalamnya, tabel di dalam tabel.
</td>
<td> <table border="3" cellpadding="3"
cellspacing="3">
<td>tabel ke 2</td>
<td>tabel ke 2</td>
<tr>
<td>tabel ke 2</td>
<td>tabel ke 2</td>
</tr>
</table></td>
</table>
</body>
</html>
3. Buatlah dokumen HTML dari tampilan tabel berikut ini :

Buatlah dokumen HTML dari tampilan tabel berikut ini :
Buatlah dokumen HTML dari tampilan table berikut ini :
Tes Formatif
Apa keuntungan teknik tabel di dalam tabel?
Jelaskan cara membuat tabel di dalam tabel?
Mana pernyataan berikut ini yang benar untuk tag tabel di dalam tabel?
<table>..</table> diletakan di dalam sel
<table>..</table> diletakan di dalam <tr>..</tr>
<table>..</table> diletakan di dalam <td>..</td>
Kegiatan Belajar 10 : Menyajikan Desain Halaman Web
dengan Konsep Tabel
Tujuan Pembelajaran
Memahami desain layout halaman web
Memahami konsep desain web dengan tabel
Menyajikan desain web dengan konsep tabel
Uraian Materi
Sebuah dokumen tidak jarang digunakan untuk menampilkan data kepada
penggunanya. Terdapat banyak cara untuk menampilkan data, mulai dari dengan
menggunakan grafik, daftar, sampai dengan tabel.
Tabel pada umumnya digunakan untuk menampilkan data tabular dalam
bentuk baris dan kolom. perpotongan baris dan kolom di dalam tabel disebut
dengan sel. Di dalam html, memungkinkan untuk menampilkan data di dalam
tabel secara atraktif.
Meskipun terlihat sederhana, desain tabel yang dilakukan sampai sejauh ini
masih merupakan sebuah tabel yang hanya menyimpan data. Data yang
disimpan dan ditampilkan sendiri tidak memiliki struktur, sehingga tidak terdapat
organisasi data yang baik. Pengorganisasian data yang baik dan benar pada
sebuah tabel HTML akan sangat membantu dalam mengembangkan aplikasi
web, terutama jika tabel yang ingin dibangun harus bersifat dinamis.
Penambahan kolom dan baris tabel saja tidak cukup untuk
mengorganisasikan data pada tabel, karena tidak dapat secara langsung
mengetahui mana bagian dari tabel yang merupakan data, mana yang
merupakan isi data, dan mana yang merupakan nilai agregasi dari data. HTML
menyediakan beberapa elemen yang dikhususkan untuk memenuhi beberapa hal
yang disebutkan sebelumnya, yaitu elemen table,tr,td,th, caption.
Anatomi halaman web
Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari
containing block, Logo, navigation, content, white space dapat digambarkan
sebagai berikut
Header
Gambar 10.1 anatomi halaman web

Containing Block.
Containing block merupakan bagian dari halaman web yang
membungkus semua komponen halaman web. Umumnya dibuat dengan
tag <body>, <div> atau <table>.
Logo.
Identitas perusahaan, organisasi, pemilik situs.
Navigation.
Navigasi atau menu merupakan bagian penting dari situs yang
memudahkan pengunjung berpindah-pindah halaman.
Content.
Content atau isi adalah segalanya, karena disinilah sebagian besar
informasi disajikan.
Footer.
Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs
(copyright) dan beberapa link.
Whitespace.
Whitespace merupakan area kosong yang membatasi antar-komponen.

Whitespace menjadi penting agar pengunjung mempunyai ruang berhenti
di antara bagian-bagian situs yang lain. Whitespace dapat juga diisi
dengan banner atau animasi.
Layout halaman web

Layout situs merupakan tata letak elemen halaman situs web.Layout situs
yang baik akan menjadikan halaman web web baik juga. Dengan desain halaman
web yang baik dan tepat akan membuat pengunjung merasa nyaman dengan
tampilan (layout) halaman web tersebut, dan tetap dapat fokus pada isi (content).
Desain halaman web tidak mengganggu kejelasan bagian isi.
Pada desain layout yang tepat, pengunjung dapat berpindah ke halaman lain
dengan mudah melalui navigasi yang baik, mudah dan informatif. Pengunjung
merasa bahwa setiap halaman dari situs merupakan satu kesatuan. Setiap
halaman memiliki posisi dan kesamaan tampilan (layout), yang berbeda hanya isi
(content).
Adanya layout tata letak yang baik dapat membuat halaman lebih cantik dan
seimbang, terutama enak dilihat dan mudah dibaca. Desain layout suatu halaman
web meliputi penyusunan:
pembagian tempat pada halaman
pengaturan jarak sepasi
pengelompokan teks dan grafik
serta penekanan pada suatu bagian tertentu
Beberapa model layout yang biasa digunakan dalam mendesain suatu
halaman web, diantaranya adalah
Top Index
digunakan untuk menampilkan link yang banyak ke situs lain, seperti search
engine
Gambar 10.2 model layout top index
Navigasi atau daftar isi berada dibagian atas dari halaman web, seperti pada berikut
merupakan tampilan dari www.google.com
Gambar 10.3 contoh halaman web dengan layout top index
Bottom Index
Biasanya digunakan apabila isi dari halaman banyak berhubungan
dengan topik tunggal
Gambar 10.4 model layout bottom index
Navigasi atau daftar isi berada dibagian bawah dari halaman web, seperti
pada berikut merupakan tampilan halaman web education and training
berikut ini
Gambar 10.5 contoh halaman web dengan layout bottom index
Left Index
Digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam
penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada
halaman utama
Gambar 10.6 model layout left index

Navigasi atau daftar isi berada dibagian kiri dari halaman web, seperti pada
berikut merupakan tampilan halaman web berikut ini
Gambar 10.7 contoh halaman web dengan layout left index
Layout Split
Merupakan model yang banyak dipakai, karena terjaga keseimbangan dalam
halaman web
Gambar 10.8 model layout split

Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web,
seperti pada berikut merupakan tampilan halaman web yang diambil dari
theme wordpress berikut ini
Gambar 10.9 contoh halaman web dengan layout split
Alternating Index
digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk
yang disertai dengan teks berupa keterangan, harga, jumlah, dan lain -
lain.
Gambar 10.10. model layout alternating index

Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web,
seperti pada berikut merupakan tampilan halaman web yang diambil dari
theme di http://www.csszengarden.com/050// berikut ini
Gambar 10.11 contoh halaman web dengan layout alternating
index
Desain halaman web dengan konsep tabel -

Top Index
Berikut adalah listing program untuk membuat layout “top index”
halaman web dengan elemen table.
<!DOCTYPE
html> <head>
<title>Top
index</title> </head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="542" border="1"
align="center">
<tr>
<td height="23" align="center"
bordercolor="#FFFFFF" bgcolor="#FFFF00"><strong><font
size="+5">Banner
atau iklan</font></strong></td>
</tr>
<tr>
bgcolor="#FFCCCC"><font color="#FF0000">Daftar
isi atau navigasi </font></td>
</tr>
<tr>
<td height="457" align="center" bgcolor="#FF66CC">
<p>Body atau contents(isi)</p>
<p><font color="#006600">Body
atau contents(isi)</font></p>
<p><font color="#CC0000">Body
<p><font color="#FFFF00">Body
<p><font color="#FF6633">Body
atau contents(isi)</font></p></td>
</tr>
<tr>
bgcolor="#CCFF99"><font color="#9966CC">Info
tambahan atau lain-lain
</font></td> </tr>
</table>
</form>
</body>
</html>
Bila listing program di atas dijalankan maka akan menghasilkan tampilan

halaman web seperti berikut ini :
Gambar 10.12 penerapan <table> pada layout top index
Bottom Index
Berikut adalah listing program untuk membuat layout “bottom index” halaman
web dengan elemen table.
<!DOCTYPE html>
<head>
<title>Top index</title>
</head>
<body>
align="center">
<tr>
<td height="23" align="center" bordercolor="#FFFFFF"
bgcolor="#FFFF00"><strong><font size="+5">Banner
Judul</font></strong></td>
</tr>
<tr>
<td height="457" align="center" bgcolor="#CCCCCC">
<p><font color="#006600">Body atau

contents(isi)</font></p>
<p><font color="#CC0000">Body atau
<p><font color="#FFFF00">Body atau
contents(isi)</font></p></td>
</tr>
<tr>
bgcolor="#CCFF99"><font color="#FF0000"><strong><font
size="+2">Daftar
isi atau navigasi </font></strong></font><font
color="#9966CC" size="+2"> </font></td>
</tr>
</table>
</form>
</body>
</html>

Gambar 10.13 penerapan <table> pada layout bottom index

Left Index
Berikut adalah listing program untuk membuat layout “left index” halaman
web dengan elemen table.
<!DOCTYPE html >
<head>
<title>Left Colour</title>
</head>
<body>

align="center" cellspacing="1">
<tr>
<th width="160" rowspan="3" valign="top"

bgcolor="#993366"><p>Home</p>
<p>Profile</p>
<p>About Us</p>
<p>Blog</p>
<p>Contact Us</p></th>
<th width="627" height="23" align="center"

bgcolor="#FFFF99"><strong><font color="#CCCCCC"
size="+4">Electronic
Shop</font></strong></th>
</tr>
<tr>
<td height="176" align="center" valign="top"

bgcolor="#FFFF99"><p> </p>
<p>Selamat datang di web kami, penjualan produk

online ini adalah yang pertama di kota kami.
kualitas dan harga dapat dipercaya langsung

saja pesan dan menjadi langganan kami.
</p></td>
</tr>
<tr>
<td height="30" align="center" bgcolor="#FFFF99">

<font size="+2">profilkami.com</font></td>
</tr>
</table>
</form>
</body>
</html>

Gambar 10.14 penerapan <table> pada layout left index
Layout Split
Berikut adalah listing program untuk membuat layout “split” halaman web
dengan elemen table.
<!DOCTYPE html >
<head>
<title>left </title>
</head>
<body>

align="center">
<tr>
<td width="15%" rowspan="2" align="center"

bgcolor="#99CC99"><strong>Daftar
Isi </strong> </td>
<td width="67%" height="23" align="center"

bgcolor="#FFCCFF"><font
size="+3"><strong>Banner/judul</strong></font></td>
<td width="18%" rowspan="2" align="center"

bgcolor="#99CC99"><strong>Daftar
Isi </strong> </td>
</tr>
<tr>

bgcolor="#CCCCCC">
<p><font color="#CC0000">Body
<p><font color="#FFFF00">Body
<p><font color="#990033">Body
</td>
</tr>
<tr bgcolor="#FF99FF">
<td height="23" colspan="3"

align="center">Lain-lain </td>
</tr>
</table>
</form>
</body>
</html>

Gambar 10.15 penerapan <table> pada layout split

Alternating Index
Berikut adalah listing program untuk membuat layout “alternating
index” halaman web dengan elemen table.
<!DOCTYPE html >
<head>
<title>alternating</title>
</head>
<body>

align="center">
<tr>
bgcolor="#FF66CC"><font size="+1"><strong>Teks/Daftar
isi</strong></font></td>
<td align="center" bgcolor="#FFFFCC"><font

color="#000066" size="+7"><strong><em>Gambar
</em> </strong></font></td>
</tr>
<tr>

bgcolor="#FFFF99"><font color="#CC0000"
size="+7"><strong><em>Gambar
</em></strong></font><font
size="+7"><em></em></font></td>
<td align="center" bgcolor="#FF66CC"><font

size="+1"><strong>Teks/daftar
isi</strong></font></td>
</tr>
<tr bgcolor="#996666">
<td height="150" colspan="2"
align="center"><font color="#FFFFFF"><strong><font
size="+1">Lain-lain</font></strong></font></td>
</tr>
</table>
</form>
</body>
</html>

Gambar 10.16 penerapan <table> pada layout alternating index
c. Rangkuman
Pada kegiatan belajar desain Web dengan Konsep Tabel dapat
disimpulkan menjadi beberapa point penting seperti berikut
Tabel pada umumnya digunakan untuk menampilkan data tabular dalam bentuk
baris dan kolom. perpotongan baris dan kolom di dalam tabel disebut
dengan sel.
HTML menyediakan beberapa elemen yang dikhususkan untuk memenuhi
beberapa hal yang disebutkan sebelumnya, yaitu elemen table,tr,td,th,
caption.
Secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari
containing block, Logo, navigation, content, white space
Desain layout suatu halaman web meliputi penyusunan:
pembagian tempat pada halaman
pengaturan jarak sepasi
pengelompokan teks dan grafik
serta penekanan pada suatu bagian tertentu
Beberapa model layout yang biasa digunakan dalam mendesain suatu
halaman web, diantaranya adalah top index, bottom index, left index, layout
split, alternating index
d. Tugas
Sebelum mengerjakan tugas, buatlah kelompok. terdiri atas 2-3 orang. Dalam
kegiatan ini masing-masing kelompok kerjakan tugas berikut :
Buat desain layout halaman web yang dengan tema web sekolah atau web
daerah. Desain halaman web tersebut dengan menggunakan salah satu
model layout tabel
Terapkan desain layout tabelnya ke dalam listing program sehingga menjadi
halaman web yang menarik.
Lengkapi halaman web tersebut dengan teks
Kemudian secara bergantian masing-masing kelompok mempresentasikan
hasilnya didepan kelas.
Tes Formatif
Dalam test ini setiap peserta didik membaca dengan cermat dan teliti setiap butir
soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah jawabannya
pada lembar jawaban test formatif yang telah disediakan.
Jelaskan tentang bagian dari anatomy sebuah halaman web
Sebutkan dan jelaskan tentang 5 model layout pada halaman web
Tuliskan listing kode dengan memanfaatkan elemen table untuk membuat
sebuah halaman web sebagai berikut
11. Kegiatan Belajar 11 : Menyajikan Format Tampilan Gambar
Tujuan Pembelajaran
Memahami Format tampilan gambar
Menyajikan Format tampilan gambar
Uraian Materi
Memasukkan Gambar ke dalam Halaman Web
Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan
bila tidak disertai dengan gambar. Kita bisa lihat saat ini, halaman web yang ada
di internet, hampir semuanya memasukkan unsur gambar, animasi, bahkan audio
dan video untuk menarik dan membuat tercengang para pengunjungnya.
Sebagai contoh lain, misalnya ingin membuat halaman web yang berisi koleksi
foto, maupun barang-barang yang sesuai dengan hobi. Dalam kasus ini, tentu
harus memahami teknik untuk menampilkan foto tersebut ke dalam halaman web
sehingga akan tampil rapi dan menarik.
Cara yang diperlukan untuk memasukkan atau menambahakan gambar ke dalam

suatu halaman web sangatlah mudah. HTML telah menyediakan tag khusus
untuk keperluan ini, yaitu <img>. Tag ini merupakan tag tunggal atau tidak
memiliki pasangan. Atribut terpenting dari tag <img> adalah SRC (source atau
sumber), yang berisi file gambar yang akan ditampilkan ke dalam halaman web.
Bentuk umum penggunaan tag <img> adalah :
<img src=”namafile”>
Jika file yang akan ditampilkan berada di direktori lain, atau bahkan berada di
situs web lain, makan perlu menyebutkan juga lokasi dari file tersebut.
Contoh:
<img src= “../image/komputer.jpg”>
Atau
<img src=http://www.abcde.com/image/kamera.jpg/>
Contoh hasil dokumen HTML di Web Browser seperti gambar berikut :
Gambar 11.1. Menyajikan Format Gambar
Format gambar yang sering digunakan dalam halaman web adalah GIF (.gif ) dan
JPEG (.jpg atau . jpeg ). GIF adalah singkatan dari Graphics Interface Format
sedangkan JPEG, adalah singkatan dari Joint Photographic Expert Group. Selain
kedua format tersebut, saaat ini juga sudah mulai banyak digunakan gambar
dengan format PNG (.png ), yanag merupakan singkatan dari Portable Network
graphics.
Menggabung Gambar dan Teks

Jika kita ingin menggabungkan ataumenyisipkan gambar di dalam suatu teks
atau paragraf tertentu, terdapat pilihan posisi gambar yang harus
diperhatikan: Secara vertikal:
Teks bisa berada sejajar dengan bagian atas gambar
Teks bisa berada sejajar dengan bagian tengah gambar
Teks bisa berada sejajar dengan bagian bawah gambar
Secara horisontal:
Gambar bisa berada di bagian kiri teks/paragraf
Gambar bisa berada di bagian kanan teks/paragraf
Untuk posisi gambar yangdilihat dari arah vertikal dapat ditentukan dengan
mengisi nilai TOP, MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang
terdapat pada tag <img>.
Gambar 11.2. Menggabungkan Gambar dan Teks arah vertikal
Adapun untuk posisi gambar yang dilihat dari arah horisontal ditentukribut an
dengan mengisi nilai LEFT dan RIGHT kedalam ALIGN pada tag <img>. Dengan
mengisi atribut tersebut dengan nilai LEFT maka gambar akan berada di sebelah
kiri teks. Sebaliknya, jika diisi RIGHT akan menyeabkan posisi gambar akan
berada di sebelah kanan teks.
Gambar 11.3. Menggabungkan Gambar dan Teks arah horisontal
Memperkecil dan Memperbesar Ukuran Gambar

gambar yang ditampilkan pada dokumen HTML terkadang tidak memiliki ukuran
gambar yang sama dengan ukuran sebenarnya. Untuk menghasilkan gambar
dengan kualitas yang mirip aslinya, penentuan ukuran juga menjadi hal yang
penting untuk diperhatikan. Maka dari itu perbandinganya harus sesuai dengan
ukuran asli dari gambar tersebut. Untuk menentukan ukuran gambar, kita perlu
mengisi atribut HEIGHT berfungsi untuk menetukan tinggi gambar dan WIDTH
untuk menetukan lebar gambar. Perhatikan contoh berikut ini.
<img src=”images/komputer.jpg” />
Kode diatas akan menampilkan gambar dari file komputer.jpg yang berada dalam
direktori images sesuai dengan ukuran asli (misal 500X375 pixel).
Untuk memperkecil gambar tersebut, kita tinggal memperkecil nilai-nilai tersebut,
misalnya
<img src=images/komputer.jpg” width=320” height=”230” />
Memberi keterangan pada gambar

Agar lebih terkesan informatif, anda dapat memberikan keterangan yang
relevan dan seperlunya (tidak berlebihan) terhadap gambar yang anda
tampilkan pada halaman web. Keterangan ini akan muncul dalam bentuk tooltip
( sesaat, hanya beberapa detik) pada saat penunjung mengarahkan kursor
(penjujuk mouse) ke atas gambar.
Untuk membuat keterangan semacam ini, kita dapat menggunakan atribut TITLE
maupun ALT pada tag <img>.
<img src=”namafile” title=”keterangan”/>
Gambar 11.4. Menyajikan format gambar dengan keterangan
Pada gambar di atas dapat dilihat bahwa keterangan gambar terlihat pada saat
mouse di atas gambar, di sana tertulis “Komputer Desktop” sebagai keterangan
gambar.
Rangkuman
Untuk menampilkan format gambar digunakan tag <img>, dengan atribut
src=”letak dan nama file gambar”, serta ukuran width=”” untuk lebar
gambar dan height=”” untuk tinggi gambar.
Untuk membuat keterangan menggunakan atribut TITLE maupun ALT
pada tag <img>.
d. Tugas
Latihan 1. Memasukkan Gambar ke dalam Halaman Web
Buatlah direktori baru dengan nama images di dalam direktori kerja
Siapkanlah file gambar berupa computer, dengan tiga format berbeda
yaitu GIF, JPEG dan PNG. Copy file gambar yang akan di tampilkan ke
dalam direktori images
Catatan : Dalam contoh ini menggunakan file komputer.gif, komputer.jpeg,

dan komputer.png.
Buatlah dokumen HTML berikut:
<html>
<head>
<title>Gambar</title>
</head>
<body>
<p>Latihan Menambahkan Gambar GIF, JPG, dan PNG</h2>
<p>Menampilkan gambar dalam format GIF:</p>

<img src=”images/komputer.gif”/>
<p>Menampilkan gambar dalam format JPG:</p>

<img src=”images/komputer.jpg”/>
<p>Menampilkan gambar dalam format PNG:</p>

<img src=”images/komputer.png”/>
</body>
</html>
Simpan file dengan nama gambar.html dan tempatkan ke dalam direktori kerja
Bukalah file tersebut melalu web browser
Pada contoh di atas,ditampilkan tiga gambar dengan format yang berbeda.
Gambar pertama (paling atas) menggunakan format GIF, kedua JPG, dan ketiga
PNG. Seperti yang terlihat, format-format tersebut dapat ditampilkan dengan baik
di dalam halaman web. Nilai yang kita isikan untuk atribut SRC di atas
mengandung nama direktori images.
<img src=”images/komputer.gif”/>
<img src=”images/komputer.jpg”/>
<img src=”images/komputer.png”/>
Ini artinya file tersebut disimpan di ddirektori images, dimana direktori images itu
sendiri berada dalam direktori kerja (satu direktori dengan file gambar.html).
Latihan 2. Menggabung Gambar dan Teks (bagian 1)
Catatan: Dalam contoh ini menggunakan file yang sama seperti pada
Latihan 1.
Buatlah dokumen HTML berikut :
<html>
<head>
</head>
<body>
<h2>Latihan Menggabung Gambar dan teks (bag.1)</h2>
<p>
<img src=”images/komputer.gif” align=”top”/>
Komputer 1 (menggunakan align=TOP) </p>
<p>
<img src=”images/komputer.jpg”/> align=”middle”/>
Komputer 2 (menggunakan align=MIDDLE) </p>
<p> <img src=”images/komputer.png”/> align=”bottom”/>
PEMROGRAMAN WEB
Komputer 3 (menggunakan align=BOTTOM)
</p>
</body>
</html>
Simpan file dengan nama gambar_plusteks.html dan tempatkan ke

dalam direktori kerja
Bukalah file tersebut melalui web browser.
Dari hasil di atas tampak jelas bahwa pada gambar bagian pertama teks berada
sejajar dengan bagian atas gambar. Untuk melakukan hal ini, kita perlu mengisi
atribut ALIGN dengan nilai TOP.
<img src=”images/komputer.gif” align=”top”/>
Pada gambar kedua, teks berada di tengah-tengah gambar karena kita mengisi
nilai MIDDLE pada atribut ALIGN.
<img src=”images/komputer.jpg” align=“middle”/>
Terakhir, pada gambar ketiga, teks berada sejajar dengan bagian bawah gambar
karena kali ini atribut ALIGN adalah BOTTOM
<img src=”images/komputer.png” align=”bottom”/>
Latihan 3. Menggabung Gambar dan Teks (Bagian 2)

Masih menggunakan file gambar yang sama dengan latihan 1
Tulislah tag html berikut :
<html>
<head>
</head>
<body>
<h2>Latihan Menggabung Gambar dan Teks (Bag. 2) </h2>
<p><u>Gambar ada di sebelah kiri teks:</u></p>
<p>
<img src=”images/komputer.gif” align”left”/>
Pada paragraf ini gambar akan ditempatkan di sebelah

kiri teks. Hal ini disebabkan atribut ALIGN diisi dengan
nilai LEFT. Pada paragraf ini gambar akan ditempatkan di
sebelah kiri teks. Hal ini disebabkan atribut ALIGN diisi
dengan nilai LEFT. Pada paragraf ini gambar akan
ditempatkan di sebelah kiri teks. Hal ini disebabkan
atribut ALIGN diisi dengan nilai LEFT. Pada paragraf ini
gambar akan ditempatkan di sebelah kiri teks. Hal ini
disebabkan atribut ALIGN diisi dengan nilai LEFT. Pada
paragraf ini gambar akan ditempatkan di sebelah kiri teks.
Hal ini disebabkan atribut ALIGN diisi dengan nilai LEFT.
</p>
<p><u>Gambar ada di sebelah kanan teks:</u></p>
<p>
<img src=”images/komputer.gif” align”right”/>
Pada paragraf ini gambar akan ditempatkan di sebelah kanan

teks. Hal ini disebabkan atribut ALIGN diisi dengan nilai
RIGHT. Pada paragraf ini gambar akan ditempatkan di sebelah
kanan teks. Hal ini disebabkan atribut ALIGN diisi dengan
nilai RIGHT. Pada paragraf ini gambar akan ditempatkan di
sebelah kanan teks. Hal ini disebabkan atribut ALIGN diisi
dengan nilai RIGHT. Pada paragraf ini gambar akan
ditempatkan di sebelah kanan teks. Hal ini disebabkan
atribut ALIGN diisi dengan nilai RIGHT. Pada paragraf ini
gambar akan ditempatkan di sebelah kanan teks. Hal ini
disebabkan atribut ALIGN diisi dengan nilai RIGHT.
</p>
</body>
</html>
Simpan file dengan nama gambar_plusteks2.html dan tempatkan ke dalam

direktori kerja.
Bukalah file tersebut melalui web browser
Latihan 4 Memperkecil gambar

Catatan: Dalam contoh ini menggunakan file komputer.jpg.

<html>
<head>
<title>gambar</title>
<head>
<body>
<h2>Latihan memperkecil gambar</h2>
<p>
<u>gambar ukuran asli (500X375 pixel ):</u><br />
<img src=”images/komputer.jpg” /> </p>
<p>
<u> gambar yang diperkecil (320X230 pixel) :</u><br />
<img src=”images/komputer.jpg” width =”320” height=”230” />
<p>
<body>
<html>
Simpan file dengan nama gambar_perkecil.html dan tempatkan kedalam

direktori kerja
Latihan 5. Memperbesar Gambar
Catatan: Dalam contoh ini menggunakan file komputer.jpg.

<html>
<head>
<head>
<body>
<h2>Latihan memperbesar gambar</h2>
<p>
<u>gambar ukuran asli (500X375 pixel) :</u><br />
<img src=”images/komputer.jpg” />
</p>
<u> gambar yang diperbesar (600X440 pixel) :</u><br />
<img src=”images/komputer.jpg” width =”600” height=”440” />
<p>
<body>
<html>
Simpan file dengan nama gambar_perkecil.html dan tempatkan kedalam

direktori kerja
Sebaliknya, untuk memperbesar gambar tersebut, kita perlu memperbesar nilai-
nilai dari atribut di atas, misalnya menjadi 600X420 pixel. Kodenya akan tampak
seperti berikut:
<img src=”images”/komputer.jpg” width=”600” height=”440” />
Hati-hati dalam memperbesar gambar, jangan sampai gambar terlihat pecah.

Cari nilai-nilai optimal untuk mengubah nilai dari tersebut WIDTH dan HEIGHT.
Latihan 6: memberi keterangan pada gambar
Catatan : Dalam contoh ini menggunakan file komputer.jpg.
<html>
<head>
<head>
<body>
<h2>Latihan pemberi keterangan pada gambar</h2>
<p>arahkan penunjuk mouse anda ke atas gambar dibawah ini

untuk melihat keterangan yang dimaksud!</p>
<p>
<img src=”images/komputer.jpg”
title=”Komputer Desktop” />
</p>
</body>
</html>
Simpan file dengan nama gambar_keterangan.html dan tempatkan

kedalam direktori kerja
Jalankan file tersebut melalui web browser
Coba perhatikan teks toolip yang muncul pada hasil di atas. Teks tersebut adalah
teks yang diisikan ke dalam atribut title pada tag <img>. Untuk keperluan yang
sama, juga dapat menggunakan atribut ALT.
Latihan 7. Latihan fungsi ALT
Buatlah seperti dokumen html pada Latihan 6, tetapi tag untuk gambarnya
adalah sbb :
<img src="images/notebook.jpg" alt="notebook">
Beri nama file fungsi-alt.html, biarkan di direktori image tanpa file gambar
notebook.jpg
Bukalah file fungsi-alt.html dengan web browser Mozilla Firefox atau browser lain
yang sebelumnya disetting tidak menampilkan gambar, apa yang ditampilkan?
Apa yang dapat kamu simpulkan dengan fungsi atribut ALT?
e. Tes Formatif
Sebutkan tag untuk menampilkan gambar!

Sebutkan atribut dan fungsinya pada tag untuk menampilkan gambar!
Apa yang terjadi jika file ukuran 100 x 100 pxl diperbesar menjadi 500 x 500
pxl?
Apakah file gambar dengan ukuran 500 x 500 pixel kemudian diperkecil
tampilannya pada dokumen html juga memperkecil ukuran file? Coba
dan diskusikan dengan temanmu!
12. Kegiatan Belajar 12 : Format Tampilan Audio
Tujuan Pembelajaran
Memahami format tampilan file audio
Menyajikan audio dalam tampilan web
Uraian Materi
1.) Format tampilan file audio
Kebanyakan file audio diputar melalui sebuah plug-in, misalnya seperti
flash. Namun, browser yang berbeda mungkin memiliki berbagai plug-in. HTML5
mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan
file audio pada halaman web: elemen <audio> </audio>.
Untuk memasukkan suara pada html bisa menggunakan tag <audio>.
Format suara yang telah didukung hingga saat ini adalah MP3, Ogg dan WAP.
File-file Audio yang didukung HTML5 adalah MP3,WAV, dan OGG. Tidak semua
tipe file audio tersebut didukung oleh browser.
OGG merupakan format audio yang didukung oleh Mozilla firefox, opera,
dan google chrome.
MP3 merupakan format audio yang didukung oleh Google Chrome dan
safari.
WAV merupakan format audio yang didukung oleh Mozilla Firefox dan
Opera.
Jenis file audio untuk dukungan pada web browser bisa dilihat pada tabel berikut
ini.
Browser MP3 Wav Ogg
Internet Yes no no
Explorer
Chrome Yes yes yes
Firefox no yes yes
update: firefox 21
running on windows
7, windows 8,
windows vista,
android now supports
mp3
Safari yes yes no
Opera no yes yes
Dari tabel di atas dapat dilihat bahwa bila saat meletakan file mp3 di web
yang kita buat, akan ada beberapa orang yang tidak bisa memutar hasil
embed mp3 di web yan telah kita buat tersebut. Hal tersebut bisa jadi
disebabkan browser yang digunakan tidak support pada file berekstensi
mp3.
MIME untuk format audio
MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme

untuk mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video,
dan lain sebagainya agar browser tidak salah menterjemahkan konten yg
diterima. Tidak hanya pada web, email juga menggunakan MIME. Berikut adalah
tipe mime untuk format audio.
Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav
2.) Menyajikan audio dalam tampilan web

File audio seperti mp3 dapat dilantunkan melalui tag<audio> < /audio>.
Berikut adalah format lengkap untuk memainkan musik ke dalam aplikasi
web.
<html>
<head>
<title>cek suara</title>
</head>
<body>
<audio controls>
<source src="house.mp3" type="audio/mp3">
<source src="house.ogg" type="audio/ogg">
</audio>
</body>
</html>
Ketika mencoba listing program diatas , file audio ditempatkan dalam satu
folder yang sama dengan file *.htm dan nama file audio nya disesuaikan dengan
file audio yang anda gunakan. Untuk listing program di atas menggunakan file
audio bernama "house.mp3" dan "house.ogg".
Bila listing program diatas dijalankan akan menghasilkan tampilan audio di
browser . Tekan tombol play untuk memulai menjalan audionya.
Tombol
play
Gambar 12.1 tampilan audio saat dalam web

Atribut yang digunakan pada tag <audio> </audio> dapat juga
menggunakan atribut autoplay, loop dan controls. Detail atribut pada audio
adalah sebagai berikut :
Atribut Sintaks Keterangan
autoplay <audio autoplay="autoplay"> memulai audio secara otomatis
pada web terbuka
controls <audio controls = "controls" > menampilkan kontrol seperti

volume, audio, dan juga tombol
untuk memulai/pause
loop <audio loop="loop"> mengulang audio kembali

setelah pemutaran awal selesai
muted <audio muted =”muted” > mematikan suara
preload <audio preload="preload"> memuat ulang audio ketika
halaman dimuat ulang
src <audio> Value dari src adalah file audio
source tersebut berserta lokasi filenya
src="/usr/home/damay/house.ogg" bisa juga mengarahkan suatu
</audio> alamat url/web audio tertentu
Berikut adalah listing program audio yang telah diberi atribut control,
autoplay serta loop . Ketika listing program tersebut dijalankan maka audio akan
berjalan secara otomatis tanpa harus ditekan tombol play .
<html>
<head>
<title>cek suara</title>
</head>
<body>
<audio controls = "controls" autoplay="autoplay"
loop="loop" >
<source src="house.mp3" type="audio/mp3">
<source src="house.ogg" type="audio/ogg">
</audio>
</body>
</html>
Bila listing program diatas dijalankan akan menghasilkan tampilan audio di

browser . Audio akan mulai diperdengarkan tanpa harus menekan tombol play.
Audio akan terus dimainkan kembali ketika audio sudah habis waktunya karena
pada atribut audio di set “loop”.
Gambar 12.2 tampilan audio saat dimainkan dalam web
3.) Plug-in audio
Plug-in merupakan sebuah program komputer kecil yang memperluas
fungsi standar dari sebuah browser. Plug-in dapat ditambahkan ke halaman
HTML menggunakan tag <object> atau tag <embed>. Tag <embed>
Tag <embed> diartikan sebagai sebuah wadah untuk konten eksternal (non-
HTML). Adapun potongan kode untuk memainkan file *.mp3 yang
embed/tertanam di halaman web adalah
<!DOCTYPE html>
<html>
<body>
<embed height="50" width="100" src="house.mp3">
<p>Bila anda tidak dapat mendengar suara, maka kemungkinan browser yan anda
gunakan tidak support dengan format file audionya</p>
<p>atau bisa juga speaker anda sedang off :)</p>
</body>
</html>
Setelah kode diatas dijalankan dibrowser mozilla firefox maka pada web
akan akan muncul tampilan berikut, dan file house.mp3 tidak terdengar suaranya
karena browser mozilla firefox tidak mendukung file audio *.mp3.
Gambar 12.3 tampilan audio dengan tag <embed>
Tag <object>
Format audio dapat pula didefiniskan sebagai obyek ekternal untuk konten
non HTML dengan menggunakan tag<obyek>. Berikut ini potongan kode
program untuk menampilkan file audio
<!DOCTYPE html>
<html>
<body>
<object height="50" width="100"

data="house.ogg"></object>
<p>Bila anda tidak dapat mendengar suara, maka

kemungkinan browser yan anda gunakan tidak
support dengan format file audionya</p>
<p>atau bisa juga speaker anda sedang off :)</p>
</body>
</html>
Setelah kode diatas dijalankan dibrowser mozilla firefox maka pada web
akan terdengar suara dari file "house.ogg"
Gambar 12.4 tampilan audio dengan tag <obyek>
147 | P a g e
c. Rangkuman
Dari kegiatan belajar berikut ini dapat dibuat rangkuman materi
sebagai berikut :
cara standar untuk menanamkan file audio pada halaman web: elemen
<audio> </audio>.
File-file Audio yang didukung HTML5 adalah MP3,WAV dan OGG. o
Atribut Audio dituliskan dalam elemen <audio xxxxxx= “ xxxxxx” >
o Atribut Audio yang digunakan dalam penulisan html diantaranya controls,
autoplay, loop, muted, preload dan src.
o File audio dapat juga dituliskan menggunakan tag <embed> dan
tag<object>
Tugas
Buatlah sebuah halaman web yang bisa memainkan audio secara otomatis
namun tidak terlihat media kontrol dari audio, seperti tampilan dibawah ini
Buktikan kebenaran tabel ke kompabilitasan dari format file audio terhadap

jenis browser dengan cara mencoba macam-macam file audio ke dalam
browser internet explorer, chrome, firefox, safari serta opera
Browser MP3 Wav Ogg
Internet yes no no
Explorer
Chrome yes yes yes
Firefox no yes yes
Safari yes yes no
Opera no yes yes
3. Kemudian secara bergantian masing-masing kelompok

mempresentasikan hasilnya didepan kelas.
e. Tes Formatif
Bagaimanakah cara menyisipkan file audio ke dalam tampilan web
Apa sajakah format file audio yang dapat disisipkan dalam tampilan
web
Sebutkan dan jelaskan atribut-atribut yang dimiliki pada penulisan
penyisipan file audio kedalam format web
13. Kegiatan Belajar 13 : Format Tampilan Video dan Animasi

Setelah mengikuti kegiatan belajar 13 ini peserta Didik diharapkan dapat :
Memahami format tampilan file video
Memahami format tampilan animasi
Menyajikan tampilan file video dalam tampilan web
Menyajikan tampilan animasi dalam tampilan web
b. Uraian Materi
Format tampilan file Video
Untuk menampilkan video pada halaman web dapat ditangani secara
langsung oleh HTML5. Tag yang digunakan untuk menampilkan video adalah
<video> </video>. Namun tidak semua format videonya dapat ditampilkan di web.
Sementara ini, hanya beberapa format video yang bisa diproses, di antaranya
adalah WebM ,OGG , MP4. Berikut daftar ke kompabilitasan dari masing-masing
browser terhadap file video.
Browser MP4 WebM Ogg
Internet Explorer Yes no no
Chrome Yes yes yes
Firefox no yes yes
update: firefox 21
running on windows
7, windows 8,
windows vista, and
android now
supports mp4
Safari Yes no no
Opera No yes yes
Dari tabel di atas dapat dilihat bahwa bila saat meletakan file mp4 di web
yang kita buat, akan ada beberapa orang yang tidak bisa memutar hasil embed
mp4 di web yan telah kita buat tersebut. Hal tersebut bisa jadi disebabkan
browser yang digunakan tidak support pada file berekstensi mp4.
Bila anda hendak menampilkan video pada halaman web sedangkan file
video yang anda miliki berformat seperti *.avi, maka video dengan format *.avi
tersebut harus dikonversi terlebih ke format yang didukung oleh HTML5 dengan
menggunakan program gratis atau melalui layanan situs web. Contoh program
yang dapat mengkonversi format video adalah :
Miro Video Converter dapat diunduh secara gratis atau melalui layanan
www.microvideoconverter.com .

FormatFactory di unduh gratis di http://format-factory.en.softonic.com

http://video.online-convert.com layanan konversi secara online
MIME untuk format Video
MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk

mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain
sebagainya agar browser tidak salah menterjemahkan konten yg diterima. Tidak
hanya pada web, email juga menggunakan MIME. Berikut adalah tipe mime
untuk format video.
Format MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg
2) Menyajikan file Video pada tampilan web

File video seperti mp4 dapat dimainkan pada halaman web melalui
tag<video> < /video>. Ketika mencoba menjalankan video pada halaman web
file video ditempatkan dalam satu folder yang sama dengan file *.htm dan nama
file audio nya disesuaikan dengan file audio yang anda gunakan.Berikut adalah
format lengkap untuk memainkan video ke dalam aplikasi web
<html>
<head>
<title>cek
video</title> </head>
<body>
<video width="320" height="240" controls>

<source src="bola.mp4" type="video/mp4">
browser anda tidak mendukung format video ini.
</video>
</body>
</html>
Atribut Height dan Width dalam tag <video> digunakan untuk menentukan
tinggi dan lebar penampilan video. Atribut Src menentukan file video.
Bila listing program diatas dijalankan akan menghasilkan tampilan video di
browser chrome . Tekan tombol play untuk memulai menjalankan videonya
Gambar 13.1 video pada tampilan web menggunakan browser chrome

Bila dijalankan akan menghasilkan tampilan video di browser mozilla firefox,
video tidak akan muncul hal ini dikarenakan browser mozilla firefox tidak
mendukung format file *.mp4.
Gambar 13.2 video pada tampilan web menggunakan browser mozilla firefox
Tag <video> memiliki beberapa atribut, tidak hanya width dan height saja.
Kontrol atribut menambahkan kontrol video, seperti play, pause, dan volume.
Berikut ini adalah atribut – atribut yang digunakan pada tag <video>.
Atribut Sintaks Deskripsi
autoplay <video autoplay="autoplay"> Memulai secara otomatis video
controls <video controls = "controls" > menampilkan tombol kontrol
Atau juga bisa ditulis video
<video controls>
height <video height="240"> mengatur tinggi frame video
width <video width="320"> mengatur lebar frame video
loop <video loop=”loop”> Memutar video secara berulang-

ulang
muted <video muted=”muted”> mematikan fungsi suara pada
video
poster <video poster="anak.gif"> memunculkan poster/gambar
pada saat video buffer atau
diunduh.
preload <video preload="preload"> memuat ulang video
src <source src="bola.mp4" memberikan link video

type="video/mp4">
Poster
Atribute poster berfungsi untuk memunculkan poster/gambar pada saat video
buffer atau diunduh. Misalnya saat buffer video akan muncul gambar “anak.gif”
maka dalam tak <video> disisipkan atribut poster=”anak.gif” dengan catatan file
anak.gif diletakan dalam folder yang sama dengan file html nya.
Gambar 13.3 anak.gif gambar yang akan disisipkan sebagai poster
Berikut adalah potongan kode yang menggunakan atribut poster
<html>
<head>
<title>cek video</title>
</head>
<body>
<video width="320" height="240"

controls poster="anak.gif">
</video>
</body>
</html>
Ketika kode program di atas dijalankan maka akan menghasilka tampilan web
seperti berikut ini
Gambar 13.4 Tampilan video menggunakan atribut poster=”anak.gif”
SRC
Source atau src digunakan disini sama halnya untuk keperluan video dan
audio, hanya saja pada <source> akan menggunakan 2 sumber dimana file
tersebut memiliki isi yang sama tetapi format yang berbeda. Tujuannya disini
adalah web browser akan memilih memutar yang mana nantinya sesuai dengan
format yang didukung oleh web browser tersebut .Dapat dilihat pada potongan
kode berikut :
<html>
<head>
<title>cek video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="bola.ogg" type="video/ogg">
<source src="bola.WebM " type="video/WebM">
</video>
</body>
</html>
4.) Menyajikan animasi pada tampilan web
File animasi juga dapat ditampilkan pada halaman web dengan cara di
embed-kan. Embed digunakan untuk melampirkan file dari eksternal seperti
*.swf dan lain-lain sebagainya. Perintah yang digunakan adalah
<embed src="siboy.swf">
Untuk penulisan kode embed selengkapnya adalah sebagai berikut ini.
<html>
<head>
<title>animasi</title>
</head>
<body>
<embed src="siboy.swf">
<p></p><--file animasi flash siboy.swf--></p>
</body>
</html>
Bila kode program diatas dijalankan maka akan muncul file animasi
“siboy.swf” pada halaman web.
Gambar 13.5 animasi siboy.swf pada halaman web
Pada halaman web selain animasi dalam bentuk *.swf dengan menggunakan
perintah < embed> dapat juga menampilkan animasi dalam bentuk *.gif. Hal ini dapat
dilihat pada potongan kode berikut dimana file rose.gif merupakan gambar bergerak
(animasi)
<html>
<head>
<title>animasi</title>
</head>
<body>
<embed src="rose.gif">
</body>
</html>
Saat kode program diatas dijalankan maka animasi akan muncul

dihalama web seperti terlihat pada gambar berikut
Gambar 13.6 animasi rose.gif pada halaman web
Untuk attribut penggunaan embed bisa ditambahkan pada tag tersebut
attribut seperti pada tabel berikut ini.
Atribut Nilai Keterangan
height pixels mendefenisikan ukuran tinggi frame
media.
src URL memberikan sumber media yang
dilampirkan
type MIME_type menspesifikasikan tipe dari MIME
width pixels mengatur lebar dari frame media pada
saat program dijalankan di browser.
c. Rangkuman
cara standar untuk menanamkan file audio pada halaman web: elemen
<video> </video>.
File-file video yang didukung HTML5 adalah MP4,WebM dan OGG. o
Atribut video dituliskan dalam elemen <video xxxxxx= “ xxxxxx” >
o Atribut Audio yang digunakan dalam penulisan html diantaranya autoplay,
controls, height, width, loop, muted,poster, preload, src.
o Animasi dapat ditampilkan dalam web dengan menuliskan <embed
src="file.swf">
o File animasi berupa *.swf dan *.gif dapat ditampilkan pada halaman web.
Tugas
1. Buatlah sebuah halaman web yang bisa memainkan video secara
otomatis namun tidak terlihat media kontrol dari videonya
2. Buktikan kebenaran tabel ke kompabilitasan dari format file video
terhadap jenis browser dengan cara mencoba macam-macam file video
ke dalam browser internet explorer, chrome, firefox, safari serta opera
Browser MP4 WebM Ogg
Internet Explorer Yes no no
Chrome Yes yes yes
Firefox No yes yes
Safari Yes no no
Opera No yes yes
3. Kemudian secara bergantian masing-masing kelompok
mempresentasikan hasilnya didepan kelas.
e. Tes Formatif
Bagaimanakah cara menyisipkan file video ke dalam tampilan web
Apa sajakah format file video yang dapat disispkan dalam tampilan
web
penyisipan file audio kedalam format web
Bagaimanakah cara menyisipkan file animasi ke dalam tampilan web
Apa sajakah format file animasi yang dapat disispkan dalam tampilan
web
penyisipan file animasi kedalam format web
14. Kegiatan Belajar 14 : Format Tampilan Gambar dengan Map
Memahami format tampilan gambar dengan map
Menyajikan tampilan gambar dengan map
b. Uraian Materi
Format gambar yang ditambahkan dalam dokumen HTML, diantaranya
dalam format GIF, JPEG, PNG. Untuk menambahkan gambar kedalam dokumen
HTML digunakan tag <IMG> dengan dilengkapi atribut img. Atribut tag <img>
yang sering digunakan diantaranya src, align, width, height, alt dan penulisan
skrip secara umum adalah sebagai berikut :
<IMG SRC = ”directori gambar / nama gambar” atribute=”nilai atribut”>
Gambar dengan map memungkinkan untuk memasang beberapa link dalam

satu gambar. Hal tersebut memudahkan kita dalam memanggil sebuah halaman
web dengan hanya menempatkan sekelompok gambar menjadi satu gambar.
Untuk membuat image map, harus ditambahkan atribut USEMAP pada tag
image.
<IMG SRC = ”directori gambar / nama gambar” usemap="#planetmap">
Tampilan gambar dengan map merupakan suatu area pada gambar /image
yang dapat diberi hyperlink area yang biasanya disebut ”hotspots”. Koordinatnya
gambar ditentukan menggunakan bidang geometri seperti rectangle, polygon dan
lain sebagainya. Map sendiri dapat diartikan sebagai peta. Untuk membuat image
map digunakan tag <map> dan <area>.
Perintah <map> dapat didukung oleh pelbagai browser, diantaranya
internet explorer, mozilla firefox, opera, google chrome maupun safari.
.
Gambar 14.1 browser yan mendukung tag <map>
Tag <map> digunakan untuk mendefinisikan sebuah tampilan gambar
map pada sisi client-side. Sebuah gambar map adalah gambar merupakan area
yang dapat diklik. Nama dari gambar yang dibutuhkan pada penulisan atribut
pada tag <map>.Hal ini dikaitkan dengan <img> usemap atribut dan menciptakan
hubungan antara gambar dan map nya. Bagian dari tag <map> berisi sejumlah
elemen <area>, yang mendefinisikan suatu lokasi/daerah saat diklik di gambar
map dapat menghubungkan ke gambar lainnya yang sudah ditentukan.
Format penulisan gambar map
Penulisan skript secara umum adalah sebagai berikut :
<map name =”nama map”>
<area shape = ”type” coords=”value” href=”link”>
</map>
Keterangan:

Nama map nama dari map yang nantinya akan dipanggil oleh <image
usemap>

Area shape jenis shape yang digunakan untuk menggambarkan area dari
gambar map. Adapun jenis shape map yan dapat digunakan
adalah
Tipe Shape Keterangan
Default Semua area image
Rect Area kotak tertentu
Poly Area poligon
Circle Area lingkaran tertentu
Aturan untuk menuliskan nilai untuk menentukan koordinat pada image yang berguna
sebagai area hyperlink dapat dilihat pada daftar tabel di bawah ini
Tipe Shape Keterangan
Rect left-x, top-y, right-x, bottom-y
Circle center-x, center-y, radius
Poly x1, y1, x2, y2, ...xn, yn.
Berikut adalah contoh penulisan kode program untuk menampilkan
gambar map, dimana tag<area> menggunakan atribut shape
(http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap).
<html>
<body>
<p>Klik gambar matahari atau salah satu planet yang

terlihat lebih detail</p>
<img src="planets.gif" width="145" height="126"

alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"

href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury"

href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus"

href="venus.htm">
</map>
</body>
</html>
Pada kode program untuk menampilkan gambar dengan map

 <img src="planets.gif">  menampilkan gambar “planets.gif”
 
<map memberi nama map=planetmap untuk
name="planetmap"> kemudian planetmap tersebut dipanggil oleh
tag<img usemap=”#planetmap”> untuk
ditampilkan pada halaman web sebagai
gambar map.
 
<area shape="rect" Penentuan area map dan koordinat area
coords="0,0,82,126"
Bila kode program diatas dijalankan maka pada browser akan muncul
gambar seperti dibawah ini. Gambar akan menampilkan gambar matahari
beserta 2 planet disekitarnya. Bila diklik misalnya planet A maka akan muncul
gambar D yang merupakan gambar detail planet A.
C
Tampilan map
B setelah A diklik
A
Tampilan map
pertama kali D
Gambar 14.2 tampilan gambar dengan map
Pada HTML 5 ada beberapa atribut baru dan ada pula atribut HTML4.01 yang
tidak berlaku pada HTML 5. Berikut adalah daftar atribut yang berhubungan
dengan gambar map
Atribut Nilai Keterangan
alt Berupa teks, misal Aternatif teks tertentu untuk menunjukan
Alt=”planet” href
coords Titik koordinat Berisi nilai koordinat dari shape/bentuk

coords="0,0,82,126" area yang ditentukan
download Nama file Hyperlink dari target untuk download

Ini baru di HTML 5
href URL Target hyperlink untuk area
hreflang language_code Bahasa tertentu dari target URL

Ini baru di HTML 5
mediaNew media query Media/perangkat tertentu untuk target URL
baru di HTML 5
nohref value Tidak didukung dalam HTML5.
rel alternate baru di HTML 5

author hubungan tertentu antara dokumen yang
bookmark sedang aktif dengan target URL
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
shape default Shape/bentuk yang digunakan sebagai
rect area
circle
poly
target _blank Target URl
_parent
_self
_top
framename
type MIME_type Tipe MIME sebagai target URL
baru di HTML 5
c. Rangkuman
Dari kegiatan belajar ini dapat dibuat rangkuman materi sebagai berikut :
Untuk menambahkan gambar kedalam dokumen HTML digunakan tag

<IMG>
Untuk membuat image map, harus menambahkan atribut USEMAP pada tag
image. <IMG SRC = ”directori gambar / nama gambar”
usemap="#planetmap">
Untuk membuat image map digunakan tag <map> dan <area>.
Tag <map> digunakan untuk mendefinisikan sebuah tampilan gambar map
pada sisi client-side
Bagian dari tag <map> berisi sejumlah elemen <area> o
Format penulisan gambar map
<map name =”nama map”>
<area shape = ”type” coords=”value” href=”link”>
</map>
o Area shape merupakan jenis shape yang digunakan untuk
menggambarkan area dari gambar map.
Area shape yang digunakan pada map Default, Rect, Poly, Circle
o Atribut yang digunakan pada tag <area> diantaranya alt, coords, download,
href, hreflang, media, nohref, rel, shape, target, type
d. Tugas
1. Buatlah tampilan gambar dengan map seperti contoh berikut
No. Tampilan awal gambar map Gambar detail gambar map
1.
ayam
4 Hewan dalam kandang

Kambing
Kucing
sapi
2.
15. Kegiatan Belajar 15 : Menyajikan Hyperlink
Tujuan Pembelajaran
Memahami Anatomi hyperlink
Menyajikan hyperlink
Uraian Materi
Anatomi hyperlink
Salah satu kelebihan dokumen HTML adalah memiliki kemampuan untuk saling
terkait dengan dokumen lain. Link (sebutan singkat dari hyperlink text) adalah
suatu metode yang digunakan dalam HTML untuk membuat hubungan antar
halaman yang terdapat dalam satu situs web. Semua halaman web yang ada di
internet hampir bisa dipastikan memiliki link. Secara umum, fungsi link adalah
untuk memudahkan pengunjung web dalam menulusuri/menjelajahi seluruh isi
atau informasi yang tersimpan dalam situs web bersangkutan.
Dalam keadaan default (normal), suatu link akan ditandari dengan teks
berwarna biru yang memiliki garis bawah. Meskipun demikian, kita dapat
mengubah warna dan gaya link sesuai dengan kebutuhan dan keinginan kita
melalui pembuatan kode CSS.jika kita mengarahkan kursor ke suatu link tertentu,
maka penunjuk mouse akan berubah menjadi gambar tangan dengan satu jari
yang sedang menunjuk, seperti yang ditunjukkan oleh gambar di bawah ini.
Contoh link
Konsep atau cara kerja link dalam HTML dapat diilustrasikan melalui gambar
berikut :
Halaman 1
Halaman 2 Halaman 3
Gambar 15.1. Konsep atau cara kerja link dalam HTML
Pada gambar diatas, masing-masing halaman memiliki keterkaitan satu

sama lain. Artinya, masing-masing halaman tersebut dapat dipanggil atau
ditampilkan dari halaman manapun. Hal ini bisa terjadi jika setiap halaman di atas
memiliki link.
Mengenal Tag <a> (anchor)
Untuk membuat suatu link, HTML menyediakan satu tag khusus, yaitu tag <a>,
yang berpasangan dengan </a>. Setiap teks yang diapit oleh tag ini akan
ditampilkan sebagai link. Bentuk umum pembuat link dalam dokumen HTML
adalah sebagai berikut :
<a href="DokumenLain">Teks Link</a>
Atribut HREF dalam tag <a> berfungsi untuk menentukan dokumen atau
halaman mana yang akan dipanggil saat link tersebut di klik atau dipilih oleh
pengunjung web.
Contoh :
<a href=”index.html”>Home</a><br />
<a href=”about.html”>Tentang Kami</a><br />
<a href=”contact.html”>Kontak</a>
Pada contoh diatas kita membuat tiga buah link dengan teks : Home, Tentang
kami, dan kontak. Ketika pengunjung melakukan klik terhadap link pertama
(home), web browser akan menampilkan dokumen yang disimpan dalam file
index.html. Begitu juga dengan link kedua (Tentang Kami) dan ketiga (Kontak),
setiap di klik akan menjadikan web browser menampilkan dokumen yang
terdapat pada file about.html dan contact.html.
Berikut ini ada beberapa hal yang perlu diperhatikan dalam pemberian nama
dokumen web, agar link dapat berfungsi dengan baik :
Penamaan file dengan huruf kecil semua

Jangan ada spasi serta hindari non-karakter alphabet c.
Rangkuman
Dari kegiatan belajar diatas dapat dibuat rangkuman materi seperti berikut
Link (sebutan singkat dari hyperlink text) adalah suatu metode yang
digunakan dalam HTML untuk membuat hubungan antar halaman yang
terdapat dalam satu situs web.
Tag untuk membuat link adalah <a href=””>, dimana atribut href=”” berisi
URL atau alamat dari halaman yang akan dituju.
Tugas
Buatlah dokumen HTML berikut :
<html>
<head>
<title>Link</title>
</head>
<body>
<h2>Latihan Membuat Link</h2>
<h3><u>Dokumen 1</u></h3>
<p>Klik link di bawah ini untuk melihat isi halaman

web pada dokumen2.html:</p>
<p><a href=”link-dokumen2.html”>Lihat Dokumen

2</a></p>
</body>
</html>
Simpan file dengan nama link-dokumen1.html dan tempatkan ke dalam direktori

kerja.
Buatlah file baru, lalu buatlah dokumen HTML berikut :
<html>
<head>
<title>Link</title>
</head>
<body>
<h2>Latihan Membuat Link</h2>
<h3><u>Dokumen 2</u></h3>
<p>
Ini adalah isi halaman yang terdapat pada dokumen 2.

Untuk kembali ke dokumen 1, silahkan klik link di
bawah ini.
</p>
<p>
<a href=”link-dokumen1.html”>Lihat Dokumen 1</a>
</p>
</body>
</html>
Bukalah file link-dokumen1.html melalui web browser

Klik link yang ada pada dokumen1. Apa yang kamu lihat ? halaman web akan
berpindah ke dokumen 2 bukan ?
Klik link yang ada pada dokumen 2. Kali ini, kamu akan melihat kembali isi
halaman dari dokumen1.
16. Kegiatan Belajar 16 : Jenis – Jenis Link dalam HTML
Tujuan Pembelajaran
Memahami jenis-jenis link dalam HTML
Menyajikan jenis-jenis link dalam HTML
Uraian Materi
Jenis-jenis Link dalam HTML
Dalam HTML, link dibedakan menjadi 3 jenis, yaitu :
Link absolut
Link relatif
Link ke bagian dokumen tertentu
HTML membedakan ketiga jenis link diatas berdasarkan lokasi atau alamat
dokumen yang akan diakses. Dengan demikian, perbedaannya hanya terletak
pada nilai atribut HREF-nya saja.
Link Absolut
Link Absolut adalah link yang akan menunjuk ke halaman dari situs web lain.
Penulisan alamatnya pun harus ditulis secara lengkap. Sebagai contoh, jika tema
atau isi dari situs web yang kita buat adalah pemrograman HTML, maka kita
dapat membuat link ke situs web lain yang memiliki tema yang sama atau
relevan. Tujuannya adalah agar pengunjung bisa memperoleh informasi lebih
tentang tema tersebut yang ‘mungkin’ tidak/belum kita bahas pada situs web kita.
Contoh :
<a href=http://www.w3.org/>W3</a>
Pada contoh diatas, tujuan link yang dibuat akan mengarah ke situs web
http://www.w3.org/
Link Relatif
Link Relatif adalah link yang tujuannya mengarah ke dokumen-dokumen lain
yang masih berada di dalam satu situs web yang sama (komputer yang sama).
Penulisan alamat tujuannya pun tidak perlu ditulis secara lengkap, cukup nama
dokumennya saja, dan nama direktorinya (jika ada).
Perhatikan contoh kode berikut :
<a href=”kontak.html”>Kontak</a>
<a href=”images/jeep/sahara.jpg”>Lihat Foto Jeep Wrangler

Sahara</a>
Tidak perlu ditulis lengkap seperti berikut :
<a href=http://www.situskita.com/kontak.html>Kontak</a>
<a href=http://www.situskita.com/images/jeep/sahara.jpg>
Lihat Foto Jeep Wrangler Sahara</a>
Kita tidak perlu menulis alamat secara lengkap karena server web akan mencari
file kantak.html dan sahara.jpg di computer yang sama. jika halaman utama dari
situs web yang akan kita buat adalah index. html, maka file kontak. html harus di
tempatkan di dalam direktori yang sama dengan file index.html ; sedangkan
sahara.jpg harus berada di dalam direktori images\jeep. Jika digambarkan,
struktur di rektori dan file-nya akan tampak sebagai berikut :
root
images
jeep
sahara.jpg
Index.html
Kontak.html
Link ke Bagian Dokumen tertentu
Materi ini akan dibahas pada Kegiatan Belajar berikutnya.
Menjadikan Gambar sebagai Link
Selain link berupa teks, gambar juga dapat dijadikan sebagai link. Konsepnya
sebenarnya sama saja dengan link berupa teks, perbedaannya hanya perlu
mengganti teks yang dijadikan sebagai link dengan tag <img>.
Link yang berupa teks:
<a href=”dokumenlain”>teks link</a>
Link yang berupa gambar:
<a href=”dokumenlain”><img src=”NamaFileGambar” /></a>
Contoh :
<a href=”detail-sahara.html”>
<img src=”images/jeep/saharal.jpg” />
</a>
Pada contoh di atas kita menjadikan gambar sahara1.jpg yang tersimpan di
dalam direktori images\jeep sebagai link untuk menuju ke dokumen detail-
sahara.html.
c. Rangkuman
Dari kegiatan belajar ini dapat dibuat rangkuman sebagai berikut :
HTML tag <a> mendefinisikan hyperlink.
Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang
dapat diklik untuk menuju ke dokumen lain.
Untuk memindahkan kursor di atas link di halaman Web, panah akan berubah
menjadi tangan kecil.
Atribut yang paling penting dari elemen <a> adalah atribut href, yang
menunjukkan tujuan link.
Jenis-jenis link dalam HTML, yaitu :
Link absolut adalah link yang akan menunjuk ke halaman dari situs web lain
Link relative adalah link ke dokumen internal, dan penulisan alamat tujuannya
pun tidak perlu ditulis secara lengkap, cukup nama dokumennya saja, dan
nama direktorinya
Link ke bagian dokumen tertentu atau internal link
HTML membedakan ketiga jenis link diatas berdasarkan lokasi atau alamat
dokumen yang akan diakses
Tugas
Link
Buat direktori baru dengan nama jeep di dalam direktori images
Copy file gambar yang akan digunakan ke dalam direktori image\jeep

Catatan: dalam contoh ini menggunakan file gambar dengan nama sahara.jpg
Buatlah dua dokumen HTML berikut:
index.html
<html>
<head>
<title> link< / title>
</head>
<body>
<h2> Latihan Membuat link relatif</h2>
<p>Di jual Jeep Wrangler Sahara ( DIJAMIN PUAS ! ) :</p>
<p>
Tahun : 2011 <br />
Harga : Rp 975.000.000, - (NEGO) <br />
<p>
<a href= “images/jeep/sahara.jpg”> Lihat foto. mobil</a>
<br />
Untuk peminat serius, silahkan
<a href= “kontak.html”>hubungi kami</a>
</body>
</html>
kontak.html
<html>
<head>
<title>link</title>
</head>
<body>
<h2>Latihan membuat link relatif</h2>
<p>Untuk peminat serius, silahkan hubungi kami di : </p>
<strong>Auto Jeep Perkasa Showroom</strong><br /> Jl.
Garuda Sakti no. 13 Bandung<br />

999-00333
</p>
<p><a href= “index.html”> kembali ke halaman utama</a></p>
</boby>
</html>
Tempatkan ke dalam direktori kerja

Jalankan file index.html melalui web brower
Coba buka file index.html dan bagaimana link yang terjadi?
Link Gambar
Copy file gambar yang akan digunakan ke dalam direktori images\jeep
Catatan : dalam contoh ini mengunakan file sahara.jpg
Jalankan aplikasi text editor
Buatlah dua file baru sebagai dokumen HTML berikut :
link –gambar .html
<html>
<head>
<tittle>Link</title>
</head>
<body>
<h2>Latihan Membuat Link Berupa gambar</h2>
<p>Klik gambar dibawah ini untuk

melihat informasi detail:</p>
<a href="detail-sahara.html">
<img src="images/jeep/saharal.jpg" />

</a>
</body>
</html>
detail-sahara.html
<html>
<head>
<title>link</title>
</head>
<body>
<h2>Latihan Membuat Link Berupa Gambar</h2>
<p>
<img src=”images/jeep/sahara1.jpg”align=”left”/>
Merk: <strong>jeep</strong><br /> Seri:
<strong>Wrangler</strong><br />
Tipe: <strong>Unlimited Sahara</strong><br />
Tahun: Pembuatan: 2011<br />
Transmisi: Automatic<br />
Silinder: 3.700<br />
Kilometer: 0 km (baru) <br />
Harga: Rp 975.000.00,- <br />
Keterangan tambahan: Mewah dan Gagah (Ready Stock)
<p/>
<p>
<a href=”link-gambar.html”> Kembali ke halaman utama<a/>
<p/>
</body>
</html>
Tempatkan kedua file tersebut ke dalam direktori kerja

Bukalah file link-gambar.html melalui web browser
Pada latihan di atas kita menggunakan gambar sebagai link untuk menuju atau
mengarah ke halaman web lain. Untuk mengetahui cara kerjanya, coba klik
gambar di atas!
Klik link Kembali ke halaman utama untuk mengarah ke halaman web semula
e. Tes Formatif
Sebutkan jenis-jenis link dalam dokumen HTML

Bagian apa yang penting dalam tag link?
Bagaimana cara menjadikan gambar sebagai link? Berikan contohnya!
Jelaskan beberapa tag link berikut ini :
<a href="info.html">Informasi Lengkap</a>
<a href="www.kemdikbud.go.id">Kementerian Pendidikan dan
Kebudayaan</a>
Kegiatan Belajar 17 : Menyajikan Link ke Bagian Dokumen
HTML
Tujuan Pembelajaran
Memahami jenis-jenis link ke Bagian Dokumen HTML
Menyajikan link ke Bagian Dokumen HTML
b. Uraian Materi
Link ke Bagian Dokumen Tertentu
Link dapat berperan untuk mengarahkan ke bagian teks atau gambar tertentu
yang masih berada dalam satu dokumen yang sama. Link seperti ini biasanya
pada halaman web yang memiliki informasi yang panjang atau pada dokumen
yang memiliki daftar isi di bagian atasnya. Tujuannya adalah agar para
pengunjung tidak perlu melakukan scrolling pada halaman tersebut untuk
menuju/kembali tertentu dalam dokumen bersangkutan.
Sapat juga membuat link internal dalam suatu halaman - misalnya daftar isi di
atas dengan link ke setiap bab . Yang perlu digunakan adalah atribut yang
disebut id (identifikasi) dan simbol “#”.
Gunakan atribut id untuk menandai elemen yang ingin ditautkan/link. Sebagai

contoh:
<h1 id="heading1">heading 1</h1>
Sekarang kita dapat membuat link ke elemen dengan menggunakan ”#” di atribut
link. Tanda “#” harus diikuti dengan id dari tag yang ingin ditautkan/link. Sebagai
contoh:
<a href="#heading1"> Menuju ke heading 1</a>
Berikut ini contoh bila ada beberapa link internal
<html>
<head> </head>
<body>
<a href="#heading1">Link ke heading 1</a>

<a href="#heading2">Link ke heading 2</a>
</body>
</html>
Link ke bagian dokumen tertentu dapat di bedakan lagi menjadi dua jenis, yaitu :
Link ke bagian tertentu dalam dokumen yang sama
Link ke bagian tertentu dalam dokumen lain
Link ke Bagian Tertentu dalam Dokumen yang sama
Untuk membuat link semacam ini, terlebih dahulu kita perlu memberikan id atau
nama pada bagian teks atau gambar tertentu sebagai bagian yang akan dituju.
Pemberian id tersebut dilakukan dengan cara menuliskan kode berikut :
<a id=”tujuanLink”>Teks atau gambar</a>
Selanjutnya untuk membuat link yang akan mengarah ke teks atau gambar
yang telah di namai tersebut adalah dengan menuliskan kode seperti berikut :
<a href=”#Tujuanlink”>Teks atau gambar</a>
Tanda # di atas menunjukan bahwa tujuan link adalah nama bagian, bukan
berupa file.
Link ke Bagian Tertentu Dalam Dokumen Lain
Selain bagian yang berada dalam satu dokumen, link dapat juga mengarah ke
sesuatu bagian tertentu yang terdapat dalam dokumen lain. Untuk membuat link
semacam ini, bagian tertentu dalam dokumen lain tersebut harus di tantai dengan
pemberian id seperti pada sub-bab sebelumnya. Perbedaan hanya terletak pada
penulisan tujuan link-nya saja. Pada kasus seperti ini, kita perlu menambahkan id
bagian pada tujuan link, seperti berikut:
<a href=”namafile#idBagian”>Teks atau gambar</a>
c. Rangkuman
Dari kegiatan belajar ini dapat dibuat rangkuman materi sebagai berikut :
Link dapat dibuat ke bagian teks atau gambar tertentu yang masih berada
dalam satu dokumen yang sama. Link seperti ini biasanya pada halaman
web yang memiliki informasi yang panjang atau pada dokumen yang
memiliki daftar isi di bagian atasnya. Tujuannya adalah agar para
pengunjung tidak perlu melakukan scrolling pada halaman tersebut untuk
menuju/kembali tertentu dalam dokumen bersangkutan
Caranya adalah memberikan nama atau id pada bagian teks atau gambar
tertentu sebagai bagian yang akan dituju. Yang perlu digunakan adalah
atribut yang disebut id (identifikasi) dan simbol “#”. Gunakan tag: <a id= “
tujuanLink”>Teks atau gambar</a>
Kemudian untuk tag link dengan cara : <a href= “#Tujuanlink”>Teks atau
gambar</a>
d. Tugas
Membuat link ke bagian tertentu dalam satu Dokumen
Buatlah dokumen html dengan kode berikut:
<html>
<head>
<title>link>/title>
</head>
<body>
<h2>Latihan membuat ke bagian tertentu dalam satu dokumen</h2>
<a id= “atas”></a>
<p> pilih salah satu judul buku berikut untuk melihat deskripsi : </p>
<a href=”#c”> pemrograman C</a><br />
<a href=”#cpp”> pemrograman C++</a><br />
<a href=”#bcb”> pemrogaraman Borland C++Builder</a>
</p>
<p><a id=”c”><strong>pemrograman C</strong> </a></p>
<p>
C merupakan bahasa pemrograman yang sudah tidak digunakan lagi kehandalannya dan
banyak digunakan untuk membuat program-progarm dalam berbagai bidang, termasuk
PEMROGRAMAN WEB SEMESTER

pembuatan kompilator (compiler) dan sistem operasi. Sampai saat ini, C masih tetap
menjadi bahasa populer dan beribawah dalam kanca pemrograman. Sejauh ini, C juga
telah menjadi inspirasi bagi kelahiran bahasa-bahasa pemrograman baru, seperti C++,
java, dan juga yang lainnya ; sehingga dari sisi sintak kontrol programnya, ketika bahasa
ini bisa dikatakan sama. Bahasa pemrograman C sangatlah fleksibel dan portebel,
sehingga dapat di tempatkan dan di jalankan di dalam beragam sistem operasi. Pada
umum nya, C banyak digunakan untuk melakukan interfacing antar perangkat keras
(hardwere) agar dapat berkomunikasi satu sama lainnya. <br /> <a href=”atas”>
kembali ke atas</ a>
</p>
<p><a id=”cpp”><strong>pemrograman C++</strong></a</p>
<p>
C++ merupakan bahasa pemrograman yang sangat populer dan telah banyak digunakan
untuk mengembangkan perangkat lunak di berbagai bidang; seperti : telekomunikasi,
embedded system, bisnis, dan hiburan. Salah satu kehandalan dari C++ adalah bahasa
ini mendukung sepenuhnya konsep pemrograman berorientasi objek, atau yang lebih di
kenal dengan OPP (object oriented programming). (cross platform), C++ juga telah
manjadi bagian hidup dari sebagian para pecinta linux.<br />
<a href=”#atas”>kembali ke atas</a>
</p>
<p>
<a id=”bcb”>
<strong>pemrograman borland C++builder</strong>
</a>
</p>
<p>
C++builder adalah sebuah perangkat lunak berbasis C++ yang digunakan untuk
melakukan pembuatan aplikasi (baik visual maupun non-visual) yang berjalan di atas
platform microsoft windows. Selain itu, C++builder juga banyak di gunakan sebagai alat
untuk pengembangan file-file DLL (Dynamic Link Library ). Dengan adanya kemudahan
dan dukungan visual yang di tawarkan di dalamnya, C++builder banyak di gunakan oleh
para programmer profesional untuk pengembangan aplikasi yang beraneka ragam
jenisnya, seperti : openGL, multimedia, games, database, embedded system, dan banyak
lagi yang lainnya.<br />
<a href=”#atas”>kembali ke atas</a>
</p >
</body>
</html>
Simpan file dengan nama link-bagiandokumen1.html dan tempatkan ke dalam

direktori kerja
Jalan file tersebut melalui web browser
Pada latihan di atas kita membuat 4 bagian yang di jadikan sebagai tujuan link,
yaitu :
Atas. Bagian ini adalah bagian paling atas dari dokumen dan berguna
untuk kembali ke bagian menu (Jika penunjung sedang mengaktifkan
bagian bawah dokumen)
C. Bagian ini adalah bagian yang menerangkan tentang buku

pemrograman C
Cpp. Bagian ini adalah bagian yang menerangkan tentang buku

pemrograman C++.
Bcb. Bagian ini adalah bagian yang menerangkan tentang buku

pemrograman borland C++Builder.
Untuk menguji cara kerja dari link di atas, coba anda klik link kedua
(pemrograman C++), maka web browser akan menampilkan bagian yang di
pilih, seperti ditujukan oleh gambar berikut:
Klik link kembali ke atas jika anda ingin kembali ke tampilan semula
(tampilan awal).
Membuat Link ke Bagian Tertentu dalam Dokumen Lain

Jalankan aplikasi Text Editor
Buatlah dua file dan isikan kode berikut:
dokumen-1.html
<html>
<head>
<title>Daftar IsiLink</title>
</head>
<body>
<h2> Latihan Membuat ke Bagian Tertentu dalam Dokumen

lain</h2>
<p>Isi Bab :</p>
<p><a href="dokumen-2.htmli#isibab1">1. Bab 1</a><br>
<a href="dokumen-2.html#isibab2">2. Bab 2</a><br>
<a href="dokumen-2.html#isibab3">3. Bab 3</a></p>
</body>
</html>
Dokumen-2.html
<html>
<head>
<title>link</title>
</head>
<body>
<h2>Latihan Membuat ke Bagian Tertentu dalam Dokumen

Lain</h2>
<p><a id=”c”><strong>pemrograman C</strong ></a></p> <p><a
id=”cpp”><strong>pemrograman C++</strong ></a></p>
<p><a id=”bcb”><strong> Pemrograman borlond C+

+Builder </strong ></a></p>
</body>
</html>
Tes Formatif
Bagaimana cara menyajikan link dalam dokumen tertentu pada file yang
sama?
Bagaimana cara menyajikan link dalam dokumen tertentu pada file yang
berbeda?
Jelaskan maksud dari beberapa tag link berikut ini :
<a href="#top">Kembali ke atas</a>
<a href="visimisi.html#visi">VISI</a>
Kegiatan Belajar 18 : Menyajikan Format Target Link, Email dan
Telepon
Tujuan Pembelajaran
Memahami Format target link, email dan telepon
Menyajikan Format target link, email dan telepon
Uraian Materi
1) Menentukan Target Link
Target atau tujuan yang dihubungkan melalui suatu link dapat ditentukan sendiri
oleh kita. Target yang di maksud di sini adalah dimana dokumen akan
ditempatkan atau ditampilkan. Dalam keadaan default (ketika atribut TARGET
tidak di sertakan), dokumen baru yang ditampilkan pada saat link dipilih akan
menutup atau menimpa dokumen lama (dokumen yang mengandung link
bersangkutan). Untuk melakukan hal, kita hanya perlu menambahkan atribut
TARGET di dalam tag <a>, yang memiliki bentuk umum penulisan seperti
berikut:
<a href=”NamaDokumen” target=”NamaTarget”>Teks/Gambar<a/>
NamaDokumen adalah namadokumen yang akan di tampilkan jika link

bersangkutan dipilih/diklik dan NamaTarget adalah target atau tempat tujuan dari
dokumen yang akan ditampilkan. NamaTarget bisa bernilai _BLANK maupun
nama frame (jika layar web kita bagi dengan menggunakan frame)
2) Link Email
Selain menghubungkan antara halaman dan antara bagian-bagian dari satu

halaman, tag <a> memungkinkan kita untuk link ke alamat email. Ini adalah cara
paling sederhana untuk memungkinkan pengunjung halaman web kita untuk
"mengirim pesan" kepada kita. Dengan memberikan link yang dapat diklik ke
alamat email kita, maka mudah bagi pengunjung untuk mengirim pesan dan
pengunjung tidak perlu mengetikkan alamat email.
Cara penulisan link HTML ke alamat email adalah seperti berikut :
<a href="mailto:nama@yourdomain.com"> Kirim pesan email</a>
Kata-kata “Kirim pesan email” akan muncul seperti link <a> lainnya .
Jika kita ingin orang melihat alamat email kita yang sebenarnya ( sehingga
mereka dapat mencata atau mengirim pesan menggunakan program email yang
berbeda ), adalah seperti ini :
<a href="mailto:nama@yourdomain.com">nama@yourdomain.com</a>
Dalam kebanyakan web browser, bila seseorang mengklik link tersebut , maka
terbuka sebuah jendela di mana dia dapat mengetik pesan email yang segera
dikirimkan kepada kita
Kita juga dapat memberikan beberapa informasi tambahan di link sehingga
subjek dan isi pesan juga langsung tertulis. Yaitu dengan menambahkan variabel
subject (perihal) dan body (isi pesan). Pisahkan variabel dari alamat email
dengan tanda tanya ( ? ) , Nilai dari variabel dengan tanda sama dengan ( = ) ,
dan kemudian memisahkan masing-masing variabel dan nilai pasangan dengan
ampersand ( & ). Berikut adalah contoh menentukan subjek dan body untuk
contoh email sebelumnya :
<a href = "mailto:author@somedomain.com?subject=Pertanyaan &
body=Kapan edisi berikutnya keluar ?"> Author@somedomain.com
</a>
Ketika pengguna mengklik link ini , pesan email dibuat dengan
author@somedomain.com sebagai penerima, “Pertanyaan” sebagai
subject/perihal , dan Kapan edisi berikutnya keluar ? sebagai isi pesan .
3) Link Telepon
Kita juga dapat membuat link telepon di dokumen web kita. Hal ini karena banyak
pengunjung web menggunakan smartphone untuk mengakses website kita,
sehingga dapat digunakan untuk melakukan panggilan telepon ! Jadi kita dapat
menuliskan nomor telepon, sehingga pengunjung dapat langsung klik untuk
menghubungi nomor telepon terebut. Cara penulisannya adalah seperticontoh
berikut .
<a href="tel:0123456789">Hubungi kami di (012) 3456789 </a>
Ketika pengguna ponsel menekan link tersebut, mereka mendapatkan kotak

peringatan meminta mereka untuk mengkonfirmasi bahwa mereka ingin
200 | P a g e
melakukan panggilan telepon ke nomor tersebut . Fitur ini didukung pada
perangkat mobile yang paling baru, termasuk iOS , Android , Blackberry ,
Symbian , Internet Explorer , dan Opera Mini .
iPad dan iPod Touch tidak dapat membuat panggilan , tetapi akan menawarkan
untuk membuat kontak baru dari nomor tersebut.
Sedangkan untuk pengguna desktop tidak terjadi apa-apa untuk link tersebut.
Ada beberapa cara terbaik untuk menggunakan link telepon :
Dianjurkan agar memasukkan nomor lengkap panggilan internasional ,
termasuk kode Negara, seperti +62 untuk Indonesia, karena tidak
diketahui di Negara mana pengguna akan mengakses web kita .
menuliskan nomor telepon ke dalam isi link sehingga jika link tidak bekerja ,
nomor telepon masih terbaca .
Android dan iPhone memiliki fitur yang dapat mendeteksi nomor telepon dan
secara otomatis mengubah mereka menjadi link. Sayangnya , beberapa
nomor 10 - digit yang bukan nomor telepon mungkin akan berubah
menjadi link juga. Jika dokumen kita memiliki string angka yang mungkin
akan dideteksi sebagai nomor telepon, kita dapat mengaktifkan auto -
deteksi off dengan memasukkan elemen meta berikut dalam kepala
dokumen kita .
<meta name="format-detection" content="telephone=no">
Untuk perangkat Blackberry , menggunakan berikut:
<meta http-equiv="x-rim-auto-match" content="none">
c. Rangkuman
Dari penjelasan materi pada kegiatan belajar ini dapat dibuat rangkuman
sebagai berikut :
Atribut TARGET di dalam tag <a>, memiliki bentuk umum penulisan seperti
berikut:
<a href=”NamaDokumen”
target=”NamaTarget”>Teks/Gambar<a/
>
Cara penulisan link HTML ke alamat email adalah seperti berikut :
<a href="mailto:nama@yourdomain.com"> Kirim pesan email
</a>
Cara penulisan link telepon adalah seperti berikut :.
<a href="tel:0123456789"> Hubungi kami di (012) 3456789

</a>
Tugas
Isikan kode berikut:
Link target :
<html>
<head>
<title>link</title>
</head>
<body>
<h2>Latihan Menampilkan Dokumen pada Window Baru</h2>
<p>Klik salah satu link berikut:</p>
<a href=”http://www.w3schools.com” target=”_blank”>
W3 Schools</a><br />
</body>
</html>
Simpan file dengan nama link-target.html dan tempatkan ke dalam

direktori kerja
Bukalah file tersebut menggunakan web browser
Link Email
<html>
<head>
<title>Mailto</title>
</head>
<body>
kirim email ke humas SMK Bisa : <a
href="mailto:info@smk-kita.sch.id">info@smk-
bisa.sch.id</a>
</body>
</html>
e. Tes Formatif
Bagaimana cara menyajikan target link? Berikan contohnya!
Buatlah link untuk berikut ini :
Email : info@hotelku.com
Email : cs@tokobuku.com, Subject: Tanya Buku, Isi Pesan: Apa judul buku
baru?
Telepon : 0341-491239
Telepon : 0812-345-6789
Kegiatan Belajar 19 : Mengidentifasi Anatomi dan Cara Kerja Form
Tujuan Pembelajaran.
Setelah mengikuti kegiatan belajar 19 diharapkan Peserta Didik dapat:
Mengetahui penggunaan form HTML
Memahami anatomi form HTML
Mengetahui cara kerja form HTML
Memahami cara kerja form HTML
Mengidentifkasi anatomi dan cara kerja form
Uraian materi.
Definisi dan fungsi form
Form merupakan salah satu bentuk halaman web yang digunakan untuk
menerima masukan dari pengguna, untuk selanjutnya masukan dari pengguna
tersebut diolah menggunakan bahasa pemrograman web, baik secara server
side scripting(misalkan PHP, JSP) ataupun client-side scripting (javascript). Form
dapat digunakan untuk berbagai keperluan seperti keperluan login, transaksi
penjualan, mengumpulkan informasi atau meminta umpan balik dari pengguna,
menawarkan barang/jasa secara on-line dan sebagainya. Form sangat sering kita
jumpai dalam satu aplikasi sistem informasi berbasis web.
Anatomi dari form

Standard atau format umum penulisan dari form adalah sebagai berikut :
<Form metode=”post/get” action=”….”>
……
……
……
</form>
Berikut ini adalah beberapa variasi yang dapat diterapkan pada atribut<form> :
<FORM ACTION=action base> form tags </FORM>
<FORM METHOD=method> form tags </FORM>
<FORM ENCTYPE=media type> form tags </FORM>
<FORM ACTION=action base TARGET="target window name">

form tags
</FORM> <FORM SCRIPT=URL> form tags </FORM>
Catatan : target window name diisikan berupa :

_blank
_self
_parent
_top
Di antara elemen <form> dan </form> digunakan elemen – elemen HTML

<input> yang berfungsi untuk mendefinisikan input yang akan dimasukkan
oleh pengguna. Format umum dari penulisan elemen HTML <input> adalah
sebagai berikut :
<input
name="name"
size="number"
type="text"|"checkbox"|"radio"|"submit"|"reset"
value="value"
checked >
Pada jenis masukan (input) dari halaman web minimal harus mempunyai
atribut jenis (type), nama (name) dan nilai (value) default. Disamping atribut type,
masing-masing elemen input memiliki atribut-atribut yang lain dan beberapa
atribut tersebut berlaku untuk beberapa jenis elemen input. Sebagai contoh
adalah elemen <input> yang atribut TYPE-nya adalah text memiliki atribut antara lain :
Name : untuk menamai kotak
Value : untuk menandai atau menampung teks
Size : mengatur ukuran teks pada kotak

maxlength : menentukan panjang maksimum teks
Masing-masing jenis input memiliki karakteristik yang berbeda, dan

pemilihan penggunaannya disesuaikan dengan kesesuaian nilai dari input data
yang dikelola.
Berikut adalah salah satu contoh listing kode dari tag elemen form - input
<form >
Nama : <input type=”text” name=”fnama”><br>
<input name=”negara” value=”Indonesia”>
<input type=”submit” value=”Submit”>

</form>
Gambar 19.1 hidden input file
Cara Kerja Form

Form HTML digunakan untuk melewatkan data dari klien ke server. Kerja
Web bekerja didasarkan pada arsitektur client / server yang sangat dasar yang
dapat diringkas sebagai berikut : klien (web browser ) mengirim permintaan ke
server (misalnya apache , nginx , IIS , Tomcat , dan lain sebagainya ) ,
menggunakan protokol HTTP . Server menjawab requets dari form dengan
menggunakan protokol yang sama .
Gambar 19.2 client – server
A. Sisi Klien
Server akan memproses data dan kemudian mengirim respon kepada pengguna.
Disisi klien memastikan data mana yang dkirim melalui elemen form. Di sisi klien
HTML untuk mengkonfigurasi permintaan HTTP untuk mengirim data ke server .
Hal ini memungkinkan pengguna untuk memberikan informasi yang akan
disampaikan dalam permintaan HTTP .
Atribut yang sangat peran saat pengiriman data adalah action dan method.
Atribut – atribut dari elemen HTML <form> adalah sebagai berikut :
Atribut Keterangan
Method Metode untuk pengiriman data ke tujuan yaitu :
Get : mengirim data ke server dengan cara meletakan data
pada bagian akhir dari Url yang dituju
Post : datanya dikirim terpisah
Action Aksi yang muncul ketika pengguna meneka tombol tertentu
Atribut Action
Atribut ini mendefinisikan mana data akan dikirim . Nilainya harus
merupakan URL yang valid . Jika atribut ini tidak menyediakan , data akan
dikirim ke URL halaman ini berisi formulir. Contoh penggunaan atribut action
1.data dikirim ke http://foo.com
<form action="http://foo.com">
2.Data dikirim ke server yang sama bahwa itu host halaman form , tapi ke URL
yang berbeda pada server :
<form action="/somewhere_else">
3.Tanpa atribut , seperti di bawah , atribut <form> menyebabkan data yang akan
dikirim ke halaman yang meliputi bentuk:
<form>
Notasi berikut untuk menunjukkan bahwa data harus dikirim ke halaman yang
sama yang berisi formulir , ini diperlukan karena sampai HTML5 , atribut tindakan
yang diperlukan .
<form action="#">
Atribut Method
Atribut metode untuk pengiriman data menggunakan post dan get. Atribut ini
mendefinisikan bagaimana data dikirim . Protokol HTTP menyediakan beberapa
cara untuk melakukan permintaan , data bentuk HTML dapat dikirim melalui
setidaknya dua dari mereka : metode GET dan metode POST . Permintaan
HTTP terdiri dari dua bagian : sebuah header yang berisi sekumpulan metadata
global mengenai kemampuan browser , dan body yang dapat berisi informasi
yang diperlukan ke server untuk memproses permintaan khusus .
Methode GET
Metode GET adalah metode yang digunakan oleh browser untuk meminta
server untuk mengirim kembali resource yang dib erikan : " hey , server, kirimkan
resource ini . " Dalam hal ini , browser mengirimkan sebuah body kosong .
Karena body kosong , jika formulir dikirim menggunakan metode ini , data yang
dikirim ke server ditambahkan ke URL .
Contoh penerapan mehode get pada elemen <form>
<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<form action="http://foo.com" method="get">
<input name="say" value="Hallo">
<input name="to" value="Semua">
<button>kirimkan salam</button>
</form
</body>
</html>
Bila listing kode diatas dijalankan maka akan menghasilkan tampilan
sebagai berikut
Gambar 19.3 penerapan methode get

Dari tampilan web pada gambar diatas, bila tombol ‘kirimkan salam” diklik
akan mengarah ke suatu alamat web, yaitu foo.com seperti yang terlihat pada
gambar dibawah.
Gambar 19.4 hasil button dengan method get
Dengan menggunakan method get, request HTTP aka terlihat sebagai

berikut:
GET /?say=Hi&to=Mom HTTP/1.1
Host: foo.com
Methode POST
Metode POST sedikit berbeda , POST mengirimkan server untuk meminta
respon yang memperhitungkan data yang tersedia dalam request. HTTP : " hey
Server , lihatlah data ini dan saya mengirimkan kembali hasil yang baik . " Jika
form yang dikirim dengan menggunakan data metod POST akan ditambahkan
dalam body dari HTTP yang request .
Contoh penerapan mehode POST pada elemen <form>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="http://foo.com" method="post">
<input name="say" value="Hall">
<input name="to" value="Semua">
<button>kirim POST</button>
</form>
</form
</body>
</html>
sebagai berikut
Gambar 19.5 penerapan methode post

Dari tampilan web pada gambar diatas, bila tombol ‘kirim POST” diklik akan
mengarah ke suatu alamat web, yaitu foo.com seperti yang terlihat pada
gambar dibawah.
Gambar 19.6 hasil button dengan method post
Dengan menggunakan method post, request HTTP akan terlihat sebagai

berikut:
POST / HTTP/1.1
Host: foo.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 13
say=Hall&to=Semua
Content-Length mengindikasikan ukuran dari body sedangkan Content-Type

merupakan type data resource dari si pengirim ke server.
B. Sisi Server
Apapun metode HTTP yabg digunakan (get atau post), server menerima
string yang akan di order untuk mendapatkan data list sebagai key atau nilai
pasangan. Cara mengakses list/daftar tergantung pada platform pengembangan
yang digunakan.
4) Elemen form html

Form HTML digunakan untuk memilih pelbagai macam inputan yang
disediakan. Data bisa diinputan dalam bentuk input teks , pilihan radio button,
check box dan lain sebagainya. Bentuk inputan tersebut dikemas elemen dalam
tag-tag form. Berikut adalah elemen-elemen yang disediakan oleh html
Tag Deskripsi Format umum tag
<form> Mendefinisikan <form>
untuk form bagi </form>
user
<input> Mendefinisikan <form>

kontrol input pada <input type="submit"
form value="Submit">
</form>
<textare Mendefinisikan <textarea rows="4" cols="50">
a> kontrol input berupa teks yang akanditampilkan
area teks pada </textarea>
form
<label> Mendefinisikan <form action="demo_form.asp">

label pada tag <label for="buku">Buku</label>
elemen <input> <input type="radio"
name="barang" id="buku"
value="buku"><br>
</form>
<fieldse Group dengan <form>
t> element yang <fieldset>
berhubungan satu <legend>Personalia:</legend>
sama lain didalam Name: <input type="text"><br>
form Email: <input
type="text"><br>
Date of birth: <input
type="text">
</fieldset>
</form
<legend> Mendefinisikan <fieldset>
judul untuk elemen <legend>Personalia:</legend>
<fieldset> Name: <input type="text"><br>
Email: <input
type="text"><br>
Date of birth: <input
type="text">
</fieldset>
</form
<select> Merupakan daftar <select>
secara drop-down <option
value="volvo">Volvo</option>
<option
value="mercedes">Mercedes</option
>
<option
value="audi">Audi</option>
</select
<optgrou Mendefinisikan <select>
p> group options yang <optgroup label="Swedish Cars">
berhubungan satu <option
sama lain dalam value="volvo">Volvo</option>
bentuk drop-down <option
list, merupakan
value="saab">Saab</option>
bagian dari tag
</optgroup>
elemen <select>
<optgroup label="German Cars">
<option
value="mercedes">Mercedes</option
>
<option
</optgroup>
</select>
<option> mendefinisikan <select>
option pilihan <option
dalam bentuk drop- value="volvo">Volvo</option>
down list,
merupakan bagian <option
dari tag elemen value="mercedes">Mercedes</option
<select> >
<option
</select
<button> Merupakan tombol <button type="button">Klik
yang dapat diklik disini!</button>
<datalist> Daftar/list khusus <input list="browsers">

elemen yang didefinisikan <datalist id="browsers">
baru di dalam elemen tag <option value="Internet
html5 <input> Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<keygen> Merupakan <form action="demo_keygen.asp"

elemen generator key-pair method="get">
baru di field untuk form Username: <input type="text"
html5 name="usr_name">
Encryption: <keygen
name="security">
<input type="submit">
</form>
<output> Merupakan hasil <form

elemen dari suatu oninput="x.value=parseInt(a.value
baru di perhitungan )+parseInt(b.value)">0
html5 <input type="range" id="a"
value="50">100
+<input type="number" id="b"
value="50">
=<output name="x" for="a
b"></output>
</form>
5) Elemen form button

Format umum penulisan input button pada tag <form> adalah sebagai berikut :
button type=button>
button type=button name=name>
button type=button value=value>
Berikut contoh listing programnya

<!doctype html>
<html>
<body>
<button type="button" onclick="alert('hallo selamat datang')">
klik mulai !</button>
</body>
</html>
Dan contoh bentuk tampilannya adalah sebagai berikut :
Muncul
setelah diklik
Gambar 19.7 tag form input button
6) Elemen form input submit

Format tag HTML-nya adalah sebagai berikut :
<input type=submit>
<input type=submit name=name>

<input type=submit value=value>
Contoh bentuk tampilannya adalah sebagai berikut :

<!doctype html>
<html>
<head>
<title>reset </title>
</head>
<body>
---- Indentitas diri ----
<form >
Nama : <input type="text"
name="nama"><br>
NIM: <input type="text" name="kelas"
maxlength="8"><br> <input type="reset" value="Reset">
<input type="submit" name=”submit” value="Submit">
</form>
</body>
</html>
Gambar 19.8 tag form input submit
7) Elemen form reset
Format tag HTML-nya adalah sebagai berikut :
<INPUT TYPE=RESET>
Berikut adalah contoh form input yang dilengkapi tombol reset
<!doctype html>
<html>
<head>
<title>reset </title>
</head>
<body>
---- Indentitas diri ----
<form >
Nama : <input type="text" name="nama"><br>
NIM: <input type="text" name="kelas" maxlength="8"><br>
<input type="reset" value="Reset">

<input type="submit" value="Submit">
</form>
</body>
</html>
Gambar 19.9 tag form input reset
8) Contoh form sederhana

Berikut ini adalah contoh dari sebuah halaman web yang berisi form yang sederhana :
<html>
<head>
<title> Form 1 </title>
</head>
<body>
<form name=”form1” method=”POST” action=”inputdata.php”>
Nama : <input type="text" name="nama"> <br><br>
Kelas: <input type="text" name="kelas" maxlength="2">

<br><br>
No : <input type="text" name="nomor" value="10">

<br><br>
Hobby: <input type="text" name="hobby" size="8">

<br><br>
Password: <input type="password" name="password">
<br><br>
<input type="submit" name="submit"

value="Submit"> <input
type="reset" name="reset" value="Reset">
</form>
</body>
</html>
Apabila dibuka di dalam browser, maka tampilan dari susunan kode
HTML di atas adalah sebagai berikut :
Gambar 19.10 form sederhana

Apabila tombol “Submit” diklik, maka semua nilai yang sudah diinputkan oleh
pengguna akan di olah di dalam file PHP “inputdata.php”.
c. Rangkuman
Dari kegiatan belajar ini dapat dibuat rangkuman sebagai berikut :
Form adalah salah satu bentuk halaman web yang digunakan untuk menerima
masukan dari pengguna, untuk selanjutnya masukan dari pengguna
tersebut diolah menggunakan bahasa pemrograman web, baik secara
server side scripting(misalkan PHP, JSP) ataupun client-side scripting
(javascript).
Form dapat digunakan untuk berbagai keperluan seperti keperluan login,
transaksi penjualan, mengumpulkan informasi atau meminta umpan balik
dari pengguna, menawarkan barang/jasa secara on-line dan sebagainya.
Disamping atribut type, masing-masing elemen input memiliki atribut-atribut
yang lain dan beberapa atribut tersebut berlaku untuk beberapa jenis
elemen input. Sebagai contoh adalah elemen <input> yang atribut TYPE-
nya adalah text memiliki atribut antara lain :
NAME, digunakan untuk menamai kotak
VALUE, digunakan untuk menandai atau menampung teks
SIZE, digunakan untuk mengatur ukuran teks pada kotak
MAXLENGTH, digunakan untuk menentukan panjang maksimum teks

Form HTML digunakan untuk melewatkan data dari klien ke server.
Elemen – elemen tag form HTML , yaitu <form>, <input>, <texarea>, <label>,
<fieldset>, <legend>, <select>, <optgroup>, <option>, <button>, <datalist>,
<keygen>, <output>.
Tugas
Jelaskan tentang anatomi form
Jelaskan tentang cara kerja dari form
Jelaskan tentang macam-macam elemen tag <form> html
e. Test Formatif.
Dalam test ini setiap peserta didik wajib membaca dengan cermat dan teliti setiap
butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah
jawabannya pada lembar jawaban test formatif yang telah disediakan.
Tuliskan anatomi penulisan form/formulir pada html
Jelaskan secara singkat cara kerja dari form
Sebutkan 5 jenis elemen yang berhubungan dengan pada formulir HTML.
Sebutkan dan jelaskan 3 elemen baru pada form html5
Kegiatan Belajar 20: Menyajikan Hasil Pemformatan Form pada
Sebuah Halaman Web
Tujuan Pembelajaran.
Setelah mengikuti kegiatan belajar 20 diharapkan Peserta Didik dapat:
Memahami format formulir HTML
Menyajikan hasil dari format formulir pada sebuah halaman web
b. Uraian materi.
Format umum formulir
<Form> merupakan formulir yang digunakan sebagai perantara untuk
memasukan data inputan ke server. Form pada HTML dibuat dengan
menggunakan elemen form. Elemen form harus membungkus seluruh elemen-
elemen masukan form lain untuk memastikan masukan informasi pengguna
dapat dibaca oleh aplikasi web.
Setiap elemen form dalam suatu halaman web harus memiliki atribut name,
yang digunakan sebagai pengenal dari nama elemen tersebut. Setiap data yang
dimasukkan ke dalam elemen form, akan dikirimkan kepada server.
Browser web akan mengirimkan data dari form ke server dengan mengacu
kepada name dari elemen. Browser akan mengambil semua data dari elemen
input yang memiliki atribut name. Jika suatu input tidak memiliki name, maka
data yang ada dalam elemen input tersebut tidak dikirimkan kepada server.
Tag <form> digunakan untuk membuat form dalam document HTML.
Penulisan format umum penulisan dari form adalah sebagai berikut :
<Form atribut=”atribut”>
……
……
……
</form>
Terlihat pada format umum formulir diatas, bahwa penulisan form dilengkapi
dengan atribut. Beberapa atribut yang dimiliki oleh tag <form> adalah :
Accept
Accept-charset
Action
Autocomplete
Enctype
Method
Name
Novalidate
target
Dari sembilan atribut diatas, atribut “accept” tidak support pada penerapan
HTML5. Pada HTML juga menyediakan atribut baru yaitu : “autocomplete” dan
“novalidate”.
Accept
Atribut “accept” mendefinisikan MIME yang di izinkan oleh server yang
memuat script untuk memproses form. Atribut “accept” tidak support pada
penerapan HTML5.
Penulisan atribut “accept” dapat dituliskan sebagai berikut :
<form accept="MIME_type">

MIME_type satu atau lebih jenis MIME yang dapat diajukan / upload.
Untuk menentukan lebih dari satu tipe MIME, memisahkan jenis dengan
koma. Contoh penerapan Atribut “accept”
<!DOCTYPE html>
<html>
<head>
<title>atribut form</title>
</head>
<body>
<form action="demo_form.asp" accept="image/gif,

image/jpeg"> Nama : <input type="text" name="nama"><br>
No.KTP: <input type="text" name="noKtp"><br>
File KTP: <input type="file" name="pic" id="pic"><br>

</form>
</body>
</html>
Pada listing kode diatas dituliskan <form accept="image/gif, image/jpeg">
hal ini berarti file gambar yang bisa diterima oleh server adalah gif dan jpeg.
Bila Listing kode tersebut dijalankan maka akan menghasilkan outp ut
sebagai berikut :
Gambar 20.1 penerapan atribut accept

Accept-charset
Atribut “accept-charset” merupakan atribut untuk menentukan karakter
tertentu yang akan digunakan untuk pengiriman formulir. Nilai default string
yang diterima adalah "UNKNOWN", hal ini menunjukkan pengkodean sama
dengan pengkodean dokumen yang mengandung tag elemen <form>.
Format umum untuk penulisan atribut “accept-charset” adalah
<form accept-charset="character_set">
Nilai dari “character_set” , biasanya dituliskan dalam bentuk ;


UTF-8 - karakter encoding untuk Unicode
ISO-8859-1 - karakter encoding untuk alphabet
Secara teori setiap pengkodean karakter dapat digunakan, tetapi pada
kenyataanya tidak semua browser dapat membacanya. Semakin banyak
pengkodean karakter yang digunakan, semakin besar kesempatan bahwa
browser dapat membaca karakter tesebut.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="demo_form.asp" accept-charset="ISO-8859-1">

Sekolah: <input type="text"
name="sekolah"><br> <input type="submit"
value="Submit"> </form>
</body>
</html>

sebagai berikut :
Gambar 20.2 penerapan atribut accept-charset
Action
Atribut action digunakan untuk mengirimkan data form ketika form disubmit,
atau dapat dikatakan Aksi yang muncul ketika pengguna menekan tombol
tertentu. Action menentukan lokasi dari script yang akan memproses data
dari form. Format umum penulisan atribut action adalah
<form action="URL">
Nilai dari URL diatas alamat kemana data dikirimkan. Penulisan alamat URL
dapat dituliskan sebagai berikut :

URL absolut action="http://www.example.com/example.htm")

URL relatif action="example.htm"
Penulisan atribut action adalah sebagai berikut :
PEMROGRAMAN WEB
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="demo_form.asp" accept-charset="ISO-8859-1">

Sekolah: <input type="text"
name="sekolah"><br> <input type="submit"
value="Submit"> </form>
</body>
</html>

sebagai berikut :
Gambar 20.3 penerapan atribut action
Autocomplete
Dengan atribut autocomplete , memungkinkan form dapat menentukan memiliki
autocomplete on atau off. Atribut autocomplete merupakan atribut baru di
HTML5. Format penulisanya adalah sebagai berikut :
<form autocomplete="on|off">
Nilai dari atribut autocomplate :

On merupakan nilai default. Browser akan membaca data isian form
sudah lengkap berdasarkan data isian sebelumnya. Sehingga user
tidak perlu menuliskan semua data, bisa dibantu dengan atribut
autocomplete untuk meneruskan data yang akan ditulis.

Off browser tidak secara otomatis membaca data isian form dari data
sebelumnya, sehingga user harus menuliskan data secara lengkap
pada tiap field form setiap kali user akan mengisikan data.
Penulisan atribut autocomplete adalah sebagai berikut
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="demo_form.asp" method="get"

autocomplete="on">
Nama:<input type="text" name="nama"><br>
Alamat: <input type="alamat"
name="alamat"><br> <input type="submit">
</form>
</body>
</html>
Bila listing kode diatas dengan atribut autocomplete = “on”

dijalankan maka akan menghasilkan tampilan sebagai berikut :
Gambar 20.4 penerapan atribut autocomplete, dengan data isian baru
Dari gambar diatas, pada fiels “nama” akan diisi nama “dayandra, user harus
melengkapi menuliskan nama sampai selesai, karena belum ada data
sebelumnya yang mengisikan nama : dayandra. Bila data di field “nama” dan
“Alamat” diisi dan dikemudian disubmit maka browser akan mengenali isian
datanya bila dilain waktu ada user yang mengisi dengan isian yang sama. Hal ini
terlihat pada tampilan berikut :
Gambar 20.5 penerapan atribut autocomplete, dengan data isian autocomplete
Dari gambar dapat dilihat, saat menuliskan kata “da” maka akan muncul pilihan
dayandra, data dayandra merupakan data yang telah diisika ke field sebelumnya.
Method
Atribut method adalah atribut yang wajib dicantumkan saat penulisan <form>
karena atribut method merupakan metode untuk pengiriman data ke tujuan
yaitu :
Get :
mengirim data ke server dengan cara meletakan data pada bagian akhir dari
Url yang dituju
metode yang digunakan oleh browser untuk meminta server untuk mengirim
kembali sumber daya yang diberikan
Post
datanya dikirim terpisah
metode browser mengirimkan server untuk meminta respon yang
memperhitungkan data yang tersedia dalam tubuh permintaan HTTP
Format penulisanya adalah sebagai berikut :
<form method="get|post">
Penulisan atribut autocomplete adalah sebagai berikut
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="demo_form.asp" method="get"

autocomplete="on">
</form>
</body>
</html>
Bila listing kode diatas dengan atribut dijalankan maka akan

method="get" menghasilkan tampilan sebagai berikut :
Gambar 20.6 penerapan atribut method=get
Enctype
Atribut enctype merupakan atribut yang menentukan bagaimana data form
dikirim ke server. Atribut enctype hanya digunakan saat form menggunakan
method=post.
Format penulisanya adalah sebagai berikut :
<form enctype="value">
Adapun nilai(value) yang dapat diisikan kedalam atribut anctype adalah :
Value Description
application/x-www-form- Merupakan nilai default. Semua karakter
urlencoded dikodekan sebelum dikirimkan. Spasi
dikodekan dalam simbol +, dan spesial karakter
lainya di kodekan dalam nilai ASCII HEX
multipart/form-data Tidak ada karakter yang dikodekan.
text/plain Spasi dikodekan dalam simbol +. Spesial

karakter lainya tidak di kodekan dalam nilai
ASCII HEX
Penulisan atribut enctype adalah sebagai berikut

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="demo_post_enctype.asp"
method="post" enctype="multipart/form-data">
</form>
</body>
</html>
Bila listing kode diatas dengan atribut dijalankan maka akan

enctype="multipart/form-data"menghasilkan tampilan sebagai
berikut :
Gambar 20.7 penerapan atribut anctype
Name
Atribut “name” merupakan atribut untuk memberi nama pada form. Atribut
name digunakan untuk referensi elemen dalam JavaScript, atau untuk
referensi data formulir setelah formulir dikirimkan. Format umum penulisan
atribut name adalah sebagai berikut :
<form name="text">
Dimana nilai dari atribut name berupa text. Berikut adalah penerapan dari
atribut name
<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit()
{
document.forms["myForm"].submit();
}
</script>
</head>
<body>
<form name="fromSaya" action="form_submit.asp"

method="get"> Nama: <input type="text" name="nama"><br>
Alamat: <input type="text" name="alamat"><br><br>
<input type="button" onclick="formSubmit()" value="kirim data!">
</form>
</body>
</html>
Dari listing kode diatas dapat dilihat bahwa <form name="fromSaya"> yang
artinya form yang dibuat bernama “formSaya”.nama form = formSaya
tersebut akan diberitahukan ke elemen Javascript.Bila listing kode tersebut
dijalankan maka akan menghasilkan tampilan sebagai berikut :
Gambar 20.8 penerapan atribut name

Novalidate
Atribut “novalidate” memperintahkan bahwa data form tidak divalidasi saat di
submit. Atribut ini merupakan atribut baru pada HTML5 dan hanya berjalan di
browser Internet Explorer 10, Firefox, Opera, dan Chrome. Atribut “novalidate”
tidak support ketika dijalankan pada browser Internet Explorer versi 9 ke bawah
dan safari.
Format penulisan secara umum
<form novalidate>
Berkut adalah salah satu penerapan dari atribut “novalidate”.

<!doctype html>
<html>
<head>
</head>
<body>
<form action="demo_form.asp" novalidate>
e-mail: <input type="email" name="user_email">
<input type="submit">
</form>
</body>
</html>
Bila listing kode di atas dijalan akan menampilkan output sebagai berikut
Gambar 20.9 penerapan atribut novalidate

target
Atribut “target” merupakan atribut yang dapat berjalan disemua browser.
Atribut “target” menentukan nama atau keyword yang mengindikasikan dimana
respon dari form akan ditampilkan, misanya tab, window, atau dalam frame
Catatan : target window name diisikan berupa :
Value Description
_blank Respon ditampilkan dalam new window or tab
_self Respon ditampilkan dalam frame yang sama (default)
_parent Respon ditampilkan dalam parent frame
_top Respon ditampilkan dalam window full body
framename Respon ditampilkan dalam iframe
Format umu dari penulisan atribut target
<form target="_blank|_self|_parent|_top|framename">
Berikut adalah listing kode atribut target menggunakan value _blank

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="demo_form.asp" method="get" target="_blank">

Nama : <input type="text" name="fname"><br>
Alamat : <input type="text" name="lname"><br>
</form
</body>
</html>
Ketika listing kode dijalankan akan menampilkan hasil seperti berikut :

1
Gambar 20.10 hasil button submit

Setelah listing kode dijalankan maka akan terbuka window 1 yan berisi text
field untuk mengisi nama dan alamat. Setelah data nama - alamat diisikan
dan form disubmit maka akan terbuka window baru seperti pada window 2.
Format formulir secara horisontal

Untuk membuat tampilan dari sebuah form menjadi lebih tertata dengan rapi,
umumnya digunakan elemen HTML <table> untuk memformat form tersebut.
Secara umum layout dari form adalah layout horizontal, yakni layout dimana
setiap input ditempatkan di samping dari label keterangan masing- masing input
tersebut. Berikut ini adalah contoh dari penggunaan elemen <table> untuk
memformat tampilan form secara horizontal :
<html>
<head><title>CONTOH TAG FORM</title></head>
<body>
<form method="Post">
<table border=0 width="75%">
<tr>
<td width="25%">NPM</td>
<td><INPUT TYPE="TEXT" Name="NPM" MAXLENGTH="10"
SIZE="11"></td>
</tr>
<tr>
<td width="25%">Nama Mahasiswa</td>
<td><INPUT TYPE="TEXT" Name="NamaMHS" MAXLENGTH="25"
SIZE="25"></td>
</tr>
<tr>
<td width="25%">Alamat</td>
<td><INPUT TYPE="TEXT" Name="Alamat" MAXLENGTH="50"
SIZE="40"></td>
</tr>
<tr>
<td width="25%">Jenis Kelamin</td> <td><INPUT
TYPE="RADIO" Name="Jenkel" CHECKED
VALUE="Laki2">Laki-laki
<INPUT TYPE="RADIO" Name="Jenkel"
VALUE="Perempuan">Perempuan
</td>
</tr>
<tr>
<tr>
<td width="25%">Jurusan</td>
<td><SELECT Name="Jurusan">
<OPTION VALUE="KA">Komputer Akuntansi
<OPTION VALUE="MI">Manajemen Informatika
<OPTION VALUE="TK">Teknik Komputer
</SELECT>
</td>
</tr>
<tr>
<td width="25%">Fasilitas</td>
<td><INPUT TYPE="CHECKBOX">Flash Disk</td>
</tr>
<tr>
<td></td><td><INPUT TYPE="CHECKBOX">Bakal Baju</td>
</tr>
<tr>
<td></td><td><INPUT TYPE="CHECKBOX">Bakal Jas</td>
</tr>
<td></td>
<td><INPUT TYPE="SUBMIT"
VALUE="Simpan"> <INPUT TYPE="RESET"
VALUE="Batal"> </td>
</tr>
</table>
</form>
Dan berikut ini adalah tampilan dari form yang telah di tulis di atas :
Gambar 20.11 tampilan form secara horisontal
Format formulir secara vertikal

Sejalan dengan perkembangan teknologi mobile, halaman web yang berbasis
mobile tentunya sebuah halaman web di dalam perangkat mobile akan
memerlukan form di dalam menerima input dari pengguna. Untuk menyesuaikan
dengan lebar layar dari perangkat mobile, misalkan handphone ataupun ipad,
maka layout dari sebuah halaman web harus disesuaikan, termasuk juga untuk
layout dari sebuah form. Umumnya apabila sebuah form akan digunakan pada
aplikasi mobile, layout yang diterapkan adalah layout secara vertikal, sesuai
dengan karakteristik layar yang tidak terlalu besar. Berikut ini adalah contoh dari
sebuah form dengan layout vertikal.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<FORM METHOD="POST"
ACTION="mailto:teknisi@jardiknas.org">
<H4>FORM DATA SISWA</H4>
<INPUT TYPE="text" NAME="var1" SIZE="30"

VALUE="Masukan nama.">
<BR><BR>
<B>Apakah Anda Siswa?</B>
<INPUT TYPE="checkbox"
NAME="var2"> <BR><BR>
<B>Berapa umur Anda?</B>
<BR>
<INPUT TYPE="radio" NAME="var3" VALUE="r1">10 -
15 <BR>
20 <BR>
25 <BR><BR>
<INPUT TYPE="submit" NAME="var4" VALUE="Kirim">
<INPUT TYPE="reset" NAME="var5" VALUE="Hapus">
</form
</body>
</html>
Dan hasil dari halaman form yang telah ditulis di atas adalah sebagai berikut :
Gambar 20.12 tampilan form secara vertikal
c. Rangkuman
Dari kegiatan belajar menyajikan form pada halaman web dapat dibuat
kesimpulan sebagai berikut :
<Form> merupakan formulir yang digunakan sebagai perantara untuk
memasukan data inputan ke server.
Browser web akan mengirimkan data dari form ke server dengan
mengacu kepada name dari elemen.
Beberapa atribut yang dimiliki oleh tag <form> adalah :
Accept
Accept-charset
Action
Autocomplete
Enctype
Method
Name
Novalidate
target
Untuk mengimbangi perkembangan teknologi mobile adakalanya form
dilayout secara vertikal
d. Tugas
Fungsi dari form
Buatlah contoh penyajian form dengan menggunakan ke 9 atribut dari
elemen form
Buatlah form sederhana yang disajikan secara horisontal
Buatlah form sederhana yang disajikan secara vertikal
e. Test Formatif.
Dalam test ini setiap peserta didik wajib membaca dengan cermat dan teliti setiap
butir soal dibawah ini. Kemudian berdasarkan uraian materi diatas tulislah
jawabannya pada lembar jawaban test formatif yang telah disediakan.
Tuliskan dan jelaskan tentang format umum penulisan elemen form
Sebutkan 2 atribut baru dari elemen form yang di HTML5
Jelaskan fungsi masing-masing atribut dari elemen form
Buatlah form sederhana dengan format
DAFTAR PUSTAKA
Betha Sidik, Ir., Husni I. Pohan, Ir., M.Eng. (Juni 2012) , Pemrograman Web
Dengan HTML Revisi Keempat, Penerbit Informatika Bandung
Budi Raharjo (September 2011), Belajar Pemrograman Web, Penerbit Modula,

Bandung,
Jennifer Niederst Robbins (2012), Learning Web Design 4th Edition, Penerbit
O'Reilly Media, Inc.: Kanada
Purnama Pupung Budi (2004), Kiat Praktis menjadi Desainer Web Profesional,
PT Elex Media Komputindo, Jakarta
Simarmata Janner (2010), Rekayasa Web, Penerbit Andi, Yogyakarta
Wahana Komputer (2013), Teknik Singkat dan Cepat Menguasai CSS3,

Penerbit Andi, Yogyakarta
Pemrograman Web Semester 1

Pemograman Web 1 X

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pemograman Web 1 X

Diunggah oleh

Hak Cipta:

Format Tersedia

PEMROGRAMAN WEB SEMESTER 1

PEMROGRAMAN WEB SEMESTER 1

Penerapan kurikulum 2013 mengacu pada paradigma belajar kurikulum abad 21

Buku teks Pemrograman Web ini disusun berdasarkan tuntutan paradigma

Kementerian Pendidikan dan Kebudayaan, Direktorat Pembinaan Sekolah

Jakarta, 12 Desember 2013

Prof. Dr. Mohammad Nuh, DEA

Domain adalah Pola penamaan host di Internet.

Server adalah komputer yang memberikan layanan di jaringan.

W3C adalah World Wide Web Consortium organisasi yang mengembangkan

Web browser adalah sebuah perangkat lunak aplikasi yang

WWW; World Wide Web sering di singkat Web.

E.Kompetensi inti dan kompetensi dasar

1. Kegiatan Belajar 1: Profesi dalam Pengembangan Aplikasi Web

a. Kelompok pertama, adalah mereka yang bergelut di dunia perangkat lunak

Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti :

b. Kelompok kedua, adalah mereka yang bergelut di bidang perangkat keras

Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti :

c. Kelompok ketiga, adalah mereka yang berkecimpung dalam operasional

Pada lingkungan kelompok ini, terdapat pekerjaan-pekerjaan seperti :

2) Profesi dalam pengembangan aplikasi web

diliris pada tanggal 24 Desember 1999 dengan penambahan beberapa fitur

Chrome Mulai versi 1.0

Firefox Mulai versi 1.5

Internet Explorer Mulai versi 8

Opera Mulai versi 9.0

Safari Mulai versi 1.3

Cara kerja web

Profesi-profesi yang langsung terkait dalam pengembangan aplikasi web,

2. Tujuan yang bersifat fungsional

Kemampuan untuk melakukan suatu fungsi yang dibutuhkan pengguna, misal

Kegiatan yang digunakan untuk menghitung estimasi biaya proyek pembuatan

Kegiatan untuk menentukan persyaratan-persyaratan teknik dan mengidentifikasi

1. Analisis isi informasi

Analisis yang menunjukkan hubungan antara web dengan pengguna.

Pembuatan Diagram Wireframe (Gambar Rangka), tujuan dari diagram

Diagram Situs, Sebuah diagram situs menunjukkan struktur situs secara

Storyboard dan diagram alir pengguna, Storyboard ini bertujuan untuk

Implementasi (page generation) & pengujian (testing)

Suatu kegiatan pengembangan untuk mewujudkan desain menjadi suatu web

Dalam tahap pengembangan ini, meliputi kegiatan:

Authoring, adalah istilah yang digunakan untuk proses

Ada beberapa pendekatan yang digunakan untuk melakukan pengujian, yaitu :

2. Pengujian navigasi (navigation testing)

3. Pengujian konfigurasi (configuration testing)

Pengujian keamanan dan performansi (security and performance testing)

Evaluasi oleh konsumen (customer evaluation)

Perangkat pengembangan aplikasi web

Untuk perangkat pengembangan aplikasi web dapat dikelompokan menjadi

Web page authoring

sebuah aplikasi open source (sumber terbuka) yang cocok dengan

Aplikasi editing gambar dan menggambar

Adobe Fireworks. Program grafis web ini menggabungkan editor foto

Aplikasi transfer file (FTP/File Transfer Protokol).

Sebuah aplikasi FTP memungkinkan untuk mengunggah dan mengunduh file

1.2. Bukalah beberapa web tentang pariwisata, instansi pemerintah

HTTP (Hypertext transfer protocol) merupakan protokol yang digunakan untuk

Secara prinsip, fitur pada HTML dapat dikelompokkan ke dalam :

Peranti penyaji gambar ;

Pendukung media ; dan Peningkatan

koneksi dengan JavaScript.

Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai

Dalam penulisan tag HTML tidaklah case sensitive artinya