1 BAB 9 FORM DAN DIV Form merupakan interface atau penghubung antara aplikasi dengan penggunanya. Demikian pula pada aplikasi berbasis web, terutama p...
Form merupakan interface atau penghubung antara aplikasi dengan penggunanya. Demikian pula pada aplikasi berbasis web, terutama pada web dinamis. Oleh karena itu, form harus didesain dengan baik agar tidak terjadi kesalahpahaman ketika pengguna menggunakannya. Untuk membuat form yang menarik dapat digunakan Cascading Style Sheet (CSS).
Tujuan Instruksional Mahasiswa memahami penggunaan tag div dan form, serta elemen yang ada di dalam form.
9.1
Form
Form merupakan bagian dari aplikasi web yang digunakan oleh pengguna untuk memberikan informasi ataupun memberikan respon tertentu pengguna kepada website. Sebuah form sangat penting dalam sebuah aplikasi web, terutama pada aplikasi web dinamis. Mengetahui bagaimana membuat form pada HTML dengan benar merupakan merupakan hal penting untuk memastikan tidak terdapat kesalahpahaman pada pengguna ketika menggunakan form yang disediakan.
9.1.1 Praktek Pembuatan Form 1. Praktek bertujuan untuk membuat form dengan mockup berikut.
2. Buka Aplikasi Adobe Dreamweaver 3. Klik menu Klik File HTML
New
Category : Basic, Basic page :
bagian Create. Setelah itu akan tampil lembar kerja
document baru. 257
4. Klik menu Insert
Form
Form.
5. Buat tabel dengan spesifikasi berikut. Width Table
:
700 pixels
Column
:
3
Rows
:
13
6. Ketik teks pada setiap baris, mulai dari Nama sampai dengan Email. 7. Pada baris Nama, masukkan textfield. Pada panel insert, aktifkan tab forms dan klik tools Textfield. 8. Selanjutnya baris Alamat, masukkan elemen textarea. 9. Pada baris Tempat, Tgl. Lahir masukkan textfield, setelah itu untuk tanggal, bulan dan tahun masukkan List/Menu. Bila kotak dialog tampil, klik OK. 10. Tambahkan Textfield untuk Tempat. Kemudian pada baris Tgl. Lahir tanggal, bulan dan tahun tambahkan elemen List/Menu (
). Bila kotak dialog tampil, klik OK.
258
11. List masih dalam keadaan aktif. Pada properties inspector, klik tombol list values. Lanjutkan dengan pengisian data, seperti berikut.
12. Ketikan Tanggal di bawah Ite Label, kemudian klik tanda (
)
untuk menambah item label, lalu ketik angka 1, klik tanda (
),
ketik angka 2, dan seterusnya sampai dengan angka 31. 13. Lakukan langkah 11 dan 12 untuk membuat pilihan bulan dan tahun. 14. Pada baris Status, tambahkan elemen Radio Group (
) . Pada
kotak dialog Radio Grup ubahlah : Name = Status, pada kolom label
Radio = Belum Nikah, Radio = Nikah, value
radio=BN,
radio=N.
259
Sehingga berubah menjadi :
15. Untuk Hobby tambahkan Checkbox (
). Pada kotak dialog Input
Tag isikan label = Membaca. Buatlah checkbox berikutnya untuk pilihan hobby lainnya.
16. Pada baris Telepon dan Email masukkan textfield. 17. Buat Tombol simpan dengan menggunakan elemen Button. Ketika muncul kotak dialog Input Tag klik OK. Kemudian pada properties inspector ubah Action = Submit form, Value = Simpan, Button name = tbSimpan.
260
18. Lanjutkan dengan memasukkan button kembali pada tempat yang sama. Ubah Action = Reset form, Value = Batal, Button name = tbBatal. 19. Agar tampilan form terlihat bagus, maka lakukan pengaturan teks dan Background. 1. Jenis Font : Comic Sans MS, Chiller 2. Font Color : #FFFFFF 3. Font Size : 14 px 4. Background Color : #6666FF 20. Tekan tombol Ctrl + Shift + S, kemudian simpan nama Form Biodata. Jalankan dengan menekan tombol F12, sehingga dihasilkan halaman web berikut.
261
9.1.2 Tugas Praktek Buatlah halaman web Form Biodata Donatur dengan bentuk sebagai berikut.
262
9.2
Layer dan Div
Layer merupakan salah satu keunggulan Dreamweaver dibandingkan dengan editor HTML lainnya. Dengan layer, dapat dibuat suatu halaman web yang tampilannya lebih fleksibel. Layer digunakan untuk menampilkan objek dengan posisi yang dapat diatur-atur secara bebas, tanpa terbatas pada pandangan baris-demi-baris. Analoginya, layer diumpamakan sebagai plastik transparan yang dapat diletakkan dimana saja di atas kertas. Antara satu layer dengan layer lainnya dapat saling bertumpuk, selain itu layer dapat diisi dengan text ataupun image. Untuk beberapa browser yang tidak mendukung adanya layer, maka disediakan juga fasilitas untuk menkonversi dari layer menjadi tabel.
9.2.1 Praktek Penggunaan Layer 1. Jalankan Adobe Dreamweaver 2. Buka file Form Biodata Donatur yang sudah dibuat pada modul sebelumnya. 3. Pastikan anda memiliki file-file gambar yang akan ditambahkan pada halaman web tersebut. 4. Untuk membuat layer bisa memilih menu : Insert object
layout
Layer atau dengan cara termudah memanfaatkan
insert bar untuk layout :
5. Tambahkan layer pada pada Form Biodata Donatur seperti ditampilkan pada gambar berikut.
263
Layer
6. Untuk melihat daftar layer-layer yang telah dibuat, maka bisa dengan membuka layer panel, (jika layer panel belum terlihat, maka bisa dibuka dengan memilih menu Windows
| layer atau
dengan menekan F2).
7. Prevent overlaps jika dicentang maka akan mencegah layer saling bertumpuk. 8. Pada Properties Inspector perhatikan :
9. Name adalah nama layer, sedangkan z adalah valensi atau tingkatan layer, semakin besar angkanya maka posisinya akan berada di atas yang lain (jika kondisi layer bertumpuk), apabila
264
diinginkan angka ini bisa dirubah urutannya. Bg Image untuk menetapkan gamba ryang akan ditampilkan pada layer. 10. Untuk posisi L = Left, T= Top, untuk : ukuran W=width dan H=height.
9.2.2 Praktek Penggunaan Div 1. Jalankan dreamweaver, kemudian pilih HTML. 2. Setelah masuk ke dalam tempat coding, letakkan kursor berada pada sebelah kanan , klik Menu Insert
Layout Objects
Div tag. Sehingga tampil kotak dialog Insert Div Tag berikut.
Posisi Cursor
3. Klik tombol New CSS Rule, kemudian ketikan Content sebagai nama selector dan akhiri dengan menekan tombol OK.
265
4. Pada kotak dialog CSS Rule Definition for Content, pada Category : Background diubah jadi warna abu-abu; Positioning : Position=Static, Width=1300, Height=500, kemudian akhiri dengan menekan tombol OK.
266
5. Tekan OK kembali pada kotak berikut.
6. Selanjutnya membuat Div untuk SideBar. Pada bagian Coding tempatkan cursor di depan Div Content.
Posisi Cursor 7. Lakukan langkah ke-3 sampai dengan langkah ke-5 untuk membuat Div SideBar dengan pengaturan pada kotak dialog CSS Rule Definition for SideBar, pada Category : Background diubah jadi warna Kuning (#FF0); Box : Width=200, Height=500, dan Float:Left; kemudian akhiri dengan menekan tombol OK.
Hasil akhirnya :
267
8. Lakukan langkah ke-3 sampai dengan langkah ke-5 untuk membuat Div Header dengan pengaturan pada kotak dialog CSS Rule Definition for Header, pada Category : Background diubah jadi warna Biru (#06F); Positioning : Position=Static, Width=200, dan Height=1300, kemudian akhiri dengan menekan tombol OK. Hasil akhirnya :
9. Selanjutnya membuat Div untuk Container. Pada bagian Coding tempatkan cursor di depan . 10. Lakukan langkah ke-3 sampai dengan langkah ke-5 untuk membuat Div Container dengan pengaturan pada kotak dialog CSS Rule Definition for Container, pada Category : Background diubah jadi warna Hijau (#0C0); Positioning : Position=Static, Width=1300, dan Height=30, kemudian akhiri dengan menekan tombol OK. 268
Hasil akhirnya :
9.2.3 Tugas Praktek Silakan isi layout yang telah dibuat sesaui dengan tema masingmasing, baik content maupun desainnya.
269
9.3
Rangkuman
Form perlu dibuat sebagai interface antara pengguna dengan aplikasi. Form bisa dibuat dengan menggunakan objek form dan elemennya yang sesuai dengan data yang akan dimasukkan. Tabel dapat digunakan untuk mengatur tata letak penempatan elemen-elemen form. Layer digunakan untuk menempatkan objek dalam form secara lebih fleksibel. Div digunakan untuk membagi-bagi area form menjadi bagian-bagian yang dapat ditempati oleh objek form, sehingga tercipta pengaturan layout yang baik.
270
9.4
Daftar Pustaka
Heffernan, Brandon., Dreamweaver CS5 : Advanced, ACA Edition, Axzo Press, 2011. Adobe, Using ADOBE® DREAMWEAVER® CS5 & CS5.5, 2011. Adobe, ADOBE® DREAMWEAVER® : Help and tutorials, 2013 California State University, Creating Accessibles Websites Using Dreamweaver CS5.5 and CSULA Web Templates, 2014.
271
BAB 10 CSS (CASCADING STYLE SHEET)
Cascading Style Sheet (CSS) memungkinkan Anda membuat pengaturan secara spesifik bagaimana content seharusnya ditampilkan dalam sebuah halaman web. Pengaturan secara spesifik dapat dilakukan terhadap properties halaman web, teks, gambar, dan elemen lainnya dalam halaman web.
Tujuan Instruksional Mahasiswa memahami fungsi CSS untuk memformat berbagai macam objek yang diperlukan dalam website.
272
10.1 Cascading Style Sheet (CSS) Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat web, akan tetapi penggunaan style sheets merupakan kelebihan tersendiri. Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada. Style sheet mendeskripsikan bagaiman tampilan document HTML di layar. Anda juga bisa menyebutnya sebagai template dari documents HTML yang menggunakanya. Anda juga bisa membuat efek-efek sepesial di web anda dengan menggunakan style sheet. Sebagai contoh anda bisa membuat style sheet yang mendefinisikan style untuk
dengan style bold dan italic dan berwarna biru. Atau pada tag
yang akan ditampilkan dengan warna kuning dan menggunakan font verdana dan masih banyak lagi yang bisa anda lakukan dengan style sheet. Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet (CSS) technology yang support pada hampir semua web Browser, karena CSS telah di standard-kan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser.
10.2 Deklarasi dan Aturan Penulisan Pengaturan tampilan halaman web yang dilakukan melalui CSS (Cascading Style Sheets) sangat tergantung pada kemampuan web browser yang akan digunakan untuk mengaksesnya. Setiap web
273
browser memiliki kemampuan yang berbeda ketika menerjemahkan script CSS.
Keuntungan dengan menggunakan CSS adalah : 1. Mempersingkat waktu pembuatan web. Salah satu sifat CSS adalah reuseable, yaitu setelah CSS dibuat maka dapat kembali digunakan pada halaman web yang lainnya. Semakin banyak CSS yang dibuat, maka pembuatan web dapat dilakukan dalam waktu yang lebih singkat. 2. Meningkatkan
kecepatan
akses
halaman
web.
Dengan
pengaturan yang dibuat melalui CSS, maka tidak perlu dilakukan pengaturan pada seluruh halaman web, sehingga script/code yang dibuat jauh akan lebih sedikit. Dengan demikian web browser tidak perlu melakukan banyak perintah, akibatnya halaman web dapat diakses dengan cepat. 3. Memepercepat modifikasi source code. Perubahan source code yang bersifat global cukup menggantinya di satu tempat maka akan mempengaruhi semua dokumen HTML. 4. Superior dibanding HTML, yaitu CSS memiliki pilihan yang lebih luas dibandingkan dengan atribut HTML. 5. Standard Global, yaitu saat ini atribut-atribut dalam HTML telah diperkecil fungsinya dan penggunaan CSS sangat dianjurkan.
Sintaks CSS adalah element { property:value; property:value }
274
Penulisan CSS dapat dilakukan dengan tiga cara, yaitu : Terdapat 3 cara untuk memasukkan CSS, yaitu : 1. Inline Style Sheet, yaitu memasukkan CSS dalam attribut elemen HTML secara langsung. Cara ini dapat digunakan apabila dengan pertimbangan tertentu diperlukan penambahan style pada sebuah element html. Inline Style Sheet dilakukan dengan memasukkan
CSS-nya
ke
dalam
attribut
CSS,
dengan
menambahkan attribut 'style'. Contoh :
This is a Blue Heading
2. Internal Style Sheet. Cara ini sebaiknya digunakan apabila memiliki satu dokumen yang memiliki style yang unik yang artinya tidak terdapat pada dokumen lain. Internal Style Sheet dideklaras ikan pada bagian sebuah dokumen HTML dengan menggunakan tag <style>. Internal Style Sheet akan mempengaruhi semua elemen di bawahnya sesuai dengan isi dari deklarasi style-nya. <style> body {background-color:lightgrey} h1 {color:blue} p {color:green}
This is a heading
This is a paragraph.
275
3. External Style Sheet, yaitu digunakan untuk banyak dokumen atau dokumen dinamis yang memiliki style yang sama. Dengan demikian, External Style Sheet cukup dengan sekali mengubah maka dapat merubah seluruh halaman web yang memanggil CSS tersebut. Tag diletakkan di dalam bagian pada dokumen HTML.
This is a heading
This is a paragraph.
Komentar pada CSS dibuat dengan menggunakan tanda /* dan diakhiri dengan */
276
10.3 Selector Terdapat 3 buah Selector, yaitu ID Selector, class Selector dan Tag Selector. ID Selector, semua elemen yang memiliki ID yang sama dengan nama style id yang dideklarasikan, maka akan memiliki style yang sama sesuai dengan id tersebut.
Contoh : #var1 { text-align:center; color:red; }
class Selector, digunakan untuk mengspesifikasikan suatu style untuk sebuah grup pada elemen. .center {text-align:center;}
Tag HTML Selector, memberikan style langsung pada sebuah tag HTML, caranya cukup dengan menuliskan tag dan CSS-nya saja p { text-align:center; color:black; font-family:arial; }
Konstekstual, adalah penerapan style yang hanya diterapkan jika suatu kondisi tertentu terpenuhi, contoh h1 i {color: navy}
hanya berlaku untuk elemen yang dilingkupi tag
dan , jadi akan terpenuhi jika terdapat 2 kondisi yaitu ada tag
dan .
277
10.4 CSS Styling CSS yang digunakan untuk mengatur syle tampilan web diantaranya meliputi :
10.4.1 Styling Background CSS background digunakan untuk mengubah background dari elemen HTML.
Properties dari CSS
background-image,
Background : background-color,
background-repeat,
background-attachment,
background-position.
Background-Color background-color merincikan warna background dari sebuah elemen HTML. Sintaks :
h2 {background-color:red;}
Dalam CSS, sebuah warna/color dirincikan dalam bentuk : 1. Nilai HEX, seperti : "#33FF00". 2. Nilai RGB, seperti : "rgb(0,0.255)". 3. Nama warna, seperti : "blue".
278
Contoh : <style> h1 { background-color:#6495ed; } p { background-color:#e0ffff; } div { background-color:#b0c4de; }
CSS background-color example!
This is a text inside a div element.
This paragraph has its own background color.
We are still in the div element.
Background-Image background-image merincikan gambar sebagai background sebuah elemen HTML. Secara default gambar/image akan diulang-ulang menutupi seluruh bagian elemen. body{background-image:url("pattern.gif");}
279
Contoh : <style> body {background-image:url('paper.gif');}
Hello World!
background-image dapat diulang secara vertikal atau horizontal, dan tidak boleh diulang <style> body {background-image:url('paper.gif');}
Hello World!
10.4.2 Styling Text Styling Text adalah kegiatan untuk menambahkan suatu style pada elemen-elemen yang memiliki konten teks. Styling Text terdiri atas beberapa macam manipulasi style seperti Text Color, Text Alignment, Text Decoration, dan Text Color. Dalam CSS, sebuah warna/color dirincikan dalam bentuk : 1. Nilai HEX, seperti : "#33FF00".
280
2. Nilai RGB, seperti : "rgb(0,0.255)". 3. Nama warna, seperti : "blue"
Contoh : <style> body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);}
This is heading 1
This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.
This is a paragraph with class="ex". This text is blue.
Text Alignment Text alignment digunakan untuk mensejajarkan barisan teks. Teks di html bisa disejajarkan ke sebelah kanan, tengah maupun kiri. Ketika text-align di set sebagai "justify" maka setiap baris tulisan memiliki lebar yang sama dan margin kanan dan kiri sama-sama lurus (seperti tulisan-tulisan di dalam koran dan majalah). Contohnya :
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
Note: Resize the browser window to see how the value "justify" works.
Text Decoration Text decoration umumnya digunakan untuk menghilangkan garis bawah pada link-link di dokumen HTML. Contohnya :
10.4.3 Styling Font Styling font adalah kegiatan untuk menambahkan style pada konten font disebuah teks.
Font Family Anda bisa mengubah jenis-jenis font yang ingin anda pakai ketika anda membuat website. Font family sebaiknya mengandung banyak jenis font, hal ini berguna bila browser tidak mendukung font yang pertama maka akan berpindah ke font yang berikutnya secara otomatis. Contohnya :
283
<style> p.serif{font-family:"Times New Roman",Times,serif;} p.sansserif{font-family:Arial,Helvetica,sans-serif;}
CSS font-family
This is a paragraph, shown in the Times New Roman font.
This is a paragraph, shown in the Arial font.
Font Style Properti ini memiliki 3 nilai : 1. Normal 2. Italic 3. Oblique
Pading dengan jarak 2cm dari kiri,atas,kanan,dan bawah
Tanpa jarak
289
10.5 Rangkuman Cascading Style Sheet (CSS) dibuat dengan tujuan untuk melakukan pengaturan tampilan halaman web secara efektif dan efisien dan dapat meningkatkan kulitas halaman web, baik dalam tampilan maupun dalam pengaksesannya. Pengaturan yang dapat dilakukan meliputi : mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.
290
10.6 Daftar Pustaka Duckett, Jon., HTML & CSS : Design and Build Websites, John Wiley & Sons, Inc., 2011. Henick, Ben., HTML & CSS: The Good Parts, O’Reilly Media, Inc., 2010. Lemay, Laura., Sams Teach Yourself Web Publishing with HTML and XHTML in 21 Days Fourth Edition, Sams Publishing, 2003. Tutorials Point (I) Pvt. Ltd., Cascading Style Sheet (CSS), 2015.
