CBSE CS

cbse cs logo

Home

Menu

Introduction to HTML

What is HTML ?

 

HTML is a markup language, which is used to define the layout and attribute of a World Wide Web (WWW) document as well as to create links between web pages. It is a subset of SGML (Standard Generalised Markup Language) and a high-level markup language. 
It was developed by Tim Berners Lee in 1990. HTML provides some basic tags which are required for HTML code:

HTML is a document-layout and Hyper link specification language i.e. a language used to design the layout of a document with Hyperlink.
HTML tells the Web browser how to display the contents of a Hyper Text document including images and other supported media.

HTML is:

  • Web page layout language.
  • Hyper Link specification languages.

HTML is Not:

  • Word Processing tool.
  • Programming language. 

How to create a Web Page

 

To create and save an HTML document, you can follow these steps:

  1. Open a text editor such as Notepad, Sublime Text, or Visual Studio Code.
  2. Create a new file by selecting File > New or by using the keyboard shortcut Ctrl + N (Windows) or Command + N (Mac).
  3. Type in your HTML code in the text editor.
  4. Save the file by selecting File > Save or by using the keyboard shortcut Ctrl + S (Windows) or Command + S (Mac).
  5. Choose a location to save the file, and give it a name that ends with the extension .html (e.g., index.html).
  6. Click Save to save the file.

Here’s an example of a simple HTML document:

<!DOCTYPE html>
<html>
     <head>
          <title> My First HTML Document  </title>
   
</head>
 <body>
        <h1>Welcome to my website</h1>
      
<p>This is my first HTML document.</p>
 </body>
</html>

Once you have saved the file with the .html extension, you can open it in a web browser to view the HTML document.

 
 
 

Elements of HTML document

(Tag and Attribute )

 

HTML is made up of elements called Tags and Attributes, which specifies the format of the documents.

TAGS:

A Tag is a coded HTML command that indicates how parts of web page should be displayed.
Tags are not case sensitive and contained within Angle Bracket <> i.e. <HTML> and <html> are same.
Most of the Tags are used in pair i.e. begin and end of the Tag. End Tag are begins with / character.
e.g. <Head> ………. </Head>

Attribute

An Attribute is a special word inside a Tag, which specifies additional information to Tags such as colour, alignment etc.
Most of the Attributes are followed by a Value (number or words).
e.g. <BODY BGColor = “RED”>

Container and Empty Tag

 

There are two types of Tags are used in HTML.

Container Tag

These HTML Tag written in pair i.e. starting <..> well as ending </…> . as

Ex.  <title> .. </title>

Empty Tag

These Tags require just a starting tag and not ending tag.

Ex. <br>, <hr> etc

Tag vs Attribute

 

Every HTML Tag consist of a tag name, sometimes followed by an optional list of Attributes, all closed in Angel Bracket < >.

An Attribute’s value, if any is given after the equal (=) sign in quotes after attribute name.

Ex. <A href = “http://www.google.com”>

Quotes may be omitted if there is a single value or word (without space).

Ex. <BODY bgcolor=RED>,  <HR WIDTH = 30%>

Structure of HTML Document

 

Every HTML page is structured as follows-

<HTML>

<HEAD>

<TITLE>

……………..

</TITLE>

</HEAD>

<BODY>

……………….

</BODY>

</HTML>


<HTML> Identifies that the document is an HTML document.
<HEAD> Contains information about document including its title, scripts used, style definition and other descriptions.
<TITLE> Contains title which appears on browser’ title bar.
<BODY> Contains many other tags and attributes, which specifies what to be displayed on Browser

How to write HTML page?

 

The easiest way to create and view the stylish HTML page is to use of HTML editor software like MS Front Page, Macromedia Dream Viewer etc.

But we create a web page in any Text editor utility like Notepad.
The following steps may be followed to create a web page using Windows Note Pad utility.

  • Open Note pad (Program Accessories Notepad) Type HTML code Save the file (File Save) along with .htm or .html extension.
  • Close Note pad and View Page using any Web Browser like edge or chrome

Commonly used Container Tags

 

<HTML> ….. </HTML>

This Tag marks the begin and end of HTML document. It may contains <Head> and <Body> tag inside.

It represents the root of an HTML document, so it acts as a container for all other HTML elements. It informs the browser that it is dealing with an HTML document.
Commonly used Attributes are

Attributes                  Value                      Description

DIR                            LTR RTL                (Direction of the Text)

                                                                     It specifies the direction of text in the

                                                                     document either Left-to-right (LTR) or

                                                                      Rightto-left (RTL)

Lang                          En, Fr etc.               (Language) It specifies the Language used in the

                                                                     document e.g. English (en), French (fr),

                                                                      Italian (it) , Hindi (hi) etc.

Example:

<HTML Lang=EN DIR = LTR>

<HEAD> ….. </HEAD> Tag

 

It represents the root of an HTML document, so it acts as a container for all other HTML elements. It informs the browser that it is dealing with an HTML document.

This Tag defines the document header. It contains information like title, script and style etc.

 

 

<TITLE> ….. </TITLE> Tag


This Tag contains the title and identifies its content in a global the Title bar of the
Ex. <Title> My context. Title is displayed Browser. First Page </Title

 

 

<BODY> ….. </BODY> Tag

  • This tag defines the document’s body.
  • It is used to set the basic page characteristics.
  • It contains all the necessary contents of a HTML document, such as text, hyperlinks, images, tables, lists etc.
  • The content of your web page is placed in between the opening <BODY> and closing </BODY> tags.
  • This is the largest Tag which defines the content of the document.
    It may contains text, images, lists, tables and hyperlinks etc.

Here is an example of the <body> tag with some of these attributes:

Attributes – Description
  1. bgcolor – sets the background color of the web page.
  2. text – sets the color of the text on the web page.
  3. link – sets the color of unvisited links on the web page.
  4. vlink – sets the color of visited links on the web page.
  5. alink – sets the color of links when they are clicked.
  6. background – sets a background image for the web page.
  7. LEFTMARGIN  –  Specifies the area left from the edge of page.
  8. TOPMARGIN  – Specifies the area left from the top of page.
  9. onload – specifies a script to run when the web page is loaded.
  10. onunload – specifies a script to run when the user leaves the web page.

 

 

Note: 

● background attribute specifies a background image for a document. HTML supports various graphics format such as .gif, .jpg etc.
● text attribute specifies the color of the text in a document.
● bgcolor attribute specifies the background color of a document.
● link attribute specifies the color of an unvisited link in a document. The default color of link attribute is blue (#0000FF).
● alink attribute specifies the color of an active link in a document (a link get activated when it is clicked). The default color of an alink attribute is red (#FF0000).
● vlink attribute specifies the color of a visited link in a document. The default color of vlink attribute is purple (#800080).
● topmargin property sets a topmargin (distance between the top of the document and the top of the browser window) of your body element.
● leftmargin property sets a left hand margin (distance between the left side of the document and the left edge of the browser window) of your body element.

 

Example:

<Body BGCOLOR= “Red” TEXT=“#ffffff” LINK= “Yellow”>
<Body Topmargin =60 Leftmargin=40>
<body bgcolor=”#ffffff” text=”#000000″ link=”#0000ff” vlink=”#800080″ alink=”#ff0000″ background=”bgimage.jpg” onload=”myFunction()” onunload=”myOtherFunction()”>

<H1> ….. </H1> Heading Tag

HTML specifies six levels of headings, numbered from 1 to 6. Headings are typically displayed in larger fonts than normal body text.

  • <H1> is the largest and
  • <H6> is smallest size.
  • multiple headings are used,
  • it should continuous i.e. You can’t use <H4> after <H1> without using <H2> and <H3>.

HTML provides six different heading tags, which are used to create headings or titles for different sections of a web page. The six heading tags are:

  1. <h1> – used for the main heading or title of a web page. It is the largest and most important heading tag.
  2. <h2> – used for subheadings that are slightly smaller than the main heading.
  3. <h3> – used for subheadings that are smaller than <h2>.
  4. <h4> – used for subheadings that are smaller than <h3>.
  5. <h5> – used for subheadings that are smaller than <h4>.
  6. <h6> – used for subheadings that are the smallest and least important of the six heading tags.

Here’s an example of how the different heading tags can be used on a web page:

Attributes    :    Align               

Value           : LEFT    RIGHT    CENTER

Description   : (Alignment of the Heading Text) It specifies the alignment of text i.e. Left/ Right/ Center.

Example:

<H1> cbsecs.in  is a educational website </H1>
<H2> Regional Office – Jaipur Region </H2>

<P> ….. </P> Paragraph Tag

The <p> tag in HTML stands for “paragraph”, and it is used to define a block of text that forms a paragraph. It is a container element that allows you to group one or more sentences or paragraphs of text together within a web page.

Here’s an example of how the <p> tag can be used to create a paragraph of text:


The Paragraph Tag specifies the paragraph of the text. 

● align attribute specifies the alignment of the text as heading. By default, alignment is left.

Example:

<P> This is a single line paragraph </P>

<p>This is a paragraph of text. It can contain one or more sentences that form a cohesive unit of meaning. The text within the paragraph can be formatted using CSS to change the font, size, color, or other properties.</p>

 

<FONT> Tag

This tag specifies the font face, font size and font color of the text. This tag is generally used for changing the appearance of a short segment of text. It can be set for a character, sentence or entire document.

This tag provides various attributes, which are as follows:

● size   attribute specifies the size of the text inside a <FONT> tag. The range of accepted values goes from 1 (the smallest) to 7 (the largest).
● face   attribute specifies the font name or type face of the text inside a <FONT> tag.
● color   attribute specifies the color of the text inside a <FONT> tag..

Examples:

here’s an example of how to use the <font> tag to change the font color, size, and face of a block of text:

<font color="red" size="4" face="Arial">This text is red, size 4, and in Arial font.</font>

 

In this example, the <font> tag is used to apply three different styles to the text within the tag:

  • color="red" sets the font color to red.
  • size="4" sets the font size to 4 (equivalent to “large”).
  • face="Arial" sets the font face to Arial.

 

Here are some multiple-choice questions (MCQs) on the <font> tag in HTML:

What is the purpose of the <font> tag in HTML?

  1. a. To define a block of text b. To add images to a web page c. To change the font color, size, or face of text d. To create links to other web pages

  2. Which of the following attributes can be used with the <font> tag to change the color of text? a. size b. face c. color d. bold

  3. Is the <font> tag considered to be outdated in modern HTML? a. Yes b. No

  4. Which of the following is an equivalent way to apply styles to text in HTML? a. Using the <span> tag and inline CSS b. Using the <div> tag and inline CSS c. Using the <font> tag and inline CSS d. Using the <a> tag and inline CSS

  5. How can you change the font size of text using the <font> tag? a. By using the size attribute with a value from 1 to 7 b. By using the font-size property in CSS c. By using the face attribute with a font size value d. By using the color attribute with a font size value

 

 

<BASEFONT>

Tag This tag specifies a default font color, font size or font family for all the text in a document that follows it, which is only supported by Internet Explorer web browser.

Following are the attributes of <BASEFONT> tag:

● size   attribute specifies the size of the text inside a <FONT> tag. The range of accepted values goes from 1 (the smallest) to 7 (the largest).
● face   attribute specifies the font name or type face of the text inside a <FONT> tag.
● color   attribute specifies the color of the text inside a <FONT> tag.

 

 

 

 

<CENTER> Tag

This tag is used to centralise a segment of text to be displayed on browser’s window.

With the <CENTER> tag, closing tag </CENTER> is always used.

 

 

 

 

Comment <!- -… – -> Tag

This tag is used to insert comments in the source code of the web page. Comments are not displayed in the browser’s window.

All the text inserted inside this  tag (<!- – …- – >) will be ignored by the browser that made invisible for the user.

 

 

Line Break <BR> Tag

This tag is used to insert a line break which means the text/image following the tag will be moved to the next line when displayed in the browser.

 

 

Horizontal Rule <HR> Tag

To create a horizontal line on your web page, you have to use the empty tag <HR>. This horizontal line can be used to divide information into sections. 
Following are the attributes of <HR> tag:
● size attribute specifies the height of the rule in pixels. Its default value depends directly on the browser. Generally, the default size of a rule is 3 pixels.

● noshade is boolean attribute. When this attribute is present, the rule is drawn with a solid black line as a 2D effect instead of the default 3D effect, i.e. without shading.

● align attribute specifies the alignment of a horizontal line. 

● width attribute specifies the width of a horizontal line in pixels or percent. Its default value is 100%.

● color attribute specifies the color of the horizontal line.

 

 

Style Tags

There are three types of style tags are as follows:
● Bold <B> Tag This tag specifies the text into bold text. It is a container element. This tag is used for text formatting.
● Italic <I> Tag This tag is used to make the text in italic form. It is also a container element. This is also used for text formatting.
● Underline <U> Tag This tag is used to underline the text. It is also a container element.

 

 

HTML Lists

HTML supports several elements for making lists. They can be divided into two types of lists, i.e. Glossary lists and Regular lists. Glossary lists are denoted by the element <DK>, while Regular lists are denoted by the elements <UL>, <OL>, <MENU> and <DIR>.
Types of Lists
There are various types of list as follows:

(i) Unordered List <UL>

This list (also known as unnumbered list) is an indented list with a bullet symbol in front of each list item.
An unordered list starts with the <UL> tag. Each list item starts with the <LI> tag.

Attribute of <UL> List tag is:
● type attribute is used to change the bulleted symbol in a list. The attribute may have a value of circle, disc or square.

(ii) Ordered List <OL>

This list starts with the <OL> tag. Each list item starts with the <LI> tag. The list items are marked with numbers. By default, the numbering will be 1, 2, 3 … . You can also adjust the numbering using type attribute.

Attributes of <OL> tag is:
● type The numbering of an HTML list can be changed to letters or roman numerals by the type attribute.
● start attribute is used to change the beginning value of an ordered list. Normally, the ordered list begins with 1.

(iii) Definition List

This is a list of items, with a description of each item. HTML definition lists (<DL>) are indented list without any bullet symbol or any number in front of each item.
Tags used in definition lists are as follows:
● <DL> Opening tag that defines the start of the list.
● <DT> List item that defines the definition term.
● <DD> Definition of the list item.
● </DL> Closing tag that defines the end of the list.

 

 

The <IMG> tag

Inserting an Image in a Web Page The <IMG> tag is used to insert an image in a web page. It is very important to know that images are not technical part of the web page file, they are separate files which are inserted into the web page, when it is viewed by a browser.
Syntax
<IMG src = “image URL” [various attributes]>

Attributes of <IMG> Tag

  • src                   Write the image file name with path. No path is required if image is in same folder.

  • width            Specifies the width of the image.

  • height           Specifies the height of the image.
  • Align             Specifies the Alignment of the image as Left, Right, Top, Middle and Bottom (default).
  • border          Specified the thickness of border. 0 for no border.
  • alt                  Given text gets displayed if specified image could not be loaded.
  • Hspace         Amount of horizontal space left & right of image.
  • Vspace         Amount of Vertical space lop & bottom of image.
 

Superscript in HTML

● <SUP> Tag The text which is elevated slightly above the baseline to appear above the surrounding text is known as superscript.
e.g. In a (a+b)2 , the superscript is 2. In HTML, the  <SUP> and </SUP> tags turn the enclosed text into superscript. In its simplest form, <SUP> tag may be specified as:
<SUP> aaa </SUP> where, aaa is the text, which is to be superscripted.

 

 

Subscript in HTML

● <SUB> Tag The text which is lowered slightly below the baseline to appear below the surrounding text is known as subscript.
e.g. In H2O  , 2 is the subscripted text. In HTML, the <SUB> and </SUB> tags turn the enclosed text into subscript. In its simplest form, <SUB> tag may be specified as:
<SUB> aaa </SUB> where, aaa is the text, which is to be subscripted.

 

 

Form

HTML forms are very effective because they can easily collect data from the Internet and utilise that information in other web page. Form starts with the <FORM> tag and ends with the </FORM> tag.
We can use the following tags in the <FORM> tag:

 <INPUT> Tag It defines text entry fields, check boxes, radio buttons or push buttons. It is an empty element specified by <INPUT> tag. The <INPUT> tag defines an object on
the form which can receive user input. 

● Textbox provides a single line text input field where the user can enter text.

● Password provides a single line text input field where the user can enter password. A password field shows one dot for each character input by the user.

● Checkbox provides a checkbox on the form. With checkboxes, we can give the users a list of items to choose from. The user can choose more than one items from the list.

● Radio button provides a radio button on the form. Only one radio button of a group can be selected at one time. When a form is submitted, selected radio button’s value
(specified by the value attribute) is submitted to the destination.

 

 

<SELECT> Tag Use the <SELECT> container tag to create dropdown menus and scrolled lists. Between <SELECT> and </SELECT>, you can only have <OPTION> tag and their text, which define the items in the list.

List box is a graphical control element that allows the user to select one or more items from a list contained. The <SELECT> tag is used to create a drop-down list. The <OPTION> tag inside the <SELECT> tag define the available options in the list.

 

 

<TEXTAREA> Tag Use the <TEXTAREA> container tag to create multiline, scrollable,text entry boxes. Whatever is between the <TEXTAREA> and </TEXTAREA> tags will
be the initial contents of the entry box, so put them right next to each other, if you do not want initial contents.

 Combo box in HTML is used to display a drop-down list of some options from which one can be selected. <SELECT> tag is supported in all the web browsers.
<OPTION> tag is used inside the <SELECT> tag that displays the options in the list.

Click the button to see more MCQ

more MCQ
error: Content is protected !!