Cara Membuat Selector Dengan HTML, CSS

No comment 165 views

 

  1. Tujuan Praktikum
  • Dapat mengetahui apa saja selector pada CSS
  • Dapat mengetahui apa saja style sheet pada CSS
  • Dapat mengetahui script dan elemen untuk membuat website

 

  1. Manfaat Praktikum
  • Menambah wawasan mahasiswa dalam bidang pemrograman web
  • Mahasiswa mampu menguasai script yang dipakai pada suatu website
  • Mahasiswa mampu membuat website dengan menggunakan selector dan style sheet pada CSS

 

  1. Teori Singkat

CSS (Cascading Style Sheet) merupakan mekanisme yang memisahkan antara isi dan presentasi dokumen HTML. CSS akan menambahkan style pada halaman, meningkatkan dan memperbaiki penyajian isi halaman

CSS bertindak sebagai lapisan yang mempengaruhi presentasi dari elemen HTML yang diberikan. Warna, font, text size, background, susunan elemen pada halaman dan seluruh aspek presentasi isi, diatur oleh CSS

Karena kode CSS digunakan untuk mengubah / memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk ‘mengaitkan’ atau menghubungkan kode CSS dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS.

  1. Alat & Bahan
  2. Sublime Text 3
  3. Google Chrome
  4. Laptop / Komputer
  5. HTML & CSS code

 

  1. Source code program

 

Langkah Langkah :

  1. Isikan source kode ini di html

 

  • <!–– …. ––> tanda disamping hanya saya gunakan untuk memberikan comment saja, serta untuk pengingat disetiap peletakan script saya, biasanya tanda ini digunakan di file HTML
  • <div> adalah sebuah tag digunakan untuk mengemas deklarasi yang ada didalam tag tersebut, tag ini digunakan bersamaan dengan CSS
  • <div id=”….”> memakai #…… untuk memanggil di CSS
  • <div class=”…..”> memakai ….. untuk memanggil di CSS
  • disini saya menggunakan <h1> , <h2> , <h3> , <h4> , <h5> untuk memberikan ukuran yang berbeda disetiap fontnya
  • <link rel=”stylesheet” type=”text/css” href=”css/main.css”> script ini untuk memanggil file CSS, disini saya memanggil css yang berada dalam folder css

 

  1. Isikan source kode ini di css

 

 

  • *{ } tanda disamping saya gunakan untuk mengeset semua elemen-elemen pada HTML
  • /* …. */ tanda disamping hanya saya gunakan untuk memberikan comment saja, serta untuk pengingat disetiap peletakan script saya, biasanya tanda ini digunakan di file CSS
  • div{ } digunakan untuk mengeset semua elemen-elemen yang telah dibungkus dalam div
  • margin: 0px; untuk mengeset margin dengan nilai 0pixel
  • padding-top: 10px; mengeset spasi diatasnya sebanyak10pixel
  • padding-bottom: 10px; mengeset spasi dibawahnya sebanyak 10pixel
  • padding-left: 10px; mengeset spasi dikirinya sebanyak 10pixel
  • padding-right: 10px; mengeset spasi dikanannya sebanyak 10pixel

 

    1. Hasil Program

  1. Galeri web Sederhana
  • Langkah pertama:

Dengan screnshot an di bawah adalah kodingan html dan sedikit css:

 

 

  • Hasil Pemograman:

  1. Kesimpulan

Setelah mengerjakan tugas praktikum pemrograman web yang ketiga ini saya menjadi lebih mengerti akan HTML & CSS. Saya juga menjadi lebih mengerti tentang style sheet serta selector-selector yang ada pada CSS. Perlu waktu yang cukup lama untuk menghasilkan website yang menarik. Namun dengan ini saya menjadi termotivasi supaya lebih bersabar dan teliti dalam membuat suatu website. Terimakasih untuk pemrograman web.

 

author
No Response

Leave a reply "Cara Membuat Selector Dengan HTML, CSS"