Implementasi CSS

Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:

• Inline CSS
• Embed atau memasang kode css ke dalam bagian
• Nge link ke external CSS
• Import CSS file

Yuk kita bahas satu per satu…

Inline CSS

Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.
Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:

Isi paragraf.

Pada contoh di atas, elemen paragraf di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.

Embedded CSS

Anda bisa juga menempelkan kode CSS di antara tag dan
. Penulisan CSS dengan cara ini diawali dengan tag . Contoh:

Dalam contoh di atas semua elemen dalam halaman web tersebut akan diformat  menggunakan font berwarna biru.

External CSS

Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css. Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:

1. Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
   

   p {font-family: arial; font-size: small;}
   h1 {color: red; }
   

2. Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag dan
   

   
   
   
   

Import CSS

Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:

@import "style.css";

atau

@import url("style.css");

Penggunaan Lebih dari Satu Kode CSS

Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.
Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sbb:

h1 {
color: red;
text-align: left;
font-size: 8pt
}

Sementara di halaman web yang sama, di antara tag ada kode CSS sbb:

h1 {
text-align: right;
font-size: 20pt
}

Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sbb:

color: red;
text-align: right;
font-size: 20pt

Read More

Syntax CSS

Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.
Format penulisan kalimat CSS:

selector { property: value }

Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
Contoh Syntax:

h1 { color: red }

Contoh di atas menunjukkan

Selector: h1
Property: color
Value: red

Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).

Pengelompokan Selectors

Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:

h1,h2,h3 { color: red }

Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.

Penggunaan Banyak Properties

Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:

h1,h2,h3 {color:red; font-family:arial; font-size:150%;}

Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.

Cara Penulisan Yang Baik

Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Ya cuma biar rapih dan lebih mudah di baca aja sih, ga harus kok.

h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}

Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.

CSS Comment

Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.

/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}

Read More

PENGENALAN CSS

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.
Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

Keuntungan Penggunaan CSS

Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.
Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.
Jadi, keuntungan menggunakan CSS, lebih praktis!

Kekurangan Penggunaan CSS

Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.

Read More

WEB STATIS DAN DINAMIS

Web merupakan salah satu fasilitas di internet. Web sendiri merupakan kumpulan dokumen-dokumen multimedia yang saling terhubung satu sama lain yang menggunakan protokol HTTP dan untuk mengaksesnya menggunakan “browser”. browser merupakan perangkat lunak untuk menampilkan halaman-halaman web dalam format HTML. contoh browser/ web browser diantaranya adalah: internet explorer, mozilla firefox, opera, safari.
web dinamis dan web statis
secara umum web dapat dibagi menjadi 2 kategori, yaitu web dinamis dan web statis. Perbedaan keduanya dapat dilihat dari isi/ “content” jenis web tersebut. web dinamis adalah jenis web yang isinya selalu berubah-ubah/ uptodate. contoh web dinamis adalah web berita, web perdagangan (e-commerce),  sedangkan web statis merupakan jenis web yang isinya tidak berubah-ubah biasanya web jenis ini dibuat menggunakan teknologi HTML yang isinya tidak dapat dirubah kecuali dengan cara merubah langsung isinya dari file aslinya (*.html).
Pemrograman Web
secara umum pemrograman web dapat dibagi 2, yaitu: client side scripting dan server side scripting. perbedaan dari kedua jenis script ini adalah pada bagaimana script tersebut di proses dan tentu saja dari sintaks program yang digunakan.

• client side scripting (CSS), merupakan jenis script yang pengolahannya dilakukan di sisi client. pengolahan disini berarti “di terjemahkan/ interpreted”. yang memiliki tugas untuk menterjemahkan script jenis ini disisi client adalah web browser. agar semua script yang masuk kategori ini dapat diterjemahkan oleh web browser maka didalam web browser terdapat sebuah komponen/ modul/ “engine” yang memiliki daftar pustaka (library) yang mampu mengenali semua perintah-perintah yang terdapat pada kategori client side scripting. berikut contoh web browser yang populer digunakan: internet explorer, mozilla firefox, opera., safari.  berikut adalah contoh client side scripting: HTML (hypertext markup language), java script, XML (extensible markup language), CSS (cascading style sheet). client side scripting merupakan script yang digunakan untuk membuat halaman web statis.
• server side scripting (SSS), merupakan script yang pengolahannya (baca: diterjemahkan) di sisi server. server yang dimaksud disini adalah sebuah komponen yang biasa disebut web server yang didalamnya terintegrasi dengan sebuah mesin (engine)/ modul yang didalamnya terdapat daftar pustaka (library) yang mampu menterjemahkan script-script tersebut yang kemudian setelah di terjemahkan di server kemudian dikirim (ditampilkan) ke client (web browser) dalam format HTML (hypertext markup language). mesin (engine) tersebut harus di install terlebih dahulu karena mesin-mesin tersebut memiliki karakteristik yang berbeda untuk tiap script (bahasa pemrograman) yang digunakan. berikut contoh server side scripting: PHP (PHP pre processor), ASP (active server pages), JSP (java server pages). server side scripting digunakan untuk membuat halaman web dinamis. hal ini disebabkan karena server side scripting memiliki kelebihan, diantaranya: mampu berinteraksi dengan banyak perangkat lunak basis data (database), mampu mengelola sumber daya yang terdapat di sistem operasi dan perangkat keras komputer, mampu dijalankan di semua sistem operasi (multi plattform), aman karena scriptnya di proses di server yang tidak dapat dilihat dari sisi client (web browser).

komponen-komponen penyusun web
untuk membuat web, diperlukan beberapa komponen yang harus ada (ter-install) didalam komputer, yaitu:

1. web browser, merupakan perangkat lunak wajib yang harus terdapat di komputer. karena untuk menjalankan aplikasi web harus menggunakan web browser. beberapa contohnya: internet explorer, mozilla firefox, opera, safari.
2. web server, merupakan perangkat lunak wajib jika membuat sebuah halaman web dinamis. dalam web server semua script-script web yang dibuat diletakkan. biasanya diletakkan dalam “document root” dalam web server tersebut. dengan menggunakan web server maka pembuat web dapat melakukan uji coba terhadap halaman-halaman web yang dibuat tanpa harus mencobanya di internet langsung (localhost). berikut contoh web server: IIS (internet information services) terdapat pada windows NT/ XP/ 2000 Server untuk ASP dan PHP, PWS (personal web server) terdapat pada Windows 98 SE untuk ASP dan PHP, Apache web server dapat di install di semua sistem operasi untuk PHP, Apache Tomcat dapat di install di semua sistem operasi untuk JSP (java server pages).
3. script, merupakan script yang digunakan. untuk membuat web statis menggunakan client side scripting (HTML, XML, CSS style sheet, java script). untuk membuat web dinamis menggunakan  server side scripting (ASP, PHP, JSP).
4. database server, merupakan tempat penyimpan data dalam sebuah web. contohnya: MySQL, Microsoft SQL Server, Oracle, DB2 (IBM), PostgreSQL.
5. web editor, merupakan perangkat lunak yang digunakan untuk mengetikkan perintah-perintah script yang digunakan baik itu client side scripting ataupun server side scripting bahkan beberapa web editor dapat digunakan untuk mengatur layout/ tampilan halaman web secara instant. berikut contoh web editor: Notepad, Macromedia Dreamweaver, Ultra Edit, Adobe Go Live, NetBean.
6. image editor, merupakan perangkat lunak yang digunakan untuk mengelola gambar-gambar dan animasi yang nantinya akan digunakan didalam halaman web yang akan dibuat. berikut contohnya: adobe photoshop, corell draw, macromedia flash.

Read More