Class VIII Chapter 2&3
HTML. provides a way of displaying Web pages with text and images or multimedia content,
HTML is not a programming language, but a markup language.
An HTML. file is a text file containing small markup tags.
The markup tags tell the Web browser, such as Mozila Firefox or Google Chrome, how to
display the page.
An HTML flile must have an .html or html file extension.
HTML stands for Hyper Text Markup Language.
HTML was created by Berners-Lee in late 1991 but "HTML. 2.0" was the first standard
HTML specification which was published in 1995.
Some of the key advantages of learning HTML:
• Create Web site
• Become a web designer
• Understand website
• Learn other languages
HTML pages are of two types:
❖ Static Pages - Static pages, as the name indicates, comprise static content (text of
images). So you can only see the contents of a web page without being able to have any
interaction with it,
❖ Dynamic Pages - Dynamic pages are those where the content of the web page depend
on user input. So interaction with the user is required in order to display the weh page.
Tags
❖ A tag is a bit of text that acts as a point demarcation. To create a tag, HTML gives
certain characters special meaning, the angle brackets < and>.
Putting characters within angle brackets creates a tag.
Example… <h1> A heading </h1>
There are two tags:
❖ Start tag or opening tag and End tag or closing tag.
An end tag always matches a start tag. except that it has an extra forward slash(/) after the
opening angle bracket.
<h1> A heading </h1>
Type of Tag
Container Tag - Which has opening and closing Tag.
Example: -
<html>----------</html>
<head>----------</head>
<body>-----------</body>
❖ Empty Tag - which has only opening tag.
➢ Ex: -
➢ <br>
➢ <area>
➢ <base>
➢ <hr>
➢ <img>
➢ <input>
HTML5
HTML. 5 enables to create more interactive websites by embedding audio, video and
graphics on the web page.
The purpose of HTML5 is primarily to make it easier for web developers.
New features:
▪ Browser Support
▪ Geolocation
▪ Offline Application Cache
▪ Web Storage
▪ Error Handling
▪ New Application Programming Interface (API)
▪ New Structure
HTML Program:
< html>
<head>
<title> Hello</title>
</head>
<body>
<h1> Body of Page <h1>
</body>
</html>
DOCTYPE declaration:
<!DOCTYPE html>
It is an instruction to the web browser about what version of HTML. the page is written in.
The <!DOCTYPE> declaration is not case sensitive.
Element
The combination of a start and end tags define an element. Everything between the two tags
is referred to as the contents of the element.
<h1> A heading <h1>
HTML Tag:
<HTML> is a starting tag. To delimit the text inside, add a closing tag by adding a forward
slash"/" to the starting tag. Most but not all tags have a closing tag. It is necessary to write
the code for an HTML. page between <HTML> and </HTML>. This <HTML> tells the
browser is 'this is the start of an HTML document' and</ HTML> 'this is the end of an HTML
document'.
<html>
……………..
</html>
Head Tag
Before the <body> element you will often see a <head> element. This contains information
about the page, rather than information that is shown within the main part of the browser.
You will usually find a title element inside the <head> element. <head> is opening head tag
and </head> is closing head tag.
<html>
<head>
<title> Hello </title>
</head>
</html>
Title Tag
The contents of the <title> element are either shown in the top of the browser, above where
you usually type in the URL of the page you want to visit, or on the tab for that page (if your
browser uses tabs to allow you to view multiple pages at the same time),< title> is opening
title tag and</title> closing title tag.
<html>
<head>
<title> Hello </title>
</head>
</html>
Body Tag
Everything inside this element is shown inside the main browser window, <body> is opening
body tag and </body> is closing tag.
<html>
<head>
<title> Hello</title>
</head>
<body>
<h1> Body of Page </h1>
</body>
</HTML>
Question for practice
❖ Answer the following in one word/sentence.
1. Write the full form of HTML.
2. Which tag is used to insert a line break?
3. Name any one attribute of the <img> tag.
4. Write the tag used for creating an ordered list.
5. What is the extension of an HTML file?
Answer the following in 30–40 words.
6. Differentiate between <b> and <strong> tags with an example.
7. Write the HTML code to link your webpage to www.wikipedia.org.
8. Write any two differences between <ol> and <ul>.
9. Write an HTML code to display the text “Welcome Students” in
the largest heading.
10.What is the difference between container tags and empty tags?
Give one example each.
11.Write an HTML program to create the following list of fruits using an
unordered list:
• Apple
• Mango
• Banana
12. Explain the purpose of the following tags with examples: <tr>, <td>,
<th>.
13. Differentiate between ordered list, unordered list, and definition list
with suitable examples.
MCQ
1. HTML is used to:
a) Design graphics
b) Create web pages
c) Make presentations
d) Write programs
2. Which tag is used to create a hyperlink?
a) <a> (b) <link> (c) <href> (d) <src>
3. Which attribute of <img> tag is used to display
alternate text?
a) src
b) alt
c) text
d) title
4. The <br> tag is a:
a) Container tag
b) Empty tag
c) Both a & b
d) None
5. Which tag is used to create an unordered list?
a) <ol>
b) <li>
c) <ul>
d) <list>
6. The <hr> tag is used for:
a) Heading
b) Horizontal line
c) Break line
d) Table row
7.Which HTML tag is used to display italic text?
a) <b>
b) <i>
c) <u>
d) <em>
8. Which of the following is correct HTML for inserting an
image?
a) <img href="pic.jpg">
b) <image src="pic.jpg">
c) <img src="pic.jpg">
d) <img link="pic.jpg">
9. The <head> tag contains:
a) Webpage content
b) Metadata
c) Images
d) Lists
10.Which tag is used to create a table?
a) <tr>
b) <table>
c) <td>
d) <th>
11. Which tag is used to define a paragraph?
a) <para>
b) <p>
c) <pg>
d) <text>
12.The default alignment of text in HTML is:
a) Left
b) Right
c) Center
d) Justify
13.Which attribute is used to change background color
of a page in HTML?
a) bgcolor
b) color
c) background
d) back
14. Which tag is used to create a numbered list?
a) <ul>
b) <li>
c) <ol>
d) <num>
15. Which HTML tag is used to underline text?
a) <ul>
b) <u>
c) <ur>
d) <line>
16. Which of the following is NOT a valid HTML tag?
a) <body>
b) <head>
c) <title>
d) <heading>
17. The <caption> tag is used in:
a) Table
b) Image
c) List
d) Link
18. The correct way to add background image in HTML
is:
a) <body bg="image.jpg">
b) <background image="image.jpg">
c) <body background="image.jpg">
d) <img background="image.jpg">
19. Which tag is used to create a checkbox?
a) <input type="check">
b) <checkbox>
c) <input type="checkbox">
d) <check>
20.The correct HTML for creating an email link is:
a) <a href="mail:someone@example.com">
b) <a href="mailto:someone@example.com">
c) <mail>someone@example.com</mail>
d) <mail href="someone@example.com">
