modul olc - kelas a.pdf

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


2/98

! "# ! $ $ $ % $&%

' " ( ) ! * + ,-.

/ .# " ! + + 0 / !0 12., *.132 12 ! / / 132 !

+ /

*/ ( )/ 4/ "/ % 5 / ! 0

6 77 8 . , 8 6 77

. ! 0

9


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


4/98

,+ " 0

-

9

+

% 0

;

I

S3

lis)

J

|g

i

coba

>

I

©

file:///)

/Desktop/coba

ÿ

A,


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


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


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

% 0

!"#$ !"#$

!"#$ !"#$

0

!

% 0

@

ILsJULJ

coba.html

O

O

file:///

Belajar

HTML.

Belajar

HTML.

Belajar

HTML.

Belajar

HTML.

/Desktop/coba.html


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

.

--


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


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


12/98

. " . E

'' +'',-.-

/%0 /%0,-0%- !!'!

!'!'

'

!

'!

'

' ',-0%- !

!!

!

!

!'!

!'

!'

-4

'

-

+ +,-( 12#- )35C

9


13/98

% 0

0

. E

( 5C

3 F

F

F

F

% 0

&


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 .


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,


16/98

1

' " . 0

. E

+ !

'3 F!

F

. $+ 0

. " E

' ',-0%-

% 0

"/ & / ! :

>

Desktop/coba.html

tlH


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

/>


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

@


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


20/98

!

0 0,-0%-

!

!

!

!

!

!

,-0%-

!

!!

3 3,-0%- F

F

F

F

9D


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


22/98

'* ,-0%-

!

!

!

!

!

0 '* 0,-0%-

!

!

!

!

!

99


23/98


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


25/98

9

&

!

0

9=

Frame

B

Frame

C

cframe src= f

rame2

.

html

f>


26/98


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.


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

ÿ


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


30/98

+

% 0

0

'

" / /

4 . 0

. " E

3' 3',-0%- H H !

&D

Coffee

-

black hot

drinkc/dd>


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

&


32/98


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


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,

-


35/98


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


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


38/98

()

- " %"" N3!O %"" .$+

. " E

,-0%- 3!

5 4 .

. " E

,-0%- !

:

+!

% P

&@

hi

{color:

red;}

p

{color:

blue;

}

Header

l

A

paragraph.


39/98


40/98


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

;


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:


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.


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


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


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


47/98

0

12

4 . 0

. " E

( (,-0%- F

% 0

;?

Female

cinput

type= radio name= sex id=

female

/>

c/html>


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:


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?


50/98


51/98

0

12

3

! !

'3

+ %

%

!

% 0

=

llgll

v

[i j

coba.html

x

©

/Desktop/coba.html

& \

Written by OmahTI

Email

us

Address: Ruang U2.04 Setengah, FMIPA UGMskip Selatan

Phone: +62

88888 88888


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'


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


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.


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


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.


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

print

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

print

next


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.


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


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>


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>


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


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)

;


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.


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

/>


66/98

@ (

% 0

0

>>

SSJLÿJLMJ

Desktop/coba.html

<

DOCTVPE html>

Posted

by:

0LC

cpxtime pubdate datetime= 2012-04-30 x/timex/p>

|


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>


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


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


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

>


71/98

& %+

:

.

. " E

%+ ,-0%- FL

+ %+ +,-0%- 5C

%+ ,-0%- *F

5 ! %+ 0

%

; '0

:

% 0

'0 (,


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


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.


74/98

,

$(( $(( -

%"" %""

, %"" / R %"" / / / /

$((

$(( ().

"! " %"" 0

"! 0 , ! %""

-! 0 5 - :, 0 ,

% 0

B

?;

Selector

Declaration Declaration

{color:blue;

font-size:

12px;>

Property

Value

Property

Value


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 ;

}


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;

}


77/98

/ 0 $ & )0& $((

. & ! %"" 0

* " "

" "

"

. () (

. %"" % + - " " *

+

5 0

! 0

() (

% %""

??

hi

{

color:

sienna;

>

P

{

margin-left:20px;

}

body

{

background-image:11 rl( inrages/back40.gif

)

;

}


78/98


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;

}


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


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.


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.


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.


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;

)


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.


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


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


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;


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;

}


90/98


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


92/98

5 H H I H

, " "0 5$(( -, E )

'' .

''' G H

''%'

'''3(%'+'

H H ' H ' H'' H !!'

(///

!

''

'''+%'

H

''+' 6 H !

'' , H + +

% 0

!"# 1#;


93/98


94/98

$""

!"# 1#;


95/98

/ $"" "0

, E %""

+( &

+ E H &

''3'' &

% 0

!"# 1#;


96/98


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/

modul olc - kelas a.pdf

Documents