Post on 22-May-2018
HTML & CSSPemrograman Web
Rajif Agung Yunmar, S.Kom
World Wide Web
Kumpulan server web dari seluruh dunia yang mempunyai kegunaan untuk menyediakan data dan informasi untuk dapat digunakan bersama.
Web Architecture
● Server Interconnection● Domain Name Server● Web Server● Client
Web Architecture (Cont.)
Client
DNS ServerWeb Server
Web Browser
● Menampilkan dan melakukan interaksi dengan dokumen-dokumen yang disediakan oleh server web.
● Menterjemahkan kode yang dikirim dari web server untuk ditampilkan ke user.
Web Browser Statistic
● Internet Explorer 22.9%● Firefox 39.7%● Chrome 30.5%● Safari 4.0%● Opera 2.2%
HTML
● Dikembangkan Tim Berners-Lee pada 1990● Menggabungkan hypertext dan internet
HTML
● Digunakan untuk membuat suatu halaman web● Bukan bahasa pemrograman● Terdiri dari markup (penandaan) dengan simbol
lebih kecil ( < ) dan dan lebih besar ( > ) yang biasa disebut tag
HTML vs. XHTML
● Tag harus ditulis dengan huruf kecil● Terdapat penutup untuk setiap tag● Membuka dan menutup tag pada sarang yang
benar● Atribut tag ditulis dengan huruf kecil dan
memakai tanda petik
HTML Element
● Komponen penyusun terkecil dari sebuah dokumen HTML
<p align="center"> ..... </p>
Name Value
Atribut
Content
Tag Pembuka Tag Penutup
Element
HTML Basic Structure
<html> <head> … … </head> <body> … … … … </body></html>
Head
Body
Formatting HTML Document
● Heading● Paragraph● Break● HR● PRE● Etc..
Heading
● Memberikan heading sebuah dokumen● Type
➢ Level 1..6
● Syntax:
<h#> ... </h#>
Heading Example
<html>
<head>
<title>The Heading Element</title>
</head>
<body>
<h1>This is a level one heading.</h1>
<h2>This is a level two heading.</h2>
<h3>This is a level three heading.</h3>
<h4>This is a level four heading.</h4>
<h5>This is a level five heading.</h5>
<h6>This is a level six heading.</h6>
</body>
</html>
Paragraph
● Membuat paragraf● Syntax:
<p> ... </p>
Paragraph Example<html>
<head>
<title>Gathotkaca</title>
</head>
<body>
<p>
Alkisah, Gathot Kaca adalah kesatria sakti anak dari Bima dan Nagagini dari Pringgondani. Kecepatan terbang Gathotkaca seperti kilat da liar seperti halilintar.
<br />
Tiada senjata yang dapat menembus kulitnya, kecuali senjata Kunta Wijayadanu milik Adipati Karna yang sengaja dibuat khusus untuk membunuhnya.
</p>
</body>
</html>
TABLE
● Membuat tabel● <table> mendefinisikan sebuah tebel● <tr> mendefinisikan baris tabel● <th> mendefinisikan judul kolom● <td> mendefinisikan isi tiap kolom
TABLE EXAMPLE<table border="1">
<tr>
<th>Kolom 1</th>
<th>Kolom 2</th>
<th>Kolom 3</th>
</tr>
<tr>
<td>Baris 1 kolom 1</td>
<td>Baris 1 kolom 2</td>
<td>Baris 1 kolom 3</td>
</tr>
<tr>
<td>Baris 2 kolom 1</td>
<td>Baris 2 kolom 2</td>
<td>Baris 2 kolom 3</td>
</tr>
</table>
Formatting Character
● Bold● Italic● Underline● Strike● Font Format● Etc.
Formatting Character Example<html>
<head>
<title>Kerajaan Alengka Diraja</title>
</head>
<body>
<p>
<em>Alengka Diraja</em> adalah sebuah negeri yang sangat indah dan damai. Didirikan oleh <strong>Bathara Wiswakarma</strong> yang
jebolan Teknik Arsitektur ITB. Istananya berlapiskan <font color="#ffe331" size="14px">emas</font> pinatik.
</p>
<p>
Namun semua itu berubah seketika saat <u>Negara Api</u> menyerang..
</p>
</body>
</html>
Image
● Memasukkan gambar kedalam dokumen HTML● Syntax:
<img src="somelocation/image_name.jpg" />
LINK
● Mengaitkan antar halaman web● Syntax:
<a href="http://website.com/location.html">Linked Me</a>
CSS
● Menambahkan style pada halaman, meningkatkan dan memperbaiki penyajian isi halaman.
● Memisahkan antara isi dan presentasi.● Bertindak sebagai lapisan yang mempengaruhi
presentasi dari elemen XHTML yang diberikan.● Warna, font, text size, background, susunan
elemen pada halaman dan seluruh aspek presentasi isi, diatur oleh CSS.
Writing Rules
● Berisi set intruksi yang memerintahkan browser untuk mengikuti aturan.
● Mengubah tampilan elemen XHTML berdasarkan pada nilai-nilai yang diberikan.
● body { background-color: gray; }
Property Value
DeclarationSelector
Rule
Inline Styles
● Deklarasi CSS atribut pada elemen.● Tidak dibangun sebagai aturan, dan tidak ada
selector. Properti dan nilainya melekat langsung pada elemen.
● Contoh:
<h2 style="textdecoration:underline;">Pandawa</h2>
<p style="color:blue;">Nakula dan Sadewa adalah adalah saudara kembar. Mereka adalah adik tiri Yudistira, Bima, Arjuna.</p>
Embedded Style Sheets
● Menanamkan aturan CSS dalam elemen head dari dokumen.
● Aturan tersebut hanya berlaku pada dokumen dimana dideklarasikan.
Embedded Style Sheets (Cont.)<html>
<head>
<style type="text/css">
h2 { textdecoration:underline; }
p { color:blue; }
.example { background:yellow;color:red; }
</style>
</head>
<body>
<h2>Pandawa</h2>
<p>Nakula dan Sadewa adalah adalah saudara kembar. Mereka adalah adik tiri Yudistira, Bima, Arjuna.</p>
<p>Namun, <span class="example">kesetiaan</span> mereka pada Pandawa tak pernah goyah.</p>
<body>
</html>
External Style Sheets
● Menempatkan aturan CSS secara terpisah, style sheet external terhubung dengan dokumen melalui elemen head
● File style sheet text disimpan menggunakan ektensi .css
Contoh:<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Any Question?
I Give You Question