Majalah Web » Tutorial http://majalahweb.com Majalah tentang Web dalam format Web Wed, 28 Dec 2011 12:47:50 +0000 en hourly 1 http://wordpress.org/?v= Menggunakan pattern sebagai background website http://majalahweb.com/2011/12/menggunakan-pattern-sebagai-background-website/ http://majalahweb.com/2011/12/menggunakan-pattern-sebagai-background-website/#comments Wed, 28 Dec 2011 10:06:24 +0000 Audee Mirza http://majalahweb.com/?p=68 Ada banyak cara untuk membuat tampilan sebuah website menarik. Bisa dengan menambahkan illustrasi, menggunakan font yang unik, menggunakan komposisi warna berbeda dengan yang lain, dan lain sebagainya. Satu cara yang lainnya adalah dengan menggunakan pattern. Menggunakan pattern terutama yang bermotif lembut dan transparan sebagai background (latar belakang) suatu website saat ini juga sedang menjadi trend dan hari ini kita akan membahas sedikit tentang penggunaan pattern untuk mempercantik tampilan website.

Pattern sebagai background website

Pattern sebagai background website

Apa saja yang perlu disiapkan?

Digital Pattern

Pertama-tama tentu saja Anda harus menyiapkan pattern. Ada beberapa website yang menyediakan pattern gratis. Anda bisa mengunjungi artikel berikut:

Segera download gambar pattern yang Anda rasa cocok untuk background website Anda melalui situs penyedia pattern gratis yang Anda sukai.

Selain tersedia dalam format Photoshop Pattern (.PAT), pattern gratis biasanya juga tersedia dalam format grafis digital, berupa .PNG, .JPG, atau .GIF yang umumnya berdimensi kecil. Khusus untuk background website, akan lebih praktis jika kita menggunakan pattern berformat grafis digital.

CSS

Jika Anda sudah membaca artikel MajalahWeb sebelumnya yaitu: Pengenalan CSS dan CSS Selector, Anda pasti sudah tidak asing dengan penerapan CSS dalam web design.
Setelah Anda mengupload file pattern (contoh nama file: pattern.png) di dalam folder images misalnya, atau mengupload di layanan penyimpan foto/grafis gratisan seperti Photobucket, maka Anda dapat menentukan URL dari file pattern Anda ke dalam property background sbb.:

body {
	background-image: url (images/pattern.png);
}

atau jika Anda mengupload pattern ke account Photobucket, maka url pattern misalnya (sebagai contoh) akan menjadi sbb:

body {
	 background-image:('http://1234.photobucket.com/gambar/pattern.png');
}

HTML

Setelah menyiapkan code CSS, salin kode HTML berikut:

<html>
<head>
<title>Menggunakan pattern sebagai background website</title>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
</head>
<body>
    <div id="container">
       <p>Paragraph Text</p>
    </div>
</body>
</html>

Untuk lebih jelasnya, lihat halaman Demo dan Anda juga dapat mendownload File Demo Tutorial untuk segera bereksperimen dengan berbagai pattern.

]]> http://majalahweb.com/2011/12/menggunakan-pattern-sebagai-background-website/feed/ 0 CSS Selector http://majalahweb.com/2009/04/css-selector/ http://majalahweb.com/2009/04/css-selector/#comments Sun, 05 Apr 2009 06:13:03 +0000 Permana Jayanta http://majalahweb.com/?p=41 Pada artikel sebelumnya tentang CSS Syntax disebutkan bahwa salah satu bagian CSS adalah selector. Pada CSS, terdapat 3 macam selector, yaitu ID, class, dan tag HTML.

Contoh kode CSS

Contoh kode CSS

Selector ID diawali dengan tanda #, selector class diawali dengan tanda . (dot), sedangkan selector tag HTML tidak memerlukan tanda awalan apapun. Cukup dengan mengetikkan langsung nama tag HTMLnya. Pada tutorial ini akan dijelaskan semua hal yang berhubungan dengan CSS Selector.

Selector Class

Sebuah selector class dapat digunakan pada lebih dari satu tag HTML. Masukkan style CSS dalam selector class jika terdapat 2 atau lebih elemen/tag HTML yang bisa memiliki style yang sama dalam satu halaman.

Contoh kode selector class:

[code lang='css']
.post{
background-color:#cdcdcd;
}
[/code]

Kode HTML untuk menggunakan selector class:

<div class="post"> ... teks ... </div>

Class .post bisa digunakan lebih dari 1 kali pada sebuah halaman. Contoh nyatanya adalah blog-blog yang dibuat dengan WordPress (baik wordpress.com ataupun wordpress.org). Coba buka halaman awal sebuah blog wordpress dan lihat kode HTML halaman tersebut (pada Firefox: View > Page Source). Kemudian cari kata (CTRL+F) class="post", maka akan ditemukan lebih dari satu hasil pencarian.

Selector ID

Kebalikan dari selector class, selector ID hanya boleh digunakan sekali pada satu halaman.

Contoh kode selector ID:
[code lang='css']
#header{
background-color:silver;
padding:5px;
}
[/code]

Kode HTML untuk menggunakan selector ID:

<div id="header"> majalahweb.com </div>

Selector ID digunakan hanya untuk 1 elemen pada satu halaman web. Misalnya saja ID #header diatas hanya digunakan sekali karena dalam satu halaman web hanya ada 1 header.

Jika Anda seorang programmer, ID dalam HTML ibaratnya sebuah variabel dalam sebuah pemrograman. Jika dalam pemrograman tidak boleh ada 2 variabel yang memiliki nama yang sama dalam suatu blok kode, begitu juga dengan HTML yang tidak boleh ada elemen yang memiliki nama ID yang sama pada satu halaman web.

Selector HTML

Berbeda dengan selector ID dan selector class, selector HTML akan mempengaruhi tag HTML yang diberi style. Untuk lebih jelasnya, berikut contoh kodenya:
[code lang='css']
p {
font-family: Arial;font-size:10pt;
}
[/code]
Kode diatas akan membuat semua tag <p> (paragraf) agar ditampilkan menggunakan font Arial dengan ukuran 10pt (point). Jadi tidak perlu menambahkan atribut id="nama_id" ataupun atribut class ="nama_class" karena browser secara otomatis akan mencari tag yang akan diberi style.

Bermain dengan selector

Masih ada banyak cara untuk memanfaatkan selector pada CSS. Coba lihat beberapa contoh berikut:
[code lang='css']
#header p {
font-family:Georgia;
}
h1.title {
font-size:large;
}
[/code]

Pada contoh pertama bisa berarti bahwa style tersebut akan berlaku pada semua tag <p> yang ada didalam ID #header. Contoh kode HTMLnya:

<div id="header"><p>teks teks</p></div>

Sedangkan pada contoh kedua style akan berlaku pada semua tag h1 yang memiliki class title. Contoh kode HTMLnya:

<h1 class="title">Judul title</h1>

Selector lainnya

Sedikit melangkah ke tingkat lanjut, selain 3 selector utama diatas (yang lebih umum dipakai) masih terdapat beberapa macam selector, yaitu:

Selector universal

Universal selector yang dimaksud disini adalah selector yang menggunakan tanda *. Contoh kode CSS:
[code lang='css']
* {
line-height:1.5em;
}
blockquote{
font-family:Verdana;
}
blockquote * {
font-family:"Times New Roman";
}
[/code]

Tanda * (asterisk) mengacu pada semua element. Jadi, pada blok kode yang pertama bisa berarti bahwa “spasi antar baris pada semua elemen akan berukuran 1.5em“.

Pada style yang kedua, potongan kode ini bisa berarti “semua teks didalam blockquote akan ditampilkan dengan font Verdana“. Sedangkan pada style yang ketiga, tanda * berada setelah selector HTML blockquote. Potongan kode ini bisa berarti “semua teks pada elemen yang berada didalam blockquote akan ditampilkan dengan font Times New Roman“. Untuk lebih jelas, berikut contoh penggunaan dalam kode HTML:

<blockquote>Halo dunia <span>Ketikkan
sebuah kode</span> halo dunia lagi.</blockquote>

Sesuai dengan kode HTML diatas, teks yang berada didalam tag <span> akan ditampilkan menggunakan font Times New Roman, sedangkan sisanya ditampilkan menggunakan font Verdana.

Selector atribut

Selector atribut memungkinkan kita untuk mengaplikasikan sebuah style pada elemen HTML tertentu dengan atribut tertentu.

Sebagai contoh, sebuah style hanya untuk diaplikasikan pada tag hyperlink (<a>) yang memiliki atribut href, jadi tag hyperlink yang tidak memiliki atribut href tidak akan mengikuti style yang sudah ditentukan. Contoh kodenya :
[code lang='css']
a[href] {
color:green;
}
a[name] {
color:red;
}
[/code]

Berikut contoh dalam kode HTML:

<a href=http://majalahweb.com/halamancontoh.html>Halaman contoh</a>
<a name="bab2">Bab 2</a>

Pada contoh tag hyperlink yang pertama, teks akan berwarna hijau, mengikuti style a[href]. Sedangkan pada tag hyperlink yang kedua, teks akan berwarna merah, mengikuti style a[name].

Selector atribut dengan pencocokan nilai atribut

Selain itu, dengan selector atribut juga dimungkinkan untuk mengaplikasikan style pada suatu elemen HTML dengan nilai atribut tertentu. Untuk lebih jelasnya, berikut contoh kode CSS:
[code lang='css']
a[href="http://majalahweb.com"] {
color:yellow;
}
[/code]

Dan contoh kode HTML:

<a href=http://majalahweb.com>Warna kuning</a> <a href=http://yahoo.com>Entah warna apa</a>

Hasilnya adalah hanya hyperlink yang menuju ke majalahweb.com saja yang akan memiliki teks berwarna kuning.

Selector atribut dengan mencocokkan sebagian nilai atribut

Mengaplikasikan style CSS ke elemen HTML juga bisa dilakukan dengan melakukan pencocokan sebagian nilai dari atribut. Untuk lebih jelasnya, berikut kode CSSnya:
[code lang='css']
span[class~="error"] {
background-color:red;
}
[/code]

Style CSS diatas akan diaplikasikan pada elemen span yang nama classnya memiliki kata error. Misalnya : <span class="error login"> .. teks .. </span>, atau <span class="error register"> .. teks .. </span>..

Selector pseudo-element

Selector pseudo-element digunakan untuk menambahkan efek tertentu pada sebuah selector. Jika Anda bingung dengan istilah pseudo-element, jangan terlalu dipikirkan. Untuk sekarang terima dulu kata pseudo-element sebagai sebuah istilah dalam CSS. Syntax dari penggunaan pseudo-element adalah sebagai berikut:
[code lang='css']
selector:nama_pseudo-element {
property:value;
}
[/code]
Atau bisa juga dengan manambahkan nama class setelah nama selector, menjadi:

selector.class:nama_pseudo-element {
    property:value;
}

Berikut adalah beberapa nama pseudo-element:

  • :first-line. Memberikan style tertentu pada baris pertama dalam sebuah teks.
  • :first-letter. Memberikan style tertentu pada huruf pertama pada sebuah teks.
  • :before. Menambahkan sebuah content sebelum nama elemen yang dijadikan selector.
  • :after. Menambahkan sebuah content sesudah nama elemen yang dijadikan selector.

Pseudo-element :before dan :after tidak bekerja pada browser Internet Explorer (sewaktu tutorial ini dicoba menggunakan Internet Explorer 6 ). Berikut contoh style CSS yang menggunakan pseudo-element:

p:first-line{
    text-transform:uppercase;
}

Kode HTML:

<p>Ini adalah elemen paragraf yang menggunakan pseudo-element.</p>

Pada contoh diatas, browser akan menampilkan baris pertama dengan huruf besar. Jika ukuran browser Anda lebar dan menampilkan semua teks dalam satu baris, maka semua teks akan ditampilkan huruf besar. Untuk melihat efek dari style CSS diatas, coba resize ukuran browser menjadi lebih sempit sehingga teks pada paragraf tersebut dipisah menjadi 2 baris.

Beberapa yang perlu diingat, pseudo-element :first-line hanya bisa diaplikasikan pada element yang bersifat block-level. Pada tutorial berikutnya akan saya jelaskan apa itu block-level element. Beberapa properties yang bisa diaplikasikan pada pseudo-element :first-line adalah sebagai berikut: font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear.

Contoh berikutnya adalah pseudo-element menggunakan :first-letter:
[code lang='css']
p:first-letter{
font-size:16pt;
}
[/code]
Style CSS diatas akan menampilkan huruf pertama dari sebuah paragraf dengan ukuran 16 point.
[code lang='css']
div.feed:before{
content:url(feed-icon.png);
}
div.feed:after{
content:url(feed-icon.png);
}
[/code]
Style diatas akan diaplikasikan pada kode HTML seperti dibawah ini:

<div class=”feed”>Berlangganan feed</div>

Hasilnya adalah sebuah teks “Berlangganan feed” dimana sebelum (:before) dan sesudah (:after) teks tersebut akan ditambahkan gambar feed-icon.png. Seperti yang sudah disebutkan sebelumnya, :before dan :after tidak akan bekerja pada browser Internet Explorer (saat dicoba versi 6).

Sumber penjelasan tentang pseudo-element:

Selector pseudo-class

Syntax dari pseudo-class sama dengan syntax pseudo-element, yaitu:
[code lang='css']
selector:nama_pseudo-class {
property:value;
}
[/code]
Atau bisa juga:
[code lang='css']selector.class:nama_pseudo-class {
property:value;
}
[/code]
Berikut beberapa nama-nama pseudo-class:

  • :link. Memberikan style pada link yang belum dikunjungi.
  • :visited. Memberikan style pada link yang telah dikunjungi.
  • :hover. Memberikan style pada elemen yang disorot oleh pointer/mouse.
  • :active. Memberikan style pada elemen yang berada pada keadaan diaktifkan.
  • :focus. Memberikan style pada elemen ketika elemen tersebut menerima focus.
  • :first-child. Memberikan style pada elemen anak pertama pada dari elemen lainnya.
  • :lang. Menentukan bahasa yang digunakan pada elemen tersebut.
Bermain dengan link

Dengan pseudo-class :link, :visited, :hover, dan :active, kita bisa menambahkan efek pada sebuah link. Misalkan ada sebuah kode CSS seperti berikut:
[code lang='css']
a:link{
color:orange;
}
a:visited{
font-style:italic;
}
a:hover{
font-weight:bold;
}
a:active{
color:blue;
}
[/code]
Style diatas akan diaplikasikan pada sebuah link dengan kode HTML sebagai berikut:

<a href="http://www.google.com">Google</a>

Maka, link tersebut secara default akan memiliki warna oranye, saat di-hover (disorot dengan pointer/mouse) font akan ditampilkan menjadi cetak tebal, saat di-klik sekilas akan berubah menjadi warna biru, dan setelah link tersebut dikunjungi akan berubah warnanya menjadi warna merah.

pseudo-class lainnya

Contoh kode CSS:

span:first-child{
    font-weight:bold;
}

Contoh kode HTML:

<body><span>Teks pertama</span><span>Teks kedua</span></body>

Pada contoh diatas, kata “Teks pertama” akan dicetak tebal sesuai dengan style yang sudah dibuat. Sedangkan kata “Teks kedua” tidak akan dicetak tebal karena tidak cocok dengan selector yang telah didefinisikan, dimana selector hanya mengaplikasikan style pada elemen span pertama pada sebuah elemen (dalam hal ini elemen body).

Contoh kedua penggunakan pseudo-class :first-child. Berikut contoh kode CSS:

p > span:first-child{
    font-style:italic;
}

Contoh kode HTML:

<p><span>Teks pertama</span><span>Teks kedua</span></p>

Pada contoh diatas, Teks pertama akan diberi style karena sesuai dengan selector yang sudah ditentukan. Dimana pada style CSS, selector yang diberi style adalah “elemen span pertama didalam elemen p (paragraf)“. Tanda > (kurang dari) berarti elemen berikutnya adalah elemen didalamnya.

Selector child

Yang dimaksud dengan selector child disini mengacu pada elemen anak. Untuk lebih jelasnya, berikut contoh kodenya:

div>p {
    ... kode css ...
}

Kode CSS diatas akan berlaku pada elemen HTML seperti berikut:

<div><p>teks dalam paragraf</p><span>teks dalam span</span></div>

Contoh kedua:

div ol>li p {
    ... kode css ...
}

Kode CSS diatas akan berlaku pada elemen HTML seperti berikut:

<div><ol><li><p>teks dalam paragraf dan dalam list item</p></li><li>teks dalam list item</li></ol></div>

Selector sibling

Yang dimaksud selector sibling disini adalah elemen yang berada setelah elemen saat ini dan berada pada level yang sama.

Contoh sibling:

<div><h1></h1><h2></h2></div>

h2 adalah sibling dari h1 karena h2 berada setelah (disebelah kanan) h1. Dimana h1 dan h2 berada pada level yang sama. Maksud dari level yang sama adalah h1 dan h2 memiliki elemen induk yang sama (div).

Contoh penggunaan dalam CSS:

h1 + h2 { ... kode css ..}

Meningkatkan pengetahuan tentang CSS

Salah satu cara untuk meningkatkan pengetahuan tentang CSS adalah dengan melihat bagaimana orang lain (yang lebih berpengalaman tentunya) menyusun kode CSS mereka. Saran saya, jika Anda serius mempelajari CSS dan kebetulan menggunakan browser Firefox, maka segera install add-on Web Developer. Karena dengan tambahan add-on Web Developer maka Anda bisa melihat kode CSS suatu halaman dengan hanya menekan klik kanan Web Developer > CSS > View CSS (CTRL+SHIFT+C). Tentunya tidak hanya dilihat, tapi juga kode CSS tersebut dipelajari.

Download file latihan

Jika malas mengetikkan kode atau mengalami kesulitan saat mencoba, Anda bisa download file latihan css selector.

]]> http://majalahweb.com/2009/04/css-selector/feed/ 5