CSS singkatan dari Cascading Style Sheet, merupakan kode untuk mengatur tampilan halaman. Untuk mengatur jenis huruf, warna, ketebalan, bisa langusng menggunakan TAG HTML, namun dalam perkembangannya menjadi rumit kalau menyangkut desain yang banyak, kalau mau mengedit, maka tiap halaman harus di edit satu-satu. Dengan CSS kita tinggal masuk ke script CSS nya lalu mengganti bagian mana yang akan diganti. Karena dalam CSS semua sudah dikelompokkan dalam ID atau Class tertentu, maka menjadi mudah manajemen halamnnnya. CSS ada yang merupakan file terpisah, CSS external, yang kemudian di link ke halaman HTML. Satu file CSS bisa dipakai untuk banyak halaman dengan style sama. Pemisahan halaman HTML dengan CSS akan memudahkan dalam pengeditan. Namun hal ini membutuhkan hosting untuk menyimpan file. Keuntungan lainnya, dengan memisahkan file css, tak mudah ditiru orang hanya dengan melihat source codenya. Untuk untuk membuat CSS external, buatlah file dengan extensi *.css. Misalnya: File: latihan1.css
body{bground-color:#red}
kemudian buat file html, misalnya dengan nama latihan1.html cara menyisipkan kode CSS yaitu dengan koneksi link css: Sisipkan diantara tag ... kode sebagai berikut:
Ada juga CSS yang menjadi bagian dari halaman, CSS internal, seperti dalam halaman Blogger saya. Kelebihannya, tak membutuhkan hosting kkhusus untuk menyimpan file css nya. Ini merupakan solusi untuk blog seperti Bloger, wordpress yang hanya menyediakan halaman jadi, tidak menyediakan hosting file. Cara membuat CSS internal. Letak script CSS berada pada tag ...Diawali dengan
> Tag CSS: selector {properties:value;} Contoh: body {bground-color:#ffffff;} akan menghasilkan latar belakang putih. img {border:1px solid} akan menghasilkan, setiap tag yang tidak ditentukan class nya, akan diberi border sebesar 1 px. Kalau ditentukan kelasnya misalnya:
.display img {border:0;} gambar yang dimasukkanke class .display tidak ada garisnya. Class selector Dalam CSS tiap-tiap bagian bisa dibagi-bagi dalam class yang berbeda sehingga memudahkan dalam pengeditan. Misalnya kita akan membedakan jenis huruf, ukuran, warha untuk tanggal, judul tulisan, dan isi tulisan. Kita buat tiga class dengan nama "tanggal", "judul", "isi"
menghasilkan: 12 Juni 27, font verdana, ukuran font 10px, warna hijau. .judul {font-family:verdana, arial, Helvetica;font-size:12 px;color:#red;text-transform:uppercase;}
tampilan: font verdana, ukuran font 12px, warna: merah, huruf besar semua (uppercase).
.isi {font-family:Georgia, "times new roman", arial;font-size:12 px;color:#000000;} tampilan: font Georgia (cirikhas wordpress, juga template minima-nya blogger), ukuran font 12px, warna hitam.
.kolomisi {padding:10px 5px 10px 10px;}
artinya: kalau kolom
diberi style .kolomisi akan terformat dengan Padding atas:10px, padding kanan:5px, padding bawah: 10px, dan padding kiri: 10px.
membuat link navigasi horisontal
Sebuah halaman tentu akan terlihat bagus, canggih, dengan tampilan yang lain dari sekedar tampilan HTML standar. Membuat karya lain dari yang lain, sesuai dengan pribadi dan seleranya mungkin menjadi keinginan sebagian orang. Juga untuk navigasi (navigasi bar), bisa modelnya, warnanya, besarnya, dan lain-lain. Kita akan membuat sebuah navibar horisontal sedergana, nanti tergantung pada masing-masing untuk menambah dengan variasi sesuai selera masing-masing.(personal sense). untuk membuatnya, pertama kali kita harus membuat style untuk navibar:
kita akan meletakkan list di atas di dalam div navibar:
kode list di atas
kita perlu mengatur style untuk ul
.navibar ul /*karena terletak di dalam div navibar)*/{margin:0;padding:0;} .navibar li {display:inline;margin-left:2px;} .navibar a {border:1px solid #ffffff;padding:9px 5px 9px 5px;COLOR:#003366;text-decoration:none;}
.navibar a:visited{color: green;}
.navibar a:hover {padding:9px 5px 9px 5px;COLOR:#FFFF33;background-color:#003366;} tampilannya akan seperti ini
list 1
list 2
list 3
list 4
list 5
list 6
Mengenal Property Link
Link adalah sebuah text yang terhubung ke halaman atau url tertentu. dalam blog, link sangat penting, karena ini salah satu penilaian dari search engine dalam menentukan rating blog kita. Bagimana mmebuat link? mudah saja. sebuah link terdiri dari tag: nama link
url di sini bisa url relative maupun url absolut, permanen link. url ralatif menuntunt ke halaman yang masih satu server, atau dalam satu komputer. misalnya: Index link absolut, selalu akan menuju alamat tersebut walaupun yang mengakses beda komputer, karena ditulis lengkap. contoh: http://www.bloganda.com">Link Ke bloganda
Property Link
warna untuk link:
secara default, setiap link akan diwarnai dengan warna biru, garis bawah. untuk mensetting warna link sesuai dengan warna favorit, atau menyesuaikan dengan warna halaman, maka berikut ini langkahnya: dalam style, buat atau edit link (a)
a { color: red; /*warna link merah*/ text-decoration:none;/*tanpa garis bawah*/ }
warna untuk link yang telah dikunjungi: a:visited
a:visited { color:blue; /*warna text biru*/
warna untuk link hover
ketika mouse, kursor, melewati sebuah link, biasanya kursor berubah menjadi gambar tangan, pada saat itu akan terjadi perubahan warna pada link. untuk mensetting warna dan property linknya, adalah sebagai berikut:
a:hover { color:green; /*warna link saat kursor melewati link */ }
tersedia juga banyak property: misal: border-bottom:1px dotted #ffffff;/* garis bawah sebesar 1 piksel putus-putus, warna putih*./ atau { border-bottom:1px solid; border-bottom-color:#ffffff; /*warna putih*/ }
Yang perlu diperhatikan, jangan salah urutan penempatannya, urutan yang benar:
a, a:visited, a:hover a {....} a:visited {...} a:hover {...}
Membuat Navigasi Vertikal
Navigasi horizontal sudah, kali ini saya akan memberikan contoh membuat navigasi vertikal, yang bisa dipasang di sidebar anda. Konsep dasarnya adalah list html. Seperti kalau di ms word kita tahu numbered list, yang bisa memakai angka atau huruf, bisa juga juga memakai bullet. (Bullet and Numbering). langsung saja. Buatlah elemen div dengan kelas sidebar
ini akan menjadi tempat kita meletakkan elemen list, yang kalau di ms word kita sebut bullet and numbering. div sidebar di atas kita setting dengan padding:0 artinya, jarak alemen atau font yang berada di dalam div tersebut 0, (mepet pinggir). Kemudian widt:100px; lebar elemenkita set 100 pixel, ini bisa kita ubah sesuai dengan lebar sidebar kita. atau tak usah diberi property ini kalau berada dalam elemen lain yang sudah ditentukan width-nya. Misalnya berada salam kolom table atau #div dengan fixed width, lebar yang ditentukan. text-align:right, text rata kanan. mulai dengan list:
.sidebar ul { margin:0; padding:0; } ul = unordered list;
kita tulis .sidebar ul karena nanti kita akan memasang elemen ul dalam div dengan class sideba.
fornt-family: kelompok huruf, list-style-type: none, tidak memakai penanda list, dalam ms word bisa memakai angka, huruf, atau bullet. border-bottom:besarnya 1 pixel, silid, dengan warna putih.
.sidebar li a { color:#000000; display:block; text-decoration:none; background-color:#00CCCC; padding:2px 5px 2px 1px; border-right:4px solid; border-right-color:#006666; }
Tampilannya akan seperti ini:
karena list nanti berupa link, yang bisa kita isi dengan url atau ke halaman yang lain, maka kita perlu menambahkan elemen a (link).
.sidebar li a:visited { color:#003366; }
link yang sudah di klik, halaman sudah terbuka, akan berganti warna textnya, #003366.
mengatur penampilan pada saat mouse kita melewati tulisan dalam list tersebut: hover; jangan lupa taruh property di atas pada bagian style di dalam head.
Background di Header
Anda ingin menambahkan image atau gambar di header blog? Header berupa gambar indah di lihat, dan menjadikan blog atau web jadi meriah. Ada dua cara memasang gambar, satu dengan langsung di taruh, dengan tag IMG, atau dijadikan latar belakang. Untuk menambah latar belakan image pada header lakukanlah hal sebagai berikut: pada css style, buat properties untuk header misalnya:
Perhatikan, ukuran file gambar, kalau ingin pas dengan halaman yang sudah didesain, sesuaikan ukuran gambar dengan properties #header. /*kalau ukuran gambar lebih kecil dari div header, dengan propertie background-repeat:no repeat, maka hanya akan terlihat satu gambar saja, seperti perintah IMG. Kalau ukuran gambar sama dengan ukuran div #header, properties background-repeat tak diperlukan. Nah, di atas gambar kita bisa menulis seperti biasanya. Tulisan di atas gambar. posisi SERP google no 3 untuk pencarian dengan kata kunci:"tutorial CSS"
Mengenal List Properties
List atau daftar, atau kalau di ms word kita mengenalnya dengan nama bullet and numbering adalah model penomeran berhierarki. Bisa menggunakan huruf, angka, atau lambang (bullet). Dalam pemrograman internet, css, kita bisa mengunakan fungsi list yaitu ul untuk unorderd list (list yang tidak bernomor) dan ol yaitu ordered list. Selain itu ada list yang horizontal dan ada list yang vertikal. Ada list yang memakai angka atau huruf, ada list yang memakai bullet atau image. Bedanya ul dan ol? Sebelum itu kita harus tahu, ul dan oladalah tag untuk list, untuk membuat list itemnya, kita butuh satu lagi tag yaitu li. jadi tag li harus berada dalam tag ul atau ol. Dan tag ul atau ol di dalamnya harus ada li.
mengatur jenis/ type list: untuk mengatur type list kita bisa menggunakan property list-style-type contoh: buat dulu css nya di style, misalnya
li.list1 { list-style-type:suare;} akan menghasilkan list kotak; li.list1 { list-style-type:circle;} akan menghasilkan list linkaran berlubang; untuk membuat list berupa icon atau image pakai list-style-image: li.list1 { list-style-image:url(sumber file)}
Penulisannya:
list 1
list 2
List ke kanan dan list ke bawah: untuk list ke kanan (contoh untuk navigasi atas di blog ini, dan blogger indonesia). pakai properties untuk li { display:inline} untuk list ke bawah (contoh seperti sidebar di blog ini): pakai properties untuk li { display:block;}
silakan dikembangkan sendiri, gunakan properties margin dan padding untuk ul, border-bottom, tambahkan background-color untuk link. mohon koreksinya bila ada kesalahan.
Silahkan Copas..dan berbagi dengan yg ingin mempelajarinya :)
HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan dan diakhiri dengan (terdapat tanda "/").
Sebuah halaman web minimal mempunyai empat buat tag, yaitu :
Sebagai tanda awal dokumen HTML.
Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
</span></b><span style="font-size: 10pt;font-family: Verdana;"> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar). </span></font></p> <p><font size="3"><span style="font-size: 10pt;font-family: Verdana;">Contoh : <br> <br> <span style="color: rgb(51, 0, 204);"><TITLE>Tips HTML -- www.klik-kanan.com
Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.
Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan teks :
Headers: .. Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara
sampai
, dengan
merupakan ukuran terbesar dan
merupakan ukuran terkecil.
Contoh :
Tutorial Html
Hasilnya akan terlihat seperti :
Tutorial Html
Paragraph Baru: Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran
tapi juga bisa tidak diberi.
Line Break: Digunakan untuk pindah ke baris baru.
No Line Break: Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.
Font Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR.
SIZE: Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.
FACE: Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.
COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).
Contoh :
Contoh teks yang berwarna merah
Hasilnya akan terlihat seperti :
Contoh teks yang berwarna merah
Contoh lainnya :
Base Font: Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.
Contoh :
Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :
Perhatian : Semua tag di bawah ini membutuhkan tap penutup.
Bold text Italic text Underscore Typewriter Strikeout - draws a line through the text
Preformatted TextDefinition Text berkedip (lebih baik jangan digunakan) Strong
Italic
Digunakan untuk quoting text Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda) Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda) Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda) Ukuran teks akan lebih besar satu ukuran Ukuran teks akan lebih kecil satu ukuran Membuat tekssuperscript membuat tekssub script Abbreviations Untuk akronim Digunakan untuk indexing Membuat short inline quotation Membuat variable name, selalu dalam italics.
Lists
Terdapat tiga tipe list yang dapat digunakan, yaitu :
Unordered Lists:
Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag
.
Contoh :
Item nomer 1
Item nomer 2
Item nomer 3
Hasil dari kode di atas adalah:
Item nomer 1
Item nomer 2
Item nomer 3
Dengan atribut TYPE Anda dapat mendefinisikan bentuk disc, circle atau square bullet point.
Contoh :
…
Ordered Lists: Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan
tag.
Contoh :
Item nomer 1
Item nomer 2
Item nomer 3
Hasil dari kode di atas adalah :
Item nomer 1
Item nomerr 2
Item nomerr 3
Untuk TYPE Anda dapat juga menggunakan :
1- Default numbers, 1, 2, 3, etc. A- Huruf besar. A, B, C, etc. a- Huruf kecil. a, b, c, etc. I- Romawi huruf besar. I, II, III, etc. i- Romawi huruf kecil , i, ii, iii, etc.
Definition Lists:
Contoh :
Item pertama.
Penjelasan tentang item pertama.
Item kedua.
Penjelasan tentang item kedua
Hasil dari kode di atas adalah :
Item pertama.
Penjelasan tentang item pertama.
Item kedua.
Penjelasan tentang item kedua
Images
Images :
Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda.
Links : Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara dan akan terdapat garis bawah.
Contoh :
Klik di sini Untuk membuat link ke halaman lain. Klik di sini Untuk membuat link pada alamat e-mail. Klik di sini Untuk membuat link ke bagian lain pada halaman yang sama. Klik di sini Untuk membuat link kebagian lain pada halaman yang berbeda. Untuk membuat link dengan menggunakan gambar.
Tabel
Tabel sangat penting artinya dalam desain web. Karena dengan menggunakan tag table Anda dapat membuat halaman web "terbagi" pada beberapa kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda baca ini.
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table :
,
, dan
. Yang perlu diingat adalah bahwa tab
dan
harus terletak di antara tag
dan
Terdiri dari atribut :
align - perataan : rata kiri (left), tengah (center) atau kanan (right).
bgcolor - warna latar belakang (background) dari tabel.
border - ukuran lebar border tabel (dalam pixel).
cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).
cellspacing - jarak antar cell (dalam pixel).
width - ukuran tabel dalam pixel atau percent.
Contoh :
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
align - perataan : rata kiri (left), tengah (center) atau kanan (right).
bgcolor - warna latar belakang dari baris.
valign - perataan vertikal : top, middle atau bottom.
Contoh :
Tag ini digunakan untuk membuat kolom baru pada tabel.
align - perataan
background - image yang digunakan sebagai latar belakang dari kolom.
bgcolor - warna latar belakang
colspan - lihat gambar contoh
height - ukuran tinggi cell dalam pixels.
nowrap - membuat supaya isi dari kolom tetap berada pada satu baris.
rowspan - lihat gambar contoh
valign - perataan vertikal :top, middle atau bottom.
width - ukuran kolom dalam pixel atau percen.
Contoh :
border="1" cellspacing="2" cellpadding="2">
border="0" cellspacing="0" cellpadding="0">
Frames
1
2
3
4
5
6
7
8
Kumpulan Tag HTML
Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser
Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
Sebagai awal dari Java applets
Mendefinisikan daerah yang dapat diklik (link) pada image map
Membuat teks tebal
Membuat atribut teks default seperti jenis, ukuran dan warna font
Memberi (suara latar) background sound pada halaman web
Memperbesar ukuran teks sebesar satu point dari defaultnya
Membuat teks berkedip
Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
Pindah baris
Membuat caption pada tabel
Untuk perataan tengah terhadap teks atau gambar
Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
Indents teks
Represents different sections of text.
Menambahkan sound or file avi ke halaman web
Seperti tag
Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
Mendefinisikan input form
Mendefinisikan frame
Mendefinisikan attribut halaman yang akan menggunakan frame
...
Ukuran font
Mendefinisikan head document.
Membuat garis horizontal
Bararti dokumen html
Membuat teks miring
Image, imagemap atau an animation
Mendefinisikan input field pada form
Membuat bullet point atau baris baru pada list (berpasangan dengan tag ,
Mendefinisikan client-side map
Membuat scrolling teks (teks berjalan) - hanya pada MS IE
Untuk membuat link dengan menggunakan gambar. 
