Introduction
HTML is a language for website designing as HTML code provides complete flexibility for designing a web page. HTML stands for Hypertext Markup Language where each word has its own significance as explained
• The Hyper is opposite of the word limits, which signifies that the user can view World Wide Web (WWW) pages by moving in any direction.
• Text is anything written in English or alphanumeric character.
•Mark-up means after writing, you can markup what you have written as special indicator of various types in special tags.
• Language signifies that HTML is a language. However, like traditional programming languages HTML does not have concept and use of variables or constants HTML is tabbed as a scripting language.
Hypertext Markup Language
Many languages such as Hypertext Markup Language (HTML), Extensible Markup Language (XML), Active Server Pages (ASP) and FrontPage are used for designing websites HTML code includes two types of text.
• Content: Content is the information to be displayed on the screen in the form of text, pictures, audio and video.
• Markup: Markup is the information inserted in the HTML script to control the display. HTML file includes both control information (tags or elements) and content (data), which can together describe the appearance, and content of web page. Thus, HTML is a set of instructions given to a web browser to describe the structure of a web page.
History of HTML (Hypertext Markup Language)
First initial release of HTML came in 1993, i.e., 26 years ago. Within a short span of time, HTML gained popularity in the corporate world. Various versions of HTML were developed to suit the requirements of the web designers.
• HTML 1.0: This was the first version of HTML that included specifications for creating hypertext links with various small tags.
.•HTML 2.0: This version was the standard approved by the Internet Engineering Task Force (IETF). Its specified features helped the users to display inline images and interactive forms.
• HTML 3.0: This version contained several new tags that were created by browser vendors.
•HTML 3.2: This was the approved version of HTML 3.0 in which several tags for tables and applets were incorporated, while maintaining compatibility with older versions.
•HTML 4.0: This version was controlled by World Wide Web Consortium(W3C). It had few new tags to handle multiple languages.
•HTML 4.01: This version focused on separating presentation styling information from the actual content by making use of style sheets.
•XHTML 1.0: This version was an entirely new branch of HTML that incorporated the features of XML.
HTML is not a case sensitive language. The primary author of HTML is Tim Berners-Lee
• HTML 5.0: This is the latest version of HTML which was released on February 4, 2014.
Creating, Saving and Viewing HTML Document
Creating the HTML Document
Follow these steps to create the HTML document.
1. Click on the Start button.
2. Select Windows Accessories option from the menu.
3. Click on the Notepad option to open the ‘Notepad’ editor.
4. A Notepad window will appear.
5. Type the HTML code as shown.
Saving the HTML Document
A document is saved so that it can be used in future as and when required.
Follow these steps to save the document.
1. Click on the File menu.
2. Select the Save As option and click on it.
3.A Save As dialog box will appear.
4. Select the location where you want to save the file.
5. Type the file name in the File name box with an extension ‘html.
6. Click on the Save button.
Viewing the HTML Document
A document can be viewed using a web browser. Here, we will make use of Google Chrome as the web browser.
Follow these steps to view the HTML document using Google Chrome
1. Double-click on the web browser (such as Google Chrome) present on the desktop.
2.In the ‘Address Bar’ of Google Chrome, type ’File://E:’ and press the Enter key. In this case ,it is E: drive , where the HTML file is present.
3.The directories and files on the particular drive will be displayed in the ‘Chrome’ window. Now select the directory that contains the HTML file and double-click on it.
4.Click on the HTML file when you find it in the list .
5.The file will be displayed in the ‘Chrome’ window.
More to Learn
You can also view the HTML file in the web browser by double-clicking on the html file “My First Page.htm” and result of the web page will be displayed in the web browser.
HTML Document Structure
A specific structure needs to be followed while writing a program in HTML.
All HTML documents must have the following elements.
• HTML Element
• HEAD Element
•TITLE Element
• BODY Element
<HTML>
<HEAD>
<TITLE>
Document Title
</TITLE>
</HEAD>
<BODY>
All the tags, attributes and information in the document are mentioned here.
</BODY>
</HTML>
HTML Element
The <HTML tag is a container element that identifies the document as HTML document. This tag indicates that the content of a file is in HTML This element is not visible when displayed in the browser. but provides a hint to the browser that the document is the HTML document.
HEAD Element
The <HEAD> tag contains information about the document, indicating its title, scripts used, style definitions and document descriptions. The <HEAD> element contains general information about a document or a web page, also called meta-information (means information about something).
TITLE Element
The <TITLE> tag contains the document title. This title is displayed on the topmost bar of the browser. The TITLE element is used within the <HEAD> tag.
BODY Element
The <BODY> tag encloses all the tags, attributes and information that you want the browser to display It forms the body of the HTML page.
Attributes of a BODY Tag
Attributes provide additional information about an element. They are always specified with the start tag. Attributes are usually written as pair in the form of name=”value”
You can add background colour or an image to your web page. You can also change the colour of text and hyperlinks. All these features can be added to your web page using various attributes with the <BODY> tag. Let’s learn about these attributes.
The <BODY> tag contains the following attributes.
Text: This attribute changes the default text colour of your web page. You can set this to any colour you would like to use by specifying its colour name or Hex code. The default text colour for a web page is black.
Syntax: <BODY text = “colour”>
Example: <BODY text = “red”>
In case, if you wish to use Hex codes instead of colour name, then the same example can be rewritten in the following form.
<BODY text=” “#FF0000”>
Bgcolor
This attribute adds background colour to your web page to make it appear more attractive. To add the background colour, you need to include the bgcolor attribute to the <BODY> tag Sixteen different colours that can be used with bgcolor attribute are black, blue, green, red, grey, navy, olive, purple, silver, teal, lime, fuchsia, white, aqua, yellow and maroon.
Syntax: <BODY bgcolor=”colour name”>
Example: <BODY bgcolor=”blue”>
Background
This attribute adds a background image to your web page. If you use background attribute with bgcolor attribute, then the background image will acquire the place of background colour. In case, you don’t make use of a background image, the browser will use your specified background colour or its default background colour.
Syntax: <BODY background=”image.gif”>
Example: <BODY background=”http://www.freepik.com/free-photos-vectors/background”>
Link
This attribute changes the colour of all the non-visited links present in your web page. You can set this to any colour you would like to use by specifying the colour name or Hex code. The default colour setting for a non-visited link is usually blue.
Syntax: <BODY link = “colour name”> Example: <BODY link=”red”>
Alink
This attribute changes the colour of an active link present in your web page. An active link is a link that has been clicked by a user’s mouse. You can set this to any colour you would like to use
Syntax: <BODY alink = “colour name>
Example: <BODY alink = “green”>
Vlink
This attribute changes the colour of a visited link present in your web page. You can set this to any colour you would like to use by specifying the colour name or Hex code. The default colour setting for a visited link is usually violet.
Syntax: <BODY vlink = “colour name”>
Example: <BODY vlink = “yellow”>
Leftmargin
This attribute specifies the left margin of your web page. The left margin refers to the empty space to the left of the web page. The value for the margin is defined in pixels.
Syntax: <BODY leftmargin=”value”>
Example: <BODY leftmargin=”50″>
Topmargin
This attribute sets the top margin of your web page. The top margin refers to the empty space at the top of the web page.
Syntax: <BODY topmargin=”value”>
Example: <BODY topmargin=”80″>
Tags in HTML
In HTML, the instructions or commands in the form of text character are called tags or markups. Tags instruct a browser to retrieve and display the information or graphics on a web page. They are used to markup HTML elements. They are surrounded by two characters'<‘(less than) and> (greater than), which are called angular brackets. HTML tags normally come in pairs like <HTML> and </HTML>. The first tag of a pair is called start tag and the second tag of a pair is called end tag. The text between the start tag and the end tag is the element content. Tags can have attributes which provide additional information about the HTML elements on your web page.
There are various HTML elements that can be used to construct a web page. The HTML tag comprises of a left angular bracket or a less than symbol ‘<‘ followed by the name of the tag, and right angular bracket or a greater than symbol”>.
Types of HTML elements
HTML elements are of two types- empty elements and container elements.
Empty Elements
The elements that have only the starting tag (i.e., ON tag), and no end tag (i.e. OFF tag) are called empty elements.There are various tags that comes under the empty elements
BR Tag
The break line (BR) tag is used to insert a line break in the HTML document tag is useful for writing addresses and poems.
Syntax <BR>
HR Tag
The horizontal rule (HR) tag is used to insert horizontal lines with the specified thickness. The <HR > tag defines a break in the HTML document and separates content from the HTML document.
Syntax: <HR>
The <HR> tag contains attributes like
Size: This attribute indicates thickness of the lines in pixels. Default thickness of a line is 2 pixels
Syntax <HR size=”value”>
Example: <HR size=”3″>
Width: This attribute defines the horizontal width of the line. It is measured in pixels or can also be given in percentage of the page width
Syntax <HR width=”value”>
Example: <HR width=”5″>
Color. This attribute changes the colour of the horizontal line of your HTML document.
Syntax <HR color=”value”>
Example: <HR color = “purple”>
Noshade: This attribute displays a solid black line with no shading.
Syntax <HR noshade>
Example: <HR noshade>
Align. This attribute places the horizontal line to the left, centre or right.
Syntax: <HR align=”left/right/centre”>
Example: <HR align=”left”>
BASEFONT Tag
The <BASEFONT> tag is used only once in the whole HTML document. It is used to change the font size, colour or face of the document.
Syntax <BASEFONT>
There are various attributes of BASEFONT like
Size: This attribute changes the size of the entire text of the HTML document. The default value of size attribute is 3, and the valid value ranges from 1 to 7,
Syntax <BASEFONT size=”value”>
Example: <BASEFONT size = “7”>
Color. This attribute changes the colour of the text of the entire document. Colour can be set either by using one of the Hex code or colour names.
Syntax: <BASEFONT color=”value”>
Example: <BASEFONT color=”blue”>
Face: This attribute changes the typeface or font of the HTML document.
Syntax: <BASEFONT face=”value”>
Example: <BASEFONT face=”Arial”>
Container elements
The element that has both the tags, i.e., the starting tag and the ending tag is known as container. So, the container elements include both ON tag (starting tag) and OFF tag (ending tag). The OFF tag is the same as the ON tag except for the’/’ after ‘<’.
Different tags that come under container element like
B Tag
The text enclosed within the <B> and </B> tag is displayed in bold typeface.
Syntax: <B> Type any text here</B>
Example <B> ANNA HAZARE </B>
The above statement will display the text ‘ANNA HAZARE’ in bold typeface.
I Tag
The text enclosed within <I> and the </> tag is displayed in an italic typeface.
Syntax <I> Type any text here</I>
Example <I> Jan Lokpal </I>
The above statement will display the text ‘Jan Lokpal’ in italic typeface.
UTag
The text enclosed within the <U> and the </U> tag is displayed with an underline. The blank spaces between the words are also underlined.
Syntax :<U> Type any text here </U> Example :<U> India AgainstCorruption </U>
The above statement will display the text “India Against Corruption’ with an underline.
In HTML, style indicates the specific type of appearance for the text. Text styles are processed in the same manner by all the web browsers. The commonly used tags for text styles are <B>, <I> and <U>.
P Tag
A web browser ignores all the blank spaces or carriage returns typed in the text editor (such as Notepad) But whenever a browser sees the paragraph tag, it inserts a blank line and starts a new paragraph. You can also display the text with all blank lines and tabs on typing the code. In HTML, you can do such formatting of text using <P> tag. The <P> tag is the HTML tag for inserting a paragraph break at the given place in the text. The default alignment of paragraph is left aligned.
Syntax <P> Paragraph content is written here. </P>
Heading Tag
Heading tag breaks up large area of text to a logical hierarchy. There are six heading levels in HTML- H1 to H6. Here, <H1> is the largest of all headings and <H6> is the lowest among all the headings. Thus, with <H1> tag, your text will of the largest size, and with <H6> tag, it will be of the smallest size.
Inserting Comments in an HTML Program
Comments help you to understand and modify the code. You can add comments to the HTML program using <!- – > tag. The <!- > tag displays the information that is not to be displayed on the web page. Any information written between <!- and -> tags will be treated as a comment and will not be considered for processing.
Syntax: <l-Type any text here ->
Example: <1-Information not to be displayed on the web page ->
Lists
Lists are one of the ways to provide information in a structured and easy to read format. They help the users to easily spot and get access to important information Using HTML, you can arrange items in in several ways. The three most common ways to arrange items in lists are –
•Bulleted or unordered list
• Numbered or ordered list
• Definition list
Unordered List
A list of items that are marked with bullets is known as unordered list. An unordered list is a list in which the order of the list items does not matter Unordered list should be used, when rearranging the order of the list items would not create confusion or change the meaning of the information on the list. The list starts with the <UL> tag and each item in the list starts with the <LI> tag
Syntax <UL>
<LI> </LI>
Ordered Lists
A list that is marked with numbers is known as ordered list. It is used for list of items for which the order matters. The list starts with the <OL> tag and each item in the list starts with the <LI> tag
Syntax:
<OL>
<LI> </LI>
</OL>
Definition List
In definition list, the entries are listed like a dictionary or an Encyclopaedia. The definition list is an ideal way to present a glossary, list of terms, or other value lists. The <DL> element represents a description list. The <DT> element encloses a list of group of terms and <DD> elements.
Nested List
Ordered list and unordered list can have different levels, which can be created by nesting a list within a list. Ordered list can be nested in an unordered list and vice versa. Each level list is indented appropriately by the web browser, A list within a list is called nested list. The verification of the list for proper termination, and nesting order must be done correctly.
HTML in brief
• HTML is a set of instructions given to a web browser to describe the structure of a web page. The full form of HTML is Hypertext Markup Language.
• All HTML documents must have the following elements
<HTML>…. </HTML>
<HEAD>… </HEAD>
<TITLE>…</TITLE>
<BODY>… </BODY>
• In HTML, the instructions or commands in form of text character are called tags or markups.
•HTML elements are of two types-container elements and empty elements.
• The elements that have only the starting tag (i.e., ON tag), and no end tag (i.e., OFF tag), are called empty elements.
• The tags that comes under the empty elements are break line tag, horizontal line tag and base font tag.
•The element that has both the tags, i.e., the starting tag as well as the ending tag is known as container element
• The tags that comes under the container elements are B tag, I tag. U tag, P tag, heading tag. CENTER tag. FONT tag, SUB tag and SUP tag.
• Lists are one of the ways to provide information in a structured and easy to read format.
• A list of items that are marked with bullets is known as unordered list. The list starts with <UL> tag.
• A list that is marked with numbers is called ordered list. The list starts with <OL> tag
• The definition list is an ideal way to present a glossary, list of items. The list starts with <DL> tag.
• Ordered list and unordered list can have different levels, which can be created by nesting a list within a list. A list within a list is called nested list.
Functions of tags in HTML
HTML An ideal software for website designing HTML Element: A container element that identifies the document as HTML document.
HEAD Element: An element that contains information about the document, indicating its title, scripts used, style definitions and document descriptions.
TITLE Element: A container element having the document’s title.
BODY Element: A container element that encloses all the tags, attributes and information.
BODY Tag: A tag that encloses all the tags, attributes and information.
BR Tag: A tag used to insert a line break in the HTML document .
HR Tag: A tag that inserts horizontal lines with the specified thickness.
BASEFONT Tag: A tag used only once in the whole HTML document, changes the font size, colour or face of the document.
BTag: A tag displays content in bold typeface
I Tag: A tag displays content in an italic typeface
U Tag: A tag displays text with an underline
P Tag: A tag used to inserts a blank line and starts a new paragraph
Heading Tag A tag used to displays text in different level headings.
CENTER Tag: A tag used to align the content between the start and end of the block.
FONT Tag A tag used to add style, size and colour to the text .
SUB Tag: A tag used to place text slightly below the line of the regular text .
SUP Tag: A tag used to place text slightly above the line of the regular text.