1. 2
Lesson Plan
Lesson Objectives Design a Web Page using HTML
Learning Outcomes Improve the programming and design skills
Apply the various tags in HTML to create websites
Learning Activities/
Tasks/Differentiation
Pre-Assessment, Discussion to analyze the knowledge in Basic HTML
Tags
Real Life Connections and
Cross Curricular Link
Design web pages on various topics
Assessments Practicing HTML coding
Resources https://www.w3schools.com/html/default.asp
Extended Learning Find out more properties and values for various tags learned.`
5. HTML
HTML means Hyper Text Markup Language.
Ted Nelson introduced the word hypertext in 1960s.
HTML documents saved with an extension .htm or .html.
It is a set of special codes included to control the layout and
appearance of the text.
6
6. Tools Used to Create HTML Pages
Web Browser: It is a computer program which interprets the HTML
commands written in a HTML document to arrange and display the
web page.
Text Editor: These are programs that are used to create or compose
HTML documents. Notepad and WordPad are two examples of Text
editor.
7
7. Basic Structure of HTML Document
<HTML>
<HEAD>
<TITLE> ……………….</TITLE>
</HEAD>
<BODY>
--------------------------------
--------------------------------
</BODY>
</HTML>
8
8. Steps to create a web page:
1. Start Notepad program
2. Type the contents of your HTML page.
3. Save the file with .htm or .html extension
4. When you save it a browser icon appears with your
filename.
5. Double click on the icon to view the page.
9
14. Tags in HTML
The basic elements of HTML is called tags “ < >”
Tags are used for formatting and structuring the webpages.
Tags are not shown in the web page.
There are 2 types of tags in HTML
1. Container Elements
2. Empty Elements
15
15. Tags in HTML
Container Elements:
They are ON and OFF tags
Container elements occurs in pairs.
Example: <HTML> </HTML>, <TITLE> </TITLE>, <BODY> </BODY>
Empty Elements
These elements have only the ON tag.
Example: Paragraph Tag <p>
16
16. HTML tag
<HTML></HTML>
It is a container element
It is used as an identification by the browser to identify HTML document
It shows the start and end of the HTML document
It does not affect the appearance of the document.
It is not displayed by the browser.
17
17. HEAD tag
<HEAD></HEAD>
It is a container element
It is not displayed by the browser.
Title tag appears within the head tag.
18
18. TITLE tag
<TITLE></TITLE>
It is a container element
It appears on the title bar of the web browser
It is used to provide title to the document.
19
19. BODY tag
<BODY></BODY>
It is a container element
It can contain images, sounds and graphics
All the contents that is visible on a web page is enclosed inside the body tag.
20
20. HEADING tags
These tags are used to specify the size of the headings.
Example : <H1></H1>, <H2> </H2>…….<H6></H6>
The size of the text decreases from H1 to H6
21
22. Paragraph tags
<P>
It is an empty tag( closing tag is not required)
It is used to create paragraphs
It inserts one blank line in the beginning of the paragraph
23
23. Page Break tag
<BR>
It is an empty tag( closing tag is not required)
Used with a paragraph, whenever you want to start a new line.
It does not leave a blank line between the line of text
24
28. Attributes of Body Tag
BACKGROUND: <body BACKGROUND=“filepath”>
BGCOLOR: <body BGCOLOR=“color”>
TEXT: <body TEXT=“color”>
29
29. Attributes of Body Tag
BACKGROUND: <body BACKGROUND=“filepath”>
BGCOLOR: <body BGCOLOR=“color”>
TEXT: <body TEXT=“color”>
30
30. Attributes of Body Tag
<html>
<head><title> Let's learn formatting.</title></head>
<body background="oip.jpg" text="red">
The attributes of the body tag
</body>
</html>
31
32. An HTML marquee is a scrolling piece of text displayed either horizontally
across or vertically down your webpage.
The tag <marquee></marquee> is used.
To provide direction to the marquee direction attribute is used.
Example:
<marquee direction="right">MY TABLE</marquee>
33
Marquee
34. Task 1: Design a HTML page to display a Marquee “ Hi welcome to my page “ .
Task 2: Design a HTML page to display a marquee sliding from right to left
Task 3 : Design a HTML page to create the marquee as shown in the screen.
35
Marquee
35. Adding a URL and Linking to another page
The <a> tag is used to create a link.(hyperlink)
<a> stands for “anchor”.
The letter “a” in the tag is then followed by an attribute.
For a link to another web page, the “a" is followed by “href".
Example:
<body>
< a href=https://www.bing.com/>Bing</a>
</body>
36
36. Adding an Image
To put an image on a Web page, first move the image file into the same directory as the HTML
file.
Each image must carry at least two attributes: the src attribute, and an alt attribute.
The src attribute tells the browser where to find the image. Its value is the URL of the image file.
Whereas, the alt attribute provides an alternative text for the image, if it is unavailable or
cannot be displayed for some reason. Its value should be a meaningful substitute for the image.
The <img > element is an empty element.
Example:
o <img src="kites.jpg" alt="Flying Kites">
o <img src="sky.jpg" alt="Cloudy Sky">
o <img src="balloons.jpg" alt="Balloons">
37
37. Setting the Width and Height of an Image
The width and height attributes are used to specify the width and
height of an image.
Example:
<img src="kites.jpg" alt="Flying Kites"
width="300" height="300">
<img src="sky.jpg" alt="Cloudy Sky" width="250"
height="150">
<img src="balloons.jpg" alt="Balloons"
width="200" height="200">
38
