HTML & CSSelearning.amikom.ac.id/index.php/download/materi/555149... · Domain Name Server ......

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>



</tr>

<tr>




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

HTML & CSSelearning.amikom.ac.id/index.php/download/materi/555149... · Domain Name Server ......

Documents

Transcript of HTML & CSSelearning.amikom.ac.id/index.php/download/materi/555149... · Domain Name Server ......