MENAMBAHKAN GAMBAR Format gambar yang bisa digunakan untuk melengkapi halaman web: Jenis Gambar

Ektensi

GIF JPEG

.gif .jpg/.jpeg

Keterangan Graphics Interchange Format Joint Photographics Experts Group

PNG TIFF/TIF

.png .tif

Portable Network Graphics Tagged Image File Format

Yang umum dipakai adalah GIF, JPEG, dan PNG * Menampilkan Gambar Tag HTML yang digunakan untuk menampilkan gambar, yaitu . Tag ini mempunyai banyak atribut, tetapi hanya satu yang harus disertakan, yaitu atribut SRC. Adapun atribut lainnya bersifat opsional. Bentuk paling sederhana dari tag adalah seperti berikut:

Contoh: Anda juga bisa menuliskan: apabila gambar terdapat pada direktori citra yang terletak di bawah direktori tempat berkas HTML berada. Contoh: <TITLE>Latar Belakang Gambar Info Jazz

Contoh berikut memadukan gambar latar belakang dan gambar di latar depan: <TITLE>Menampilkan Gambar Info Jazz Apabila Anda menguji kode di atas dengan browser, akan tampak bahwa gambar latar belakang (nada.jpg) tertindih oleh gambar jazz.jpg. Untuk mengatasinya, Anda bisa menggunakan berkas yang bertipe GIF, mengingat format gambar ini mendukung transparansi.

* Mengatur Letak Teks terhadap Gambar Tag menyediakan atribut bernama ALIGN yang berfungsi untuk mengatur penempatan teks terhadap gambar. Kemungkinan nilai untuk atribut ini adalah sebagai berikut: Nilai TOP MIDDLE BOTTOM

Keterangan Teks diletakkan di bagian atas Teks diletakkan di tengah-tengah Merupakan nilai default. Teks diletakkan pada bagian bawah.

Contoh: <TITLE>Menampilkan Gambar Info jazz

<TITLE>Menampilkan Gambar Info jazz <TITLE>Menampilkan Gambar Musik Jazz :

Musik Jazz banyak disukai oleh mereka yang menyukai keindahan dan kedinamisan bunyi.


<TITLE>Menampilkan Gambar Musik Jazz :

Musik Jazz banyak disukai oleh mereka yang menyukai keindahan dan kedinamisan bunyi.
* Memberi Bingkai Gambar Dengan menggunakan atribut BORDER pada tag , Anda bisa mengatur agar gambar ditampilkan dengan diberi bingkai. Caranya dengan memberikan bilangan pada atribut border. Nilai pada atribut tersebut menyatakan ketebalan bingkai dalam satuan piksel. Contoh:

<TITLE>Menampilkan Gambar Musik Jazz :

Musik Jazz banyak disukai oleh mereka yang menyukai keindahan dan kedinamisan bunyi.
* Mengatur Ukuran Gambar Bila gambar memiliki ukuran besar dan bermaksud mengubah gambar saat ditampilkan, Anda bisa mengaturnya dengan atribut pada tag yaitu HEIGHT dan WIDTH. - HEIGHT untuk mengatur tinggi gambar - WIDTH untuk mengatur lebar gambar

Gambar diskala dengan nilai pada kedua atribut tersebut berupa nilai dengan satuan piksel. Contoh: <TITLE>Ukuran Gambar



MENGGUNAKAN TABEL Tabel biasa digunakan dalam halaman web untuk memperindah tampilan atau untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca. Tag-tag yang berkaitan dengan pembuatan tabel adalah: Tag

...

Keterangan Mengawali dan mengakhiri sebuah tabel

... ...

Menentukan judul pada tabel Membuat sebuah baris dalam tabel

... ...

Membuat judul kolom Membuat sebuah sel data

<TITLE>Tabel Sederhana

Album Bob James

Nama Album	Tahun Rilis
Obsession	1986
Ivory Coast	1988
Grand Piano Canyon	1990
Dancing on The Water	2001
Morning, Noon, & Night	2001

* Memberi Garis pada Tabel Tabel dapat dilengkapi dengan garis untuk kolom maupun baris. Anda bisa menggunakan atribut BORDER pada tag TABLE, dengan bentuk sebagai berikut: Kalau BORDER tidak disertakan dalam tag , nilai untuk BORDER dianggap sama dengan nol, sehingga garis tidak ditampilkan. identik dengan Contoh:

<TITLE>Tabel Sederhana

Album Bob James

Nama Album	Tahun Rilis
Obsession	1986
Ivory Coast	1988
Grand Piano Canyon	1990
Dancing on The Water	2001
Morning, Noon, & Night	2001

* Menentukan Warna Latar Belakang Tabel Untuk menambahkan warna latar belakang tabel, Anda bisa menggunakan atribut BGCOLOR pada tag . <TITLE>Tabel Sederhana

Album Bob James

Nama Album	Tahun Rilis
Obsession	1986
Ivory Coast	1988
Grand Piano Canyon	1990
Dancing on The Water	2001
Morning, Noon, & Night	2001

<TITLE>Penggunaan Warna

ABC	DEF
GHI	JKL

* Menggabungkan Sel HTML juga memungkinkan pembuatan tabel dengan sejumlah baris sel digabungkan. Untuk menggabungkan beberapa baris sel, bisa digunakan atribut ROWSPAN pada tag , contoh: <TITLE>Penggunaan ROWSPAN

Musisi dan Album

Bob James	Obsession (1986)
	Ivory Coast (1988)
	Grand Piano Canyon (1990)
Earl Klugh	Solo Guitar (1989)
	Whisper and Promises (1989)
	Move (1993)
	Peculiar Situation (1999)

Untuk menggabungkan beberapa sel dalam satu baris, bisa digunakan atribut COLSPAN pada tag atau . Contoh: <TITLE>Penggunaan COLSPAN

Musisi dan Album

Bob James
Obsession	1986
Ivory Coast	1988
Grand Piano Canyon	1990
Earl Klugh
Solo Guitar	1989
Whisper and Promises	1989
Move	1993
Peculiar Situation	1999

Kode berikut menunjukkan ROWSPAN dan COLSPAN

contoh

yang

menggabungkan

<TITLE>Penggunaan COLSPAN dab ROWSPAN

Daftar Wiraniaga

WIRANIAGA		KOTA
		Semarang	Kudus	Solo
Jenis Kelamin	Pria	30	20	30
	Wanita	20	8	18

* Mengatur Peletakan Tabel dalam Halaman Atribut ALIGN pada tag , , dan dapat digunakan untuk mengatur peletakan teks dalam keadaan rata kiri, rata kanan, atau rata tengah. Nilai untuk ALIGN adalah sebagai berikut: ALIGN dan Nilainya ALIGN = “LEFT”

Keterangan Teks diatur rata kiri

ALIGN = “CENTER” ALIGN = “RIGHT”

Teks ditengahkan Teks diatur rata kanan

<TITLE>Penggunaan ALIGN

Daftar Wiraniaga

WIRANIAGA		KOTA
		Semarang	Kudus	Solo
Jenis Kelamin	Pria	30	20	30
	Wanita	20	8	18

* Mengatur Lebar Tabel Atribut WIDTH pada tag dapat digunakan untuk mengatur lebar tabel tanpa tergantung oleh ukuran jendela browser. Contoh: <TITLE>Penggunaan WIDTH

Tanpa WIDTH

ABC	DEF
GHI	JKL

Dengan WIDTH

ABC	DEF
GHI	JKL

Contoh berikut menunjukkan penggunaan lebar dalam satuan persen. <TITLE>Penggunaan WIDTH dengan %

Dengan WIDTH

ABC	DEF
GHI	JKL

WIDTH juga dapat digunakan pada sel tertentu, dengan cara menyebutkan pada tag atau , contoh:

<TITLE>Penggunaan WIDTH pada Tag TD

ABC	DEF
GHI	JKL

Seperti halnya pada tag , nilai <WIDTH> pada tag

juga bisa berupa %. Contoh: <TITLE>Penggunaan WIDTH pada Tag TD ABC DEF GHI JKL MEMBUAT LINK Umumnya halaman web mempunyai link atau hyperlink (penghubung) ke halaman-halaman web yang lain. Untuk membuat link ke halaman lain bisa digunakan pasangan tag ... atau yang biasa disebut tag jangkar atau anchor tag. Bentuk paling sederhana penggunaan tag jangkar adalah sebagai berikut: Label Dalam hal ini, URL (Uniform Resource Locator) dapat berupa alamat suatu dokumen web, berkas grafik, ataupun menyatakan suatu protokol lain (misalnya FTP). Contoh sederhana berupa nama berkas HTML. Contoh: halx.html <TITLE>Halaman X Halaman X haly.html <TITLE>Halaman Y Halaman Y Halutama.html <TITLE>Halaman Utama Halaman Utama Silakan klik pada link-link berikut: Halaman X Halaman Y * Link ke Situs Web Lain Hyperlink seringkali ditujukan ke situs web lain yang berada di sebarang web server. Contoh: <TITLE>Link ke Beberapa Web Situs Link Blog Uqifumi Website TI UIN Maliki Malang Website Fak. Saintek UIN Maliki Malang Website UIN Maliki Malang * Link dengan Gambar Sebuah gambar bisa dijadikan sebagai link ke halaman lain. Caranya adalah dengan menyebutkan tag di antara pasangan tag dan . Contoh: <TITLE>Link dengan Gambar Klik untuk melihat citra yang lebih besar * Membuka Jendela Baru Kadangkala dikehendaki agar kalau suatu link diklik maka jendela baru akan ditampilkan untuk menampung halaman yang di-link. Hal ini bisa dikerjakan dengan menambahkan kode: TARGET = “_blank” pada tag . Contoh: <TITLE>Menu Utama Menu Utama Silakan klik pada link-link berikut: = "_blank"> = "_blank"> MENGGUNAKAN FORMULIR * Dasar Penggunaan Formulir Formulir dibentuk dengan menggunakan pasangan tag dan . Dua atribut yang umum digunakan pada tag berupa ACTION dan METHOD ● ● ● ACTION menentukan URL yang akan dijalankan dan menerima semua masukan pada formulir. Jika ACTION tidak disebutkan, informasi akan dikirim ke URL yang sama dengan halaman web itu sendiri. METHOD digunakan untuk menentukan bagaimana informasi dikirim ke URL yang disebutkan dalam ACTION. Nilai yang umum untuk atribut ini berupa GET dan POST. POST membuat informasi dikirim secara terpisah dengan URL, sedangkan GET akan membuat informasi dikirim menjadi satu dengan URL. Penggalan kode berikut menunjukkan contoh penggunaan pasangan tag dan … * Memasukkan Data dengan INPUT Tag digunakan untuk melakukan pemasukan data. Letaknya berada dalam pasangan tag dan . Ada bermacam-macam tipe pemasukan data, antara lain berupa kotak teks, kotak password, tombol radio, kotak cek, serta tombol SUBMIT dan RESET. Tag memiliki sejumlah atribut. Atribut NAME SIZE MAXLENGTH VALUE CHECKED TYPE Keterangan Menentukan nama data. Atribut ini diperlukan oleh semua jenis masukan, kecuali SUBMIT dan RESET Menentukan ukuran kotak masukan yang tampil untuk teks dan password Menentukan jumlah karakter yang dapat dimasukkan dalam kotak password dan kotak teks Menentukan nilai awal untuk kotak masukan Mengatur agar kotak cek dalam keadaan terpilih pada keadaan awal Menentukan tipe kotak masukan * Tipe Text Salah satu tipe pemasukan data yang umum digunakan yaitu tipe TEXT, yang digunakan untuk memasukkan teks; misalnya alamat seseorang. Contoh: Pada contoh di atas, field teks yang dibentuk diberi nama alamat, dengan panjang tampilan sebanyak 35 karakter dan jumlah maksimal yang dapat diisi oleh pemakai sebesar 35 buah. Nilai yang ditampilkan pada field teks berupa string kosong. Dengan menggunakan atribut VALUE pada tag , field teks dapat diberi nilai bawaan. Contoh: Nilai bawaan untuk field teks tersebut (jika VALUE tidak disebutkan) berupa string kosong. * Tombol Submit dan Reset Tombol SUBMIT pada tag akan membentuk tombol Submit, yaitu tombol yang menyebabkan URL yang disebutkan pada ACTION pada tag akan dimuat atau dijalankan. Contoh: Dalam hal ini tombol akan ditampilkan dengan tulisan “Submit Query”. Jika tulisan seperti ini tidak dikehendaki, Anda perlu menyebutkan pada atribut VALUE. Contoh: Pada contoh ini, tombol akan dilengkapi dengan tulisan Kirim. Adapun tombol Reset berfungsi untuk mengosongkan atau mengembalikan nilai field teks ke nilai bawaan. Contoh: entritek.html <TITLE>Contoh Penggunaan Formulir Nama : E-mail : Klik tombol “Kosongkan”. Apa yang terjadi? Apabila Anda klik tombol “Kirim”, maka akan terjadi error, karena kita belum menuliskan kode info.html. Sekarang kita ketikkankode untuk info.html seperti berikut: info.html <TITLE> Info Tak ada yang spesial pada kode di atas, kecuali untuk menunjukkan bahwa jika tombol “Submit” diklik maka berkas HTML yang disebutkan dalam atribut ACTION pada tag akan dimuat. Di depan, dengan PHP dan JSP kita akan mengetahui bagaimana menangkap nilai-nilai yang dimasukkan pada kedua field teks di di atas. * Perbedaaan GET dan POST Supaya lebih jelas, perbedaan ini akan diperlihatkan dalam bentuk contoh. Pada contoh entritek.html, ketika Anda mengklik tombol “Kirim”, berkas info.html dimuat. Tampak bahwa informasi yang dikirimkan dari entritek.htm tidak tertampil pada URL. Sekarang marilah kita ganti POST dalam kode entritek.html dengan GET: <TITLE>Contoh Penggunaan Formulir Nama : E-mail : Perhatikan bahwa nama field teks dan nilainya diikutkan pada URL. Gunakan POST untuk penggunaan yang melibatkan data password. Mengapa? * Tipe Password Tipe PASSWORD yang disebutkan pada atribut TYPE pada tag akan membuat setiap karakter yang diketikkan oleh pemakai pada field ini disembunyikan (misalnya diganti dengan tanda * untuk setiap karakter yang diketikkan pemakai). Contoh: <TITLE>Contoh Penggunaan Formulir Nama pemakai : Password : Pada kode di atas, field untuk memasukkan password (TYPE = “PASSWORD”) diatur dengan panjang tampilan sebanyak 8 karakter dan dengan jumlah karakter yang bisa dimasukkan 8 karakter. * Tipe CHECKBOX Tipe CHECKBOX berguna untuk membuat kotak cek. Kotak cek adalah suatu bentuk masukan yang memungkinkan pemakai mencentang atau tidak mencentang pada kotak tersebut dengan cara klik mouse pada saat penunjuk mouse menunjuk kotak cek. Kotak cek paling tidak melibatkan atribut NAME. Adapun atribut CHECKED bersifat opsional, yang digunakan untuk memberi nilai awal berupa tanda centang. Contoh: <TITLE>Contoh Penggunaan Formulir Bahasa yang Anda sukai: Inggris Jerman Jepang Mandarin * Tombol Radio Tombol radio digunakan dalam bentuk 2 tombol atau lebih yang memungkinkan pemakai hanya memilih satu dari sekian tombol yang disajikan. Tombol radio diimplementasikan dengan menggunakan tag dengan atribut TYPE diberi nilai “RADIO”. Untuk membentuk sekelompok radio yang menyatakan sebuah pilihan, atribut NAME perlu diisi dengan nama yang sama. Salah satu tombol radio bisa dilengkapi dengan atribut CHECKED, yang menyatakan bahwa tombol itulah yang menjadi nilai bawaan. Atribut VALUE untuk menentukan nilai terhadap nama data sekiranya tombol bersangkutan diklik. Contoh: <TITLE>Contoh Penggunaan Formulir Jenis Kelamin: Pria Wanita Hari Latihan : Senin Selasa Rabu Kamis Jumat * Masukan dengan TEXTAREA Pasangan tag dan berguna untuk membentuk suatu masukan yang panjang yang bisa mencakup banyak baris. Atribut-atribut yang digunakan pada tag adalah sebagai berikut: Atribut NAME<br /> <br /> Keterangan Menentukan nama untuk textarea<br /> <br /> ROWS<br /> <br /> Menentukan jumlah baris yang tampil pada layar Menentukan jumlah kolom yang tampil di layar<br /> <br /> COLS<br /> <br /> Contoh:<br /> <br /> <HTML> <HEAD> <TITLE>Contoh Penggunaan Formulir</TITLE> </HEAD> <BODY> <FORM> Komentar Anda:<BR> <TEXTAREA NAME = "komentar" ROWS = "5" COLS = "40" * Pemilihan dengan SELECT Dengan menggunakan tag <SELECT> dan , Anda bisa membentuk kotak kombo (drop-down) atau daftar pilihan, tergantung dari pengaturan tag <SELECT>. Contoh: <TITLE>Contoh SELECT - Model Drop Down Buah yang paling Anda sukai: <SELECT NAME = "buah"> Jeruk Apel Manggis Melon Yang Lain Pada kode di atas, digunakan untuk membentuk kotak kombo dengan 5 pilihan. Masing-masing pilihan ditentukan melalui tag . Nilai pada VALUE menyatakan nilai-nilai pada pilihan. Atribut SELECTED pada tag menyatakan nilai bawaan. Dengan menambahkan atribut SIZE dengan bentuk SIZE = “angka” Dengan nilai pada “angka” lebih dari satu, bisa diatur agar tampilan SELECT berupa daftar pilihan (bukan kotak kombo). Contoh: <TITLE>Contoh SELECT - Model Drop Down Buah yang paling Anda sukai: <SELECT NAME = "buah" SIZE = "3"> Jeruk Apel Manggis Melon Yang Lain * Lebih Lanjut Tentang Tombol (Button) Anda telah mengenal dua buah tombol, yaitu Submit dan Reset. Dengan menggunakan tag Anda juga dapat membuat tombol sendiri dengan fungsi yang berbeda dengan kedua tombol yang telah dibahas. Untuk membuat tombol, berikan nilai “BUTTON” pada atribut TYPE. Contoh: <TITLE>Contoh BUTTON Cobalah untuk mengklik tombol berikut kode di atas digunakan untuk mendefinisikan tombol dengan judul “Ke Sebelumnya”. ONCLICK digunakan untuk menangani kejadian sekiranya tombol diklik. Dalam hal ini, kode “self.history.back();” dimaksudkan agar halaman sebelumnya ditampilkan. * Mengatur Tampilan Pemasukan Data Seringkali tabel dilibatkan dalam formulir dengan tujuan untuk membentuk deretan pemasukan data yang tertata rapi. Contoh: <TITLE>Tabel dan Formulir Nama: Usia (tahun): Kurang dari 20 Antara 20 s/d 40 Lebih dari 40 × Report "MENAMBAHKAN GAMBAR Format gambar yang bisa digunakan untuk melengkapi halaman web:" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close