July 2018 - Dr. Kone

Membuat layout web dengan CSS bagian 2

July 30, 2018

Kita akan lanjutkan pembuatan layout kita pada materi sebelum nya.

Dari gambar di atas kita akan mengubah background (yang berwarna abu-abu) dengan image.

Langkah pertama, seperti biasa kita harus membuat bagian-bagian elemen dahulu menggunakan division (div). Berikut ini adalah code dasar untuk setiap elemennya.

Contoh

<body> 
<div id="content"> 
 <div id="header"> 
 <h1>welcome to my site</h1> 
 </div> 
 
 <div id="menu"> 
 <div class="navigasi"> 
 <h3>Menu Navigasi A</h3> 
 <ul> 
 <li><a href="link1.htm">Link 1</a></li> 
 <li><a href="link2.htm">Link 2</a></li> 
 <li><a href="link3.htm">Link 3</a></li> 
 <li><a href="link4.htm">Link 4</a></li> 
 </ul>
</div> 
 
 <div class="navigasi"> 
 <h3>Menu Navigasi B</h3> 
 <ul> 
 <li><a href="link1.htm">Link 1</a></li> 
 <li><a href="link2.htm">Link 2</a></li> 
 <li><a href="link3.htm">Link 3</a></li> 
 <li><a href="link4.htm">Link 4</a></li> 
 </ul> 
 </div> 
 
 </div> 
 <div id="isi"> 
 <img src="sunset.jpg" class="gambar" /> 
 <p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
 bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini 
 adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian 
 isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
 bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini 
 adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian 
 isi. Ini adalah bagian isi. 
 </p> 
 
 <p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
 bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini 
 adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian 
 isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
 bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini 
 adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian 
 isi. Ini adalah bagian isi. 
 </p> 
 <p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
 bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini 
 adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian 
 isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
 bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini 
 adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian 
 isi. Ini adalah bagian isi. 
 </p> 
 </div> 
 
 <div id="footer"> 
 <p>Copyright &copy; 2007 by dr-kone.blogspot.com</p> 
 </div> 
</div> 
</body>

Seperti yang kita lihat pada code di atas, bahwa semua sel (header, isi, footer dan navigasi) merupakan bagian dari bagian content. Mengapa dimasukkan ke dalam bagian content? Hal ini dikarenakan kita akan membuat style untuk bagian tersebut, misalnya meletakkan di tengah halaman dan juga mengatur lebar bagian content nya.

Kita akan membuat style untuk body nya terlebih dahulu. Karena kita akan menambahkan efek background image pada seluruh halaman, maka berikut ini adalah stylenya

body { 
 background: url(background.jpg); 
 }

Dan hasilnya adalah

Selanjutnya kita akan membuat style untuk bagian content dengan mengatur lebarnya adalah 750 pixel dan berada di tengah halaman.

#content { 
 width: 750px; 
 margin: auto; /* membuat posisi di tengah */ 
 }

Hasilnya adalah

Saat nya memodifikasi bagian header. Kita akan membuat blok untuk headernya dengan menambahkan style berikut.

#header { 
 border:1px solid #000000; 
 background-color:#000000; 
 padding: 10px 
 } 
 
 
h1 { 
 color: #FFFFFF; 
 font-size: 40px; 
 }

Hasilnya

Apabila Anda merasa space antara text heading dengan tepi blok bawah dan atas terlalu lebar, dapat menggunakan line-height untuk mengaturnya. Semakin kecil nilai line-height maka akan semakin kecil spacenya.

h1 { 
 color: #FFFFFF; 
 font-size: 40px; 
 line-height: 5px; 
 }

Hasilnya

Selanjutnya kita akan membuat style untuk bagian footer beserta teks pada footernya.

#footer { 
 padding:10px; 
 border:1px solid #000000; 
 background-color:#CCCCCC; 
 
 } 
#footer p { 
 text-align: justify; 
 font-weight: bold; 
 }

Maka hasilnya seperti ini

Berikutnya, untuk bagian navigasi, bisa kita buat stylenya seperti di bawah ini.

#menu { 
 float:right; 
 }

Sedangkan untuk setiap class navigasi, kita buat style sebagai berikut:

.navigasi { 
 border:1px dashed #000; 
 margin-top: 10px; 
 padding: 10px; 
 background: yellow; 
 }

Perhatikan efek perubahan dari penggunaan style di atas pada gambar berikut ini.

Sekarang saatnya membuat style untuk bagian isi.

#isi { 
 width:550px; 
 margin-top: 10px; 
 margin-bottom:10px; 
 padding:10px; 
 border:1px solid #000; 
 background: white; 
 }

Lihat hasil style pada bagian isi pada gambar berikut ini.

Berikutnya style untuk image

.gambar { 
 float: left; 
 margin-top: 0px; 
 margin-right: 10px; 
 margin-bottom: 20px; 
 margin-left: 0px; 
 border: 1px solid #000000; 
 }

Gambar di atas adalah hasil menggambarkan posisi image setelah diberi efek style.

Sedangkan berikut ini adalah style untuk mengatur paragraf dalam bagian isi.

#isi p { 
 text-align: justify; 
 line-height: 18px; 
 margin-top: 0px; 
 }

Hasil akhir

Selesai, silahkan kalian ulangi dari awal materi-materi CSS sebelum nya.
Kita akan lanjutkan kembali tentang CSS dan masih banyak yang lainnya.

Baca juga
Lihat materi Lainnya➧

Membuat layout web dengan CSS

July 29, 2018

Pada pembahasan kali ini kita akan lebih jauh mengenal CSS, kita akan sedikit membahas penggunaan CSS dalam mendesain sebuah layout website.

Kelebihan CSS dalam layout web dibandingkan tabel adalah fleksibilitas dan juga lebih meminimalisasi jumlah byte file. Apabila Anda menggunakan tabel untuk mendesain layout, maka semakin banyak sel yang dibuat, akan semakin besar ukuran byte file dan akibatnya loading web pun membutuhkan waktu yang lebih lama.

Untuk membuat layout dengan CSS hal terpenting yang harus dilakukan adalah membagi elemen halaman ke dalam division-division tertentu.

Berikut ini adalah code halaman web yang belum dilayout tampilannya.

<html> 
<head> 
<title>Dasar-dasar layout</title> 
</head> 
<body> 
 <div id="header"> 
 <h1>welcome to my site</h1> 
 </div> 
 
 <div id="navigasi"> 
 <h3>Menu Navigasi</h3> 
 <ul> 
 <li><a href="link1.htm">Link 1</a></li> 
 <li><a href="link2.htm">Link 2</a></li> 
 <li><a href="link3.htm">Link 3</a></li> 
 <li><a href="link4.htm">Link 4</a></li> 
 <li><a href="link5.htm">Link 5</a></li> 
 <li><a href="link6.htm">Link 6</a></li> 
 </ul> 
 </div> 
 
 <div id="isi"> 
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMYB2UIp7ju3dTI6UCX11MlZFbMTEqNoD5ZnO2yvJ2n99DXd2UH3kJFWeZcb_vsM9jsNT_gEYXzmGLpgKPDpXTLzKrLnUITReqRle_zB9IGhq2_vdihNleu3YSlbwlh_XYbMh2owj-9kLb/s1600/PhotoGrid_1532235873165.png" /> 
 <p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
 bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. 
 Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
 bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. 
 Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
 bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. 
 Ini adalah bagian isi. Ini adalah bagian isi. 
 </p> 
 
 <p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
 bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. 
 Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
 bagian isi. Ini adalah bagian isi. Ini adalah bagian isi.
Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah 
 bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. 
 Ini adalah bagian isi. Ini adalah bagian isi. 
 </p> 
 </div> 
 
 <div id="footer"> 
 <p>Copyright &copy; 2007 by dr-kone.blogspot.com</p> 
 </div> 
 
</body> 
</html>

Tampilan kode di atas akan tampak seperti di bawah ini

Pada contoh ini kita akan membuat layout sebagai berikut :

Perhatikan desain di atas, terdapat 4 bagian sel yang akan kita buat. Sebaiknya untuk nama id pada masing-masing division diberi nama sesuai desain supaya mudah dipahami.
Untuk yang pertama, kita akan membuat sel untuk bagian header.

Berikut ini style untuk bagian header yang saya buat.

#header { 
 padding:10px; /* jarak teks dari tepi kotak */ 
 border:1px solid #000000; /* membuat garis tepi 1 pixel */ 
 background-color:#CCCCCC; /* membuat warna latar */ 
 }

Dengan style di atas, tampilan header sudah agak lebih bagus (lihat tampilan berikut)

Properti padding menyatakan jarak antara tepi sel dengan elemen yang ada di dalamnya.

Berikut contoh style lain dengan padding nya 40 pixel dan juga tipe garis bordernya putus-putus (dashed).

#header { 
 padding:40px; 
 border:3px dashed #000000; /* garis tepi putus-putus */ 
 background-color:#CCCCCC; 
 }

Maka hasilnya seperti berikut :

Kita kembalikan ke style yang header awal saja ya, karena contoh di atas hanya untuk menjelaskan penggunaan padding dan dashed. Style header yang kita gunakan adalah

#header { 
 padding:10px; 
 border:1px solid #000000; 
 background-color:#CCCCCC; 
 }

Sedangkan style untuk footernya dapat ditulis sebagai berikut:

#footer { 
 padding:10px; 
 border:1px solid #000000; 
 background-color:#CCCCCC; 
 }

Hasilnya akan seperti :

Selanjutnya kita buat style untuk bagian isi

#isi { 
 padding:10px; 
 border:1px solid #000; 
 }

Maka hasilnya akan seperti berikut

Untuk bagian navigasi, karena bagian tersebut ingin diletakkan di sebelah kanan, maka berikan properti float: right. Perhatikan style berikut

#navigasi { 
 float:right; 
 padding:10px; 
 border:1px solid #000; 
 background: yellow; 
 }

Efek penggunaan properti float: right dapat dilihat pada tampilan berikut ini.

Meskipun sudah diletakkan di sebelah kanan, ternyata bagian isi masih belum seperti yang diinginkan sesuai desain layout. Oleh karena itu kita atur lebar sel untuk bagian isi dengan properti width dan juga kita beri jarak sedikit antara sel isi dan footer dengan properti margin-bottom. Perhatikan style berikut:

#isi { 
 width: 830px; /* lebar elemen */
 margin-bottom:10px; 
 padding:10px; 
 border:1px solid #000; 
 }

Efek nya akan terlihat seperti berikut

Pada gambar di atas tampak, bahwa bagian isi sudah memiliki sel sendiri selebar 830 pixel dan ada sedikit jarak (10 pixel) dari footer.

Ada baiknya kita tambahkan sedikit jarak antar bagian navigasi dengan header, begitu pula dengan bagian isi. Untuk keperluan ini, gunakan properti margin-top. Supaya seimbang dengan yang lain, kita beri jarak 10 pixel.

#navigasi { 
 float:right; 
 padding:10px; 
 margin-top: 10px; 
 border:1px solid #000; 
 background: yellow; 
 }


#isi { 
 width: 810px; 
 margin-top: 10px; 
 margin-bottom:10px; 
 padding:10px; 
 border:1px solid #000; 
 }

Hasil perubahan di atas akan tampak seperti berikut

Langkah selanjutnya kita bermain-main sedikit dengan layout image nya. Masih ada space kosong yang besar di sebelah kanan image. Bagaimana jika kita meletakkan paragrafnya di sebelah kanannya.
Untuk keperluan ini, sebaiknya kita buat class untuk imagenya. Kenapa? Hal ini dilakukan supaya memudahkan pengaturan image-image yang lain. Seandainya terdapat lebih satu image yang disisipkan ke halaman web tersebut, maka kita tidak perlu repot-repot mengatur semuanya, melainkan tinggal memanggil class nya saja.
Nama class untuk image pada contoh ini, misalnya gambar.

<img src="sunset.jpg" class="gambar" />

Selanjutnya kita buat style pada class tersebut

gambar { 
 float: left; 
 margin-top: 0px; 
 margin-right: 10px; 
 margin-bottom: 10px; 
 margin-left: 0px; 
}

Maka hasilnya

Apabila kita ingin membuat teks paragraf bagian isi memiliki alignment justify, maka dapat kita buat stylenya.

#isi p { 
 text-align: justify; 
 line-height: 22px; 
 }

Properti line-height digunakan untuk mengatur jarak antar baris teks paragraf. Perhatikan efek penggunaan style tersebut dalam gambar berikut

Agar gambar dan text sejajar kita ubah lagi style nya menjadi

#isi p { 
 margin-top: 0px; 
 text-align: justify; 
 line-height: 20px; 
 }

Maka hasilnya

Untuk gambar yang lebih banyak kita bisa manfaatkan class pada bagian paragraf dan image

Untuk selanjutnya kita akan lebih membahas tentang CSS secara mendalam.
Silahkan kalian hapal dahulu materi lain sebelumnya.

Baca juga
Lihat materi Lainnya➧

Membuat text decoration dengan CSS

July 29, 2018

Anda dapat membuat text decoration seperti underline, overline, line-trough, maupun blink dengan properti text-decoration : option;

dengan option dapat diganti dengan underliner, overline, line-trough atau blink. Untuk melihat perbedaannya, perhatikan contoh berikut.

Contoh:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css"> 
 
#heading1 { 
 text-decoration : blink; /* membuat teks berkelap kelip */ 
 } 
#heading2 { 
 text-decoration : line-through; 
 /* membuat garis ditengah text/ dicoret */ 
 } 
#heading3 { 
 text-decoration : underline; /* membuat garis bawah */ 
 } 
 
#heading4 { 
 text-decoration : overline; /* membuat garis di atas text */ 
 } 
</style> 
</head> 
<body> 
<h1 id="heading1">Ini Judul Heading 1</h1> 
<h1 id="heading2">Ini Judul Heading 2</h1> 
<h1 id="heading3">Ini Judul Heading 3</h1> 
<h1 id="heading4">Ini Judul Heading 4</h1> 
</body> 
</html>

Tampilan dari code di atas adalah sebagai berikut, akan tetapi untuk efek blink pada heading 1 tidak kelihatan ketika di screen shot.

Silahkan kalian coba contoh di atas untuk mengetahui lebih jelasnya.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Membuat drop cap menggunakan CSS

July 25, 2018

Setelah sebelumnya kita mempelajari text case, kali ini kita akan membahas cara membuat drop cap.

Drop cap di gunakan untuk mempercantik tampilan paragraf di huruf yang pertamanya.

Berikut ini contoh penulisan style nya :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css"> 
p.styleku:first-letter { 
 float: left; 
 font-family: "Lucida Grande"; 
 font-size: 80px; 
 } 
p { 
 text-align : justify; 
 } 
</style> 
</head> 
<body> 
<h1 id="heading1">Ini Judul Heading 1</h1> 
<p class="styleku">Bagian ini adalah paragraf. Bagian ini adalah 
paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf. 
Bagian ini adalah paragraf. Bagian ini adalah paragraf. Bagian ini 
adalah paragraf. Bagian ini adalah paragraf. Bagian ini adalah 
paragraf. Bagian ini adalah paragraf. Bagian ini adalah paragraf. 
Bagian ini adalah paragraf. Bagian ini adalah paragraf. </p> 
</body> 
</html>

Hasilnya seperti berikut

p.styleku:first-letter {
float: left;
font-family: "Lucida Grande";
font-size: 80px;
}

Code style di atas hanya akan berlaku untuk huruf pertama dari paragraf yang memiliki class styleku, dalam hal ini adalah huruf B. Sedangkan properti float digunakan untuk mengatur posisi huruf B tersebut, apakah di sebelah kiri atau kanan, sehingga valuenya adalah left. Apabila value yang dipilih adalah right, maka berikut ini tampilannya:

Selanjutnya kita akan mempelajari cara membuat layout dengan CSS.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Mengubah text case dengan CSS

July 23, 2018

Dengan menggunakan CSS, Anda dapat pula mengubah suatu teks menjadi huruf kecil semua (lowercase), besar semua (uppercase), atau capitalize (hanya huruf pertama dari kata yang dibuat besar). Hal ini dilakukan dengan menggunakan properti

text-transform : option;

dengan option dapat diganti dengan lowercase, uppercase, atau capitalize.

Contoh:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css"> 
#heading1 { 
 text-transform : uppercase; 
 } 
#heading2 { 
 text-transform : lowercase; 
 } 
#heading3 { 
 text-transform : capitalize; 
 } 
 
</style> 
</head> 
<body> 
<h1 id="heading1">Ini Judul Heading 1</h1> 
<h1 id="heading2">Ini Judul Heading 2</h1> 
<h1 id="heading3">Ini Judul Heading 3</h1> 
</body> 
</html>

Maka hasilny

Selanjutnya kita akan akan membahas tentang cara membuat drop cap.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Alignment text dengan CSS

July 23, 2018

Kali ini kita akan membahas perataan text (alignment).

Ada pula di antara nya adalah seperti left, center, right dan justify.

Sintak nya :

text-align : jenis;

dengan value jenis dapat digantikan dengan left, center, right dan justify.
Contoh

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css"> 
#p1 { 
 text-align : center; 
 } 
#p2 { 
 text-align : justify; 
 } 
#p3 { 
 text-align : right; 
 } 
 
</style> 
</head> 
<body> 
<h1>Ini Judul Heading</h1> 
<p id="p1">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah 
paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah 
paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah 
paragraf 1. Ini adalah paragraf 1. </p> 
<p id="p2">Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah 
paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah 
paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah 
paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> 
<p id="p3">Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah 
paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah
paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah 
paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. </p> 
</body> 
</html>

Maka hasilnya :

Jenis perataan yang digunakan pada contoh di atas adalah rata tengah untuk paragraf pertama, rata kanan kiri (justify) untuk paragraf kedua dan rata kanan untuk paragraf ketiga.

Selanjutnya kita akan membahas tentang cara mengubah text case.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Membuat text indent menggunakan CSS

July 23, 2018

Text indent adalah text pada awal paragraf yang menjorok ke dalam kalimat.

text-indent : jarak;

Contoh

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css"> 
p { 
 text-indent : 40px; 
 } 
 
</style> 
</head> 
<body> 
<h1>Ini Judul Heading</h1> 
<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. </p> 
<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. </p> 
</body> 
</html>

Maka hasilnya akan sperti ini :

Contoh di atas kita membuat jarak text indent sebesar 40px dari tepi batas.

Selanjutnya kita akan mempelajari tentang text alignment (perataan text).
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Mengatur jarak spasi antar Text

July 23, 2018

CSS juga dapat di gunakan untuk mengatur spasi antar text, perhatikan contoh berikut :

Pada judul heading terlihat bahwa antar kata dan huruf terdapat jarak tertentu. Jarak tersebut diatur dengan menggunakan properti sbb:
word-spacing : jarak;
letter-spacing : jarak;

Properti pertama di atas digunakan untuk mengatur jarak antar kata, sedangkan yang kedua untuk mengatur jarak antar huruf.
Sebagai contoh, berikut ini code yang menghasilkan tampilan di atas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css">
h1 { 
 word-spacing: 20px; 
 letter-spacing: 15px; 
 } 
 
</style> 
</head> 
<body> 
<h1>Ini Judul Heading</h1> 
<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. </p> 
<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. </p> 
</body> 
</html>

Simpel bukan, selanjutnya kita akan pelajari tentang text indent.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Mengubah warna background teks dengan CSS

July 22, 2018

Apabila Anda ingin mengubah warna background text, maka berikut ini adalah propertinya:

background : warna;

cara penulisan value dari warna sama dengan color, yaitu dapat berupa nama eksplisit warna yang diinginkan maupun kode hexadesimalnya.

Contoh:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css"> 
body { 
 background : green; 
 } 
 
p.styled { 
 font-family: "Palatino Linotype"; 
 font-size: 20px; 
 color: #FF0000; 
 background: #FFFFFF; /* warna putih */ 
 } 
p { 
 color: orange; 
 font-weight: bold; 
background: #000000; /* warna hitam */ 
 } 
 
</style> 
</head> 
<body> 
<p class="styled">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini 
adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini 
adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini 
adalah paragraf 1. Ini adalah paragraf 1. </p> 
<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. </p>
<body>
<html>

Pada contoh di atas, bagian body diberi warna background (seluruh halaman), namun kecuali untuk bagian paragraf. Paragraf pertama diberi warna background putih sedangkan paragraf kedua diberi warna hitam.

Berikut ini tampilan di browser:

Selanjutnya kita akan pelajari bagaimana mengatur jarak spasi antar teks.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Mengubah warna teks menggunakan CSS

July 22, 2018

Untuk mengubah warna font, propertinya adalah:

color : warna;

dengan value warna diisikan dengan warna yang diinginkan, dapat berupa kode hexadesimalnya, maupun nama eksplisitnya.

Contoh:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css"> 
p.styled1 { 
 font-family: "Palatino Linotype"; 
 font-size: 20px; 
 color: #FF0000; 
 } 
p.styled2 { 
 color: green; 
 } 
 
</style> 
</head> 
<body> 
<p class="styled1">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini 
adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini 
adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini 
adalah paragraf 1. Ini adalah paragraf 1. </p> 
<p class="styled2">Ini adalah paragraf 2. Ini adalah paragraf 2. Ini 
adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini 
adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. Ini 
adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> 
</body> 
</html>

Paragraf pertama pada contoh di atas akan diberikan style text berwarna merah (#FF0000) sedangkan paragraf kedua berwarna hijau (green).
Hasilnya sebagai berikut :

Selanjutnya kita akan membahas tentang cara mengubah background teks dengan menggunakan CSS.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Mengatur jarak Baris menggunakan CSS

July 22, 2018

Di sini kita akan mempelajari bagaimana mengatur jarak baris dalam suatu paragraf.

Berikut ini adalah nama properti nya
line-height : size;

dengan size diisi angka yang menyatakan ukuran disertai satuannya.

Contoh:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css"> 
p.styled { 
 line-height: 30px; 
 } 
 
</style> 
</head> 
<body> 
<p class="styled">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini 
adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini 
adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini 
adalah paragraf 1. Ini adalah paragraf 1. </p> 
<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. </p> 
</body> 
</html>

Paragraf pertama diberikan style untuk mengatur jarak antar baris sebesar 30 pixel, sedangkan paragraf kedua memiliki jarak baris default. Perhatikan perbedaannya pada tampilan berikut ini

Setelah ini kita akan pelajari bagaimana merubah warna teks.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Mengatur ukuran font menggunakan CSS

July 21, 2018

Pengaturan ukuran font dapat dilakukan dengan style yang menggunakan properti

font-size : size;

dengan size di isi angka yang menyatakan ukuran disertai satuannya.

Contoh:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css"> 
p.styled { 
 font-size: 20px; /* membuat font berukuran 20 pixel */ 
 } 
 
</style> 
</head> 
<body> 
<p class="styled">Ini adalah paragraf 1. Ini adalah paragraf 1. Ini 
adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini 
adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini 
adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini 
adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. Ini 
adalah paragraf 1. </p> 
<p>Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
Ini adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. 
</p> 
</body> 
</html>

Pada contoh di atas, paragraf pertama berukuran 20 pixel sedangkan paragraf kedua berukuran normal (default). Sebagai catatan, teks berukuran 16px secara dafault.
Hasilnya tampak berikut ini

Selanjutnya kita akan pelajari bagaimana mengatur jarak baris dalam paragraf menggunakan CSS.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Membuat teks Bold dengan CSS

July 21, 2018

Kita akan membahas bagaimana menggunakan CSS untuk membuat teks bold (bercetak tebal).

Untuk membuat teks tebal atau bold, properti yang digunakan adalah

font-weight : bold;

Contoh:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css"> 
p { 
 font-family: arial; 
 font-style: italic; 
 font-weight: bold; 
 } 
 
</style> 
</head> 
<body> 
<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
</p> 
</body> 
</html>

Hasilnya akan seperti ini :

Berikutnya kita akan pelajari cara mengubah ukuran dari font dengan CSS.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Membuat teks italic dengan css

July 21, 2018

Membuat teks italic dapat pula dilakukan melalui style. Berikut ini cara penulisannya

font-style : italic;

Contoh:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css"> 
p { 
 font-family: arial; 
 font-style: italic; 
 } 
 
</style> 
</head> 
<body> 
<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
</p> 
</body> 
</html>

Maka hasilnya akan seperti ini :

Font di atas akan menghasilkan jenis font arial yang bercetak miring.

Selanjutnya kita akan membahas menggunakan teks tebal/bold dengan CSS.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Style untuk font family

July 21, 2018

Font family digunakan untuk menentukan jenis huruf/font pada suatu tampilan teks.

Berikut ini adalah nama properti dan penulisan valuenya:

font-family: name;

dengan name adalah jenis font yang Anda inginkan.
Contoh:
p {
font-family: arial;
}

Anda juga dapat memberikan jenis font lebih dari satu yang dipisahkan dengan koma.
Contoh:
p {
font-family : "arial black", arial, "Times New Roman";
}

Maksud dari style di atas adalah bahwa jenis font arial black akan diprioritaskan untuk digunakan. Namun apabila font tersebut tidak disupport oleh browser maka yang digunakan arial, begitu seterusnya.

Sebagai catatan, untuk jenis font yang terdiri dari lebih satu kata harus diapit dengan tanda petik ganda (double quotes).

Setelah ini kita lanjut ke halaman berikutnya membahas italic pada CSS.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Penulisan CSS Eksternal

July 21, 2018

Pada bagian bagian sebelumnya kita hanya menggunakan cara penulisan CSS internal.

Sekarang kita akan membahas mengenai penulisan CSS di file terpisah (eksternal).

Contoh

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<style type="text/css"> 
p { 
 color: #FFFFFF; 
 font-family: arial; 
 background: #FF0000; 
 font-weight: bold; 
 } 
p.group { 
 color: #FF0000; /* membuat warna text putih */ 
 font-family: arial; 
 background: #FFFFFF; /* membuat background putih */ 
 } 
 
p#one { 
 color: blue; 
 font-family: "times new roman"; 
 } 
</style> 
</head> 
<body> 
<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. </p> 
<p class="group">Ini adalah paragraf 2. Ini adalah paragraf 2. Ini 
adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> 
<p class="group" id="one">Ini adalah paragraf 3. Ini adalah paragraf 3. 
Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. 
</p> 
</body> 
</html>

Anda dapat menaruh CSS yang ada dalam code di atas ke dalam file tertentu, dengan harapan file CSS itu dapat digunakan oleh halaman web yang lain. File CSS inilah yang disebut CSS eksternal yang memiliki file extension .css

Sebagai contoh kita simpan CSS dalam file style.css

style.css

p { 
 color: #FFFFFF; 
 font-family: arial; 
 background: #FF0000; 
 font-weight: bold; 
 } 
p.group { 
 color: #FF0000; /* membuat warna text putih */ 
 font-family: arial; 
 background: #FFFFFF; /* membuat background putih */ 
 } 
 
p#one { 
 color: blue; 
 font-family: "times new roman"; 
 }

Setelah itu kita akan mengintegrasikan file CSS tersebut ke dalam halaman web kita dengan cara memberikan perintah

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

Pada bagian header halaman web kita.
Contoh lengkapnya seperti :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS Guide</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1. 
Ini adalah paragraf 1. Ini adalah paragraf 1. </p> 
<p class="group">Ini adalah paragraf 2. Ini adalah paragraf 2. Ini 
adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p> 
<p class="group" id="one">Ini adalah paragraf 3. Ini adalah paragraf 3. 
Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3. 
</p> 
</body> 
</html>

Dengan konsep ini, Anda dapat menggunakan CSS eksternal yang berasal dari situs web lain untuk mengatur style halaman web Anda, dengan cara menambahkan URL secara lengkap pada atribut href nya.

Untuk melihat artikel/materi lainnya silahkan masuk di sini

Value pada CSS

July 21, 2018

Pada bagian ini kita akan membahas tentang aturan penulisan value, ada beberapa jenis value yang dapat di berikan pada properti style, Antara lain berupa predefined value, bilangan, prosentase, url, dan juga warna.

Predefined Value

Predefined value merupakan nilai yang sudah terdefinisikan oleh (X)HTML. Nilai ini dapat dipilih dari beberapa alternatif pilihan yang ada. Contoh penggunaan predefined value ini adalah pada style berikut

h1 {

font-style : italic;

}

Style di atas digunakan untuk membuat text miring pada elemen heading 1. Dalam hal ini value ‘italic’ merupakan predefined value. Untuk properti font-style terdapat pilihan value yang telah didefinisikan oleh (X)HTML yaitu italic, normal, dan oblique.

Perhatikan bahwa predefined value ditulis tanpa diapit tanda petik.

Bilangan

Suatu value dapat pula berupa bilangan tertentu (tanpa satuan apapun). Berikut ini contohnya:

p {

line-height : 2;

}

Maksud style di atas adalah mengatur jarak antar baris paragraf menjadi 2 kali dari ukuran fontnya.

Panjang, Besar dan Prosentase

Untuk menyatakan panjang, besar dan prosentase, value harus diberikan satuan seperti px (pixel), in (inch), cm (centimeter), mm (milimeter), pt (points) dan pc (picas). Berikut ini beberapa contohnya

h1 {

font-size : 20px; /* membuat ukuran font 20 pixel */

}

hr {

width : 20%;

/* membuat garis horizontal dengan panjang 20% terhadap lebar jendela browser */

}

URL

Sebuah value juga dapat berupa URL. Berikut ini contohnya :

body

{

background : url(img/image.jpg);

}

Style di atas untuk memberi background image pada body yang diambil dari folder img dengan nama file image.jpg.

Warna

Untuk memberi value berupa warna pada properti, ada beberapa cara yang dapat

dilakukan yaitu dengan menuliskan secara eksplisit warna yang diinginkan, misal (red,

green, yellow, dll) atau dengan menuliskannya dalam kode hexadesimal. Berikut ini

contohnya

{

color : red;

}

{

color : #FF0000; /* identik dengan warna merah (hexadesimal) */

}

Selanjutnya kita akan membahas tentang CSS eksternal dan bagaimana penulisannya.
Untuk melihat artikel/materi lainnya silahkan masuk di sini

Predefined Value

Bilangan

Panjang, Besar dan Prosentase

URL

Warna

Inside Post