CSS (Cascading Style Sheets)
A.    Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.  Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.  Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.  Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.
Apa itu CSS ? 

CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.

CSS dibuat untuk memisahkan konten utamadengan tampilan dokumen yang meliputi layout, warna da font. Pemisahan ini dapat meningkatkann daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi darisebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain web.

CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print, by voice, dan lain-lain. Sementaraitu, pemilik konten web bisa menentukan link yang menghubungkan konten dengan file CSS.

Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukura dan formatting. Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web. 

Fungsi CSS

fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

Cara Kerja CSS

cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html.

Rangkuman

Dari paparan materi pembahasan kegiatan belajar menyajikan cascading style sheet untuk memformat tampilan tabel dapat dibuat rangkuman materi sebagai berikut :
Pada dasarnya elemen dari HTML adalah model box yang mempunyai properti margin,border,padding dan content hal ini dapat digunakan untuk mendesain tampilan dari tabel.

• CSS dapat digunakan untuk memformat border atau garis tepi dari sebuah tabel.
• penerapan style border pada tabel dengan style sebagai berikut {border:1px solid black;}
• Lebar dan tinggi dari sebuah tabel didefinisikan dalam property width dan height. Teks dalam tabel diatur dengan properti.text-align dan vertical- align .
• Nilai dari properti text-align untuk horizontal alignment adalah left, right, atau center.
• Nilai dari properti text-align untuk horizontal alignment adalah top, bottom, or middle
• Padding adalah jarak antara isi atau content, berupa teks ataupun gambar dengan batas dalam dari atau elemen HTML <td>.
• Pewarnaan pada tabel dapat digunakan untuk mengatur warna pada teks,background maupun border
• Style warna akan memberikan efek warna pada tag table,data (td) dan header tabel (th).

Pengertian Form

Form
 

Pengertian Form

Form digunakan untuk mengumpulkan data dari pengunjung suatu website. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, form advertiser, form sitemap, bahkan untuk mengirimkan data antar halaman web. Pada tutorial belajar HTML:cara membuat form di HTML ini kita akan membahas cara penggunakan tag form di dalam HTML.

Penggunaan form hanya menggunakan HTML saja tidak akan terlalu berguna. Form biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user, dan akan diproses dengan bahasa pemograman web seperti JavaScript atau PHP, dan disimpan di dalam tabel MySQL. Untuk pembahasan lebih lanjut, saya akan menjelaskannya pada tutorial tentang PHP dan java script.

Tag dasar yang akan bisa digunakan untuk membuat form pada HTML adalah tag form, input, textarea, select dan option.

Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan <form> dan diakhiri dengan </form>. Seperti yang sudah dipelajari mengenai penulisan kode pada HTML diawali dengan <Nama Function Tag> ......( Isi sebuah tag )..... </Nama Function Tag>
Pada bagian terakhir kita harus menutup kode dengan menambahkan slash ( / ).
Bagian Isi Tag dapat dimasukkan oleh beberapa atribut untuk dapat berfungsi dengan seharusnya.
            Dua buah atribut yang digunakan adalah action dan method. Dianalogikan action adalah sesuatu yang mengoperasikan fungsi dari pada form tersebut. Sedangkan method adalah bagian-bagian cara yang mengumpulkan setiap data yang diperlukan untuk diproses. Action berfungsi menjelaskan lokasi data yang didapat form akan dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman PHP yang akan memproses isi data form. Sedangkan fungsi dari Method, adalah untuk menjelaskan bagaimana data isian form akan dikirim. Nilai dari atribut method ini bisa berupa get atau post

.

            Perbedaannya, jika kita mengisi atribut method dengan get (dimana ini adalah nilai default seandainya kita tidak menuliskannya) maka isian form akan terlihat pada url browser. Method get ini biasanya digunakan untuk query pencarian. Method post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user. Data hasil form tidak akan terlihat pada browser.

Bagian script kode diatas yang berwarna biru dan ungu dapat ditambahkan attribut lainnya seperti style, class, dan lain-lain. Karena berhubungan dengan form login maka hanya menambahkan action dan method saja. Sisanya bisa menggunakan kode HTML dngan meletakkannya pada satu baris diatas form :

<div id='pandauan-belajar-html' class='membuat-form'> dan kita dapat menambahkan kode CSS berdasarkan id dan class tersebut. Jangan lupa penutupnya di bagian bawah form yaitu : </div> .

1. Text box<input type="text">

 Dignakan untuk memasukan input yang berupa teks.

               
Size                    = ukuran dari textbox dalam karakter

Maxsize              = maksimal jumlah karakter yang dapat di input

Nama                  = nama variable yang dikirim ke suatu aplikasi

Value                  = akan menampilkan isinya sebagai nilai default

2.       Password<input type="password">

Di gunakan untuk memasukan password

Size                     = ukuran textbox dalam karakter

Maxsize               = maksimal jumlah karakter yang dapat di input

Name                  = nama variable yang dikirim ke suatu aplikasi

Ada lagi jenis input lainnya yaitu :

<input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkboxmemiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputancheckbox berupa hobi, yang oleh user dapat dipilih beberapa hobi.
<input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.
<input type=”submit” /> akan menampilkan tombol untuk memproses form. Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.

3.       Hidden<input type"hidden">

Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.
Name                  = nama dari variable yang dikirim ke suatu aplikasi

Value                  = nilai dari variable

4.       Check Box<input type="checkbox">

Check box digunakan untuk dapat memilih lebih dari satu pilihan.

Name                    = nama dari variable yang dikirim ke suatu aplikasi

Value                    = nilai dari variable

Checked (checkbox yang sudah ditandai)

5.       Radio Button<input type="radio">

Radio button digunakan agar dapat memilih ahnya salah satu pilihan.
Name                    = nama veriabel yang dikirim ke suatu aplikasi

Value                    = nilai dari variable

Checked (radio button yang sudah di tandai)

6.       Push Button<input type="button">

Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi.

Name                    = nama dari variable yang dikirim ke suatu aplikasi

Value                    = label teks di atas tombol

7.       Submit<input type="submit">

Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilinya ke suatu aplikasi yang di tentukan dlam atribut ACTION dlam elemen FORM.

Name                    = nama dari variable yang dikirim ke suatu aplikasi

Value                    = label teks di atas tombol

8.       Image Submit Button<input type="image" src="url">

Digunakan untuk menggantikan tombol standar submit dengan image

.
Name                    = nama dari variable ayng dikirim ke suatu aplikasi

9.       Reset<input type="reset">

Digunakan untuk mereset semua masukan dalam form.

Value                    = label teks di button

10.   Text Area<textarea>…</textarea>

Elemen untuk memasukan teks secara leluasa seperti notepad.

Nama                    = nama dari veriabel yang dikirim ke suatu aplikasi

Rows                     = panjang baris dalam karakter

Cols                       = tiggi kotak

11.   Select<select>…</select>

Daftar isi dalam property select menggunakan tag <option>

Size                        = jumlah pilihan yang dapat terlihat

Name                    = nama dari veriabel yang dikirim ke suatu aplikasi

Contoh penggunaan tag select adalah sebagai berikut

:
<select>
    <option>Pilihan 1</option>

    <option>Pilihan 2</option>

    <option value="pilihan ketiga">Pilihan 3</option>

</select>

Ketika form dikirim untuk diproses, nilai dari tag option akan dikirimkan. Nilai ini adalah berupa text diantara tag option, kecuali jika kita memberikan tag value. Jika tag value berisi nilai, maka nilai value lah yang akan dikirim.

Sama seperti tag option type checkbox dan type radio, atribut checked dapat ditambahkan agar tag select berisi nilai awal, contoh penggunaanya sebagai berikut:

<select>
    <option>Pilihan 1</option>

    <option>Pilihan 2</option>

    <option value="pilihan ketiga" selected>Pilihan 3</option>

</select>