keep thinking

Terbaru

DASAR CSS

Untuk menambah pengetahuan kita tentang CSS disini saya menulis sedikit tentang dasar-dasar CSS.

Cascading Style Sheet atau yang biasa disebut dengan CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan. CSS biasa juga diartikan sebagai suatu teknik penulisan kode untuk memperindah dan mempermudah dalam pengkodean HTML dengan tujuan untuk memperindah tampilan situs.

Beberapa Keuntungan dari menggunakan CSS adalah pertama, memisahkan presentasi sebuah dokumen dari conten dokumen itu sendiri. Kedua, mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web. Dan yang ketiga adalah mempercepat proses rendering/pembacaan HTML.

Contoh format dasar penulisan CSS yaitu,

1. Misalkan untuk menulis sebuah dokumen web yang berjudul ‘Mari Belajar CSS’ maka ditulis dalam halaman notepad dengan format :

<html>

<head>

<title> Mari Belajar CSS </title>

</head>

<body>

</body>

</html>

Maka dalam dokumen web akan tertulis

Mari Belajar CSS

2.  Untuk mengisi dokumen web tersebut, maka teksnya di tulis                      diantara <body> teks </body>. Berikut contoh penulisan formatnya:

<html>

<head>

<title>…</title>

<body>

Hello

</body>

</html>

dan dalam dokumen web tampilannya sebagai berikut :

Hello

Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu dengan menggunakan External Style Sheet (file CSS berbeda dari file HTML), Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) dan Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan). Berikut adalah contoh format dengan menggunakan,

Tanpa CSS

<html>

<head>

<title>Belajar CSS</title>

</head>

<body>

<h1><font face=”Verdana”>Belajar CSS</font></h1>

</body>

</html>

Internal CSS

<html>

<head>

<title>Belajar CSS</title>

<style type=”text/css”>

h1 { font-family: verdana; }

</style>

</head>

<body>

<h1>Belajar CSS</h1>

</body>

</html>

External CSS

Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misalkan kita membuat file dan simpan dengan nama style.css dan isikan kode berikut:

h1 { font-family: verdana; }

Beberapa macam CSS

è  CSS Background

Property background

1. Background-color

Contoh:

Body {

Background-color : green;

}

2. Background-Image

Contoh:

Body {

Background-image : url(gambar1.jpg);

}

3. Background-attachment

Body {

Background-attachment : scroll;

}

4. Background-Repeat

Body {

Background-repeat : repeat;

Background-image : url(image/gambar1.jpg);

}

5. Background-position

Body {

Background-repeat : no-repeat;

Background-image : url(image/gambar1.jpg);

Background-position : bottom center

}

Contoh:

Format penulisannya :

<html>

<head>

<link href=`style.css`rel=¨stylesheet¨type=`text/css`>

</head>

<body>

Hello, Contoh Body

</body>

</html>

maka tampilan dalam dokumen web

è  CSS Font

Property Font

1. Font-family

P {

Font-family : Arial,Helvetica;

}

2. Font-size (satuan em,pt,px,mm,cm,%)

P {

Font-size : 24em;

}

3. Font-style (nilai : oblique,italic,normal)

P {

Font-style : oblique;

}

4. Font-variant (nilai : normal,small-caps)

P {

Font-family : Arial,Helvetica;

}

5. Font-weight (nilai :normal,bold,bolder,lighter,100-900)

P {

Font-weight : bolder;

}

è  CSS Teks

Property teks

1. Color

P {

color :red;

}

2. Teks-align (nilai left,right,center,justify)

P {

text-align :justify;

}

3. Text-decoration (nilai : none,underline,overline,line-through,blink)

P {

Text-decoration :overline;

}

Contohnya :

u  menggunakan tag <U>..</U>

<html>

<head>

<stylet type=text/css¨>

u {color=red}

</style>

</head>

<body>

<u>Mengapa kita harus bertengkar</u><br>sedangkan          kicau burung<u>bernyani merdu

</body>

</html>

Atau dengan menggunakan format,

<html>

<head>

<body>

<font color=red><u>Mengapa kita harus bertengkar</u>                    </font><br>sedangkan kicau burung<font color=red><u>                   bernyanyi merdu</font>

</body>

</html>

Maka hasilnya dalam dokumen web seperti di bawah ini

u  Menggunakan tag <u> =under line dan tag <i> = italic diberi        efek baru, yaitu warna merah hurufnya kemudian tag <b> = bold,       diberi efek warna hijau

Maka formatnya,

<html>

<head>

<style type=¨text/css¨>

I,u {color:red}

b {color:green}

</style>

</head>

<body>

P: mengapa jika kita anggap<i>suatu pekerjaan</i>itu mudah maka pekerjaan itu akan beneran menjadi<b>lebih mudah</b>?

<p>

J: karena itu merupakan<u>sugesti</u>terhadap<b>diri kita sendiri</b>

</body>

</html>

Dan pada dokumen web akan tampil seperti dibawah ini

4. Text-transform (nilai : none,capitalize,uppercase,lowercase)

P {

Text-transform : capitalize;

}

5. Letter-spacing

P {

letter-spacing : 20px;

}

6. Teks-indent

P {

Text-indent : 50px;

}

è  CSS List

Property list

1. List-style-type (nilai : disc,circle,square,lower-roman,upper-roman,none,lower-alpha,upper-alpha)

Ul {

List-style-type : disc ;

}

2. List-style-image (nilai : url,none)

Ul {

List-style-image : url(gambar1.jpg) ;

}

3. List-style-position (nilai : inside,outside)

Ul {

List-style-position : inside;

}

è  CSS Border

Property Border

1. Border-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset).

b1 {

Border-style-type : groove ;

}

2. Border-bottom-style (nilai : none,dotted,dashed,solid,double,groove,ridge,inset,outset).

b1 {

Border-bottom-style : groove ;

}

3. Border-bottom-width ().

b1 {

border-bottom-width :10px;

}

4. Border-bottom-color ()

b1 {

border-bottom-color :red;

}

semangat

mulai sekarang kita harus lebih giat lagi………. mulai dari belajar, makan minum, plus vitamin. tapi yang intinya ya… belajar, di jenjang terakhir bangku SMA ini kita harus lebih konsntrasi lagi belajarnya. tapi jangan lupa sama tugas-tugas segudang yang telah menanti. buat temen-temen, jangan loyo… tetap harus semangat. karna kita sudah dewasa jadi harus tau mana yang baik buat kita da mana yang tidak baik key. tetap   S  E  M  A  N  G  A  T  !

nb: nie di posting buat nambah postingan aja …………………………………………………………………….. khan yang penting  tetap S  E  M  A  N  G  A  T  !

pilem mbosenin

Pernah punya pikiran yang aneh2 gak. Misalnya km tu anak angkat atau anak pungut???. Hayo , jgn mikir yang anaeh aneh ya!!!!!!!!!!!!. Tapi kalau kita sampai bisa mikir kayak gitu berarti, jangan terlalu banyak nonton sinetron dunk. Karena pada umumnya sinetron yang punya cerita kayak gitu yah?, sinetron striping. Mungkin buat mempertahankan reting yang berada diatas.Tapi malah buat penonton bosan. Kalo boleh nanya nieh, bosen gak sich dengan sietron Indonesia yang mbuletisasi?????????????punya ide bikin film gimana?????. Buat pencinta TV khususnya pilem eh Film commend yuz, yah walau dikit tp berisi dunk

Ujian TIK gimana ya?

Buat aq soal TIK gak sulit sich, tapi kok bisa remidi ya? mungkin karena gak belajar aja ato mungkin masih bingung aja. Tapi menurut saya sich lebih dominan bingung karena gak belajar. Dan pada saat ulangan semester kemarin juga kebingungan, ya walaupun udah belajar.  Lagi pula yang saya pelajari juga gak ada yang keluar dalam soal. Jadi saya harus mencari jejak jawaban dengan panggil sana sini. Walau udah usaha ya tetep apa yang mau dikata kalau udah gak bisa ya udah. Kalau hasilnya dibawah standart ya udah khan masih banyak kesempatan lain kali. Iya khaaan

pupuk pertahananmu

met puasa yah jangan lupa kalo sahur yang banyak biar gak kelaparan. pupuk terus pertahananmu (ya salah satu dengan mengisi perut sebelum imsyak) padahal khan arus memperkuat iman ya. buat perang nanti (terlalu mendramasitir dech). semanagt yach gak boleh nyerah sampe’ titik darah penghabisan loh

salam sayang

gak tau kenapa hari ini aku kangen banget ma’ alm. ibu q (kakak dari ayah q). sebelum beliau meninggal pernah janji ma’ aq tuk jalan2 ke surabaya karena aq dah lima tahun gak pulang. tapi kok ia malah pergi gak kembali2 aq berdoa semoga ia bisa tenang di sana , di ampuni segala dosanya dan selalu ditemani dengan senyuman dan kasih sayang dari kami untuknya, ammmieeeeeeeeeeeeen. salam sayang ku untuk ibu q yang terbaik dan tersayang makasih dah ngasuh, nyayangin dan merawat q. kami disini selalu merindukanmu, ‘maaf aq gak bisa ziarah ya’.

gara2 lapar sholat q dipersingkat

gila bener2 gila masa’ kemarin pas sholat maghrib berjamaah cuman dua rakaat aja wah bener2 ngaco mungkin karena dah gak tahan nahan laper ampe’ sholat maghrib di persingkat jadi 2 rakaat he3x. belum sampe disitu aja ceritanya masih nyambung ampe terawih loh. waktu sholat terawih juga gara2 nungguin ayah jadi telat ke mesjid dech, gara2 telat yah gak kebagian tempat wah wah mujur amat sich hari ini. gara2 gak kebagian tempat didalam mesjid yah jadi sholat di luar dech ( alhamdulillah ademan diluar kok).