ardian css-01-pengenalan-css-september-2015
TRANSCRIPT
Design Web denganHTML & CSS
Ardian Dwi Praba
www.ardiandp.com
WA/SMS: +6285235714803
www.ardiandp.com [email protected]
www.ard
iandp
.com
www.ardiandp.com
HTMLHTML adalah kependekan dari Hyper Text Markup Language yangartinya bahasa penandaan halaman web. Elemen HTML yang disebutdengan TAG digunakan untuk menyusun struktur isi halaman web.HTML ditulis dengan struktur tertentu yang menginformasikan kepadabrowser tentang susunan isi halaman yang di tampilkan.
www.ardiandp.com [email protected]
www.ard
iandp
.com
www.ardiandp.com
Contoh HTML
<h1>Ini contoh Heading</h1>
<p>Ini adalah contoh sebuah paragraf dalam HTML</p>
dengan tag diatas, browser akan menampilkan isi dengan baris awalheading 1, dan baris kedua sebuah paragraf. Heading dianggapsebagai sebuah kata pembuka atau judul dari halaman, sedangkanparagraf adalah sebagai isi halaman.
HTML bisa berdiri sendiri tanpa ada pendukung lainya seperti css.
www.ardiandp.com [email protected]
www.ard
iandp
.com
www.ardiandp.com
CSS
CSS adalah kependekan dari Cascading Style Sheet yang artinyapengatur gaya dokumen. CSS digunakan untuk mengatur tampilanstruktur isi halaman web.
Karena css digunakan untuk mengatur tampilan struktur isi maka cssharus mengacu pada elemen tertentu dari dokumen yang diformat
www.ardiandp.com [email protected]
www.ard
iandp
.com
www.ardiandp.com
Contoh CSS
h1 { color : #000;font-size:20px; }
.tengah { text-align:center; }
Contoh css diatas digunakan untuk mengatur format semua elemenh1 sehinga ditampilkan dengan warna:#000 (hitam) dan font-size:20px (ukuran tulisan 20 pixel).
Sedangkan .tengah adalah sebuah class yang dapat ditempelkan padaelemen tertentu seperti p, div, dll. Misal : <p class="tengah">..</p>sehingga furmat paragraf berubah menjadi rata tengah.
www.ardiandp.com [email protected]
www.ard
iandp
.com
www.ardiandp.com
Kemampuan CSS
1. Memformat banyak dokumen hanya dengan satu file css
2. Mengatur susunan layout dokumen
3. Mengatur tampilan dalam berbagai format output seperti printer,layar monitor, mobile dll
4. Menambah fitur kontrol dokumen seperti show, hide, visible dll
www.ardiandp.com [email protected]
www.ard
iandp
.com
www.ardiandp.com
Kenapa Menggunakan CSS untuk WEBSITE?
www.ardiandp.com [email protected]
www.ard
iandp
.com
www.ardiandp.com
Kenapa CSS -1
CSS sangat mudah digunakan
Hal ini tidak bisa dipungkiri bahwa untuk menggunakan css kita tidakmemerlukan waktu yang lama dan tidak harus menuliskan barisperintah yang banyak untuk menerapkan teknologi CSS pada WEBatau BLOG kita
www.ardiandp.com [email protected]
www.ard
iandp
.com
www.ardiandp.com
Kenapa CSS -2
CSS didukung oleh hampir semua jenis browser
CSS tidak hanya bisa ditampilkan pada jenis browser-browser ternamasaja, tapi juga bisa ditampilkan dengan aplikasi-aplikasi sejeniswalaupun pada media yang sangat minimal seperti ponsel atauperangat gadget lainnya
www.ardiandp.com [email protected]
www.ard
iandp
.com
www.ardiandp.com
Kenapa CSS -3
CSS dapat diterapkan dengan banyak cara
Untuk menggunakan css kita bisa gunakan beberapa cara sepertimendeklarasikan pada bagian head, membuat file css secara terpisah,mendeklarasikan pada saat diperlukan dan menempelkan pada TAGhtml
www.ardiandp.com [email protected]
www.ard
iandp
.com
www.ardiandp.com
Kenapa CSS -4
• CSS membuat kontrol terpusat sehingga tidak perlumerubah semua halaman
• CSS mempercepat tampilnya sebuah halaman
• CSS meminimalkan penggunaan bandwidth
• Penulisan kode HTML menjadi lebih sederhana sehingga lebihdisukai mesin pencari
• CSS dapat melakukan apa yang tidak bisa dilakukan oleh HTMLDengan css kita bisa menempatkan sebuah objek pada lokasi yangbebas dalam posisi layar
• CSS menghasilkan tampilan yang lebih baik
www.ardiandp.com [email protected]
www.ard
iandp
.com
www.ardiandp.com
Contoh Penulisan Coding CSS untuk WEBSITE
www.ardiandp.com [email protected]
www.ard
iandp
.com
www.ardiandp.com
Style.css#halaman { width:980px; margin:0 auto; } [0]
#header { height:100px; padding:10px;background-color:#0F6; } [1]
#kiri { height:100px; padding:10px; background-color:#6F6; float:left;width:200px; } [3]
#kanan { height:100px; padding:10px;background-color:#CC3;float:right;width:200px; } [5]
#tengah { height:100px; padding:10px;background-color:#CC9; } [4]
#footer { clear:both; height:50px;padding:10px; background-color:#CCCCCC; } [6]
#nav { height:20px; padding:10px;background-color:#330; } [2]
www.ardiandp.com [email protected]
www.ard
iandp
.com
www.ardiandp.com
Kolom.html<html>
<head>
<title> 3 kollom brow </title>
<link type="text/css" rel="stylesheet" href="kolom.css" >
</head>
<body>
<div id="halaman">
<div id="header">HEADER</div>
<div id="nav">navigasi</div>
<div id="kiri">KIRI</div>
<div id="kanan">masukan kalender disini </div>
<div id="tengah">TENGAH</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
www.ardiandp.com [email protected]
www.ard
iandp
.com
www.ardiandp.com
Latihan Membuat Design dengan CSS
www.ardiandp.com [email protected]
www.ard
iandp
.com
www.ardiandp.com
