Tutorial HTML, CSS, JS - Indonesian

Introducing Website
BAB 1
1
A. Apa itu Website
Website juga dapat dituliskan web site, adalah sebuah kumpulan web page, termasuk konten
multimedia, dalam sebuah perintah nama domain. Web dapat diakses lewat public internet protocol (IP)
network, atau bisa juga disebut Internet. Pengaksesan web dapat dilakukan dengan jalur local area
network (LAN) dengan menuliskan uniform resources locator (URL) padaa web browser. Dalam
penggunaan public access atau akses umum website menggunakan technology World Wide Web dalam
pengaksesan secara global.
Web page adalah building blocks atau bagian dalam pembuatan website dalam bentuk plain text.
Text dalam websiter mempunyai format intruksi atau bahasa dalam pembuatan website Hypertext
Markup Language (HTML, XHTML). Web page diakses dan di transfer dengan menggunakan Hypertext
Transfer Protocol (HTTP), atau juga menggunakan encryption atau diamankan dengan HTTP Secure atau
disingkat HTTPS
B. HTML
HTML kependekan dari hypertext markup language adalah bahasa untuk membuat sebuah web.
HTML bukan lah OOP atau object oriented program, walau ia sendiri adalah object tetapi bukan lah
program. HTML dibuat hanya untuk tampilan user web saja, itu berarti tidak bisa memanipulasikan data.
Berarti HTML ini bersifat static atau tidak bisa dirubah? Tergantung dari penggunaannya. Dalam
pembelajaran kali ini kita hanya akan membuat website bersifat static. Web dynamic dibangun dengan
Bahasa OOP, seperti PHP, ASP, JSP dll. Dan Bahasa tersebut disatukan kedalam bentuk HTML, barulah
dapat digunakan dalam bentuk website dynamic.
HTML ini sifatnya adalah Open Source atau gratis, yang dapat digunakan siapa saja, asalkan dapat
mengerti bahasa HTML.
C. CSS
CSS kependekan dari Cascading Style Sheet adalah kode untuk mengubah tampilan atau men
design web. Penggunaan css dalam website adalah mutlak, karena HTML tidak dapat mengatur design.
Pengaturan design ini, mencakup warna, animation, padding, margin dan lain – lain.
D. JS
JS kependekan dari Javascript. Javascript berbeda jauh dengan java. Javascript ini adalah sebuah
code, semi OOP. Kenapa semi? Karena hampir semua pengaturan code javascript ada dalam Bahasa
pemprograman yang lainnya. Tetapi javascript ini tidak dapat melakukan penyambungan data secara
langsung ke dalam dataase, hanya pembacaaan data lewat XML.
2
E. Editor
Editor adalah program untuk menuliskan code website sebelum ditampilkan kedalam browser.
untuk membuat HTML, CSS dan JS kita dapat menggunakan notepad++, dreamweaver, neatbeans, visual
studio, ms front page dll.
F. Browser
Browser sangat lah mutlak dimiliki dalam pengembangan website ini. Browser diguankan untuk
melihat tampilan web yang telah dibuat dalam editor. Beberapa browser yang di recommended dalam
penggunaan website adalah Chrome, Firefox, Internet Explorer, Opera, Safari.
Perlu diperhatikan dalam pembuatan website ini, kita juga perlu membandingkan dengan semua
browser. Kenapa? Karena setiap browser memiliki tampilan secara sederhana dapat berbeda – beda setiap
browser. Makanya dalam pengembangan website, kita perlu melihat tampilan dari semua browser yang
ada.
G. Lorem Ipsum
Lorem ipsum adalah sebuah kata – kata yang digunakan oleh programmer untuk mengisi sebuah
content. Makna dari lorem ipsum itu sendiri adalah tidak mengandung arti apa – apa. Sudah banyak
programmer website menggunakan kata – kata lorem ipsum, jadi jika menemukan kata – kata lorem
ipsum kita bisa tahu, bahwa itu hanya pelengkap web saja. Lalu apakah kata lorem ipsum hanya “Lorem
Ipsum” saja? Tidak, kalian bisa mengakses web http://www.lipsum.com/ kalian bisa copy paste tulisan
yang ada pada web tersebut.
H. Pemanggilan File
Pemanggilan file dalam html atau dalam website kita harus mengerti cara penggunaanya. Ingat file
page, css, js dan segala content tidak akan ditaruh semua dalam satu folder yang sama. Folder dalam
website pasti terbagi atas hierarchy.
Folder Root
1. (folder) images
2. (folder) stylesheet
3. (folder) javascript
4. (folder) Body Part
5. home.html
6. about.html
7. contact.html
3
q Folder images
1. (folder) icon
2. (folder) user
3. (folder) background
4. (folder) slider
Folder icon Folder user
Folder stylesheet 1. icon 01.png 1. user 01.png

2. icon 02.png 2. user 02.png
1. Main.css 3. icon 03.png
2. Body Top.css 4. icon 04.png
3. Body Center.css Folder slider
4. Body Bottom.css
Folder 1. slider 01.jpg
background 2. slider 02.jpg
Folder javascript 3. slider 03.jpg
1. bg 01.jpg 4. slider 04.jpg
1. Main.js
2. Click.js
3. Print.js
Folder Body Part
1. Body Top.html
2. Body Bottom.html
Diatas adalah struktus sederhana dari pembuatan folder pada tempat penyimpanan file pada
website. Maka perhatikan beberapa kasus ini.
1. Misalnya pada file home.html yang berada pada folder root, akan menggunakan Main.css yang
berada pada folder stylesheet.
Maka link hrefnya akan menjadi seperti ini
stylesheet/Main.css
Jadi folder nya dahulu, baru nama file yang akan digunakan.
2. File home.html, ingin mengambil gambar slider yang berada pada folder images -> slider
Maka src nya akan menjadi seperti ini
images/slider/slider 01.jpg
Sama seperi diatas panggil semua folder nya baru nama filenya.
3. Misalnya css untuk background image pada file Main.css mengambil gambar bg 01.jpg pada folder
images -> background.
Maka url nya akan menjadi seperti ini
../images/background/bg 01.jpg
Pada file Main.css itu berada pada folder stylesheet, sedangkan gambar bg 01.jpg, tidak berada pada
satu folder, atau didalam folder turunannya, melainkan terdapat pada folder lain diluar folder
stylesheet. Kita lihat ada dimana folder yang berisi file bg 01.jpg, ada pada satu sejajar pada folder
stylesheet, makan untuk menaiki satu folder, kita menggunakan ( ../ ) titik dua garis miring. Itu
4
menandakan pembacaan nain satu folder, yang berarti sekarang berada pada folder root. Lalu pada
barulah kita masuk kedalam folder images/background/bg 01.jpg.
5
Struktur HTML
BAB 2
6
A. Struktur Dasar
Dalam pembuatan website hal pertama kita harus mengerti pembuatan HTML. Struktur ini juga bisa
dikatakan sebagai kumpulan tag yang membuat sebuah block.
<html>
<head>
<title>Hello</title>
</head>
<body>
Hello Dunia, saya sedang belajar HTML
</body>
</html>
Tuliskan code diatas kedalam editor HTML yang digunakan. Simpan lah dalam folder “Belajar HTML”
di document, dan simpan file diatas dengan nama “hello”. Jika kalian menggunakan editor Notepad++,
pada saat kalian menyimpannya, perhatikan Save as type nya, rubah menjadi “hypertext markup language
file”
Bukalah browser kalian dan drag and drop file yang disimpan ke dalam browser kalian.
7
Tag Head -
Title
Tag Body
Dalam penulisan code html, harap diperhatikan pembuka dan penutup nya.
Tag head adalah tempat penulisan code untuk title, link atau reference beberapa data. Tag body
adalah tempat untuk menaruh data block content dari website.
Pemberian warna dasar dari sebuah web antara penting dan ga penting. Itu tergantung dari design
apa yang ingin dibuat.
<html>
<head>
</head>
<body bgcolor="blue">
</body>
</html>
Code diatas akan memberikan warna pada background. Selain warna kita juga dapat memasukkan gambar
pada background. Pertama cari lah file gambar yang diinginkan lalu masukkan kedalam folder Belajar
HTML yang telah dibuat. Setelah itu buatlah code ini
<html>
<head>
</head>
<body background="wood.jpg">
</body>
</html>
Perhatikan baik – baik pada penggunaan background gambar
8
Pencarian nama file gambarnya harus lah sesuai dengan folder yang sama dimana file site page ini
tersimpan, ibarat kata folder yang tersimpan adalah localhost untuk penyimpanan site page dan content
lainnya.
Tips penggunaan background image atau color dalam body, perlu kalian perhatikan pewarnaan atau
penggambaran sebuah background harus lah sesuia dengan web yang akan dibuat. Lalu pemilihan warna
atau gambarnya disarankan yang enak dipandang oleh mata, jangan menggunakan warna atau gambar
yang tajam sehingga membuat mata cepat lelah, atau tidak enak dipandang. Pengaturan warna dan
gambar termasuk dalam pendesignan dalam css, lebih baik menggunakan css saja agar pengaturannya
dapat di control secara keseluruhan. Karena yang namanya site page, tidak hanya satu saja.
B. Tag HTML
Ada tiga tag html yang paling penting yaitu <html> sebagai tag jika yang digunakan adalah Bahasa
html. Tag <head> sebagai penanda reference site page, link, icon, dan juga title page. Tag <body> adalah
tempat untuk penyimpanan tempat content site.
<html> : Opening Tag
</html> : Closing Tag
Ada beberapa tag HTML yang sering digunakan dalam pembuatan website ini.
<div> </div> : Block Content

<h1> </h1> : Heading
<span> </span> : Block Font
<b> </b> : Bold
<i> </i> : Italic
<ul> </ul> : List
<table> </table> : Table
<p> </p> : Paragraph
<pre> </pre> : Paragraph
<a> </a> : Link
<u> </u> : Underline
Lalu ada beberapa code tag html, yang tidak perlu closing tag
<br/> : Break line

<hr/> : Horizontal Line
<img/> : Image
<input/> : Form input
<link/> : Reference link page
Html juga ada comment code


Pembuatan tag html dapat nested yang artinya tag – tag tesebut dapat digabungkan. Tetapi perlu
diperhatikan opening dan closing tag nya, jadi ada istilah first opening last closing atau pertama pembuka
dan terakhir penutup.
<b><u><i>Hello World</i></u></b>
Hasilnya akan menjadi seperti ini
Hello World
9
Pertama tulisan akan ditebalkan, diberi underline dan dimringkan. Tetapi lihat tag <b> adalah opening
tetapi bukan pula pertama closing, justru yang terakhir. Lalu bagimana jika opening dan closing berbeda,
jika tag nya ada banyak, baru akan terjadi keanehan, tetapi jika code sedikit mungkin tidak terlalu
berbengaruh, tetapi itu tetap saja salah.
C. Attribute
Attribute adalah suatu kondisi dimana suatu tag tersebut harus dapat menyusuiakan dengan attribute
yang digunakan. Misalnya pada saat pemmbuatan warna atau image pada background body.
Background adalah nama attribute sedangkan wood.jpg adalah value. Lalu jangan lupa menggunakan
tanda kutip.
Tanda kutip disini, bisa memilih kutip satu ( ‘ ) atau kutip dua ( “ ), tetapi ingat kita tidak bisa
menggunakan kombinasi keduanya, misalnya seperti ini
<body background=”wood.jpg’>
Kita harus memilih kutip satu ( ‘ )
<body background=’wood.jpg’>
Atau kutip dua ( “ )
<body background=”wood.jpg”>
D. Icon
Icon adalah sebuah logo company. Penggunaan code logo, menggunakan tag <link>. Bukalah file
hello.html, kita akan menambahkan code html
<html>
<head>
<link rel='shortcut icon' href='Logo Design.png' />
</head>
</body>
</html>
E. Symbol
Ada beberapa symbol khusus pada html. Kenapa khusus? Karena pada saat pemanggilan harus
menggunakan code.
Simbol
Kode Nomor Kode Nama
No atau Deskripsi
HTML HTML
Karakter
1 0 Nol 0
2 1 Satu 1
10
3 2 Dua 2
4 3 Tiga 3
5 4 Empat 4
6 5 Lima 5
7 6 Enam 6
8 7 Tujuh 7
9 8 Delapan 8
10 9 Sembilan 9
11 Tanda kanan ke kiri ‏ &rlm;
12 Tanda kiri ke kanan ‎ &lrm;
13 Tanda penghubung halus
14 ‍ Zero width joiner ‍ &zwj;
15 ‌ Zero width non-joiner ‌ &zwnj;
16 ' Kutip satu '
17 - Tanda kurang -
18 − − −
19 – Garis en – –
20 — Garis em — —
21 Spasi en &ensp;
22 Spasi em &emsp;
23 Spasi tipis
24 ! Tanda seru !
25 " Kutip ganda " "
26 # Simbol pagar #
27 $ Simbol dollar $
28 % Simbol persen %
29 & Simbol dan & &
30 ( Kurung buka (
31 ) Kurung tutup )
32 * Tanda bintang *
33 , Tanda koma ,
34 . Tanda titik .
35 / Garis miring /
36 : Titik dua :
37 ; Titik koma ;
38 ? Tanda tanya ?
39 @ Simbol [at] @
40 [ Kurung siku buka [
41 \ Garis miring terbalik/backslash \
42 ] Kurung siku tutup ]
43 ^ Tanda sisipan/sirkumfleksa ^
44 ˆ ˆ &circ;
45 _ Garis bawah _
46 ` Tanda petik `
47 { Kurung kurawal buka {
48 | Garis tegak/pipe |
49 } Kurung kurawal tutup }
50 ~ Simbol ekuivalen ~
51 ¡ Tanda seru terbalik ¡ ¡
11
52 ¦ Garis tegak terputus ¦ ¦
53 ¨ Titik dua di atas huruf vokal ¨ ¨
54 ¯ Garis atas ¯ ¯
55 ´ Aksen akut ´ ´
56 ¸ Spasi cedilla ¸ ¸
57 ¿ Tanda tanya terbalik ¿ ¿
58 ˜ ˜ &tilde;
59 ‘ Kutip kiri tunggal ‘ ‘
60 ’ Kutip kanan tunggal ’ ’
61 ‚ Kutip rendah tunggal ‚ &sbquo;
62 “ Kutip kiri ganda “ “
63 ” Kutip kanan ganda ” ”
64 „ Kutip rendah ganda „ &bdquo;
65 ′ Menit ′ ′
66 ″ Detik ″ ″
67 ‹ Panah kiri tunggal ‹ &lsaquo;
68 › Panah kanan tunggal › &rsaquo;
69 ‾ Garis atas ‾ &oline;
70 ¢ Simbol sen ¢ ¢
71 £ Simbol pondsterling £ £
72 ¤ Simbol mata uang ¤ ¤
73 ¥ Simbol yen ¥ ¥
74 € Simbol Euro € €
75 + Tanda tambah +
76 ⊕ ⊕ &oplus;
77 ⊗ ⊗ &otimes;
78 ∗ ∗ &lowast;
79 < Kurang dari < <
80 = Sama dengan =
81 ≠ ≠ ≠
82 > Lebih dari > >
83 ± Simbol lebih kurang ± ±
84 « Panah kiri ganda « «
85 » Panah kanan ganda » »
86 × Simbol perkalian × ×
87 ÷ Simbol pembagian ÷ ÷
88 ∀ ∀ ∀
89 ∂ ∂ ∂
90 ∃ ∃ ∃
91 ∅ ∅ ∅
92 ∇ ∇ ∇
93 ∈ ∈ ∈
94 ∉ ∉ ∉
95 ∋ ∋ &ni;
96 ∏ ∏ ∏
97 ∑ ∑ ∑
98 √ √ √
99 ∝ ∝ &prop;
10
∠ ∠ &ang;
0
12
10
∧ ∧ &and;
1
10
∨ ∨ &or;
2
10
∩ ∩ ∩
3
10
∪ ∪ ∪
4
10
∫ ∫ ∫
5
10
∴ ∴ &there4;
6
10
∼ ∼ &sim;
7
10
≅ ≅ &cong;
8
10
≈ ≈ ≈
9
11
≡ ≡ &equiv;
0
11
≤ ≤ ≤
1
11
≥ ≥ ≥
2
11
⊂ ⊂ ⊂
3
11
⊄ ⊄ &nsub;
4
11
⊃ ⊃ ⊃
5
11
⊆ ⊆ &sube;
6
11
⊇ ⊇ &supe;
7
11
⊥ ⊥ &perp;
8
11
⋅ ⋅ ⋅
9
12
⌈ ⌈ &lceil;
0
12
⌉ ⌉ &rceil;
1
12
⌊ ⌊ &lfloor;
2
12
⌋ ⌋ &rfloor;
3
12
◊ ◊ &loz;
4
12
↑ Panah atas ↑ ↑
5
12
→ Panah kanan → →
6
12
↓ Panah bawah ↓ ↓
7
13
12
← Panah kiri ← ←
8
12
↵ Simbol Enter/Carriage return ↵ &crarr;
9
13
↔ Panah kiri kanan ↔ ↔
0
13
§ Simbol bagian/seksi § §
1
13
© Simbol hak cipta (Copyright) © ©
2
13
¬ Simbol bukan ¬ ¬
3
13 Simbol merek dagang terdaftar
® ® ®
4 (Registered trademark)
13
° Simbol derajat ° °
5
13
µ Simbol mikro µ µ
6
13
¶ Simbol pilcrow, simbol paragraf ¶ ¶
7
13
· Titik tengah, koma Georgia · ·
8
13
… Ellipsis horisontal … …
9
14
♠ ♠ &spades;
0
14
♣ ♣ &clubs;
1
14
♥ ♥ &hearts;
2
14
♦ ♦ &diams;
3
14
† Salib † &dagger;
4
14
‡ Salib ganda ‡ &Dagger;
5
14
• Peluru • •
6
14
‰ Per mil ‰ &permil;
7
14
¼ Satu per empat ¼ ¼
8
14
½ Satu per dua, setengah ½ ½
9
15
¾ Tiga per empat ¾ ¾
0
15
¹ Pangkat satu ¹ ¹
1
15
² Pangkat dua, kuadrat, persegi ² ²
2
15
³ Pangkat tiga, kubik ³ ³
3
15
∞ ∞ ∞
4
14
15
A A
5
15
a a
6
15
ª Indikator ordinal feminin ª ª
7
15
Á Á Á
8
15
á á á
9
16
À À À
0
16
à à à
1
16
Â Â Â
2
16
â â â
3
16
Ä Ä Ä
4
16
ä ä ä
5
16
Ã Ã Ã
6
16
ã ã ã
7
16
Å Å Å
8
16
å å å
9
17
Æ Æ Æ
0
17
æ æ æ
1
17
B B
2
17
b b
3
17
C C
4
17
c c
5
17
Ç Ç Ç
6
17
ç ç ç
7
17
d d
8
17
D D
9
18
Ð Ð Ð
0
18
ð ð ð
1
15
18
e e
2
18
E E
3
18
É É É
4
18
é é é
5
18
È È È
6
18
è è è
7
18
Ê Ê Ê
8
18
ê ê ê
9
19
Ë Ë Ë
0
19
ë ë ë
1
19
f f
2
19
F F
3
19
ƒ ƒ &fnof;
4
19
g g
5
19
G G
6
19
h h
7
19
H H
8
19
i i
9
20
I I
0
20
Í Í Í
1
20
í í í
2
20
Ì Ì Ì
3
20
ì ì ì
4
20
Î Î Î
5
20
î î î
6
20
Ï Ï Ï
7
20
ï ï ï
8
16
20
j j
9
21
J J
0
21
k k
1
21
K K
2
21
l l
3
21
L L
4
21
m m
5
21
M M
6
21
n n
7
21
N N
8
21
Ñ Ñ Ñ
9
22
ñ ñ ñ
0
22
o o
1
22
O O
2
22
º Indikator ordinal maskulin º º
3
22
Ó Ó Ó
4
22
ó ó ó
5
22
Ò Ò Ò
6
22
ò ò ò
7
22
Ô Ô Ô
8
22
ô ô ô
9
23
Ö Ö Ö
0
23
ö ö ö
1
23
Õ Õ Õ
2
23
õ õ õ
3
23
Ø Ø Ø
4
23
ø ø ø
5
17
23
Œ Œ &OElig;
6
23
œ œ &oelig;
7
23
p p
8
23
P P
9
24
q q
0
24
Q Q
1
24
r r
2
24
R R
3
24
s s
4
24
S S
5
24
Š Š &Scaron;
6
24
š š &scaron;
7
24
ß ß ß
8
24
t t
9
25
T T
0
25
Þ Þ Þ
1
25
þ þ þ
2
25
™ Merek dagang ™ ™
3
25
u u
4
25
U U
5
25
Ú Ú Ú
6
25
ú ú ú
7
25
Ù Ù Ù
8
25
ù ù ù
9
26
Û Û Û
0
26
û û û
1
26
Ü Ü Ü
2
18
26
ü ü ü
3
26
v v
4
26
V V
5
26
w w
6
26
W W
7
26
x x
8
26
X X
9
27
y y
0
27
Y Y
1
27
Ý Ý Ý
2
27
ý ý ý
3
27
ÿ ÿ ÿ
4
27
Ÿ Ÿ &Yuml;
5
27
z z
6
27
Z Z
7
27
Α Alpha Α Α
8
27
α Alpha α α
9
28
Β Beta Β Β
0
28
β Beta β β
1
28
Γ Gamma Γ Γ
2
28
γ gamma γ γ
3
28
Δ Delta Δ Δ
4
28
δ Delta δ δ
5
28
Ε Epsilon Ε Ε
6
28
ε epsilon ε ε
7
28
Ζ Zeta Ζ Ζ
8
28
ζ Zeta ζ ζ
9
19
29
Η Eta Η Η
0
29
η Eta η η
1
29
Θ Theta Θ Θ
2
29
θ Theta θ θ
3
29
ϑ Simbol theta ϑ &thetasym;
4
29
Ι Iota Ι Ι
5
29
ι Iota ι ι
6
29
Κ Kappa Κ Κ
7
29
κ Kappa κ κ
8
29
Λ Lambda Λ Λ
9
30
λ lambda λ λ
0
30
Μ Mu Μ Μ
1
30
μ Mu μ μ
2
30
Ν Nu Ν Ν
3
30
ν Nu ν ν
4
30
Ξ Xi Ξ Ξ
5
30
ξ Xi ξ ξ
6
30
Ο Omicron Ο Ο
7
30
ο omicron ο ο
8
30
Π Pi Π Π
9
31
π Pi π π
0
31
ϖ Simbol pi ϖ ϖ
1
31
Ρ Rho Ρ Ρ
2
31
ρ Rho ρ ρ
3
31
Σ Sigma Σ Σ
4
31
σ Sigma σ σ
5
31
ς Sigmaf ς &sigmaf;
6
20
31
Τ Tau Τ Τ
7
31
τ Tau τ τ
8
31
Υ Upsilon Υ Υ
9
32
υ upsilon υ υ
0
32
ϒ Simbol upsilon ϒ &upsih;
1
32
Φ Phi Φ Φ
2
32
φ Phi φ φ
3
32
Χ Chi Χ Χ
4
32
χ Chi χ χ
5
32
Ψ Psi Ψ Ψ
6
32
ψ Psi ψ ψ
7
32
Ω Omega Ω Ω
8
32
ω Omega ω ω
9
33
space
0
33
Spasi
1
21
Text
BAB 3
22
A. Heading
Heading adalah sebuah tag untuk membuat suatu teks dalam bentuk judul. Heading ada enam level
yang paling besar adalah heading satu dan terkecil heading enam. Buatlah file baru dengan nama
Heading.html dan simpan pada folder Belajar HTML
<html>
<head>
<title>Heading</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Silahkan dilihat hasilnya.
B. Paragraph
Paragraph adalah sebuah block tulisan text yang berkumpul dalam suatu block. Tag untuk
paragraph ada dua yaitu <p> dan <pre>. Apa perbedaannya? Jika tag <p> tulisannya akan disesuaikan
dengan bentuk browsernya, jika tulisannya melebihi width browser makan tulisannya secara otomatis
akan scroll kebawah. Buatlah file baru dengan nama Paragraph1.html
<html>
<head>
<title>Paragraph P</title>
</head>
<body>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</body>
</html>
Silahkan jalankan. Setalah itu ada tag <pre> adalah sebuah tag paragraph yang menampilkan text sesuai
dengan text nya. Buatlah file baru dengan nama Paragraph2.html
<html>
<head>
<title>Paragraph P</title>
</head>
<body>
<pre>
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
</pre>
</body>
</html>
23
Silah coba dan bandingkan apa perbedaan dari tag <p> dan <pre>.
C. Font
Font adalah sebuah pengaturan dalam teks, font bukan hanya sekedar tag <font>, tetapi juga ada tag
<b> bold, <u> underline dan <i> italic. Buatlah file baru dengan nama Font.html
<html>
<head>
</head>
<body>
<b>Tulisannya dipertebal</b>
<br/>
<u>Ada Undeline nya</u>
<br/>
<i>Wich miring nich</i>
<br/>
<font color="blue">Warnanya biru</font>
<br/>
<font face="courier">Jenis Font</font>
<br/>
<font size="5">Font Size</font>
<br/>
<p>
<b>Lorem Ipsum</b> is <i>simply dummy text</i> of <u>the printing and typesetting
industry</u>.
<font color="red">Lorem Ipsum has been the industry's standard dummy text ever since the
1500s</font>,
when an unknown printer took a galley of type and scrambled it to make a type specimen
book.
<font size="5">It has survived not only five centuries</font>, but also the leap into
electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem
Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
</body>
</html>
Silahkan di coba.
D. Gambar
Html juga support memasukkan gambar kedalam html, dengan menggunakan tag <img>. Silahkan
buat file baru dengan nama Gambar.html
<html>
<head>
</head>
<body>
<img src="wood.jpg" />
<img src="wood.jpg" width="200" height="100" />
</body>
</html>
Attribute src adalah untuk mengambil source gambar tersebut disimpan. Lalu ada attribute width untuk
mengatur lebar gambar dam height untuk mengatur tingga gambar. Width dan height menggunakan
satuan pixel. Ingat mengambil file name gambar sertakan extension dari file tersebut.
24
Hyperlink
BAB 4
25
A. Hyperlink Site
Hyperlink site adalah sebuah hyperlink yang menuju ke suatu halaman tertentu. Dengan
menggunakan technology ini, anda tidak perlu repot – repot menuliskan alamat URL nya pada browser.
Buatlah file baru dengan nama hyperlinksite.html
<html>
<head>
</head>
<body>
<a href="font.html">Font</a>
<a href="paragraph1.html" target="_blank">Paragraph</a>
<a href="http://www.google.com">Google</a>
<a href="http://www.facebook.com" target="_blank">Facebook</a>
</body>
</html>
Attribute href untuk menyimpan url yang dituju. Jika href tersebut menuju ke website pada folder atau
satu local host, maka penulisan href nya hanya nama file yang nya saja dan param jika ada. Jika href
tersebut menuju ke halaman website berbeda, maka tuliskan di URL nya lengkap dengan http dan www
nya. Silahkan dicoba.
Jika sebuah link, yang tidak menghubungkan ke site mana pun, maka disarankan untuk menuliskan
tanda pager ( # ) saja pada href nya.
<a href="#">Home</a>
B. Hyperlink Name
Hyperlink nama adalah hyperlink yang menuju suatu block nama. Jadi dengan mudah ke block
tertentu jika site page tersebut panjang. Buatlah file baru dengan nama HyperlinkName.html
<html>
<head>
</head>
<body>
<a href="#title1">Title 1</a>
<a name="title1"><h1>Title 1 Heading</h1></a>

<p>
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
26
<p>
</p>

<p>
</p>

<p>
</p>

<p>
</p>

<p>
</p>

<p>
</p>

<p>
</p>

<p>
27
</p>

<p>
</p>
</body>
</html>
Jadi penggunaan hyperlink menggunakan tanda pagar (#). Dan pada tag yang akan dituju menggunakan
attribute name. silahkan dicoba.
28
List
BAB 5
29
A. Bullet
Bullet adalah sebuah list berbentuk symbol. Bullet digunakan untuk men list suatu object dalam
penampilan terhadap site. Buatlah file baru dengan nama Bullet.html
<html>
<head>
</head>
<body>
<h3>Merk Handphone</h3>
<ul>
<li>Nokia</li>
<li>Samsung</li>
<li>Asus</li>
<li>Oppo</li>
<li>Coolpad</li>
<li>Apple</li>
</ul>
</body>
</html>
Silahkan dicoba
B. Numbering
Numbering adalah list dalam bentuk angka, atau symbol tertentu yang mempunyai arti adalah
mengurutkan, beda halnya dengan bullet, penyusunan pada numbering adalah sebuah step atau langkah.
Silahkan buat file baru dengan nama Numbering.html
<html>
<head>
</head>
<body>
<h3>Cara Menyalakan PC</h3>
<ol>
<li>Sambungkan PC ke Listrik</li>
<li>Click button On di Stabilizer</li>
<li>Click button On pada CPU</li>
<li>Tunggu PC selesai Booting</li>
<li>Masukkan Password (Jika ada)</li>
<li>PC siap digunakan</li>
</ol>
</body>
</html>
C. Gabungan
Kita akan membuat gabungan antara bullet and numbering dan juga kita akan menggunakan nested
tag. Silahkan buat file baru dengan nama NasiGoreng.html
<html>
<head>
</head>
<body>
<h1>Cara Membuat Nasi Goreng Sederhana</h1>
<h3>- Bahan -</h3>

<ul>
<li>
Bawang
<ul>
30
<li>Merah</li>
<li>Putih</li>
</ul>
</li>
<li>Nasi</li>
<li>Kecap (Jika Suka)</li>
<li>Telur</li>
<li>Penyedap (Masako / Royco)</li>
<li>
Pelengkap
<ul>
<li>Sosis</li>
<li>Bakso</li>
<li>Ayam Suir</li>
<li>Daun Bawang</li>
</ul>
</li>
<li>
Cabai
<ul>
<li>Merah</li>
<li>Rawit</li>
<li>Paprika (Jika Ada)</li>
</ul>
</li>
<li>Minyak Goreng</li>
<li>Garam</li>
</ul>
<h3>- Alat -</h3>

<ul>
<li>Penggorengan</li>
<li>Talenan</li>
<li>Pisau</li>
<li>Spatula</li>
<li>Piring</li>
</ul>
<h3>- Langkah -</h3>

<ol>
<li>Panaskan Minyak</li>
<li>
Masak Telur - Metode
<ul>
<li>Orek</li>
<li>Ceplok</li>
<li>Dadar</li>
</ul>
</li>
<li>Setelah selesai memasak telur, tiriskan</li>
<li>Panaskan minyak</li>
<li>Tumis bawang</li>
<li>Setelah Harum, masukkan cabai dan bumbu lainnya
<ol>
<li>Garam</li>
<li>Penyedap</li>
</ol>
</li>
<li>Masukkan Nasi aduk rata</li>
<li>Setalah merata, tambahkan bahan pelengkap dan telur</li>
<li>Masak hingga matang</li>
<li>Sajikan</li>
</ol>
</body>
</html>
31
Table
BAB 6
32
A. Table Sederhana
Table dalam html adalah tag yang sering juga digunakan dalam pembuatan web. Tag table adalah
<table>, lalu table ada row <tr> dan column <td>. Silahkan buat file baru dengan nama Table1.html
<html>
<head>
</head>
<body>
<table>
<tr>
<td>Row 1 Column 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Silahkan dicoba, tetapi hasilnya mungkin tidak terlihat seperti table, mungkin arti kata table dalam bentuk
design adalah satuan dari beberapa garis atau background yang membentuk suatu cell dan berkumpul
menjadi table. Baiklah kita bisa menambahkan attribute border
<table border="1">
Ok kita bisa lihat hasilnya. Kita juga bisa menambahkan value nya bukan hanya 1, tetapi 2, 3, 4, dan
seterusnya, lihatlah apa yang terjadi.
B. Colspan dan Rowspan
Colspan dan juga Rowspan adalah salah satu attribute yang dimiliki oleh table, gunanya untuk
mengabungkan beberapa cell menjadi satu. Silahkan buat file baru dengan nama table2.html
<html>
<head>
</head>
<body>
<h3>Colspan</h3>

<table border="1">
<tr>
</tr>
33
<tr>
<td colspan='2'>Row 2 Column 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<h3>Rowspan</h3>

<table border="1">
<tr>
</tr>
<tr>
<td rowspan='2'>Row 2 Column 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<h3>Colspan dan Rowspan</h3>
<table border="1">
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
34
</table>
</body>
</html>
Silahkan dicoba
C. Align
Align adalah sebuah attribute table yang digunakan dalam pengaturan perataan teks. Buatlah file
baru dengan Table3.html
<html>
<head>
</head>
<body>

<table border="1">
<tr>
<td colspan='2' align='center' >Row 1 Column 1</td>
<td rowspan='2' valign='top'>Row 1 Column 3</td>
<td rowspan='4' valign='bottom'>Row 1 Column 5</td>
</tr>
<tr>
</tr>
<tr>
<td colspan='3' align='right'>Row 3 Column 2</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Silahkan dicoba.
35
Form
BAB 7
36
A. Definition
Form adalah suatu object untuk melakukan suatu olahan data kepada user yang menggunakannya.
Form juga dapat melakukan process insert, update, delete and search data dalam database. Dalam process
ini kita memerlukan tag <form>. Attribute yang digunakan untuk menunjang process form ini adalah
action yang berguna untuk mengirimkan data ke halaman atau page yang dituju, method adalah sebuah
cara yang digunakan dalam pengiriman data, method mempunyai dua value saja GET dan POST, enctype
adalah sebuah encryption data, type ini menggunakan method POST, dan biasanya digunakan untuk
mengirimkan sebuah file data.
B. Input Control
Dalam form ini kita dapat menggunakan berbagai macam input atau tag <input> yang digunakan
sebagai object control suatu data yang digunakan dalam process pemasukan atau pemilihan data. Ada
beberapa control yang sering digunakan.
1. Input text
<input type='text' name='txt_Control' value='' />
name : nama control nya, harus diisi
value : nilai awal
2. Input password
<input type='password' name='pass_Control' value='' />
value : nilai awal
3. Input hidden
<input type='hidden' name='hd_Control' value='' />
value : nilai awal, harus diisi
Control ini menyimpan sebuah nilai, yang tidak akan ditunjukan oleh system kepada client
4. Input radio
<input type=’radio’ name=’rd_Control’ value=’Value Control’ checked /> Control Span
value : nilai control, harus diisi
checked : pilihan awalan, option
5. Input checkbox
<input type="checkbox" name="chk_Control" value="Value Control" /> Control Span
6. Selected
37
<select name="cb_Control" >
<option value=’Value Control’>Value Name</option>
</select>
7. Textarea
<textarea name="txt_Control"></textarea>
Didalam textarea tidak adan attribute value, karena value tidak ada maka nilai awal diletakkan pada
diantara tag <textarea>
8. Input File
<input type="file" name="file_Control" />
Didalam input file tidak terdapat value, karena pada file control ini terdapat sebuah encryption yang
menghalau segala jenis masukkan secara otomatis.
9. Input submit
<input type="submit" value="Submit" name="btn_Submit" />
value : nilai control, tidak diisi juga tidak apa - apa
Ini adalah control yang penting, jika tidak ada control submit, data yang sudah ada tidak bisa kita
manipulasikan dalam sebuah algorithm. Jadi setiap ada form, selalu ada button submit
10. Input reset
<input type="reset" value="Reset" />
value : nilai control, tidak diisi juga tidak apa – apa
Input reset digunakan untuk mengulang atau mengembalikan semua data control keawal.
11. Input button
<input type="button" value="Back" />
input button digunakan untuk memberikan control lebih selain submit dan reset
Ingat dalam penamaan dalam sebuah attribute name tidak boleh ada spasi. Silahkan buat file baru dengan
nama Form1.html
<html>
<head>
</head>
<body>
<form action='Form1.html' method='get' enctype='multipart/form-data'>
38
<input type='hidden' name='hd_Control' value='Belajar HTML' />

Full Name <input type='text' name='txt_FullName' />

<br/>
Nick Name <input type='text' name='txt_NickName' />

<br/>
Gender
<input type='radio' name='rd_Gender' value='Male' /> Male
<input type='radio' name='rd_Gender' value='Female' /> Female
<br/>
Hobbies
<input type="checkbox" name="chk_Hobbies" value="Football" /> Football
<input type="checkbox" name="chk_Hobbies" value="Basketball" /> Basketball
<input type="checkbox" name="chk_Hobbies" value="Swimming" /> Swimming
<input type="checkbox" name="chk_Hobbies" value="Dance" /> Dance
<input type="checkbox" name="chk_Hobbies" value="Swimming" /> Swimming
<input type="checkbox" name="chk_Hobbies" value="Reading" /> Reading
<input type="checkbox" name="chk_Hobbies" value="PC Game" /> PC Game
<input type="checkbox" name="chk_Hobbies" value="Shopping" /> Shopping
<input type="checkbox" name="chk_Hobbies" value="Other" /> Other
<br/>
Religion
<select name="cb_Religion" >
<option value='Islam'>Islam</option>
<option value='Protestan'>Protestan</option>
<option value='Khatolik'>Khatolik</option>
<option value='Hindu'>Hindu</option>
<option value='Budha'>Budha</option>
<option value='Atheis'>Atheis</option>
<option value='Shinto'>Shinto</option>
</select>
<br/>
Address
<textarea name="txt_Address"></textarea>
<br/>
Image
<input type='file' name='file_Image' />
<br/>
<input type="submit" value="Submit" name="btn_Submit" />

<input type="reset" value="Reset" />
</form>
</body>
</html>
Silahkan dicoba.
C. Input Control HTML5
Input control html 5 adalah input type tag dengan technology terbaru, tetapi sayangnya tidak semua
browser yang support. Hanya beberapa browser versi baru dan beberapa browser recommended yang
dapat menjalankan html 5. Jadi penggunaan control ini masih sangat jarang digunakan.
1. Input number
<input type="number" name="num_Control" min="1" max="5">
min : nilai terkecil dari value
max : nilai terbesar dari value
2. Input date
39
<input type="date" name="dt_Control">
3. Input color
<input type="color" name="clr_Control" >
4. Input range
<input type="range" name="rng_Control" min="0" max="10">
min : nilai terkecil dari value
max : nilai terbesar dari value
5. Input email
<input type="email" name="email_Control">
bualtlah file baru dengan nama Form2.html
<html>
<head>
</head>
<body>
<form action='Form1.html' method='get' enctype='multipart/form-data'>
Number <input type='Nummber' name='num_Number' min='10' max='100' />

<br/>
Birthday <input type='date' name='dt_Birthday' />
<br/>
Warna <input type='color' name='clr_Warna' />
<br/>
Penilaian <input type='range' name='rng_Penilaian' min='0' max='100' />
<br/>
Email <input type='email' name='txt_Email' />
<br/>
<input type='submit' name='btn_Submit' value='Submit' />
</form>
</body>
</html>
Silahkan dicoba, jika pada browser anda hanya memunculkan text saja, maka browser anda tidak support.
40
CSS
BAB 8
41
A. Definition
Cascading Style Sheet (CSS) adalah salah satu bahasa pemrograman web yang digunakan untuk
mempercantik halaman web dan mengendalikan beberapa komponen dalam sebuah web sehingga akan
lebih terstruktur dan seragam. CSS dapat kita gunakan dalam mengendalikan ukuran gambar, warna teks,
warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi
antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS bisa juga diartikan sebagai bahasa
style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita
untuk menampilkan halaman yang sama dengan format yang berbeda.
B. Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara
berurutan, yang kemudian membentuk suatu hubungan layaknya hubungan ayah-anak (parent-child) pada
setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide
Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan
Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan
standar CSS.
C. Keuntungan
Adapun beberapa kelebihan CSS adalah sebagai berikut:
1. Memisahkan desain dengan konten halaman web.

2. Mengatur desain sefisien mungkin.
3. Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada css saja.
4. Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
5. Lebih mudah didownload karena lebih ringan ukuran filenya.
6. Satu CSS dapat digunakan banyak halaman web.
D. Div Dan Span
Div dan span adalah tag html, yang biasa digunakan dalam menghubungkan css dengan html. Jika
kita menggunakan tag <div> dan <span> kita tidak akan melihat pengaruh apapun dalam design HTML,
berbeda dengan tag <b>, <u>, <i> dan <h1> yang dapat menghasilkan design html. Penggunaan tag
<div> biasanya untuk membuat sebuah block content. Dan penggunaan tag <span> biasanya untuk
membuat sebuah block font. Tetapi pada dasar teorinya tag <div> dan <span> bisa dipakai pada block
content atau pula block font.
42
E. Struktur Penulisan CSS
Dalam penulisan css kita harus bisa menggabungkan antara HTML dan css. CSS dapat dituliskan
dalam satu page atau embed atau juga berbeda halaman dengan extension .css dan menggunakan tag
<link />. Dalam embed file dapat dituliskan dalam satu tag html dan juga dapat menggunakan tag <style>.
Lalu untuk penyambungan nya dapat menggunakan selector.
Selector { Properties : Value; }
Selector adalah sebuah penghubung yang digunakan untuk menentukan element mana yang akan
diatur stylenya. Berikut ini beberapa selector yang ada.
E.1 Class Selector

Class adalah “agen bebas” yang dapat diterapkan untuk tag HTML apapun. Kita dapat
membuat nama class dengan hampir semua nama apapun. Karena class selector dapat diterapkan ke
beberapa tag HTML sekaligus, maka class adalah selector yang paling serbaguna. Penulisan class
selector dalam css disymbolkan dengan tanda titik ( . ).
Perlu di tekankan sekali lagi, sebuah selector class dapat digunakan pada lebih dari satu tag
HTML. Masukkan style CSS dalam selector class jika terdapat 2 atau lebih elemen/tag HTML yang
bisa memiliki style yang sama dalam satu halaman.
E.2 ID Selector
Hampir sama dengan class, ID dapat diterapkan untuk hampir semua tag HTML, tetapi
penggunaanya hanya sekali dalam satu halaman untuk satu tag HTML tertentu. Sekali lagi di
tekankan selector ID digunakan hanya untuk 1 elemen pada satu halaman web. Penulisan id selector
dalam css disimbolkan tanda pagar (#).
E.3 Tag Selector

Nama dari element HTML digunakan sebagai selector untuk mendefinisikan tag HTML yang
berasosiasi. Misalnya, selector dari <h1> adalah h1. HTML selector digunakan dalam CSS rule
untuk mendefinisikan bagaimana suatu tag akan ditampilkan.
F. Comment
Comment atau sebuah kata – kata yang tidak akan dijalankan pada css dengan menggunakan
/* comment */
43
Penulisan Code CSS
BAB 9
44
A. Class Selector
Cara penulisan untuk membuat sebuah css dengan menggunakan class adalah dengan menggunakan
symbol titik pada css. Silahkan buat folder baru didalam folder Belajar HTML dengan nama “Belajar
CSS”.
A.1 Embed
Embed adalah menaruh data file dalam satu file. Jadi pada embed css kita menggunakan tag
<style> atau menggunakan css langsung pada blok yang diiinginkan. Buatlah file baru dengan nama
ClassSelector1.html didalam folder Belajar CSS
<html>
<head>
<title>Class Selector Embed</title>
</head>
<body>
<span class='Title'>Hello World</span>

<p class='Text'>
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and
more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.
</p>
<style>
.Title
{
font-size:20px;
color:blue;
}
.Text
{
background-color:gray;
color:white;
}
</style>
</body>
</html>
Silahkan dicoba. Dan hasilnya akan seperti ini
Jika kita menggunakan embed didalam sebuah tag html, kita tidak menggunakan tag <style> tetapi
menggunakan attribute style. Silahkan buat file baru dengan nama ClassSelector2.html
<html>
<head>
<title>Class Selector Embed</title>
</head>
<body>
45
<span style='font-size:20px; color:blue;'>
Hello World</span>
<p style='background-color:gray; color:white;'>

Ipsum.
</p>
</body>
</html>
Silahkan dicoba.
A.2 External
Dalam penggunakan css external, kita membutuhkan file dengan extension .css. Silahkan buat
file baru dengan ClassSelector3.html
<html>
<head>
<title>Class Selector External</title>
<link rel='stylesheet' type='text/css' href='ClassSelector.css' />


</head>
<body>
<span class='Title'>
Hello World</span>
<p class='Text'>
Ipsum.
</p>
</body>
</html>
Setelah itu buatlah file baru dengan nama ClassSelector.css ini adalah file CSS, jadi jangan
menggunakan file html tetapi css.
.Title
{
font-size:20px;
color:blue;
}
.Text
{
color:white;
}
Silahkan dicoba
46
B. ID Selector
Cara menggunakan ID selector pada html adalah dengan cara menggunakan symbol pager ( # ).
Cara penggunaanya sama saja dengan class selector.
B.1 Embed
Embed adalah menaruh data file dalam satu file. Jadi pada embed css kita menggunakan tag
<style> atau menggunakan css langsung pada blok yang diiinginkan. Buatlah file baru dengan nama
IdSelector1.html didalam folder Belajar CSS
<html>
<head>
<title>ID Selector Embed</title>
</head>
<body>
<span id='Title'>Hello World</span>

<p id='Text'>
Ipsum.
</p>
<style>
#Title
{
font-size:20px;
color:blue;
}
#Text
{
color:white;
}
</style>
</body>
</html>
Silahkan dicoba. Dan hasilnya akan seperti ini
A.2 External
Dalam penggunakan css external, kita membutuhkan file dengan extension .css. Silahkan buat
file baru dengan IdSelector2.html
<html>
<head>
<title>Id Selector External</title>
<link rel='stylesheet' type='text/css' href='IdSelector.css' />

47

</head>
<body>
<span id='Title'>
Hello World</span>
<p id='Text'>
Ipsum.
</p>
</body>
</html>
Setelah itu buatlah file baru dengan nama IdSelector.css ini adalah file CSS, jadi jangan
menggunakan file html tetapi css.
#Title
{
font-size:20px;
color:blue;
}
#Text
{
color:white;
}
Silahkan dicoba
C. Tag Selector
Tag selector cara penggunaanya berbeda dengan yang lain. karena ini menggunakan tag html secara
langsung. Ada kelemahan dalam penggunaan tag selector ini, kelemahannya dari segi sisi penggunaanya,
karena tidak specific terhadap suatu block jadi pada saat pemanggilan makan tag yang berhubungan
dengan tag tersebut akan berubah. Buatlah file baru dengan nama TagSelector.html
<html>
<head>
<title>Tag Selector Embed</title>
</head>
<body>
<span>Hello World</span>
<p>
</p>
<span>Hallo Dunia</span>
<style>
span
48
{
font-size:20px;
color:red;
}
p
{
background-color:green;
color:white;
}
</style>
</body>
</html>
D. Combination
Kita juga dapat mengkombinasikan ketiga selector tersebut kedalam sebuah pengaturan css secara
bersamaan pada attribute tag html. Buatlah file baru dengan nama Combination1.html
<html>
<head>
<title>Combination Selector</title>
<link rel='stylesheet' type='text/css' href='Combination1.css' />

</head>
<body>
<span class='Title' id='t1'>What is lorem ipsum</span>

<p>
</p>
<span class='Title' id='t2'>Why do we use it?</span>

<p>
It is a long established fact that a reader will be distracted by the readable content
of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less
normal distribution of letters, as opposed to using 'Content here, content here', making it look like
readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their
default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected
humour and the like).
</p>
<span class='Title' id='t3'>Where does it come from?</span>

<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a
piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical
literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
"de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book
is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem
Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those
interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also
reproduced in their exact original form, accompanied by English versions from the 1914 translation by
H. Rackham.
</p>
<span class='Title' id='t4'>Where can I get some?</span>

<p>
There are many variations of passages of Lorem Ipsum available, but the majority have
suffered alteration in some form, by injected humour, or randomised words which don't look even
slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't
49
anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend
to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses
a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate
Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
</p>
</body>
</html>
Setelah itu buatlah file css dengan nama Combination.css
.Title
{
font-size:20;
text-decoration:underline;
}
#t1
{
color:blue;
}
#t2
{
color:yellow;
}
#t3
{
color:green;
}
#t4
{
color:red;
}
p
{
text-align:justify;
}
Silahkan dicoba. Judul nya akan sama – sama size nya 20 pixel, tetapi warna nya berbeda – beda itu
tergantung dari id selector nya.
E. Nested Block
Lalu dalam pembuatan website ada begitu banyak combination terhadap beberapa tag. Lalu jika ada
beberapa block content ini kita akan buat berbeda lagi dengan yang lainnya, tetapi beberapa pengaturan
design yang lain tetap ada. Buatlah file baru dengan nama Combination2.html
<html>
<head>
<title>Combination Selector</title>
<link rel='stylesheet' type='text/css' href='Combination2.css' />

</head>
<body>
<div class='Awal'>
<span class='Title' id='t1'>What is lorem ipsum</span>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
50
galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
</p>
<span class='Title' id='t2'>Why do we use it?</span>

<p>
It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-
less normal distribution of letters, as opposed to using 'Content here, content here', making it look
like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as
their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their
infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose
(injected humour and the like).
</p>
</div>
<div class='Akhir'>
<span class='Title' id='t3'>Where does it come from?</span>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots
in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical
literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
"de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book
is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem
Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for
those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also
reproduced in their exact original form, accompanied by English versions from the 1914 translation by
H. Rackham.
</p>
<span class='Title' id='t4'>Where can I get some?</span>

<p>
There are many variations of passages of Lorem Ipsum available, but the majority
have suffered alteration in some form, by injected humour, or randomised words which don't look even
slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't
anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend
to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses
a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate
Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition,
injected humour, or non-characteristic words etc.
</p>
</div>
</body>
</html>
Dan buatlah file css dengan Combination2.css
.Title
{
font-size:20;
text-decoration:underline;
}
#t1
{
color:blue;
}
#t2
{
color:yellow;
}
#t3
{
51
color:green;
}
#t4
{
color:red;
}
p
{
text-align:justify;
}
/*
ada selector class dan tag, bisa juga disatukan
ketiga selector ini bisa disatukan dalam satu block line
maksudnya lihat, ada tag p didalam selector Class Awal dan Akhir
*/
.Awal p
{
color:white;
}
.Akhir p
{
background-color:orange;
color:white;
}
Maksud dari nested adalah, menggunakan selector yang ada dalam selector, tidak mesti sama, kita bisa
mengabungkan ketiga selector dalam satu block line.
52
CSS Code
BAB 10
53
A. Pengaturan Awal
Pada awalan sebelum kita mendesign ada code css sebagai penghapus jarak semua content. Buatlah
file baru dengan nama FirstSetting.html
<html>
<head>
<title>First Setting</title>
</head>
<body>
<span>Hello World</span>
<p>
</p>
<style>
span
{
font-size:20px;
color:red;
}
p
{
background-color:green;
color:white;
}
</style>
</body>
</html>
Jika ditampilkan dalam browser maka akan jadi seperti ini
Lihat terdapat celah antar content web dengan browser. Ok cara menghilangkan jarak antara content dann
browser adalah begini, pada css nya
*{ padding:0; margin:0; }
B. Coloring
Pewarnaan dengan css, kita biasanya menggunakan nama warna dalam Bahasa inggris seperti red,
orange, gray, black, white, green, blue, dan lain – lain. Tetapi pada dasarnya warna bukan hanya itu,
semisalal blue atau biru. Tetapi biru juga ada banyak warna kan?
54
Pewarnaan menggunakan code, code ini adalah warna dari RGB (Red Green Blue) atau juga CMYK
(Cyan, Magenta, Yellow, blacK). Untuk melihat code ini, saya merecomended untuk menggunakan
photoshop. Didalam photoshop terdapat sebuah pemilihan color seperti ini
Code yang dikotak adalah code color. Dan cara penggunaanya pada css color, lalu menggunakan tanda #.
Dasar dari RGB dan CMYK adalah warna hitam (000000), putih (ffffff), merah (ff0000), hijau
(00ff00), biru (0000ff), dan kuning (ffff00).
Pada pewarnaan di css ada beberapa bagian
1. Color : pewarnaan teks

2. Background color : warna content
3. Border color : batas content
C. Tab Body
Tag body, kita akan menggunakan tag ini dan mencari tahu apa saja yang dapat dilakukan css pada
tag html ini. Buatlah file baru dengan nama Body.html
<html>
<head>
<title>Body Setting</title>
</head>
<body>
<style>
55
body
{
background-color:blue;
}
</style>
</body>
</html>
Code diatas akan menghasilkan background color berwarna biru, tetapi pada saat kita menggunakan code
seperti ini
background-color:#009ada;
maka akan menghasilkan background color berwarna biru juga, tetapi dengan warna biru yang berbeda.
Sekarang kita akan mencoba untuk menggunakan background image. Carilah gambar denga
resolusi yang kecil.
<style>
body
{
background-image:url('images 01.jpg');
}
</style>
Code diatas akan menjadi seperti gambar dibawah ini
Maka akan muncul banyak gambar yang diulang. Cara mengatasi nya adalah mencari gambar yang
resolusinya tinggi, recommended 1920 x 1440 atau hd resolution. Untuk tidak mengulangi gambar diatas
kita bisa menggunakan code ini.
body
56
{
background-repeat:no-repeat;
}
Maka hasilnya akan seperti ini.
Gambar diatar atau gambar yang menjadi background image memiliki resolusi 259 x 194. Kita bisa
mengubah resolution nya dengan cara seperti ini.
body
{
background-size: 300px, 200px;
}
By defaut gambar akan muncul pada atas kiri browser. Lalu apakah dapat kita rubah posisinya?
Merubah posisi dari atas, bawah, tengah dan kanan.
background-position
Selanjutnya, yang namanya website dapat kita scroll kebawah, jika site page tersebut memiliki
banyak content atau data yang melibihi height browser nya. Tetapi background image ini tidak diulang
atau menggunakan background-repeat:no-repeat;. Ok kita menggunakan code ini.
body
{
background-attachment: fixed;
}
57
D. Clear dan Float
Float adalah sebuah code css untuk memaksakan kearah sebelah kanan atau kiri. Maksudnya adalah
menggabukan content dengan contet sebelumnya hingga membentuk width 100%. Jadi disarankan untuk
selalu menggunakan float pada setiap block css.
float:left
float:right
Ingat float hanya mempunyai value dua, left dan right, tidak ada yang lain.
Clear adalah sebuah code css untuk membuat sebuah breakline. Clear bisa menggunakan value
right, left dan both.
clear: both;
E. Padding dan Margin
Padding properties digunakan untuk membuat space atau jarak content. Padding membuat area
kosong disekitar content didalam border content. Dengan css kamu dapat menggunakan control penuh
terhadap padding (top, right, bottom dan left). Buatlah file baru dengan nama LanjutanDasar1.html
<html>
<head>
<title>Lanjutan Dasar</title>
<link rel='stylesheet' type='text/css' href='LanjutanDasa1.css' />
</head>
<body>
<p class='Text'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
Setelah itu buatlah css file dengan nama LanjutanDasar1.css
*{ margin: 0; padding: 0; }
.Text
{
float: left;
background-color: #ababab;
}
Code diatas akan menampilkan hasil seperti gambar dibawah ini
58
Lihat tidak ada jarak boder atau bagian pinggir content dengan isi content. Coba berikan padding.
.Text
{
float: left;
padding-left: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-top: 10px;
}
Jika semua padding nya sama value nya. Maka persingkat saja menjadi seperti ini
.Text
{
float: left;
padding: 10px;
}
Maka hasilnya akan seperti ini
Jika padding memberikan space atau ruang antara border dengan content maka margin memberikan
ruang kosong antara border dengan content yang lainnya bukan content yang ada didalam border.
Penggunaan margin juga ada top, bottom, left dan right.
.Text
{
float: left;
padding: 10px;
margin: 10px;
}
Lihatlah hasilnya seperti gambar dibawah ini
59
Penggunaan padding dan margin, memiliki satuan value adalah pixel. Atau bisa juga bisa menggunakan
presentase ( % ). Properties ini juga dapat menggunakan value negative. Cobalah ini.
.Text
{
float: left;
padding: 10px;
margin: 10px;
margin-top: -10px;
}
F. Width dan Height
Width dan height adalah pengaturan untuk lebar dan panjang content. Penggunaan value untuk
width dan height adalah pixel dan presentase. Presentase diambil dari panjang atau lebar nya browser
yang digunakan.
.Text
{
float: left;
width: 900px;
height: 200px;
padding: 10px;
margin: 10px;
}
Maka hasilnya akan seperti ini, jadi lebar dari content dengan class Text adalah 900px dan panjangnya
200px.
60
Width dengan presentase 100% adalah width yang menyesuaikan lebarnyanya browser. Jadi mau
selebar apapun browsernya maka lebar nya content akan menyusuaikan.
.Text
{
float: left;
width: 100%;
padding: 10px;
margin: 10px;
}
Maka hasilnya akan terlihat seperti gambar diatas, terdapat scroll horizontal pada bawah browser. Ini
tidak biasa karena ada horizontal sroll, jika scroll kebawah atau vertical sroll akan mudah. Kenapa
61
vertical scroll lebih mudah dibanding horizontal scroll? Karena pada touchpad atau mouse, terdapat
function vertical scroll jadi lebih mudah menuju bawah atas dibanding kanan kiri. Lalu kenapa bisa
terjadi horizontal scroll. Kita lihat kembali css yang membuat ini content.
width: 100%;
padding: 10px;
margin: 10px;
width, padding dan margin semua css tertuju pada content saja, tidak menghitung panjang dan atau lebar
content tambahan karena padding dan margin. Jadi ibarat kata width nya melebihi 100%. Coba kita ulang
pengaturan css nya.
.Text
{
float: left;
width: 100%;
}
Maka hasilnya akan seperti ini
Lalu kita akan membuat jarak antara content dan border yaitu buat padding
.Text
{
float: left;
width: 98%;
padding: 1%;
}
Width nya dijadikan 98% karena akan terisi dengan padding 1%. Tetapi itu kan baru 99%, lalu yang 1%
kemana? Lihat margin adalalah gabungan dari top, left, bottom dan right. Maka left dan right sama –
sama 1 %, dan bernilai 2%, jadi sudah 100%.
Dari pembelajaran kita tentang padding, margin dan width. Kita sudah bisa membuat content itu
berada ditengah.
.Text
{
float: left;
62
width: 90%;
padding: 1%;
margin: 3%;
}
G. Border
Border adalah garis pinggir dari sebuah content, by default garis pinggir atau border ini tidak pernah
terlihat dalam content tersebut. Border akan muncul jika di setting.
.Text
{
float: left;
width: 90%;
padding: 1%;
margin: 3%;
border-color: #000000;
border-style: solid;
border-width: 3px;
}
Tebal dari border adalah 3 pixel, jenisnya solid dan warnanya adalah hitam.
H. Text
Dalam pengaturan teks css, kita dapat melakukan beberapa hal. Besaran teks, type teks dan juga
warna. Ada beberapa properties teks css
1. color : pewarnaan
2. font-size : ukuran teks
3. font-family : font type
63
4. font-variant : variasi font
5. font-weight : ketelabalan tulisan
6. font-style : gaya tulisan
7. align : align teks
8. text-decoration : dekorasi teks
.Text
{
float: left;
width: 90%;
padding: 1%;
margin: 3%;
border-width: 3px;
font-size: 20px;
font-family: monospace;
font-variant: small-caps;
}
I. Link
Styling link dapat juga kita rubah menjadi lebih mennarik. Sebenarnya bukan hanya link saja, tetapi
apapun, yang berhubungan dengan mouse atau focus control.
<html>
<head>
<title>Lanjutan Dasar</title>
<link rel='stylesheet' type='text/css' href='LanjutanDasar1.css' />
</head>
<body>
<p class='Text'>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
64
the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<span class='Title'>Stylish Link</span>
<div class='Link'>
<a href='http://www.google.com'>Google</a>
<a href='http://www.yahoo.com'>Yahoo</a>
<a href='http://www.bing.com'>Bink</a>
</div>
</body>
</html>
Setalah itu pada file LanjutanDasa1.css tambahkan code css ini
.Title
{
clear: both;
float: left;
font-size: 20px;
color: #0082b8;
margin-left:3%;
}
.Link
{
clear: both;
float: left;
margin-left:3%;
margin-top:10px;
}
/* unvisited link */
.Link a:link {
color: red;
}
/* visited link */
.Link a:visited {
color: green;
}
/* mouse over link */

.Link a:hover {
color: gray;
}
/* selected link */
.Link a:active {
color: blue;
}
J. List
List atau biasa menggunaka tag <ul> atau <ol>, bukan hanya menggunakan numeric atau juga
square list. Tetapi kita juga bisa rubah style nya, dengan menggunakan css, atau bahkan menghilangkan
style nya.
ul li
{
list-style : [value]
}
65
K. Other
Masih banyak lagi css code yang ada pada web, kalian bisa belajar lebih dari beberapa website
lainnya seperti http://www.w3schools.com/css/
66
CSS Lanjutan
BAB 11
67
A. Horizontal Menu
Horizontal menu adalah menu yang memanjang dari kanan ke kiri. Buatlah file baru dengan nama
HorizontalMenu.html
<html>
<head>
<title>Horizontal Menu</title>
<link rel='stylesheet' type='text/css' href='HorizontalMenu.css' />
</head>
<body>
<ul class='MainMenu'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Product</a>
</li>
<li>
<a href='#'>Forum</a>
</li>
</ul>
</body>
</html>
Setelah itu buat file css HorizontalMenu.css
.MainMenu
{
clear: both; float: left;
}
.MainMenu li
{
float: left;
/* List nya akan menjadi horizontal bukan vertical */
list-style: none;
/* List nya tidak ada bullet */
}
.MainMenu li a
{
float: left;
background-color: #017be3;
color:#ffffff;
text-decoration: none;
/* tidak ada underline */
padding-top: 10px;
padding-left: 20px;
}
.MainMenu li a:hover
{
background-color: #9a9a9a;
}
68
B. Menu Dropdown
Menu Dropdown adalah menu yang mempunyai sub menu. Tetapi menu dropdown disini kita akan
membuat secara horizontal. Buatlah file baru dengan nama MenuDropdown.html
<html>
<head>
<title>Menu Dropdown</title>
<link rel='stylesheet' type='text/css' href='MenuDropdown.css' />
</head>
<body>
<li>
</li>
<li>
<ul class='ChildMainMenu'>
<li>
<a href='#'>Link 1</a>
</li>
<li>
</li>
</ul>
</li>
<li>
<a href='#'>Contact</a>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</li>
<li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</li>
<li>
</li>
</ul>
</body>
</html>
69
Setelah itu buatlah file css dengan nama MenuDropdown.css
.MainMenu
{
}
.MainMenu li
{
float: left;
/* List nya akan menjadi horizontal bukan vertical */
list-style: none;
/* List nya tidak ada bullet */
}
.MainMenu li a
{
float: left;
background-color: #017be3;
color:#ffffff;
/* tidak ada underline */
padding-top: 10px;
padding-left: 20px;
font-size: 15px;
}
{
}
/*
====================================================
Child Main Menu
====================================================
*/
.MainMenu li .ChildMainMenu
{
clear: both;
float:left;
display: none;
/*pada awalnya akan menhilang*/
position: absolute;
/* tidak terpengaruh posisi apapun */
margin-top: 35px;
}
.MainMenu li:hover .ChildMainMenu
{
display: block;
/*lalu akan dimunculkan kembali*/
}
.MainMenu li .ChildMainMenu li
{
clear:both;
/* list secara vertical */
float:left;
}
70
C. Bangun Datar
Kita juga terkadang membuat sebuah bangun datar, seperti lingkaran, kotak, segitiga dan lain – lain.
buatlah file baru dengan nama BangunDatar.html
<html>
<head>
<title>Bangun Datar</title>
<link rel='stylesheet' type='text/css' href='MenuDropdown.css' />
</head>
<body>
<div class='Kotak'>
</div>
<div class='PersegiPanjang'>
</div>
<div class='Lingkaran'>
</div>
<div class='Segitiga'>
</div>
<style>
.Kotak
{
clear: both;
float: left;
width: 100px;
height: 100px;
}
.PersegiPanjang
{
float: left;
width: 200px;
height: 100px;
margin-left: 10px;
}
.Lingkaran
{
width: 80px;
height: 80px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin-top: 20px;
background-color: #0f6fc1;
}
.Segitiga
{
clear: both;
float:left;
margin-top: 20px;
71
border-bottom: 28px solid transparent;
border-right: 40px solid #18c10f;
border-top: 28px solid transparent;
}
</style>
</body>
</html>
72
Kerangka Design
BAB 12
73
A. Pengertian
Kita harus bisa membuat ide terlebih dahulu, kita bisa melihat design website orang lain atau juga
kita bisa buat sendiri design yang diinginkan.
Setelah itu kita membuat terlebih dahulu content nya tanpa data sebenarnya. Maksudnya adalah
membuat data asal, untuk menentukan design awal.
B. Pembuatan Kerangka
74
Ini adalah contoh kerangka web. Pertama kita identifikasi dulu kira – kira ada berapa block yang
akan dibuat. Saran saya kita buat menjadi beberapa row. Dan row tersebut buat membuatnya menjadi
column.
Diatas jika dibagi menjadi row, terdapat empat row. Buatlah file baru dengan nama KerangkaHome.html
dan kita buat row pertama dahulu.
Lalu setelah itu identifikasi lagi, ada berapa block didalamnya. Ada dua block, sebelah kanan dan kiri.
<html>
<head>
<title>Kerangka Home</title>
<link rel='stylesheet' type='text/css' href='KerangkaHome.css' />
</head>
<body>
<div class='RowSatu'>
<div class='Block1'>
</div>
</div>
</div>
</body>
</html>
Setelah itu buat css file dengan nama KerangkaHome.css
75
body
{
width: 100%; height: 100%;
}
.RowSatu
{
width: 90%;
margin-left: 5%;
margin-top: 20px;
}
.RowSatu .Block1
{
float: left;
width: 300px;
height: 80px;
background-color: #b8b8b8;
}
.RowSatu .Block2
{
float: right;
width: 400px;
height: 80px;
}
Setelah itu kita buat row kedua.
Seperti dilihat hanya ada satu block saja. Jadi tidak nested tag <div>
<html>
<head>
</head>
<body>
</div>
</div>
</div>
<div class='RowDua'>
</div>
</body>
</html>
76
Lalu pada css file nya, tambahkan code ini
.RowDua
{
width: 90%;
height: 300px;
margin-left: 5%;
margin-top: 20px;
Kita lanjut ke row selanjutnya
Disini terdiri dari tiga block
<html>
<head>
</head>
<body>
</div>
</div>
</div>
</div>
<div class='RowTiga'>

<div class='Block'>
</div>
<div class='Space'></div>
<div class='Block'>
</div>
<div class='Block'>
</div>
</div>
77
</body>
</html>
Lalu pada file css tambahkan code ini
.RowTiga
{
width: 90%;
margin-left: 5%;
margin-top: 20px;
}
.RowTiga .Block
{
float: left;
width: 30%; height: 400px;
}
.RowTiga .Space
{
float: left;
width: 5%; height: 1px;
background-color: #ffffff;
}
Row terakhir
Hanya satu block saja. Ini sama seperti row ke dua.
<html>
<head>
</head>
<body>
</div>
</div>
</div>
</div>
<div class='RowTiga'>

<div class='Block'>
</div>
<div class='Block'>
</div>
<div class='Block'>
</div>
</div>
78
<div class='RowEmpat'>
</div>
</body>
</html>
Lalu pada css file nya.
.RowEmpat
{
width: 90%;
height: 50px;
margin-left: 5%;
margin-top: 20px;
}
Sudah jadi pembuatan kerangkanya.
C. Pembuatan Content
Setelah belajar peletakkan block div, dalam pembuatan kerangka web, mari sekarang belajar
pembuatan content block div nya. Perhatikan gambar design web sedehana berikut.
Buatlah folder Simple Project didalam folder Belajar HTML. Silahkan buat file baru dengan nama
Home.html, setelah itu kita pelajari hal apa yang kita harus lakukan dulu. Ya kita potong – potong dahulu
bagian – bagian row nya.
Yang pertama ada block logo dan menu
79
Kita fokuskan untuk membuat block logo terlebih dahulu.
Logo ini kita bagi lagi beberapa block. Kita bagia dua block, ada gambar dan tulisan. Lalu tulisan dibagi
lagi menjadi dua, karena bentuk tulisannya berbeda.
<html>
<head>
<title>Simple Project</title>
<link rel='shortcut icon' href='Images/arrow icon.png' />
<link rel='stylesheet' type='text/css' href='Stylesheet/Main.css' />

<link rel='stylesheet' type='text/css' href='Stylesheet/Home.css' />
</head>
<body>
<div class='LogoIcon'>
<img src='Images/arrow icon.png' />
<div class='LogoName'>
<span id='Title1'>OS Qwerty</span>
<span id='Title2'>Online Store Qwerty</span>
</div>
</div>
</body>
</html>
Lalu buatlah folder dengan nama “Stylesheet” dan buat juga file css didalamnya Main.css dan Home.css.
Pada file Main.css tambahkan code ini
.LogoIcon
{
margin-top: 20px;
margin-left: 5%;
}
.LogoIcon img
{
float: left;
width: 50px; height: 50px;
}
.LogoIcon .LogoName
{
float: left;
margin-left: 5px;
}
.LogoIcon .LogoName #Title1
{
float: left;
font-size: 25px;
color: #0071da;
}
.LogoIcon .LogoName #Title2
{
clear:both; float: left;
font-size: 15px;
color: #000000;
80
}
Setelah itu kita buat menu, jenis menu nya adalah Horizontal Menu.
<html>
<head>

</head>
<body>
</div>
</div>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</body>
</html>
Pada file css Main.css tambahkan code ini
.MainMenu
{
float:right;
margin-top: 20px;
margin-right: 5%;
}
.MainMenu li
{
float: left;
list-style: none;
}
.MainMenu li a
{
float: left;
padding-left: 20px;
padding-top: 10px;
background-color: #0071da;
color:#ffffff;
font-size: 20px;
81
}
{
}
Selanjutnya
Didalamnya ada dua block yaitu gambar dan pagaraph.
<html>
<head>

</head>
<body>
</div>
</div>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<div class='Content1'>
<img src='Images/User 01.png' />
<p>
        Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
<br/><br/>
82
        It is a long established fact that a
reader will be distracted by the readable content of a page when looking at its layout. The point of
using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English. Many desktop publishing packages
and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum'
will uncover many web sites still in their infancy. Various versions have evolved over the years,
sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
</body>
</html>
Pada file Home.css tambahkan file ini
.Content1
{
width: 86%;
padding: 2%;
margin-left: 5%;
margin-top: 20px;
/* Css box shadow */

-webkit-box-shadow: 0px 0px 8px #ccc;
-moz-box-shadow: 0px 0px 8px #ccc;
box-shadow: 0px 0px 8px #ccc;
}
.Content1 img
{
float: left;
width: 200px;
height: 230px;
}
.Content1 p
{
float: left;
font-size: 15px;
width: 75%;
text-align: justify;
}
Setalah block conten1, maka kita berlanjut block content2
Di block ini kita harus perhatikan baik – baik. Block nya terlihat sama, tetapi isi dari content setiap block
berbeda. Disini kita mensiasatinya dengan class yang sama tetapi id yang berbeda.
<html>
<head>
83

</head>
<body>
</div>
</div>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<p>
<br/><br/>
</p>
</div>
<div class='Block' id='Product'>
<span class='Title'>Our Product</span>
<img src='Images/Product/Bag 01.png' />
<p>
have suffered alteration in some form,
by injected humour, or randomised words which don't look even slightly believable.
<br/><br/>
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't
anything embarrassing hidden in the middle of text.
<br/><a href='#' class='SeeMore'>See More</a>
</p>
</div>
<div class='Block' id='Contact'>
<span class='Title'>Contact</span>
<p>
<img src='Images/Icon 01.png' /> Address<br/>
Jalan Raya Unknown Gg. Qwerty Rt 01 rw 05 Desa Key Kota PC Kode Pos 010101
84
<br/><br/>
<img src='Images/Icon 02.png' /> Phone<br/>
+62 812 34567890
<br/><br/>
<img src='Images/Icon 03.png' /> Email<br/>
something@company.com
</p>
<a href='#' class='SeeMore'>See More</a>
</div>
<div class='Block' id='Forum'>
<span class='Title'>Forum</span>
<div class='Comment'>
<img src='Images/Icon 04.png' />
<span class='Name'>Budi</span>
<span class='Date'>June 2, 2016</span>
<span class='Text'>Lumayan Bagus juga barang - barang nya</span>
</div>
<span class='Name'>Edi</span>
<span class='Text'>Thanks gan barangnya</span>
</div>
<span class='Name'>Judi</span>
<span class='Text'>Bisa custom barang?</span>
</div>
<span class='Name'>Udin</span>
<span class='Date'>May 30, 2016</span>
<span class='Text'>Like ...!!!!</span>
</div>
<p>
</p>
</div>
</div>
</body>
</html>
Lalu pada file Home.css tambahkan code ini
/*=================================*/
.Content2
{
width: 90%;
margin-left: 5%;
margin-top: 20px;
}
.Content2 .Block
{
float: left;
width: 30%;
border-width: 2px;
padding: 1%;
85
/* Membuat lengkungan disudut */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.Content2 .Block .Title
{
float: left;
width: 100%;
text-align: center;
color: #209900;
margin-bottom: 10px;
}
.Content2 .Block .SeeMore
{
color:blue;
}
.Content2 .Block .SeeMore:hover
{
text-decoration: underline;
}
.Content2 .Space
{
float: left;
width: 1%;
height: 1px;
}
/*
ID Product
*/
.Content2 #Product img

{
clear:both; float: left;
width: 100px;
}
/*
Contact
*/
.Content2 #Contact p
{
}
.Content2 #Contact p img
{
}
/*
Forum
*/
.Content2 #Forum .Comment
{
width: 100%;
margin-bottom: 10px;
}
.Content2 #Forum .Comment img
{
float: left;
}
.Content2 #Forum .Comment .Name
{
float: left;
86
font-size: 15px;
color: #0080c2;
margin-left: 5px;
}
.Content2 #Forum .Comment .Date
{
float: right;
font-size: 15px;
color: #9b9b9b;
}
.Content2 #Forum .Comment .Text
{
clear: both;
float: left;
font-size: 13px;
color: #000000;
}
.Content2 #Forum p
{
}
Row terakhir
<html>
<head>

</head>
<body>
</div>
</div>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
<p>
87
<br/><br/>
</p>
</div>
<div class='Block' id='Product'>
<span class='Title'>Our Product</span>
<img src='Images/Product/Bag 01.png' />
<p>
have suffered alteration in some form,
by injected humour, or randomised words which don't look even slightly believable.
<br/><br/>
If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't
anything embarrassing hidden in the middle of text.
<br/><a href='#' class='SeeMore'>See More</a>
</p>
</div>
<div class='Block' id='Contact'>
<span class='Title'>Contact</span>
<p>
<img src='Images/Icon 01.png' /> Address<br/>
Jalan Raya Unknown Gg. Qwerty Rt 01 rw 05 Desa Key Kota PC Kode Pos 010101
<br/><br/>
<img src='Images/Icon 02.png' /> Phone<br/>
+62 812 34567890
<br/><br/>
<img src='Images/Icon 03.png' /> Email<br/>
something@company.com
</p>
</div>
<div class='Block' id='Forum'>
<span class='Title'>Forum</span>
<span class='Name'>Budi</span>
<span class='Text'>Lumayan Bagus juga barang - barang nya</span>
</div>
<span class='Name'>Edi</span>
<span class='Text'>Thanks gan barangnya</span>
</div>
<span class='Name'>Judi</span>
<span class='Text'>Bisa custom barang?</span>
</div>
<span class='Name'>Udin</span>
88
<span class='Date'>May 30, 2016</span>
<span class='Text'>Like ...!!!!</span>
</div>
<p>
</p>
</div>
</div>
<div class='Footer'>
<span class='Left'>
Copyright © 2016
</span>
<span class='Right'>
Designed By MFA
</span>
</div>
</body>
</html>
Pada file Main.css tambahkan code ini
.Footer
{
width: 88%;
padding: 1%;
margin-left: 5%;
margin-top: 20px;
background-color: #000000;
color:#ffffff;
}
.Footer .Left
{
float: left;
}
.Footer .Right
{
float: right;
}
Perhatikan setiap code yang dibuat.
89
Javascript
BAB 13
90
A. Pengertian
Javascript adalah dynamic Bahasa computer. hal ini dapat memudahkan sebagai dari bagian
halaman web. Javascript ini dapat meng implementasikan client side script untuk berinteraksi dengan user
dan website.
Javascript pertama kali dikenal dengan nama LiveScript, tetapi netscape merubah nama itu menjadi
Javascript, dan pertama dibuat pada tahun 1995.
B. Penggunaan Script
Penulisan javascript dapat dituliskan embed di html page nya dengan menuliskan tag <script> atau
juga menuliskan dalam file javascript dengan extension .js.
<script src="filename.js"></script>
Penulisan javasript bisa dimana saja, bisa tag <head> atau <body>
Untuk pembelajaran kali ini buatlah folder baru dengan nama Belajar JS didalam folder Belajar HTML.
C. Function
Function adalah sebuah block algorithm code yang digunakan untuk menyusun langkah terhadap
sebuah logika.
<script>
function fnName1()
{
}
</script>
91
Javascript Code
BAB 14
92
A. Membuat Tulisan Dalam Bentuk HTML
Dalam javascript kita harus tahu bagaimana cara menuliskan code dari javascript menjadi code
html. Buatlah file baru dengan nama WrittenHTML.html dalam folder Belajar JS.
<html>
<head>
<title>Written HTML</title>
</head>
<body>
<script>
document.write("<h1>Hello</h1>");
</script>
</body>
</html>
Jadi kita dapat menuliskan tag html dalam javascript. Dengan menggunakan document.write.
B. Document Get Element
Membuat sebuah value string pada block dengan attribute id. buatlah file baru dengan nama
GetElement.html
<html>
<head>
<title>Get Element</title>
</head>
<body>
<form>
Tulislah sesuatu
<input type='text' name='txt_Control' id='txt_Control' />
<input type='button' value='Try' onclick='MyTry()' />
</form>
<br/>
Anda menulis pada id : <span id='id_Output'></span>
<br/>
Jika dimasukkan kedalam input text : <input type='text' name='txt_Control'
id='txt_Output' />
<script>
function MyTry()
{
var text = document.getElementById("txt_Control").value;
document.getElementById("id_Output").innerHTML = text;
document.getElementById("txt_Output").value = text;
}
</script>
</body>
</html>
93
C. Javascript Enable
Ada beberapa browser yang ga support javascript, atau ada yang sengaja tidak mengaktifkan
javascript. Nah kita bisa mengakalinya jika javascript tidak aktif, dengan tag <nonscript>. Buatlah file
baru dengan nama JavascriptEnable.html
<html>
<head>
<title>JavaScript Enable</title>
</head>
<body>
<script>
document.write("JavaScript Enable")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text inside the noscript element.</p>
</body>
</html>
D. Message Box
Message box adalah pesan dalam bentuk box, yang digunakan untuk menyampaikan suatu pesan
dari hasil algorithm yang terjadi. Penulisan message box sangat lah mudah,
<script>
alert(‘Pesan’);
</script>
94
Penutup
95
Yang telah dipelajari hanyalah dasar – dasarnya saja. Masih banyak lagi ilmu yang dapat dipelajari.
Apalagi yang namanya ilmu IT, setiap hari bisa berkembang dan setiap bulan ada ilmu baru didunia ini.
Ingat jangan terpaku pada satu Bahasa, karena dunia IT mengharuskan mengerti banyak Bahasa, apalagi
Bahasa inggris.
Saran saya terus lah belajar. Dan jangan berhenti.
96

Tutorial HTML, CSS, JS - Indonesian

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial HTML, CSS, JS - Indonesian

Diunggah oleh

Hak Cipta:

Format Tersedia

Introducing Website

Folder stylesheet 1. icon 01.png 1. user 01.png

Folder Body Part

<html> : Opening Tag

</html> : Closing Tag

<div> </div> : Block Content

<br/> : Break line

<a name="title1"><h1>Title 1 Heading</h1></a>

<a name="title2"><h1>Title 2 Heading</h1></a>

<a name="title3"><h1>Title 3 Heading</h1></a>

<a name="title4"><h1>Title 4 Heading</h1></a>

<a name="title5"><h1>Title 5 Heading</h1></a>

<a name="title6"><h1>Title 6 Heading</h1></a>

<a name="title7"><h1>Title 7 Heading</h1></a>

<a name="title8"><h1>Title 8 Heading</h1></a>

<a name="title9"><h1>Title 9 Heading</h1></a>

<a name="title10"><h1>Title 10 Heading</h1></a>

<h3>- Bahan -</h3>

<h3>- Alat -</h3>

<h3>- Langkah -</h3>

B. Colspan dan Rowspan

<h3>Colspan dan Rowspan</h3>

<form action='Form1.html' method='get' enctype='multipart/form-data'>

Full Name <input type='text' name='txt_FullName' />

Nick Name <input type='text' name='txt_NickName' />

<input type="submit" value="Submit" name="btn_Submit" />

C. Input Control HTML5

<form action='Form1.html' method='get' enctype='multipart/form-data'>

Number <input type='Nummber' name='num_Number' min='10' max='100' />

Adapun beberapa kelebihan CSS adalah sebagai berikut:

1. Memisahkan desain dengan konten halaman web.

D. Div Dan Span

Selector { Properties : Value; }

E.1 Class Selector

E.3 Tag Selector

<span class='Title'>Hello World</span>

Silahkan dicoba. Dan hasilnya akan seperti ini

<p style='background-color:gray; color:white;'>

<link rel='stylesheet' type='text/css' href='ClassSelector.css' />

<span id='Title'>Hello World</span>

Silahkan dicoba. Dan hasilnya akan seperti ini

<link rel='stylesheet' type='text/css' href='IdSelector.css' />

<link rel='stylesheet' type='text/css' href='Combination1.css' />

<span class='Title' id='t1'>What is lorem ipsum</span>

<span class='Title' id='t2'>Why do we use it?</span>

<span class='Title' id='t3'>Where does it come from?</span>

<span class='Title' id='t4'>Where can I get some?</span>

Setelah itu buatlah file css dengan nama Combination.css

<link rel='stylesheet' type='text/css' href='Combination2.css' />

<span class='Title' id='t2'>Why do we use it?</span>

<span class='Title' id='t4'>Where can I get some?</span>

Dan buatlah file css dengan Combination2.css

Jika ditampilkan dalam browser maka akan jadi seperti ini

Pada pewarnaan di css ada beberapa bagian

1. Color : pewarnaan teks

Code diatas akan menjadi seperti gambar dibawah ini

Maka hasilnya akan seperti ini.

E. Padding dan Margin

Setelah itu buatlah css file dengan nama LanjutanDasar1.css

Code diatas akan menampilkan hasil seperti gambar dibawah ini

Lihatlah hasilnya seperti gambar dibawah ini

F. Width dan Height

Maka hasilnya akan seperti ini