HTML – BASIC TAGS
Class – VI (Chapter – 2)
HEADING TAGS
HTML defines six levels of headings. A heading element implies all the font changes, paragraph
breaks before and after, and any white space necessary to render the heading. The heading
elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and
H6 the least.
Example
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Output:
PARAGRAPH TAG
The paragraph tags are used to define a block of text as a paragraph. When a block of text is
surrounded by the paragraph tags, the browser automatically adds white space before and after
the paragraph.
To define a paragraph, we use the opening and closing paragraph set of tags.
<p> The content of the paragraph </p>
Note: The browser removes extra spaces and lines when the page is displayed.
Example:
<html>
<body>
<p>
This paragraph contains a lot of lines
in the source code,
but the browser ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser ignores it.
</p>
</body>
</html>
Output:
LINE BREAK TAG
The br tag will insert a line break which means the text/image following the tag will be moved to the next
line when displayed in the browser.
Example:
<html>
<body>
<p>This is a <br> paragraph with a line break.</p>
</body>
</html>
This will produce the following result:
HTML - FONTS
Fonts play a very important role in making a website user friendly and increasing content
readability. You can use HTML <font> tag to add style, size, and colour to the text on your
website.
(i) FONT SIZE
You can set font size using size attribute. The range of accepted values is from 1 (smallest) to 7
(largest). The default size of font is 3.
Example:
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br >
<font size = "2">Font size = "2"</font><br >
<font size = "3">Font size = "3"</font><br >
<font size = "4">Font size = "4"</font><br >
<font size = "5">Font size = "5"</font><br >
<font size = "6">Font size = "6"</font><br/>
<font size = "7">Font size = "7"</font>
</body>
</html>
Output:
(ii) SETTING FONT FACE
You can set font face using face attribute but if the user viewing the page doesn't have the font
installed, they will not be able to see it. Instead user will see the default font face applicable to the
user's computer.
Example:
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br >
<font face = "Verdana" size = "5">Verdana</font><br>
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br>
<font face = "WildWest" size = "5">WildWest</font><br>
<font face = "Bedrock" size = "5">Bedrock</font><br>
</body>
</html>
Output:
(iii) SETTING FONT COLOUR
You can set any font colour using color attribute. You can specify the colour either by the colour
name or hexadecimal code used for that colour.
Example:
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in pink</font><br>
<font color = "red">This text is red</font>
</body>
</html>
Output:
Try it out……..
WHAT ARE HTML COLOUR CODES?
Colour codes are ways of representing the colours we see every day in a format that a
computer can interpret and display. Commonly used in websites and other software
applications, there are a variety of formats, including Hex colour codes, RGB and HSL
values, and HTML colour names.
HEX COL O R COD ES
The most popular are Hex colour codes; hexadecimal numbers (consist of six digits), with
each byte, or pair of characters in the Hex code, representing the intensity of red, green
and blue in the colour respectively.
#XXXXXX
Hex code byte values range from 00, which is the lowest intensity of a colour to FF which
represents the highest intensity. The colour white, for example, is made by mixing each of
the three primary colours at their full intensity, resulting in the Hex colour code of #FFFFFF.
#FFFFFF
Black, the absence of any colour on a screen display, is the complete opposite, with each
colour displayed at their lowest possible intensity and a Hex colour code of #000000.
Understanding the basics of Hex colour code notation we can create greyscale colours very
easily, since they consist of equal intensities of each colour:
The three primary colours, red, green and blue, are made by mixing the highest intensity of
the desired colour with the lowest intensities of the other two.
With modern browsers supporting the full spectrum of 24-bit colour, there are 16,777,216
different colour possibilities.
Following is the list of few colours using hexadecimal notation:
(i) Colour names
Another way to colour website's text is by using HTML colour name, just replace the
Hex code with the name of the colour you want to use.
List of Standard Colours names:
