WEBSITE AUTHORING:
What is a WEBSITE?
⦿ A website is a collection of related
web pages/web files which are often
stored together and hosted by a web
server.
⦿These web pages are connected
through hyperlinks and can contain
text, images, videos, and other
multimedia elements.
1
a) What is a website?
⦿ A web page can contain different objects,
usually in tables, such as:
i) Text
ii) Sound
iii) Videos (i.e. moving images)
iv) Pictures or photos (i.e. still Images)
⦿A web page is created in three (3) layers
namely:
i) The content/structure layer (i.e. the Body and
layout
of the web page).
ii) The presentation layer (i.e. the appearance).
iii) The behavior layer - (the languages used).
2
PARTS OF A WEBSITE
⦿ A web page is created using three layers:
These are:
i) the content layer
ii) the presentation layer
iii) the behaviour layer.
1) The content layer
This layer is where the content of the web
page, such as text and images, are
placed.
3
PARTS OF A WEBSITE
2) The presentation layer
This layer is where the visual impact of
the web page is created and contains
the styles to be used, such as colour
themes, fonts, etc.
You will develop the
presentation layer of your web pages
using CSS.
4
PARTS OF A WEBSITE
3) The behaviour layer
This layer is where all actions, such as
controlling elements (except hyperlinks),
on a web page are created.
- Created using scripting languages
like JavaScript,
5
b) Website development languages:
⦿ The Content layer (Body) of the web pages is
developed in a language called Hyper Text Markup
Language (HTML) and the Presentation layer is
developed in Cascading Style Sheet (CSS).
⦿ HTML is a text-based language, that is, it uses
text/words.
⦿ A Web page can be created using a simple text
editor such as Notepad or a special software like
the Microsoft Expression Web 4, Microsoft
FrontPage, etc.
⦿ Web pages/files are usually saved with a .htm or
.html file extension, so that they can be
recognized as web pages by web browsers.
6
c) HTML tags:
⦿ The html language uses html tags which are shown in
angle brackets, for example:
Main tags:- <html> </html>
Head tags:- <head> </head>
Title tags:- <title> </title>
Body tags:- <body> </body>, etc.
⦿ <html>, <head>, <title> and <body>, are opening tags
while </html>, </head>, </title> and </body>, are
closing tags.
⦿ The angle brackets (< >) tell the web browser that the
language used to write the web page is a markup
language.
⦿ The forward slash (/) shows that the tag is a closing
tag.
⦿ The web browser does not display/show the angle
brackets when viewing the page on the internet, but it
uses them to display the contents of the web page.
7
Arrangement of the html tags in the source code:
⦿ The <!DOCTYPE html> is not an html tag, it is simply a
declaration which tells the web browser that the web
page is written in html.
⦿ All web pages that are created in html should always
start with the DOCTYPE in order for them to be easily
recognized and read by all web browsers.
8
Other common html tags:
Tags: Meaning: Format:
<p> </p> Default/normal Paragraph style <p>Text</p>
<h1> </h1> Heading style 1 (largest heading <h1>Text</h1>
style)
<h2> </h2> Heading style 2 (sub heading <h2>Text</h2>
style)
<h3> </h3> Heading style 3 (small <h3>Text</h3>
subheading style)
<h4> </h4> Heading Style 4 <h4>Text</h4>
<h5> </h5> Heading style 5 <h5>Text</h5>
<h6> </h6> Heading style 6 (smallest <h6>Text</h6>
heading style)
9
Tags Meaning & Example Format
<li> </li> List style (bulleted list) <li>Text</li>
<ul> </ul> Unordered list (bulleted list) <ul>Text</ul>
<ol> </ol> Ordered list (Numbered list) <ol>Text</ol>
<b> </b> Bold text e.g., Text <b>Text</b>
<u> </u> Underline text, e.g., Text <u>Text</u>
<i> </i> Italicize text, e.g., Text <i>Text</i>
<br> Line break (move to next line) Text<br>
<sup> </sup> Superscript, e.g., x2 <sup>2</sup>
<sub> </sub> Subscript, e.g., H2 <sub>2</sub>
1
e) Lesson Recap:
1. What is a Website?
2. State the four (4) possible contents of a web page.
3. A web page is developed using three (3) layers.
Name these layers.
4. Which language between html and css is used in the
content layer of web page development?
5. What do the angle brackets do on an html tag?
6. The <!DOCTYPE html> is not an html tag. What is it?
7. Html tags are displayed by the web browser.
True or False?
8. What is the difference between the opening and
closing html tags?
