ICTWorkshop_Day2

8/16/2019 ICTWorkshop_Day2

1/30

DULN004(Q) KP(JPS)5195/IPTS/1144 05 June 2004 Co. No. 497194-M

ICT Workshop –

HTML & CSS(Day2)


2/30


selector {

property1: value 1; property2: value 2;

}

Web Development Structure

• Use HTML to describe the content.• Use CSS to format the content.

– CSS con!"n #$%e "n&o'!"on !# ! #e o&

'u%e#. – CSS 'u%e #e con#"## o& ! #e%eco' !n*

! *ec%!'!"on+

CSS 'u%e


3/30


Create an External CSS

• pen !otepad"!otepad## to create ablan$ external CSS.

• Save the %le as style.css.


4/30


CSS Example & 'ac$(round Color

• pen )ndex.html usin(!otepad"!otepad##.

• Chan(e the bac$(round color in st*le.css+

body {

background-color: blue;

}


5/30


Lin$ the External CSS

• To appl* the CSS, lin$ the external CSSinside the -head ta( in )ndex.html+

• Note: Save the %le and refresh *our)ndex.html pa(e to see the chan(es.

Welcome to Perth


6/30


CSS Example & 'ac$(round )ma(e

•/dd bac$(round ima(e and %xed thebac$(round 0ith no repetition inst*le.css+

body {

background-i!age: url"background.#pg"$; background-attach!ent: fixed;

}


7/30


-D)1 ta(

• The -div ta( de%nes a division or asection in an HTML document.

• The -div ta( is used to (roup bloc$2elements to format them 0ith CSS.


8/30


-D)1 )D ta( vs -D)1 Class ta(•

-D)1 )D – ,!c e%een c!n !e on%$ one ID.

– ,!c !e c!n !e on%$ one e%een

" ! ID.


9/30


-D)1 )D ta( vs -D)1 Class ta(•

-D)1 Class – ou c!n u#e e #!e c%!## on u%"%e

e%een#.

–

ou c!n u#e u%"%e c%!##e# on e#!e e%een#.


10/30


Modif* )ndex 3a(e

• Center the banner – ** e 3!nne' "n ! *" ! "

63!nne' "* "n In*e8.%+

– Cene' e 3!nne' "n #$%e.c##+


11/30


Modif* )ndex 3a(e 4cont.5

• Center the menu – 'ou e enu "n ! *" ! "

6enu "* "n In*e8.%+

– Cene' e enu "n #$%e.c##+


12/30



• 6ormat the headin( – In #$%e.c##+

• Note: I& e &on &!"%$ "# o'e !n one

o'*: " u# 3e "n ";uo!"on !'


13/30



Property Descriptionfont-fa!ily =on #$%e

,+ '"!%: T"e# ne'o!n

font-si)e Te #">e o& e &on,+ 128

text-align Te8 !%"nen,+ Cene': %e&: '":

ec.color Te8 co%o'

,+ ?e*: 3%ue: ec.• Note: 8 ("8e%) "# ! *o on e coue'

#c'een !n* e o# coon !$ o&#ec"&$"n &on #">e# "n CSS (18 @ 0.75).


14/30



Property Descriptiontext-transfor!ation Te8 c!ne

,+ ue'c!#e:%oe'c!#e: c!"!%">e

letter-spacing S!c"n 3eeen e!c%ee',+ 28: 58

ord-spacing S!c"n 3eeen e!c

o'*,+ 28: 58


15/30



• 6ormat the para(raphs – ** 6"n*e8 c%!## o e!c ! "n

In*e8.%+


16/30



• 6ormat the para(raphs 4cont.5 – In #$%e.c##+

• Note: margi0le(t:auto; !n* margi0

right:auto; !'e o cene' !n e%een.

p.index{

font-fa!ily: calibri;font-si)e: '1pt;

idth: 23;

!argin-left: auto;

!argin-right: auto;

}


17/30



• Create a photo (aller* – ** oo# !n* 'ou e oo# "n !

*" ! " 6oo# "* "n

In*e8.%+


18/30



• Create a photo (aller* 4cont.5 – ?e#">e e oo# "n #$%e.c##+

– Cene' e oo# "n #$%e.c##+

&photos i!g{

idth: ,px;}

&photos{

text-align: center;

}


19/30


Modif* /ttractions 3a(e

• 6ormat the follo0in( elements as the)ndex pa(e+ – =o'! e !e 3!c


20/30


Modif* /ttractions 3a(e 4cont.5

• 6ormat the para(raphs – ** 6!'!c"on# c%!## o e!c !

"n !'!c"on#.%+


21/30


Modif* /ttractions 3a(e 4cont.5

• 6ormat the para(raphs 4cont.5 – In #$%e.c##+

p.attractions{

font-fa!ily: calibri;font-si)e: '1pt;

text-align: center;

}


22/30


23/30


Modif* /ccommodation 3a(e

• 6ormat sections 4total 8 sections5 – 'ou e!c #ec"on "n ! *" ! "

6#ec"on c%!## "n ccoo*!"on.%+

###


24/30


Modif* /ccommodation 3a(e 4cont.5

• 6ormat sections 4cont.5 – ** 3o'*e' o e!c #ec"on "n #$%e.c##+

.section{

border-style: dotted; border-idth: thick;

border-color: blue;

}


25/30



• 6ormat sections 4cont.5 – =o'! e e8 &o' e!c #ec"on "n

#$%e.c##+#sectio{

order0style: dotted;order0*idth: thic4;

order0color: lue;font-si)e: ',pt;

}


26/30



• 6ormat sections 4cont.5 – ** #!c"n ! e 3oo o& e!c

#ec"on "n #$%e.c##+

#sectio{

order0style: dotted;

order0*idth: thic4;

order0color: lue;

(ot0si9e: 1pt; !argin-botto!: 40px;

}


27/30



• 6ormat sections4cont.5 – ** #!c"n !'oun* e conen o& e!c

#ec"on "n #$%e.c##+

#sectio{

order0style: dotted;

order0*idth: thic4;

order0color: lue;

(ot0si9e: 1pt;margi0ottom: 27p6; padding: 4px;

}


28/30



• 6ormat sections 4cont.5 – S$%e e $e'%"n


29/30



• 6ormat sections 4cont.5 – S$%e e $e'%"n


30/30


Than$ *ou for *our participation9

• Web Development Competition & nline :e(istration6orm https+""

docs.(oo(le.com"forms"d";

Documents

ICTWorkshop_Day2