PODAR INTERNATIONAL SCHOOL (CAMBRIDGE)
Cambridge Assessment International Education
“SARASWATI” BEHIND ARCADIA, HIRANANDANI ESTATE, PATLIPADA, THANE (WEST) - 400607
HTML Notes
Grade VII ICT - HTML
What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
A Simple HTML Document
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Explanation :
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
1
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white
space (a margin) before and after a paragraph.
Example
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
2
</html>
HTML Formatting Elements
Formatting elements were designed to display special types of text:
<b> - Bold text
<i> - Italic text
<sub> - Subscript text
<sup> - Superscript text
Example :
<html>
<body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">
3
Example :
<!DOCTYPE html>
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see
the image get an understanding of what the image contains:</p>
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
</body>
</html>
Note : Please save your HTML file and Image file.
HTML Font tag - Syntax
HTML <font> tag is used to define the font style for the text contained within it. It defines the font
size, color, and face or the text in an HTML document. It has the following syntax:
<font size=" " color=" " face=" "> Content....</font>
Example
<!DOCTYPE html>
<html>
<head>
<title>Font Tag</title>
</head>
<body>
<h2>Example of font tag</h2>
<p>
<font size="5" color="green">Text with Increased size and default
face</font>
</p>
</body>
</html>