ardian css-01-pengenalan-css-september-2015
Post on 13-Apr-2017
162 Views
Preview:
TRANSCRIPT
Design Web denganHTML & CSS
Ardian Dwi Praba
www.ardiandp.com
WA/SMS: +6285235714803
www.ardiandp.com mail@ardiandp.com
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 mail@ardiandp.com
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 mail@ardiandp.com
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 mail@ardiandp.com
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 mail@ardiandp.com
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 mail@ardiandp.com
www.ard
iandp
.com
www.ardiandp.com
Kenapa Menggunakan CSS untuk WEBSITE?
www.ardiandp.com mail@ardiandp.com
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 mail@ardiandp.com
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 mail@ardiandp.com
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 mail@ardiandp.com
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 mail@ardiandp.com
www.ard
iandp
.com
www.ardiandp.com
Contoh Penulisan Coding CSS untuk WEBSITE
www.ardiandp.com mail@ardiandp.com
www.ard
iandp
.com
www.ardiandp.com
Contoh Design
1
2
3 4 5
6
0www.ardiandp.com mail@ardiandp.com
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 mail@ardiandp.com
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 mail@ardiandp.com
www.ard
iandp
.com
www.ardiandp.com
Latihan Membuat Design dengan CSS
www.ardiandp.com mail@ardiandp.com
www.ard
iandp
.com
www.ardiandp.com
Latihan 1
www.ardiandp.com mail@ardiandp.com
HEADER WESBITE
www.ard
iandp
.com
www.ardiandp.com
Latihan 2
www.ardiandp.com mail@ardiandp.com
HEADER WESBITE
www.ard
iandp
.com
www.ardiandp.com
top related