Upload
ardhi-wiratama-yudha
View
268
Download
2
Embed Size (px)
Citation preview
8/9/2019 Modul OLC - kelas A.pdf
1/98
Learning
Center
OmahTI
Learning
Center
Modul
::Web
Design
A::
Organisasi
Mahasiswa
Ahli
Teknologi
Informasi
Himpunan
Mahasiswa
Ilmu
Komputer
Universitas
Gadjah
Mada
2012
8/9/2019 Modul OLC - kelas A.pdf
2/98
! "# ! $ $ $ % $&%
' " ( ) ! * + ,-.
/ .# " ! + + 0 / !0 12., *.132 12 ! / / 132 !
+ /
*/ ( )/ 4/ "/ % 5 / ! 0
6 77 8 . , 8 6 77
. ! 0
9
8/9/2019 Modul OLC - kelas A.pdf
3/98
+ 6 77
8 : 8
% ! 0
&
x
-
&
new
2
-
Notepad++
File
Edit
Search View
Encoding
Language Sett ings
Macro
Ru n
Plugins
Window
?
X
otiH® e
*
I
-Ji
j|-.' [Wm\
new 2
|
2
Save As
5a
ve in:
File
name:
coba.htnnl
5ave
Files of
type:
Cancel
8/9/2019 Modul OLC - kelas A.pdf
4/98
,+ " 0
-
9
+
% 0
;
I
S3
lis)
J
|g
i
coba
>
I
©
file:///)
/Desktop/coba
ÿ
A,
8/9/2019 Modul OLC - kelas A.pdf
5/98
0
/ +
'
!
% < 0
=
?r
-
rr
DOC
TYPE h tm l PUBLIC
-//F3C//DTD
XHTML
I.D
Transitional//EN
http
:
/ /
ww w
w3
.org/
TP./
xh tm l
1/DTD/
xh tm l i tr
ans it
ional
dtd >
3
1
5
£
7
B
9
ID
11
12
13
|
|
Title
of tlie
document-;:/
1
it
le >
g
Tlie content of
tlie
document .
fit
-
0
J
Title o f th e
document
b
-
0
O
file:///l
/Desktop/coba.htmi
The content of
the
document
8/9/2019 Modul OLC - kelas A.pdf
6/98
0
-
% 0
>
3
4
5
e
1
8
9
ID
R
El
Title of
th e
document
<
heacl>
0
The
content
o f
th e
document.
-
L
\U
0
/
J
Title o f the document
m
*ÿ
o
O
file:///l
/Desktop/coba.htmi
The
content
of
the
document
8/9/2019 Modul OLC - kelas A.pdf
7/98
0
?
3
4
5
6
7
B
9
10
11
12
13
14
15
16
17
18
This
is
heading
l
This
is
heading
2
This is
heading
3
This is
heading
4
This is
heading
5
This
is
heading
6
B
ini
digunakan
Iiaiiya tmttik
membuat
heading.
Eiukan
untuk
menebalJtan,
Menebalakan huiuf atau ka l lmat
menggunakan
ta g
laiimya.
-
HBOID
r~
_
J
|p |
Title
of the document
x
y..
*
O
This
is
heading
1
This
is
heading
2
This is
heading
3
This is
heading
4
This
Is
heading
5
This is
heading ft
ini
digunakan
hanya
untiik membuat
heading.
Bukan
untuk menebalkan. Menebalakan
huruf
atau
kalimat
menggunakan
tag
lainnya.
8/9/2019 Modul OLC - kelas A.pdf
8/98
% 0
!"#$ !"#$
!"#$ !"#$
0
!
% 0
@
ILsJULJ
coba.html
O
O
file:///
Belajar
HTML.
Belajar
HTML.
Belajar
HTML.
Belajar
HTML.
/Desktop/coba.html
8/9/2019 Modul OLC - kelas A.pdf
9/98
"% & !'$
"% & !' $
0
%
! !
% 0
A
pJLsJliHI
#|
coba.html
AO
«ÿ
o
O
Fite:///ÿH ÿ/Desktop/coba.html
ÿ
Membuat
Garis Horisontal.
Membuat Garis
Horisontal
.
3
4
5
6
7
8
9
lO
11
12
ED
FH
EJ<
--
ni
acialali comment
Me mb u a t
Garis Hori3ontal.
Me mb u a t Garis
Horisontal
.
--
8/9/2019 Modul OLC - kelas A.pdf
10/98
0
!"
# +
B
5C 3 5C
(' / /
5 +
$ .
12 0
) ) '*) ) +) '+$
% 0
D
ÿ
ÿ
o
J
jjgj
coba.html
©
file:///(
AO
/Desktop/coba.html
ÿ
ÿ
Membuat
Garis
Horisontal .
Tuliskanlah
Judtil
WebsitemLi
is t dari
websitemu
8/9/2019 Modul OLC - kelas A.pdf
11/98
0
B %
! 0
!
/ !/ / /
/ ! ! ! !
0
as lei
Tuliskanlah JudulWebsr
*
O
O
file:///
'Desktop/coba.html
isi dari websitemu.
ÿ
(i)0@
Tuliskanlah Judul
Websitemu
-
Google Chrome
Tuliskanlah Judul Website
O
File:///
ÿDesktop/coba.html
m
dari
websitemu
8/9/2019 Modul OLC - kelas A.pdf
12/98
. " . E
'' +'',-.-
/%0 /%0,-0%- !!'!
!'!'
'
!
'!
'
' ',-0%- !
!!
!
!
!'!
!'
!'
-4
'
-
+ +,-( 12#- )35C
9
8/9/2019 Modul OLC - kelas A.pdf
13/98
% 0
0
. E
( 5C
3 F
F
F
F
% 0
&
8/9/2019 Modul OLC - kelas A.pdf
14/98
0
" ,+ 0
B / G ! ! 4$5$ $ %677876 "
+ 3 +,-''$3- $ - +
+ 4$5$ $ %677876''$3 -
+
$
3
1 32 $+ 0. " E
3 ,-0%-
+ 3 +,-0%- ,-0%- 5C
;
1
1ÿ1
coba.html
*>0
* *
O
O
fil
e:///m
J/Desktop/coba.html
ÿ
-
Notice
that we
have
only
specified
a
relative address for
the
image.
Since we
have
specified
a
base
URL
in
the head
section,
the browser
will
look
for
the
image
at
http:omahti.web.icLÿÿÿÿÿB/uploads2009
02bannerl
.jpg
W3
Schools
-
Notice
that the
link
opens
in
a
new
window,
even
if
it
has
no
target= _blank
attribute.
This is
because
the
target
attribute
of
the base element is set to
blank .
8/9/2019 Modul OLC - kelas A.pdf
15/98
" .
. E
+ %
9 F
4
. " E
:3' 3 3',-0%- H H H H
3 ,-0%- ,
3 3 3,-0%- , H I
5 3 5,-0%- , H I
+ 3 +,-0%- ,
3 ,-0%-
'3+ 3 '3+,-0%- 5C
% 3 %,-0%- J
0+ 3 0+,-0%- ,
% 0
3 +,-''$3- ,-; #''3 '-,-#' #- 5,
8/9/2019 Modul OLC - kelas A.pdf
16/98
1
' " . 0
. E
+ !
'3 F!
F
. $+ 0
. " E
' ',-0%-
% 0
"/ & / ! :
>
Desktop/coba.html
tlH
8/9/2019 Modul OLC - kelas A.pdf
17/98
0
B
"
!
' '
5
?
Click
on the
sun or
on
one of
the planets
to watch
it closer
:
carea shape-1
rect
coords= 0r0r82r126
alt= Sun
href= sun html
/>
carea shapes circle
coords= 90F58F3
alt-'Mercury
href-'mercur.html
/>
8/9/2019 Modul OLC - kelas A.pdf
18/98
. +
. " E
,-0%-
4 .
. " E
+ +,-0%- / /9/ 9
//
//9/9///
( (,-0%- 5C
'( '(,-0%- ,-0%- H ! H !! H
3 3,-0%- F H F H F H H
5 !
% &
' 5C ! 5
(
5 " .
. E
++* !!
+ !
H
@
8/9/2019 Modul OLC - kelas A.pdf
19/98
'3 F!
F
'. 6
>4'3 F!
4 .
. " E
+ +,-0%- !!F
+ +,-0%- / /9/ 9
//
//9/9///
( (,-0%- 5C
('3 ('3,-0%- F!
' ',-0%- !F
,-0%-
!
!
!
!
!
A
8/9/2019 Modul OLC - kelas A.pdf
20/98
!
0 0,-0%-
!
!
!
!
!
!
,-0%-
!
!!
3 3,-0%- F
F
F
F
9D
8/9/2019 Modul OLC - kelas A.pdf
21/98
% 0
(,-$5$- 3,-?'*-,-;-@ ;
0
'*
! +
5 0
. " E
+ '* +,-0%- !!F
( '* (,-0%- 5C
('3 '* ('3,-0%- F!
'* ,-0%- !
:
+!
9
S3
||
ÿ= ÿ
||
Is)
|
1
Is-
coba.html
xYta
y.
_
i_
+
o
O file:/// l/Desktop/coba.html
ÿ
Visit OmahTI
8/9/2019 Modul OLC - kelas A.pdf
22/98
'* ,-0%-
!
!
!
!
!
0 '* 0,-0%-
!
!
!
!
!
99
8/9/2019 Modul OLC - kelas A.pdf
23/98
8/9/2019 Modul OLC - kelas A.pdf
24/98
0
#
(
+
($ " ( (
/ / !/ (
4 .
. " E
( ( (,-0%- H D
'3+ ( '3+,-0%- 5C
3'3 ( 3'3,-0%-
3'5 ( 3'5,-0%-
' ( ',-0%-
'A ( 'A,-0%- (
+ ( +,-0%- 5C
% 0
9;
ÿJLsJLMJ
t
(2
coba.html
AO
+
ÿ
O
Ofil
e:///ÿH
ÿDesktop/coba.html
ÿ
am formatted
with a linked
style
sheet
Me
too
Frame
A
8/9/2019 Modul OLC - kelas A.pdf
25/98
9
&
!
0
9=
Frame
B
Frame
C
cframe src= f
rame2
.
html
f>
8/9/2019 Modul OLC - kelas A.pdf
26/98
8/9/2019 Modul OLC - kelas A.pdf
27/98
5 !
(
"
4 .
. " E
3' ( 3',-0%- H H H H
( ( (,-0%- H D
3 ( 3,-0%- H I
5 ( 5,-0%- H I
'3+ ( '3+,-0%- 5C
3'3 ( 3'3,-0%-
3'5 ( 3'5,-0%-
' ( ',-0%-
+'3 ( +'3,-0%- H H
+ ( +,-0%- 5C
% 0
9?
Sorry, your browser does
not
handle frames
Your
browser does not
support
iframes.
8/9/2019 Modul OLC - kelas A.pdf
28/98
0
#
%
%
4
. % 0
. " E
% ,-0%- -! H !! H L
%
!
% 0
9@
*LILsJlMJ
coba.html
ÿ
o
O
fit
e--///ÿm H/Desktop/coba.html
ÿ
Onuml
rganisasi Mahasiswa
Ahli Teknol
ÿ
8/9/2019 Modul OLC - kelas A.pdf
29/98
0
/
/
9A
An
ordered
list:
Coffee
Tea
An
unordered list
:
Coffee
Tea
j|
=
||i°
y
1ÿ |
coba.html
A-
ÿ ÿ
O
ÿDesktop/coba.html
ÿ
ÿ
An ordered list:
1. Coffee
2.
Tea
3. Milk
An unordered
list:
Coffee
Tea
Milk
8/9/2019 Modul OLC - kelas A.pdf
30/98
+
% 0
0
'
" / /
4 . 0
. " E
3' 3',-0%- H H !
&D
Coffee
-
black hot
drinkc/dd>
8/9/2019 Modul OLC - kelas A.pdf
31/98
3+ 3+,-0%- !F H F HF
,-0%-
+'3 +'3,-0%-
++'3 ++'3,-0%-
( (,-0%- : H : H H H : H H H H
% %,-0%- H H H ! H
% %,-0%-
5 5,-0%- H I
0
. " E
3' 3',-0%- H H ! H + H !
3+ 3+,-0%- F H F H!
+ +,-0%- !!
+(( +((,-0%-
03' 03',-0%- H H H
!
! 4 . 0
. " E
,-0%-
3' 3',-0%- H H ! H + H !
. .,-0%- !F
3+ 3+,-0%- F H F H
&
8/9/2019 Modul OLC - kelas A.pdf
32/98
8/9/2019 Modul OLC - kelas A.pdf
33/98
0
( 4
. 0
. " E
3' 3',-0%- H H ! H + H !
+ +,-0%- !!
+(( +((,-0%-
03' 03',-0%- H H H
! * ( 5 4
. 4 . M
+
(
! *
5 4. ( 4 . M
+
% 0
&&
S3
II
=
II
@1
J
(i]
coba.html
x\0
«.
+•
O
O
file:///
(/Desktop/coba.html
ÿ
Bulan
Pengeluaran
Januari
Rp.
500.000,-
Febinari
Rp.
600.
000,-
8/9/2019 Modul OLC - kelas A.pdf
34/98
0
&;
thead
{color
:
green}
tbody {color:blue;height:50px}
tfoot
{color:
red}
Bulan-=/th>
Pengeluaran
Total
Rp.
l.
100.000,
-
Januari
Rp.500.000J-
Februari
Rp.600.000,
-
8/9/2019 Modul OLC - kelas A.pdf
35/98
8/9/2019 Modul OLC - kelas A.pdf
36/98
+
+3% 5
4 . 4 . +
+ +3%
+ '3 ' 5 4 .
4 .
+
% 0
/ ! ! ,! 0
&>
o
*
*
O
f
coba.html
\
O
file:///
'Desktop/coba.html
ÿ
a.
Pengeluaran Bulanan
Bulan
Pengeluaran
Januari
Rp.500.000.-
8/9/2019 Modul OLC - kelas A.pdf
37/98
0
&?
Kode
Nama
Barang
Harga
12345
Buku
Gambar
Rp.2000,
-
23456
Penggaris
Rp.l500r-|ÿ/td>
Jl~||isjy
[§=] coba.html
AO
ÿ ÿ
o
©
file:///
/Desktop/coba.html
ÿ
Harga
Rp.2000,-
Rp.
1500,-
8/9/2019 Modul OLC - kelas A.pdf
38/98
()
- " %"" N3!O %"" .$+
. " E
,-0%- 3!
5 4 .
. " E
,-0%- !
:
+!
% P
&@
hi
{color:
red;}
p
{color:
blue;
}
Header
l
A
paragraph.
8/9/2019 Modul OLC - kelas A.pdf
39/98
8/9/2019 Modul OLC - kelas A.pdf
40/98
8/9/2019 Modul OLC - kelas A.pdf
41/98
#"
(
'%/ ./ +/
'/ 3%/ (/
+
. " E
+' ( +',-0%- 5C
4 .
. " E
++ ( ++,-0%- *F
+++ ( +++,-0%- !!F
'+ ( '+,-0%- .!3'''!
3'
3
( ,-0%- # H ,
' ( ',-0%-
3 ( 3,-0%- F H F H F H F H
'%
4 .
. " E
++ '% ++,-0%- .3K H :3K H 3K H*F
3' '% 3',-0%- H H H ! H
;
8/9/2019 Modul OLC - kelas A.pdf
42/98
+
'% ,-0%-
++* '% ++*,-0%- !!
'% ,-0%- .'3 '% .'3,-0%-
' '% ',-0%-
' '% ',-0%-
A '% A,-0%-
+ '% +,-0%- 5C
'% ,-0%- H !! H H H H H H H H
0% '% 0%,-0%-
% 0
!
!
;9
Form
telah
dikirim
First name:
Last name:
8/9/2019 Modul OLC - kelas A.pdf
43/98
0
! .
+ 5 !
. $+ 0
. " E
+ . +,-0%-
5 . 5,-0%-
4 .
. " E
. ,-0%-
' . ',-0%-
' . ',-0%-
% 0
;&
J
(p)
coba.html
AO
«ÿ ÿ
O
|
O
File:///
/Desktop/coba.html
ÿ
First
name: Nama
Depan
Last
name:
Nama
Belakang
Submit
Klik
tombol
Submit maka form akan dikirim
ke action.html .
This
example
cannot
be edited because
our
editor uses a textarea for
input,
and your browser
does
not allow a textarea
inside
a textarea.
8/9/2019 Modul OLC - kelas A.pdf
44/98
0
%'
+
. " E
%' ,-0%-
' %' ',-0%-
%' ,-0%- H H
0% %' 0%,-0%-
% 0
;;
ctextarea rows= 2 cols= 20 >
OmahTI Learning Center 2012.
OmahTI
Learning Center 2012.
OmahTI
Learning
Center
2012.
J
Iff
|
coba.html
\
l i>
Iill
i
>1
i. i lil
ml
This
example
cannot be
edited
because our editor
uses
a textarea
for
input,
and
your
browser does
not
allow
a
textarea
inside
a
textarea.
OmahTI
Learning
sr.ter
2
C 1
2
.
JnahTI
cbutton
type= button >Click
Me
8/9/2019 Modul OLC - kelas A.pdf
45/98
0
+
' ' 4 . +
. " E
+ ,-0%-
% + %,-0%-
' + ',-0%-
A + A,-0%-
'
'
4 . 0. " E
' ,-0%-
' ,-0%-
+ ' +,-0%- !
0% ' 0%,-0%-
% 0
;=
slEIjD
A
coba.html
ÿ
ÿ
O
©
Hie:///
/Desktop/coba.html
ÿ
Click Me
Kelas
W eb
A
Kelas
Web B
8/9/2019 Modul OLC - kelas A.pdf
46/98
0
3%
'
+ 0
. " E
3% ,-0%-
4 .
. " E
3% ,-0%-
% 0
;>
Kelas
Database A
Kelas
Databases
B
Aim
coba.html
©
fi
le://yj |/Desktop/coba.html
ÿ
ÿ
Kelas
Web
A
8/9/2019 Modul OLC - kelas A.pdf
47/98
0
12
4 . 0
. " E
( (,-0%- F
% 0
;?
Female
cinput
type= radio name= sex id=
female
/>
c/html>
8/9/2019 Modul OLC - kelas A.pdf
48/98
0
(
12
'
+ 3'
(
3' 4 .
. " E
3' 3' 3',-0%- H H H
% 0
;@
I
S3
Lÿ
ie
coba.html
O
file:///
/Desktop/coba.html
ÿ
ÿ
Click on one of the text labels to
toggle
the related control:
Male
®
Female
O
Personalia
:
Name:
Email:
Date of birth:
8/9/2019 Modul OLC - kelas A.pdf
49/98
0
* #"
' 0
1!2
. ! ' 6.4/ 6."./ .".,/ #5
% 0
0
;A
Mlÿm/
[pj
coba.html
AO
o
O
fil
e:///ÿH
ÿDesktop/coba.html
ÿ
—Personalia:
—
Name:
Email: |
Date of birth:
Can
get
this
NASA?
1
coba.html
AO
ÿ
*
o
©
fil
e://yÿH
/Desktop/coba.html
ÿ ÿ
Ca n
I
get
this NASA?
8/9/2019 Modul OLC - kelas A.pdf
50/98
8/9/2019 Modul OLC - kelas A.pdf
51/98
0
12
3
! !
'3
+ %
%
!
% 0
=
llgll
v
[i j
coba.html
x
©
/Desktop/coba.html
& \
Written by OmahTI
us
Address: Ruang U2.04 Setengah, FMIPA UGMskip Selatan
Phone: +62
88888 88888
8/9/2019 Modul OLC - kelas A.pdf
52/98
0
=9
This
text
is
bold
This text
is
italic
This text
is
big
This text is
smallc/smallxbr />
This text is
teletype
This
text
is strongc/strongxbr
f>
This
text
contains subscript
[This
text contains
supersc
ript
|coba.htmi
O
file:///|
/Desktop/coba.html
ÿ
This text is
bold
This
text
is
italic
This
text is
big
This text
is
small
This text is
teletype
This
text
is
strong
This text
contains
subscript
This text contains
suPerscnP'
8/9/2019 Modul OLC - kelas A.pdf
53/98
-4 '-! 4:
. $+
. " E
,-0%- H
% 0
0
+*/%
+
4 .. " E
+ +*/% +,-0%- 5C
=&
Pelatihan
Web Kelas
A
di
OLCf
ÿ
II
'=>
ll
IsJ
|§s]
coba.html
*\a
ÿ
*
O
O file:///;
|/Desktop/coba.html
ÿ
CLO
id
A
saleK beW nahitaleP
8/9/2019 Modul OLC - kelas A.pdf
54/98
% 0
0
+
+
('
L
=;
Here
comes a long
quotation:
This
is
a
long
quotation.
This
is
a
long
quotation.
This
is
a
long
quotation.
This
is
a long quotation. This
is
a
long
quotation.
Notice that
a
browser inserts white space
before
and after a blockquote
element. It also inserts
margins for the
blockquote
element.
ay-llak
IgJ
coba.html
ÿ
o
O
file:///
/Desktop/coba.html
ÿ
Here
comes
a
long quotation:
This is
a
long
quotation.
This is
a
long
quotation.
This is
a
long quotation.
This is
a
long
quotation.
This is
a
long quotation.
Notice
that
a browser
inserts
white
space
before and after a
blockquote
element. It
also inserts
margins
for the
blockquote
element.
8/9/2019 Modul OLC - kelas A.pdf
55/98
*
1:2
:
% 0
0
'
4 .
==
CitatiorWcitexbr
f>
A piece of
computer
code
Definition
termc/dfnxbr />
Sample
output
from a
computer
program
Keyboard
input
Variable
«W>
II
=
II
M
I
coba.html
©
file:///
/Desktop/coba.html
ÿ
Citation
A
piece
of
computer
code
Definition
term
Sample output
from a
computer program
Keyboard
input
Variable
8/9/2019 Modul OLC - kelas A.pdf
56/98
. " E
+ ' +,-0%- 5C
' ,-0%- MMM''--00Q-
4 .
. " E
+ +,-0%- 5C
,-0%- MMM''--00Q-
% 0
0
=>
ELILÿJLMJ
/—
gT j
coba.html
ÿ
ÿ
O
Q
Hie:///
/Desktop/coba.html
ÿ
My
favorite
color is
red
Notice that
browsers will
strikethrough
deleted
text
and underline inserted
text.
8/9/2019 Modul OLC - kelas A.pdf
57/98
:
4 .
. " E
5 5,-0%-
% 0
0
=?
Text in a
pre
element
is
displayed in
a
fixed-width
font,
and
it preserves
both
spaces
and
line breaks
The
pre
element is often
used to
display
computer code:
for
=
1
to
10
next
m zi
s? ) coba.html
ÿ>0
ÿ
*
o
©
fil
e:///ÿH
/Desktop/coba.html
ÿ
Text
in
a
pre
element
is
displayed in
a fixed-width
font,
and
it
preserves
both
spaces
and
l ine
breaks
The
pre
element is
often
used
to
display
computer
code:
fo r
=
1
to 10
next
8/9/2019 Modul OLC - kelas A.pdf
58/98
/
4 .
. " E
+ / +,-0%- 5C
% 0
0
+ "
+
!' ! +:"! + . $+
=@
<
DOCTYPE
HTML
PUBLIC
-//W3C//DTD
HTML
4.01
Transitional//EN
http://
www.w3.org/TR/html4/loose.dtd >
WWF
1
s
goal is
to :
build a future
where people
live
in
harmony
with
nature.
We hope
they succeed.
Notice
that
the browser
inserts
quotation
marks
around the
quotation.
*
r= m
is j
J
[i
)
coba.html
»\o
ÿ
*
O
O
fil
e:///ÿm ÿÿ/Desktop/coba.html
ÿ
WWF's
goal
is
to: build a future where
people
live
in
harmony
with
nature . We
hope
they
succeed.
Notice
that the
browser inserts
quotation
marks around
the
quotation.
8/9/2019 Modul OLC - kelas A.pdf
59/98
. " E
+ ,-0%- *F
4 .
. " E
+ + +,-0%- !
( + (,-0%-
+ + +,-0%- 5C
'+
!' !
% 0
0
=A
document.write
f
Hello World
)
Sorry
,
your browser
does
not
support
JavaScript
|
c/body>
Hello World
8/9/2019 Modul OLC - kelas A.pdf
60/98
$
+
!
% 0
0
9
% 0
>D
<
DOCTVPE
html>
Internet Explorer
9
HJLÿJLMJ
/
AO
|g-|
coba.html
«ÿ
+
o
O
fil ÿ/Desktop/coba.html
ÿ
Internet
Explorer
9
Windows
Internet
Explorer
9
(abbreviated
as
IE9)
was released
to
the
public
on March
14,
201
1
at
21:00
PDT
<
DOCTYPE
html>
8/9/2019 Modul OLC - kelas A.pdf
61/98
0
& %
/
.
. " E
% % %,-0%-
+' % +',-0%- !
% ,-0%-
% ,-0%- H H
+ % +,-0%- 5C
% 0
>
Epcot
Center
The
Epcot Center
is a theme park
in
Disney
World,
Florida.
.HJLÿJLILI
f
AO
J
coba.html
ÿ
o
©
file:///
H/Desktop/coba.html
ÿ1ÿ
My family
and I
visited The
Epcot
center this
summer.
Epcot
Center
The
Epcot
Center
is a theme
park
in Disney
World,
Florida.
< DOCTVPE
html>
8/9/2019 Modul OLC - kelas A.pdf
62/98
0
;
% 0
0
>9
Your
browser
does
not
support
the audio element.
ÿILsJLMJ,
/
[pj
coba.html
*\o
*
+ÿ
0
O
fi
(e://|ÿH
B/Desktop/coba.html
ÿ
01
:54
4>)
<
DOCTVPE
html>
User
hrefs:
60
points
User
jdoe:
80
points
8/9/2019 Modul OLC - kelas A.pdf
63/98
= +'0
/ !/ ! B:!
.
. " E
3 +'0 3,-0%-
5 +'0 5,-0%-
% 0
0
>&
User
hrefs: 60
points
User
jdoe:
80
points
<
DOCTVPE html>
ccanvas
id= myCanvas >Your browser does not
support
the canvas
tag
.
var
canvas=document.getElementById[
'myCanvas'
)
;
var
ctx=canvas.getContext[ '2d
)
;
ctx.fillStyle='#FF0000'
j
ctx.fillRect[0r0rS0,
100)
;
8/9/2019 Modul OLC - kelas A.pdf
64/98
>
!
.
. " E
' ',-0%-
% 0
0
+ 0
>;
*JLÿJLMJ
r—
J
[pj
coba.html
x
ÿ
ÿ
O
O
file://ÿf
/Desktop/coba.html
ÿ
<
DOCTYPE html>
Copy
right
1999-2011.
-
by Refsnes
Data.
All
Rights
Reserved.
All
content and
graphics
on
this
web site are the
property of
the
company
Refsnes
Data.
ÿ
Copyright
1999-201
1.
8/9/2019 Modul OLC - kelas A.pdf
65/98
?
'
.
. " E
3 3,-0%-
+ +,-0%- 5C
,-0%- *F
5 5,-0%-
% 0
0
>=
[&
coba.html
+
o
O
fil
e:///ÿH
B/Desktop/coba.html
ÿ
ÿ
Copyright
1999-201
1.
-
by
Refsnes
Data. All
Rights
Reserved.
All
content and
graphics
on this
web
site are
the
property
of the
company
Refsnes Data.
<
DOCTYPE html>
cembed src-'katak.swf
11
/>
8/9/2019 Modul OLC - kelas A.pdf
66/98
@ (
% 0
0
>>
SSJLÿJLMJ
Desktop/coba.html
<
DOCTVPE html>
Posted
by:
0LC
cpxtime pubdate datetime= 2012-04-30 x/timex/p>
|
8/9/2019 Modul OLC - kelas A.pdf
67/98
A
%0
0
>?
~1 |
c=> ||
Igl
|
coba.html
\
|/Desktop/coba.html
ÿ
Posted
by:
OLC
<
DOCTYPE html>
Intemet Explorer
9
cpxtime pubdate datetime= 2011-03-15 x/timex/p>
8/9/2019 Modul OLC - kelas A.pdf
68/98
D 3%
% 0
0
>@
Bfciai
.
x \ÿ
|
coba.html
*
+•
o
O
fil
e:///ÿH |/Desktop/coba.html
ÿ
Internet
Explorer
9
Windows Internet
Explorer
9
(abbreviated
as
IE9)
was
released
to the
public
on
March
14,
201
1 at
21:00 PDT
<
DOCTYPE
html>
Welcome
to
my
WWF
Foi a
living
planet
The
rest of the content.
.
Welcome to
my
WWF
For a
living
planet
The
rest
of the content..
8/9/2019 Modul OLC - kelas A.pdf
69/98
*3'
'
.
. " E
%(+% *3' %(+%,-0%- !
+'3 *3' +'3,-0%- !
*3' ,-0%-
( *3' (,-0%- F
* *3' *,-0%- H H !
' *3' ',-0%-
% 0
0
9 0
>A
<
DOCTYPE
html>
Userr.ame:
cinput type= text
r.am.e
=
1'
us
r_nane
/>
Encryption:
ckeygen
nane=
security1'
/>
cir.put
type=
submit
/>
Usemame:
Encryption:
204&
(High
Grad
e)
Submit
8/9/2019 Modul OLC - kelas A.pdf
70/98
:/ :
4 .
. " E
% 0 %,-0%-
+' 0 +',-0%- !
3 0 3,-0%-
0 ,-0%-
% 0 %,-0%-
0 ,-0%- 5C
0 ,-0%- H H
+ 0 +,-0%- 5C
5 0 5,-0%-
% 0
0
?D
<
DOCTYPE
htn l
>
8/9/2019 Modul OLC - kelas A.pdf
71/98
& %+
:
.
. " E
%+ ,-0%- FL
+ %+ +,-0%- 5C
%+ ,-0%- *F
5 ! %+ 0
%
; '0
:
% 0
'0 (,
8/9/2019 Modul OLC - kelas A.pdf
72/98
. " E
( %% (,-0%- F
( %% (,-0%- F
' %% ',-0%-
% 0
0
> 3
/
.
. " E
. 3 .,-0%-
0% 3 0%,-0%-
% 0
?9
<
DOCTYPE
html>
S
cinput
type= range
name= a
value= 50
/>100
+0
/>
=
0
100
+
50
=
104
8/9/2019 Modul OLC - kelas A.pdf
73/98
0
?&
<
DOCTTPE
html>
Downloading progress:
cpxb>Note
:
The
progress
element is
currently
supported
in Firefox,
Opera,
and Chrome
.
Downloading
progress:
Note: The
progress
element is
currently
supported
in
Firefox.
Opera,
and Chrome.
8/9/2019 Modul OLC - kelas A.pdf
74/98
,
$(( $(( -
%"" %""
, %"" / R %"" / / / /
$((
$(( ().
"! " %"" 0
"! 0 , ! %""
-! 0 5 - :, 0 ,
% 0
B
?;
Selector
Declaration Declaration
{color:blue;
font-size:
12px;>
Property
Value
Property
Value
8/9/2019 Modul OLC - kelas A.pdf
75/98
0
0
, $(( $"
5 ! %""/ N3KO NK3O/ 0
- $(( $
" ! %"" %"" + NO N!O
?=
P
{
color
:
red
;
text -align:
center;
}
ÿbody>
Hello
World
This paragraph
is
styled
with
CSS.
Hello
World
This
paragraph
is
sty
led
with
CSS.
/*This
is a
comment*/
{
text-align:center;
/*This
is
another
comment*/
color
:black;
font-family
:
a rial ;
}
8/9/2019 Modul OLC - kelas A.pdf
76/98
("
%""
%"" -
/ + %"" NJO
N O %""
0
$ ("
!
/ ! !
!
, ! / %"" NO /
! ! N!O %"" 0
. + !
%"" ! 0
./ !SO!O /
+ ! / + !
N! O
?>
#paragraf
1{
text-align:
center;
color
:
red
;
}
.center{
text-align:center;
color
:
red ;
}|
p
.center{
text-align:center;
color:
red;
}
8/9/2019 Modul OLC - kelas A.pdf
77/98
/ 0 $ & )0& $((
. & ! %"" 0
* " "
" "
"
. () (
. %"" % + - " " *
+
5 0
! 0
() (
% %""
??
hi
{
color:
sienna;
>
P
{
margin-left:20px;
}
body
{
background-image:11 rl( inrages/back40.gif
)
;
}
8/9/2019 Modul OLC - kelas A.pdf
78/98
8/9/2019 Modul OLC - kelas A.pdf
79/98
+*3%'3 5C
+*3%' H ' H ' H ' H
+*3%'' H ! H H H ! H H ! H !! H !
I I
+*3%'+' ! H H
% 0
0
?A
body{
background-color:#b0c4de;
bac
kg
round-
image
:url(
'omahti.jpg
)
;
background-
repeat:no-repeat;
background-position:top right;
}
8/9/2019 Modul OLC - kelas A.pdf
80/98
, () .
%""
' 0
, E )
+ % H H
+' H H !
+'3 H H
'3 H H H I H
.3' H H ! H + H
++(
.+' H H : H ' H H
.'' H I H
.'( H !( H ! H! H
0+3' H I H H H H H ' H H H
' H
:
5+ H H H ' H ' H
'
5+'3 6 H H '
@D
My
CSS web
page
Hello
world
f
This is
OLC
example,
Onuw
Tl
8/9/2019 Modul OLC - kelas A.pdf
81/98
% 0
0
- () .
-
@
body
{
color: red;
hi
{
color:#00ff0G;
text-indent:0.2in;
}
p.
ex
{
color: rgb
f
0 ,0 ,
255)
;
text-align:
center;
}
This
is heading
l
This
is an
ordinary
paragraph.
Notice that this text is
red.
The default
text-color
for a page is defined
in
the body
selector
.
This
is a paragraph with class= ex . This text is
blue.
This is
heading
1
This is
an
ordinary
paragraph.
Notice that this text is red. The default
textÿolor
for a
page
is defined
in
the
body
selector.
This
is
a
paragraph
with
class= ex .
This text
is
blue.
8/9/2019 Modul OLC - kelas A.pdf
82/98
0
, E )
(' ' H '( H '
H ': H '
('( ' H !' H
('A ' H ' H H H H ' H ' H H H HI H
(' H ! H L H
('0' H '! H '!
('53 H H H HDD T ADD H
% 0
@9
cstyle
type= text/css >
p.serif{
font-family
:
Times
New
Roman
,
Times
r
serif
;
font-style:normal;
font-size
:40px;
}
p.sansserif{
font
-
family :Arial,Helvetica,sans-serif;
font-style:bold;
font-size:80px;
}
CSS
font-family
This is
a
paragraph, shown
in
the Arial
font.
8/9/2019 Modul OLC - kelas A.pdf
83/98
0
/ () &
" " 0
, E )
4'* ! H '! H !'!
40 ! H '! H !'!
40 ! H '! H !'!
4+0 ! H '! H !'!
% 0
"
@&
CSS
font-family
This is a
paragraph,
shown
in
the Times
New
Roman font.
This is
a
paragraph, shown
in
the Arial font.
8/9/2019 Modul OLC - kelas A.pdf
84/98
0
% "
! 0
0
@;
a:link
{color:#FF0000;}
/*
unvisited link
*/
a:visited
{color:#00FF00;}
/*
visited
link
*/
a:hover
{color:#FF00FF;}
/*
mouse over
link.
*/
a:active
{color:#0000FF;}
/*
selected
link
*/
cpxbxa href= default.asp
target= _blank >This
is a
l ink
Note
:
a:hover
MUST
come
after
a:link and a:visited
in
the
CSS
definition
in order
to
be
effective
.
Note
:
a:active MUST
come after
a:hover in
the
CSS
definition
in
order
to be
effective
.
|
This
is
a
link
Note: a:hover MUST come after
a:link
and a :
visited
in
the
CSS
definition
in order
to
be
effective.
Note:
a:active MUST
come after
a:hover
in the CSS definition in
order
to be
effective.
a : link
l[
text -decorat
ion:
none;
)
f l ivisited
{text
-dec oration:
none;
)
aihover
(
text-decoration
:
underline
;
)
a
:
active
(
text-decoration
:underline;
)
8/9/2019 Modul OLC - kelas A.pdf
85/98
()
" "
0
, E )
'' H '' H ''
!
3 5C H H
'
H H + ' !
H !! H !+'! H ! H !''( H ! H H H H ' H H H' H ' H' H ' H ' H H L H ' H ' H '
+ '
% 0
@=
This
is
i)
link
Note:
aihover MUST
come
after
a:link
and
a:visited in
the CSS
definition
in order
to
be
effective.
Note:a:active
MUST
come
after
a:hover
in
the
CSS definition
in
order to be effective.
8/9/2019 Modul OLC - kelas A.pdf
86/98
0
1 ()
"
@>
ul
{
list
-style -type:
none
j
padding
:0px;
margin:0px;
}
li
{
bac kg
round- image
:
u
rl
(sqpurple
.
gif
)
;
bac kground-
repeat :
no-
repeat
;
background-position:0px
5px;
padding-left:
14px;
>
Coffeec/li>
Tea
Coca
Cola
ÿ
Coffee
ÿ
Tea
ÿ
Coca
Cola
8/9/2019 Modul OLC - kelas A.pdf
87/98
$"0 "
2
.
@?
Example
table,
thr
td
(
border:
Ipx
3olid
black;
}
Example
table
(
border-collapse
:
collapse;
J
table,
thr
td
(
border:
Ip x
solid
black;
t
Example
table
(
width
:
100%;
J
th
(
height :
50px;
1
Example
td
(
text-align :right
;
1
8/9/2019 Modul OLC - kelas A.pdf
88/98
$""
% $(( ". "
$(( ". "
" - %""/ N'O
! %"" / 0 / / /
B 0
@@
Example
td
(
height
:
5Qpx
;
vertical-al ign
:bottom;
1
Example
td
(
padding
:
I5px;
1
Example
table,
td , th
(
border :
lpx
solid
green;
J
th
(
background-color
:
greer.;
color
:white;
8/9/2019 Modul OLC - kelas A.pdf
89/98
/ '
" "
! ,
$" / !
% 0
@A
Margin
Border
Padding
ÿ
Content
i
i
i
i
i
i
i
i
i
i
i
i
i
i
i
i
< DOCTVPE
html PUBLIC
-//W3C//DTD
XHTML
1.0
Transitional//EN
http://
www.w3.org/TR/xhtmll/DTD/xhtmll-trarsitional.dtd >
div.ex
{
width
:220px;
padding:
10px;
border:5px
solid
gray;
margin:0px;
}
8/9/2019 Modul OLC - kelas A.pdf
90/98
8/9/2019 Modul OLC - kelas A.pdf
91/98
H : H H H H
%'5 H H H ! H
/ $((
, E )
3' H H I H
3'
3'
3'3
3'(
$((
, E )
'3 H I ,
'3 .
'3
'33
'3(
$(( 4!
%" "0
, E )
3 H H I H
.3 H H I H
.5 H H I H
'3 H I H
'5 H I H
A
8/9/2019 Modul OLC - kelas A.pdf
92/98
5 H H I H
, " "0 5$(( -, E )
'' .
''' G H
''%'
'''3(%'+'
H H ' H ' H'' H !!'
(///
!
''
'''+%'
H
''+' 6 H !
'' , H + +
% 0
!"# 1#;
8/9/2019 Modul OLC - kelas A.pdf
93/98
8/9/2019 Modul OLC - kelas A.pdf
94/98
$""
!"# 1#;
8/9/2019 Modul OLC - kelas A.pdf
95/98
/ $"" "0
, E %""
+( &
+ E H &
''3'' &
% 0
!"# 1#;
8/9/2019 Modul OLC - kelas A.pdf
96/98
8/9/2019 Modul OLC - kelas A.pdf
97/98
" ,3"! ,, ,, . !
,, ! ,, 0
1U V U2
9 1! SO,,O2 V 13!2
& 1U V U2
; 1I V I2
$"
5 ! ,, N33O +
N3KO NK3O
% 6
, : ,, NWO
N!O
% ,, 0
0
% , , :
A?
+
+
O
Hello World
©
locaLhost/a/
8/9/2019 Modul OLC - kelas A.pdf
98/98
ST+,-; #''3 '-I
+ T+I
S
0
+
+
o
©
tacalhost/a/
Omahn
Learning
Center