Penulisan CSS

0

Ada tiga cara penulisan kode CSS, yaitu inline, internal dan external. Ketiganya bisa anda lakukan sesuai dengan kebutuhan. Berikut contoh penggunaan dari metode-metode tersebut:

Inline

Penulisan kode CSS dengan metode inline ini bisa dilakukan langsung pada tag yang ingin diberi style dengan menggunakan atribut style.

<h1 style=”color : red; “> Judul Situs </h1>

 

Pada metode ini, anda tidak perlu menuliskan selector. Karena anda menuliskan CSS langsung pada tag yang ingin diberi style.

Cara ini sangat tidak dianjurkan, karena Anda akan mencampurkan antara “Format” dan “Presentasi”. Cara ini juga tidak efektif ketika anda akan melakukan perubahan pada CSS.

Internal

Metode CSS internal ditulis di dalam tag style yang ditempatkan pada tag head.

<HTML>
<head>
<title>Judul HTML</title>
<style>
h1 {
color : red;
}
</style>
</head>

Metode kedua ini sangat dianjurkan untuk pengujian style, atau ketika anda hanyamemiliki satu halaman web.

 

 

External

Metode yang terakhir adalah dengan membuat file CSS dan dipanggil di dalam tag head. File CSS memiliki ekstensi (akhiran) .CSS misanya namafile.CSS.

Pemanggilan file CSS dilakukan dengan menggunakan tag link:

<HTML>
<head>
<title>Judul HTML</title>
<link rel=”stylesheet” href=”fileCSS. CSS”/>
</head>

Atribut rel adalah informasi hubungan (relationship) dari tag link tersebut, yaitu sebagai stylesheet. Href diisi dengan lokasi file CSS yang ingin dimuat. Pemanggilannya sama dengan pemanggilan gambar atau link.

Pengenalan CSS

0

CSS adalah kependekan dari Cascading Style Sheet, berfungsi untuk mempercantik penampilan HTML atau menentukan bagaimana elemen HTML ditampilkan, seperti menentukan posisi, merubah warna teks atau background dan lain sebagainya.

Perhatikan contoh kode CSS berikut :

contoh kode css

Selector

Selector adalah elemen/tag HTML yang ingin diberi style. Anda dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda <>. Pada contoh kode CSS di atas, kita akan memberi style pada seluruh tag h1 yang terdapat dalam file HTML.

Jika tag HTML yang ingin diberi style memiliki ID, anda dapat menuliskan nama ID tersebut dengan diawali tanda kress (#).

#header

Dan jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan dengan tanda titik (.) diikuti dengan nama class.

.artikel

Jika anda hanya menuliskan satu selector, seperti contoh kode CSS di atas, maka seluruh tag h1 yang terdapat dalam file HTML akan memiliki style yang sama. Bagaimana jika kita hanya ingin memberi style pada tag h1 yang hanya terdapat di dalam Class artikel. Maka penulisan selectornya seperti berikut :

.artikel h1

Kode tersebut akan memerintahkan pada browser untuk memberi style pada tag h1 yang hanya terdapat di dalam class artikel (atau – h1 yang merupakan child dari class artikel).

Anda-pun dapat memilih lebih dari satu tag untuk penghematan kode CSS. Misalnya ketika anda memiliki dua atau lebih tag dengan warna background yang sama, dari pada menuliskan kode seperti ini :

h1{ background-color: #666666; }
P { background-color: #666666; }
a { background-color: #666666; }

anda dapat menggabungkan selector dengan menambahkan tanda koma pada nama tag yang ingin diberi style.

h1, p, a { background-color: #66666; }


Property dan Value

Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna background, jarak antar elemen, garis pinggir dan lain sebagainya.

Untuk memberikan nilai/value pada property kita gunakan tanda titik dua ( : ). Setiap property diakhiri dengan titik koma (;), jika anda tidak mengakhirinya maka browser tidak akan mengetahui maksud dari property tersebut.

Property-property pada CSS sangat mudah dimengerti karena lebih mirip bahasa kita sehari-hari. Misalnya untuk merubah warna text kita gunakan property color, untuk merubah warna background kita gunakan property background-color, untuk merubah ukuran huruf kita gunakan property font-size. Mudah dimengerti bukan?

.artikel h1 {
color : red;
background-color : blue;
font-size : 20px;
}

 

Menurut saya, Kode CSS sangat mudah dimengerti, karena kata-kata yang digunakan sudah tidak asing lagi, perhatikan contoh kode CSS sebelumnya, jika kita ubah ke bahasa kita sehari-hari, kira-kira menjadi seperti berikut :

“Hey Brow (Browser) Cari tag h1 yang terdapat di dalam class artikel, jika ditemukan/ada, ubah warnanya menjadi merah, warna background menjadi biru dan ukuran huruf menjadi 20 pixel.”

 

Sumber: ariona.net

Validasi Markup HTML

0

Validasi markup adalah proses dimana kode HTML kita divalidasi apakah sudah benar atau belum oleh aplikasi validator dari W3C6. Validasi ini sangatlah diperlukan untuk memeriksa apakah ada yang salah dengan markup HTML yang telah kita buat atau ada beberapa bagian yang terlewat seperti penutup tag, atribut dan lain sebagainya.

Sebagian orang berpendapat bahwa markup HTML yang valid akan mempercepat proses loading website dan lebih bersahabat dengan Search Engine

Untuk melakukan validasi, silahkan buka alamat berikut: http://validator.w3.org/.

Sebelumnya kita harus menyertakan informasi character encoding. Untuk memperbaikinya tambahkan kode berikut di dalam tag head dari file latihan markup kita.

<head>
<title>Latihan Markup</title>
<meta charset=”UTF-8″>
</head>

 

Maksud dari tag tersebut adalah menentukan tipe karakter encoding yang digunakan dalam file HTML, dan kita gunakan tipe “UTF-8”. Sekarang kita coba Revalidate (Memvalidasi ulang) file HTML kita.

 

Sumber: ariona.net

Perbedaan Id dan Class

0

Bagi seorang pemula, termasuk saya ketika masih belajar HTML & CSS pasti menanyakan hal yang sama. Pasalnya atribut ID dan Class digunakan untuk menamai tag HTML. Lalu apa perbedaan dari keduanya?

ID

Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik unik/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama. Perhatikan contoh berikut :

  1. 2.

      3.

    • Beranda
    • 4.

    • Tutorial
    • 5.

    6.

Penggunaan atribut ID pada contoh di atas adalah SALAH, karena terdapat dua ID yang sama, yaitu “menu” pada tag <div> dan <ul>.

Perhatikan contoh sebelumnya, bahwa kita menggunakan ID yang berbeda untuk setiap div yakni, header, content, sidebar dan footer karena semuanya memiliki struktur dan fungsi yang berbeda dalam suatu dokumen HTML.

Class

Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan dapat digunakan berulang kali dalam markup (Kode HTML). Sebagai contoh, perhatikan kode HTML berikut :

  1. <ul id=‚menu‛>
    2. <li class=‚merah‛>Beranda</li>
    3. <li>Tutorial</li>
    4. <li class=‚merah‛>Berita</li>
    5. <li>Video</li>
    6. </ul>

Pada Kode HTML di atas, saya menggunakan class Merah pada beberapa list item, karena nantinya list item yang memiliki class merah akan diberi warna background merah.

Kesimpulannya adalah, ketika anda memiliki beberapa elemen dengan karakter/format yang sama, gunakan Class sebagai penamaannya dan Gunakan ID untuk elemen yang berbeda dan membutuhkan tanda pengenal lebih spesifik.

Memahami hubungan Child, Parent dan Siblings

0

Ketika suatu tag memiliki tag/konten didalamnya maka hubungan antar tag-tag tersebut disebut dengan child-parent dan sibling. Perhatikan contoh berikut :

  1. 2.

    3.

    4.

    5. </div>
    6. </div>

Dalam contoh kode HTML tersebut :

  • <div id=‚wrapper‛> disebut Parent, dan tag HTML yang ada di dalamnya disebut dengan Child(<div id=‚content‛>).
  • Begitu juga dengan <div id=‚content‛> disebut parent untuk <div id=‚article‛> dan <div id=‚sidebar‛>,
  • dan hubungan antara<div id=‚article‛> dan <div id=‚sidebar‛> disebut dengan sibling, atau saudara.

Membuat Link Pada HTML

0

Link atau biasa disebut dengan anchor (pengait) dapat dibuat dengan menambahkan tag <a> pada teks yang ingin kita buat menjadi link.

Klik <a>disini</a> untuk mendownload
Namun anda tidak akan melihat perubahan pada teks “disini” karena kita belum “mengaitkannya” ke halaman web lain. Untuk itu kita akan menggunakan attribut href untuk menyimpan alamat web yang akan dituju ketika link di klik (penulisan lokasi sama halnya dengan attribut src pada tag img).

Klik <a href=”http://www.alamat-tujuan.com”>disini</a> untuk mendownload

Membuat Daftar Pada HTML

0

 

Ordered List

Ordered list atau Daftar berurutan dapat dibuat dengan menggunakan tag <ol> (singkatan dari ordered list) dan untuk setiap listnya kita gunakan tag <li> (singkatan dari list item/item daftar). Sebagai contoh, perhatikan kode HTML berikut :

  1. <h2>Yang harus dilakukan hari ini</h2>
    2. <ol>
    3. <li>Pergi ke pasar</li>
    4. <li>Buat tutorial HTML</li>
    5. <li>Mengerjakan tugas kuliah</li>
    6. </ol>

Penomoran daftar akan dilakukan secara otomatis ketika anda menambahkan daftar item.

Unordered List

Berbeda dengan daftar berurut, unordered list akan menandai setiap item dengan simbol. Baik berupa lingkaran atau persegi (anda masih bisa merubahnya dengan CSS). Untuk membuat daftar tidak berurut kita gunakan tag <ul> dan seperti tag <ol>, item yang terdapat di dalamnya harus diapit dengan tag <li>.

  1. <h2>Yang harus dilakukan hari ini</h2>
    2. <ul>
    3. <li>Pergi ke pasar</li>
    4. <li>Buat tutorial HTML</li>
    5. <li>Mengerjakan tugas kuliah</li>
    6. </ul>

 

Sumber:ariona.net