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">
1. 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>
2. COLS
Atribut COLS digunakan untuk menentukan lebar dari TEXTAREA. Contoh berikut menampilkan 3 komponen textarea dengan lebar textarea bervariasi :
<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<p> Silahkan diisi pada teks area yang tersedia</p>
<TEXTAREA NAME="rendah" COLS=30 ROWS=5></TEXTAREA>
<TEXTAREA NAME="sedang" COLS=30 ROWS=10></TEXTAREA>
<TEXTAREA NAME="tinggi" COLS=30 ROWS=20></TEXTAREA>
</body>
</html>
3. READONLY
Atribut ini digunakan agar tulisan yang terdapat didalam TEXT AREA hanya dapat dibaca dan disalin tapi tidak dapat diubah.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<TEXTAREA NAME=”untukdibaca” COLS=40 ROWS=6 READONLY>
Tulisan ini tidak dapat diubah tapi bisa disalin.
</TEXTAREA>
</body>
</html>
4. DISABLED
Atribut ini digunakan agar tulisan yang terdapat didalam TEXTAREA tidak dapat disalin dan diubah.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<TEXTAREA NAME=”terlarang” COLS=40 ROWS=6 DISABLED>
Tulisan ini tidak dapat disalin maupun diubah.
</TEXTAREA>
</body>
</html>
2) Komponen input text password
Komponen input text password bertanggung jawab untuk memasukan data password. Dari atribut-atribut tersebut, yang utama dan terutama harus disesuaikan atau diberi nama sesuai dengan item datanya adalah atribut ‘name’, karena file yang dituju pada atribut action di tag form, yang biasanya adalah file server side scripting (PHP) akan mengambil input dari form berdasarkan atribut nama (‘name’) dari komponen input form tersebut.Disamping tipe text, terdapat pula tipe input teks yang lain, yakni ‘password’. Input tpe ‘password’ ini akan menghasilkan input dengan notasi ’●’. Biasanya input tipe ‘password’ digunakan dalam form untuk masukan kata kunci atau password dari pengguna di dalam form login.Format dari elemen input text password HTML-nya adalah sebagai berikut :
<input type=password name=name>
<input type=password name=name maxlength=length>
<input type=password name=name size=size>
<input type=password name=name value=value>
Berikut adalah penggalan listing program penulisan form input password, dimana form diberi nama=pwd dengan panjang maximal karakternya adalah 6.
<!doctype html>
<html>
<head>
<title>penulisan password </title>
</head>
<body>
<form >
Password: <input type="password" name="pwd" maxlength="6">
</form>
</body>
</html>
3) Komponen input text
Komponen input text merupakan komponen untuk memasukan data text ke server dalam bentuk textfield.Format tag HTML-nya adalah sebagai berikut :
<INPUT TYPE=TEXT NAME=name>
<INPUT TYPE=TEXT NAME=name MAXLENGTH=length>
<INPUT TYPE=TEXT NAME=name SIZE=size>
<INPUT TYPE=TEXT NAME=name VALUE=value>
Berikut contoh listing program yang menggunakan form input
Contoh bentuk tampilannya adalah sebagai berikut :
<!doctype html>
<html>
<head>
<title>input text</title>
</head>
<body>
<form>
Nama : <input type="text" name="nama"><br>
Sekolah : <input type="text" name="sekolah">
</form>
</body>
</html>
4) Form menggunakan input hidden
Format tag form input hidden HTML-nya adalah sebagai berikut :
<INPUT TYPE=HIDDEN NAME=name VALUE=value>
Pada format form input hidden ditandai dengan atribut form type =hidden pada tag <input>, yang artinya ada form inputan yang disembunyikan atau tidak tidak tampilkan. Untuk selengkapnya dapat dilihat pada program berikut
Bila listing program diatas dijalankan dibrowser akan menghasilkan tampilan sebagai berikut:
<!doctype html>
<html>
<head>
<title>hidden input file </title>
</head>
<body>
<form >
Nama : <input type=” name=”fnama”><br>
<input type=”hidden” name=”negara” value=”Indonesia”>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
5) Pembuatan form biodata dengan input text
Berikut ini adalah contoh dari sebuah halaman web yang berisi form yang sederhana:
<html>
<head>
<title> Form 1 </title>
</head>
<body>
<form name=”form1” method=”POST” action=”inputdata.php”>
Nama : <input type="text" name="nama"><br><br>
Kelas: <input type="text" name="kelas"
maxlength="2"><br><br>
No : <input type="text" name="nomor"
value="10"><br><br>
Hobby: <input type="text" name="hobby"
size="8"><br><br>
Password: <input type="password" name="password">
<br><br>
<input type="submit" name="submit"
value="Submit"> <input type="reset"
name="reset" value="Reset">
</form>
</body>
</html>
6) Pembuatan form dengan elemen fieldset
Berikut adalah contoh pembuatan form dengan menggunakan elemen fielsdet serta input form :
<!DOCTYPE html>
<html>
<head>
<title>Hooya</title>
</head>
<body>
<fieldset >
<legend>Proses Sign in</legend>
<td width="256" align="center" valign="top"><p
align="center"><font
color="#000000" size="+3">YAHOO!
<label for="textfield" ></label>
</font><font color="#000000" size="+3">
<label for="textfield" ></label>
</font><font size="+3">
<label for="textfield" ></label>
</font>
<label for="textfield" ></label>
</p>
<p align="center">
<input type="text" name="textfield" id="textfield" value="ID
Yahoo" />
</p>
<p align="center">
<label for="textfield2"></label>
<input type="text" name="textfield2" id="textfield2"
value="Password" />
</p>
<p align="center">
<input type="submit" name="button" id="button" value="Sign in"
/>
</p>
<p align="center" ><font color="#0000FF">Tidak bisa mengakses
account
</font></p>
<p align="center" ><font color="#0000FF">Bantuan Sign
in</font></p><p
align="center">------------Atau ------------ </p>
<p align="center">
<input type="submit" name="button2" id="button2" value="Buat
Account Baru"
/>
</p>
<p align="center">------------------------------</p>
<p align="center"> Masuk dengan Facebok atau Google</p>
<p> </p></td>
</fieldset>
</body>
</html>
Memahami Anatomi dan Cara Kerja Cascading Style Sheet
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.
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.
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.
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 { … }
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; }
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>
Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> ... </style>di atas tag <body>, lebih tepatnya didalam tag <head>
External Style Sheet
<input type="submit" value="Login" class="btn"
onClick=parent.location="Home_Iframe.htm" />
CSS didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya file atau halaman web yang ingin menerapkan style pada file CSS tersebut tinggal memanggil file CSS tersebut. Cara ini umumnya digunakan pada satu aplikasi berbasis web sehingga tampilan antar halaman akan terlihat konsisten.
Rangkuman
Pada kegiatan belajar memahami anatomi dan cara kerja cascading style sheet dapat disimpulkan menjadi beberapa poin penting seperti berikut :
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
menyajikan cascading style sheet untuk memformat tampilan teks dapat dibuat rangkuman materi sebagai berikut :
Agar lebih menarik, mudah dalam hal pengaturans serta editing, teks pada sebuah halaman web dapat diberikan sytle dalam kemasan CSS.
Pengaturan style tersebut meliputi banyak properti, diantaranya color, direction, letter-spacing,line-height, text-align,text-decoration, text-indent, text-shadow, text-transform, unicode-bidi, vertical-align,white-space, word-spacing
Format penulisan untuk pemberian warna pada text menggunakan CSS adalah sebagai berikut : selector {color:nilai warna}
Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai berikut selector { letter-spacing:nilai spasi;}
Format penulisan CSS untuk mengaturan dekorasi teks adalah sebagai berikut selector {text-decoration : nilai text-decoration }
Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai berikut selector { word-spacing:nilai spasi;}
Format penulisan untuk pengaturan jarak indentasi text adalah sebagai berikut selector { text-indent:nilai indent}
. Format penulisan CSS untuk pengaturan text indent adalah sebagai berikut selector { text-transform:nilai text transform}
format penulisan CSS dengan text-shadow adalah
Selector {text-shadow: koordinatX koordinatY nilaiWarnaTeksBayangan ;}
Format penulisan CSS untuk text alignment selector {text-align:nilai text-align;}
Menyajikan Cascading Style Sheet untuk Memformat Tampilan Multimedia
Cascading style sheet pada tampilan gambar
CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html baik itu tulisan, tabel dan gambar maupun objek lainya. Untuk mengatur gambar dapat dituliskan secara inline seperti contoh berikut :
<img src="nama-file-gambar" width="lebar" height="tinggi"
alt="text" title="text" border="1" />
Cascading style sheet Gambar untuk background
Seperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan menggunakan dua properti, yaitu background dan background-image. Nilai yang diisikan untuk properti ini ialah url dari gambar, relatif terhadap file CSS, sama seperti pada penambahan font.
div { background: url(“latar.png”);
background-image: url(“latar.png”);}
Cascading style sheet pada tampilan video
Untuk penerapan Cascading style shee pada elemen video dapat dituliskan secara inline seperti contih berikut ini :
<html>
<head>
<title>Test</title>
</head>
<body>
<video controls="controls" style="display:block; margin:
0 auto; width:400px ; heigth:400;" >
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
Rangkuman
Dari paparan materi pembahasan kegiatan belajar menyajikan cascading style sheet untuk memformat tampilan multimedia dapat dibuat rangkuman materi sebagai berikut :
CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari.
Untuk mengatur format multimedia dapat dituliskan secara inline, embed maupun eksternal CSS.
Pemberian style pada gambar dapat menggunakan selector <img>
Pemberian style pada video dapat menggunakan selector <video>
Penambahan gambar sebagai latar belakang menggunakan dua properti, yaitu property background image dengan menggunakan tag div seperti format berikut
div { background-image: url(“latar.png”); }
Menyajikan Cascading Style Sheet untuk Memformat Tampilan Form
Cascading style sheet pada elemen form
Agar form terlihat lebih indah menarik serta mudah dalam pengontrolan desain salah satunya memberikan style CSS. Dibawah ini adalah style yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis border, warna border, lebar form, batas form dari sisi layout, dan warna background dari form.
Cascading style sheet pada input text
Textarea mendefinisikan kontrol input berupa area teks pada form .Elemen form textarea dapat diatur stylenya dengan menggunakan selector textarea {…}
menyajikan cascading style sheet untuk memformat tampilan form
Agar form terlihat lebih indah menarik serta mudah dalam pengontrolan desain salah satunya memberikan style CSS.
Dengan menggunakan style CSS akan mengurangi bebanhalamandankonsumsi bandwidth.
style yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis border,warna border, lebar form, batas form dari sisi layout, dan warna background dari elemen-elemen form.
Elemen form dapat diatur stylenya dengan menggunakan selector form {…}.
Elemen form textarea dapat diatur stylenya dengan menggunakan selector textarea {…}.
Style yang diberikan pada input textfield diantaranya warna, background, border, jenis serta ukuran font dan masih banyak atribut lainya yang bisa digunakan untuk style textfield.
Memahami Anatomi dan Cara Kerja Cascading Style Sheet
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">
1. 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>
2. COLS
Atribut COLS digunakan untuk menentukan lebar dari TEXTAREA. Contoh berikut menampilkan 3 komponen textarea dengan lebar textarea bervariasi :
<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<p> Silahkan diisi pada teks area yang tersedia</p>
<TEXTAREA NAME="rendah" COLS=30 ROWS=5></TEXTAREA>
<TEXTAREA NAME="sedang" COLS=30 ROWS=10></TEXTAREA>
<TEXTAREA NAME="tinggi" COLS=30 ROWS=20></TEXTAREA>
</body>
</html>
3. READONLY
Atribut ini digunakan agar tulisan yang terdapat didalam TEXT AREA hanya dapat dibaca dan disalin tapi tidak dapat diubah.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<TEXTAREA NAME=”untukdibaca” COLS=40 ROWS=6 READONLY>
Tulisan ini tidak dapat diubah tapi bisa disalin.
</TEXTAREA>
</body>
</html>
4. DISABLED
Atribut ini digunakan agar tulisan yang terdapat didalam TEXTAREA tidak dapat disalin dan diubah.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<TEXTAREA NAME=”terlarang” COLS=40 ROWS=6 DISABLED>
Tulisan ini tidak dapat disalin maupun diubah.
</TEXTAREA>
</body>
</html>
2) Komponen input text password
Komponen input text password bertanggung jawab untuk memasukan data password. Dari atribut-atribut tersebut, yang utama dan terutama harus disesuaikan atau diberi nama sesuai dengan item datanya adalah atribut ‘name’, karena file yang dituju pada atribut action di tag form, yang biasanya adalah file server side scripting (PHP) akan mengambil input dari form berdasarkan atribut nama (‘name’) dari komponen input form tersebut.Disamping tipe text, terdapat pula tipe input teks yang lain, yakni ‘password’. Input tpe ‘password’ ini akan menghasilkan input dengan notasi ’●’. Biasanya input tipe ‘password’ digunakan dalam form untuk masukan kata kunci atau password dari pengguna di dalam form login.Format dari elemen input text password HTML-nya adalah sebagai berikut :
<input type=password name=name>
<input type=password name=name maxlength=length>
<input type=password name=name size=size>
<input type=password name=name value=value>
Berikut adalah penggalan listing program penulisan form input password, dimana form diberi nama=pwd dengan panjang maximal karakternya adalah 6.
<!doctype html>
<html>
<head>
<title>penulisan password </title>
</head>
<body>
<form >
Password: <input type="password" name="pwd" maxlength="6">
</form>
</body>
</html>
3) Komponen input text
Komponen input text merupakan komponen untuk memasukan data text ke server dalam bentuk textfield.Format tag HTML-nya adalah sebagai berikut :
<INPUT TYPE=TEXT NAME=name>
<INPUT TYPE=TEXT NAME=name MAXLENGTH=length>
<INPUT TYPE=TEXT NAME=name SIZE=size>
<INPUT TYPE=TEXT NAME=name VALUE=value>
Berikut contoh listing program yang menggunakan form input
Contoh bentuk tampilannya adalah sebagai berikut :
<!doctype html>
<html>
<head>
<title>input text</title>
</head>
<body>
<form>
Nama : <input type="text" name="nama"><br>
Sekolah : <input type="text" name="sekolah">
</form>
</body>
</html>
4) Form menggunakan input hidden
Format tag form input hidden HTML-nya adalah sebagai berikut :
<INPUT TYPE=HIDDEN NAME=name VALUE=value>
Pada format form input hidden ditandai dengan atribut form type =hidden pada tag <input>, yang artinya ada form inputan yang disembunyikan atau tidak tidak tampilkan. Untuk selengkapnya dapat dilihat pada program berikut
Bila listing program diatas dijalankan dibrowser akan menghasilkan tampilan sebagai berikut:
<!doctype html>
<html>
<head>
<title>hidden input file </title>
</head>
<body>
<form >
Nama : <input type=” name=”fnama”><br>
<input type=”hidden” name=”negara” value=”Indonesia”>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
5) Pembuatan form biodata dengan input text
Berikut ini adalah contoh dari sebuah halaman web yang berisi form yang sederhana:
<html>
<head>
<title> Form 1 </title>
</head>
<body>
<form name=”form1” method=”POST” action=”inputdata.php”>
Nama : <input type="text" name="nama"><br><br>
Kelas: <input type="text" name="kelas"
maxlength="2"><br><br>
No : <input type="text" name="nomor"
value="10"><br><br>
Hobby: <input type="text" name="hobby"
size="8"><br><br>
Password: <input type="password" name="password">
<br><br>
<input type="submit" name="submit"
value="Submit"> <input type="reset"
name="reset" value="Reset">
</form>
</body>
</html>
6) Pembuatan form dengan elemen fieldset
Berikut adalah contoh pembuatan form dengan menggunakan elemen fielsdet serta input form :
<!DOCTYPE html>
<html>
<head>
<title>Hooya</title>
</head>
<body>
<fieldset >
<legend>Proses Sign in</legend>
<td width="256" align="center" valign="top"><p
align="center"><font
color="#000000" size="+3">YAHOO!
<label for="textfield" ></label>
</font><font color="#000000" size="+3">
<label for="textfield" ></label>
</font><font size="+3">
<label for="textfield" ></label>
</font>
<label for="textfield" ></label>
</p>
<p align="center">
<input type="text" name="textfield" id="textfield" value="ID
Yahoo" />
</p>
<p align="center">
<label for="textfield2"></label>
<input type="text" name="textfield2" id="textfield2"
value="Password" />
</p>
<p align="center">
<input type="submit" name="button" id="button" value="Sign in"
/>
</p>
<p align="center" ><font color="#0000FF">Tidak bisa mengakses
account
</font></p>
<p align="center" ><font color="#0000FF">Bantuan Sign
in</font></p><p
align="center">------------Atau ------------ </p>
<p align="center">
<input type="submit" name="button2" id="button2" value="Buat
Account Baru"
/>
</p>
<p align="center">------------------------------</p>
<p align="center"> Masuk dengan Facebok atau Google</p>
<p> </p></td>
</fieldset>
</body>
</html>
Memahami Anatomi dan Cara Kerja Cascading Style Sheet
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.
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.
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.
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 { … }
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; }
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>
Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> ... </style>di atas tag <body>, lebih tepatnya didalam tag <head>
External Style Sheet
<input type="submit" value="Login" class="btn"
onClick=parent.location="Home_Iframe.htm" />
CSS didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya file atau halaman web yang ingin menerapkan style pada file CSS tersebut tinggal memanggil file CSS tersebut. Cara ini umumnya digunakan pada satu aplikasi berbasis web sehingga tampilan antar halaman akan terlihat konsisten.
Rangkuman
Pada kegiatan belajar memahami anatomi dan cara kerja cascading style sheet dapat disimpulkan menjadi beberapa poin penting seperti berikut :
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
menyajikan cascading style sheet untuk memformat tampilan teks dapat dibuat rangkuman materi sebagai berikut :
Agar lebih menarik, mudah dalam hal pengaturans serta editing, teks pada sebuah halaman web dapat diberikan sytle dalam kemasan CSS.
Pengaturan style tersebut meliputi banyak properti, diantaranya color, direction, letter-spacing,line-height, text-align,text-decoration, text-indent, text-shadow, text-transform, unicode-bidi, vertical-align,white-space, word-spacing
Format penulisan untuk pemberian warna pada text menggunakan CSS adalah sebagai berikut : selector {color:nilai warna}
Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai berikut selector { letter-spacing:nilai spasi;}
Format penulisan CSS untuk mengaturan dekorasi teks adalah sebagai berikut selector {text-decoration : nilai text-decoration }
Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai berikut selector { word-spacing:nilai spasi;}
Format penulisan untuk pengaturan jarak indentasi text adalah sebagai berikut selector { text-indent:nilai indent}
. Format penulisan CSS untuk pengaturan text indent adalah sebagai berikut selector { text-transform:nilai text transform}
format penulisan CSS dengan text-shadow adalah
Selector {text-shadow: koordinatX koordinatY nilaiWarnaTeksBayangan ;}
Format penulisan CSS untuk text alignment selector {text-align:nilai text-align;}
Menyajikan Cascading Style Sheet untuk Memformat Tampilan Multimedia
Cascading style sheet pada tampilan gambar
CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html baik itu tulisan, tabel dan gambar maupun objek lainya. Untuk mengatur gambar dapat dituliskan secara inline seperti contoh berikut :
<img src="nama-file-gambar" width="lebar" height="tinggi"
alt="text" title="text" border="1" />
Cascading style sheet Gambar untuk background
Seperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan menggunakan dua properti, yaitu background dan background-image. Nilai yang diisikan untuk properti ini ialah url dari gambar, relatif terhadap file CSS, sama seperti pada penambahan font.
div { background: url(“latar.png”);
background-image: url(“latar.png”);}
Cascading style sheet pada tampilan video
Untuk penerapan Cascading style shee pada elemen video dapat dituliskan secara inline seperti contih berikut ini :
<html>
<head>
<title>Test</title>
</head>
<body>
<video controls="controls" style="display:block; margin:
0 auto; width:400px ; heigth:400;" >
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</body>
Rangkuman
Dari paparan materi pembahasan kegiatan belajar menyajikan cascading style sheet untuk memformat tampilan multimedia dapat dibuat rangkuman materi sebagai berikut :
CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari.
Untuk mengatur format multimedia dapat dituliskan secara inline, embed maupun eksternal CSS.
Pemberian style pada gambar dapat menggunakan selector <img>
Pemberian style pada video dapat menggunakan selector <video>
Penambahan gambar sebagai latar belakang menggunakan dua properti, yaitu property background image dengan menggunakan tag div seperti format berikut
div { background-image: url(“latar.png”); }
Menyajikan Cascading Style Sheet untuk Memformat Tampilan Form
Cascading style sheet pada elemen form
Agar form terlihat lebih indah menarik serta mudah dalam pengontrolan desain salah satunya memberikan style CSS. Dibawah ini adalah style yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis border, warna border, lebar form, batas form dari sisi layout, dan warna background dari form.
Cascading style sheet pada input text
Textarea mendefinisikan kontrol input berupa area teks pada form .Elemen form textarea dapat diatur stylenya dengan menggunakan selector textarea {…}
menyajikan cascading style sheet untuk memformat tampilan form
Agar form terlihat lebih indah menarik serta mudah dalam pengontrolan desain salah satunya memberikan style CSS.
Dengan menggunakan style CSS akan mengurangi bebanhalamandankonsumsi bandwidth.
style yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis border,warna border, lebar form, batas form dari sisi layout, dan warna background dari elemen-elemen form.
Elemen form dapat diatur stylenya dengan menggunakan selector form {…}.
Elemen form textarea dapat diatur stylenya dengan menggunakan selector textarea {…}.
Style yang diberikan pada input textfield diantaranya warna, background, border, jenis serta ukuran font dan masih banyak atribut lainya yang bisa digunakan untuk style textfield.
Memahami Anatomi dan Cara Kerja Cascading Style Sheet
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.
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.
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.
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 { … }
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; }
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>
Embedded
Style Sheet
CSS
didefinisikan terlebih dahulu dalam tag <style> ... </style> di
atas tag <body>, lebih tepatnya didalam tag <head>
External
Style Sheet
<input
type="submit" value="Login" class="btn"
onClick=parent.location="Home_Iframe.htm"
/>
CSS
didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya file atau
halaman web yang ingin menerapkan style pada file CSS tersebut tinggal
memanggil file CSS tersebut. Cara ini umumnya digunakan pada satu aplikasi
berbasis web sehingga tampilan antar halaman akan terlihat konsisten.
Rangkuman
Pada
kegiatan belajar memahami anatomi dan cara kerja cascading style sheet dapat
disimpulkan menjadi beberapa poin penting seperti berikut :
§ 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
menyajikan
cascading style sheet untuk memformat tampilan teks dapat dibuat rangkuman
materi sebagai berikut :
§ Agar
lebih menarik, mudah dalam hal pengaturans serta editing, teks pada sebuah
halaman web dapat diberikan sytle dalam kemasan CSS.
§ Pengaturan
style tersebut meliputi banyak properti, diantaranya color, direction,
letter-spacing,line-height, text-align,text-decoration, text-indent,
text-shadow, text-transform, unicode-bidi, vertical-align,white-space,
word-spacing
§ Format
penulisan untuk pemberian warna pada text menggunakan CSS adalah sebagai
berikut : selector {color:nilai warna}
§ Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter
atau huruf adalah sebagai berikut selector { letter-spacing:nilai spasi;}
§ Format
penulisan CSS untuk mengaturan dekorasi teks adalah sebagai berikut selector
{text-decoration : nilai text-decoration }
§ Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter
atau huruf adalah sebagai berikut selector { word-spacing:nilai spasi;}
§ Format
penulisan untuk pengaturan jarak indentasi text adalah sebagai berikut selector
{ text-indent:nilai indent}
§ . Format
penulisan CSS untuk pengaturan text indent adalah sebagai berikut selector {
text-transform:nilai text transform}
§ format penulisan CSS dengan text-shadow adalah
Selector
{text-shadow: koordinatX koordinatY nilaiWarnaTeksBayangan ;}
§ Format penulisan CSS untuk text alignment selector
{text-align:nilai text-align;}
Menyajikan Cascading Style
Sheet untuk Memformat Tampilan Multimedia
Cascading
style sheet pada tampilan gambar
CSS
berperan penting dalam menyajikan informasi dengan visual yang lebih baik,
lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari
dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html baik
itu tulisan, tabel dan gambar maupun objek lainya. Untuk mengatur gambar dapat
dituliskan secara inline seperti contoh berikut :
<img
src="nama-file-gambar" width="lebar"
height="tinggi"
alt="text"
title="text" border="1" />
Cascading
style sheet Gambar untuk background
Seperti
penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan
menggunakan dua properti, yaitu background dan background-image. Nilai yang
diisikan untuk properti ini ialah url dari gambar, relatif terhadap file CSS,
sama seperti pada penambahan font.
div {
background: url(“latar.png”);
background-image:
url(“latar.png”);}
Cascading
style sheet pada tampilan video
Untuk
penerapan Cascading style shee pada elemen video dapat dituliskan secara inline
seperti contih berikut ini :
<html>
<head>
<title>Test</title>
</head>
<body>
<video
controls="controls" style="display:block; margin:
0 auto;
width:400px ; heigth:400;" >
<source
src="movie.mp4" type="video/mp4" />
Your browser
does not support the video tag.
</video>
</body>
Rangkuman
Dari paparan materi pembahasan
kegiatan belajar menyajikan cascading style sheet untuk memformat tampilan
multimedia dapat dibuat rangkuman materi sebagai berikut :
§ CSS
berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi
penulisan serta lebih disenangi oleh mesin pencari.
§ Untuk
mengatur format multimedia dapat dituliskan secara inline, embed maupun
eksternal CSS.
§ Pemberian
style pada gambar dapat menggunakan selector <img>
§ Pemberian
style pada video dapat menggunakan selector <video>
§ Penambahan gambar sebagai latar belakang menggunakan dua properti,
yaitu property background image dengan menggunakan tag div seperti format
berikut
div { background-image:
url(“latar.png”); }
0 komentar: