FATHER AGNEL SCHOOL
HTML NOTES
CLASS VII
HTML (HyperText Markup Language)
o HTML stands for HyperText Markup Language.
o HTML is used to create web pages and web applications.
o HTML is a widely used language on the web.
o We can create a static website by HTML only.
o Technically, HTML is a Markup language rather than a programming language.
Note: HTML is not case sensitive.
History of HTML
HTML was created by Sir Tim Berners-Lee in late 1991 but was not officially released. It was published in
1995 as HTML 2.0. HTML 4.01 was published in late 1999 and was a major version of HTML.
Writing HTML Documents
HTML uses predefined tags that tell the browser how to display the content. Tags are nothing but some
instructions that are enclosed in angle braces(i.e., <>). Tags are used in many places of the webpage.
There are two types of tags in HTML:
1. Container tags
Container tags are generally divided into three parts, i.e., opening tag, content(which will be displayed on
the browser), and closing tag. In the content part, they can also contain some other tags. These opening and
closing tags are used in pairs which are start tag and end tag, which are often called ON and OFF tags.
The majority of tags present in HTML are container tags.
Some commonly used container tags are:
<html>….</html>: This marks the beginning and ending of the webpage it also indicates that the
document is an HTML document. This contains all other tags in between these tags which are
considered for making a webpage.
<head>…</head>: This tag is used to define the head part of the document which contains the
information related to the webpage.
<title>…</title>: This tag stores the description of the web page, whatever is given in these tags
appears on the tab name with opened by the browser. It is described in the head tag.
<body>….</body>: This tag is used to display all the information or data, i.e, text, images, hyperlinks
videos, etc., on the webpage to the user.
2. Empty Tags
The tags that do not contain any closing tags are known as empty tags. Empty tags contain only the opening
tag but they perform some action in the webpage. Some commonly used empty tags are :
<br>, <hr>, <img>
HTML Attribute
o HTML attributes are special words which provide additional information about the Tag.
o Attributes should always be applied with the start tag.
o The Attribute should always be applied with its name and value pair.
1
o The Attributes name and values are case sensitive, and it is recommended by W3C that it should be
written in Lowercase only.
o You can add multiple attributes in one HTML element, but you must give space between two
attributes.
BASIC STRUCTURAL TAGS OF A WEBPAGE
HTML WRITING TOOLS
HTML documents can be written by using any plaintext Editor like Notepad (PC) or TextEdit
(Mac).
Web pages can be created and modified by using professional HTML editors also. We will use Notepad,
Windows default text editor to write webpages code.
Creating an HTML Document:
Follow the given steps to create and save HTML documents.
Step 1
Use the Search box next to the Start button to open the Notepad window.
Step 2
Type the HTML code in the Notepad window as shown in Figure .(Fig.1)
Step 3
Click on the File menu and choose the Save option. The Save As dialog box gets displayed.
Step 4
In the Save As dialog box, after selecting the appropriate folder, specify the name of the HTML file along
with the extension .html or .htm in the File Name box as shown
in Figure .(Fig 1.1)
Step 5
Click on the Save button to save the file.
2
(Fig.1)
(Fig .1.1)
Viewing HTML Document in a browser
After writing the HTML code to create a webpage using an HTML editor, we can check how the webpage
will look like, using a web browser. Some examples of web browsers are Internet Explorer, Mozilla Firefox,
Netscape Navigator and Google Chrome.
To view HTML page on a web browser like Google Chrome, follow the steps.
(double click on the file, or right-click - and choose "Open with")now click your browser.
3
Attributes of <BODY> tag
a) Bgcolor attribute: It is used to specify the background colour of the webpage. The value for bgcolor can
be given by specifying colour names.
e.g.
<Body Bgcolor = “yellow”>
contents of webpage………….
</Body>
b) Background attribute: It is used to specify background image of a webpage. Images having
extensions .jpeg, .gif or .png are supported by almost all the browsers.
e.g.
<Body
background=”C:\Users\MyPC\Images\Tree.jpg”>
contents of webpage………….
</Body>
Note- If HTML document and image file are at the same
location or same folder then we don’t have to provide
path of the image file.
e.g. <Body background=”Tree.jpg”>
contents of webpage………….
</Body>
c) Text attribute: It is used to specify default text colour of the webpage.
e.g. <Body text=”red”>
contents of webpage………….
</Body>
d) Topmargin and leftmargin Attributes: These attributes are used to set marginal spaces (blank space
between top edge of the webpage and text) from the top of the webpage and left of the webpage respectively.
e) g. <body topmargin=500 leftmargin=400>
contents of webpage………….
</body>
4
Text Formatting Tags
<BR> tag: This tag is used to break a line and display the text written after it in the next line. It is
an empty tag and does not have any attribute.
e.g.:
<Body> Father Agnel <br> School
</Body>
<B> BOLD, <I> ITALICS, <U> UNDERLINE TAGS: these tags are used to display the text in
bold, Italics or underline respectively. They are the container tags.
e.g. <body>
<B> Class 10-A </B>
<I>Class 10-B</I>
<U>Class 10-C</U>
</body>
We can combine all these tags to have multiple
effects in the same text.
e.g.
<body>
<B>
<I>
<U>Class 10</B>
</I>
</U>
</body>
<SUP> (SUPERSCRIPT TAG): This tag is used
to display the text above the normal text line
(superscript effect) or subscript effect i.e., they
display the text above the normal text line or
below the normal text line respectively.
e.g. <BODY> Polynomial Equation:
X<SUP>3</SUP>+Y<SUP>2</SUP>=20
</BODY>
<SUB> (SUBSCRIPT TAG):
This tags is used to display the text below the
5
normal text line (subscript effect).
e.g. <BODY>
H<SUB>2</SUB>SO<SUB>4</SUB>
</BODY>
<P> Tag - paragraph tag: This tag is used to define paragraph in web pages. It is a container tag.
While taking paragraph tag a blank line will get inserted at the end of the paragraph automatically. It
comes with only one attribute align.
Align attribute - It can have 4 values:
a.) Left (default)
b.) Right
c.) Center
d.) Justified
e.) g. <body>
<p>This is first paragraph. </p>
<p>This is another paragraph. </p>
</body>
<P> Tag used with different alignments-
<body>
<p align = ”left”>
This is first paragraph.</p>
<p align = ”right”>
This is second paragraph.</p>
<p align = ”center”>
This is third paragraph.</p>
</body>
<CENTER> Tag: It is used to display the
contents, like text or an image in the center of the
webpage. It is a container tag.
e.g.
<Body>
<Center>contents of webpage………….
</Center>
</Body>
<Marquee> MarqueeTag - The <marquee> tag in HTML is used to create scrolling text on a webpage.
Attributes of <Marquee> tag :
a) Bgcolor: provides a background color where the value will be either the name of the color or the
hexadecimal color code.
b) Height: provides the height or length of a marquee. For example height="20" or height="30%"
c) scrollamount: Scrollamount attribute is used to change speed of a marquee. Default Marquee speed is
6px per second. To increase or decrease speed of marquee, change value of scrollamount. Scrollamount
value is a number.
6
<marquee scrollamount="10"> This is a marquee with scrollamount 10 </marquee>
<marquee scrollamount="25"> This is a marquee with scrollamount 25 </marquee>
<marquee scrollamount="50"> This is a marquee with scrollamount 50 </marquee>
<marquee scrollamount="100"> This is a marquee with scrollamount 100 </marquee>
What is an HTML Heading?
An HTML heading is a title or subheading that we want to display on a webpage. In HTML, there are six
headings defined using <h1> to <h6> tags. h1 is the highest level or the main heading, while h6 is the
smallest .
The text inside the heading tags <h1>TEXT</h1> shows on the browser. The size of the text depends on the
heading tag.
Explanation:
<h1>: It is the start tag for the H1 heading.
TEXT: This text will appear as the main heading on a visitor’s screen.
</h1>: This is the closing tag for the H1 heading.
Exercise
Q1. Multiple choice questions:
1. To create HTML page, you need
a. Web Browser
b. Text editor
c. Both a & b
d. None of the above
2. Choose the correct HTML tag to make a text italic
a. <i>
b. <italic>
c. <it>
d. <itala>
3. What does the <br> tag add to your webpage?
a. Long break
b. Paragraph break
c. Line break
d. None of the above
4. Which tag tells the browser where the page starts and stops?
a. <html>
b. <body>
c. <head>
d. <title>
5. The default colour of text in a web page is .
a. Black White
b. Red Blue
6. Which of the following HTML tag is used to display the text with scrolling effect?
a. <marquee>
b. <scroll>
7
c. <roaming>
d. <none of the above>
7. How to insert a background image in HTML?
a. <body background = "img.png">
b. <img background = "img.png">
c. <bg-image = "img.png">
d. None of the above
8. Which HTML tag is used to display the power in expression, i.e., (x2 - y2)?
a. <sub>
b. <sup>
c. <p>
d. None of the above
Q2. State whether the following statements are true or false:
1. HTML is case sensitive.
2. Providing attributes with tags is optional.
3. The BODY tag is used to provide heading.
4. Simple text editors like Notepad may be used to write HTML code.
5. <P> tag has no attributes to align text.
6. An HTML program is saved by using the .png extension.
7. <br> tag doesn’t require a closing tag.
8. HTML stands for high text mark language.
Q3. Very short Answer type questions:
a) What is a tag?
b) What are Attributes in HTML?
Q5. Differentiate between container and empty tags. Also give an example of each.
Q6. Name any three attributes of <BODY> tag.
