WEB TECHNOLOGIES
UNIT-I
Introduction to HTML:-
HTML means Hypertext Markup Language. In 1960 Ted Nelson introduced
Hypertext. HTML is a scripting language which is used to create web pages. If you are
thinking of creating your own web pages, you need to know at least basic HTML. These
HTML documents are plain text files, user can create these documents using text editor like
Notepad or Edit.
HTML is a hypertext Language because it supports font styled text, pictures, graphics
and animations and also it provides hyper links that used to browse the Internet easily. Text
becomes hypertext with the addition of links that connects other hypertext documents.
Hypertext is a text augmented with links-pointers to other pieces of text, possible else where
in the same document (internal linking) or in another document (external linking).
Rules to write HTML Code:-
Every HTML document begins with start tag is <HTML> terminates with an ending
tag is </HTML>
HTML documents should be saved with the extension .html or .htm.
A tag is made up of left operator(<), a right operator(>) and a tag name between these
two operators.
If you forget to mention the right operator(>) or if you give any space between left
operator and tag name browser will not consider it as tag.
At the same time if browser not understands the tag name it just ignores it, browser
won‟t generate any errors.
HTML language is not case sensitive, hence user can write the code in either upper
case or lower case. No difference between <HTML> and <html>
Syntax of a tag:
<Tagname [parameters=value]>
Ex: HR is a tag name that displays a horizontal ruler line.
<HR> ------------------------------------------ (No parameters, no value)
<HR ALIGN=CENTER>------------------- (Tag with parameter and value for the parameter)
<HR WIDTH=”30%” SIZE=100 ALIGN=RIGHT> ------(Tag with more parameters with
their values)
Different types of Tags:
1. Singleton tags
2. Paired tags
Singleton tag does not require an ending tag. (Ex: <HR>
Paired tag required an ending tag, which is similar to opening tag except backslash before the
tag name (Ex: <HTML> is opening tag, then ending tag is </HTML>
Comments in HTML:
An HTML comment begins with “<!--“ and ends wit<h “-->”.There should not be
a space between angular bracket and exclamation mark.
Creating HTML Page:
The Following steps are needed to create a HTML page
Step 1: Open any text editor like Notepad, Edit, Word etc.
JAYAVARDHANARAO SAHUKARU Page 1 of 31
, WEB TECHNOLOGIES
Step 2: Use the file menu to create a new document (File New) and type the following code
<HTML>
<HEAD>
<TITLE>Example1 </TITLE>
<BODY>
Hello III IT ,this is your first web page.- Raju
</BODY>
</HTML>
Step 3: Go to the file menu and choose saveas option (File->saveas) and give the name of the
file as “example1.html” under root directory(C:)( or any valid path)
Step 4: After saving, an internet explorer icon will be displayed as shown below
Step 5: Double click to execute it. The output displayed following
Basic HTML tags
1. Body tag:-
Body tag contain some attributes such as bgcolor, background etc. bgcolor is used for
background color, which takes background color name or hexadecimal number and #FFFFFF
and background attribute will take the path of the image which you can place as the
background image in the browser.
<body bgcolor=”#F2F3F4” background= “c:\amer\imag1.gif”>
2. Paragraph tag:-
Most text is part of a paragraph of information. Each paragraph is aligned to the left, right or
center of the page by using an attribute called as align.
<p align=”left” | “right” | “center”>
3. Heading tag:-
HTML is having six levels of heading that are commonly used. The largest heading tag is
JAYAVARDHANARAO SAHUKARU Page 2 of 31
, WEB TECHNOLOGIES
<h1>. The different levels of heading tag besides <h1> are <h2>,<h3>, <h4>, <h5> and
<h6>. These heading tags also contain attribute called as align.
<h1 align=”left” | “right” | “center”> ........ <h2>
4. hr tag:-
This tag places a horizontal line across the system. These lines are used to break the page.
This tag also contains attribute i.e., width which draws the horizontal line with the screen size
of the browser. This tag does not require an end tag.
<hr width=”50%”>.
5. base font:-
This specify format for the basic text but not the headings.
<basefont size=”10”>
6. font tag:-
This sets font size, color and relative values for a particular text.
<font size=”10” color=”#f1f2f3”>
7. bold tag:-
This tag is used for implement bold effect on the text
<b> ......... </b>
8. Italic tag:-
This implements italic effects on the text.
<i>… .... </i>
9. strong tag:-
This tag is used to always emphasized the text
<strong>............ </strong>
10. tt tag:-
This tag is used to give typewriting effect on the text
<tt> ......... </tt>
11. sub and sup tag:-
These tags are used for subscript and superscript effects on the text.
<sub> ............. </sub>
<sup> ............. </sup>
12. Break tag:-
This tag is used to the break the line and start from the next line.
<br>
13. & < >   ":-
JAYAVARDHANARAO SAHUKARU Page 3 of 31
, WEB TECHNOLOGIES
These are character escape sequence which are required if you want to display characters that
HTML uses as control sequences.
Example: < can be represented as <.
14. Anchor tag:-
This tag is used to link two HTML pages, this is represented by <a>
<a href=” path of the file”> some text </a>
href is an attribute which is used for giving the path of a file which you want to link.
Example 1: HTML code to implement common tags.
mypage.html
<html>
<head> <! -- This page implements common html tags -->
<title> My Home page </title>
</head>
<body >
<h1 align="center"> ST ANN‟S COLLEGE OF ENGINEERING & TECHNOLOGY</h1>
<h2 align="center"> Chirala</h2>
<basefont size=4>
<p> This college runs under the <tt>management</tt> of <font size=5> <b><i>"
SACET" & </i></b></font><br>
it is affiliated to <strong> JNTUK</strong>
<hr size=5 width=80%>
<h3> <u>< Some common tags ></u> </h3><br>
</body>
</html>
Text Styles or Cosmetic tags:- HTML provides a numerous range of tags for formatting the
text. If you want to format the text with different styles, just you include these tags one by
one before text.
<B>………</B> Bold Text
<U>……....</U> Underline Text
<I>………..</I> Displays as Italics
<EM>………</EM> For Emphasis (New Standard for Italics)
<STRONG>………</STRONG> Strong or Bold text (New Standard for Bold)
<S>……….</S> or <DEL>…….</DEL> Strikes the text
<SAMP>………</SAMP> Code sample text
<VAR>………..</VAR> Small fonts, fixed width
<ADDRESS>……..</ADDRESS> Like address model (Looks like italics)
<PRE>……..</PRE> Considers spaces, new lines etc. As it is prints the information
Scrolling Text Tag:-
<marquee> ............... </marquee> Displays scrolling text in a marquee style.
Marquee tag attributes:-
a) align: sets the alignment of the text relative to the marquee. Set to top(default), middle
or bottom.
JAYAVARDHANARAO SAHUKARU Page 4 of 31
UNIT-I
Introduction to HTML:-
HTML means Hypertext Markup Language. In 1960 Ted Nelson introduced
Hypertext. HTML is a scripting language which is used to create web pages. If you are
thinking of creating your own web pages, you need to know at least basic HTML. These
HTML documents are plain text files, user can create these documents using text editor like
Notepad or Edit.
HTML is a hypertext Language because it supports font styled text, pictures, graphics
and animations and also it provides hyper links that used to browse the Internet easily. Text
becomes hypertext with the addition of links that connects other hypertext documents.
Hypertext is a text augmented with links-pointers to other pieces of text, possible else where
in the same document (internal linking) or in another document (external linking).
Rules to write HTML Code:-
Every HTML document begins with start tag is <HTML> terminates with an ending
tag is </HTML>
HTML documents should be saved with the extension .html or .htm.
A tag is made up of left operator(<), a right operator(>) and a tag name between these
two operators.
If you forget to mention the right operator(>) or if you give any space between left
operator and tag name browser will not consider it as tag.
At the same time if browser not understands the tag name it just ignores it, browser
won‟t generate any errors.
HTML language is not case sensitive, hence user can write the code in either upper
case or lower case. No difference between <HTML> and <html>
Syntax of a tag:
<Tagname [parameters=value]>
Ex: HR is a tag name that displays a horizontal ruler line.
<HR> ------------------------------------------ (No parameters, no value)
<HR ALIGN=CENTER>------------------- (Tag with parameter and value for the parameter)
<HR WIDTH=”30%” SIZE=100 ALIGN=RIGHT> ------(Tag with more parameters with
their values)
Different types of Tags:
1. Singleton tags
2. Paired tags
Singleton tag does not require an ending tag. (Ex: <HR>
Paired tag required an ending tag, which is similar to opening tag except backslash before the
tag name (Ex: <HTML> is opening tag, then ending tag is </HTML>
Comments in HTML:
An HTML comment begins with “<!--“ and ends wit<h “-->”.There should not be
a space between angular bracket and exclamation mark.
Creating HTML Page:
The Following steps are needed to create a HTML page
Step 1: Open any text editor like Notepad, Edit, Word etc.
JAYAVARDHANARAO SAHUKARU Page 1 of 31
, WEB TECHNOLOGIES
Step 2: Use the file menu to create a new document (File New) and type the following code
<HTML>
<HEAD>
<TITLE>Example1 </TITLE>
<BODY>
Hello III IT ,this is your first web page.- Raju
</BODY>
</HTML>
Step 3: Go to the file menu and choose saveas option (File->saveas) and give the name of the
file as “example1.html” under root directory(C:)( or any valid path)
Step 4: After saving, an internet explorer icon will be displayed as shown below
Step 5: Double click to execute it. The output displayed following
Basic HTML tags
1. Body tag:-
Body tag contain some attributes such as bgcolor, background etc. bgcolor is used for
background color, which takes background color name or hexadecimal number and #FFFFFF
and background attribute will take the path of the image which you can place as the
background image in the browser.
<body bgcolor=”#F2F3F4” background= “c:\amer\imag1.gif”>
2. Paragraph tag:-
Most text is part of a paragraph of information. Each paragraph is aligned to the left, right or
center of the page by using an attribute called as align.
<p align=”left” | “right” | “center”>
3. Heading tag:-
HTML is having six levels of heading that are commonly used. The largest heading tag is
JAYAVARDHANARAO SAHUKARU Page 2 of 31
, WEB TECHNOLOGIES
<h1>. The different levels of heading tag besides <h1> are <h2>,<h3>, <h4>, <h5> and
<h6>. These heading tags also contain attribute called as align.
<h1 align=”left” | “right” | “center”> ........ <h2>
4. hr tag:-
This tag places a horizontal line across the system. These lines are used to break the page.
This tag also contains attribute i.e., width which draws the horizontal line with the screen size
of the browser. This tag does not require an end tag.
<hr width=”50%”>.
5. base font:-
This specify format for the basic text but not the headings.
<basefont size=”10”>
6. font tag:-
This sets font size, color and relative values for a particular text.
<font size=”10” color=”#f1f2f3”>
7. bold tag:-
This tag is used for implement bold effect on the text
<b> ......... </b>
8. Italic tag:-
This implements italic effects on the text.
<i>… .... </i>
9. strong tag:-
This tag is used to always emphasized the text
<strong>............ </strong>
10. tt tag:-
This tag is used to give typewriting effect on the text
<tt> ......... </tt>
11. sub and sup tag:-
These tags are used for subscript and superscript effects on the text.
<sub> ............. </sub>
<sup> ............. </sup>
12. Break tag:-
This tag is used to the break the line and start from the next line.
<br>
13. & < >   ":-
JAYAVARDHANARAO SAHUKARU Page 3 of 31
, WEB TECHNOLOGIES
These are character escape sequence which are required if you want to display characters that
HTML uses as control sequences.
Example: < can be represented as <.
14. Anchor tag:-
This tag is used to link two HTML pages, this is represented by <a>
<a href=” path of the file”> some text </a>
href is an attribute which is used for giving the path of a file which you want to link.
Example 1: HTML code to implement common tags.
mypage.html
<html>
<head> <! -- This page implements common html tags -->
<title> My Home page </title>
</head>
<body >
<h1 align="center"> ST ANN‟S COLLEGE OF ENGINEERING & TECHNOLOGY</h1>
<h2 align="center"> Chirala</h2>
<basefont size=4>
<p> This college runs under the <tt>management</tt> of <font size=5> <b><i>"
SACET" & </i></b></font><br>
it is affiliated to <strong> JNTUK</strong>
<hr size=5 width=80%>
<h3> <u>< Some common tags ></u> </h3><br>
</body>
</html>
Text Styles or Cosmetic tags:- HTML provides a numerous range of tags for formatting the
text. If you want to format the text with different styles, just you include these tags one by
one before text.
<B>………</B> Bold Text
<U>……....</U> Underline Text
<I>………..</I> Displays as Italics
<EM>………</EM> For Emphasis (New Standard for Italics)
<STRONG>………</STRONG> Strong or Bold text (New Standard for Bold)
<S>……….</S> or <DEL>…….</DEL> Strikes the text
<SAMP>………</SAMP> Code sample text
<VAR>………..</VAR> Small fonts, fixed width
<ADDRESS>……..</ADDRESS> Like address model (Looks like italics)
<PRE>……..</PRE> Considers spaces, new lines etc. As it is prints the information
Scrolling Text Tag:-
<marquee> ............... </marquee> Displays scrolling text in a marquee style.
Marquee tag attributes:-
a) align: sets the alignment of the text relative to the marquee. Set to top(default), middle
or bottom.
JAYAVARDHANARAO SAHUKARU Page 4 of 31
