Topic: Website Authoring
Learning Objectives
Define web design, web page, and HTML
Identify the layers of a web page and their associated technologies
Describe the structure and function of HTML elements and attributes
Recognize different types of markup languages
Prepare the basic structure of an HTML document
What is Web Design?
Web design refers to the planning and creation of websites. It involves:
Web graphic design
User Interface (UI) design
Authoring (using standard code and proprietary tools)
User Experience (UX) design
Search Engine Optimization (SEO)
Web design typically deals with the front-end or client-side aspects of a website, including the
layout and appearance of the page.
What is a Web Page?
A web page is a hypertext document displayed in a web browser. A website is a collection of
related web pages stored on a web server. Web pages may include:
Text
Sound
Video
Still Images
Layers of a Web Page
A typical web page is made of 3 layers:
1. Content Layer (Structure): Created using HTML.
2. Presentation Layer: Created using CSS to style content.
3. Behaviour Layer: Provides interactivity using JavaScript or PHP.
What is a Web Browser?
A web browser is a software used to access information on the web. Common browsers include:
Google Chrome
Mozilla Firefox
Apple Safari
Opera
Microsoft Edge
What is a Web Server?
A web server is a remote computer that:
Stores
Processes
Delivers content to clients over the internet
It responds to requests from users’ web browsers.
Markup Languages
Markup languages use tags to define elements in a document that can be rendered in a browser.
Examples:
STANDARD GENERALIZED MARKUP LANGUAGE (SGML) – The parent language
developed in the 1960s.
HYPERTEXT MARKUP LANGUAGES (HTML) – Introduced in 1989 by Tim Berners-Lee.
EXTENSIBLE MARKUP LANGUAGES (XML) – Allows custom tags.
EXTENSIBLE HYPERTEXT MARKUP LANGUAGE (XHTML) – Combines HTML and XML.
HTML Files
HTML files use tags to define how a browser displays content. These files must have .html or .htm
extensions.
HTML Elements, Tags and Attribute
Element: A piece of HTML made of an opening tag, content, and closing tag:
<p>This is a paragraph.</p>
Tags: Indicators used to identify the type of a particular content. The two types are:
1. Container tag: <title>Welcome</title>
2. Empty tag: <br/>, <hr/>
Attribute: Included in the opening tag, modifies the characteristics of the content and adds info to
tags using name="value" format:
<img src="logo.jpg" width="100" height="80">
Nesting Tags
Placing one tag inside another. Example:
<p><b><em>This is nested properly.</em></b></p>
Common Types of HTML Tags
1. Head Tags: <head>, <title>
2. Text Formatting: <b>, <i>, <u>
3. Link: <a>
4. Lists: <ul>, <ol>, <li>
5. Tables: <table>, <tr>, <td>
6. Forms: <form>, <input>
7. Scripting: <script>
8. Image and object: <img>
Structure of a Web Page
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is my first web page.</p>
</body>
</html>
<!DOCTYPE html> defines the page is HTML5.
<html> the root of an HTML page.
<head> This tag can include a title for the document, scripts, styles, meta information and more.
<title> Displays a title for the page in search-engine results (important for SEO).
<body> This tag contains all the contents of an HTML document, such as text, hyperlinks,
images, tables, lists, etc.
HTML Comments
<!-- This is a comment -->
HTML Links
Anchor tag: <a> creates a link to another document or web page.
<a href="url">Text to be displayed</a>
<a href="https://www.example.com">Visit Example</a>
Open in new tab:
<a href="https://www.example.com" target="_blank">Visit Example</a>
Assessment Questions
1. The structure layer of a web page is created using:
A) JavaScript
B) PHP
C) HTML
D) CSS
2. Which tag is used to create a line break in HTML?
A) <line>
B) <br>
C) <lb>
D) <break>
3. A web browser is used to:
A) Store code
B) Host websites
C) Display web pages
D) Edit databases
4. Which file extension is correct for an HTML file?
A) .txt
B) .html
C) .exe
D) .doc
Practical Assignment
Write a complete HTML file that includes the following elements:
i. A heading titled “Welcome to the ICT Club”
ii. A paragraph describing the club’s activities
iii. An image of a computer (use a placeholder image source like "computer.jpg")
iv. A hyperlink to the school website (e.g., "https://www.lead-fortegatecollege.com")
v. An HTML comment explaining the purpose of the page
