Web Design I - SSS 2 Digital Technologies note

WEB DESIGN I: INTRODUCTION TO HTML AND CSS

Subject: Digital Technologies
Class: SSS 2
Term: First Term
Week: 8
Topic: Web Design I
Duration: 80 Minutes (Double Period)

Introduction

Websites are used to share information, communicate, advertise products, provide educational materials, and deliver online services. Examples include school websites, news websites, online stores, and educational blogs. Web design involves planning and creating web pages that present information clearly and attractively. To create websites, web designers commonly use HTML to structure the content and CSS to control its appearance. In this lesson, students will learn the meaning of web design, the basic structure of an HTML document, common HTML tags, and how to use CSS to style a simple web page.

1. Meaning of Web Design

Web design is the process of planning and creating the structure, layout, appearance, and user experience of websites and web pages.

Web design involves arranging text, images, headings, links, colours, and other elements to make information easy to understand and navigate.

Important Web Design Terms

• Website: A collection of related web pages usually connected by hyperlinks and published under a common domain name.
• Web page: A single document that can be displayed in a web browser.
• Web browser: Software used to access and display web pages. Examples include Google Chrome, Mozilla Firefox, and Microsoft Edge.
• Web designer: A person who plans and creates the layout and visual appearance of websites.
• Hyperlink: A clickable text or element that takes a user to another page, file, or location.
• Web hosting: A service that stores website files and makes them accessible through the internet.
• Domain name: The human-readable address used to access a website, such as example.com.

Uses of Web Design

1. Creating websites for schools and educational institutions.
2. Publishing news, articles, and other information.
3. Advertising products and services.
4. Supporting online learning and communication.
5. Providing access to online services and business transactions.

2. Introduction to HTML

HTML stands for HyperText Markup Language. It is the standard markup language used to structure the content of web pages.

HTML tells a web browser how the content of a web page is organized. It is used to define headings, paragraphs, lists, images, links, tables, and other elements. HTML is a markup language, not a general-purpose programming language.

Basic HTML Terminologies

• Tag: A markup instruction written inside angle brackets, for example <p>.
• Element: A component of an HTML document. It commonly consists of an opening tag, content, and a closing tag.
• Opening tag: Marks the beginning of an element, for example <h1>.
• Closing tag: Marks the end of many HTML elements, for example </h1>.
• Attribute: Provides additional information about an element and is usually written inside its opening tag.

Examples of HTML Tags and Their Functions

HTML Tag	Function	Example
<html>	Contains the main HTML document.	<html>...</html>
<head>	Contains document information and metadata.	<head>...</head>
<title>	Defines the title displayed in the browser tab.	<title>My Page</title>
<body>	Contains the main visible content of the web page.	<body>...</body>
<h1> to <h6>	Define headings at different levels.	<h1>Welcome</h1>
<p>	Defines a paragraph.	<p>Hello world.</p>
<br>	Creates a line break.	Hello<br>World
<hr>	Creates a thematic break, commonly displayed as a horizontal line.	<hr>
<a>	Creates a hyperlink.	<a href="page.html">Visit</a>
<img>	Embeds an image.	<img src="photo.jpg" alt="Photo">
<ul>	Creates an unordered list.	<ul>...</ul>
<ol>	Creates an ordered list.	<ol>...</ol>
<li>	Defines an item in a list.	<li>Item</li>

Note: Many HTML elements have opening and closing tags. Elements such as <br> and <img> do not require separate closing tags in HTML.

3. Basic Structure of an HTML Document

An HTML document follows a standard structure that helps the browser identify the type of document, its metadata, and its main content.

Example of a Basic HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first web page.</p>
</body>
</html>

Explanation of the HTML Structure

1. <!DOCTYPE html> declares that the document uses HTML5.
2. <html lang="en"> contains the HTML document and identifies English as the page language.
3. <head> contains information about the document, including metadata and its title.
4. <meta charset="UTF-8"> specifies the character encoding.
5. <meta name="viewport"...> helps the page display appropriately on different screen sizes.
6. <title> defines the title shown in the browser tab.
7. <body> contains the main content displayed on the web page.
8. <h1> displays the main heading.
9. <p> displays a paragraph.

Remember: The HTML code is written in a text editor, saved as an HTML file, and opened in a web browser to view the result.

4. Introduction to CSS

CSS stands for Cascading Style Sheets. It is used to control the appearance and layout of web pages.

HTML provides the structure of a web page, while CSS controls how that content looks. CSS can change text colours, background colours, fonts, spacing, borders, alignment, and layout.

Common CSS Properties

CSS Property	Function	Example
color	Changes the colour of text.	color: blue;
background-color	Changes the background colour.	background-color: yellow;
font-size	Changes the size of text.	font-size: 20px;
font-family	Sets the typeface.	font-family: Arial;
text-align	Aligns text horizontally.	text-align: center;
border	Adds a border around an element.	border: 1px solid black;

Ways of Applying CSS

There are three main ways to apply CSS to an HTML document.

1. Inline CSS: Written inside an HTML element using the style attribute.
2. Internal CSS: Written inside a <style> element, usually within the document's <head>.
3. External CSS: Written in a separate file with the .css extension and linked to the HTML document.

Example of Inline CSS

<h1 style="color: green; text-align: center;">
    Welcome to My Website
</h1>

<p style="font-size: 18px; color: blue;">
    I am learning web design.
</p>

In this example, the heading is green and centred, while the paragraph uses blue text with a font size of 18 pixels.

Example of Internal CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Styled Web Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff;
        }

        h1 {
            color: darkgreen;
            text-align: center;
        }

        p {
            font-size: 18px;
            color: #333333;
        }
    </style>
</head>
<body>
    <h1>My School</h1>
    <p>Welcome to our school website.</p>
</body>
</html>

This example uses CSS to give the page a light background, centre the heading, and change the appearance of the paragraph.

5. Differences Between HTML and CSS

HTML	CSS
Structures the content of a web page.	Controls the appearance and layout of a web page.
Uses elements and tags.	Uses selectors, properties, and values.
Defines headings, paragraphs, images, and links.	Defines colours, fonts, spacing, borders, and positioning.
HTML files commonly use the .html extension.	CSS files commonly use the .css extension.

6. Class Activity: Creating a Simple Web Page

Objective: To create a simple HTML document and apply basic CSS styling.

Materials Required

• A computer.
• A text editor such as Notepad or Visual Studio Code.
• A web browser such as Google Chrome or Microsoft Edge.

Procedure

1. Open Notepad or another text editor.
2. Type the HTML code provided below.
3. Save the file as mywebpage.html. If using Notepad, select All Files as the file type.
4. Locate the saved file and open it in a web browser.
5. Observe the heading, paragraphs, background colour, and text styling.
6. Return to the text editor, change some text, save the file, and refresh the browser.

Practical Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #fff8f0;
            padding: 20px;
        }

        h1 {
            color: #f07c52;
        }

        p {
            color: #333333;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>About Me</h1>
    <p>My name is __________.</p>
    <p>I am a student of __________ School.</p>
    <p>I am learning how to design web pages with HTML and CSS.</p>
</body>
</html>

Safety Note: Save your work in your own folder. Do not publish private information such as your home address or phone number on a public website.

7. Advantages of Learning HTML and CSS

1. They provide the foundation for creating websites.
2. They help students understand how web pages are structured and styled.
3. They encourage digital creativity and problem-solving.
4. They are useful skills for careers in web design and web development.
5. They can be practised using a basic text editor and a web browser.

Summary

Web design involves planning and creating websites and web pages. HTML structures the content of a web page using elements such as headings, paragraphs, images, and links. CSS controls the appearance of the content through properties such as colour, font size, background colour, and text alignment. Students should understand the basic structure of an HTML document, recognize common HTML tags, and practise applying CSS to create a simple web page.

Evaluation

Answer the following questions.

1. Define web design.
2. What is the full meaning of HTML?
3. State five HTML tags and explain their functions.
4. Explain the purposes of the <head> and <body> elements.
5. What is CSS, and what is it used for?
6. List the three main ways of applying CSS.
7. State three differences between HTML and CSS.
8. Write a simple HTML document containing a heading and two paragraphs.

Assignment

1. Write the full meanings of HTML and CSS.
2. Explain five HTML tags and state the purpose of each.
3. Write an HTML document displaying your school's name, a heading, and a short paragraph about the school.
4. Add CSS to change the heading colour, paragraph font size, and page background colour.

Interactive Practice Quiz

Choose the correct answer for each question and click Submit Quiz to calculate your score.

1. What is the full meaning of HTML?

A. High Text Machine Language B. HyperText Markup Language C. Hyper Transfer Making Language D. Home Tool Markup Link

2. Which language is mainly used to style a web page?

A. HTML B. SQL C. CSS D. HTTP

3. Which HTML tag is used to create a paragraph?

A. <p> B. <h1> C. <title> D. <bodytext>

4. Which HTML element contains the main visible page content?

A. <head> B. <title> C. <meta> D. <body>

5. Which file extension is commonly used for an HTML file?

A. .docx B. .html C. .mp3 D. .xlsx