Posted by : Admin web11 Minggu, 23 Juni 2013

sintaks_comment_css



Salam Web11...

Dalam artikel kami kali ini, kami akan mulai memberikan materi pembelajaran CSS. Sebelum teman-teman membaca artikel ini, ada baiknya teman-teman membaca terlebih dahulu artikel kami sebelumnya tentang Sejarah dan Pengertian CSS. Disana dibahas tentang Versi CSS dan pengertian CSS. Bila teman-teman sudah membaca artikel tersebut, mari kita lanjut ke artikel kita kali ini yaitu tentang sintaks-sintaks CSS.

Pengenalan CSS

  • CSS adalah Cascading Style Sheet.
  • Styles pada CSS mendefinisikan bagaimana menampilkan elemen HTML.
  • Eksternal Style Sheet dapat mempermudah kita dalam pembuatan design website.
  • Eksternal style Sheet disimpan dalam file CSS.
CSS sebagai solusi masalah dalam design website.
HTML diciptakan tidak untuk memberi nilai pada tag untuk memformat sebuah dokumen. HTML dibuat untuk menentukan isi dari dokumen. Contoh :

<h1> Ini adalah Heading </h1>
<p> Ini adalah sebuah paragraph </p

Ketika tag <font> dan atribut warna ingin ditambahkan oleh pengembang web dalam pembuatan sebuah website besar, maka itu adalah sebuah mimpi buruk. Dikarenakan setiap jenis font dan warna yang ditambahkan ke setiap halaman menjadi proses yang sangat lama dan mahal.
Oleh karena itu, World Wide Web Consortium W3C membuat CSS. Dalam HTML 4.0, semua format ddapat dihapus dari sebuah dokumen HTML dan disimpan dalam File CSS yang terpisah. Style CSS biasanya disimpan dalam file eksternal dengan ekstensi file ".css". Style sheet eksternal memungkinkan anda untuk mengubah tampilan dan tata letak semua halaman dalam sebuah situs web, hanya dengan mengedit satu file tunggal.

Sintaks CSS

CSS terdiri dari 2 elemen utama yaitu selector dan deklarasi ( Deklarasi bisa lebih dari satu ).

h1  { color : blue; font-size: 12px;}

h1 => Selector

color : blue; => Deklarasi 1

font : size; => Deklarasi 2

Selector biasanya berupa elemen HTML.
Setiap deklarasi terdiri dari properti dan nilai.
Properti adalahh atribute style yang ingin kita ubah, setiap properti memiliki nilai.
Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hallo Dunia!</p>
<p>Ini adalah Paragraph dengan style CSS.</p>
</body>
</html>

Catatan : teman-teman copy script diatas dan simpan pada folder htdocs diweb server localhost yang teman-teman instal. Simpan dengan ekstensi file ".html"  (css.html). Setelah itu teman-teman buka web browser kemudian ketik localhost pada alamat url setelah itu pilih file yang disimpan di htdocs dan teman-teman bisa melihat hasilnya.

Komentar CSS

komentar digunakan menjelaskan kode yang kita buat. Sebuah komentar akan diabaaikan oleh browser.
Contoh :

/*Ini adalah sebuah komentar*/
p
{
text-align:center;
/*Ini adalah komentar yang lain*/
color:black;
font-family:arial;
}

Demikianlah artikel kami kali ini dalam tahap awal belajar CSS. Artikel ini hanya membahas tentang contoh  sintaks CSS dan pemberian komentar pada script CSS. Semoga artikel diatas bermanfaat bagi teman-teman semua. untuk artikel selanjutnya, kita akan belajar tentang Id dan Class Selector pada CSS.  ( Kritik dan saran dari pembaca sangat kami harapkan untuk meningkatkan kualitas artikel yang kami buat ).

{ 2 komentar... read them below or Comment }

  1. terima kasih infonya membantu sekali
    kami tim guru les privat ke rumah banyak belajar dari sini

    BalasHapus
  2. *AKU MALU TIDAK BISA BAHASA...*

    _30 April 2017_

    Aku malu karena beberapa hal ini:
    1) Aku malu pinter bahasa Inggris tetapi tidak kenal mubtada khobar...
    2) Aku malu tiap hari minimal 17 kali berdialog dengan Allah tetapi tidak paham apa yang Allah bicarakan...
    3) Aku malu pinter bahasa C, bahasa Python, bahasa PHP, bahasa MySQL, tetapi tidak tahu fi’il dan fa’il...
    4) Aku malu ikut pengajian sudah 10 tahun tetapi huwa huma hum belum bertambah...
    5) Aku malu anakku kuikutkan les privat bahasa Belanda, Matematika, dan Fisika, tetapi....
    6) Aku malu katanya aku Muslim tetapi...
    7) Aku malu...

    *SOLUSI*

    Saatnya belajar bahasa Arab dengan simpel, singkat, dan mudah dengan metode KISAI. Apa itu KISAI? Adalah singkatan dari _Komunitas Insan Sharaf Indonesia_ yang fokus membina para pecinta bahasa Arab baik Nahwu maupun Shorof dari NOL PUTOL. Artinya mereka sama sekali belum pernah belajar bahasa Arab sebelumnya. Targetnya ada 2, yaitu (1) bisa menerjemahkan Al-Qur’an –tahap awal/Nahwu- dan (2) bisa baca kitab gundul –tahap akhir/Sharaf-.

    *APA KELEBIHAN KISAI*

    Modul dan metode yang digunakan simpel dan bernada. Untuk Nahwu, memakai buku _Bahasa Arab Mudah Metode Balik Tangan_ yang *hanya* memuat 7 bab penting saja sehingga Anda hanya butuh 7 jam untuk menghatamkannya. Untuk Shorof, metode belajarnya menggunakan nada-nada.

    *DOWNLOAD*

    1. Nahwu (pdf)> https://bit.ly/bahasa-arab . Buku ini sudah didownload 5.000 lebih per 30/03/2017. Untuk versi Android bisa didownload di: https://play.google.com/store/apps/details?id=com.pustakasyabab.bahasaarabbaliktangan

    2. Sharaf (pdf) > https://bit.ly/amtsilah . Untuk versi Android yang memuat nada-nadanya bisa didownload di: https://play.google.com/store/apps/details?id=com.pustakasyabab.shorofnada

    Bagi yang membutuhkan file mp3-nya saja, bisa didownload di https://bit.ly/audio_kisai (11 MB).

    *FORUM (GRUP WA)*

    Untuk memudahkan dalam arahan dan semangat, Anda bisa bergabung dengan grup _Para Pecinta Bahasa Arab._

    Laki-Laki (semua umur) > https://chat.whatsapp.com/3gcC68fXqxO4bPhcnHzZEz
    Jika kuota sudah penuh, bisa ke grup ke-2: https://chat.whatsapp.com/GRJDrZNs5yGCfgCF6B0zUe

    Perempuan (semua umur) > https://chat.whatsapp.com/BwYwjCVQzdo81i3AfyZZig jika kuota penuh bisa di grup ke-2: https://chat.whatsapp.com/IwFo7kbPnGT1vdtqCTBtgE

    Di grup ini, teman-teman bisa saling bertanya, menyoal, menjawab, dan bertanya kepada pembimbing grup.

    *DIPERSEMBAHKAN OLEH*

    KISAI > http://komunitas-shorof.blogspot.co.id/

    Share yuk, barangkali ada yang jadi mahir bahasa Arab disebabkan jari-jemari Anda...

    BalasHapus

- Copyright © Design Web11 -Metrominimalist- Powered by Blogger - Designed by Johanes Djogan -