1) Komponen text area multiline
Komponen text area merupakan area tempat untuk menyimpan text atau tulisan baru, atau bisa dikatakan sebuah komponen HTML yang digunakan untuk menampilkan text dalam bentuk dan format text.
Untuk menampung input teks yang panjang dan mungkin tersusun atas lebih dari 1 baris, maka digunakan komponen input ‘textarea’. TEXTAREA dapat digabungkan dengan tag FORM untuk menjadi inputan yang akan diolah oleh file pemroses sebagaimana seperti yang telah dijelaskan pada tag FORM tersebut.
Format umum penulisan text area multiline
<textarea atribute=”atribute">
Terdapat beberapa atribut dari text area, diantaranya row,col dan lain sebagainya. Pada HTML 5 menyediakan banyak 6 atribut baru textarea.
Atribut Value Keterangan
Autofocus
autofocus
Area tertentu pada text area, dimana
Pemrograman Web
Page | 7
baru dihtml 5
kursor y otomatis mengarah ke daerah tersebut ketika halaman web diload.
Cols
number
Menentukan lebar text area
Disabled
disabled
Text area dapat diubah
Form
form_id
Satu atau lebih form pada text area
baru dihtml 5
Menentukan panjang karakter pada text area
Maxlength
baru dihtml 5
Number
Menentukan panjang karakter pada text area
Name
text
Nama dari text area
Placeholder
baru dihtml 5
text
Memberikan gambaran singkat tentang nilai pada tex tarea
Readonly
readonly
Text area bersifat read-only
Required
baru dihtml 5
required
Menentukan text area tersebut harus diisi atau tidak.
Rows
number
Menentukan tinggi text area
Wrap
baru dihtml 5
hard
soft
Menentukan bagaimana cara teks dikemas dalam text area sebelum teks tersebut dikirimkan
NAME
Atribut ini digunakan untuk meemberikan nama dari TEXTAREA. Atribut ini akan sangat berguna jika tag TEXTAREA digabungkan dengan tag FORM.
NAME
Atribut ini digunakan untuk meemberikan nama dari TEXTAREA. Atribut ini akan sangat berguna jika tag TEXTAREA digabungkan dengan tag FORM.
Contoh penulisan : <!DOCTYPE html>
<html><head> <title>cek form </title>
</head> <body> <p> Silahkan diisi pada teks area yang tersedia</p> <p><textarea NAME=”papantulis” COLS=40 ROWS=6> </textarea></p> </body> </html>
Bila listing kode diatas dijalankan akan menghasilkan tampilan pada halaman web seperti berikut :
Gambar 1.1 penerapan textarea dengan atribut name
COLS
Atribut COLS digunakan untuk menentukan lebar dari TEXTAREA. Contoh berikut menampilkan 3 komponen textarea dengan lebar textarea bervariasi :
Pada kegiatan belajar menyajikan komponen entri teks dapat disimpulkan menjadi beberapa point penting seperti berikut :
Data bisa diinputan dalam bentuk textarea, input teks , pilihan radio button,
check box dan lain sebagainya
Komponen text area merupakan area tempat untuk menyimpan text atau tulisan baru
Atribut – atribut pada textarea diantaranya, autofocus, cols, disabled, form, maxlength, name, placeholder, readonly, required, rows, wrap
Komponen input text password bertanggung jawab untuk memasukan data password.
Komponen input text merupakan komponen untuk memasukan data text ke server dalam bentuk textfield
Pada format form input hidden ditandai dengan atribut form type = hidden
2.)Komponen input file
Komponen input file berfungsi untuk memasukan data file yang dibutuhkan kedalam sistem web yang dibuat. Format tag HTML-nya adalah sebagai berikut :
<input type=file name=name accept=mime type list>
Name= “name” merupakan pemberian nama pada komponen input sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut.
3)Komponen radio button
Pada form input radio button hanya ada satu pilihan yang terseleksi,tidak bisa digunakan untuk multiple answer. Format umum tag HTML dari Form Input Radio Button adalah sebagai berikut :
<input type=radio name=name value=value> <input type=radio name=name value=value checked>
Name= “name” merupakan pemberian nama pada komponen input sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Berikut adalah penggalan listing program penulisan form input radio button
<!doctype html> <html> <head> <title>radio button </title> </head> <body> Tingkat Pendidikan : <form> <input type="radio" name="pendidikan" value="SD">SD<br> <input type="radio" name="pendidikan" value="SMP">SMP<br> <input type="radio" name="pendidikan" value="SMA">SMA sederajat<br> <input type="radio" name="pendidikan" value="D3">D3<br> <input type="radio" name="pendidikan" value="S1">S1<br> <input type="radio" name="pendidikan" value="S2">S2<br> <input type="radio" name="pendidikan" value="S3">S3<br> </form> </body> </html>
Yang perlu diperhatikan pada penggunaan input radio adalah bahwa atribut nama (name) dari komponen dari input tersebut harus sama.
4) Komponen Input Image
Komponen input image bertujuan untuk memasukan file gambar yang dibutuhkan oleh sistem web, misalnya saja file gambar foto.jpg. Format tag HTML dengan atribut image adalah sebagai berikut :
<input type=image name=name src="url"> <input type=image name=name src="url" align="alignment">
Name= “name” merupakan pemberian nama pada komponen input sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Sedangkan type=image merupakan tipe file yang dapat dimasukan dalam sistem. Berikut adalah salah satu contoh form Input Image dengan atribut image
<!doctype html> <html>
<body> <form > Nama depan : <input type="text" name="fname"><br> Nama belakang: <input type="text" name="lname"><br> <input type="image" src="img_submit.gif" alt="Submit" width="50" height="50"> </form> </body> </html>
Bila listing program diatas di jalankan di browser (http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_image)
5) Komponen select
Komponen input dengan tipe ‘select’ adalah komponen input dengan banyak pilihan nilai dan hanya memungkinkan untuk memilih 1 alternatif opsi pilihan. Istilah lain dari bentuk komponen ini adalah combo box atau list box. Contoh penggunaan komponen ini adalah pemilihan data agama, jurusan, pekerjaan, dan sebagainya. Format umum Penulisan komponen selectName= “name” merupakan pemberian nama pada komponen input select sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut. Sedangkan value=”nilai” merupakan nilai dari setiap pilihan yang diberikan.
6) Komponen datalist
Komponen datalist merupakan elemen form baru pada HTML5. Datalist digunakan untuk membuat daftar list. Komponen datalist memberikan dukungan autocomplete dasar untuk pilihan pada field input. Komponen datalist merupakan pengabungan antara list dan field input dengan atribut autocomplete. Saat membuat pilihan pada datalist, bila terdapat huruf/item yang sama dengan data pada data list maka akan muncul item yang cocok (fungsi autocomplete bekerja).Bila listing kode diatas dijalankan maka akan menghasilkan tampilan seperti dibawah ini. Pada saat textfield diketikan huruf “C” maka akan muncul pilihan “chrome” dimana kata “chrome” menggandung unsur huruf “C” hal ini menandakan fungsi autocompletenya berjala
Rangkuman.
Pada kegiatan belajar menyajikan komponen entri pilihandapat disimpulkan menjadi beberapa point penting seperti berikut :
Data bisa diinputan dalam komponen entri pilihan, diantaranya input file, radio button, chexbox, select serta datalist.
Komponen input file berfungsi untuk memasukan data file yang dibutuhkan kedalam sistem web yang dibuat
Format tag HTML input file adalah sebagai berikut : <input type=file name=name accept=mime type list>
Pada form input radio button hanya ada satu pilihan yang terseleksi
Format tag HTML input radio button adalah sebagai berikut <input type=radio name=name value=value>
komponen input checkbox digunakan sebgai masukan untuk data atau nilai pilihan dengan alternatif jawaban lebih dari 1 opsi pilihan.
Format tag HTML input checkbox adalah sebagai berikut <input type=checkbox name=name value=value>
Komponen input image bertujuan untuk memasukan file gambar yang dibutuhkan oleh sistem web, misalnya saja file gambar foto.jpg.
Pemrograman Web
Page | 39
Format tag HTML dengan atribut image adalah sebagai berikut : <input type=image name=name src="url">
Komponen input dengan tipe ‘select’ adalah komponen input dengan banyak pilihan nilai dan hanya memungkinkan untuk memilih 1 alternatif opsi pilihan
Komponen datalist memberikan dukungan autocomplete dasar untuk pilihan pada field input
Name= “name” merupakan pemberian nama pada komponen input select sebagai nama dari komponen. Karena pada saat sistem web dijalankan maka data yang diolah di dalam pemrograman adalah berdasarkan nilai (value) dari nama komponen input tersebut.
1) Definisi dan fungsi cascading style sheet
Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.
CSS bukanlah sebuah bahasa pemrograman, melainkan sebuah aturan untuk mengendalikan beberapa komponen pada web sehingga akan lebih terstruktur, seragam dan mudah dalam pengaturan saat pendesain sebuah halaman web.
CSS merupakan sekitar pembuatan dan pengaturan style font, warna, jarak, bentuk, dan lain-lain yang tidak dapat dilakukan dengan elemen - elemen HTML. Dapat dikatakan bahwa CSS merupakan pengembangan dari HTML dalam hal format dokumen web. Adanya CSS memudahkan kita untuk mengatur dan memilih sebuah website dan tampilannya karena CSS memisahkan antara bagian presentasi dan isi dari web yang dibuat.
Selain itu dengan penggunaan dari CSS dalam pembuatan web akan memberikan beberapa manfaat seperti berikut ini :
Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
Mudah untuk mengubah tampilan, hanya dengan mengubah file
CSS saja.
Dapat berkolaborasi dengan JavaScript dan merupakan pasangan
setia HTML.
Dapat digunakan dalam hampir semua jenis web browser.
Pemrograman Web
Page | 45
CSS merupakan sebuah teknologi internet yang di rekomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS di standarisasikan, internet explorer dan Netscape merilis browser terbaru yang mendukung standar CSS. Terdapat tiga versi CSS, CSS1, CSS2, dan CSS3. Yaitu :
Versi CSS Fitur CSS
CSS 1
Fokus mengatur pemformatan dokumen HTML, seperti
- Font (Jenis ketebalan).
-Warna, teks, background dan
elemen lainnya.
- Text attributes, misalnya spasi
antar baris, kata dan huruf.
- Posisi teks, gambar, table dan elemen lainnya.
- Margin, border dan padiing.
CSS 2
- Mengatur format dokumen untuk kebutuhan di cetak
dengan printer
- Posisi konten
- Downloadable
- Font huruf
- Table layout
- Media tipe yang
CSS 3
-Sangat mendukung tampilan desain website
- Animasi warna bahkan sampai animasi 3D
- Menunjang kompabilitas website dengan smartphone
- CSS math
- CSS obyek model
- Mendukung fungsi multimedia pada website
- Beberapa efek teks, seperti teks berbayang, kolom
koran, dan "word-wrap"
-Jenis huruf eksternal, sehingga dapat menggunakan
huruf yang tidak termasuk "web-safe fonts".
-Beberapa efek pada kotak, seperti
Pemrograman Web
Page | 46
kotak yang ukurannya dapat
diubah-ubah, transformasi 2
dimensi dan 2 dimensi, sudut
tumpul dan shadow
CSS 3 merupakan versi CSS terbaru yang masih dikembangkan oleh W3C. Namun beberapa web browser sudah mendukung CSS 3. CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan, hanya ada beberapa penambahan. Ketika sebuah web yang semula menggunakan CSS 2 bermigrasi CSS 3, tidak perlu mengubah apapun.
Dengan adanya CSS mempermudah pengaturan dan pemeliharaan sebuah website dan tampilannya karena CSS memisahkan antara bagian pengatur gaya dan isi dari web.
2) Anatomi dari cascading style sheet
Bagian – bagian utama dari sebuah CSS itu terdiri dari tiga bagian yaitu: selector, property, value. Jika dalam HTML dikenal ada tag-tag yang menyusun sebuah dokumen HTML maka dalam CSS juga dikenal dengan sebutan selector. Bagian CSS Keterangan
Selector
- nama-nama yang diberikan
untuk style-style yang berbeda,
baik itu style internal maupun
eksternal
- bagian elemen HTML yang
akan ditunjuk untuk mengatur
style
- dapat berupa class dan ID
Property
- aturan dalam CSS untuk
mengubah selector yang dipilih
- property mempunyai nilai yang
disebut dengan value
Pemrograman Web
Page | 47
- properties di dalam tanda { }
value.
- Merupakan nilai dari property
CSS
CSS memiliki aturan tersendiri dalam penulisan sintaks. Penulisan sintaks tersebut terbagi ke dalam tiga bagian yaitu: selector, property, dan value. Format penulisan bagian-bagian dari CSS dapat dituliskan sebagai berikut :
Selector{ Property : value; }
Berikut ini sedikit contoh penggunaan selektor, property, dan value untuk mengatur style pada sebuah form
form{ margin-left:0; }
Dari contoh penggunaan selector, property, dan value di atas maka tiap bagian akan di jelaskan sebagai berikut :
- form : selector yang akan di atur stylenya
- margin-left : property yang digunakan untuk jarak fieldset dari
batas kiri layout
- 0 : nilai dari property margin-left
Dengan adanya CSS memungkinkan untuk menampilkan halaman yang sama dengan format yang berbeda.
3) Cara Kerja cascading style sheet
Cara kerja CSS dimulai saat deklarasi style yang diinginkan dengan menulis style (selektor, id dan class), maka secara otomatis style tersebut akan
bekerja pada dokumen HTML. Dengan mengatur selektor, id, dan class,
untuk kemudian id dan class tersebut kita sesuaikan dan terapkan pada
kode HTML . Dan secara otomatis pula CSS itu akan bekerja pada file
HTML.
Pendefinisian style bisa dilakukan pada tag <style>. Di dalam pasangan tag tersebut, pendefinisian style dilakukan dengan bentuk Selector { … } .
Pemrograman Web
Page | 48
Dalam hal ini, selector bisa berupa selector HTML, selector kelas, atau selector ID.
Selector HTML mendefinisikan style bagi suatu tag HTML. Contoh di depan menggunakan selector HTML beruma img. Bentuk umumnya :
Contoh : Nama-elemen { … }h:
Contoh : Img { Margin-topi: 10px; Float: left; }
Selektor class mendefinisikan kelas yang bisa berlaku untuk
sebarang tag HTML. Bentuknya:
Contoh : .nama-class { … }
Contoh : .kotak { Border: solid; }
Selector ID mendefinisikan style bagi elemen yang memiliki ID sesuai
yang tercantum dalam selector. Bentuknya: #id { … }
Contoh : #inggris { Font-weight:bold;Font-size:1.2em;}
Berikut contoh yang menggunakan selector class dan selector ID dapat dilihat di bawah ini.
<html> <head> <tittle>Contoh selektor kelas dan ID</tittle> <style type=”text/css”> .kotak { Border: solid; Padding: 5px; } #jawa { Background-color: #ccff66; /* latarbelakang */} #inggris { Font-weight: bold; Font-size: 1.2em; } </style> </head>
Pemrograman Web
Page | 49
<body> <div id=”Indonesia” class=”kotak”>Selamat pagi !</div> <div id=”jawa”>Sugeng enjing !</div> <div id=”inggris” class=”kotak”>Good morning !</div> </body> </html>
Bila listing kode diatas dijalankan akan menghasilkan tampilan seperti berikut :
Gambar 3.1 hasil penggunaan selektor class dan id
Berdasarkan letak tempat stylenya, penerapan CSS pada sebuah halaman web dapat dilakukan dengan beberapa alternatif di antaranya adalah :
A. Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain. Contoh penulisan CSS secara inline style sheet, CSS berikut mengatur style di elemen <p></p> atau paragraf.
<p align="center" style="color:#303; font-size:24px">SMK </p>
Saat penulisan CSS diatas, listing kode CSS langsung dipasang di tag HTML, namun hal tidak direkomendasikan karena akan menyulitkan pengaturan style jika terjadi perubahan tampilan website dikemudian hari.
Pemrograman Web
Page | 50
B. Embedded Style Sheet CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>, lebih tepatnya didalam tag <head>
</style> </head><html> <head> <style> input.btn {color: #fff; background: #ffa20f; border: 2px outset #BBD16D; font-family: "calibri", Times, serif; font-size: 14px; font-weight: bold; width : auto;} <body> <table> <tr> <td><form > <p><label for="nama">Username</label> <input type="text" id="nama" /> </p> <p> <label for="KTP">Password</label> <input type="text" id="KTP" /> </p> <p> <input type="submit" value="Login" class="btn" onClick=parent.location="Home_Iframe.htm" /> </p> </form></td> </tr> </table>
Pemrograman Web
Page | 51
</body> </html>
Bila listing kode diatas dijalankan akan menghasilkan tampilan sebagai berikut ini :
Gambar 3.2 penerapan embedded style sheet
Pada listing kode diatas, penerapan style diberikan pada komponen input button hal ini ditandai dengan pembuatan CSS dengan nama “input.btn” didalam tag <style></style>
<style> input.btn { …….}
Di bagian body terdapat penerapan CSS dengan cara memanggil nama class nya
Rangkuman.
Pada kegiatan belajar memahami anatomi dan cara kerja cascading style sheet dapat disimpulkan menjadi beberapa poin penting seperti berikut :
Pemrograman Web
Page | 54
CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.
Beberapa manfaat dari penggunaan CSS
- Kode HTML menjadi lebih sederhana dan lebih mudah diatur.
- Ukuran file menjadi lebih kecil sehingga load file lebih cepat.
- Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS
- Dapat digunakan dalam hampir semua jenis web browser.
CSS 3 merupakan versi CSS terbaru yang masih dikembangkan oleh W3C dan CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan
Anatomi CSS terbagi ke dalam tiga bagian yaitu: selector, property, dan value. Selector{ Property : value; }
Cara kerja CSS dimulai saat deklarasi style yang diinginkan dengan
menulis style (selektor, id dan class)
Format penulisan CSS dengan Selector HTML adalah Nama-elemen
Format penulisan CSS dengan Selector class adalah .nama-class { … }
Format penulisan CSS dengan Selector id adalah #id { … }
Penerapan CSS pada sebuah halaman web dapat dilakukan dengan
beberapa alternatif di antaranya adalah: inline style sheet, embedded
style sheet, external style sheet
Tidak ada komentar:
Posting Komentar