Web Design II - SSS 2 Digital Technologies note
WEB DESIGN II
Subject: Digital Technologies
Class: SSS 2
Term: First Term
Week: 9
Topic: Web Design II
Duration: 80 Minutes (Double Period)
1. Introduction
In the previous lesson, we learned about the basic structure of an HTML document and how CSS is used to style web pages. In this lesson, we will learn how to create a simple website containing more than one page, add text and images, create hyperlinks, design navigation menus, and apply CSS to improve the appearance of the website.
A website becomes more useful when its pages are connected and visitors can move easily from one page to another. For example, a school website may contain a home page, an about page, a contact page, and a page showing school activities.
2. Meaning of a Multi-Page Website
Each page usually has a particular purpose. The pages may share a common design, colour scheme, logo, and navigation menu.
Examples of pages on a school website
- Home page: Introduces the school and provides links to other pages.
- About page: Gives information about the school, its history, and its mission.
- Activities page: Shows school events and extracurricular activities.
- Contact page: Provides contact details and other ways to reach the school.
3. Creating and Organising Website Files
A simple website can be created using a text editor such as Notepad or a code editor. The files should be organised properly so that the browser can locate each page and its supporting resources.
For example, a school website may use the following folder structure:
school-website/
│
├── index.html
├── about.html
├── contact.html
├── style.css
└── images/
└── school.jpg
The files serve the following purposes:
| File or Folder | Purpose |
|---|---|
| index.html | The main or home page of the website. |
| about.html | Contains information about the school. |
| contact.html | Contains contact information. |
| style.css | Controls the appearance and layout of the pages. |
| images/ | A folder used to store images for the website. |
.html extension and the stylesheet with the .css extension. Use the correct file names when linking pages together.
4. Adding Text to a Web Page
Text communicates information to website visitors. HTML provides different tags for headings, paragraphs, and lists.
| HTML Tag | Function |
|---|---|
<h1> |
Defines the main heading. |
<h2> |
Defines a second-level heading. |
<p> |
Defines a paragraph. |
<ul> and <li> |
Create an unordered list and its list items. |
Example:
Welcome to Our School
Our school provides quality education and encourages students to develop their skills.
The heading introduces the page, while the paragraph provides more information about the school.
5. Adding Images to a Web Page
Images make a website more attractive and can help visitors understand its content. The HTML <img> tag is used to display an image.
Example:
The attributes have the following meanings:
- src: Specifies the location or path of the image file.
- alt: Provides alternative text describing the image if it cannot be displayed and supports accessibility.
- width: Specifies the displayed width of the image.
images, the path should identify that folder and the correct file name.
6. Creating Hyperlinks
HTML uses the anchor tag <a> to create hyperlinks.
Example of a link to another page in the same website:
About Our School
Example of a link to an external website:
Visit Example
The href attribute specifies the destination of the link. When a visitor clicks the link, the browser opens the specified destination.
Types of hyperlinks
- Internal link: Connects pages within the same website.
- External link: Takes visitors to another website.
- Email link: Opens an email application to compose a message.
- Image link: Uses an image as a clickable link.
Example of an email link:
Email the School
7. Creating a Navigation Menu
A navigation menu contains links that help visitors move between the main pages of a website. It is commonly placed near the top of a page.
Example:
In this example, each link points to a separate HTML file. The same navigation menu can be included on all the pages to make the website easier to use.
8. Applying CSS to a Website
CSS can be used to change text colours, background colours, font sizes, spacing, borders, and the arrangement of page elements.
Example of CSS rules:
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f6f8;
}
h1 {
color: #006633;
}
nav a {
display: inline-block;
margin-right: 15px;
color: #006633;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
The CSS above sets the page font and background, changes the main heading colour, and styles the navigation links.
Ways of applying CSS
| Method | Description |
|---|---|
| Inline CSS | CSS is written inside an HTML element using the style attribute. |
| Internal CSS | CSS is written inside a <style> element in the HTML document's head section. |
| External CSS | CSS is saved in a separate .css file and linked to the HTML document. |
For a multi-page website, external CSS is useful because the same stylesheet can be linked to several pages. This helps maintain a consistent design and makes changes easier.
9. Sample Multi-Page Website
The following is a simple home page that connects to an About page and a Contact page. Save it as index.html.
Our School
Welcome to Our School
We are committed to learning and excellence.
The About and Contact links will work when the corresponding about.html and contact.html files have been created in the same folder.
10. Advantages of Multi-Page Websites
- Better organisation: Information can be grouped into separate pages.
- Easy navigation: Visitors can move between related pages.
- Improved readability: Each page can focus on a particular subject.
- Consistent design: Shared CSS helps pages maintain the same appearance.
- Easier maintenance: Information can be updated on the relevant page without changing every other page.
11. Class Activity
Using a text editor or code editor, create a simple school website with the following requirements:
- Create three HTML files named
index.html,about.html, andcontact.html. - Add a heading and a paragraph to each page.
- Create a navigation menu that links all three pages.
- Add an image to the home page using the
<img>tag. - Create a file named
style.cssand use it to style the headings and navigation links. - Open the home page in a browser and test all the links.
12. Summary
A multi-page website consists of two or more connected web pages. HTML is used to structure the content, add text and images, and create hyperlinks. Navigation menus help visitors move between pages, while CSS controls their appearance. Organising website files correctly and testing links and images are important steps in creating a functional website.
13. Evaluation Questions
- What is a multi-page website?
- State four examples of pages that may appear on a school website.
- What is the function of the HTML
<img>tag? - Differentiate between an internal hyperlink and an external hyperlink.
- State three advantages of using external CSS on a multi-page website.
14. Assignment
- Draw a simple diagram showing the file structure of a website containing a home page, an About page, a Contact page, a stylesheet, and an images folder.
- Write the HTML code for a navigation menu linking
index.html,about.html, andcontact.html. - Explain the difference between inline CSS, internal CSS, and external CSS.
- State three precautions to take when adding images and hyperlinks to a website.
15. Online Quiz
Answer the following five questions and click Submit Quiz to see your score.
Comments
Post a Comment