W3.CSS Template

Mengatur Tampilan Web Dengan CSS 3
SUBSTANSI :

Pengertian CSS
Fakta Menggunakan CSS
3 Cara Menginputkan CSS ke HTML
Pengertian Selector, Property dan Value
5 Jenis Selector CSS
Latihan Penggunaan Selector CSS

1. Pengertian CSS

Merupakan singkatan dari "Cascading Style Sheets" yang berarti The process of combining several style sheets and resolving conflicts atau Proses menggabungkan beberapa style sheet dan menyelesaikan konflik di antara mereka. yaitu standard pembuatan dan pemakaian style untuk dokumen terstruktur, guna mempersingkat penulisan tag HTML seperti font, color, text dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.
(Ref : http://people.opera.com/howcome/2006/phd/#h-357).

2. Fakta Menggunakan CSS

Telah didukung oleh kebanyakan browser versi terbaru, namun tidak didukung oleh browser-browser lama
Lebih fleksibel dalam penempatan posisi layout
Menjaga HTML agar tetap minimalis atau penggunaan tag yang minimal.

3. Cara Menginputkan CSS ke HTML

1. Metode Inline Style

2. Metode Internal Style Sheets

Sehingga memberikan efek secara masal terhadap < h1 >

3. Metode External Style Sheets
Pada metode ini, halaman CSS atau file CSS berdiri sendiri dengan extensi file.css kemudian untuk memanggilnya dari halaman HTML, maka caranya adalah dengan mencantumkan link yang menuju file tersebut (bisa online maupun offline). Berikut ini adalah contoh offlinenya :

Berikut ini adalah isi dari file "belajar css3.css";

Sehingga efeknya pun akan sama seperti sebelumnya;

4. Pengertian Selector, Property dan Value

Selector adalah elemen/tag HTML yang ingin diberi style.
Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna background, jarak antar elemen, garis pinggir dan lain sebagainya.
sedangkan, Value adalah nilainya.

5 Jenis Selector CSS

1. Universal Selector adalah sebuah pola (pattern) yang digunakan untuk ‘mencari’ suatu tag di dalam HTML.

Contoh :

* {

color: blue;

background-color: white;

}

2. Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya adalah tag HTML itu sendiri. Contoh :

h1 {

text-decoration: underline;

}

p {

font-size:14px;

}

3. Class Selector. Class Selector akan ‘mencari’ seluruh tag yang memiliki atribut class dengan nilai yang sesuai. Contoh :

.paragraf_pertama {

color: red;

}

.judul {

font-size:20px

}

Implementasi pada HTML :

4. ID Selector. Penggunaannya mirip dengan class selector. Contoh :

#paragraf_ pembuka {

color: red;

}

#judul utama {

font-size:20px

}

Implementasi pada HTML :

5. Attribute Selector

Selector ini akan mencari seluruh tag yang memiliki atribut yang dituliskan. Contoh :

[href] {

font-size:20px ;

}

[type="submit"] {

width:30px;

}

6. Latihan Penggunaan Selector CSS

Code :

        
<!DOCTYPE html>

<html>

<head>

<title>Hello World, Latihan Membuat Halaman (title)</title>

</head>

<body>

<style type="text/css">

h1 { background-color:black; color:white;}

h3 { font-style:strong; color:blue; }

h2 { font-style:italic; color:green; }

p { color: red; }

</style>

<!-- element semantik harus berada diantara tag body -->

<!-- <header>...</header> Pada umumnya berisi logo, slogan, navigasi, 

atau form pencarian.-->

<header>Pemrograman Web Statis (header) </header>

<!-- <nav>...</nav> element nav, digunakan untuk membuat menu link navigasi -->

<nav>

<ul>

<li><a href="www.gatewan.com">HOME (li)</a></li>

<li><a href="http://www.gatewan.com/2014/07/about-gatewawan.html">About Me (li)</a></li>

<li><a href="http://www.gatewan.com/2014/11/contact-us.html">Buku Tamu (li)</a></li>

</ul>

<!-- <article>...</article> element ini digunakan untuk konten artikel, berita atau opini. 

jika dalam satu halaman hanya terdiri 1 artikel, bisa saja langsung menggunakan 

konten <section>...</section>, akan tetapi itu menyalahi aturan semantik pada HTML5, 

jadi meskipun artikel cuman 1 tetap harus menggunakan elemen <article>...</article> -->

<article>

<header>

<h1>

Artikel Ke-1 (h1)

</h1>

</header>

<br />

<br />	

<!-- <section>...</section> element section, digunakan untuk menunjukan 

		bagian yang berbeda pada sebuah halaman web anda. section bisa digunakan 

		lebih dari satu, sesuai kebutuhan. misal section pada artikel, section 

		pada menu samping (a side). -->

<section>

#Artikel Pertama, Ini adalah latihan pertama saya dalam belajar HTML5 Tingkat Pemula (section)

</section>

</article>

<br />

<br />

<article>

<header>

<!-- <hgroup>...</hgroup> element ini biasa digunakan pada artikel, untuk pengelompokan

		tag heading yang lebih dari satu. -->

<hgroup>

<h1>Pemrograman Web Statis (h1) </h1>

<h2>Menggunakan HTML5 Tingkat Dasar (h2) </h2>

<h3>Oleh Wawan Beneran (Newbie) (h3) </h3>

</hgroup>

<br />

<br />			

</header>

<section>

#Artikel Kedua, Ini adalah latihan pertama saya dalam belajar HTML5 Tingkat Pemula (section)

</section>

<br />

<br />		

<!-- <p>...</p> element tag paragraf ini digunakan untuk mengindikasikan suatu paragrap

		dalam element artikel.-->

<p>

#Ini Paragraph pertama, dummy text dummy text dummy text dummy text dummy text dummy text

dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text 

dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text 

dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text.

(p)

</p>

<br />

<br />

<p>

#Ini Paragraph kedua, dummy text dummy text dummy text dummy text dummy text dummy text

dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text 

dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text 

dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text.

(p)

</p>

<br />

<br />

<!-- <aside>...</aside> element ini dirancang berada pada element artikel, biasa digunakan

		untuk menampilkan berita terkait, kutipan atau gambar terkait.-->

<aside>Rekomendasi Artikel Terkait "Sejarah HTML5" (aside)</aside>

<aside>Rekomendasi Artikel Terkait "Pengembang HTML5" (aside)</aside>

</article>

<br />

<br />

<!-- <figure>...<figcaption>...</figcaption></figure> element figure ini dirancang untuk menampilkan 

data personal, sedangkan figcaption untuk menampilkan keterangan gambar. -->

<figure>

<center>

<img width="150" height="150" src="https://pbs.twimg.com/profile_images/542714882974441474/j0yC-wkb_400x400.png" alt="ini logo gatewan" />

<figcaption>

Ini merupakan Icon Aplikasi Gatewan (figcaption)

</figcaption>

</center>

</figure>

<br />

<br />

<br />

<br />

<!-- <footer>...</footer> element footer biasa digunakan untuk 

navigasi link tambahan kedua, atau untuk legal /copyright suatu halaman website.-->

<footer># footer -- Copyright <a href="www.gatewan.com">GATEWAN</a> 2015 - All Right Reserved</footer>

</body>

</html>

selamat belajar moga sukses selalu

rabiynet

Add Comment

artikel

Rabu, 20 Mei 2015

RABIYNET

PKP, PKA, PKN, Lelang Jabatan, Tugas Kuliah, Skripsi, Tesis

Mengatur Tampilan Web Dengan CSS 3

1. Pengertian CSS

2. Fakta Menggunakan CSS

3. Cara Menginputkan CSS ke HTML

5 Jenis Selector CSS

6. Latihan Penggunaan Selector CSS