selamat datang di blogger hilda

Sabtu, 12 November 2011

Cara mudah belajar CSS

Bagi yang sudah mulai belajar membuat website pasti tau yang namanya CSS. Kalau ga tau, ya udah EGP :P... Saat ini Css selalu menemani kemanapun Html pergi, tanpa css html akan merasa hampa, sebaliknya juga untuk css. Css menjadikan halaman web menjadi lebih efisien dan lebih indah. Untuk belajar Css, kamu bisa download bukunya di sini. Setelah kamu download, kamu bisa baca sebentar dan langsung praktek.

Tapi ada cara mudah agar cepat memahami css, seperti yang saya lakukan dulu. Untuk belajar cara mudah tersebut, yang harus kamu hindari adalah jangan membuat CSS dan HTML dari awal. ya, Langsung belajar saja ke sumbernya. Yang di maksud sumber disini adalah langsung mengedit template yang sudah jadi.

Yang harus kamu lakukan adalah mengedit. edit, dan edit template css yang sudah ada di internet. Pelajari terlebih dahulu struktur CSSnya. Dan apabila kamu masih bingung dengan kodenya, buka ebook yang di download tadi dan cari kode yang masih kamu bingung tersebut untuk mendapat solusinya. Inilah yang saya lakukan dulu. saya pun masih belajar mengenai css. Karena saya bukan pro, masih banyak kode yang saya tidak tau. Paling tidak selama belajar saya sudah bisa mengedit template blogger.

Di mana tempat-tempat buat belajar langsung? kalau kamu punya akses internet, kau bisa mengedit template blogger dari layanan blogger.com. Theme untuk blogspot ini sangat banyak di internet. Dan kamu bisa download salah satu theme, pasang themenya di akun/blog kamu di blogger.com, kemudian edit cssnya. cari sekiranya theme yang sederhana saja untuk awal-awal, agar mudah mengeditnya. Untuk mulai mengedit, kamu bisa memulainya dengan mengedit bagian "Header" dan "Body" pada struktur cssnya. Setelah kamu ubah strukturnya, save dan reload halaman blog kamu, perhatikan apa yang terjadi dan resapi. Ulangi terus menerus latihan kamu, hingga paham. Itulah yang saya lakukan dalam belajar css.

Kemudian untuk yang gak punya akses internet, kamu bisa download file template html yang di sertai dengan css. Cara editnya adalah, buka file cssnya dengan notepad atau menggunakan Dreamweaver. Rubah struktur Css yang kamu tau dulu kemudian save. Setelah di save, buka file index.html (Biasanya yang terhubung dengan file css) di browser kamu, dan lihat perubahan yang terjadi. Pahami dan resapi, ulangi terus hingga kamu sudah paham.

Sekian dulu. Semoga tips ala saya bisa bermanfaat untuk kamu...
Salam...

sumber : http://zwagerweb.blogspot.com/2011/10/cara-mudah-belajar-css.html

6 Kunci Memahami modern berbasis CSS Layouts

Banyak dari CSS adalah cukup sederhana dan, saya kira, cukup mudah bagi kebanyakan orang untuk memahami. There's font styles, margin, padding, color and what not. Ada font yang gaya, margin, padding, warna dan apa yang tidak. But there's a wall that people will run into... Tapi ada dinding yang orang akan lari ke ... that point where a number of key elements need to come together to create a solid CSS-based layout that is consistent cross-browser. titik di mana sejumlah elemen kunci perlu datang bersama-sama untuk menciptakan sebuah layout berbasis CSS yang solid yang konsisten lintas-browser.
These are the six things that will help people get over the hump. Ini adalah enam hal yang akan membantu orang mengatasi punuk.

Box Model Kotak Model

At the very core of it, is an understanding of the box model within CSS. Pada inti dari itu, adalah pemahaman tentang model kotak dalam CSS. Sure, you may know your margin and padding but what happens when elements start to interact with each other. Tentu, Anda mungkin tahu margin dan padding, tetapi apa yang terjadi ketika elemen mulai berinteraksi satu sama lain. Suddenly things that look good in one browser go all to hell in the other. Tiba-tiba hal-hal yang terlihat baik dalam satu browser pergi semua ke neraka yang lain. Consistently in working with the box model comes from understanding the difference between quirks mode and strict mode. Konsisten dalam bekerja dengan model kotak berasal dari pemahaman perbedaan antara quirks mode dan mode yang ketat. It's also a good idea to know how to hack it up for older browsers. Ini juga merupakan ide yang baik untuk mengetahui bagaimana hack itu untuk browser lama.

Floated Columns Kolom melayang

While absolute positioning was one of the first approaches that people took when attempting to replace table-based layouts, it was floating content that opened the doors of possibility. Sementara posisi absolut adalah salah satu pendekatan pertama yang orang ambil ketika mencoba untuk mengganti layout berbasis tabel, itu mengambang konten yang membuka pintu kemungkinan. Along with learning how to float, you must also learn how to clear floats so that content that follows or backgrounds will appear correctly. Seiring dengan belajar bagaimana untuk mengapung, Anda juga harus belajar bagaimana untuk menghapus mengapung sehingga konten yang berikut atau latar belakang akan muncul dengan benar.

Sizing Using Ems Ukuran Menggunakan Ems

There are two different issues at play here when it comes to sizing with ems: fonts and layouts. Ada dua isu yang berbeda pada bermain di sini ketika datang ke ukuran dengan ems: font dan layout.
With fonts, Internet Explorer 6 and lower don't allow you to resize the text when specified using pixels (px). Dengan font, Internet Explorer 6 dan lebih rendah tidak memungkinkan Anda untuk mengubah ukuran teks ketika ditentukan menggunakan pixel (px). Those with vision issues may wish to set their font size larger in order to more readily read what you've written. Mereka dengan masalah visi mungkin ingin mengatur ukuran font yang lebih besar agar lebih mudah membaca apa yang telah Anda tulis. Specifying your font sizes using ems has proven to be the popular approach to this problem. Menentukan ukuran font Anda menggunakan ems telah terbukti menjadi pendekatan yang populer untuk masalah ini. The importance of sizing text using ems is waning as users move on to better browsers. Pentingnya ukuran teks menggunakan ems adalah waning sebagai pengguna beralih ke browser yang lebih baik.
Sizing layouts with ems can also offer up a whole other avenue of flexibility. Ukuran layout dengan ems juga dapat menawarkan sebuah jalan lain seluruh fleksibilitas. When playing with text size, it can often throw an entire design out of whack. Ketika bermain dengan ukuran teks, sering kali dapat melempar seluruh desain keluar yang mendera. Styling elements using ems allow the containers of content to grow along with the text, maintaining the consistency of the design. Styling elemen menggunakan ems memungkinkan kontainer konten untuk tumbuh bersama dengan teks, menjaga konsistensi desain.

Image Replacement Penggantian image

Boring text elements dont' excite us. Elemen teks membosankan dont 'menggairahkan kita. We want to use lots of graphical flair along with gradients and glass effects. Kami ingin menggunakan banyak bakat grafis bersama dengan gradien dan efek kaca. And we want to use custom fonts; fonts that browsers just can't offer us yet. Dan kita ingin menggunakan font kustom; font yang browser tidak bisa menawarkan kita belum. Image replacement techniques allow us to replace the existing content-rich and SEO -friendly text with stylish images or Flash files with embedded fonts. Gambar teknik penggantian memungkinkan kita untuk mengganti yang ada konten yang kaya dan SEO-friendly teks dengan gambar gaya atau file Flash dengan font tertanam.

Revised Image Replacement Revisi Gambar Penggantian
Sums up most, if not all, of the image replacement techniques currently in use Merangkum sebagian besar, jika tidak semua, dari gambar teknik pengganti yang sedang digunakan
sIFR 2 with documentation and sIFR 3 is in development sIFR 2 dengan dokumentasi dan sIFR 3 adalah dalam pengembangan

Floated Navigation Navigasi melayang

If you've mastered floating columns, the other tricky piece to the puzzle and one that is heavily used, is floated navigation. Jika Anda sudah menguasai kolom mengambang, bagian rumit lain untuk teka-teki dan salah satu yang banyak digunakan, adalah navigasi melayang. The web-standards-lovin' folk love their unordered lists of navigation and there are a myriad of ways to style them up. Rakyat web-standar-lovin 'cinta daftar mereka unordered navigasi dan ada segudang cara untuk gaya mereka.

Sprites Sprite

Like video games of yore, packing multiple images into one single image has become a popular technique to solve a couple problems. Seperti video game dahulu kala, pengepakan beberapa gambar menjadi satu gambar tunggal telah menjadi teknik yang populer untuk memecahkan masalah pasangan. The first is CSS-based rollovers. Yang pertama adalah berbasis CSS rollovers. More recently, it's been proven to be advantageous to combine multiple images — in particular background images used in image replacement techniques — into a single file. Baru-baru ini, sudah terbukti menguntungkan untuk menggabungkan beberapa gambar - di gambar latar belakang tertentu yang digunakan dalam teknik gambar penggantian - menjadi sebuah file tunggal. This reduces the number of requests your browser has to make, improving the time required to download all files from your server. Hal ini akan mengurangi jumlah permintaan browser Anda harus membuat, meningkatkan waktu yang dibutuhkan untuk men-download semua file dari server Anda.

Fast Rollovers without Preload Cepat Perpanjangan tanpa Preload
CSS Sprites: Image Slicing's Kiss of Death CSS Sprite: Ciuman Gambar Mengiris dari Kematian
Reducing HTTP Requests Mengurangi Permintaan HTTP sumber :http://translate.google.co.id/translate?hl=id&langpair=en|id&u=http://snook.ca/archives/html_and_css/six_ke

Pengertian CSS Border Padding dan Margin

Seringkali kita dengar yang namanya CSS Border, padding dan margin. mungkin sebagian teman blogger belum mengerti apa yang dimaksud dengan itu semua, yang bagi mengerti cukup simak jika ada kesalahan tolong comment, maklum saya juga masih belajar. Nah disini saya akan menjelaskan maksud dan kegunaannya. Semoga Article ini bermanfaat bagi teman blogger yang sering utak-atik atau mengedit tamplate.

Pengertian dari CSS Border, padding dan margin itu adalah:

Border : Merupakan garis tepi dari komponen
Margin : merupakan ukuran jarak bagian luar atau ukuran jarak sesudah border
Padding : Menentukan jarak komponen body content ke border atau ukuran jarak bagian dalam

Cara penulisan dan penggunaan kode CSS

Border di tulis dengan CSS

border:1px dotted #000000; : artinya ukuran tebal border, style border dan warna border
atau anda bisa menuliskannya seperti ini:
border-width:1px; : adalah nilai tebal border
border-style:dotted; : adalah jenis border dan bisa anda ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainnya
atau anda bisa menuliskannya seperti ini:
border-color:#FFFFFF; : adalah warna border dan anda bisa mengganti warnanya
Margin di tulis dengan CSS

margin:5px 5px 5px 5px; : urutan nilai angka untuk atas, kanan, bawah dan kiri
atau anda bisa menuliskannya seperti ini:
margin-left:5px; : untuk pengaturan margin bagian kiri
margin-right:5px; : untuk pengaturan margin bagian kanan
margin-top:5px; : untuk pengaturan margian bagian atas
margin-bottom:5px; : untuk pengaturan margin bagian bawah

Pada kode CSS tersebut, satuan yang digunakan adalah pixel disingkat dengan "px" yang bisa anda ganti dengan satuan lain.
Padding ditulis dengan CSS

padding:5x 5px 5px 5px; : urutan nilai angka atas, kanan, bawah dan kiri
atau anda bisa menuliskannya seperti ini:
padding-left:5px; : untuk pengaturan padding bagian kiri
padding-right:5px; : untuk pengaturan padding kanan
padding-top:5px; : untuk pengaturan padding atas
padding-bottom:5px; : untuk pengaturan padding bawah

pada kode CSS tersebut, satuan yang digunakan adalah pixel disingkat dengan "px" yang bisa anda ganti dengan satuan lain.

Satuan dalam CSS

Statik

in = satuan inchi
cm = satuan centimeter
mm = satuan milimeter
pt = satuan point (1 point = 1/72 inchi)
pc = satuan pica (1 pica = 12 point)
px = satuan pixel (satu titik gambar terkecil dalam layar monitor)
Relatif

% = satuan persen
em atau ems = 1em = ukuran font yang tengah ada dalam elemen
ex - 1ex = x-height suatu font (x-height biasanya setengah ukuran font)

Selamat mencoba............

sumber :http://jayaputrasbloq.blogspot.com/2009/11/pengertian-css-border-padding-dan.html

Pengertian css beserta fungsi,sejarah,sifat dan contoh penggunaan css

Pengertian dan fungsi CSS
Cascading Style Sheet (CSS) adalah salah satu bahasa pemrograman web yang digunakan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS dapat kita gunakan dalam mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS bisa juga diartikan sebagai bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk suatu hubungan layaknya hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.

Sifat CSS
Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain.

Contoh:

<html>
<head>
<style type="text/CSS">
body{background:#ffffff;}
h1{color:red;text-align:center;}
p{font-family:arial;font-size:18px;}
</style>
</head>
<body>
<h1>Contoh CSS</h1>
<p>Ini adalah bagian penulisan paragrap.</p>
</body>
</html>

Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus.

Contoh :

<html>
<head>
<link rel="stylesheet" type="text/CSS" media="all" href="url CSS yang sudah diupload" />
</head>
<body>
<h1>Contoh CSS</h1>
<p>Ini adalah bagian penulisan paragrap.</p>
</body>
</html>

sumber : http://www.bloggerblur.com/2011/07/pengertian-css-beserta-fungsi.html

Belajar Dasar-Dasar web Dengan HTML

Komponen-komponen layanan yang tesedia oleh internet sejak awal hingga kini terus berkembang, semakin banyak dan sangat beragam baik sifat maupun manfaatnya. Komponen yang dimaksud bisa berarti layanan internet, piranti (tool), utiliti atau sistem tertentu di internet. Sejalan dengan berkembangnya internet, komponen-komponen tersebut berubah-ubah jumlahnya setiap saat. Untuk mengakses layanan-layanan di internet, diperlukan komponen-komponen program client yang spesifik yang terinstal pada komputer pengguna internet. Komponen-komponen layanan internet yang berhubungan dengan web dijelaskan dibawah ini.

a. Web Browser
Web Browser merupakan salah satu jenis program client yang dapat mengakses beberapa layanan internet. Untuk mengakses layanan tertentu pada jaringan internet, web browser menggunakan konsep URL (Uniform Resources Locator) untuk menuliskan alamat yang akan diakses. Web browser saat ini yang banyak digunakan seperti Internet Explorer, Netscape, GodZilla, Opera, dan sebagainya.
b. WWW (World-Wide Web)
Layanan WWW (3W) atau biasa juga disebut Web merupakan jenis layanan yang paling popular dikalangan pengguna internet. WWW tidak hanya berfungsi sebagai media untuk mencari informasi, tetapi Web sudah banyak digunakan secara komersial oleh hampir semua perusahaan-perusahaan di seluruh dunia untuk mengiklankan usaha mereka. Setiap dokumen yang ditulis menggunakan suatu format standar yang disebut HTML (HyperText Markup Language).
Dokumen yang ditransfer antar Web Server menggunakan suatu protokol yang disebut HTTP (HyperText Transfer Protocol). Web saat ini telah semakin dinamis, interaktif dan cerdas dengan bahasa pemrograman yang dikembangkan untuk menutupi kekurangan yang terdapat pada HTML sebagai bahasa standar untuk Web. Kalau dulu suatu Web hanya dapat menyajikan informasi, saat ini suatu Web telah dapat berinteraksi dengan pengguna melalui pengisian form, validasi input atau transaksi online. Untuk mengkases Web, dapat digunakan Web Browser seperti Netscape Navigator, Internet Explorer, Neoplanet, Mosaic dan lain sebagainya.

World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling populer. WWW bekerja merdasarkan pada tiga mekanisme berikut:

Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.
Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat internet.
HTML digunakan untuk membuat document yang bisa di akses melalui web. Ini merupakan script dasar web yang akan dipelajari dalam tutorial i

sumber:http://ajimedia.com/27/belajar-dasar-dasar-web-dengan-html-bab1-pendahuluan .

Pengertian Web Browser

Web Browser adalah suatu program yang digunakan untuk menjelajahi dunia Internet atau untuk mencari informasi tentang suatu halaman web yang tersimpan di komputer. Awalnya, web browser hanya berorientasi pada teks dan belum dapat menampilkan gambar.

Namun, web browser sekarang tidak hanya menampilkan gambar dan teks saja, tetapi juga memutar file multimedia. Browser juga dapat mengirim dan menerima email, mengolah bahasa HTML sebahai input dan menjadikan halaman web sebagai output yang informatif.

Contoh web browser antara lain : Internet Explorer, Mozilla Firefox, Opera, netscape, dll.

Hal yang perlu diketahui dalam penjelajahan internet adalah pemahaman struktur alamat web, misalkan http://www.google.com maka alamat tersebut dapat diartikan :

~ http : service transfer web (protokol)
~ www : jaringan situs web terbesar sebagai pengelola pengalamatan situs web
~ google : nama wilayah (domain) , yaitu nama sebagai institusi sebuah web
~ com : nama akhir domain, biasanya menunjukkan bidang situs tersebut

sumber:http://renditkj.blogspot.com/2008/07/pengertian-web-browser.html

Pengertian & Dasar-dasar HTML

HTML yang sering sisebut juga Hypertext markup language merupakan salah satu format atau kode yang digunakan untuk pembuatan aplikasi atau document yang berada di halaman web. Sebelum membelajari HTML anda harus mengetahui basic HTML ,yang terdiri dari:

Hypertext

Tags dan elements

Text formatting

Lists, hyperlinks, images

Table, frames

Cascanding style sheets

2. Dasar-Dasar HTML

HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer data-data web yang ditulis atau berformat HTML.

Dikatakan markup language karena HTML berfungsi untuk memformat file dokumen teks biasa untuk bisa ditampilkan pada web browser sesuai keinginan. Hal tersebut dapat dilakukan dengan menambah elemen atau sering disebut sebagai tagtag.

Elemen HTML biasanya berupa tag-tag yang berpasangan dan setiap tag ditandai dengan simbol ` <` dan ` >` tanpa tanda kutip . Pasangan dari sebuah tag ditandai dengan tanda `/ ` dan ini menunjukan penutupan suatu tag .

Misalnya pasangan dari tag < contoh > adalah </ contoh > . Dalam hal ini < contoh >disebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen < contoh > bila ditulis dengan

Atributnya adalah sebagai berikut : < contoh atribut1=”nilai_atribut1”atribut2=”nilai_atribut2” …> . Dalam penulisan tag HTML tidaklah case sensitive artinya penggunaan huruf kecil ataupun kapital tidaklah menjadi masalah.

sumber:http://putroweb.blogspot.com/2009/01/pengertian-dasar-dasar-html.html