wiblogger

CSS priority: Mengatahui konfigurasi CSS yang dipilih oleh browser

CSS priority: Mengatahui konfigurasi CSS yang dipilih oleh browser

Pada konfigurasi CSS, suatu properti terkait elemen tertentu mungkin terdapat pada lebih dari 1 blok kode. Perhatikan contoh CSS berikut:

p {
  color:blue;
  text-decoration:underline;
}

p {
  color:red;
}
<p>Paragraf</p>

Paragraf


Pada CSS diatas, terdapat 2 blok kode yang mengatur elemen p. Pada setiap blok kode, terdapat properti yang mengatur warna text (color). Berkaitan dengan kasus diatas, kode CSS tetap valid (benar), namun, browser hanya akan menerapkan 1 konfigurasi yang paling diprioritaskan. Seperti yang terlihat pada tab hasil, browser memilih konfigurasi yang terdapat pada blok kode ke-2 untuk menentukan warna text (red).

CSS priority


Pada halaman ini, kita akan mengetahui tentang mana konfigurasi CSS yang akan digunakan oleh browser terkait elemen tertentu.

Prioritas CSS ditentukan berdasarkan beberapa hal, beberapa hal ini adalah penempatan, selektor, dan !important suffix pada value.


Prioritas 1: !important suffix

Bowser akan memilih properti yang memiliki suffix (akhiran) !important sebagai prioritas utama.

p {
  color:green;
}

p {
  color:red!important;
  text-decoration:underline;
}

p {
  color:blue;
}
<p>Paragraf</p>

Paragraf



Bagaimana kalau tidak terdapat satupun properti dengan akhiran !important ?

Browser akan menerapkan aturan selanjutnya yaitu mengecek Inline CSS.



Prioritas 2: Inline CSS

Ketika terdapat inline CSS pada elemen, konfigurasi lainya (Internal dan eksternal) akan diabaikan.

Contoh:
p {
  color:blue;
  text-decoration:underline;
}
.myparagraf {
  color:green;
}
<p class='myparagraf' style='color:red'>Paragraf</p>

Paragraf




Prioritas 3: Selektor yang lebih spesifik

Seberapa spesifik selektor ditentukan oleh jenis selektor itu sendiri serta berapa banyak selektor yang terlibat.

Berdasarkan jenis selektor

Setiap jenis selektor memiliki tingkat (score) prioritas yang berbeda. Berikut adalah tingkatan prioritas berdasarkan jenis selektor.

  1. Selektor berdasarkan ID (#id)
  2. Selektor berdasarkan class atau atribut (.class atau [atribut="value"])
  3. Selektor berdasarkan nama elemen (elemen)


Contoh:
#myparagraf {
  color:red;
  text-decoration:underline;
}
.myparagraf {
  color:green;
}
<p class='myparagraf' id='myparagraf'>Paragraf</p>

Paragraf



.myparagraf {
  color:green;
}
#myparagraf {
  color:red;
  text-decoration:underline;
}
<p class='myparagraf' id='myparagraf'>Paragraf</p>

Paragraf



Keterangan Seperti yang terlihat pada tab hasil, konfigurasi yang terpilih adalah konfigurasi yang terdapat pada blok kode dengan selektor berdasarkan ID. Ya, karena selektor berdasarkan ID memiliki prioritas lebih tinggi dibandingkan selektor berdasarkan class, tidak peduli penempatan blok kode, selektor dengan ID akan diterapkan.


Berdasarkan jumlah selektor yang terlibat

Pedefinisian suatu selektor dapat dilakukan secara spesifik dengan cara menggabungkan beberapa selektor yang relevan terkait elemen yang dikehendaki. Terkait prioritas browser, konfigurasi dengan jumlah selektor yang lebih banyak akan diterapkan.

Contoh:
.myparagraf {
  color:green;
}
p.myparagraf {
  color:red;
}
<p class='myparagraf'>Paragraf</p>

Paragraf



Keterangan Pada blok kode pertama, jumlah selektor yang didefinisikan adalah satu (berdasarkan class). Pada blok kode ke-2, jumlah selektor adalah dua (berdasarkan elemen dan class). Sesuai dengan aturan prioritas CSS, karena selektor ke-2 didefiniskan lebih spesifik (lebih banyak selektor yang terlibat), konfigurasi pada blok kode ke-2 akan dipilih.



Prioritas 4: Berdasarkan penempatan

Ketika browser belum mendapatkan prioritas dengan aturan-aturan yang telah diuraikan sebelumnya, aturan selanjutnya yang akan dijalankan adalah melihat penempatan konfigurasi. Dalam hal ini, konfigurasi yang diletakkan paling akhir akan menjadi prioritas.

Contoh:
.myparagraf {
  color:green;
  text-decoration:underline;
}
.myparagraf {
  color:red;
}
<p class='myparagraf'>Paragraf</p>

Paragraf


Keterangan Pada kode diatas, browser akan memilih konfigurasi pada blok kode ke-2, hal ini karena blok kode ke-2 didefinisikan paling akhir.


Prioritas 5: Default CSS

Ketika tidak terdapat konfigurasi yang mengatur elemen tertentu, browser akan menggunakan default CSS dalam mendekorasi elemen. Adapun default CSS ini mungkin berbeda antara browser satu dan browser lainnya.

Apa itu CSS selektor ? Daftar CSS Selektor Lengkap

Apa itu CSS selektor ? Daftar CSS Selektor Lengkap

CSS Selektor lengkap

Daftar isi:
  1. Macam-macam CSS selektor
    1. Berdasarkan Elemen
    2. Berdasarkan Class
    3. Berdasarkan ID
    4. Berdasarkan Atribut
      1. Ketersediaan
      2. Value
      3. Kata tertentu
      4. Text tertentu
      5. Awalan
      6. Akhiran
    5. Semua Elemen
  2. Mengkombinasikan beberapa selektor
    1. Elemen yang relevan terhadap beberapa selektor
    2. Mengatur Children (sub) dari elemen tertentu
      1. Children
      2. Direct-children
    3. Preceded selector
      1. Preceded
      2. Direct-preceded
  3. Menerapkan konfigurasi untuk beberapa selektor



Apa itu CSS Selektor ?

CSS selektor adalah bagian dari konfigurasi CSS yang mendefinisikan tentang Elemen mana yang akan diataur.

<p class='blue'>Konten</p>
<p class='blue'>Konten</p>
<div>Konten</div>
.blue {
   color:blue;
}

Konten

Konten

Konten


Pada kode diatas, .blue bertindak sebagai selektor, CSS diatas mengatur warna text untuk semua elemen dengan class blue.


1. Macam-macam CSS selektor

1.1 Berdasarkan Elemen

  • Selektor ini juga sering disebut sebagai selektor berdasarkan nama tag
  • Penulisan selektor ini dilakukan dengan cara menuliskan langsung nama elemen yang hendak diatur
  • Format penulisan: namaelemen
  • Contoh:
    <h2>Judul</h2>
    <p>Konten p1</p>
    <div>Konten div</div>
    <p>Konten p2</p>
    
    p {
       color:blue;
    }
    

    Judul

    Konten p1

    Konten div

    Konten p2


    <h2>Judul</h2>
    <p>Konten p1</p>
    <div>Konten div</div>
    <p>Konten p2</p>
    
    p {
       color:blue;
    }
    
    div {
       color:red;
    }
    

    Judul

    Konten p1

    Konten div

    Konten p2




1.2 Berdasarkan Class

  • Mengatur elemen dengan class tertentu
  • Penulisan selektor ini ditulis dengan cara menambahkan tanda titik (.) sebelum nama class
  • Format penulisan: .namaclass
  • Contoh:
    <p class='blue'>Konten</p>
    <p class='blue'>Konten</p>
    <p>Konten</p>
    
    .blue {
       color:blue;
    }
    

    Konten

    Konten

    Konten


    Untuk mengatur elemen yang memiliki 2 class (atau lebih), pendefinisian selektor dilakukan seperti berikut (selektor ke-3 dibawah).

    <p class='blue'>Konten</p>
    <p class='big'>Konten</p>
    <p class='blue big'>Konten</p>
    <p>Konten</p>
    
    .blue {
       color:blue; /* set warna menjadi biru untuk class blue */
    }
    
    .big {
       font-size:200%; /* set ukuran font menjadi sebesar 200% untuk class big*/
    }
    
    .blue.big { /* konfigurasi ini hanya akan diterapkan pada elemen yang memiliki class keduanya, untuk elemen dengan class blue saja atau big saja, konfigurasi tidak akan diterapkan */
      text-decoration:underline; /* Memberikan garis bawah untuk class blue big */                      
    }
    
    
    

    Konten

    Konten

    Konten

    Konten




1.3 Berdasarkan ID

  • Mengatur elemen dengan ID tertentu
  • Penulisan selektor berdasarkan ID ditulis dengan cara menambahkan tanda pagar (#) sebelum nama ID.
  • Format penulisan: #namaid
  • Contoh:
    <p>Konten 1</p>
    <p id='konten2'>Konten 2</p>
    <p>Konten 3</p>
    
    #konten2 {
       color:blue;
    }
    

    Konten 1

    Konten 2

    Konten 3




1.4 Berdasarkan Atribut

Ada banyak selektor berdasarkan atribut, hal ini seperti berdasarkan ketersediaan, awalan, akhiran dan beberapa lagi lainnya. Pada format penulisan semua selektor dibawah, value, kata, text bersifat Case sensitive.

1.4.1 Berdasarkan ketersediaan

  • Mengatur semua elemen yang memiliki atribut tertentu
  • Format penulisan: [namaatribut]
  • Contoh:
    <p title='Blogger'>Blogger</p>
    <p title='blogger'>blogger</p>
    <p>Tidak terdapat atribut</p>
    
    [title] {
       color:blue;
    }
    

    Blogger

    blogger

    Tidak terdapat atribut




1.4.2 Berdasarkan Value

  • Mengatur semua elemen yang memiliki atribut dengan value tertentu
  • Format penulisan: [namaatribut="value"]
  • Contoh:
    <p title='Blogger'>Blogger</p>
    <p title='blogger'>blogger</p>
    <p title='Belajar Blogger'>Belajar Blogger</p>
    
    [title="Blogger"] {
       color:blue;
    }
    

    Blogger

    blogger

    Belajar Blogger




1.4.3 Mengandung Kata tertentu

  • Mengatur semua elemen yang memiliki atribut dengan value yang mengandung kata tertentu
  • Format penulisan: [namaatribut~="kata"]
  • Contoh:
    <p title='Blogger'>Blogger</p>
    <p title='blogger'>blogger</p>
    <p title='Bloggers'>Bloggers</p>
    <p title='Belajar Blogger'>Belajar Blogger</p>
    <p title='Belajar-Blogger'>Belajar-Blogger</p>
    <p title='Blogger-CSS'>Blogger-CSS</p>
    
    [title="Blogger"] {
       color:blue;
    }
    

    Blogger

    blogger

    Bloggers

    Belajar Blogger

    Belajar-Blogger

    Blogger-CSS

  • Keterangan:
    <p title='Blogger BelajarBlogger Belajar-Blogger'/>
    <!-- Pada atribut "title" diatas, 
         apa yang dimaksud dengan "kata" adalah:
         - Blogger BelajarBlogger Belajar-Blogger
         - Blogger
         - BelajarBlogger
         - Belajar-Blogger
     -->
    
    <p title='BelajarBlogger Belajar-Blogger'/>
    <!-- Pada atribut "title" diatas, 
         apa yang dimaksud dengan "kata" adalah:
         - BelajarBlogger Belajar-Blogger
         - BelajarBlogger
         - Belajar-Blogger
     -->
    



1.4.4 Mengandung Text tertentu

  • Mengatur semua elemen yang memiliki atribut dengan value yang mengandung text tertentu
  • Format penulisan: [namaatribut*="text"]
  • Contoh:
    <p title='B'>B</p>
    <p title='Bc'>Bc</p>
    <p title='aB'>aB</p>
    <p title='aBc'>aBc</p>
    <p title='b'>b</p>
    
    [title*="B"] {
       color:blue;
    }
    

    B

    Bc

    aB

    aBc

    b

  • Keterangan: Apa yang dimaksud dengan text diatas adalah karakter atau kombinasi beberapa karakter.

    <p title='ABC'/>
    <!-- Pada atribut "title" diatas, 
         apa yang dimaksud dengan "text" adalah:
         - A
         - AB
         - ABC
         - B
         - BC
         - C
     -->
    



1.4.5 Berdasarkan Awalan

  • Mengatur semua elemen yang memiliki atribut dengan value yang diawali dengan text tertentu
  • Format penulisan: [namaatribut^="text"]
  • Contoh:
    <p title='Blogger'>Blogger</p>
    <p title='blogger'>blogger</p>
    <p title='Belajar Blogger'>Belajar Blogger</p>
    <p title='Blogger CSS'>Blogger-CSS</p>
    <p title='Blogger-CSS'>Blogger-CSS</p>
    <p title='BloggerCSS'>Blogger-CSS</p>
    
    [title^="Blogger"] {
       color:blue;
    }
    

    Blogger

    blogger

    Belajar Blogger

    Blogger CSS

    Blogger-CSS

    BloggerCSS




1.4.6 Berdasarkan Akhiran

  • Mengatur semua elemen yang memiliki atribut dengan value yang diakhiri dengan text tertentu
  • Format penulisan: [namaatribut$="text"]
  • Contoh:
    <p title='Blogger'>Blogger</p>
    <p title='blogger'>blogger</p>
    <p title='Belajar Blogger'>Belajar Blogger</p>
    <p title='Blogger CSS'>Blogger CSS</p>
    <p title='CSSBlogger'>CSSBlogger</p>
    
    [title$="Blogger"] {
       color:blue;
    }
    

    Blogger

    blogger

    Belajar Blogger

    Blogger CSS

    CSSBlogger




1.5 Semua elemen

  • Mengatur semua elemen. Selektor ini sering kali dikombinasikan dengan selektor Direct-children (Akan anda jumpai pada bagian 2.2.2 selanjutnya)
  • Format penulisan: *
  • Contoh:
    <div>
        <div>div-div</div>
        <p>div-p</p>
    </div>
    <p>p</p>
    <div>div</div>
    
    * {
       color:blue;
    }
    div > * {
       border:2px solid blue;
       padding:10px;
       margin-bottom:10px;
    }
    
    div-div

    div-p

    p

    span



Selain beberapa selektor diatas, masih ada banyak selektor yang tersedia, adapun selektor-selektor lainnya ini dikenal dengan Pseudo-class. Pembahasan mengenai selektor-selektor ini akan dibahas terpisah. Anda bisa melihat lebih lanjut mengenai selektor Pseudo-class melalui link-link pada daftar dibawah (jika telah tersedia). Untuk daftar yang bukan berupa link, itu artinya materi belum tersedia pada blog ini. Manfaatkan pencarian google untuk mencari informasi terkait selektor yang bersangkutan. Anda juga bisa berlangganan artikel kami melalui formulir Berlangganan Artikel yang terdapat di bagian bawah blog ini untuk mendapatkan update materi-materi yang akan kami terbitkan selanjutnya.

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection
  • ::palceholder
  • :empty
  • :first-child
  • :first-of-type
  • :last-child
  • :last-of-type
  • :nth-child(n)
  • :nth-last-child(n)
  • :nth-of-type(n)
  • :nth-last-of-type(n)
  • :only-of-type
  • :only-child
  • :active
  • :focus
  • :hover
  • :link
  • :visited
  • :valid
  • :invalid
  • :read-only
  • :read-write
  • :required
  • :optional
  • :checked
  • :disabled
  • :enabled
  • :in-range
  • :out-of-range
  • :indeterminate
  • :lang(language)
  • :root
  • :target
  • :not(selector)



2. Mengkombinasikan beberapa selektor

Kita bisa mengkombinasikan beberapa selektor untuk mengatur elemen berdasarkan kriteria tertentu dengan lebih spesifik. Hal ini seperti misalnya mengatur elemen p yang terdapat didalam elemen div, mengatur elemen p yang berada tepat setelah elemen div dan lain sebagainya.

2.1 Elemen yang relevan terhadap beberapa selektor

  • Format penulisan: selektor1selektor2selektorN
  • Penulisan selektor dilakukan dengan cara menggabungkan beberapa selektor (dua atau lebih) secara langsung tanpa pemisah
  • Konfigurasi hanya akan diterapkan pada elemen-elemen yang relavan dengan semua selektor
  • Contoh:
    <p class='b'>Elemen = p, class = b</p>
    <p class='b' title='Blogger'>Elemen = p, class = b, title = Blogger</p>
    <div class='b' title='Blogger'>Elemen = div, class = b, title = Blogger</div>
    
    /* Kofigurasi berikut hanya akan ditepkan pada 
    elemen "p" yang memiliki class "b" */
    p.b {
       color:blue;
    }
    

    Elemen = p, class = b

    Elemen = p, class = b, title = Blogger

    Elemen = div, class = b, title = Blogger

    <p class='b'>Elemen = p, class = b</p>
    <p class='b' title='Blogger'>Elemen = p, class = b, title = Blogger</p>
    <div class='b' title='Blogger'>Elemen = div, class = b, title = Blogger</div>
    
    /* Konfigurasi berikut hanya akan diterapkan pada
    elemen "p" yang memiliki class "b" dan dengan title "Blogger" */
    p.b[title="Blogger"] {
       color:blue;
    }
    

    Elemen = p, class = b

    Elemen = p, class = b, title = Blogger

    Elemen = div, class = b, title = Blogger



2.2 Mengatur Children (sub) dari elemen tertentu

Pada HTML, terdapat dua jenis children, dua jenis children ini adalah Children dan Direct-children. Pembahasan tentang dua istilah ini bisa anda baca pada post: Children dan Direct-children.

2.2.1 Children

  • Format penulisan: selektor1 selektor2
  • Fungsi:Mengatur elemen dengan selektor2 yang merupakan children dari elemen selektor1
  • Setiap selektor dipisahkan dengan spasi
  • Contoh:
    <div id='mydiv'>
      #mydiv
      <div>
          #mydiv-div
          <div>#mydiv-div-div</div>
          <div>#mydiv-div-div</div>
      </div>
      <div>
          #div1-div
          <div>#mydiv-div-div</div>
          <div>#mydiv-div-div</div>
      </div>
    </div>
    <div>div outside #mydiv</div>
    
    #mydiv div {
       border:2px solid black;
       color:blue;
       padding:10px;
       margin-bottom:10px;
    }
    
    #mydiv
    #mydiv-div
    #mydiv-div-div
    #mydiv-div-div
    #mydiv-div
    #mydiv-div-div
    #mydiv-div-div
    div outside #mydiv


2.2.2 Direct-children

  • Format penulisan: selektor1 > selektor2
  • Fungsi:Mengatur elemen dengan selektor2 yang merupakan direct-children dari elemen selektor1
  • Contoh:
    <div id='mydiv'>
      #mydiv
      <div>
          #mydiv-div
          <div>#mydiv-div-div</div>
          <div>#mydiv-div-div</div>
      </div>
      <div>
          #div1-div
          <div>#mydiv-div-div</div>
          <div>#mydiv-div-div</div>
      </div>
    </div>
    <div>div outside #mydiv</div>
    
    #mydiv > div {
       border:2px solid black;
       padding:10px;
       margin-bottom:10px;
    }
    
    #mydiv
    #mydiv-div
    #mydiv-div-div
    #mydiv-div-div
    #mydiv-div
    #mydiv-div-div
    #mydiv-div-div
    div outside #mydiv



2.3 Preceded selector: Mengatur elemen yang sebelumnya terdapat elemen tertentu (pada level yang sama)

Terdapat 2 jenis selektor preceded, dua jenis ini adalah Preceded dan Direct-preceded.

2.3.1 Preceded

  • Format penulisan: selektor1 ~ selektor2
  • Fungsi:Mengatur elemen dengan selektor2 yang berada setelah elemen dengan selektor1 pada level yang sama. Adapun posisi selektor1 tidak harus berada tepat sebelum selektor2 (bandingkan dengan direct-preceded).
  • Contoh:
    <p>p</p>
    <p>p</p>
    <div>div</div>
    <p>p</p>
    <p>p</p>
    <div>div</div>
    <div>
      <p>p</p>
    </div>
    <p>p</p>
    
    div ~ p {
       color:blue;
    }
    

    p

    p

    div

    p

    p

    div

    p

    p



2.3.2 Direct-preceded

  • Format penulisan: selektor1 + selektor2
  • Fungsi:Mengatur elemen dengan selektor2 yang berada Tepat setelah elemen dengan selektor1 pada level yang sama.
  • Contoh:
    <p>p</p>
    <p>p</p>
    <div>div</div>
    <p>p</p>
    <p>p</p>
    <div>div</div>
    <div>
      <p>p</p>
    </div>
    <p>p</p>
    
    div ~ p {
       color:blue;
    }
    

    p

    p

    div

    p

    p

    div

    p

    p




3. Menerapkan konfigurasi untuk beberapa selektor

Untuk mempersingkat penulisan konfigurasi, kita bisa menerapkan satu konfigurasi (blok kode) untuk beberapa selektor. Hal ini dilakukan ketika beberapa selektor memiliki beberapa konfigurasi properti yang sama. Adapun cara mempersingkat penulisan ini dilakukan dengan memisahkan setiap selektor dengan tanda koma (,).

div {
   color:blue;
}
p {
   color:blue;
}
span {
   color:blue;
}
.mydiv > * {
   color:blue;
}
div, p, span, .mydiv > * {
   color:blue;
}



Next: Prioritas CSS: Bagaimana browser memilih mana konfigurasi yang akan digunakan

Istilah pada HTML: Children dan Direct-Children

<div id='mydiv'>
  <span id='span1'>
    <i><!--konten--></i>
    <i><!--konten--></i>
  </span>
  <span id='span2'>
    <i><!--konten--></i>
    <i><!--konten--></i>
  </span>
</div>


Children

Pada kode HTML diatas, semua elemen span dan i merupakan children (sub) dari elemen #mydiv.

Direct-children

Pada kode HTML diatas, hanya elemen dengan id span1 dan span2 yang merupakan Direct-children dari #mydiv. Dengan kata lain, direct-children merujuk pada sub pada level pertama (ke-1).
Pengertian istilah Debug / Debugging pada Bahasa Pemrograman

Pengertian istilah Debug / Debugging pada Bahasa Pemrograman

pengertian debugging

Apa itu debugging ?

Debugging adalah proses mencari atau menganalisa kode pemrograman untuk tujuan perbaikan atau penyempurnaan. Ini adalah istilah yang sering dijumpai pada bahasa pemrograman.

Dalam merancang sebuah program, meskipun para pengembang berusaha sebaik mungkin pada tahap perancangan awal, pada kenyataannya, berbagai masalah mungkin saja muncul dikemudian hari. Ini merupakan kasus yang wajar, terlebih untuk program dengan skala besar (melibatkan ribuan baris kode). Adapun penyebab paling umum yang sering dijumpai adalah masalah yang disebabkan oleh kekeliruan pengembang itu sendiri (Humman error).

Untuk beberapa kasus, proses debugging mungkin akan lebih sulit dibandingkan dengan pembuatan sistem awal. Masalah baru mungkin saja muncul akibat kigiatan debugging yang kurang perhitungan. Hal ini karena perubahan pada bagian tertentu terkadang memerlukan penyesuaian untuk bagian-bagian lainnya.

Untuk tujuan kemudahan proses debugging, para pengembang berusaha menulis kode dengan sebaik mungkin yang dapat dibaca dengan mudah (Human-readable). Hal ini dapat dilakukan dengan menambahkan komen (Keterangan) di berbagai tahap pada program, membuat dokumentasi pribadi dan lain sebagainya.
Modul CSS: Belajar CSS dari NOL bersama wiBlogger.com

Modul CSS: Belajar CSS dari NOL bersama wiBlogger.com

Belajar CSS dari nol

Pada halaman Belajar HTML yang telah diterbitkan sebelumnya, kita telah belajar berbagai hal dasar terkait HTML. Hal ini seperti bagaimana cara membuat dokumen HTML sederhana, bentuk / struktur minimum dokumen HTML dan lain sebagainya. Pada halaman ini, kita akan belajar bagaimana menerapkan CSS untuk mengatur elemen-elemen HTML.

Persyaratan awal


Sintak / Format penulisan CSS

Sintak penulisan CSS
selektor {
   properti1 : value;
   properti2 : value;
   propertiN : value;
}

selektor2 {
   properti1 : value;
   properti2 : value;
   propertiN : value;
}

selektorN {
   properti1 : value;
   properti2 : value;
   propertiN : value;
}


Keterangan
  • Selektor Elemen yang hendak diatur.
  • Properti Hal apa yang hendak diatur terkait elemen (selektor) yang bersangkutan. Beberapa contoh properti yang tersedia adalah seperti width (lebar), height (tinggi), background (latar belakang), color (warna) dan masih banyak lagi.
  • Value Nilai atau ketentuan yang diberikan untuk properti yang bersangkutan.
  • Blok kode {...} merupakan Blok kode, semua konfigurasi didefinisikan didalam blok kode.


Contoh 1 Mengatur warna text pada semua elemen p.
<p>Element p1</p>
<p>Element p2</p>
<div>Element div 1</div>
<div>Element div 2</div>
p {
   color : red;
}

Elemen p1

Elemen p2

Elemen div 1
Elemen div 2

Pada kode CSS diatas, hanya terdapat 1 properti yaitu color, jika hendak menambahkan properti lainnya, tambahkan properti selanjutnya didalam blok kode.

<p>Element p1</p>
<p>Element p2</p>
<div>Element div 1</div>
<div>Element div 2</div>
p {
   color : white;
   background : blue;
   margin-bottom : 10px;
   padding : 10px;
}

Elemen p1

Elemen p2

Elemen div 1
Elemen div 2

Kode diatas hanya mengatur elemen p, tambahkan konfigurasi selanjutnya (selektor dan blok kode baru) jika hendak membuat konfigurasi untuk elemen-elemen lainnya.

<p>Element p1</p>
<p>Element p2</p>
<div>Element div 1</div>
<div>Element div 2</div>
p {
   color : white;
   background : blue;
   margin-bottom : 10px;
   padding : 10px;
}

div {
   border : 1px solid black;
   margin-bottom : 10px;
   padding : 10px;
}

Elemen p1

Elemen p2

Elemen div 1
Elemen div 2



Sampai pada paragraf ini, anda sudah paham tentang bagaimana cara membuat konfigurasi CSS. Adapun lebih jauh tentang selektor dan properti akan kita bahas nanti. Untuk sekarang, kita akan fokus pada berbagai hal dasar.



Cara menerapkan CSS

Terdapat 3 metode yang bisa digunakan untuk menerapkan CSS, 3 metode ini adalah Internal, Eksternal dan Inline.

Metode Internal

Penerapan CSS dengan metode Internal dilakukan dengan cara meletakkan kode CSS kedalam elemen style dan menempatkannya di bagian head.

CSS didalam elemen style
<style>
   Kode CSS disini.....
</style>

Berikut adalah contoh penerapan CSS dengan metode Internal pada dokumen HTML.

<!DOCTYPE html>
<html>
   <head>
      <title>Belajar HTML</title>
      <style>
         h1 {
            color : white;
            text-align : center;
            background : blue;
            font-size : 30px;
         }
         div {
            border : 1px solid #e0e0e0;
            padding : 20px;
         }
      </style>
   </head>
   <body>
      <h1>Belajar HTML</h1>
      <div>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Nullam congue pellentesque viverra. Etiam aliquam nec
         urna at rhoncus. Fusce non mattis velit.
         Nullam dui elit, efficitur sed porta ut,
         aliquet at erat
      </div>
   </body>
</html>
Belajar HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue pellentesque viverra. Etiam aliquam nec urna at rhoncus. Fusce non mattis velit. Nullam dui elit, efficitur sed porta ut, aliquet at erat


Metode Eksternal

Pada metode eksternal, kode CSS dibuat menjadi sebuah file (dengan format .css). URL file ini nantinya akan di-link dengan menggunakan elemen HTML link yang ditempatkan di bagian head.

CSS dengan elemen link
<link rel="stylesheet" href="URL file CSS..."></link>

Adapun proses linking dilakukan kurang lebih seperti berikut:

CSS Eksternal
<!DOCTYPE html>
<html>
   <head>
      <title>Belajar HTML</title>
      <link rel="stylesheet" href="http://example.com/file/maincss.css"></link>
   </head>
   <body>
      <h1>Belajar HTML</h1>
   </body>
</html>



Metode Inline

Pada metode inline, konfigurasi CSS langsung ditempatkan pada elemen yang bersangkutan melalui atribut style. Pada metode ini. selektor dan Blok kode tidak dibuat.

Inline CSS
<elemen style="properti1:value;properti2:value;propertiN:value;">
   Content
</elemen>

Berikut adalah contoh penerapan inline CSS pada elemen div

<div style="color:blue;text-align:center;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   Nullam congue pellentesque viverra. Etiam aliquam nec
   urna at rhoncus. Fusce non mattis velit.
   Nullam dui elit, efficitur sed porta ut,
   aliquet at erat
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam congue pellentesque viverra. Etiam aliquam nec urna at rhoncus. Fusce non mattis velit. Nullam dui elit, efficitur sed porta ut, aliquet at erat



Sampai pada paragraf ini, anda sudah mengerti tentang bagaimana cara mengatur tampilan elemen-elemen HTML menggunakan CSS. Selanjutnya, kita akan membahas mengenai kelebihan dan kekurangan dari masing-masing metode diatas.



Kelebihan dan kekurangan metode Eksternal

Kelebihan
  • Ukuran file HTML yang lebih kecil Karena file CSS dibuat terpisah, ukuran kode HTML menjadi lebih kecil dan secara bersamaan membuat kode HTML menjadi lebih rapih dan terorganisir.


Kekurangan
  • Membutuhkan proses load file CSS Karena file CSS diletakkan terpisah dari HTML, browser memerlukan waktu untuk meload file CSS sebelum dapat merender HTML dengan benar. Terlebih lagi jika ada banyak file CSS eksternal yang diload, ini jelas akan membuat proses load halaman menjadi lama.

Pada prakteknya, banyak pemilik situs yang membuat konfigurasi terpisah untuk setiap bagian-bagian utama, hal ini seperti misalnya membuat konfigurasi khusus (file khusus) untuk bagian header (header.css), bagian sidebar (sidebar.css), bagian footer (footer.css) dan lain sebagainya. Konfigurasi yang dibuat terpisah ini dibuat untuk kemudahan proses Debugging (Proses perbaikan atau penyesuaian dikemudian hari). Namun, karena konfigurasi ini dibuat terpisah, proses load file pada halaman jelas akan bertambah, kita perlu meload semua aset ini secara terpisah. Semakin banyak aset yang perlu diload, semakin lama pula waktu load yang dibutuhkan.

Load BEBERAPA CSS Eksternal
<!DOCTYPE html>
<html>
   <head>
      <title>Belajar HTML</title>
      <link rel="stylesheet" href="https://example.com/file/header.css"></link>
      <link rel="stylesheet" href="https://example.com/file/sidebar.css"></link>
      <link rel="stylesheet" href="https://example.com/file/footer.css"></link>
   </head>
   <body>
      <!-- body -->
   </body>
</html>

Untuk kasus seperti diatas, proses load akan sangat terasa jika itu adalah kunjungan pertama, untuk kunjungan-kunjungan selanjutnya (misal saat pengguna merefresh halaman atau membuka halaman lain yang masih menggunakan file-file css yang bersangkutan), waktu load akan lebih cepat, hal ini karena browser akan men-cache konfigurasi CSS yang bersangkutan.


Kelebihan dan kekurangan metode Internal

Keunggulan
  • Proses load halaman yang cepat Dibandingkan dengan metode eksternal, penerapan internal memiliki keunggulan dari sisi kecepatan load halaman. Pada metode internal, karena CSS langsung ditempatkan pada dokumen HTML, browser tidak perlu meload file CSS terlebih dahulu, hal ini membuat load halaman lebih cepat dibandingkan dengan metode eksternal.


Kekurangan
  • Ukuran file HTML yang besar Sebuah situs umumnya memiliki konfigurasi CSS yang sangat banyak. Penerapan metode internal umumnya akan menempatkan semua konfigurasi pada satu tempat (hanya menggunakan satu elemen style dan menempatkan semua kode CSS didalamnya). Hal ini tentunya membuat kode HTML menjadi sangat panjang. Ukuran file HTML juga jelas akan lebih besar dibandingkan dengan metode eksternal sebelumnya.
  • Proses debugging yang lebih sulit Karena semua konfigurasi CSS ditempatkan pada satu tempat, hal ini akan membuat proses debugging menjadi lebih sulit. Pengembang mungkin memerlukan waktu lebih lama untuk menuju / menemukan bagian-bagian dalam CSS yang akan disesuaikan / diperbaiki.
  • Browser tidak men-cache konfigurasi Dengan menempatkan CSS langsung pada HTML, browser tidak dapat men-cache konfigurasi. Dengan kata lain, browser perlu membaca dan merender konfigurasi setiap kali halaman dimuat.


Kelebihan dan kekurangan motode Inline

Metode inline merupakan metode yang jarang sekali digunakan untuk mengatur konfiguasi utama. Ini lebih diperuntukkan untuk kebutuhan-kebutuhan kecil. Hal ini seperti misalnya mengatur warna text elemen tertentu pada postingan blog.

Kelebihan
  • Load yang cepat seperti halnya metode Internal


Kekurangan
  • Ada banyak fitur CSS yang tidak dapat digunakan melalui metode inline, hal ini seperti selektor, pseudo, dan lain sebagainya.
  • Konfigurasi CSS hanya dapat digunakan oleh elemen yang bersangkutan. Hal ini tidak seperti pada metode internal dan eksternal yang dapat membuat konfigurasi untuk beberapa elemen sekaligus (dengan selektor).

Pada prakteknya, css inline hanya digunakan untuk kebutuhan instan. Hal ini seperti misalnya mengatur warna text elemen tertentu pada postingan, mengatur rataan text dan beberapa lagi lainnya. Untuk konfigurasi utama, metode yang digunakan adalah internal atau eksternal.


Perbandingan proses load pada metode Eksternal dan Internal

Anda mungkin akan bertanya tentang mana yang lebih optimal antara metode eksternal dan internal jika dilihat dari kecepatan loading halaman. Berdasarkan pengamatan pribadi, walaupun browser tidak men-cache konfigurasi internal, proses load konfigurasi internal lebih cepat dibandingkan konfigurasi eksternal. Terlebih untuk situs-situs berskala kecil seperti situs pribadi atau blog seperti blog wiBlogger ini.

Next: CSS Selektor

Kami akan mengupdate ketersediaan materi secara bertahap, Anda bisa berlangganan artikel kami melalui formulir Email Subscription yang terdapat di bagian bawah blog ini untuk mendapatkan update materi-materi yang akan kami terbitkan selanjutnya.

Elemen HTML: html

Definisi dan penggunaan

html adalah elemen tertinggi didalam dokumen HTML. html juga sering disebut sebagai elemen akar (root elements). Semua elemen HTML lainnya harus berada di dalam elemen html ini.

Konten yang diizinkan

Satu elemen head diikuti dengan satu elemen body

Contoh
<!DOCTYPE html>
<html>
   <head>
      <!-- Konten... -->
   </head>
   <body>
      <!-- konten... -->
   </body>
</html>


Atribut



Dukungan browser

Chrome Firefox Safari IE Opera
Ya Ya Ya Ya Ya


Tips

Atribut lang adalah satu-satunya atribut umum yang sering digunakan pada elemen html untuk mendeklarasikan bahasa konten secara keseluruhan.
Modul HTML: Belajar HTML dari Nol bersama wiBlogger.com

Modul HTML: Belajar HTML dari Nol bersama wiBlogger.com

Sebagai motivasi awal, dengan mengikuti materi dan praktek pada modul ini, anda setidaknya akan mendapatkan beberapa hal yang akan menjadi modal yang sangat membantu dalam proses belajar web programming secara otodidak. Beberapa hal ini adalah:

Mengerti tentang peranan HTML, CSS dan Javascript sebagai pembangun halaman web
Mengerti tentang bagaimana cara menerapkan CSS dan Javascript pada HTML
Mampu membuat halaman web sederhana
Mengetahui materi-materi terkait lainnya yang dibutuhkan dalam pembelajaran HTML, CSS dan Javascript


Belum pernah belajar web programming sebelumnya ? Apakah baik jika mulai belajar dari HTML ?
Ya, HTML adalah kemampuan front-end developer. Kenapa harus mulai dari front-end ? Sederhananya, sebelum kita dapat memproduksi sesuatu (dengan kemampuan back-end programming), kita harus paham dulu tentang apa yang akan kita produksi. Selain itu, tiga bahasa yang akan anda pelajari pada sisi front-end ini akan menjadi pondasi yang sangat penting jika anda hendak mendalami back-end programming.

Materi:

Sampai disini, anda telah mengerti tentang struktur utama halaman web serta fungsi masing-masing bahasa (HTML, CSS, Javascript).


Struktur Minimum HTML

Dalam pembuatan HTML, terdapat beberapa elemen yang harus didefinisikan. Beberapa elemen ini merupakan struktur minimum dari dokumen HTML.

struktur minimum HTML

  • DOCTYPE <DOCTYPE html> adalah kode yang mendefinisikan tipe dokumen HTML. Kode ini harus diletakkan pertama kali (paling atas).
  • Elemen HTML: html Tepat setelah doctype, kode diteruskan dengan elemen html, ini adalah elemen akar. Elemen-elemen HTML lainnya harus diletakkan didalam elemen ini (merupakan sub dari elemen ini).
  • Elemen HTML: head Elemen yang menampung berbagai informasi terkait dokumen HTML, hal ini seperti misalnya judul, deskripsi dan lain sebagainya. Elemen ini tidak akan ditampilkan pada layar browser.
  • Elemen HTML: body Merupakan tubuh HTML. Elemen inilah yang akan ditampilkan pada layar browser.
  • Elemen HTML: title Elemen yang mengatur judul dokumen. Konten yang terdapat pada elemen title ini akan ditampilkan pada Tab browser.


Terkait Blogger.com
Jika sistem minimum HTML mewajibkan beberapa elemen diatas, kenapa pada pembuatan posting di blogger.com, HTML bisa dibuat tanpa elemen-elemen diatas ?

Pada pembuatan post blogger.com, yang kita buat bukanlah dokumen HTML melainkan elemen-elemen HTML. Sistem blogger akan meletakkan elemen-elemen yang kita buat pada Antarmuka post editor ke suatu lokasi (sesuai tema/template yang digunakan) yang merupakan sub dari elemen body. Jadi jelas, kita tidak perlu atau bahkan tidak boleh menyertakan elemen-elemen diatas kedalam post editor.


Cara browser merender HTML (Membaca, membuat dan menampilkan)

Masih merujuk pada sistem minimum HTML diatas, terdapat 2 elemen utama. Dua elemen ini adalah head dan body.

  • head Elemen ini berisi berbagai elemen yang bertujuan memberikan informasi terkait dokumen HTML. Anda mungkin akan bingung tentang apa yang dimaksud dengan "informasi" disini. Untuk lebih jelasnya, sebagai contoh, salah satu elemen yang sering digunakan pada elemen head adalah elemen meta untuk mendefinisikan status index mesin pencari (Apakah mesin pencari boleh mengindex halaman atau tidak). Mesin pencari akan membaca informasi yang terdapat pada elemen meta ini untuk menentukan apakah halaman akan diletakkan pada database mereka atau tidak.
  • body Elemen ini merupakan tubuh dokumen HTML. Elemen inilah yang ditampilkan pada layar browser.

    <!DOCTYPE html>
    <html>
       <head>
          <title>Belajar HTML</title>
       </head>
       <body>
          <p>Belajar membuat paragraf</p>
       </body>
    </html>

    Belajar membuat paragraf



Tentang Elemen HTML

HTML adalah bahasa markup yang tersusun atas elemen-elemen HTML. Elemen HTML didefiniskan (dibuat) dengan Tag HTML. Beberapa contoh elemen HTML adalah seperti html, head, body, title, h1, p dan lain sebagainya.

Sintak / cara penulisan
Sintak:
<elemen>content...</elemen>

Keterangan:
  • elemen adalah nama elemen
  • <elemen> adalah tag pembuka (Start tag)
  • </elemen> adalah tag penutup (Closing tag)
  • Tag penutup ditulis sama dengan tag pembuka dengan menambahkan / tepat sebelum elemen.

    Apakah semua tag harus ditutup ?

    Ya. Meskipun pada HTML5 penulisan tag penutup bersifat opsional, namun, hal ini sangat tidak dianjurkan. Jadi, tetap tutup semua tag.
  • elemen bersifat Case Insensitive
  • elemen bersifat Predefined. Dengan kata lain, kita hanya bisa menggunakan nama elemen yang telah diizinkan oleh HTML.
Daftar Elemen HTML
Untuk daftar elemen HTML, anda bisa menuju halaman: Daftar Elemen HTML.


Atribut HTML

Atribut HTML merupakan deklarasi data pada elemen HTML. Atribut memberikan informasi terkait elemen HTML yang bersangkutan, baik itu sebagai informasi wajib maupun hanya sebagai informasi tambahan.

Contoh penerapan atribut HTML
<p title='HTML paragraf'>Paragraf</p>

Pada contoh diatas, title="HTML paragraf" merupakan Atribut HTML.

Sintak
Sintak
<elemen nama='value'>Paragraf</elemen>


Keterangan:
  • nama adalah nama atribut yang bersangkutan (Predefined)
  • value adalah nilai (data).
  • Setiap elemen html bisa memiliki satu atau lebih atribut
  • Deklarasi atribut diletakkan didalam Tag pembuka
  • Deklarasi value bisa dilakukan menggunakan Single quote (') atau Double quote (").

    HTML5 memungkinkan pendefinisian atribut tanpa mengunakan quote.

    Contoh
    <p class=class1>Paragraf</p>

    Hal ini tidak dianjurkan, jadi tetap gunakan quote dalam mendeklarasikan atribut.
Jenis-jenis atribut HTML
Terdapat 3 jenis atribut HTML, tiga jenis atribut ini adalah Atribut Wajib, Atribut Khusus dan Atribut Global (umum).


Atribut Wajib

Atribut wajib adalah atribut yang berlaku untuk elemen-elemen tertentu saja dan harus didefinisikan. Contoh atribut wajib HTML adalah atribut href untuk elemen link.

<a href="http://www.wiblogger.com">wiBlogger.com</a>


Apa yang terjadi jika atribut wajib tidak didefinisikan ?

HTML anda tidak valid (tidak benar) dan browser akan merender elemen yang bersangkutan sebisa yang mereka bisa lakukan. Pada kasus ini, elemen mungkin ditampilkan tidak seperti yang seharusnya.


Artibut Khusus

Atribut yang hanya tersedia untuk elemen-elemen tertentu saja dan bersifat optional (bisa didefinisikan dan bisa tidak). Contoh atribut khusus adalah atribut target untuk elemen link.

<a target="_blank" href="http://www.wiblogger.com">wiBlogger.com</a>

Keterangan target="_blank" mengintruksikan browser untuk membuka link pada tab baru. Tanpa atribut ini, link tetap akan bekerja sebagaimana mestinya (terbuka pada tab yang sama).


Atribut Global

Atribut yang tersedia untuk semua elemen HTML dan bersifat opsional. Contoh atribut global adalah seperti title, class, id, dan lain sebagainya.
Daftar atribut global HTML
Untuk daftar atribut global HTML, anda bisa menuju halaman: Daftar Atribut Global HTML.


Membuat HTML sederhana

Pada modul ini, kita akan praktek membuat dokumen HTML sederhana secara offline. Pastikan anda mengikuti praktek ini untuk memahami poin-poin yang akan anda jumpai selanjutnya.

Persiapan
  • Text editor Untuk text editor, kita akan menggunakan Notepad++ (Download dan instal)
  • Buat for baru Untuk memudahkan proses belajar anda, buat forder baru dengan nama Belajar HTML. Semua aset (media) untuk keperluan belajar HTML akan kita letakkan pada forder ini.
Membuat file HTML
Buka Notepad++, jika ini adalah kali pertama anda menggunakan Notepad++, tab untuk file baru akan secara otomasi dibuat. Atau anda bisa membuat file baru dengan cara klik shortcut New file (atau bisa melalui toolbar File > New).

membuat file baru di notepad

Pada keadaan awal, bahasa default yang ter-apply pada file baru adalah txt, atur bahasa file baru ke HTML dengan cara: pada toolbar Notepad++, klik Language dan pilih H > HTML.

belajar html - atur bahasa notepad

Sekarang, bahasa yang ter-apply pada file baru adalah HTML, selanjutnya, Copy dan Paste semua kode HTML sederhana dibawah kedalam kode editor.

HTML sederhana
<!DOCTYPE html>
<html>
   <head>
      <title>Belajar HTML</title>
   </head>
   <body>
      <h1>Belajar HTML</h1>
      <p>Konten paragraf 1</p>
      <p class='paragraf'>Konten paragraf 2</p>
      <p class='paragraf' id='paragraf3'>Konten paragraf 3</p>
   </body>
</html>


belajar html - kode html sederhana

Selanjutnya, simpan file ke dalam folder Belajar HTML yang telah anda siapkan sebelumnya dengan cara klik toolbar File > Save. Ganti nama file menjadi index (Anda bisa menamai file ini dengan nama lainnya, namun untuk praktek ini, kita namai file ini dengan index).

belajar html - simpan kode html
Hasil
Untuk melihat hasil, pada toolbar Notepade++, klik Run dan pilih Browser yang dikehendaki (yang terinstal pada perangkat anda). Pada panduan ini, browser yang digunakan adalah Google Chrome. Cara lain untuk membuka file adalah dengan cara Double-click pada file index yang terdapat pada folder Belajar HTML, perangkat akan secara otomatis membuka file melalui default browser.


File index akan terbuka pada browser yang anda pilih.

belajar html - hasil


Sampai pada paragraf ini, anda sudah memiliki pemahaman dasar tentang HTML serta beberapa materi terkait HTML. Pada hasil HTML sederhana yang telah kita buat, tampilan HTML masih sangat sederhana. Selanjutnya, kita akan mempelajari bagaimana cara menerapkan CSS serta materi-materi terkait CSS untuk mendesain HTML.

Next: Modul CSS: Belajar CSS dari Nol
Berlangganan Artikel
Kami akan mengirimkan berbagai referensi blogging pilihan langsung ke alamat email anda. Pastikan juga anda melakukan konfirmasi pada email yang bersangkutan untuk mengaktifkan layanan. Panduan bagaimana cara berlangganan artikel bisa anda baca disini.
×
Jangan tampilkan lagi