cascading style sheet (css) dan html form · pdf fileaturan style berikut akan menyesuaikan...
TRANSCRIPT
![Page 1: Cascading Style Sheet (CSS) dan HTML Form · PDF fileAturan style berikut akan menyesuaikan elemen yang ... Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis](https://reader030.vdocuments.net/reader030/viewer/2022021419/5a977a427f8b9a9c5b8d3828/html5/thumbnails/1.jpg)
Cascading Style Sheet (CSS) dan HTML Form
![Page 2: Cascading Style Sheet (CSS) dan HTML Form · PDF fileAturan style berikut akan menyesuaikan elemen yang ... Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis](https://reader030.vdocuments.net/reader030/viewer/2022021419/5a977a427f8b9a9c5b8d3828/html5/thumbnails/2.jpg)
Cascading Style Sheets (CSS) adalah suatuteknologi yang digunakan untuk memperindahhalaman website (situs), dengan CSS kita dapatdengan mudah mengubah keseluruhan warnadan tampilan yg ada di situs kita sekaligusmemformat ulang situs kita.
Menggunakan tag:<style> ...... </style>
![Page 3: Cascading Style Sheet (CSS) dan HTML Form · PDF fileAturan style berikut akan menyesuaikan elemen yang ... Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis](https://reader030.vdocuments.net/reader030/viewer/2022021419/5a977a427f8b9a9c5b8d3828/html5/thumbnails/3.jpg)
Sebuah style sheet terdiri dari beberapa aturan (rules).Masing-masing aturan terdiri dari satu atau lebih selektor(selector) dan sebuah blok deklarasi (declaration block).Sebuah blok deklarasi terdiri dari beberapa deklarasi yangdipisahkan oleh titik koma (;). Masing-masing deklarasiterdiri dari property, titik dua (:) dan nilai (value).
![Page 4: Cascading Style Sheet (CSS) dan HTML Form · PDF fileAturan style berikut akan menyesuaikan elemen yang ... Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis](https://reader030.vdocuments.net/reader030/viewer/2022021419/5a977a427f8b9a9c5b8d3828/html5/thumbnails/4.jpg)
Selektor dapat ditulis secara kelompok, dipisahkan dengan tanda koma. (GROUPING)contoh:
Semua elemen header akan ditampilkan dalam teksberwarna hijau
![Page 5: Cascading Style Sheet (CSS) dan HTML Form · PDF fileAturan style berikut akan menyesuaikan elemen yang ... Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis](https://reader030.vdocuments.net/reader030/viewer/2022021419/5a977a427f8b9a9c5b8d3828/html5/thumbnails/5.jpg)
Mendefinisikan style yang berbeda untuk type elemen HTML yang sama (Class Selector)contoh:Terdapat dua type paragraph dalam suatu dokumen: satuparagraf rata kanan, dan paragraf yang lain rata tengah.
![Page 6: Cascading Style Sheet (CSS) dan HTML Form · PDF fileAturan style berikut akan menyesuaikan elemen yang ... Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis](https://reader030.vdocuments.net/reader030/viewer/2022021419/5a977a427f8b9a9c5b8d3828/html5/thumbnails/6.jpg)
Pendefinisian style untuk elemen HTML dapat dilakukan dengan selector id. Selektor ID didefinisikan sebagai #.Contoh:Aturan style berikut akan menyesuaikan elemen yang mempunyai sebuah atribut id dengan nilai “hijau”.
<font id=“green”>Warna Hijau</font>
![Page 7: Cascading Style Sheet (CSS) dan HTML Form · PDF fileAturan style berikut akan menyesuaikan elemen yang ... Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis](https://reader030.vdocuments.net/reader030/viewer/2022021419/5a977a427f8b9a9c5b8d3828/html5/thumbnails/7.jpg)
Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis dalam tag HTML).
CSS eksternal menggunakan ekstensi *.css
Dianjurkan untuk menggunakan CSS eksternal.
![Page 8: Cascading Style Sheet (CSS) dan HTML Form · PDF fileAturan style berikut akan menyesuaikan elemen yang ... Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis](https://reader030.vdocuments.net/reader030/viewer/2022021419/5a977a427f8b9a9c5b8d3828/html5/thumbnails/8.jpg)
![Page 9: Cascading Style Sheet (CSS) dan HTML Form · PDF fileAturan style berikut akan menyesuaikan elemen yang ... Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis](https://reader030.vdocuments.net/reader030/viewer/2022021419/5a977a427f8b9a9c5b8d3828/html5/thumbnails/9.jpg)
![Page 10: Cascading Style Sheet (CSS) dan HTML Form · PDF fileAturan style berikut akan menyesuaikan elemen yang ... Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis](https://reader030.vdocuments.net/reader030/viewer/2022021419/5a977a427f8b9a9c5b8d3828/html5/thumbnails/10.jpg)
![Page 11: Cascading Style Sheet (CSS) dan HTML Form · PDF fileAturan style berikut akan menyesuaikan elemen yang ... Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis](https://reader030.vdocuments.net/reader030/viewer/2022021419/5a977a427f8b9a9c5b8d3828/html5/thumbnails/11.jpg)
Kegunaan:
Memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang disediakan
Memperoleh feed back dari user
Menggunakan tag: <form> … </form>
Form Element:
Method: menentukan bagaimana data dikirim ke server.
Action: menentukan lokasi dari script yang akan memproses data dari form.
![Page 12: Cascading Style Sheet (CSS) dan HTML Form · PDF fileAturan style berikut akan menyesuaikan elemen yang ... Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis](https://reader030.vdocuments.net/reader030/viewer/2022021419/5a977a427f8b9a9c5b8d3828/html5/thumbnails/12.jpg)
Text : digunakan user untuk menginputkan huruf, kalimat atau angka dalam form.
<form> First name: <input type="text" name="firstname“><br>Last name: <input type="text" name="lastname"></form>
![Page 13: Cascading Style Sheet (CSS) dan HTML Form · PDF fileAturan style berikut akan menyesuaikan elemen yang ... Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis](https://reader030.vdocuments.net/reader030/viewer/2022021419/5a977a427f8b9a9c5b8d3828/html5/thumbnails/13.jpg)
Radio Button: digunakan untuk memilih satu dari beberapa pilihan.
<form><input type="radio" name="sex" value="male"> Male<br> <input type="radio" name="sex" value="female">
Female</form>
![Page 14: Cascading Style Sheet (CSS) dan HTML Form · PDF fileAturan style berikut akan menyesuaikan elemen yang ... Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis](https://reader030.vdocuments.net/reader030/viewer/2022021419/5a977a427f8b9a9c5b8d3828/html5/thumbnails/14.jpg)
CheckBox: digunakan untuk memilih satu ataubeberapa pilihan dalam form.
<form>I have a bike: <input type="checkbox" name="vehicle" value="Bike"> <br> I have a car: <input type="checkbox" name="vehicle" value="Car"> <br> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"> </form>
![Page 15: Cascading Style Sheet (CSS) dan HTML Form · PDF fileAturan style berikut akan menyesuaikan elemen yang ... Dapat digunakan secara internal, eksternal maupun inline (langsung ditulis](https://reader030.vdocuments.net/reader030/viewer/2022021419/5a977a427f8b9a9c5b8d3828/html5/thumbnails/15.jpg)
<form name="input" action="html_form_submit.php" method="get">
Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>