Konsep Dasar CSS

Welcome to My Blog Bang Udin
By : Bang Udin
Konsep dasar CSS 

Konsep dasar CSS perlu dimenegerti sebelum mulai menerapkannya pada desain web sebagaimana dibahas pada artikel CSS sebelumnya. Artikel ini tidak menjelaskan tips dan trik CSS pada desain web tapi untuk memahami tentang konsep CSS dalam mengubah tampilan halaman web. Sebelum memulai lebih jauh, satu hal yang perlu diingat adalah, CSS merupakan kode yang ditulis untuk menginstruksikan browser bagaimana sebuah halaman web seharusnya ditampilkan seperti apa font yang digunakan, bagaimana tata letak bagian-bagian halaman web, bagaimana paragraf ditampilkan dan lain-lain. Konsep ini berbeda dengan konsep HTML/XHTML dimana kode HTML adalah kode yang digunakan untuk memberi tahu browser apa yang ada dalam sebuah halaman web, meski kita pun bisa mendesain tampilan tanpa menggunakan CSS.

Penggunaan Tag HTML Pada Halaman Web

Pada artikel ini dijelaskan bagaimana CSS digunakan untuk mengatur tampilan tag HTML dasar dalam sebuah halaman web.

Heading

Heading yang berupa tag HTML antara <h1></h1> sampai dengan <h6></h6> adalah tag yang mendefinisikan judul bagian dari sebuah halaman web. Judul yang paling penting dibungkus dengan tag <h1></h1> seperti contohnya <h1>Judul Penting</h1>. Dengan demikian tag <h6></h6> digunakan untuk heading yang sifatnya paling tidak penting dibanding heading lainnya. Secara default, tampilan yang dihasilkan akan berupa teks yang besar. CSS digunakan di sini untuk memperbaiki tampilan yang dihasilkan dari tag tersebut

Paragraph

Paragraph didefinisikan dengan tag <p></p> yaitu untuk menunjukkan bagian mana yang berupa alinea dalam sebuah halaman web.

List

List digunakan untuk membuat daftar pada isi halaman. <ul></ul> digunakan untuk membuat daftar yang tidak berurutan, secara default setiap baris dalam daftar disimbolkan dengan lingkaran hitam (bullet), <ol></ol> digunakan untuk daftar berurutan yang setiap barisnya disimblokan dengan angka. Setiap baris digunakan tag <li></li>.

Division 

Layer digunakan untuk membagi bagian-bagian dalam halaman web. Setiap bagian diawali dengan <div> dan diakhiri dengan </div>.

Hyperlink

Hyperlink adalah text yang menunjukkan kaitan untuk membuka halaman lain, website lain. Hyperlink juga bisa digunakan untuk menjalankan/mengaktifkan javascript. Tag yang digunakan adalah <a />

Image

Menampilkan gambar pada halaman web dengan tag <img />
Satu satunya perbedaan dari source code dua link tersebut di atas adalah penggunaan tag untuk mengkaitkan halaman html dengan file css (stylesheet) yang digunakan, yaitu:
<link rel="stylesheet" href="style.css" media="all" />
File yang digunakan pada demo di atas dapat diunduh pada link ini.
Kode-kode CSS dan XHTML secara lengkap juga disertakan pada file tersebut untuk dapat Anda pelajari dan coba sendiri.
 
Prcantik belok anda di bawah ini

Terimakasih  
Troturial Blog :
di
Label: ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Followers

Pengikut

ALL TUTORIAL BLOG

Informasi Baru
Cara Membuat Scroll Bar. Tulisan Berjalan di Addressbar.
Menghilangkan Angka Label.
Cara Hack Chip Zynga.
Membuat GIF Untuk Banner.
Membuat Read more Otomatis.
SEO Blogger/Blogspot Template. Curi Password Flash disk. Cara Buat Title Header Bergerak. Cara Membuat Letak Background Di Kotak Comment. Cara Membuat Menambah Jumlah Yang Di Batasi. Cara Membuat Memasang Widget Sms Gratis. Cara Membuat cursor Pada Blog. Membuat Domain Gratis di CO.CC. Membuat Next Page judul Postingan. Next Page Hanya Judul Postingan. Cara Membuat Efek Heart(Hati). Cara Memasang Meta tag. Cara Membuat meta tag di blog. Cara Membuat Icon,GIF, Flash. Cara Membuat Flash. Cara Membuat Menu Melayang. Cara Membuat Label Berputar. Cara Mengganti Icon Bloger. Cara Membuat Template. Menambah dua kolom dibawah/diatas post body. Cara Membuat Menu Tab View. Safware Pengelola Blog.

Archives