Introduction to HTML
HTML refers to Hypertext Markup Language. There is a special kind of text used byweb browsers that represents the data. This data may be in the form of letters, images,audios or videos. This special text is given emphasis, which some people may say, itis marked up through a link to the other documents. Thus a page formed using thespecial text is called a document or a webpage. A webpage can get opened in a webbrowser. The web browser accesses the web page from the web server (a place whichholds most of the webpages). A web server may be placed anywhere in the world. Thismeans that a web browser can access a webserver only if it connects to internet (networkof networks across globe). The HTML was founded by the group called “World WideWeb Consortium” in 1990.
1. Overview of HTML
1.1. Who Invented HTML
HTML was invented in November 1990 by a scientist called Tim Berneses-Lee. The purpose
was to make it easier for scientists at different university to gain access to each other’s
research documents.
1.2 A Brief history
HTML is not an invention but an improved version of Standard Generalised Markup
Language(SGML).SGML is a Meta Language (general -- purpose language)used for defining
and creating descriptive markup language.
1.3 What tools do you need?
To get started with html documents, only two basic things are required
• A text editor/HTML editor
• A Web Browser
1.4 Tags and Attributes
The World Wide Web Consortium has given a set of standards while building the HTML
language. The W3C uses some special words to define an action.
A tag is a special word enclosed in angle-brackets < >. A tag tells the browser to perform
an action as asked by the special word. The special word may be written either in lower
case or upper case. The browser will respond to both the cases equally.
The HTML tags are normally comes in pair of start and end tag(an opening tag and closing
tag). While the start tag is written in the beginning of the element as <SpecialWord>, the
end tag is written at the completion of the element as </SpecialWord>.
For example: When you want to begin with writing source code using HTML, you write
the start tag as <HTML> and when you have completely written in the HTML document
and want to end it, you write the end tag as </HTML> i.e. insert a forward slash followed
by HTML in angled brackets.
The characteristics or the features of a tag are defined by an attribute. An attribute is used
inside a tag. An attribute always takes a value to help the browser perform the specific
task in a particular direction. There may be more than one attribute used inside a tag.
An element is a combination of a start tag, the text(we also use text to insert graphics)
and the end tag.
For example:
<body> element begins with start tag, followed by text and ends with end tag.</body>
In simple words, one can equate an element to a block, a tag to an instruction and an
attribute to an extension to a instruction.
Container of Tags: One set of tags may contain another set of tags. This is called nesting
of tags. The second block of tags is always contained in first block as shown below:
<TAG1> <TAG2>...............</TAG2> </TAG1>
<TAG1> and </TAG1> is the first block of tags. <TAG2> and </TAG2> is the second
block of tags.
2. Structure of HTML document
The basic structure of HTML document is shown below:
<HTML>
<HEAD>
<TITLE> The Structure of HTML Document </
TITLE>
</HEAD>
First section
<BODY>
The Body of the HTML Document
</BODY>
</HTML>
Second section
The basic structure of the HTML document is divided into two sections namely, the head
and the body. The browser enters the first section after executing the start tag of HTML
(telling the browser to begin interpreting the HTML commands) and start tag of HEAD.
The first section helps in changing the heading on the title bar of the HTML document
(the webpage). The starting of the heading is shown after the start tag of TITLE and the
end is shown by </TITLE>. The end tag of HEAD i.e. </HEAD> tells the browser that
the end of first section has come.
The second section begins with the start tag of BODY. The data on the webpage is displayed
through the tags used in this section. The end tag of BODY i.e. </BODY> tells the browser
that no more data is to be inserted on the webpage and the end of the web document
has come. After the completion of this section, the slash HTML or the end tag of HTML
tells the browser to stop looking for HTML commands. This implies that any tag used
after the end tag of HTML will not be interpreted by the browser and so no action will
be performed.
Please Note: All the sentences containing any number of whitespaces written inside a tag
within the body element will appear as written in the HTML code. Any whitespace inserted
outside the tag within the body element will be interpreted as null, void or amounting to
nothing by the browser. That is, such whitespaces outside the tag will not appear anywhere
on the webpage.
3. Saving the HTML document
When you have finished writing the HTML code in the text editor, click on File menu and
select Save option. This opens a window, which asks you to save the file in a folder and give a name and an extension to the file. The extension in this file will be .html or .htm.
(e.g. basic.htm or firstHTMLDocument.html). This will turn the file into a webpage.
In order to modify the webpage, either open the web page and click on View→source or
open the webpage with notepad.
4. Container and Empty Tags
Before we proceed further to formatting tags, it is necessary for you to understand the
difference between the container and the empty tag. A container tag has both the start
and the end tag. The text or the graphic is inserted inside the beginning and end tag of
the container tag. For example: <body>This is a container tag</body>. The <BODY> tag
here is a container tag which has both the beginning and the ending tag and the text in
between both the tags.
The empty tag is a stand-alone tag. This implies that such a tag has beginning but no
ending tag. For example: The <BR> tag is used for adding one line break. Such a tag does
not need an end so as to tell the browser, that end of line break has come because there is
no need. Such a tag is called empty tag. HR is another empty tag. This tag is used to insert
a horizontal rule on the web page. Comment tag is also an empty tag. This tag is ignored
by the browser. This tag is used to increase the readability of the HTML source code. With
this tag, you can insert a description about a command. This is written as : <!--, followed
by description or remark on a command, followed by -->. For example: <!-- Hello -->
<BODY>...</BODY>
The second section of the webpage begins with the <BODY> tag. This defines the visible
section of the document. It has a number of attributes which controls the overall appearance
of the document. The attributes that are used with this tag are listed below in the table:
Attribute of the <body> tag Description
BGCOLOR The background of the webpage is displayed with a color thathas been taken as value by this attribute.
BACKGROUND The background of the webpage is displayed with an image whose address is taken as value by this attribute.
TEXT Specifies the color of the text in the document.
LINK Defines the color of the link in the document
ALINK Defines the color of the active link in the document
VLINK Defines the color of the visited link in the document
4.1 Formatting Elements
In a web page, the text is an important component especially when there is no picture
or graphic. It becomes therefore necessary to change the style of text at every paragraph,
so that they become presentable. There are a number of tags that help you to format the
text.
4.1.1 <Heading Tags>
Heading tag is used to display the heading or the main topic on the web page. This tag
varies from H1 to H6. This is a container tag. The heading tag <H1> shows the heading
with the largest font size. As you increase the number in the heading tag, the font size
goes down as shown in the example given below:
<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 above code produces the following output:
File Edit View Favorites Tools Help
This text is in largest font i.e. H1 font
This text is in largest font i.e. H1 font
This text is in medium large font i.e. H3 font
This text is in medium large font i.e. H3 font
This text is in smaller font i.e. H5 font
This text is in medium large font i.e. H6 font
We can see from the output that the size of the font keeps decreasing as one increases the
number in the heading tag.
Click Here To Get Codes For HTML
For More: https://en.wikipedia.org/wiki/HTML
Posts
0 Comments