Class IX · Chapter 49 min read
Share:WhatsAppLinkedIn

Chapter 4: Introduction to HTML

Class: IX | Subject: Information and Computer Technology

Key Concepts

1. What is HTML?

  • HTML stands for Hypertext Markup Language., A special kind of text used by web browsers to represent data (letters, images, audio, video)., Text is "marked up" through links to other documents; a page formed this way is called a document or a webpage., A webpage opens in a web browser, which accesses it from a web server via the Internet., HTML was created by the World Wide Web Consortium (W3C) in 1990., Invented by Tim Berners-Lee in November 1990 to help scientists at different universities access each other's research., HTML is an improved version of SGML (Standard Generalised Markup Language), a meta-language for defining descriptive markup languages.

2. Tools Needed, A text editor / HTML editor (e.g., Notepad, Notepad++), A web browser (e.g., Chrome, Firefox, Internet Explorer)

3. Tags and Attributes

Tags, A tag is a special word enclosed in angle brackets < >., Tags tell the browser to perform a specific action., Tags can be written in lower case or upper case (the browser responds to both equally)., Most HTML tags come in pairs: a start (opening) tag and an end (closing) tag.

  • Start tag: <SpecialWord>
  • End tag: </SpecialWord> (forward slash before the word)

Attributes, The characteristics or features of a tag., Used inside a tag; always takes a value., There may be more than one attribute inside a tag.

Elements, A combination of a start tag, the content (text/graphics), and the end tag., Example: <body>This is body content.</body>

Nesting (Container of Tags), One set of tags can contain another set of tags., The inner tags must be fully contained within the outer tags.

<TAG1> <TAG2>...content...</TAG2> </TAG1>

4. Structure of an HTML Document

<HTML>
  <HEAD>
    <TITLE> The Structure of HTML Document </TITLE>
  </HEAD>
  <BODY>
    The Body of the HTML Document
  </BODY>
</HTML>
  • The document is divided into two sections: HEAD and BODY.
  • HEAD section (<HEAD>...</HEAD>): Contains the <TITLE> tag which sets the title displayed on the browser's title bar.
  • BODY section (<BODY>...</BODY>): Contains all the visible content of the webpage., The <HTML> tag tells the browser to begin interpreting HTML commands; </HTML> tells it to stop., Any tag used after </HTML> will not be interpreted.

Important: Whitespace inside a tag within the body appears as written. Whitespace outside a tag within the body is treated as null by the browser and will not appear on the webpage.

5. Saving an HTML Document, Click File --> Save., Give the file a name with extension .html or .htm (e.g., basic.htm or firstHTMLDocument.html)., To modify: open the web page and click View --> Source, or open with Notepad.

6. Container Tags vs Empty Tags

Type Description Example
Container Tag Has both start and end tags; content goes between them <body>This is content</body>
Empty Tag Stand-alone; has a start tag but no end tag <BR> (line break), <HR> (horizontal rule)

Comment Tag (Empty Tag), Ignored by the browser; used to increase readability of source code., Syntax: <!-- This is a comment -->

7. The <BODY> Tag and Its Attributes

Attribute Description
BGCOLOR Sets the background colour of the webpage
BACKGROUND Sets a background image (takes image address as value)
TEXT Specifies the colour of text in the document
LINK Defines the colour of unvisited links
ALINK Defines the colour of active links
VLINK Defines the colour of visited links

Code/Syntax Examples

Basic HTML Structure

<HTML>
  <HEAD>
    <TITLE>My First Web Page</TITLE>
  </HEAD>
  <BODY>
    Welcome to my web page!
  </BODY>
</HTML>

Heading Tags (H1 to H6)

Heading tags display headings on the web page. H1 is the largest, H6 is the smallest.

<H1>This text is in largest font i.e. H1 font</H1>
<H2>This text is in larger font i.e. H2 font</H2>
<H3>This text is in medium large font i.e. H3 font</H3>
<H4>This text is in medium small font i.e. H4 font</H4>
<H5>This text is in smaller font i.e. H5 font</H5>
<H6>This text is in smallest font i.e. H6 font</H6>

The <FONT> Tag

Attribute Description Example
FACE Sets the font family <font face="Book Antiqua">Text</font>
SIZE Sets the size (range -7 to +7) <font size=+5>Big text</font>
COLOR Sets the text colour <font color="#ff0000">Red text</font> 
<font face="Book Antiqua">This is in Antiqua typeface</font>
<font color="#ff0000">Red</font>
<font color="#00ff00">Green</font>
<font color="#0000ff">Blue</font>
<font size=+5>This text is 5 points big</font>
<font size=-3>This text is 3 points smaller than regular text</font>

Nested Font Tags

<font size=+3>N<font color=red>e</font><font color=blue>s</font><font color=green>t</font></font>

Output: "Nest" with each letter in a different colour.

Paragraph Tag <P>

  • Container tag (closing </P> is optional)., Attribute: align (values: left, right, center).
<FONT SIZE=+4>
  <P ALIGN="CENTER">This paragraph is centered.</P>
</FONT>

The <CENTER> Tag

Places content in the center of the page.

<center>
  <font size=+2>
    The text will be center aligned because center tag is used.
    <br>
    The size of the text will be 2 points greater than the normal font size.
    <br>
    <hr>
    <br>
    <p>With the P tag, we can begin a paragraph.</p>
  </font>
</center>

Bold, Italics, and Underline

Tag Purpose
<B>...</B> Bold text
<I>...</I> Italic text
<U>...</U> Underlined text 
<H1><I>Heading Tag H1 is used with the Italics Tag</I></H1>
<B><I>Both the boldface and italics tags are used as nested tags</I></B>

Line Break and Horizontal Rule (Empty Tags)

<BR>    <!-- Inserts a line break -->
<HR>    <!-- Inserts a horizontal rule -->

Comment Tag

<!-- This is a comment and will not be displayed -->

Tag Reference Table

Tag Type Description
<HTML>...</HTML> Container Defines the HTML document
<HEAD>...</HEAD> Container Defines the header section (not visible on page)
<TITLE>...</TITLE> Container Sets the title on the browser's title bar
<BODY>...</BODY> Container Defines the visible content of the page
<H1> to <H6> Container Heading tags (H1 largest, H6 smallest)
<FONT>...</FONT> Container Sets font face, size, and colour
<P>...</P> Container Defines a paragraph (closing tag optional)
<CENTER>...</CENTER> Container Centers content
<B>...</B> Container Bold text
<I>...</I> Container Italic text
<U>...</U> Container Underlined text
<BR> Empty Line break
<HR> Empty Horizontal rule
<!-- ... --> Empty Comment (ignored by browser)

Important Definitions

Term Definition
HTML Hypertext Markup Language, special text used by browsers to represent data
Tag A special word enclosed in angle brackets that tells the browser to perform an action
Attribute A characteristic/feature of a tag, used inside the tag with a value
Element Combination of start tag + content + end tag
Container Tag A tag with both opening and closing tags
Empty Tag A stand-alone tag with only an opening tag (no closing tag)
Nesting Placing one set of tags inside another set of tags
SGML Standard Generalised Markup Language, the parent language from which HTML evolved
W3C World Wide Web Consortium, organization that sets HTML standards

Key Points

  1. HTML is not case-sensitive, <HTML> and <html> are treated the same.
  2. HTML documents are divided into two sections: HEAD (title) and BODY (visible content).
  3. Container tags have both opening and closing tags; empty tags have only opening tags.
  4. <BR> inserts a line break; <HR> inserts a horizontal rule, both are empty tags.
  5. Heading tags range from <H1> (largest) to <H6> (smallest).
  6. The <FONT> tag has three attributes: FACE, SIZE, and COLOR.
  7. Font tags can be nested to apply different formatting to different parts of text.
  8. The <P> tag creates a paragraph; its align attribute can be set to left, right, or center.
  9. <B>, <I>, and <U> tags change text to bold, italic, and underlined respectively.
  10. Whitespace outside tags in the body is ignored by the browser.
  11. HTML files must be saved with .html or .htm extension.
  12. Comments (<!-- ... -->) are ignored by the browser and improve code readability.

Practice Questions

  1. Name the tag used for: inserting a section break, bold text, italic text, changing font size, right-aligned paragraph.
  2. Correct errors in given HTML code (common errors: missing closing tags, wrong nesting order, misspelled attribute values).
  3. What is the font tag? Name the various attributes of the font tag.
  4. Difference between <BR> and <HR> tags.
  5. Differentiate between LINK, ALINK, and VLINK.
  6. Explain the heading tag with a suitable example.
  7. Difference between container tag and empty tag.
  8. Write down the basic structure of an HTML document.
  9. How do you create a comment tag?
  10. Name and explain any two attributes of the body tag.

Lab Activities, Create an HTML document to print your name 5 times in 5 different fonts., Display the school name in bold and italic., Create a document with three paragraphs with different alignments., Create a document containing different heading tags.

Test Your Knowledge

Take a quick quiz on this chapter

Start Quiz →

Prefer watching over reading?

Subscribe for free.

Subscribe on YouTube