BAB 1

Daftar Isi
2.1

Quote & Citation.............................................................................................2

2.1.1
2.1.2
2.1.3
2.1.4
2.1.5

2.2

Akronim..............................................................................................2
Definisi................................................................................................2
Alamat.................................................................................................3
Jabatan.................................................................................................3
Bi-Directional Override......................................................................3

Computer Code...............................................................................................3
2.2.1 Keyboard format.................................................................................3
2.2.2 Computer output.................................................................................4
2.2.3 Code Program.....................................................................................4

2.3

Comment.........................................................................................................4

2.4 CSS................................................................................................................5
2.4.1
2.4.2
2.4.3
2.4.4
2.5

Syntax.................................................................................................5
Inline styling.......................................................................................5
Internal Style.......................................................................................6
External Styling (External CSS).........................................................6

CSS BOX model.........................................................................................8

2.5.1
2.5.2
2.5.3
2.5.4

Pading.................................................................................................8
Margin.................................................................................................8
Id Attribute..........................................................................................9
Class attribute......................................................................................9

Eka Angga Laksana

II.1

Quote & Citation

Quote dan citation dipakai untuk kutipan. Dalam sebuah halaman web sekalipun berlaku
layaknya karya tulis, jika sebuah pernyataan itu bersumber dari buku dan halaman web lain
maka wajib menyertakan sumbernya. Quote berupa tanda kutip dua yang menyatakan sebuah
pernyataan dari sumbernya langsung. Citation berupa link atau darimana sumber tersebut
berasal. Berikut adalah contohnya:

<blockquote cite="http://ekaangga.net">
Paragraph ini secara otomatis terindentasi, menjorok ke kanan.
</blockquote>

II.1.1

Akronim

Akronim dipakai untuk menyatakan singkatan. Biasanya akan muncul underline dan muncul
kepanjangannya ketika mouse didekatkan. Berikut adalah contoh kodenya:
<p>Proklamasi <abbr title="Negara Kesatuan Republik
Indonesia">NKRI</abbr> terjadi pada tanggal 17 Agustus 1945</p>

II.1.2

Definisi

Mirip seperti akronim namun digunakan pada kondisi yang berbeda. Berikut adalah
contohnya:
<p> <dfn title="Rapid Eye Movement">REM</dfn> adalah kondisi
normal dari tidur yang ditandai dengan gerakan cepat dan acak
</p>

II.1.3

Alamat

Sebuah web umumnya mencatumkan alamat dimana dia bisa ditemui. Misalkan di situs toko
online, alamat kantor cabang biasanya ditampilkan di web. Berikut adalah contohnya:

Eka Angga Laksana

3
<address>
Universitas Widyatama<br>
Jl. Cikutra no 204 A Bandung<br>
Jawa Barat, Indonesia 40124<br>
phone : +62-22-7275855 ext 228<br>
Fax : +62-22-7202997<br>
</address>

II.1.4

Jabatan

Gunakan <cite> tag untuk menyatakan jabatan atau posisi seseorang.

<p><cite>General Manager</cite> Phil Coulsin.</p>

II.1.5

Bi-Directional Override

Berguna untuk membalik kalimat. Fitur ini jarang dipakai, gunakan tag <bdo>
<bdo dir="rtl">Text ini ditulis dari kana ke kiri</bdo>

II.2 Computer Code

Umumnya dipakai untuk tutorial programming. Karena browser mengeksekusi html tag, dan
kasus lain code pemrograman memiliki format ekstra. Format ini bisa berupa enter dan spasi
namun browser tidak akan sama persis ketika membuat enter dan spasi. Oleh karena itu
diperlukan extra tag untuk memperjelas dan membedakan format code dengan yang lain.
II.2.1

Keyboard format

Code bisa dilihat di bawah ini:

<p><kbd>File | Open...</kbd></p>

II.2.2

Computer output

Menampilkan output computer program. Bisa berupa pesan error, command line dll.

Eka Angga Laksana

4
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslogv6.189
</samp>

II.2.3

Code Program

Tag ini berguna untuk menampilkan code pemrograman, gunakan tag <per> agar spasi dan
enter akan ditampilkan apa adanya. Contoh:
<code>
<pre>
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}
</pre>
</code>

II.3 Comment
Segala bentuk tulisan di comment tidak akan muncul di halaman web, berguna bagi
developer untuk menandai barisan code.
<!tuliskan komentar di sini -->

II.4 CSS
Topik CSS ini akan dibahas mendalam pada modul berikutnya. Hal-hal yang dijelaskan di
sini sebagai dasar agar Anda lebih siap untuk mendalami CSS.
CSS dipakai untuk memberikan style pada halaman HTML. Karena halaman HTML murni
merupakan tampilan layout yang sangat mendasar maka CSS merupakan pemanis agar
tampilan web lebih indah. CSS merupakan singkatan dari Cascading Style Sheets.
Ada 3 cara untuk menambahkan code CSS ini, yaitu:

Eka Angga Laksana

5
1. Inline: langsung menuliskan code sebagai attribute pada html
2. Internal: code masih ada pada halaman atau file namun dikelompokan tersendiri
dalam beberapa baris. Biasanya ditulis di tag head.
3. External: Penulisan css yang paling umum dipakai, yaitu dengan memisahkan kode cc
kedalam file tersendiri. Membuat coding menjadi lebih mudah dan terstruktur.

II.4.1

Syntax

Penulisan code css adalah sebagai berikut:

element { property:value ; property:value }

element adalah nama html elemen yang akan di ubah style-nya. Property adalah nama css
property, ada banyak jenis property ini dan sudah didefinisikan oleh CSS. Value berisi nilai,
nilai ini tergantung property yang dipakai, bisa berupa warna, pixel dan link.

II.4.2

Inline styling

Contoh:
<h1 style="color:red">Heading 1 dengan warna merah</h1>

II.4.3

Internal Style

Code css terpisah namun masih di dalam file yang sama.

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:red}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
Eka Angga Laksana

6
<p>This is a paragraph.</p>
</body>
</html>
Ingat bahwa setiap elemen menghubungkan antara code html dengan css. Misalkan tag
<body> akan diubah background menjadi merah maka cukup menuliskan elemen body pada
css.

II.4.4

External Styling (External CSS)

Berguna juga ketika terdapat banyak file html karena source code dapat diubah hanya dalam
satu file. Karena file css diletakkan secara tersendiri makan perlu link untuk memanggilnya.
Biasanya link ini diletakkan di header dengan tag <link> tanpa penutup tag. Berikut adalah
contoh codenya:

Eka Angga Laksana

7
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Langkah-langkah dijelaskan sebagai berikut:

1. Buat halaman html seperti code di atas
2. Pada tag head, tambahkan <link rel="stylesheet" href="styles.css">,
artinya memanggil file dengan nama style.css, file ini berisi kumpulan code dan
syntax css. Ingat bahwa file berarti terletak di dalam satu folder yang sama dengan
file html.
3. Buat file css seperti conoh berikut:
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}

II.5 CSS BOX model

Setiap website mimiliki kerangka, kerangka ini tidak terlihat namun merupakan struktur dasar
dalam tampilan web.

Border atau garis pembatas:

Eka Angga Laksana

8
p{
border:1px solid black;
}

II.5.1

Pading

CSS padding untuk menambahkan ruang kosong di dalam border. Biasnya di dalam border
terdapat paragraph atau gambar, maka dapat ditambahkan jarak antara content dengan garis
border nya.
p{
border:1px solid black;
padding:10px;
}

II.5.2

Margin

Sama seperti padding, namun yang membedakan adalah padding mengatur jarak dari border
ke elemen lain di luar.
p{
border:1px solid black;
padding:10px;
margin:30px;
}

Eka Angga Laksana

II.5.3

Id Attribute

Untuk menandai elemen yang special. Misalkan ada ada berapa tag <p>, namun style akan
digunakan pada salh satu saja. Maka dari itu diperlukan pembeda dengan paragraph yang
lain. Contoh:
<p id="p01">I am different</p>
Code di atas dikendalikan oleh css berikut:
p#p01 {
color:blue;
}

Gunakan tanda # untuk id

II.5.4

Class attribute

Sama funginya seperti id hanya yang membedakan adalah tanda yang dipakai berupa . (titik).
p#p01 {
color:blue;
}
css sebagai berikut:
p.error {
color:red;
}

II.6 Table
Gunakan table tag untuk membuat table. Contoh:
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
Eka Angga Laksana

10
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Tr = untuk baris
Td = untuk isi tabel

Eka Angga Laksana