desain web 1 -...
TRANSCRIPT
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 1
BAHAN AJAR
KURIKULUM 2013
DESAIN WEB 1
OLEH :
PAULUS HARSADI, S.Kom, M.Kom
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
SINAR NUSANTARA
SURAKARTA
2015
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 2
HALAMAN PENGESAHAN
BAHAN AJAR DESAIN WEB 1
STMIK SINAR NUSANTARA
Digunakan Pada Mata Kuliah Desain Web 1
Surakarta, 1 Maret 2015
Penyusun,
PAULUS HARSDI, S.Kom, M.Kom
Mengetahui dan Menyetujui :
Ketua Jurusan
Bebas Widada, S.Si, M.Kom
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 3
KATA PENGANTAR
Puji syukur kami panjatkan kehadiran Tuhan Yang Maha Esa atas terselesaikannya modul
praktikum Animasi ini. Modul ini disusun berdasarkan rancangan pembelajaran yang telah ada,
dengan harapan modul ini bermanfaat sebagai penunjang kelancaran proses pembelajaran..
Akhir kata penulis dengan senang hati menerima koreksi dari pembaca dalam penyempurnaan
modul praktikum ini.
Penulis
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 4
BAB I
Konsep Dasar Pemrograman Internet
&
HTML Basic
Pemrograman Internet
Perkembangan internet di dunia saat ini sangatlah cepat dan luas menembus kesegala
bidang. Internet berasal dari kata Interconnection Networking yang mempunyai arti
hubungan dari berbagai komputer dengan membentuk sistem jaringan yang mencakup
seluruh dunia atau disebut dengan jaringan komputer global.
Pemrograman internet sendiri bisa di artikan sebagai pemrograman untuk aplikasi yang
berbasis internet. Arti pemrograman itu sendiri adalah suatu kumpulan urutan perintah ke
komputer untuk mengerjakan sesuatu, dimana instruksi tersebut menggunakan bahasa
yang dimengerti oleh komputer atau yang dikenal dengan bahasa pemrograman,
sedangkan Aplikasi internet merupakan suatu jenis aplikasi yang menerapkan arsitektur
sistem terdistribusi dengan menggunakan internet sebagai media komunikasi antar
komponennya.
Jenis arsitektur sistem terdistribusi antara lain :
Client-server: sistem dibagi menjadi komponen yang berfungsi sebagai peminta
layanan (client) dan pemberi layanan (server)
Peer-to-peer: sistem terdiri atas komponnen - komponen yang fungsinya setara dan
dapat saling melayani atau meminta layanan
Pada prinsipnya, arsitektur peer-to-peer juga merupakan arsitektur client-server di
mana setiap komponennya dapat mempunyai fungsi sebagai client sekaligus server
terhadap komponen lain
Internet sendiri merupakan sebuah jaringan komputer yang sangat besar (meliputi
seluruh dunia) dan jaringan besar ini menghubungkan jaringan-jaringan kecil. Internet
menggunakan protokol (aturan komunikasi) transmisi berbasis TCP/IP. Selain protocol
transmisi, internet juga menerapkan protocol aplikasi contohnya protocol HTTP untuk
Web.
World Wide Web
World Wide Web ("WWW", atau singkatnya "Web") adalah suatu ruang informasi di
mana sumber-sumber daya yang berguna diidentifikasi oleh pengenal global yang
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 5
disebut Uniform Resource Identifier (URI). WWW sering dianggap sama dengan
Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripadanya.
Bagaimana Web Bekerja ?
Alur permintaan halaman Web oleh user :
user mengetik URL di browser
browser menghubungi server yang tersebut pada URL
setelah terhubung, browser mengirimkan HTTP request
server menjawab dengan mengirim HTTP response (berisi
header dan isi dokumen)
untuk dokumen yang terdiri atas beberapa file (misalnya dokumen bergambar),
browser harus mengirimkan HTTP request lagi untuk setiap file
browser menampilkan semua isi dokumen kepada user
Dalam kerja web yang paling utama adalah protocol HTTP. HTTP (HyperText Transfer
Protocol) adalah protokol yang dipergunakan untuk mentransfer dokumen dalam
World Wide Web (WWW). Protokol ini adalah protokol ringan, tidak berstatus dan
generik yang dapat dipergunakan berbagai macam tipe dokumen.
Pengembangan HTTP dikoordinasi oleh Konsorsium World Wide Web (W3C) dan
grup bekerja Internet Engineering Task Force (IETF), bekerja dalam publikasi satu
seri RFC, yang paling terkenal RFC 2616, yang menjelaskan HTTP/1,1, versti HTTP
yang digunakan umum sekarang ini.
HTTP adalah sebuah protokol meminta/menjawab antara client dan server. Sebuah
client HTTP seperti web browser, biasanya memulai permintaan dengan membuat
hubungan TCP/IP ke port tertentu di tuan rumah yang jauh (biasanya port 80).
Pemrograman Berbasis Web Pemrograman berbasis web pada dasarnya adalah sama dengan pemrograman internet
tetapi lebih spesifik lagi hanya mempelajari pemrograman yang menggunakan protocol
HTTP atau aplikasi web.
http://id.wikipedia.org/wiki/World_Wide_Webhttp://id.wikipedia.org/wiki/World_Wide_Webhttp://id.wikipedia.org/w/index.php?title=Internet_Engineering_Task_Force&action=edithttp://id.wikipedia.org/w/index.php?title=MIME&action=edithttp://id.wikipedia.org/wiki/Request_for_Comment
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 6
Saat ini pemrograman web dibagi menjadi 2 kelompok, yaitu :
client side programming (HTML, CSS, Javascript, Jscript, VBScript)
server side programming (PHP,ASP,JavaServelet, SGI, Perl)
Perbedaan utama server-side programming dan client server programming adalah
tempat mengeksekusi skripnya. Pada client server programming, skrip dieksekusi di
browser sedangkan server side programming dieksekusi di client (web browser)
Karakteristik client side scripting :
1. Kode program didownload bersama dengan halaman web
2. Bersifat interpreter dan diterjemahkan oleh browser
3. Model eksekusinya simple dan skrip dapat dijadikan satu dengan HTML
Karakteristik server side programming :
1. Ada client yang meminta request
2. Eksekusi program dilakukan di server
3. Mengirimkan hasil ke client
Keuntungan server side programming :
1. Cross platform : tidak tergantung dengan browser tertentu
2. Optimasi danpemeliharaan dilakukan di browser
3. Dapat mengakses database dan tidak tergantung dengan keamanan
4. Menambah kekuatan server
5. Kode program aman
Aplikasi yang sering digunakan oleh server side programming
1. Search engines
2. Database access
3. Chat & bulletin board service
Terkait dengan kebutuhan user yang ingin web yang lebih interaktif, nyaman, cepat dan
mudah digunakan, maka saat ini munculah teknik pemrograman baru disebut AJAX
(Asynchronous JavaScript And XML). Dikenal juga dengan istilah Web 2.0. Pasti anda
tertarik mempelajarinya. Sebab dengan teknik ini sebagian besar interaksi pada
computer webserver, melakukan pertukaran data dengan server dibelakang layar
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 7
sehingga halaman web dapat tidak harus dibaca ulang setiap kali pengguna melakukan
perubahan.
HTML (Hypertext Mark-up Language)
HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman
web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula
dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan
percetakan yang disebut dengan SGML, HTML adalah sebuah standar yang digunakan
secara luas untuk menampilkan halaman web dan HTML kini merupakan standar
Internet yang saat ini dikendalikan oleh World Wide Web Consortium (W3C).. Untuk
mudahnya,
HTML pada dasarnya berupa kode - kode tag yang menginstruksikan browser untuk
menghasilkan tampilan sesuai dengan yang diinginkan.
Ciri ciri dokumen html :
Ekstensi file berupa .htm atau .html
Non case sensitive.
Terdiri atas tag - tag pembuka dan penutup (walaupun ada beberapa tag
yang tidak memiliki penutup).
Tag- tag saling berpasangan & bersarang
Program Editor Html Untuk membuat dokumen HTML, anda perlu mengetahui dan mempelajari tag-tag
yang digunakan untuk menandai bagian-bagian dari suatu dokumen HTML. Anda
dapat menggunakan program editor teks biasa seperti Notepad untuk aplikasi
Windows atau Sidekick dan WordStar dalam format Non Document untuk aplikasi
DOS.
Semua dokumen HTML harus disimpan sebagai file teks murni. Ada dua macam
ekstensi file yang dapat digunakan, yaitu ekstensi file html ( untuk sistem operasi
UNIX atau WINDOWS 95) atau .htm ( untuk sistem operasi DOS/WINDOWS 3.x)
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 8
Buka Notepad kemudian tulis source code diatas lalu Simpanlah file tersebut dengan
meng-klik menu File lalu Save As. Pada kotak dialog yang muncul, terlebih dahulu
klik anak panah kecil di ujung kanan kotak Save as type kemudian pilih All Files
(*.*). Setelah itu, isilah kotak File name dengan nama file yang anda inginkan
misalnya: latih1.htm. Jangan lupa penambahan ekstensi .htm di belakang nama
file! Akhirnya, klik tombol Save maka file akan tersimpan sebagai dokumen web.
Struktur Dokumen Html
Dalam dokumen HTML, elemen dibagi menjadi tiga kategori utama, yaitu :
1. Elemen yang menyatakan suatu dokumen HTML 2. Elemen-elemen yang memberikan informasi tentang dokumen tersebut,
seperti judul dokumen atau hubungannya dengan dokumen lain
3. Elemen-elemen yang menentukan bagaimana isi suatu dokumen
ditampilkan oleh browser, seperti paragraf, list (daftar), tabel dan lain-lain.
Struktur dokumen HTML terlihat seperti berikut ini :
*** Bagian HEAD ***
*** Bagian BODY ***
A. ELEMEN HEAD
Tidak semua tag dapat diletakan dibagian HEAD. Tag-tag yang hanya boleh
diletakan di bagian HEAD adalah :
1. TITLE
Judul dari dokumen. Tag ini mutlak diperlukan dalam semua dokumen
HTML.
Sewaktu membuat judul, sebaiknya tidak menuliskan judul lebih dari 64 karakter
Contoh :
Home Pribadi Saya
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 9
2. BASE
Menyatakan URL asal dari suatu dokumen
Base menyediakan suatu jalur pencarian bagi dokumen-dokumen atau
gambar yang mempunyai hubungan dengan dokumen dari pengguna tag BASE
tersebut.
Contoh :
Home Pribadi Saya
3. ISINDEX
Digunakan untuk menyatakan bahwa server dapat melakukan pencarian dalam
dokumen
memberitahukan browser untuk membuat suatu bentuk pencarian
sederhana dimana pemakai dapat memasukan satu atau lebih variabel
pencarian.
Contoh :
Home Pribadi Saya
*** isi dokumen html anda
4. LINK
Menyatakan hubungan antara dokumen dengan dokumen lainnya
juga digunakan untuk menyatakan pengarang, indeks dan istilah, dokumen sebelum atau sesudahnya, dan lain-lain.
merupakan suatu tag tunggal karena tidak mempunyai tag akhir , itu sebabnya berada pada bagian < HEAD>
Berikut ini adalah atribut yang bisa digunakan pada tag , yaitu :
HREF Menunjuk pada dokumen atau bagian dokumen yang
http://www.ina.com/homepage.htmlhttp://www.ina.com/homepage.html
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 10
tersebut dituju oleh LINK
REL Menyatakan hubungan antara dokumen saat ini dengan
nilai pada HREF
REV Seperti REL menyatakan hubungan antara dokumen saat
ini dengan nilai pada HREF, hanya saja dalam hubungan
yang berlawanan dengan REL
NAME Menyatakan suatu link dari suatu anchor atau URL ke
dokumen ini
URN Menyatakan suatu Uniform Resource Number untuk
dokumen saat ini
TITLE Seperti tag befungsi sebagai judul
METHODS Menampilkan fungsi-fungsi yang didukung oleh dokumen
saat ini, bagaimana ia bisa dilihat oleh suatu browser
Contoh :
Contoh LINK
http://
mailto:[email protected] m
HR
5. META
Menyatakan meta-information ( informasi tentang suatu informasi ) dalam suatu
dokumen
META mempunyai tiga buah atribut, yaitu :
NAME Merupakan informasi untuk suatu dokumen, bukan sebagai judul
dokumen
HTTP-EQUIV Atribut ini menghubungkan elemen META ke respon protokol tertentu
CONTENT Isi dari nama suatu meta atau respon yang dibuat oleh HTTP-
EQUIV
Contoh potongan program :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 11
WARNA NOMOR HEXADESIMAL Black #000000 Maroon #800000 Green #008000 Olive #808000 Navy #000080 Purple #800080 Teal #008080 Gray #808080 Silver #C0C0C0 Red #FF0000 Lime #00FF00 Yellow #FFFF00 Blue #0000FF Fuchsia #FF00FF Aqua #00FFFF White #FFFFFF
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 12
Tulisan i ni akan t ampak dal am brows er.
C. TAG HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu
elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-
tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil ().
Tag biasanya merupakan suatu pasangan yang disebut dengan :
1. Tag awal, dinyatakan dalam bentuk
2. Tag akhir, dinyatakan dalam bentuk
Format : teks yang ditampilkan
Contoh : untuk menampilkan teks dalam format teks miring
Teks ini terlihat miring di browser
anda
Tidak semua tag mengikuti aturan diatas. Ada beberapa macam bentuk tag yang
dikenal oleh HTML, dimana umumnya tag-tag dalam dokumen HTML muncul dalam
bentuk seperti barikut ini :
1. teks
Contoh : Home Page Saya
Tag yang umum dipaki dalam suatu dokumen HTML, yaitu tag yang
mempunyai awal dan akhir
2.
Contoh :
Tag tersebut disebut dengan tag tunggal, yaitu tag yang hanya terdiri dari tag
awal saja tanpa disertai dengan tag akhir.
3. teks
Contoh :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 13
D. ATRIBUT Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari
tag tersebut. Misalnya :
digunakan untuk membuat rata kiri
suatu paragraf. Tag yang digunakan adalah
dan atribut yang menyertainya
adalah ALIGN dengan nilai left. Nilai atribut ALIGN hanya bisa berupa center, left, right
atau justify.
Dalam HTML, nilai atribut dalam pasangan tanda petik ganda, kecuali jika :
Nilai merupakan suatu kumpulan dari nilai tertentu ( misalnya dalam
tanda petik ganda boleh dihilangkan, maka penulisan
boleh
).
Nilai hanya berisi angka, huruf dan titik (dalam , kedua nilai tersebut
memerlukan tanda petik ganda karena SRC mengandung tanda / dan ALT
mengandung spasi ).
Pengolahan Huruf Kita akan mempelajari beberapa tag yang relatif mudah diingat. Tag-tag ini berfungsi
untuk mengubah tipe huruf yaitu menebalkan (bold), membuat tulisan miring (italic)
atau memberi garis bawah (underline). Buka lagi program Notepad kemudian
tuliskan seperti berikut ini:
T i pe- tipe Teks
Ada tiga macam ti pe tulisan yang pal ing seri ng diguna kan dalam
penulisan dokumen apa saja. Ketiga t i pe terse but ialah tulisan
t ebal, tu l isan miring dan tulisan bergaris bawah. Bisa pula dua
tipe huruf di padukan misalnya tulisan t ebal dan miring, t ulisan
t ebal dan bergaris bawah atau tulisan miring dan bergaris bawah.
Bahkan bi sa pula ketiga tipe tulisan tersebut sekaligus bergabu ng
menjadi satu ber upa tuli san tebal, miring dan berg aris bawah.
Simpanlah file tersebut. Setelah file tersimpan, bukalah file tersebut dengan program
Internet Explorer. Perhatikanlah bahwa semua tulisan dalam dokumen tersebut
masih seragam. Kini, kita akan melakukan sedikit perubahan pada beberapa kata
dan kalimat yang ada di situ sehingga menjadi seperti ini:
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 14
Bagaimana caranya? Bukalah source code dari dokumen tadi (tekan F5),
kemudian tambahkan tag-tag berikut. Tag-tag tersebut adalah untuk
menebalkan (bold) tulisan, untuk memiringkan (italic) tulisan dan untuk
menggaris-bawahi (underline) tulisan:
T i pe- tipe Teks
Ada tiga macam ti pe tulisan yang pal ing seri ng diguna kan dalam
penulisan dokumen apa saja. Ketiga t i pe terse but ialah tulisan
tebal< / B>, tulisan miring dan t ulisan bergaris
bawah. Bisa pula dua tipe hur uf dipadu kan misal nya tulis an
t ebal dan miring, tulisan teb al dan ber garis
bawah atau t ulisan miring
dan berg aris bawah. Bahkan bisa pula ke t iga tipe tulisan
t ersebut sekaligus bergabu ng menjadi satu ber upa tuli san
tebal, miring
dan berg aris bawah .
Setelah anda menambahkan semua tag-tag tersebut, simpan (Save) file source
code itu kemudian lakukan Refresh pada dokumen web yang tampak pada
program browser anda. Lihatlah hasil perubahannya! Andaikata ada yang tidak
beres, coba perhatikan baik-baik penulisan tag-tag anda, mulai dari tag pembuka
hingga jangan sampai ada yang salah tulis meskipun satu
karakter. Misalnya: bila tag anda tulis maka browser tidak akan
menampilkan tulisan apa-apa dalam dokumen anda. Kalau tidak percaya, cobalah
menulis source code yang salah seperti itu, simpan (save) kemudian refresh
dokumen anda dan lihatlah hasilnya!
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 15
BAB II Pengolahan Text
MEMFORMAT DOKUMEN
Untuk memformat dokumen digunakan tag-tag berikut ini :
Tag
Tag ini tidak memerlukan tag penutup, yang berfungsi untuk berpindah baris.
Tag
Tag ini digunakan untuk menentukan perataan tengah teks terhadap dokumen.
Contoh :
Belajar HTML
Tag
Tag ini berfungsi untuk memformat paragraph/alinea. Adapun kelengkapan atribut-
atribut dari tag ini adalah:
- ALIGN, yang berfungsi untuk menentukan perataan teks paragraph secara rata
kiri (LEFT), rata kanan (RIGHT) atau rata tengah (CENTER).
Contoh pemakaian:
Ini adalah teks yang ditulis dalam paragraph dengan perataan
teks rata kanan
Memformat Dokumen
Memformat Paragraf
Dalam HTML paragraf dapat diformat dengan menggunakan
, dimana teks yang dituliskan
diletakkan antara
dan
.
Paragraf juga dapat diatur perataannya yaitu rata kiri,
tengah dan kanan. Untuk menentukan perataan
paragraf digunakan atribut ALIGN. Sehingga penulisan tag - nya
dapat dituliskan
Teks Paragraf
.
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 16
Jika ditampilkan akan tampak seperti berikut ini:
Tag
Tag ini berfungsi untuk mendefinisikan garis horisontal dokumen.
Sedangkan atribut-atribut yang didukung meliputi:
- SIZE, untuk menentukan ketebalan garis (dalam ukuran piksel)
Contoh pemakaian :
- COLOR, digunakan untuk menentukan warna garis. Warna garis dapat diisi
dengan RED, GREEN, BLUE, YELLOW dll, atau dengan memanfaatkan warna
dalam bentuk Hexadesimal seperti : #00FF00 untuk wana hijau, #FF0000 untuk
warna merah dsb.
- WIDTH, digunakan untuk menentukan lebar garis (dalam satuan piksel atau
persenatase). Contoh :
atau
- NOSHADE, untuk menghilangkan efek tiga dimensi garis.
Contoh pemakaian :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 17
Memformat Dokumen
Menampilkan Garis Horisontal
Jika dijalankan akan tampak tampilan sebagai berikut :
Tag , dimana n=1,2,3,4,5,6
Berfungsi untuk mendefinisikan header (kepala/judul) dokumen.
Atribut-atribut yang dimiliki yaitu:
- ALIGN, yang digunakan untuk menentukan perataan teks header terhadap
dokumen. Nilainya yaitu: LEFT, CENTER dan RIGHT.
Memformat Dokumen
Menampilkan HEADING TEXT
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Headi ng 6
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 18
Sehingga apabila contoh kode di atas dijalankan akan tampil sbb:
Tag
Berfungsi untuk memformat teks-teks dokumen agar tampilan/layout identik dengan
layout yang disusun pada editornya. Sehingga karakater spasi (Space) dan Carriage
Return (CR) akan ditampilkan apa adanya.
Memformat Dokumen
Menggunakkan
Daftar Nilai Pemrograman Internet I
Semester Genap Th Akademik 2006/2007
+------------ +---------------------------------- +--------- +
| No Mhs | Nama Mahasiswa | Nilai |
+------------ +---------------------------------- +--------- +
| 05.1.00001 | Budiman Waluyo | 3.1 |
| 05.1.00002 | Agus Suharja | 2.9 |
| 05.1.00003 | Muhamand Yamin | 3.2 |
| 05.1.00004 | Daniel Sukarman | 3.0 |
+------------ +---------------------------------- +--------- +
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 19
Tampilan dari kode di atas adalah sebagai berikut :
MEMFORMAT KARAKTER
Untuk memformat karakter dapat digunakan koleksi tag-tag berikut ini :
Tag
Tag ini berfungsi untuk menentukan teks yang tampil tercetak tebal.
Tag
Tag ini berfungsi untuk menentukan teks yang tampil tercetak miring
Tag
Tag ini berfungsi untuk menentukan teks yang tampil tercetak garis bawah.
Tag
Tag ini berfungsi untuk menentukan teks yang tampil tercetak garis tengah.
Tag
Tag ini berfungsi untuk menentukan teks yang tampil tercetak seperti huruf mesin
ketik.
Tag
Tag ini berfungsi untuk menentukan teks yang tampil tercetak lebih kecil dibanding
biasanya.
Tag
Tag ini berfungsi untuk menentukan teks yang tampil tercetak lebih besar disbanding
biasanya.
Tag
Tag ini berfungsi untuk menentukan teks yang tampil tercetak sebagai teks subskrip
Tag
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 20
Tag ini berfungsi untuk menentukan teks yang tampil tercetak sebagai teks
superskrip
Contoh :
Memformat Kara kter
Memformat Karakter
Teks cetak Tebal
Teks cetak Miring
Teks cetak Garis Bawah
Teks cetak Tebal
Teks cetak Huruf Mesin Ketik
Teks cetak Lebih K ecil
Teks cetak Lebih Besar
Teks cetak H2SO4
Teks cetak X3+Y2=0
Tampilan dari kode di atas adalah sebagai berikut :
Memformat FONT
Untuk memformat font digunakan tag , adapun yang dipengaruhi oleh tag ini
meliputi ukuran, jenis dan warna font. Atribut-atribut yang dapat dipakai untuk mengatur
ketiga hal tersebut yaitu :
SIZE, digunakan untuk menentukan ukuran font.
COLOR, digunakan untuk menentukan warna font.
FACE, digunakan untuk menentukan jenis atau bentuk font. Misal jenis font dapat dipakai yaitu : Arial, Verdana, Times New Romans, Courier dll.
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 21
Contoh Penggunaan :
Memformat FONT
Memformat FONT
Jenis FONT Arial
Black dengan warna Biru dan Ukuran Font
5
Teks dengan FONT Monotype
Corsiva dengan Ukuran Font 7
Teks dengan FONT VERDANA dengan
Ukuran Font default
Tampilan dari kode-kode di atas adalah :
NOTASI KHUSUS
Kita telah mengetahui bahwa browser tidak mengenal pembuatan baris dengan
tombol Enter. Disamping itu, browser juga tidak mengenal pembuatan spasi lebih
dari satu spasi dengan menekan tombol Spasi ataupun tombol Tab.
Pembuatan spasi dalam kode-kode HTML diganti tulisan seperti yang
bisa kita lihat pada contoh berikut ini:
kata - kata ini dia ntarai sa t u spasi sedangkan kata - kata
&n bsp; ini di antarai
&nbs p;
lima sp asi
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 22
Tampilan dari kode di atas adalah sebagai berikut :
Disamping notasi untuk pembuatan spasi () ada lagi sejumlah notasi
khusus untuk penulisan karakter-karakter tertentu. Karakter-karakter ini harus
dituliskan dengan notasi khusus mengingat karakter-karakter ini dipakai juga
sebagai kode-kode tag atau karena memang tidak dijumpai dalam karakter teks
ASCII. Berikut beberapa diantaranya:
Karakter Keterangan Notasi < kurung runcing buka < > kurung runcing tutup > & dan & " tanda petik ganda " + tanda plus minus &plusm
n; hak cipta atau copyright terdaftar atau registered
INDENTASI
Indentasi paragraph adalah cara mengatur posisi baris-baris paragraf dari margin
(tepi halaman). Ada tiga macam bentuk :
tag
baris pertamanya saja yang agak masuk ke dalam.
Contoh:
Paragraf atau alinea i alah seku mpulan ka l imat yang
mengandung satu pokok pi k iran. Ant ara satu paragraf
dengan paragraf l ainnya bi asanya dipisahk an oleh baris
koso ng. Namun biasa pul a paragr af itu di t andai dengan
posisi bar i s pertam anya yang agak masuk ke dal am.
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 23
Beginilah hasilnya bila dibuka dalam browser:
tag
membuat paragraf yang semua barisnya agak masuk ke dalam. Untuk
membuat paragraf semacam ini kita menggunakan yang mengapit paragraf-
paragraf yang hendak kita jadikan masuk ke dalam.
Ini adal ah paragr af normal
Ini paragraf yang agak masuk ke dalam.
Ini juga contoh paragraf yang agak masuk
ke dalam. Dengan kalimat ya ng agak panjang, k i ta lihat bahwa
semua bar is dalam par agraf ini letaknya agak masuk ke
dal am. S ama rata sama jauhnya< / i>.
Nah, paragraf i ni kembal i normal, karena t ag
bl ockquote< / i> sudah berl alu alias sud ah ditutup di atas.
Beginilah tampilannya dalam browser:
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 24
daftar definisi (definition list)
Daftar definisi ialah susunan paragraf yang berselang-seling antara paragraf
normal yang merupakan kalimat yang hendak dijelaskan dengan paragraf yang
agak masuk ke dalam yang merupakan penjelasan atau definisi dari kalimat
di atasnya. Untuk lebih jelasnya, berikut ini contoh daftar definisi:
Untuk membuat daftar definisi semacam di atas digunakan tiga macam tag yaitu
yang menandai dimulai atau diakhirinya daftar definisi, yang
menandai paragraf normal (yang dijelaskan) dan yang menandai paragraf
yang agak masuk ke dalam (yang menjelaskan paragraf di atasnya).
Ini contoh source kode di atas :
Daftar Istilah Penting:
I nternet
Sing katan dari inte r connecti on networ k atau hubungan
antar jaringan. Internet ialah j aringan komputer gl obal dan
merupakan jaring an komputer yang ter besar di dunia kar ena mampu
menghubungkan sel uruh komputer yang ada di dunia.
HTTP
Sing katan dari Hype r text Tra nsfer Pro t ocol adalah
salah satu protokol bahasa yang digun akan untuk berkomu nikasi
ant ar server komput er dalam in t ernet. Pr otokol bahasa yang lain
dal am inter net misal nya: Telnet, News, Gropher, FTP.
Karena cuma demo, cukup dua definisi sajalah. Nah, par agraf
ini kembali normal.
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 25
BAB III List Element
Informasi dapat disampaikan dengan mudah jika ditampilkan dengan
menggunakan daftar. HTML menyediakan beberapa jenis daftar, yaitu :
Ordered List/Numbered List
Unordered List/Bulleted List
Menu List
Directory list
Definition List
A. Ordered List
Adalah suatu daftar dimana item-item yang ada dalam daftar memiliki nomor
secara urut. Ordered List dimulai dengan tag awal dan diakhiri dengan tag
, dan diantara kedua
tag tersebut terdapat tag yang menyatakan list item.
Contoh :
Ordered List
Dibawah ini aalah warna Pelangi :
Merah
Jingga
Kuning
Hijau
Biru
Nila
Ungu
Hasil pada tampilan browser :
Mengganti jenis nomor pada tag beserta fungsi-fungsinya :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 26
Atribut Fungsi COMPACT Untuk menyatakan bahwa item dalam daftar pendek, sehingga
browser menampilkan dalam bentuk yang lebih padat TYPE = A Membuat daftar berurut dengan huruf besar ( A,B,C,..) TYPE = a Membuat daftar berurut dengan huruf TYPE = I Membuat daftar berurut dengan huruf romawi TYPE = i Membuat daftar berurut dengan huruf romawi kecil (i,ii, TYPE = 1 Default nilai daftar berurut START = n Menentukan nilai awal dari item dalam daftar, n = adalah nilai awal
Contoh :
Nested Ordered Lis t
Planet dalam sistem tata surya :
Merkurius
57,9 juta kilometer dari matahari
Tidak punya satelit
Venus
108 juta kilometer dari mat ahari
Tidak punya satelit
Bumi
149,6 juta kilometer dari matahari
Satu satelit = Bulan
Mars
227,9 kilometer dari matahri
Dua satelit =
Pho
bos
Dei
mos
Hasil pada tampilan browser :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 27
B. Unordered List
Adalah daftar dimana urutan item tidak diutamakan. Item-item tampil dalam
sembarang urutan. Setiap item dalam Unordered List biasanya ditandai dengan
bulatan, kotak atau lingkaran.
Penggunaan Unordered List diawali dengan tag dan diakhiri dengan tag
, dan didalamnya ditandai dengan tag .
Contoh :
Nested Unordered List
Planet dalam sistem tata surya :
Merkurius
57,9 juta kilometer dari matahari
Tidak punya satelit
Venus
108 juta kilometer dari matahari
Tidak punya satelit
Bumi
149,6 juta kilometer dari matahari
Satu satelit = Bulan
Mars
227,9 kilometer dari matahri
Dua satelit =
Phobos
Deimos
Hasil tampilan browser :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 28
Tambahan atribut pada tag :
Atribut Fungsi TYPE = circle Membuat tanda lingkaran O untuk item TYPE = square Membuat tanda kotak untuk item TYPE = disc Membuat tanda cakram untuk item
C. Menu List
Adalah suatu daftar item yang pendek yang tidak disertai dengan nomor
ataupun penanda item. Menu List menggunakan tag awal dan tag
akhir , didalamnya menggunakan tag . Browser secara otomatis
akan mengidentifikasi setiap item yang ada dalam menu list. Menu List biasanya
digunakan untuk menampilkan item-item yang mempunyai link ke page lain. Untuk
membuat link ini digunakan tag yang akan membuat link ke halaman lain.
Penggunaan tag adalah link ke halaman page.html .
Contoh :
Menu List
Planet dalam sistem tata surya :
Merkurius
Venus
Bumi
Mars
Jupiter
Saturnus
Uranus
Neptunus
Pluto
Hasil dari tampilan Browser :
D. Directory List
Adalah daftar item yang kurang dari 24 karakter (seperti file direktori UNIX atau
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 29
DOS yang menggunakan parameter / w). Direktori List menggunakan tag awal
dan tag akhir . Penggunaan tag juga diperlukan.
Contoh :
Directory List
Warna Pelangi :
Merah
J ingga
Kuning
Hijau
Biru
Nila
Ungu
Hasil dari tampilan browser :
E. Definition List
Adalah suatu jenis daftar khusus yang berbeda jauh dengan daftar-daftar
sebelumnya. Definition List digunakan untuk mendefinisikan atau menjelaskan istilah-
istilah yang disebut juga Glossary List (daftar istilah).
Definition List dinyatakan dengan tag awal dan tag akhir . Dalam tag
tersebut ada dua bagian, yaitu:
Istilah yang akan didefinisikan, dinyatakan dengan tag tunggal atau
Definition Term
Definisi dari istilah tersebut dinyatakan dengan tag tunggal atau Definition
Data
Contoh :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 30
Definition ist
Planet dalam sistem tat a surya :
Merkurius
Planet yang paling kecil dan paling dekat dengan
matahari,
berevolusi dengan matahari selama 88,8 hari. Jarak dari matahari
adalah
58,3 juta kilometer (36,2 juta mil) dan mempunyai ukuran radius kira -
kira
2,414 kilome ter (1,500 mil).
Bumi
Planet ketiga dari matahari, berevolusi dengan matahari
selama
365,26 hari. Jarak dari matahari adalah 149 juta kilometer (92,96
juta
mil), berputar pada porosnya selama 23 jam 56,07 menit, mempunyai
radius
6,374 kilometer (3, 959 mil) dan mempunyai berat kira - kira 29,11 x
10^24
kilogram (13,17 x 10^24 pounds).
Hasil dari tampilan browser :
F. Kombinasi Tipe List
Kombinasi tipe list diperlukan jika suatu daftar berisi daftar dengan tipe
berbeda. Sebagai contoh, anda mempunyai ordered list yang didalamnya berisi daftar
unordered dan data definition. Contoh :
Combined List
Planet dari sistem Tatasurya :
Merkurius
Dewa perdagangan dan perjalanan
Definisi
Mercury
Planet yang paling kecil dan paling dekat dengan
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 31
matahari, berevolusi dengan matahari selama 88,8 hari. Jarak dari
matahari adalah
58,3 juta kilometer 36,2 juta mi l) dan mempunyai ukuran radius kira -
kira
2,414 kilometer (1,500 mil).
Venus
Dewi cinta dan kecantikan
Definisi
Venus
Planet kedua dari matahari, berevolusi dengan matahari
selama
224,7 hari. Jarak dari matahari adalah 100,1 juta kilometer (67,2
juta
mil), mempunyai radius 6,052 kilometer (3,760 mil) dan mempunyai
berat kira - kira 0,815 dari Bumi.
Hasil dari tampilan browser :
G. Membuat Bullet List yang Berbeda
Bullet yang berbeda dapat digunakan dalam tag . Pemakaian tag
dalam
Unordered List dapat ditinggalkan. Anda bisa memakai image sesuai dengan keinginan
anda. Tag
harus digunakan untuk menampilkan gambar. Tag sebagai pengganti
pemakaian tag . Formatnya Merah
Contoh :
Manual List
Warna Pelangi :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 32
Merah
Jingga
Kuning
Hijau
Biru
Nila
Ungu
Hasil dari tampilan browser :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 33
BAB IV IMAGE DAN LINK
IMAGE
Yang harus diketahui sebelum menambahkan gambar dalam dokumen HTML
adalah :
File gambar lambat untuk di download.
Beberapa search engine seperti Alta Vista dan Excite tidak bisa menampilkan file
gambar
Tidak ada browser grafik/gambar
Gambar tidak selalu dikenal secara international
Warna gambar mungkin tidak ditampilkan seperti aslinya
A. Format gambar
Saat ini sebagian masyarakat WEB menjadikan format GIF dan JPEG sebagai
format standar untuk menampilkan gambar dalam WEB.
B. WARNA
GIF ( Graphic Interchange Format ) : menghasilkan gambar sampai dengan 256
warna. Warna sejumlah ini baik untuk membuat gambar logo, icon, garis seni
dan gambar-gambar lain yang sederhana tetapi tidak cukup baik untuk
menyimpan gambar fotografik.
JPEG ( Joint Photographic Expert Group ) : menghasilkan 16,7 juta warna.
Dengan warna sebanyak ini, JPEG sangat efektif untuk menyimpan gambar-
gambar dengan kualitas foto.
C. Pemadatan Ukuran Gambar
GIF memadatkan datanya dengan menggunakan metode lossless
compression. Metode lossless compression bekerja dengan mencari pola-
pola berulang dalam suatu gambar. Lossless compression pada GIF
membuang informasi dalam jumlah yang sedikit, yaitu hanya warna-warni
dengan pola yang sama. Jika file GIF ditampilkan, waktu yang digunakan
tidak lama, karena file hasil pemadatan dengan file yang diuraikan
merupakan dua buah file yang hampir sama. Gambar file PNG juga
menggunakan lossless compression, sehingga bisa menjadi alternatif
pengganti file GIF.
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 34
JPEG menggunakan metode pemadatan lossy compression. Pemadatan
gambar metode lossy compression, membuang sejumlah bit-bit gambar
untuk membuat gambar berukuran kecil. Tingkat pembuangan informasi
gambar ini biasanya dapat ditentukan oleh pemakai sewaktu membuat file
JPEG.
D. Menampilkan inline dan external image
Cara menampilkan gambar dalam web, ada dua cara, yaitu internal dan
eksternal.
Internal Image : gambar ditampilkan secara langsung saat web page dimuat
dalam browser yang berbasiskan grafik.
External Image : gambar yang tidak ditampilkan secara otomatis ketika suatu
page dimuat, tetapi hanya akan dimuat jika pemakai menginginkan.
Menempatkan gambar pada dokumen HTML sangat mudah, dengan menggunakan
tag beserta atribut SRC. Kemudian tempatkan nama file dengan URL untuk
menampilkan gambar. Penggunaan
secara umum adalah :
Contoh :
Penggunaan Tag IMG
Penggunaan tag IMG
Teks ditampilkan setelah gambar.
Teks ini terpotong dengan
gambar logo.
Gambar tampil inline setelah teks ini
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 35
Hasil tampilan dari web browser :
E. Mengatur Perataan teks dengan Inline Image
Secara default, ketika image inline dengan teks, teks ditampilkan rata bawah
dengan gambar. Pengaturan perataan ini menggunakan atribut ALIGN dalam tag
.
TOP : Meratakan teks dengan bagian atas gambar
MIDDLE : Meratakan gambar dengan bagian tengah gambar
BOTTOM : Meratakan teks dengan bagian bawah gambar
Contoh :
Penggunaan Align PadaTag IMG
Perataan Teks dalam tag IMG
Teks ini rata dengan bagian atas gambar.
Teks ini rata dengan bagian tengah gambar
Teks ini rata dengan bagian bawah gambar.
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 36
Hasil tampilandari browser :
F. Mengatur Posisi Gambar Pada halaman WEB
Gambar bisa diatur untuk berada di kiri atau di kanan halaman WEB.
Penggunaan atribut ALIGN beserta nilainya dalam tag untuk mengatur
tampilan teks disekitar gambar.
LEFT : Meletakan gambar di sebelah kiri teks. Teks wrap di sekitar gambar
RIGHT : Meletakan gambar di sebelah kanan teks. Teks wrap di
sekitar gambar.
Contoh :
Tag IMG dan atribut ALIGN
Penggunaan Perataan Teks
Ga mbar rata kiri
Dalam buku ini akan dipelajari cara membuat halaman WEB. World
Wide Web (WEB) adalah suatu kumpulan informasi pada beberapa
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 37
server komputer yangterhubung satu sama lain dalam jaringan
Internet.
Buku ini berisi cara pengatur para graf dokumen, membuat tabel,
membuat frame juga tidak ketinggalan cara membuat form.
Demikian diharapkan para pembaca nantinya mampu membuat web site
sendiri.....
Gambar rata kanan
Dalam buku ini akan dipelajari cara membuat halaman WEB. World
Wide Web (WEB) adalah suatu kumpulan informasi pada beberapa
server komputer yang terhubung satu sama lain dalam jaringan
Internet.
Buku ini berisi cara pengatur paragraf dokumen, membuat tabel,
membuat frame juga tidak ketinggalan cara membuat form.
Demikian diharapkan para pembaca nantinya mampu membuat web site
sendiri.....
Hasil tampilan dari web browser :
G. Mengatur Ukuran Gambar Pada Browser Ada dua keuntungan dengan mengatur ukuran gambar pada browser, yaitu :
Pengaturan ukuran membantu pengguna yang tidak bisa menampilkan gambar
secara inline.
Pengaturan ukuran membuat halaman web lebih cepat ditampilkan.
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 38
Pengaturan ukuran tinggi dan lebar pada tag dilakukan oleh atribut
HEIGHT dan WIDTH. Kedua atribut ini mengatur ukuran gambar dengan ukuran pixel.
Contoh :
Menggunakan HEIGHT dan WIDTH
Mengatur Ukuran Tinggi dan Lebar Gambar
Gambar Ukuran Asli
Gambar Ukuran lebar=180px Tinggi 140px
Hasil tampilan dari web browser :
H. Menambahkan Teks Keterangan
Anda dapat menambahkan keterangan tambahan pada gambar yang
ditampilkan secara inline. jika petunjuk mouse diletakan di atas gambar, maka
teks keterangan akan ditampilkan. Gunakan atribut ALT dalam tag .
Pemakaian secara umum :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 39
Contoh :
Menggunakan atribut ALT
Penggunaan atribut ALT
Hasil tampilan dari web browser :
I. Memberi Border Pada Gambar
Gambar yang ditampilkan oleh browser tanpa border. Atribut BORDER
memberikan suatu border atau batas pada suatu inline gambar. Inline gambar tidak
mempunyai border kecuali berfungsi sebagai link. Nilai untuk BORDER menggunakan
satuan pixel.
Contoh :
Penggunaan Atribut BORDER
Penggunaan BORDER untuk gamb ar
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 40
BORDER=0>
Hasil tampina dari web browser :
J. Memberi Ruang Pada Gambar
Atribut HSPACE dan VSPACE digunakan untuk menentukan jarak spasi
antara gambar dengan objek di sekitarnya. Atribut HSPACE menentukan spasi
horisontal ( bagian kanan dan kiri ) suatu gambar, sedangkan atribut VSPACE
menentukan spasi vertikal ( bagian atas dan bawah ) gambar. Spasi ini dinyatakan
dalam bentuk pixel dan akan memberi spasi kosong di sekitar gambar. Contoh :
Atribut VSPACE dan HSPACE
Menggunakan atribut VSPACE dan HSPACE
Teks Wrap disekitar Gambar
Dalam buku ini akan dipelajari cara membuat halaman web. World
Wide Web (WEB) adalah suatu kumpulan informasi pada beberapa
server komputer yang terhubung satu sama lain dalam jaringan
Internet.
Buku ini berisi cara pengatur paragraf dokumen, membuat
tabel, membuat frame juga tidak ketinggalan cara membuat form.
Demikian diharapkan para pembaca nantinya mampu membuat web site
sendiri....
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 41
Hasil tampulan dari web browser :
K. Link Dengan Gambar
Suatu gambar dapat berfungsi secara bersama-sama dengan tag . jika
gambar di klik maka link akan menuju ke informasi yang diberikan pada tag .
Gambar yang dijadikan Link muncul dengan dikelilingi kotak. Hal ini untuk
membedakan dengan gambar biasa. Anda juga bisa menggabungkan gambar
sebagai link dan teks sebagai link. Dengan demikian, ada dua pilihan link ke suatu
dokumen.
Contoh :
Gambar sebagai link
Gambar sebagai link
Ini gambar biasa
Gambar berfungsi sebagai link
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 42
Link ke beruang
Hasil tampilan dari web browser : LINK
Link dapat menuju ke Web Page, grafik, suara, film, program, isi dari server
Gopher, log-in ke suatu remote computer, server e-mail atau ke suatu ftp.
A. Hypertext dan Hypermedia
Dokumen Hypertext adalah dokumen yang berisi link ke dokumen lain.
Dokumen Hypermedia adalah dokumen yang berdasarkan hypertext ditambah
dengan multimedia seperti gambar, video dan audio.
B. Uniform Resource Locator
WWW menggunakan URL untuk menuju ke lokasi dari suatu informasi
pada server lain. Pemakaian umum URL adalah
Protokol://domain _host{:port}/path/nama_fil e.
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 43
Dimana protokol bisa salah satu dari :
http = untuk suatu file pada server WWW
file = untuk suatu file pada sistem komputer lokal
ftp = untuk suatu file pada server ftp, dll
Host adalah suatu alamat server. Contoh : www.yahoo.com , www.microsoft.com
Port memberitahu browser untuk membuka koneksi pada suatu port jaringan yang
berbeda dari port default untuk setiap protokol.
Path adalah suatu lokasi dari informasi yang dicari di dalam server, sedang nama
file adalah nama dari file yang diinginkan. Contoh : www.rekreasi.com/lokasi .html
C. Absolute Path dan Relative Path
Dalam HTML terdapat dua jenis path, yaitu path absolute dan path relative.
Path relative jika lokasi file tersebut relatif terhadap dokumen yang sedang aktif,
yaitu terletak di atas atau di bawah direktori dokumen tersebut. Jika suatu file
berada di bawah direktori yang sedang aktif, maka direktori file tersebut perlu
disebutkan. Misalnya file hal12.html berada di bawah direktori Bab1 maka untuk
membuat link ke file hal12.html adalah :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 44
Berikut adalah penggunaan Link dan Anchor untuk memanggil
dokumen web lain
Lihat tanda LinkBab 2
Untuk melihat yang detail Gambar
Hutan
Hasil tampilan dari web browser :
E. Atribut Name dan ID
Atribut href untuk menyatakan suatu file tujuan. Server mencari kedalam
direktori di mana dokumen saat ini berada untuk mencari file tersebut. File
dokumen tujuan HTML yang menggunakan elemen A bisa diikuti atribut name
atau id. Untuk membuat link yang membaca pembaca ke suatu bagian tertentu
dalam dokumen, cukup sertakan tanda # setelah nama bagian.
Contoh program dibawah ini untuk membuat tabel yang berisi link pada
elemen header H2, H3 dan lainnya dalam satu dokumen, dengan menggunakan
elemen A dan atribut name dan ID :
Element A ( atribut name dan id )
Daftar Isi
Pengenalan
Latar Belakang
Catatan
Jika anda klik salah satu link dokumen di atas, maka isi
dokumen yang berada di bawah (tidak tertampung oleh
jendela brow ser) akan ditampilkan. Hal ini akan sangat
membantu pembuatan dokumen yang sangat panjang.
Misalnya FAQ (Frequently Ask Question), anda bisa
klik pertanyaan yang ada, kemudian dokumen akan link
ke dokumen pertanyaan, yang sebenarnya berada pada satu
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 45
dokumen.
Dan untuk kembali ke daftar pertanyaan, klik toolbar Back
yang berada pada menu Standard, atau jika sudah dibuat
link ke daftar pertanyaan tinggal klik kembali saja.
Pengenalan
...section 1...
Latar Belakang
...section 2...
Catatan
...section 2.1...
Hasil tampilan dari web browser :
Jika anda klik salah satu daftar isi di atas misalnya Pengenalan atau Latar
belakang atau Catatan, maka dokumen akan link pada isi dari daftar
tersebut yang sebenarnya berada di bagian bawah dokumen. Hal ini
dikarenakan jendela browser tidak mampu menampung seluruh isi
dokumen.
F. Judul LINK
Atribut title bisa digunakan dalam elemen A dan LINK untuk menambah
informasi tentang link. Informasi ini akan ditampilkan berupa tooltip oleh browser.
Contoh :
Atribut title
Menampilkan title sebagai tool tip
............
............
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 46
Anda akan melihat lebih jauh ke dalamBab 2
Bab 2
Li hat juga gambar Gambar
Logo STMIK SINUS
Hasil tampilan dari web browser :
G. Elemen
Untuk membuat suatu link dalam HTML elemen dipergunakan elemen anchor
yang dinyatakan dengan tag berpasangan . Atribut yang boleh menyertai
elemen A adalah :
Name : Menyatakan titik anchor dalam suatu dokumen HTML.
Href : Menunjukan lokasi dokumen Web.
Hreflang : Menunjukan bahasa yang dipergunaka, hanya digunakan
bersama dengan href. Type : Atribut ini memberi catatan
tipe isi dari dokumen tujuan.
Rel : Menggambarkan hubungan dari dokumen asal dengan dokumen tujuan
yang ditunjuk dengan atribut href.
Rev : Menggambarkan hubungan antara dokumen tujuan yang ditunjuk oleh
atribut href dengan dokumen asal.
Charset : Untuk menspesifikasikan karakter encoding dokumen web.
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 47
H. Sintaks nama Anchor
Anchor mempunyai nila atribut name dan id. Nama anchor harus mengikuti
beberapa aturan sebagai berikut :
Unik, nama anchor harus unik dalam dokumen. Dalam satu dokumen tidak
boleh ada nama anchor yang sama.
String # , penggunaan string # untuk menuju ke bagian lain dalam dokumen.
I. Dokumen Yang Tidak Ditemukan Browser
Jika suatu dokumen yang link tidak ditemukan oleh browser, ada beberapa
keterangan :
Jika browser tidak menemukan lokasi yang di link, browser akan memberi
keterangan.
Jika browser tidak bisa mendefinisikan tipe dokumen yang di link,
browser akan terus mencobanya dan akan memberi peringatan.
J. Elemen
Elemen ini untuk mendefinisikan suatu hubungan (link). LINK boleh ditampilkan
dalam elemen dan ditampilkan berulang kali. LINK mempunyai tugas
untuk menyampaikan informasi hubungan antar dokumen /bagian, misalnya toolbar
dengan menu drop-down.
Berikut adalah contoh potongan program yang menggambarkan beberapa LINK
yang berada pada elemen . Dokumen yang aktif adalah Bab2.htm .
Atribut rel menunjukan hubungan antara dokumen yang aktif dengan dokumen
yang ituju. Nilai Index , Nex , Pr menjelaskan tujuan dokumen berikutnya.
-
http://www.w3.org/TR/html4/strict.dt d>
Bab 2
K. Link Tujuan Dan Kembali
Atribut rel dan rev digunakan untuk saling melengkapi. Atribut rel
digunakan untuk link ke dokumen tujuan sedangkan atribut rev digunakan untuk
http://www.w3.org/TR/html4/strict.dtd
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 48
link kembali ke dokumen sebelumnya.
Contoh
:
Dokumen A :
Mempunyai arti yang sama dengan
Dokumen B:
Kedua atribut boleh digunakan secara bersamaan. Atribut rev menunjukan link
kembali dari atribut rel. ini menunjukan bahwa halaman sebelumnya adalah
halaman superior. Atribut rel dan rev mempunyai beberapa nilai yang
mengindikasikan dokumen sebagai :
Parent : Dokumen utama
(parent) Index : Dokumen
indeks
Next : Halaman
selanjutnya
Contents : Isi dokumen
Alternate : Versi alternatif
Begin : Awal halaman
Nilai alternate menunjukan dokumen referensi dari alternatif versi halaman yang
aktif. Alternatif versi ini bisa untuk versi cetak atau alternatif bahasa (tambahan
atribut lang).
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 49
Elemen LINK digunakan untuk menyediakan keanekaragaman informasi dari
serch engine, termasuk :
Link untuk alternatif versi bahasa dokumen, ditulis dengan bahasa
selain bahasa inggris.
Link untuk alternatif versi dokumen, mendesain media yang
berbeda seperti versi yang cocok untuk pencetakan
Link untuk awal halaman dari sekelompok dokumen
Contoh program dibawah ini untuk menggambarkan informasi bahasa, tipe
media, tipe link yang dikombinasikan untuk memperbaiki penanganan dokumen
oleh search engine. Penggunaan atribut hreflang untuk menemukan versi bahasa
yang digunakan dalam dokumen, misalnya bahasa belanda, Portugis dan Arab.
Atribut charset digunakan sebagai encoding dalam bahasa Arab. Atribut lang untuk
menunjukan nilai atribut title untuk elemen LINk yang didesain dalam bahasa
Perancis.
Manual dalam Bahasa English
Contoh program berikutnya, menuruh search engine untuk menemukan
halaman depan dari sekelompok dokumen :
http://someplace.com/manual/dutch.htmlhttp://someplace.com/manual/portuguese.htmlhttp://someplace.com/manual/arabic.htmlhttp://someplace.com/manual/french.htmlhttp://someplace.com/manual/postcript.pshttp://someplace.com/manual/postcript.ps
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 50
Referensi Manual - halaman 5
N. Informasi Path Dengan Elemen Base
Dalam HTML, link dan referensi untuk external gambar, applet, proses from,
style sheet dan lainnya selalu dispesifikasikan dengan URL. Elemen BASE
mengijinkan programmer untuk menspesifikasikan dokumen dasar URL secara
nyata. Elemen BASE boleh digunakan tanpa tag penutup. Jadi boleh hanya tag
. Atribut yang boleh menyertai adalah href, untuk menunjukan absolute URL
dapat diubah menjadi relative URL. Elemen BASE muncul dibagian HEAD.
Informasi path ditunjukan oleh elemen BASE hanya untuk URL di elemen tersebut
muncul.
Contoh potongan program :
-
http://www.w3.org/TR/html4/strict.dt d>
Produk Kami
S
Burung?
http://www.maju_jaya.com/sangkar/burung.gif
O. Membuat Link Ke E-mail
Link ke email menggunakan mailto: untuk
menspesifikasikan alamat. Contoh potongan program :
Kirimi saya e- mail
URL mailto : menyebabkan browser menampilkan suatu kotak pesan dimana
pembaca dapat mengetikkan pesan-pesannya
http://someplace.com/manual/start.htmlhttp://someplace.com/manual/start.htmlhttp://www.w3.org/TR/html4/strict.dtdhttp://www.maju_jaya.com/products/intro.htmlhttp://www.maju_jaya.com/sangkar/burung.gifmailto:[email protected]
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 51
P. Link Ke FTP
Dengan Web, anda dapat melihat dan mengambil file dari suatu server FTP, tetapi anda tidak dapat menaruh file ke server tersebut. Untuk membuat link ke situs FTP gunakan ftp://namasitus/path. Lihat potongan program berikut ini :
Server FTP di Novell Inc
Direktori pub di FTP intel
File patches.zip
ftp://namasitus/pathftp://ftp.intel.com/pub%3Eftp://ftp.novell.com/pub/patches.zip%3E
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 52
BAB V TABLE
I. ELEMEN
Untuk membuat tabel dimulai dengan pasangan tag . Di
dalam tag ini dapat menentukan banyak kolom dan baris, perataan, warna dan
pengaturan lainnya. Tabel
terdiri dari beberapa bagian, yaitu :
Tag tabel : untuk menandai awal dan akhir tabel yang dinyatakan dengan
pasangan tag
,,,.
Tabel Row atau baris tabel : baris-baris pada suatu tabel yang
dinyatakan dengan pasangan tag
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 53
FRAME : untuk mengatur frame di sekitar tabel
II. ELEMEN
Caption adalah judul tabel yang terletak di bagian luar suatu tabel, biasanya
dibagian atas atau bagian bawah tabel. Pasangan tag yang digunakan untuk
membentuk suatu caption adalah
Pendefinisian caption ini adalah :
Contoh :
TABLE
WARNA
PELANGI
WARNA
PELANGI
WARNA
PELANGI
WARNA
PELANGI
WARNAWARNIPELANGI
MERAHORANGEKU NING
HIJAUBIRUUNGU
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 54
III. GROUP BARIS
Baris tabel bisa dibagi menjadi tabel head, tabel foot dan beberapa tabel
body dengan menggunakan elemen THEAD, TFOOD dan TBODY. Tabel head dan
tabel foot berisi informasi
tentang tabel kolom sedangkan tabel body baris dari tabel data. Setiap THEAD,
TFOOT, dan
TBODY berisi group baris dan masing-masing group paling sedikit berisi satu
baris yang didefinisikan dengan elemen .
TFOOT harus berada sebelum TBODY agar browser memberikan tempat
pijakan sebelum menerima baris data. Berikut adalah ringkasan tag yang diperlukan
dan yang boleh diabaikan :
Tag harus disertakan kecuali tabel hanya berisi satu tabel body
dan tidak mempunyai tabel head atau tabel foot. Tag penutup selalu
boleh diabaikan
Tag pembuka dan disertakan jika tabel head dan tabel
foot ada, dan tag penutup ....informasi footer.....
......baris pertama - block data satu......
......baris kedua - block data satu....
......baris pertama - block data kedua......
......baris kedua - blo ck data kedua....
......baris kedua - block data kedua....
Hasil dari tampilan browser :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 55
III. ELEMEN COL DAN COLGROUP
Elemen COL bisa digabungkan dngan atribut tabel kolom yang lain. Pendefinisian
atribut COL adalah :
Span adalah atribut yang mempunyai nilai integer > 0, yang digunakan untuk
menggabungkan kolom. Width digunakan untuk mengatur lebar kolom yang
digabung.
Elemen COLGROUP mengatur lebar dan perataan sekelompok kolom.
Untuk Contoh, jika sebuah tabel mempunyai 6 kolom dan diinginkan agar tiga
kolom pertama mempunyai lebar 50 pixel dan rata kiri, dua kolom kedua ingin
dengan lebar 100 pixel dan karakter rata pada titik desimal, sedang kolom
terakhir lebarnya berukuran sisa layar dengan rata kanan.
Untuk problem ini dibuat program sebagai berikut :
IV. ELEMEN BARIS
Untuk membuat baris dalam tabel digunakan pasangan tag
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 56
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 57
V. ELEMEN SEL DAN
Judul kolom atau judul baris dalam tabel dibuat dengan elemen
. Contoh :
TABLE
WARNA PELANGI
WARNAWARNIPELANGI
MERAHORANGEKUNING
HIJAUBIRUUNGU
Hasil dari tampilan browser :
VI. ELEMEN PERATAAN TABEL
Gunakan atribut ALIGN dan VALIGN untuk membuat rata teks dalam tabel.
ALIGN digunakan untuk perataan teks secara horisontal, formatnya :
Align = left|center|right|justify|char
VALIGN digunakan untuk perataan teks secara vertikal, formatnya :
Valign = top|middle|bottom|baseline
Contoh :
TABLE
WARNA PELANGI
WARNAWARNIPELANGI
XYZ
XYZ
XYZ
XYZ
XYZ
XYZ
XYZ
XYZ
XYZ
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 58
Hasil dari tampilan browser :
VII. ELEMEN CHAR
Nilai baru dalam atribut ALIGN adalah CHAR atau perataan karakter.
Formatnya :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 59
Frame =
void|above|below| hsides|lhs|rhs|vsides|box|border.
Atribut rules digunakan untuk mengatur interior tabel. Atribut rules didefinisikan
sebagai :
Rules = none|groups|rows|cols|all
Contoh :
TABLE
Tabel dengan Frame dan Rules
Hasil dari tampilan browser :
IX. MENGGABUNGKAN BARIS DAN KOLOM
Atribut yang digunakan untuk menggabungkan kolom adalah COLSPAN,
sedangkan atribut yang digunakan untuk menggabungkan baris adalah
ROWSPAN.
Contoh :
TABLE
WARNA PELANGI
WARNA WARNI PELANGI
XYZXYZXYZ
XYZXYZXYZ
XYZXYZ
XYZXYZ
Hasil dari tampilan browser :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 60
X. ATRIBUT NOWRAP
Jika atribut ini digunakan dan isi teks melebihi lebar suatu sel, maka
sel itu akan diperpanjang sehingga seluruh isi teks muncul dalam satu baris.
Contoh :
TABLE
ATRIBUT NOWRAP
Lebar atribut
width tidak berpengaruh
Atribut nowrap digunakan
Hasil dari tampilan browser :
XI. MEMBUAT SEL KOSONG
Sel akan ditampilkan dengan space kosong, HTML juga menyediakan
entity   yang akan menampilkan tabel data kosong.
Contoh :
TABLE
Contoh sel kosong
MERAH KUNING
HIJAUBIRU
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 61
PINKPUTIH
COKLAT< /td> NILA
UNGUABU ABU 
JINGGAMAGENTA 
Hasil dari tampilan browser :
XII. LAYOUT TABEL
Untuk mengatur penampilan tabel, ada beberapa yang harus diperhatikan,
yaitu :
Atribut Width yang digunakan untuk mengatur lebar tabel
Atribut Height untuk mengatur tinggi tabel
Atribut border untuk memberi border tabel
Atribut Cellpadding digunakan untuk menentukan jumlah spasi yang
terdapat diantara border sel dengan isi yang ada didalam sel.
Atribut Cellspacing digunakan untuk menentukan jumlah spasi yang
terdapat diantara dua buah sel dalam suatu tabel
Contoh :
Tabel
Pengaturan Layout Tabel
Width 100%
BorderCellpadding=10Cellspasing
Width 75%
BorderCellpadding=5Cellspasing
Layout Tabel !
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 62
Hasil dari tampilan browser :
XIII. MEMBERI WARNA PADA TABEL
Atribut BGCOLOR untuk memberi warna background pada sel sebelum
berisi data
Atribut BORDERCOLOR untuk mengubah warna border sel
Contoh :
TABLE
Memberi warna pada tabel
MERAHUNGUKUNING
HIJAUBIRUNILA
PINKPUTIHJINGGA
Memberi warna pada seluruh tabel
COKLATMERAHNILA
UNGUABU ABUBIRU
JINGGAMAGENTAHIJAU
Memberi warna pada satu baris
COKLAT
HIJAUNILA
UNGUABU ABUKUNING
JINGGAMAGENTAORANGE
Memberi warna pada sel
Hasil dari tampilan browser :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 63
XIV. MENGGUNAKAN IMAGE SEBAGAI HEADER TABEL
Hal-hal yang perlu diperhatikan :
Lebar tabel untuk tempat image menggunakan atribut WIDTH seperti
Pada tag atribut CELLSPACING diset 0 agar image tepat berada
segaris dengan tabel
Penggabungan kolom perlu dilakukan untuk menampung image.
Misalnya menggabungkan dua
kolom dalam tabel untuk tempat image
Tag harus digunakan untuk menyisipkan image BORDER=0
HEIGHT dan WIDTH harus diatur secara tepat.
Contoh :
IMAGE
E: \ Image \ STMIKsinus.jpg
Border=0 Height=30 width=500 >
E: \ Image \ STMIKsinus.jpg
STMIK SINUS merupakan sekol ah tinggi manajemen informatika
yang terletak
di jalan Samanhudi SOlo . Jenjang Diploma Tiga dan
Sarjana. Jurusan Manajemen Informatika , computer akuntansi,
sistem informasi dan Tehnik komputer.
Desain by:LPK
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 64
Hasil dari tampilan browser :
XV. MERUBAH WARNA, UKURAN DAN JENIS FONT PADA TABEL
Contoh :
TABLE
WARNA PELANGI
WARNA
WARNI
PELANGI
MERAH
ORANGEKUN ING
HIJAUBIRU
JINGGA
Hasil dari tampilan browser :
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 65
BAB VI
Form Mulailah dengan membuka Notepad, kemudian tulis baris-baris di bawah ini:
Membuat fo r m html
Simpan dengan nama form1.htm di folder khusus untuk itu. Buka browser anda (Netscape
atau Internet Explorer), dan buka file form1.htm tadi. Biarkan Notepad tetap terbuka
sehingga apa yang anda tuliskan di situ bisa langsung anda lihat hasilnya di browser. Klik
tombol Reload atau Refresh sesudah anda menyimpan perubahan yang anda lakukan di
Notepad.
Tuliskan form anda.
Membuat fo r m html
Selanjutnya browser harus mempunyai cara untuk mengirim data yang didapat kepada
kita. Ada dua hal yang dapat anda lakukan: 1) anda dapat mengirim data tersebut ke
suatu program/script untuk diproses, atau 2) anda dapat meminta browser untuk
mengirim data tersebut melalui email kepada anda. Cara pertama memerlukan
pemahaman tentang pemrograman web yang lebih lanjut. Cara kedua, biasa disebut
mailto form, memerlukan beberapa hal untuk ditambahkan dalam tag .
Membuat fo r m html
Baris ini sangat penting. Satu-satunya hal yang harus anda lakukan adalah menuliskan
alamat email anda sesudah mailto: Selebihnya harus anda tuliskan persis seperti di
atas. Tulisan FORM, METHOD, POST & ACTION tidak harus ditulis dalam huruf besar,
tetapi harus ada spasi di antara setiap atribut tadi... di antara FORM & METHOD, di
antara POST & ACTION, dan antara .xxx" & ENCTYPE.
mailto:mailto:[email protected]
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 66
Sayangnya, data yang akan anda terima masih dalam format komputer seperti ini...
NAMAFORM=Daftar+A nggota&NA MA=Bram+D. +Wardhan a&ALAMAT=J l.+Bali+ No.+13
&KOTA=Semarang&Pr opinsi=Ja wa+Tengah
TEXT
Untuk memudahkan, mulai sekarang saya hanya akan menuliskan apa yang ada di
antara tag . Saya tidak akan menuliskan tag head, body, title dan form itu sendiri. Sudah jelas bahwa anda harus tetap menuliskannya di dalam dokumen anda.
Bentuk masukan (TYPE of ) yang paling umum digunakan dalam form html adalah TEXT.
Setiap masukan memerlukan nama (NAME).
Kalau anda mengetikkan alamat anda (misalkan Jl. Bali No. 13), alamat tersebut akan
menjadi nilai bagi input dan dipasangkan dengan ALAMAT sehingga hasil akhirnya setelah
dijalankan pada Mailto Formatter adalah ALAMAT=Jl. Bali No. 13.
Jika mau, anda bisa langsung menuliskan NILAI (VALUE) yang anda inginkan.
Jl. Lombok No.
Maka ALAMAT secara otomatis akan langsung diberi nilai Jl. Lombok No. 31, kecuali anda mengubahnya.
Catatan - Pastikan pemakaian tanda petik seperti yang saya tuliskan di atas. Kita
dapat juga menentukan panjang kotak masukan.
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 67
Jl. Lombok
Jl. Lombok No.
Jl. Lombok No. 31
Seperti yang dapat anda lihat, nilai defaultnya adalah 20. Barangkali anda sudah tahu
bahwa nilai default adalah nilai yang dipakai browser jika anda tidak menentukan lain.
Kita lanjutkan, dan sekarang coba anda hapus VALUE="Jl. Lombok No. 31".
Jika kita inginkan, kita dapat menentukan berapa banyak karakter yang bisa
diketikkan. Teruskan dan cobalah mengetikkan lebih dari 10 karakter!
Saya pikir pembatasan ini akan bisa bermanfaat. Tetapi, kecuali anda pikir
seseorang akan menuliskan seluruh isi bab ini ke dalamnya, saya tidak akan terlalu menguatirkan hal ini.
Sangat mirip dengan TYPE=TEXT adalah TYPE=PASSWORD. Persis malah, kecuali bahwa yang ditampilkan adalah *** dan bukan apa yang diketikkan. Browser akan
mengirim data sebenarnya kepada anda, hanya data ini tidak akan tampil di layar.
Ingat bahwa setiap harus memiliki NAME.
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 68
Atribut SIZE, VALUE, dan MAXLENGTH juga dapat digunakan di sini. Anda tentu masih
ingat bahwa memberi perintah kepada browser untuk melakukan sesuatu, sedangkan ATTRIBUTE dituliskan di dalam dan menentukan caranya.
RADIO BUTTONS DAN CHECK BOXES
Selanjutnya adalah Radio Buttons dan Check Boxes. Radio Buttons memungkinkan
kita memilih satu dari beberapa pilihan. Check Boxes memungkinkan kita memilih satu atau lebih atau semua pilihan. Pertama-tama kita lihat Radio Buttons.
Tambahkan 2 lagi.
Hmmm... saya pikir kita perlu memberi baris baru untuk mereka masing-masing.
Perhatikan bahwa setiap masukan menggunakan nama yang sama. Alasannya akan
segera tampak berikut ini.
Setiap Radio Buttons harus diberi VALUE.
Sekarang beri nama masing-masing.
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 69
Edi Hasi buan Ricky Mar tant o Tomi Sudart o
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Anda dapat gunakan tag html yang lain di sini.
Pada prinsipnya Radio Buttons anda sudah selesai. Anda dapat memperjelas pilihan
ini dengan menambahkan suatu kalimat di atasnya dan, jika anda mau, memilih satu
di antaranya sebagai default (optional).
Siapakah TEMAN BAI K anda?< BR>
Edi Has ibuan Ric ky Martan t o
VALUE="Tom"> Tomi Sudarto< P>
Siapakah TEMAN BAIK anda?
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Kita tentu saja hanya dapat memilih satu di antaranya. Pilihan ini akan menghasilkan pasangan nama/nilai seperti TEMAN BAIK=Ed (atau siapa pun yang dipilih).
Untuk membuat Check Boxes kita lakukan hal yang sama dengan tadi. Mulailah
dengan ini...
Tambahkan 3 lagi, tapi kali ini beri masing-masing NAME yang berbeda. (Gunakan juga baris baru untuk setiap pilihan.)
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 70
Setiap Check Box kita beri VALUE yang sama.
Catatan - Untuk Check Boxes NAME yang dipakai harus berbeda, tetapi VALUE nya tetap. Sedangkan untuk Radio Buttons VALUE berbeda tetapi NAME nya tetap.
OK, masing-masing kita beri label/nama.
Edi Hasi buan Ricky Mar tant o Baramul i
Edi Hasibuan
Ricky Martanto
Tomi Sudarto
Baramuli
Dan terakhir, anda mungkin ingin menambahkan sesuatu di atasnya serta memilih beberapa di antaranya sebagai default. Kalau anda mau, tentu saja.
Siapakah di antara mereka yang merupakan sah abat anda ?
Edi Has ibuan Ricky Mar tanto Baramuli
Siapakah di antara mereka yang merupakan sahabat anda?
Edi Hasibuan Ricky
Martanto
Tomi Sudarto
Baramuli
Kita dapat memilih 1, 2, tidak ada atau semuanya. Pilihan tersebut akan kita
dapatkan dalam bentuk pasangan nama/nilai....
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 71
Ed=YA Tom=YA
(atau apapun yang dipilih... jika tidak ada yang yang dipilih, browser tidak akan memberi apapun)
Anda mungkin bertanya-tanya....Bagaimana jika saya ingin mengajukan 3 pertanyaan
berbeda untuk kelompok yang sama?? Bagaimana saya bisa melakukannya?
Ingat! Dalam sebuah form html tidak boleh ada NAME yang sama. Jadi, kita harus
menggunakan nama yang berbeda untuk setiap pertanyaan. Yang saya maksud dengan
tidak boleh, bukan berarti komputer anda bisa rusak.... paling-paling hal ini akan
membingungkan browser, atau program parser (Mailto Formatter adalah program parser),
atau cgi script yang memprosesnya. Paling tidak ini akan membingungkan anda dalam
mengartikan data dari form tersebut.
Berikut ini adalah perintah html untuk 3 pertanyaan tadi. Tag untuk membuat
ditampilkan dalam warna hijau. Ini hanya untuk memudahkan anda, warna tersebut tidak ada pengaruhnya terhadap jalannya form.
Siapakah di antara mereka yang merupakan sah abat anda ?
Ricky Mart anto Bar amuli
Siapakah di antara mereka yang akan anda pin j ami uang ?
Edi Hasibu an Tomi Sudar to Baramuli
Siapakah yang anda ijinkan berkencan dengan adik anda ?
Edi Hasib uan
Ricky Martanto
Tomi Sudarto
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 72
Baramuli< P>
Misalkan anda memilih seperti berikut....
...maka anda akan mendapatkan hasil pasangan nama/nilai berikut.
Teman?.. Ed=YES
Teman?.. Rick=YES
Teman?.. Tom=YES
Utang?.. . Tom=YES
Utang?.. . BM=YES
Kencan?. . .Ed=YES
Kencan?. . .Tom=YES
Kencan?. . .BM=YES
PULL DOWN LIST DAN SCROLLING LIST
Bentuk masukan selanjutnya adalah Pull Down List. Untuk masukan jenis ini anda
gunakan sebagai pengganti dan anda harus tambahkan tag penutup. Mari kita coba.
Jangan lupa beri nama.
Kemudian tambahkan beberapa option.
Edi
Ricky
Tomi Reza
Edi
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 73
Dan setiap kita beri VALUE.
Edi
Ricky
Tomi
Reza
Edi
Defaultnya adalah pilihan pertama dalam daftar.
Kita dapat mengubah default ini sehingga tidak harus yang tercantum paling atas dalam
daftar.
Edi
Ricky
Tomi
Reza
Tomi
Scrolling List dibuat dengan cara yang persis sama dengan Pull Down List . Pertama-tama kita tambahkan dulu beberapa nama.
Edi
R icky
Tomi
Reza
Arie
Putri
Maria
Edi
Satu-satunya hal yang harus kita lakukan untuk mengubahnya menjadi Scrolling List adalah menambahkan atribut SIZE pada tag .
Edi
Ricky
Tomi
Reza
Arie
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 74
Putri
Mar ia
Edi
Ricky Tomi Reza
Atribut SIZE menunjukkan berapa banyak pilihan yang ingin anda tampilkan. Gampang, kan?
Sekali lagi, defaultnya adalah pilihan pertama pada , dan seperti tadi kita dapat mengubahnya dengan memilih yang lain.
Edi
Ricky
Tomi
Reza
Arie
Putri
Maria
Edi
Ricky
Tomi Reza
TEXTAREA
Bentuk masukan lain yang sangat berguna adalah .
Anda menentukan besarnya kotak masukan dengan cara....
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 75
ROWS adalah tingginya, COLS adalah lebarnya.
Satu atribut yang cukup membantu dalam adalah WRAP. Mungkin ada
browser yang tidak mengenal perintah ini, tapi jika demikian, perintah ini akan diabaikan.
Cobalah menuliskan kalimat yang cukup panjang di dalam kotak masukan....
DDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDD DD
WRAP=VIRTUAL berarti kalimat yang lebih panjang dari lebar kotak masukan akan diteruskan ke baris di bawahnya, tetapi yang disimpan oleh browser tetap satu kalimat
panjang yang tidak terputus.
Lakukan hal yang sama dengan ini....
DDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDDDDDDD
DD
WRAP=PHYSICAL artinya kalimat panjang akan ditampilkan lebih dari satu baris,
dan akan disimpan dalam bentuk itu juga.
Sekarang anda coba yang ini untuk melihat bedanya....
DDDDDDDDDDDDDDDDDDDD
DDDDDDDDDDDDDDD
[email protected] paulusharsadi.com
Design Web 1 / STMIK Sinar Nusantara Page 76
Ini adalah defaultnya.
WRAP=OFF artinya kalimat panjang tidak akan ditampilkan berganti baris, tetapi akan disimpan dalam bentuk persis seperti yang anda ketikkan. (Cobalah dengan mengetikkan ENTER.)
HIDDEN INPUT
Bentuk lain dari masukan adalah HIDDEN input.
HIDDEN input adalah pasangan nama/nilai yang dikirimkan kepada anda tetapi tidak
akan pernah ditampilkan di halaman web. Hidden input inilah yang diperlukan oleh Mailto Formatter. Dengan cara ini Mailto Formatter mengenali form html yang akan
diprosesnya.
Misalkan anda melakukan jajak pendapat melalui internet. Anda sudah merancang form
html yang indah dan efektif untuk mendapatkan masukan tentang topik yang anda
tanyakan. Masalahnya adalah, anda ingin menempatkan form tersebut di beberapa web
site untuk menjaring seban