ICT Workshop

ICT Workshop
HTML & CSS

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

Use HTML to describe the content.
Use CSS to format the content.
CSS contain style information as a set of
rules.
A CSS rule set consists of a selector and
a declaration:
selector {
property1: value 1;
property2: value 2;
}
05 June 2004 Co. No. 497194-M
CSS rule
Create an External CSS

Open Notepad/Notepad++ to create a
blank external CSS.
Save the file as style.css.
05 June 2004 Co. No. 497194-M
CSS Example Background Color

Open Index.html using
Notepad/Notepad++.
Change the background color in style.css:
body {
background-color: blue;
}
05 June 2004 Co. No. 497194-M
Link the External CSS

To apply the CSS, link the external CSS
inside the <head> tag in Index.html:
<head>
<title>Welcome to Perth</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
Note: Save the file and refresh your

Index.html page to see the changes.
05 June 2004 Co. No. 497194-M
CSS Example Background Image

Add background image and fixed the
background with no repetition in
style.css:
body {
background-image: url("background.jpg");
background-attachment: fixed;
}
05 June 2004 Co. No. 497194-M
<DIV> tag
The <div> tag defines a division or a
section in an HTML document.
The <div> tag is used to group blockelements to format them with CSS.
05 June 2004 Co. No. 497194-M
<DIV ID> tag vs <DIV Class> tag

<DIV ID>
Each element can have only one ID.
Each page can have only one element
with that ID.
05 June 2004 Co. No. 497194-M
<DIV ID> tag vs <DIV Class> tag

<DIV Class>
You can use the same class on multiple
elements.
You can use multiple classes on the
same elements.
05 June 2004 Co. No. 497194-M
Modify Index Page

Center the banner
Add the banner in a <div> tag with
banner id in Index.html:
<div id="banner">
<img src="Perth_Banner.jpg">
</div>
Center the banner in style.css:

#banner{
text-align: center;
}
05 June 2004 Co. No. 497194-M
Modify Index Page (cont.)

Center the menu
Group the menu in a <div> tag with
menu id in Index.html:
<div id="menu">
<img src ="Home.png" hspace="10">
..
</div>
Center the menu in style.css:

#menu{
text-align: center;
}
05 June 2004 Co. No. 497194-M

Format the heading
In style.css:
h1 {
font-family: "Curlz MT";
font-size: 40pt;
text-align:center;
color: blue;
text-transform: uppercase;
letter-spacing: 3px;
word-spacing: 5px;
}
Note: If the font family is more than one

word, it must be in "quotation marks".
05 June 2004 Co. No. 497194-M

Property
Description
font-family
Font style
Eg: Arial, Times new
roman
font-size
The size of the font
Eg: 12px
text-align
Text alignment
Eg: Center, left, right,
etc.
color
Text color
Note: px (pixel) is a dot on the computer
Eg: Red, blue, etc.
screen and the most common way of
specifying font sizes in CSS (1px = 0.75pt).
05 June 2004 Co. No. 497194-M

Property
text-transformation
letter-spacing
word-spacing
05 June 2004 Co. No. 497194-M
Description
Text change
Eg: uppercase,
lowercase, capitalize
Spacing between each
letter
Eg: 2px, 5px
Spacing between each
word
Eg: 2px, 5px

Format the paragraphs
Add index class to each <p> tag in
Index.html:
<p class="index">Perth, capital of

Western Australia, sits where the Swan
River meets the southwest coast...<p>
<p class="index">The Perth Cultural
Centre houses the state ballet and
opera companies...</p>
05 June 2004 Co. No. 497194-M

Format the paragraphs (cont.)
In style.css:
p.index{
font-family: calibri;
font-size: 16pt;
width: 70%;
margin-left: auto;
margin-right: auto;
}
Note: margin-left:auto; and marginright:auto; are to center an element.

05 June 2004 Co. No. 497194-M

Create a photo gallery
Add photos and group the photos in a
<div> tag with photos id in
Index.html:
<div id="photos">
<img src="Perth1.jpg">
</div>
05 June 2004 Co. No. 497194-M

Create a photo gallery (cont.)
Resize the photos in style.css:
#photos img{
width: 400px;
}
Center the photos in style.css:

#photos{
text-align: center;
}
05 June 2004 Co. No. 497194-M
Modify Attractions Page

Format the following elements as the
Index page:
Format the page background
Center the banner
Center the menu
Format the heading
05 June 2004 Co. No. 497194-M
Modify Attractions Page (cont.)

Format the paragraphs
Add attractions class to each <p> tag
in attractions.html:
<p class="attractions">Discover
Perth's city precincts, clean
uncrowded beaches, parklands and
the Swan River.</p>
<p class="attractions">Eat fresh
seafood and enjoy the relaxed
lifestyle.</p>
05 June 2004 Co. No. 497194-M

Format the paragraphs (cont.)
In style.css:
p.attractions{
font-family: calibri;
font-size: 16pt;
text-align: center;
}
05 June 2004 Co. No. 497194-M

Center the YouTube video
Add the video in a <div> tag with
video id in attractions.html:
<div id="video">
<iframe width="560" height="315"
...></iframe>
</div>
Center the video in style.css:

#video{
text-align: center;
}
05 June 2004 Co. No. 497194-M
Modify Accommodation Page

Format sections (total 3 sections)
Group each section in a <div> tag with
section class in Accommodation.html:
<div class="section">
<a href="http://www.waholidayguide.com.au"><
src="WAHoliday.png"> </a>
...
</div>
<div class="section">
<a href="http://www.trivago.com.au"><img
src="trivago_logo.jpg"> </a>
...
</div>
05 June 2004 Co. No. 497194-M
img
Modify Accommodation Page (cont.)

Format sections (cont.)
Add border to each section in style.css:
.section{
border-style: dotted;
border-width: thick;
border-color: blue;
}
05 June 2004 Co. No. 497194-M

Format the text for each section in
style.css:
.section{
border-color: blue;
font-size: 14pt;
}
05 June 2004 Co. No. 497194-M

Add spacing at the bottom of each
section in style.css:
.section{
border-color: blue;
font-size: 14pt;
margin-bottom: 25px;
}
05 June 2004 Co. No. 497194-M

Format sections(cont.)
Add spacing around the content of each
section in style.css:
.section{
border-color: blue;
font-size: 14pt;
margin-bottom: 25px;
padding: 20px;
}
05 June 2004 Co. No. 497194-M

Style the hyperlinks within the sections
only:
.section p a:link{
color: blue;
}
.section p a:visited{
color: purple;
}
05 June 2004 Co. No. 497194-M

Style the hyperlinks within the sections
only.section
(cont.): p a:hover{
color: white;
}
.section p a:active{
color: white;
}
05 June 2004 Co. No. 497194-M
Thank you for your participation!
Web Development Competition Online Registration

Form https://
docs.google.com/forms/d/19xTwIX3omB4Sk64ujbJl6M
eZCqrU7llIyrS8KY63JgE/viewform?usp=send_form
Deadline: 15th July 2016 (Friday)
Submit to
swinburne.webdevelopment@gmail.com
Feedback Online Form

https://docs.google.com/forms/d/1OSOGetctG3DlCn
-2vEWB7vD2Y0Ka4zq4Ir0T3V1tPV0/edit?usp=sharing
05 June 2004 Co. No. 497194-M

ICT Workshop - HTML & CSS: DULN004 (Q) KP (JPS) 5195/IPTS/1144 05 June 2004 Co. No. 497194-M

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ICT Workshop - HTML & CSS: DULN004 (Q) KP (JPS) 5195/IPTS/1144 05 June 2004 Co. No. 497194-M

Uploaded by

Copyright:

Available Formats

HTML & CSS

05 June 2004 Co. No. 497194-M

Web Development Structure

05 June 2004 Co. No. 497194-M

Create an External CSS

05 June 2004 Co. No. 497194-M

CSS Example Background Color

05 June 2004 Co. No. 497194-M

Link the External CSS

Note: Save the file and refresh your

05 June 2004 Co. No. 497194-M

CSS Example Background Image

05 June 2004 Co. No. 497194-M

05 June 2004 Co. No. 497194-M

<DIV ID> tag vs <DIV Class> tag

05 June 2004 Co. No. 497194-M

<DIV ID> tag vs <DIV Class> tag

05 June 2004 Co. No. 497194-M

Modify Index Page

Center the banner in style.css:

05 June 2004 Co. No. 497194-M

Modify Index Page (cont.)

Center the menu in style.css:

05 June 2004 Co. No. 497194-M

Modify Index Page (cont.)

Note: If the font family is more than one

05 June 2004 Co. No. 497194-M

Modify Index Page (cont.)

05 June 2004 Co. No. 497194-M

Modify Index Page (cont.)

05 June 2004 Co. No. 497194-M

Modify Index Page (cont.)

<p class="index">Perth, capital of

05 June 2004 Co. No. 497194-M

Modify Index Page (cont.)

Note: margin-left:auto; and marginright:auto; are to center an element.

05 June 2004 Co. No. 497194-M

Modify Index Page (cont.)

05 June 2004 Co. No. 497194-M

Modify Index Page (cont.)

Center the photos in style.css:

05 June 2004 Co. No. 497194-M

Modify Attractions Page

05 June 2004 Co. No. 497194-M

Modify Attractions Page (cont.)

05 June 2004 Co. No. 497194-M

Modify Attractions Page (cont.)

05 June 2004 Co. No. 497194-M

Modify Attractions Page (cont.)

Center the video in style.css:

05 June 2004 Co. No. 497194-M

Modify Accommodation Page

05 June 2004 Co. No. 497194-M

Modify Accommodation Page (cont.)

05 June 2004 Co. No. 497194-M

Modify Accommodation Page (cont.)

05 June 2004 Co. No. 497194-M

Modify Accommodation Page (cont.)

05 June 2004 Co. No. 497194-M

Modify Accommodation Page (cont.)

05 June 2004 Co. No. 497194-M

Modify Accommodation Page (cont.)