Menganalisis CSS Dari Pembuatan Website Sistem Informasi Sekolah

Assalamualaikum Wr. Wb.
Kali ini saya akan berbagi ilmu dengan menganalisis property CSS dengan contoh Web Sistem Informasi Sekolah.

A. Pengertian

B. Latar Belakang
Karena CSS sangat banyak Propertynya dan untuk bahan evaluasi maka kita akan analisis website.

C. Maksud dan tujuan
Agar kita bisa memahami CSS dengan Mudah .

D. Alat dan Bahan

1. Laptop
2. website sistem informasi sekolah

E. Tahap Pelaksanaan
Kita akan mengupas elemen per elemen dari sebuah web sederhana.

Diatas merupakan contoh dari sebuah web sederhana yang akan kita analisa.
Dari tampilan diatas dapat kita analisa elemen satu persatu.
Pertama kita menganalisa bagian navbarnya. Jangan lupa kita menggunakan css external agar mempermudah.

Dalam membuat navbar, perhatikan kita menggunakkan unordered list atau <ul> perhatikan script berikut :

<ul>
  <li><a href="lay1.html">Home</a></li>
  <li><a href="form.html">Kartu Pelajar</a></li>
  <li><a href="formperpus.html">Kartu Perpustakaan</a></li>
  <li><a href="#about">About</a></li>
</ul>

 Script di atas digunakkan untuk membuat listnya. Tag <a> digunakkan untuk membuat link, agar kita bisa memuat halaman lain. Sedangkan <li> untuk menunjukan listnya.
Seletah itu, kita membuat stylenya menggunakan property css.

ul {
    width: 1000px;
    margin-left: 0;
    list-style-type: none;
    top: 0;
    position: fixed;
}

li {
    float: left;
    margin: 5px;
    background-color: #2f4f4f;
    border-radius: 15px;

}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

li a:hover:not(.active) {
    background-color: #1E90FF;
    border-radius: 15px;
}

Mari kita jelaskan propertynya.
ul
- width: 1000px; : Digunakan untuk menentukan lebar dari unordered listnya.
- margin-left: 0; : Berfungsi agar navbar memiliki margin 0 di kiri.
- list-style-type: none; : listnya tidak memiliki style
- top: 0; : Margin atas adalah 0
- position: fixed; : posisi dari navbar tidak berubah.

li
    - float: left; : <li> mengambang kekiri
    - margin: 5px; : margin antar <li> adalah 5px
    - background-color: #2f4f4f; : mengatur warna background dari list
    - border-radius: 15px; : mengatur kelengkungan elemen


li a : Mengatur tag <a>
    display: block; : tag <a> berdisplay block
    color: white; : warna untu <a> atau hurufnya adalah putih
    text-align: center; : text rata ketengah
    padding: 14px 16px; : mengatur jarak dalam elemen
    text-decoration: none; : untuk menghilangkan style default dari <a>


li a:hover:not(.active) : untuk membuat perubahan pada saat cursor diarahkan ke elemen
    - background-color: #1E90FF; : warna yaang akan ditampilkan saat kursor di pindah ke list
    - border-radius: 15px; : menyamakan kelengkungan antara list murni dan hovernya

Kedua, Image di masukkan sebagai bagian dari logo atau tampilan home nya
<img src="smk.png" width="25%"></img>
src untuk menampilkan sumbernya. dan width untuk menampilkan lebar hanya 25 persen dari elemen parent
Lalu style  CSS nya :
 - margin-top: 70px;
 - margin-left: 37.5%;
 - margin-bottom: 20px;
 Hanya mengatur margin atau jarak luarnya

Ketiga, adalah sebuah div yang diatur untuk menampilkan informasi.

<div class="cities">
<h2>SMK Negeri 1 Bawang</h2>
<p>SMK Negeri 1 Bawang atau biasa disebut skanza merupakan Sekolah Menengah Kejuruan yang berada di Banjarnegara.Di SMK Negeri 1 Bawang memakai kurikulum 2013 atau KURTILAS....<a href="sejarah.html">&#9758</a></p>
</div>

div kita ini akan diatur dalam css. untuk melihat detail dari artikel, disediakan link. &#9758 ini merupakan karakter yang biasa digunakkan .
 div.cities {
    width: 69.5%;
    background-color: #bfbfbf;
    color: black;
    margin: 0 15% 20 15%;
    padding: 20px;
    border-radius: 20px;
}

mungkin css diatas sudah si jelaskan pada style sebelumnya jadi bisa dibaca kembali style atasnya.

Kesimpulan :
Kita bisa menganalisa properti dari tampilan depan web sederhana.





Sekian Dan Terima Kasih.