3. Syntax
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 warnamerah (red).
a. 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.
b. 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%.
c. 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.
d. 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;
}
2.4 3. Class dan Id selector
CLASS SELECTOR
Class
selector adalah penggabungan beberapa properties yang digunakan lebih dari satu
kali.
Cara penulisan Class
Selector:
.nama-class
{property:value;}
Untuk menempelkan class
ke dalam tag HTML:
taghtml.nama-class
{Property:value;}
Perhatikan tanda titik
di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar
kode HTML anda menggunakan tag <div
class=nama-class> dan di
akhiri dengan tag </div>.
Contoh:
Penulisan kode CSS:
.tengah
{text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Hasil:
Teks
tengah akan berwarna merah.
Tag H1 tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
ID SELECTOR
ID Selector mirip dengan
Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat
bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk
memformat bagian menu / sidebar.
Cara penulisan ID
Selector:
#nama-ID
{property:value;}
Untuk menempelkan ID
selector ke dalam tag HTML:
taghtml#nama-ID
{Property:value;}
Perhatikan tanda # di
setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode
HTML anda menggunakan tag <div
id=nama-ID> dan di akhiri
dengan tag </div>.
JAVA SCRIPT
1. Pengertian Java Sript
JavaScript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya
berjalan pada suatu dokumen HTML, bahasa ini adalah bahasa pemrograman untuk
memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan
pengeksekusian perintah-perintah di sisi user, yang artinya di sisi browser
bukan di sisi server web. Secara fungsional, JavaScript digunakan untuk
menyediakan akses script pada objek yang dibenamkan ( embedded ). Contoh
sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi
validasi pada form sebelum data dikirimkan ke server, merubah image kursor
ketika melewati objek tertentu.
2. Bentuk
skrip dari JavaScript
Skrip dari JavaScript terletak di dalam dokumen HTML. Kode tersebut tidak akan
terlihat dari dalam jendela navigator anda, karena diantara tag tertentu yang
memerintahkan navigator untuk memperlakukan bahwa skrip tersebut adalah skrip
dari JavaScript.Contoh dari skrip yang menunjukkan bahwa skrip tersebut adalah
skrip dari JavaScript adalah sebagai berikut:
<SRIPT language=”Javasript”>
Letakkan sript anda disini
</SRIPT>
<HTML>
<HEAD>
<TITLE>Skrip Javascript</TITLE>
</HEAD>
<BODY>
Percobaan memakai javaScript:<BR>
<SCRIPTLANGUAGE=”JavaScrip”>
<!–
document.write(“Sealamat Mencoba JavaScript<BR>”);
dokumen.write(“Semoga Sukses”);
//à
</SCRIPT>
</BODY>
</HTML>
3. Memberikan Komentar
Dalam JavaScript
Agar script tidak dibaca sebagai skrip, akan tetapi dibaca sebagai komentar dan
tidak akan dieksekusi sebagai program. Contohnya adalah sebagai berikut :
<SCRIPT language=”JavaSrcipt”>
<!–
Letakkan script anda disini
//à
</SCRIPT>
Kegunaannya antara lain adalah :
- Mengingatkan
kita akan bagian-bagian khusus didalam skrip tersebut, jika kita ingin
merubah sesuatu di dalamnya.
- Membuat
orang yang tidak mengerti skrip anda, menjadi mengerti dengan petunjuk-petunjuk
yang anda buat melalui komentar, kecuali anda tidak mau mensharing program
yang anda miliki.
4. Konsep
Variabel Dalam JavaScript
Variabel adalah suatu objek yang berisi data-data, yang mana dapat
dimodifikasiselam pengeksekusian program. Di JavaScript kita bias memberikan
nama variable dengan criteria berikut ini :
- Nama
variable harus dimulai oleh satu huruf (huruf besar maupun kecil) atau
satu karakter”_”.
- Nama
variable bias terdiri dari huruf-huruf, angka-angka atau karakter_dan
& (spasi kosong tidak diperbolehkan).
- Nama
variable tidak boleh memakai reserved word.
Pada JavaScript kita menggunakan system case
sensitive yang
artinya membedakan nama variable dengan huruf besar dan huruf kecil.
5. Mendeklarasikan
Variabel
Deklarasi variabel di JavaScript dapat kita lakukan dengan dua cara :
- Eksplisit : dengan menuliskan kata kunci var kemudian
diikuti dengan nama variable dan nilai dari variable : var test=”halo”.
- Implisit : dengan menuliskan secara langsung nama
dari variable dan diikuti nilai dari variabel : test=”halo”.
Navigator secara otomatis akan memperlukan pernyataan itu sebagai deklarasi
dari sebuah variable. Pengaksesan variable bergantung lokasi dimana dia
dideklarasikan :
Jika dia didelkarasikan di bagian awal dari skrip program, yang artinya sebelum
pendeklarasian semua fungsi, maka semua fungsi di dalam program bias mengakses
variabel ini, dan variable ini menjadi variabel global.
Jika dia dideklarasikan dengan menggunakan kata kunci var di
dalam suatu fungsi tertentu, maka variable itu hanya bias diakses dari dalam
fungsi tersebut, dan artinya variable ini tidak berguna bagi fungsi-fungsi yang
lain, dan kita sebut variabel ini menjadi variabel local.
Contoh Mendeklarasikan Variabel
<HTML>
<HEAD>
<TITLE>Contoh deklarasi variabel</TITLE>
</HEAD>
<BODY>
<SCRIPT language=”JavaScript”>
<!–
Var VariabelKu;
Var VariabelKu2=3;
VariabelKu=2;
Document.write(VariabelKu*variabelKu2);
//à
</SCRIPT>
</BODY>
</HTML>
Contoh Variabel Lokal dan Global
<HTML>
<HEAD>
<TITLE>Contoh variabel Lokal dan Global</TITLE>
</HEAD>
<BOBY>
<SCRIPT language=”Javascript”>
<!–
var a=12;
var b=4;
Function Perkalian Dengan2(b)
{var a=b*2;return a;}
Document.write(“Dua kali dari”,b,” adalah”,Perkalian Dengan2(b));
document.write(“Nilai dari a adalah “,a);
//à
</SCRIPT>
</BODY>
</HTML>
