Dokumen tersebut membahas pengantar mengenai HTML dan CSS. HTML digunakan untuk menyusun struktur konten halaman web menggunakan tag, sedangkan CSS digunakan untuk mengatur tampilan dan tata letak konten menggunakan aturan gaya. Diberikan contoh penulisan kode HTML dan CSS beserta kegunaannya.

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 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

3. 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

4. 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

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. 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

7. Kenapa Menggunakan CSS
untuk WEBSITE?
www.ardiandp.com mail@ardiandp.com
w
w
w
.ardiandp.com

8. 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

9. 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

10. 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

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
CSS untuk WEBSITE
www.ardiandp.com mail@ardiandp.com
w
w
w
.ardiandp.com

13. Contoh Design
1
2
3 4 5
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 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

16. Latihan Membuat Design
dengan CSS
www.ardiandp.com mail@ardiandp.com
w
w
w
.ardiandp.com

17. Latihan 1
www.ardiandp.com mail@ardiandp.com
HEADER WESBITE
w
w
w
.ardiandp.com

18. Latihan 2
www.ardiandp.com mail@ardiandp.com
HEADER WESBITE
w
w
w
.ardiandp.com