Evaluasi Minggu ke-2

Assalamu'alaikum wr.wb.

A. Latar Belakang

    Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

    Penambahan CSS dalam web dapat memberikan tampilan yang lebih indah untuk dilihat dan menarik perhatian dari pengguna.

B. Alat dan Bahan

• SublimeText
• OS linux mint
• W3Schools

C. Tujuan

      Bertujuan untuk mempercantik tampilan dari web yang dibuat pada kesempatan yang lalu.

D. Tahap Pelaksanaaan

• Dibawah ini adalah tampilan awal (Home) dari web yag hanya menggunakan HTML.

• Buka aplikasi sublime text yang ada di menu.
• Pertama, merubah tampilan awal atau home. Masukkan coding seperti dibawah ini untuk merubah tampilan home.

CSS selalu terletak di bawah head

• Dan hasil setelah melakukan coding diatas seperti dibawah ini.

Hasil dari penerapan coding diatas. Tampilan dari web lebih menarik dan interaktif.

• Dibawah ini merupakan tampilan dari Profil yang menggunakan HTML.

• Kedua, merubah tampilan yang ada pada Profil. Masukkan coding seperti dibawah ini pada SublimeText.

Peletakan dari coding css selalu dibawah head.

• Hasil dari coding diatas seperti dibawah ini.

Hasil dari coding diatas.

• Dibawah ini merupakan tampilan dari Jurusan yang hanya menggunakan HTML.

Tampilan dengan HTML saja

• Ketiga, merubah tampilan dari Jurusan. Buka SublimeText dan masukka coding dibawah ini.

Peletakkan dari CSS selalu dibawah head.

• Dari pengcodingan yang dilakukan diatas maka akan menghasilkan seperti dibawah ini.

Hasil dari pengcodingan dengan css.

• Dibawah ini merupakan tampilan Denah dengan HTML.

Tampilan dengan HTML

• Keempat, merubah tampilan yang ada pada Denah. Buka SublimeText dan masukkan coding seperti dibawah ini.

Coding CSS harus berada dibawah head.

• Dari coding diatas akan menghasilkan seperti dibawah ini.

Hasil dengan menggunakan CSS

• Dibawah ini merupakan tampilan Prestasi dengan HTML.

Tampilan dengan HTML

• Kelima, merubah tampilan yang ada pada Prestasi. Buka SublimeText dan masukkan coding seperti dibawah ini.

Penulisan dari CSS harus dibawah head.

•  Hasil dari pengcodingan diatas seperti dibawah ini.

Hasil dari pengcodingan diatas

• Dibawah ini merupakan tampilan Formulir / Daftar dengan HTML.

Tampilan dengan HTML

• Keenam, merubah tampilan yang ada pada Daftar yang berisi Formulir pendaftaran. Buka SublimeText dan masukkan coding seperti dibawah ini.

• Hasil dari pengcodingan diatas seperti dibawah ini.

Hasil dengan CSS

E. Kesimpulan

       Dari pemaparan diatas dapat disimpulkan bahwa tampilan web statis yang menggunakan CSS dengan yang tidak menggunakan CSS itu berbeda. Perbedaannya yaitu tampilan yang menggunakan CSS lebih menarik dan lebih cantik. Sedangkan yang menggunakan HTML biasa saja tampilannya lebih sederhana.

F. Referensi

• https://id.wikipedia.org/wiki/Cascading_Style_Sheets
• http://www.w3schools.com/css/default.asp

Sekian dan Terimakasih.

SMK Bisa!!

Wasalamu'alaikum wr.wb.