TRIK MEMBUAT TAMPILAN WEBSITE SEDERHANA DAN MENARIK MENGGUNAKAN CSS

0
821

Assalamualaikum.. hai teman-teman..

Pada kesempatan kali ini kita akan membahas bagaimana cara membuat tampilan website sederhana dengan menggunakan CSS, sebelum itu kita harus menyiapkan beberapa gambar sebagai pelengkap untuk menampilkan desain web tersebut. Dimana gambar tersebut disimpan didalam folder img yang menjadi satu dengan folder script yang akan dibuat nantinya.

Ok.. langsung saja berikut merupakan scriptnya :

  1. Pertama untuk bagian HEADER dari website ini, Nah.. untuk script yang ini disimpan dengan careers.html berikut merupakan scriptnya :

Kemudian kita akan membuat script CSS nya yang gunanya untuk memperindah suatu tampilan web agar terlihat lebih menarik. Dan script ini disimpan dengan careers_style.css

Berikut merupakan hasil dari script bagian HEADER :

2. Yang kedua saya akan menampilkan bagian LEFT CONTENT dari website ini, Nah..untuk script yang ini juga disimpan dengan careers.html berikut merupakan scriptnya :

Seperti tadi, kita membuat script CSS yang script-nya juga disimpan dengan careers_style.css

Berikut merupakan hasil dari script bagian LEFT CONTENT :

3. Yang ketiga saya akan menampilkan bagian FOOTER dari website ini, Untuk script yang ini juga disimpan dengan careers.html berikut merupakan scriptnya :

Seperti tadi juga, kita membuat script CSS yang script-nya juga disimpan dengan careers_style.css

Berikut merupakan hasil dari script bagian FOOTER :

4. Yang keempat saya akan menampilkan bagian CONTENT atau isi dari website ini, Untuk script yang ini juga disimpan dengan careers.html berikut merupakan scriptnya :

Jangan lupa untuk membuat script CSS yang script-nya juga disimpan dengan careers_style.css

Setelah menambahkan script terakhir tadi, hasil tampilannya menjadi seperti ini :

Ini adalah tampilan website sederhana menggunakan css, masih banyak lagi script-script yang lebih menarik untuk mempercantik tampilan halaman pada web, terimakasih atas kunjungannya 🙂

Selamat mencoba ya..

Assalamualaikum..

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.