Chapter 21

 Identify and describe the

three web development
layers.

 Explain the purpose of the

head and body sections of a
web page.

 Place appropriate elements in

the head section of a web
page.

 Place appropriate elements in

the body section of a web
page.
What is a website?
 A website is a collection of individual but
related web pages that are often stored
together and hosted by a web server.
 Web pages can include different objects such
as text, sound, video and still images.
 A web page is created
using three layers:
1. Content layer
(sometimes
called the
structure layer)
using HTML
2. Presentation
layer using CSS
3. Behavior layer
using scripting
language
 A web page is
created using three
layers:
1. Content layer
(HTML)
2. Presentation
layer (CSS)
3. Behavior layer
(Javascript)
 HyperText Markup Language.
 It is a text-based language used to develop
the content layer of websites.
 Use a simple text editor or web-authoring
package to write HTML.
 Saved in .html or .htm
 Recognized by
web browsers.
 Cascading stylesheet
 Text based language embedded or separated.
 .css file extention

Why CSS??
 Makes all the pages
have a similar appearance.
 HTML uses tags.
 A tag looks like

 Angle brackets tell the browser that this is a

markup language not a text to be placed in
the page.
 Tags usually have an ending tag.
Important notes:
When typing a tag use:
1. Lowercase only
(no capital letters)

2. American spelling
(not UK spelling)

e l l i n g
color
center
colour
centre
S p
 All HTML web pages start
with it
 Declaration
 Instruction to the browser
to tell it that the page is
written in HTML rather
than another markup
 It is not an html tag, that’s
why it is capital.
 First tag that usually appear
in any web page
 Tells the browser that the
markup following this tag
will be HTML.

 End tag
 Tells the browser that this is
the end of the markup.

 All the tags must appear

between the HTML start and
ending tags.
 Each Webpage will have two clearly defined
sections:
 Head
Objects between these tags
are not usually displayed by
the browser

 Body
Objects between these tags
will be displayed in the web
page.
Head:
Only few tags are universally accepted within the
head section of a web page:

Default URL default target

External CSS
Describe information about html
Title of the page (must be used)
Embedded style
For jave script
Title:
 The name displayed in the toolbar
 Page title if the page is added to your favourite
in the browser
 Title displayed in search engine result.
 Body tag will contain all
the other tags
 Make sure to save the web page with the
extension .htm or .html
 Comments are notes you wish to make but
not display on the Web page.

 Note: useful to add your name, center number

and candidate numbers

 Can be placed before or after any tag.

 All text added to a web page should have a
tag telling the browser what the text style
should look like.
 Paragraph tag

 Heading tags Biggest

Smallest
Text Enhancement:

 Bold

 Italic

 Underline

 Superscript

 Subscript
 Opening an existing web page:
For editing a page:
Right click then open with notepad

For viewing the page:

Double click will open the page using the
default browser
 Opening an existing web page:
 HTML tags:
Copy from the notepad and paste in word
(Evidence)

 Browser view:
Print screen the browser window and paste it in
the evidence.
 Create a personal webpage that contain
information about you for as part of your
University Application requirements
 Use different Preset
Styles and Text
Enhancements.

 Try to add your

picture.
 How can I create a page that is organized and
eye catching?

Next lesson:
Table in the content layer