Modifikasi Link (anchor) Web Keren CSS

Saat ini modifikasi link adalah hal utama dalam pembuatan web maupun blog. Dengan modifikasi inilah hingga lahir berbagai macam bentuk link seperti halnya bentuk tombol keren yang disesuaikan dengan web atau blog yang dimiliki.

Berikut adalah contoh sederhana style CSS modifikasi anchor:

<style type="css/Javascript">

a:link{

color:blue;

}

/* Menjelaskan warna link yang belum dikunjungi, dan warnanya adalah blue(biru) */

a:visited{

color:gray;

}

/* Menjelaskan warna link yang telah dikunjungi, dan warnanya adalah gray(abu-abu) */

a:hover{

color:red;

text-decoration:underline;

}

/* Menjelaskan warna link saat mouse berada diatasnya, warnanya adalah red(merah) dan ada efek underline(garis bawah)*/

</style>

Keterangan :

a:hover ditulis setelah a:link dan a:visited agar efeknya bisa bekerja sesuai yang kita harapkan!

Sekarang silahkan sobat membuatnya dalam file html web atau lakukan modifikasi link di dalam blog sobat sendiri. Semoga sukes..

as website css source a html about html belajar css belajar website belajar html belajar pembelajaran bahasa inggris belajar bahasa inggris belajar php belajar mendesain web css to html cara web cara membuat web cara belajar web cara belajar cepat cara belajar code code html contoh css cara mendesain web cara mendesain website designer web design web design web free edit html free web how to html. html code for, html code, html for program web pengertian web i web in html kode html membuat web .com membuat web membuat css membuat website gratis make a web mudah belajar metode belajar mendesain web mendesain website situs web syntax html tutorial web the web text to html tutorial css tutorial html tutorial php webmaster web belajar website belajar web site web page website web design web sites web indonesia web gratis web magazine web hosting.

Baca Selengkapnya >>

Membuat Bingkai dan Tombol Dengan CSS

Untuk memunculkan bingkai dalam html, sobat bisa menggunakan properti  border, untuk mengatur bingkai secara keseluruhan. Sedangkan properti border-left, border-right, border-top dan border-bottom, digunakan untuk menentukan bagian – bagian tertentu dalam bingkai.

border-left, digunakan untuk menentukan bagian kiri bingkai.

border-right, digunakan untuk menentukan bagian kanan bingkai.

border-top, digunakan untuk menentukan bagian atas bingkai.

border-bottom, digunakan untuk menentukan bagian bawah bingkai.

Properti seperti di atas bisa diisi dengan nilai sebagai berikut :

Border: 2px solid #00F;

- 2px berarti ukuran ketebalan bingkai.
- Solid artinya jenis bingkai yang dipilih adalah solid.
- #00F adalah warna bingkai dalam hal ini berwarna biru.

Sekarang siapkan notepad atau software pembuat website (adobe dreamweaver) sobat.

Ketikkan kode berikut :
Bingkai CSS.html | Download Script

Dan hasilnya seperti berikut :

Dari sini sobat sudah ada bayangan bagaimana border bekerja.

Sekarang, Bagaimana menentukan jenis bingkai?

Berikut adalah nama dan bentuk jenis bingkai yang bisa digunakan.

Bagaimana membuat tombol dengan properti border?

Coba sobat praktekkan kode berikut :

<!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>Contoh Pengaturan Border oleh Ketikweb</title>
<style type="text/css">
.tombol{
    border-bottom:4px solid #CF0;
    border-left:4px solid #CF0;
    border-right:4px solid #CF0;
    border-top:4px solid #CF0;
    width:100px;
    text-align:center;
    background-color:#0C0;
    color:#FFF;

}
</style>
</head>
<body>
<p class="tombol">Klik Saya !</p>
</body>
</html>

Hasilnya seperti ini :

Keterangan kode :
- width:100px artinya lebar tombol sebesar 100pixel.
- Text-align:center artinya teks ditempatkan rata tengah.
- background-color:#0C0 artinya warna latar belakang tombol berwarna #0C0(hijau)
- color:#FFF artinya teks berwarna #FFF(putih).

Mudahkan? Silahkan sobat bereksperimen lagi dengan pengetahuan baru sobat ini dengan menggunakan properti border. Sekian dulu dari saya, semoga bermanfaat. Wassalam... Ketikweb.blogspot.com

Baca Selengkapnya >>

Atur Tampilan List Style CSS

Pada kode HTML kita telah mengenal mekanisme untuk menampilkan daftar item (list), yaitu menggunakan elemen ul (untuk list berpenanda) dan ol(untuk list ber-angka). Pada kedua elemen tersebut setiap item ditulis dalam pasangan tag <li> dan </li>. Secara default (tanpa pengaturan) penanda list atau disebut bullet pada elemen ul adalah lingkaran. Bila kita ingin mengubahnya cukup dengan merubah tipe list pada kode html tersebut. Namun ada cara yang lebih mudah dan praktis yaitu dengan CSS. Kita bisa melakukan pengaturan property list-style-type. Dalam hal ini, nilainya bisa diisi dengan :

Circle (berupa lingkaran), Disc (berupa piringan), Square (berupa kotak)

Contoh :

Siapkan notepad atau dreamweaver sobat , bwt file baru dan ketikkan kode berikut :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>List CSS</title>
<style type=”css/javascript”>
.lingkaran{
List-style-type : circle;
}
.piringan{
List-style-type : disc;
}
.kotak{
List-style-type : square;
}
</style>
</head>
<body>
<h2>Daftar Binatang Berkaki empat</h2>
<ul class=”piringan”>
<li>Singa</li>
<li>Kambing</li>
<li>kuda</li>
<li>kucing</li>
</ul>
<h2>Daftar Binatang Berkaki empat</h2>
<ul class=”lingkaran”>
<li>Singa</li>
<li>Kambing</li>
<li>kuda</li>
<li>kucing</li>
</ul>
<h2>Daftar Binatang Berkaki empat</h2>
<ul class=”kotak”>
<li>Singa</li>
<li>Kambing</li>
<li>kuda</li>
<li>kucing</li>
</ul>
</body>
</html>

Jalankan file html sobat dan perhatikan dengan seksama. Kira – kira hasilnya seperti ini :

Bagaimana dengan pengaturan urutan dalam list CSS?

Untuk mengatur list yang menggunakan angka (atau huruf), properti list-style-type bisa diisi dengan nilai - nilai berikut :

decimal (berupa 1, 2, 3, 4)

decimal-leading-zero (berupa 01, 02, 03, 04)

lower-roman (berupa i, ii, iii, iv)

upper-roman (berupa I, II, III, IV)

lower-alpha atau lower-latin (berupa a, b, c, d)

upper-alpha atau upper-latin (berupa A, B, C, D)

Silahkan bereksperimen dengan mengganti pengaturan style properti css sobat.

Sobat juga bisa melakukan pengaturan list dengan penanda gambar...

Properti yang digunakan adalah list-style-image. Berikut contoh pengaturannya :

list-style-image : url ("https://sites.google.com/site/ketikweb/gambarfile/link_arrow.png") ;

https://sites.google.com/site/ketikweb/gambarfile/link_arrow.png adalah alamat gambar dan nama file gambar yang ingin sobat jadikan penanda list.

Contoh :

Silahkan ketik web berikut dalam file html baru melalui notepad atau dreamweaver sobat :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>List CSS</title>

<style type="text/css">

ul {

List-style-image : url("https://sites.google.com/site/ketikweb/gambarfile/link_arrow.png");

List-style-type: disc;

}

</style>

</head>

<body>

<h2>Daftar Binatang Berkaki empat</h2>

<ul>

<li>Singa</li>

<li>Kambing</li>

<li>kuda</li>

<li>kucing</li>

</ul>

</body>

</html>

 Jalankan file html sobat lalu perhatikan. Kira – kira hasilnya seperti ini :

Pada kode di atas, saya memasukkan List-style-type: disc; dibawah list-style-image sebagai arti bahwa jika file gambar tersebut tidak terdapat di alamat yang dituju maka pengaturan list berganti dengan tipe disc saja.

Sekian tutorial pengaturan tampilan list CSS. Semoga bermanfaat dan sampai jumpa pada tutorial berikutnya.

Baca Selengkapnya >>

Desain Teks Melalui CSS

Sobat ketikweb pasti sudah tidak asing lagi dengan pengaturan teks seperti ini. Dalam pembuatan tulisan dimanapun, struktur keindahan paragraf menjadi hal utama agar pembaca bisa nyaman dalam membaca tulisan kita. Dalam pembuatan web maupun blog dahulu pengaturan teks ini banyak di gunakan dengan Tag HTML, namun sekarang penanganan diserahkan pada CSS. Bagaimanakah CSS dalam mengatur teks? Mari kita diskusikan.

Bagaimana CSS Mengatur Perataan Teks?

Pengaturan ini melalui properti text-align, contoh:

text-align: center;

value (nilai) dari text-align diatas adalah center, yang artinya perataan teks ditengah. Value lain yang bisa digunakan adalah left (kiri), right (kanan), justify (perataan kanan kiri).

Bagaimana CSS Mengatur Jarak Antar Baris?

Pengaturan ini melalui properti line-height, contoh:

line-height: 0,5em;

value (nilai) dari line-height diatas adalah 0,5em, yang artinya jarak antar baris diatur 0,5 kali jarak antar baris semula.

Bagaimana CSS Mengatur Jarak Antarhuruf atau Antarkata?

Pengaturan ini melalui properti letter-spacing (antarhuruf) dan properti word-spacing (antarkata), contoh:

letter-spacing: 0,4em;

word-spacing: 1,5em;

value (nilai) dari letter-spacing diatas adalah 0,4em, yang artinya jarak antarhuruf diatur 0,4 kali jarak antarhuruf semula, sedangkan nilai word-spacing 1,5em yang artinya 1,5 kali dari jarak antarkata semula.

Bagaimana CSS Mengatur Jarak Batas Kiri Atas Kanan Bawah?

Pengaturan ini melalui properti padding-top (batas atas), padding-bottom (batas bawah), padding-left (batas kiri), padding-right (batas kanan), contoh:

padding-top: 1cm;

padding-right: 2cm;

padding-left: 1cm;

padding-bottom: 2cm;

Value (nilai) dari padding-top (batas atas) adalah 1cm artinya batas kiri sebesar 1 cm dari element page (lembar halaman tulisan berada), padding-bottom (batas bawah) adalah 2cm artinya batas kiri sebesar 2 cm dari element page , padding-left (batas kiri) adalah 1cm artinya batas kiri sebesar 1 cm dari element page, padding-right (batas kanan) adalah 2cm artinya batas kiri sebesar 2 cm dari element page. Aturan satuan nilai sama dengan pengaturan font size.

Selain menggunakan keempat properti di atas, pengaturan padding ini bisa di singkat menjadi :

padding: 1cm 1cm 1cm 2cm;

aturan nilai diatas di awali pengaturan batas atas kemudian berurutan sesuai arah jarum jam (kanan, bawah, kiri). Hal ini hanya berlaku jika kita menginginkan pengaturan empat padding di atas.

Sekian tutorial kali ini, semoga bermanfaat untuk sobat sekalian. Salam Kreatifitas....

text css | text align css | css text | text justify css | bold text in css | text css html | style padding | html padding | padding in css | css text padding | css tutorial | padding tutorial | textalign | lineheight | letterspacing | wordspacing | paddingtop | paddingleft | paddingright | paddingbottom | bataskiri | batasatas | batasbawah | bataskanan | antar baris | antar kata | antar huruf | jarak paragraf |

Baca Selengkapnya >>

Pengaturan Font Dalam CSS

Bagaimana CSS mengatur font css?

Jenis font diatur melalui properti font-family dimana nilainya berupa beberapa nama font dengan pemisah tanda koma. Contoh :

Font-family: Arial, sans-serif, verdana;

Pada contoh di atas, Arial merupakan font yang menjadi prioritas untuk dipakai. Namun, bila font tersebut tidak terpasang dalam komputer maka sans-serif yang akan digunakan. Bila sans-serif tidak ada maka verdana yang digunakan. Begitulah seterusnya, sobat bisa memasukkan banyak font cadangan namun bisa berefek akan memperlambat terbukanya halaman web maupun blog kita. Perlu sobat ketahui juga bahwa sans-serif adalah salah satu kategori font yang digunakan oleh semua browser dan dijamin ketersediaannya. Jadi janganlah sobat memasang jenis font sesuka kita tanpa mempertimbangkan ketersediaan jenis font kita di komputer orang lain.

Bagaimana mengatur ukuran font css?

Ukuran font diatur melalui properti font-size. Seperti :

font-size: 12px;

Pada contoh di atas, menggunakan (px) yang artinya ukuran font sebesar 12 piksel.

Satuan ukuran font lain yang bisa digunakan adalah

• em, artinya ukuran bersifat relatif terhadap ukuran font sekarang. 1 em identik dengan ukuran font sekarang, 2 em artinya 2 x ukuran font sekarang.
• %, artinya ukuran relatif terhadap huruf sekarang. Nilai 100 % berarti sama 100 % ukurannya dengan ukuran font sekarang. Nilai 200 % berarti ukurannya 200 % dari ukuran huruf sekarang.
• in, menyatakan satuan inci.
• mm, menyatakan satuan milimeter.
• cm, meyatakan satuan centimeter.

Bagaimana css mengatur font text miring dan font text tebal?

Untuk text miring dengan mengatur properti sebagai berikut:

font-style: italic;

Untuk menormalkan text (artinya tidak miring)  sebagai berikut:

font-style: normal;

Untuk text bold dengan mengatur properti sebagai berikut:

font-weight: bold;

Untuk menormalkan text (artinya tidak bold)  sebagai berikut:

font-weight: normal;

Praktek Langsung :

Siapkan notepad atau adobe dreamweaver sobat lalu ketikkan perintah berikut :

<!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>pengaturan font css</title>
<style type="text/css">
.h1 {
font-size: 24px;
font-family:Verdana, Geneva, sans-serif;
font-style:italic;
font-weight:bold;
}
</style>
</head>
<body>
<div>Saya adalah teks biasa</div>
<div class="h1">Saya adalah teks pengaturan css</div>
</body>
</html>

Kemudian sobat jalankan. Hasilnya kira - kira seperti ini :

Sekian tutorial postingan css pengaturan font kali ini. Semoga bermanfaat.

css a | how to css | css template | font in css | font for css | css for font | css fonts | font family for css | bold css | font font | the font | what font |

Baca Selengkapnya >>

Fondasi Penting Dasar Kode CSS

Assalamu alaikum.
Kali ini kita akan belajar dan mengenal lebih dalam tentang CSS. Seperti halnya dalam mengenal seseorang pastilah informasi yang kita dapatkan adalah bagaimana sifatnya, warna kesukaan, hobi, dll. Begitu pula dengan bahasa pemrograman ini memiliki banyak sifat dasar dan karakteristik yang harus kita pahami terlebih dulu sebelum menyelam lebih dalam tentangnya.
Berikut adalah fondasi dasarnya:  

- Bersifat Case sensitive. Artinya sangat membedakan huruf kapital dan huruf kecil. Jadi harus hati - hati dalam menuliskan perintah CSS khususnya dalam penulisan nama ID dalam style, misalnya :

.sesuatu

....

}

Maka "sesuatu" ini berbeda jikalau kita menuliskan "SESUATU". Dalam menuliskan nama ID ini sebaiknya menggunakan kata yang mudah dipahami khususnya kita sendiri sebagai programmer. Misalnya "Tulisanputih" lebih baik daripada "Tpth". Dalam penulisan nama ID ini boleh menggunakan tanda minus atau garis bawah misalnya : "Tulisan-putih" atau "Tulisan_putih". Boleh juga menggunakan angka tapi tidak boleh menggunakan spasi. Aturan penamaan ini berlaku juga pada HTML.

- Peletakan kode. Ada 3 cara dalam peletakan kode style CSS :

1. Di dalam kode HTML (Disebut juga deklarasi inline). Pada deklarasi ini, style diletakkan dalam elemen html berada pada atribut style. Contohnya :

<html>

<head>

<title>Deklarasi Inline</title>

</head>

<body>

   <h1 style="color: white;">Deklarasi Inline</h1>

</body>

</html>

2. Antara tag <style>..</style> dimana pasangan style ini terletak diantara pasangan tag <head>..</head> (peletakan ini disebut juga embedded style sheet). Contohnya :

<html>

<head>

<title>Deklarasi Embedded Style Sheet</title>

<style>

h1 {

 color: white;

}

</style>

</head>

<body>

   <h1>Deklarasi embedded style sheet</h1>

</body>

</html>

3. Pada file CSS (external style sheet). Pada deklarasi ini, sobat meletakkan style diluar dari file HTML, dalam artian berada pada file tersendiri. Misalnya :

<html>

<head>

<title>Deklarasi External Style Sheet</title>

<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/ketikweb/cssfile/contohdeklarasi.css" />

</style>

</head>

<body>

   <h1>Deklarasi External Style Sheet</h1>

</body>

</html>

- Tidak Semua Browser Mendukung CSS. Untuk itu dalam membuat propertinya, pilihlah yang memang didukung oleh kebanyakan browser agar tampilan yang kita rancang bisa bekerja pada semua browser. Untuk mengetahui tehnik ini sebaiknya dengan uji coba langsung, try and error adalah guru yang akan mengajarkan sobat memahami setiap kelebihan dan kekurangan browser.
Sekian penjelasan saya semoga bermanfaat dalam membangun pemahaman sobat. Wassalam...

as website a html about html belajar css belajar website belajar html belajar pembelajaran bahasa inggris belajar bahasa inggris belajar php belajar mendesain web css to html cara web cara membuat web cara belajar web cara belajar cepat cara belajar code code html contoh css cara mendesain web cara mendesain website designer web design web design web free edit html free web html to css how to html. html code for, html code, html for program web pengertian web i web in html kode html membuat web .com membuat web membuat website gratis make a web mudah belajar metode belajar mendesain web mendesain website situs web syntax html tutorial web the web text to html tutorial css tutorial html tutorial php webmaster web belajar website belajar web site web page website web design web sites web indonesia web gratis web magazine web hosting.

Baca Selengkapnya >>

Mengenal - Apa itu CSS?

Seperti layaknya kode HTML, pada CSS juga berfungsi untuk membangun web kita jadi lebih menarik. Namun pada kode ini lebih fokus terhadap bagaimana memperindah tampilan tanpa mengubah isi. Ibarat membangun rumah, HTML adalah rumahnya dan CSS adalah cat warna tembok rumahnya.

Untuk lebih jelasnya, kita coba langsung praktek saja, siapkan notepad dan software design web anda (Dreamweaver) dan ketikkan kode berikut, lalu simpan sebagai file html dengan nama belajar css pertama.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Pengenalan Belajar</title>
</head>
<body>
<h1>Saya adalah HTML</h1>
<div>
<font face="verdana" color="#FF0000">
Saat ini anda melihat saya sebagai HTML
</font>
</div>
</body>
</html>

Pada contoh diatas, kita bisa melihat pasangan tag <font> yang diapit oleh pasangan tag <div>. Tag font ini bertujuan untuk mengatur jenis font melalui atribut face dengan value "verdana" yang artinya menggunakan font verdana. Tag font ini juga mengatur warna font melalui atribut color dengan value #FF0000 yang artinya berwarna merah. Silahkan jalankan di browser anda, hasilnya seperti di samping ini.

Berikutnya download dan pelajari kode latihan ke dua.

Kemudian anda jalankan pada browser anda dan hasilnya adalah sebagai berikut :

Sekarang anda bisa bandingkan, hasilnya sama saja tetapi bentuk kode yang kita masukkan berbeda. Gambar pertama tanpa CSS dan kedua dengan CSS. Koq hasilnya sama saja? Untuk hasilnya memang sama tapi bisa sobat bayangkan jika seandanyai kita menuliskan banyak konten pada html kita maka tag font ini harus kita selipkan di tiap pasangan tag <div> </div> yang terdapat dalam file HTML kita. Namun dengan kode CSS cukup sekali saja pengaturannya pada daerah diatas tag <head> dan dibawah tag <title>.

Apakah cuma sampai segitu saja kemampuannya? Tentu tidak... Ada banyak hal yang bisa kita kembangkan. Contohnya :

• Mengatur warna latar belakang.
• Membuat bingkai.
• Membuat halaman dengan dua kolom.
• Menentukan gambar, baik latar belakang maupun latar depan.
• Dan masih banyak manfaat lainnya.. yang Insya Allah akan kita bahas satu persatu hanya di ketikweb.blogspot.com

Style
Style dapat digunakan untuk mengatur tag tag HTML. Dimana style ini mengandung dua bagian, yaitu selektor dan deklarasi properti. Perhatikan kode berikut :

 <style type="text/css">
div {
    font-family:verdana;
    color:#FF0000;
}
</style>

- Pasangan tag <style> </style> mengawali dan mengakhiri proses input kode CSS ke dalam HTML.

- Pasangan tag <div> </div> adalah tag html yang dijadikan nama selektor.

- Pasangan tanda { dan } setelah tag div adalah tanda awal dan akhir proses deklarasi (pengaturan) untuk selektor div.

- font-family dan color adalah  adalah properti untuk pengaturan di dalam setiap selektor. Dalam hal ini sebagai properti selektor div.

Semua tag HTML dapat dijadikan selektor sehingga semua tag HTML dapat diatur melalui CSS. Jadi misalnya kita akan mengatur tag <i></i> maka yang jadi selektornya yang diapit antara kode tag style adalah i { ..... }.

Bagaimana sobat? Semoga bisa paham. Jika ada yang ingin ditanyakan silahkan tinggalkan koment anda. Sampai jumpa pada postingan berikutnya...

as website css source a html about html belajar css belajar website belajar html belajar pembelajaran bahasa inggris belajar bahasa inggris belajar php belajar mendesain web css to html cara web cara membuat web cara belajar web cara belajar cepat cara belajar code code html contoh css cara mendesain web cara mendesain website designer web design web design web free edit html free web how to html. html code for, html code, html for program web pengertian web i web in html kode html membuat web .com membuat web membuat css membuat website gratis make a web mudah belajar metode belajar mendesain web mendesain website situs web syntax html tutorial web the web text to html tutorial css tutorial html tutorial php webmaster web belajar website belajar web site web page website web design web sites web indonesia web gratis web magazine web hosting.

Baca Selengkapnya >>