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.
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.
Attributes Value Description
Background Image file Defines the background image to be displayed.
Smaller image is tiled to cover the whole page.
Bgcolor Color Specifies the background color of the page.
Text Color Specifies the color of the text.
Link Color Specifies the color of the Hyper link.
VLink Color Specifies the color of the visited Hyper link.
ALink Color Specifies the color of the Active Hyper link.
LEFTMARGIN value Specifies the area left from the edge of page.
TOPMARGIN value Specifies the area left from the top of 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>
<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>.
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 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>
Other Tags
The following tags are frequently used within a paragraph.
Tags Description
<B> ….</B> Specifies Bold Text
<I> …. </I> Specifies Italics Text.
<U> ….</U> Specifies Underline Text.
<TT> … </TT> Specifies Type writer text (fixed –width font)
<Sub>…. </Sub> Specifies the Subscript like 2 in H2O
<Sup> …. </Sup> Specifies the Superscript like 2 in X2
<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:
<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.
Heading Tags
In HTML, heading tags are used to display the text as a heading. It can also be used to give section headings. There are six levels of headings, ranging from <H1>…</H1> to <H6>…</H6>.
Attribute of heading tags is:
● align attribute specifies the alignment of the text as heading. By default, alignment is left.
Paragraph <P>
Tag This tag is used to mark a block of text as a paragraph. It is used to insert a line break with extra space in the beginning. This is a container tag.
Attribute of <P> tag is:
● align attribute specifies the alignment of the text within a paragraph. By default, alignment is left.
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
s in same folder.
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.