Design Web dengan
HTML & CSS
Ardian Dwi Praba
www.ardiandp.com
WA/SMS: +6285235714803
www.ardiandp.com mail@ardiandp.com
w
w
w
.ardiandp.com
HTML
HTML adalah kependekan dari Hyper Text Markup Language yang
artinya bahasa penandaan halaman web. Elemen HTML yang disebut
dengan TAG digunakan untuk menyusun struktur isi halaman web.
HTML ditulis dengan struktur tertentu yang menginformasikan kepada
browser tentang susunan isi halaman yang di tampilkan.
www.ardiandp.com mail@ardiandp.com
w
w
w
.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 awal
heading 1, dan baris kedua sebuah paragraf. Heading dianggap
sebagai sebuah kata pembuka atau judul dari halaman, sedangkan
paragraf adalah sebagai isi halaman.
HTML bisa berdiri sendiri tanpa ada pendukung lainya seperti css.
www.ardiandp.com mail@ardiandp.com
w
w
w
.ardiandp.com
CSS
CSS adalah kependekan dari Cascading Style Sheet yang artinya
pengatur gaya dokumen. CSS digunakan untuk mengatur tampilan
struktur isi halaman web.
Karena css digunakan untuk mengatur tampilan struktur isi maka css
harus mengacu pada elemen tertentu dari dokumen yang diformat
www.ardiandp.com mail@ardiandp.com
w
w
w
.ardiandp.com
Contoh CSS
h1 { color : #000;font-size:20px; }
.tengah { text-align:center; }
Contoh css diatas digunakan untuk mengatur format semua elemen
h1 sehinga ditampilkan dengan warna:#000 (hitam) dan font-
size:20px (ukuran tulisan 20 pixel).
Sedangkan .tengah adalah sebuah class yang dapat ditempelkan pada
elemen tertentu seperti p, div, dll. Misal : <p class="tengah">..</p>
sehingga furmat paragraf berubah menjadi rata tengah.
www.ardiandp.com mail@ardiandp.com
w
w
w
.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
w
w
w
.ardiandp.com
Kenapa Menggunakan CSS
untuk WEBSITE?
www.ardiandp.com mail@ardiandp.com
w
w
w
.ardiandp.com
Kenapa CSS -1
CSS sangat mudah digunakan
Hal ini tidak bisa dipungkiri bahwa untuk menggunakan css kita tidak
memerlukan waktu yang lama dan tidak harus menuliskan baris
perintah yang banyak untuk menerapkan teknologi CSS pada WEB
atau BLOG kita
www.ardiandp.com mail@ardiandp.com
w
w
w
.ardiandp.com
Kenapa CSS -2
CSS didukung oleh hampir semua jenis browser
CSS tidak hanya bisa ditampilkan pada jenis browser-browser ternama
saja, tapi juga bisa ditampilkan dengan aplikasi-aplikasi sejenis
walaupun pada media yang sangat minimal seperti ponsel atau
perangat gadget lainnya
www.ardiandp.com mail@ardiandp.com
w
w
w
.ardiandp.com
Kenapa CSS -3
CSS dapat diterapkan dengan banyak cara
Untuk menggunakan css kita bisa gunakan beberapa cara seperti
mendeklarasikan pada bagian head, membuat file css secara terpisah,
mendeklarasikan pada saat diperlukan dan menempelkan pada TAG
html
www.ardiandp.com mail@ardiandp.com
w
w
w
.ardiandp.com
Kenapa CSS -4
• CSS membuat kontrol terpusat sehingga tidak perlu
merubah semua halaman
• CSS mempercepat tampilnya sebuah halaman
• CSS meminimalkan penggunaan bandwidth
• Penulisan kode HTML menjadi lebih sederhana sehingga lebih
disukai mesin pencari
• CSS dapat melakukan apa yang tidak bisa dilakukan oleh HTML
Dengan css kita bisa menempatkan sebuah objek pada lokasi yang
bebas dalam posisi layar
• CSS menghasilkan tampilan yang lebih baik
www.ardiandp.com mail@ardiandp.com
w
w
w
.ardiandp.com
Contoh Penulisan Coding
CSS untuk WEBSITE
www.ardiandp.com mail@ardiandp.com
w
w
w
.ardiandp.com
Contoh Design
1
2
3 4 5
6
0
www.ardiandp.com mail@ardiandp.com
w
w
w
.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
w
w
w
.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
w
w
w
.ardiandp.com
Latihan Membuat Design
dengan CSS
www.ardiandp.com mail@ardiandp.com
w
w
w
.ardiandp.com
Latihan 1
www.ardiandp.com mail@ardiandp.com
HEADER WESBITE
w
w
w
.ardiandp.com
Latihan 2
www.ardiandp.com mail@ardiandp.com
HEADER WESBITE
w
w
w
.ardiandp.com

Ardian css-01-pengenalan-css-september-2015

  • 1.
    Design Web dengan HTML& CSS Ardian Dwi Praba www.ardiandp.com WA/SMS: +6285235714803 www.ardiandp.com mail@ardiandp.com w w w .ardiandp.com
  • 2.
    HTML HTML adalah kependekandari Hyper Text Markup Language yang artinya bahasa penandaan halaman web. Elemen HTML yang disebut dengan TAG digunakan untuk menyusun struktur isi halaman web. HTML ditulis dengan struktur tertentu yang menginformasikan kepada browser tentang susunan isi halaman yang di tampilkan. www.ardiandp.com mail@ardiandp.com w w w .ardiandp.com
  • 3.
    Contoh HTML <h1>Ini contohHeading</h1> <p>Ini adalah contoh sebuah paragraf dalam HTML</p> dengan tag diatas, browser akan menampilkan isi dengan baris awal heading 1, dan baris kedua sebuah paragraf. Heading dianggap sebagai sebuah kata pembuka atau judul dari halaman, sedangkan paragraf adalah sebagai isi halaman. HTML bisa berdiri sendiri tanpa ada pendukung lainya seperti css. www.ardiandp.com mail@ardiandp.com w w w .ardiandp.com
  • 4.
    CSS CSS adalah kependekandari Cascading Style Sheet yang artinya pengatur gaya dokumen. CSS digunakan untuk mengatur tampilan struktur isi halaman web. Karena css digunakan untuk mengatur tampilan struktur isi maka css harus mengacu pada elemen tertentu dari dokumen yang diformat www.ardiandp.com mail@ardiandp.com w w w .ardiandp.com
  • 5.
    Contoh CSS h1 {color : #000;font-size:20px; } .tengah { text-align:center; } Contoh css diatas digunakan untuk mengatur format semua elemen h1 sehinga ditampilkan dengan warna:#000 (hitam) dan font- size:20px (ukuran tulisan 20 pixel). Sedangkan .tengah adalah sebuah class yang dapat ditempelkan pada elemen tertentu seperti p, div, dll. Misal : <p class="tengah">..</p> sehingga furmat paragraf berubah menjadi rata tengah. www.ardiandp.com mail@ardiandp.com w w w .ardiandp.com
  • 6.
    Kemampuan CSS 1. Memformatbanyak 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 w w w .ardiandp.com
  • 7.
    Kenapa Menggunakan CSS untukWEBSITE? www.ardiandp.com mail@ardiandp.com w w w .ardiandp.com
  • 8.
    Kenapa CSS -1 CSSsangat mudah digunakan Hal ini tidak bisa dipungkiri bahwa untuk menggunakan css kita tidak memerlukan waktu yang lama dan tidak harus menuliskan baris perintah yang banyak untuk menerapkan teknologi CSS pada WEB atau BLOG kita www.ardiandp.com mail@ardiandp.com w w w .ardiandp.com
  • 9.
    Kenapa CSS -2 CSSdidukung oleh hampir semua jenis browser CSS tidak hanya bisa ditampilkan pada jenis browser-browser ternama saja, tapi juga bisa ditampilkan dengan aplikasi-aplikasi sejenis walaupun pada media yang sangat minimal seperti ponsel atau perangat gadget lainnya www.ardiandp.com mail@ardiandp.com w w w .ardiandp.com
  • 10.
    Kenapa CSS -3 CSSdapat diterapkan dengan banyak cara Untuk menggunakan css kita bisa gunakan beberapa cara seperti mendeklarasikan pada bagian head, membuat file css secara terpisah, mendeklarasikan pada saat diperlukan dan menempelkan pada TAG html www.ardiandp.com mail@ardiandp.com w w w .ardiandp.com
  • 11.
    Kenapa CSS -4 •CSS membuat kontrol terpusat sehingga tidak perlu merubah semua halaman • CSS mempercepat tampilnya sebuah halaman • CSS meminimalkan penggunaan bandwidth • Penulisan kode HTML menjadi lebih sederhana sehingga lebih disukai mesin pencari • CSS dapat melakukan apa yang tidak bisa dilakukan oleh HTML Dengan css kita bisa menempatkan sebuah objek pada lokasi yang bebas dalam posisi layar • CSS menghasilkan tampilan yang lebih baik www.ardiandp.com mail@ardiandp.com w w w .ardiandp.com
  • 12.
    Contoh Penulisan Coding CSSuntuk WEBSITE www.ardiandp.com mail@ardiandp.com w w w .ardiandp.com
  • 13.
    Contoh Design 1 2 3 45 6 0 www.ardiandp.com mail@ardiandp.com w w w .ardiandp.com
  • 14.
    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 w w w .ardiandp.com
  • 15.
    Kolom.html <html> <head> <title> 3 kollombrow </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 w w w .ardiandp.com
  • 16.
    Latihan Membuat Design denganCSS www.ardiandp.com mail@ardiandp.com w w w .ardiandp.com
  • 17.
  • 18.