HTML Classes

HTML
(Hyper Text Markup Language)
HTML is a language for describing web pages.
 A markup language is a set of markup tags

 HTML uses markup tags to describe web pages
HTML Tags
 HTML tags are keywords surrounded by angle brackets like <html>

 HTML tags normally come in pairs like <b> (start tag) and </b> (end tag)
 HTML tags are not case sensitive: <P> means the same as <p>.
Editing HTML Files:

 Notepad
 Dreamweaver
 FrontPage
 HTML Bulder
HTML File Extension:

To save an HTML file, we can use either the .htm or the .html extension. With new software it is perfectly safe to use
.html.
Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements).
Ex: <b><i>welcome</i></b>
Empty HTML Elements

HTML elements without content are called empty elements. Empty elements can be closed in the start tag.
<br> is an empty element without a closing tag (it defines a line break).
In XHTML, XML, and future versions of HTML, all elements must be closed. Ex: <br/>
HTML Attributes
 Attributes provide additional information about the element

 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"
HTML Comments: Comments are ignored by the browser and are not displayed .
Ex: <! This is a comment >
Basic HTML Tags: <html>, <title>, <meta> and <body>
<html>
This tag is used to indicate that this is a HTML document. Most HTML documents should start and end with this tag.
<head>
This tag is used to indicate the header section of the HTML document, which typically includes the <title> and <meta> tags, and is
not displayed in the main window of the browser.
<title>
The title is what is displayed on the upper left corner of your browser when you view a web page..
<title> tag indicate what the page content is.
<meta>
The <meta> tag information is not directly displayed when the page is rendered on the browser. Rather, this is
used for the author of the HTML page to record information related to this page. Two common attributes are
name and content.
<body>
The <body> tag includes the HTML body of the document.
The <body> tag may contain several attributes are listed below:
Attribute Description
alink The color of the links.

Specifies the color of an active link in a document
background Specifies a background image for a document
bgcolor Specifies the background color of a document
link
Specifies the default color of unvisited links in a document
text Specifies the color of the text in a document
vlink Specifies the color of the visited links in a document
Ex: <body bgcolor="#ffffff" text="yellow">
<body background="background.jpg">
So, in general, all HTML documents have the following format:
<html>
<head>
<title>
Here is the title of the HTML document.
</title>
<meta name="Ganesh " content="Sample HTML " />
</meta>
</head>
<body bgcolor="ff00ff”>
Here is the body of the HTML document.
</body>
</html>
o/p>--------------------------
Here is the body of the HTML document.
Heading Styles
<html>
<body>
<h1 align=”center”>This is heading 1</h1>

<h2>This is heading 2</h2>
</body>
</html>
0/p>---------------------------------------------------
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
* <h1 style="text-align:center">This is heading 1</h1>
* <body style="background-color:yellow"> background
HTML Formatting Text Examples
<p> tag used for Paragraph.
<html>
<body>
<p><b>This text is bold </b></p>

<p><strong>This text is strong </strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
o/p>--------------------------------------------------
This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This is subscript and superscript

<pre>:Preformatted text (how to control line breaks and spaces)
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
o/p>--------------------------------
This is
preformatted text.
It preserves both spaces
and line breaks.
The pre tag is good for displaying computer code:
for i = 1 to 10
print i
next i
Different computer-output tags:-

Line Breaks: <br/> tag.
Horizontal rule: <hr/>
Attributes: align, width, size, color
<html>
<body>
<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<tt>Teletype text</tt>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>
<p>
<b>Note:</b> These tags are often used to display computer/programming code.
</p>
</body>
</html>
p/p>-----------------------------------------
Computer code
Keyboard input
Teletype text
Sample text
Computer variable
Note: These tags are often used to display computer/programming code.
<html>
<body>
<address>
Millennium Software Solutions<br>
Dwarakanagar<br>
Vizag<br>
INDIA
</address>
</body>
</html>
o/p>--------------------------------------------
Millennium Software Solutions
Dwarakanagar
Vizag
INDIA
Text Formatting Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text

<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
<u> Deprecated. Use styles instead
Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
Defines a short quotation
<q> The <q> tag is supported in all major browsers, except Internet Explorer.
<cite> Defines a citation
<dfn> Defines a definition term
Ex:
<html>
<body>
<abbr title="United Nations">UN</abbr>

<br />
<acronym title="World Wide Web">WWW</acronym>
<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or
abbreviation.</p>
</body>
</html>
o/p>-----------------------------------------------------------------------------
UN
WWW
The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or
abbreviation
<bdo> stand for bidirectional override.
The <bdo> tag allows you to specify the text direction and override the bidirectional algorithm.
<html>
<body>
<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
o/p>-----------------------------------------------------------
If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
Here is some Hebrew text
<html>
<body>
<em>Emphasized text</em><br />
<strong>Strong text</strong><br />
<dfn>Definition term</dfn><br />
<code>Computer code text</code><br />
<samp>Sample computer code text</samp><br />

<kbd>Keyboard text</kbd><br />
<var>Variable</var><br />
<cite>Citation</cite>
</body>
</html>
O/P>-----------------------------------------------
Emphasized text
Strong text
Definition term
Computer code text
Sample computer code text
Keyboard text
Variable
Citation
HTML List are of 3 Types
1) Ordered List
2) Unordered List
3) Definition List
1) Ordered List:- list with numbers( 1,2,3 (or) a,b,c,.. (or) A,B,C,.. (or) i,ii.iii,… (or) I,II,III,…)
<ol> tag (Order list)
<li> tag (List Item)
Example for Ordered List:
<body>
<ol >
<li> Java </li>
<li> ASP </li>
<li> PHP </li>
</ol>
</body>
Example for Ordered List with Start Number and/or Type attributes:
<body>
<ol start=10>
<li> Java </li>
<li> ASP </li>
<li> PHP </li>
</ol>
</body>
Example for Ordered List with type of Numbering

<html>
<head>
</head>
<body>
<ol Type="A">
<li> Java </li>
<li> ASP </li>
<li> PHP </li>
</ol>
</body>
</html>
Note : You can use a,i,I for the Type.
Unordered List with 3 types :

 Circle
 Square
 Disk
Example for Un-Ordered List with type of Bullet
<body>
<ul Type="circle">
<li> PHP </li>
<li> JAVA </li>
</ul>
</body>
Note : In Unordered list Default bullet is Disk. We can write OL in UL. We can write OL in OL. We can write UL
in OL. We can write UL in UL.
Example for Un-Ordered List within Ordered List
<html>
<head>
</head>
<body>
<ol>
<li> Databases </li>
<ul>
<li> Oracle </li>
<li> SQL Server </li>
</ul>
<li> Programming </li>

<li> Testing </li>
</ol>
</body>
</html>
Definition List
A definition list is not a list of single items. It is a list of items.
A definition list starts with a <dl> tag (definition list).
Each term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag (definition description).
Example using Definition List
<body bgcolor=violet>
<strong>
Drinks
</strong>
<hr color=brown>
<dl>
<dt> Pepsi</dt>
<dd>Cool Drink </dd>
<dd>Contains Alcohol </dd>
<dt> Boost </dt>
<dd>Health Drink</dd>
<dd>Contains Chocolate</dd>
</dl>
</body>
Images
<img src=”path of file”>
If both html file and image in the same folder then no need to give path
<img src=”path of file” alt=”This is an Image”>

If the Browser can not display Image with any reasons then Alternative text will display.
Example
<html>
<body>
<img src="sunset.jpg" alt="Sunset Image" border="10" width=250 height=300 align=right>
</body>
</html>
Setting the height adjusts width and vice-versa. Pick the Image from Different Folder In your Folder
Example
<html>
<body>
<img src="Images/roses.jpg" alt="Rose Flower" border="10">
</body>
</html>
Absolute Path : Path According to Drivers
Relative Path : Path According to Reference File
Example
Pick the Image from Different Folder which is out of your Folder
<html>
<body>
<img src="../roses.jpg" alt=" Rose Flower " border="10">
</body>
</html>
Links
Using anchor <a> tags we can establish the links form one page to another Page.
Syntax : <a href = " Path of HTML file"> text </a>
Example
red.html
<body bgcolor=red text=yellow>

<Hr/>
This is Red file
<hr/>
</body>
green.html
<body bgcolor=green text=blue>
<hr>
This is green file
<hr>
</body>
Color.html (main file)
<body bgcolor=yellow>
<hr>
<a href="red.html"> Red Page </a> <br>
<a href="green.html"> Green Page </a>
</body>
Target is an attribute of anchor Tag.
Target = "_blank” Opens the target Page in new page.
Target = "_self” Opens the target Page in same page. (It is Default ) .
Example
<html>
<head>
</head>
<body>
<a href="a.html" target="_blank"> Page A </a> <br>
<a href="b.html" target="_self"> Page B </a>
</body>
</html>
Note : Images can also be taken as Links

Example
<html>
<head>
</head>
<body>
<a href="b.html"> <img src="sunset.jpg" height=70 > </a>
</dody>
</html>
Links With in Same Page
Example
<body>
<a href="#c1" name="abc"> Chapter 1 </a> <br>
<a href="#c2" > Chapter 2 </a> <br>
<a href="#c3" > Chapter 3 </a> <br>
MSS Homepage <br>
<a name="c1"> welcome to Chapter 1 </a> <br>
<a href="#abc"> TOP </a>
</body>
Example
Using links Directly we can go to Required Page and Chapter.
<html>
<head>
</head>
<body>
<a href="ex1.html#c3"> Link to chapter3 </a>
</body>
</html>
<font> TAG:-
EX:
<font color="#0000FF" face="Arial" size="5" > WELCOME </font>
Frames
Used to Open multiple html pages in a single browser window.
Frames should not be written in <body>
Example
<html>
<head>
</head>
<frameset rows="20%,50%,30%">
<frame src="a.html">
<frame src="b.html">
<frame src="c.html">
</frameset>
</html>
Example
<html>
<head>
</head>
<frameset rows="50%,50%">
<frame src="a.html" noresize="noresize">
<frameset cols="50%,50%">
<frame src="b.html">
<frame src="c.html">
</frameset>
</frameset>
</html>
Note : If the browser is not supporting frames then <noframes> will Execute.
<noframes>
<body>
<p> Upgrade your browser to see this information </p>
</body>
</noframes>
Target
<html>
<head>
</head>
<frameset cols="50%,50%">
<frame src="links.html">
<frame src="c.html" name="abc">
</frameset>
</html>
Links.html
<html>
<head>
</head>
<body>
<a href="a.html" target="abc"> Page A </a> <br>
<a href="b.html" target="abc"> Page B </a>
</body>
</html>
Inline Frame
We can design a frame in body with using inline frame.
Example
<html>
<head>
</head>
<body>
<p>This is a Paragraph</p>
<ol>
<li> Oracle </li>
<li> Informix </li>
</ol>
<iframe src="a.html" width=200 height=50> </iframe>
</body>
</html>
Designing Tables
Example
<html>
<head>
</head>
<body >
<table border=1>
<tr>
<td> cell1 </td>
<td> cell2 </td>
</tr>
<tr>
<td> cell3 </td>
<td> cell4 </td>
</tr>
</table>
</body>
</html>
Height and width are attributes of <table>
Example
<table border=1 height=400 width=400>
Table Heading : Table heading will display in bold and in center
<html>
<head>
</head>
<body >
<table border=1 >
<caption > Employee Table </caption>
<tr>
<th> Eno </th>

<th> Ename </th>
<th> Esal </th>
</tr>
<tr>
<td> 1 </td>
<td> Janardhan </td>
<td> 20000 </td>
</tr>
<tr>
<td> 2 </td>
<td> Madhu </td>
<td> 25000 </td>
</tr>
</table>
</body>
</html>
Other Table Tags
<thead> will display on Top

<tbody> will display in the Center
<tfoot> will display Last
Example
<html>
<head>
</head>
<body >
<table border=1 >

<tfoot>
<tr>
<td> 1 </td>
<td> Janardhan </td>
<td> 20000 </td>
</tr>
</tfoot>
<tr>
<td> 2 </td>
<td> Madhu </td>
<td> 25000 </td>
</tr>
<thead>
<tr>
<th> Eno </th>
<th> Ename </th>
<th> Esal </th>
</tr>
</thead>
<tbody>
<tr>
<td> 3 </td>
<td> Suresh </td>
<td> 3000 </td>
</tr>
</tbody>
</table>
</body>
</html>
Table Attributes
Bgcolor
Background
Cell padding ( Displacement between border & content)
Cell spacing ( Displacement between Individual cells)
Border
Height
Width
Align ( Control table Position Horizontally)
Valign ( Control table Position Vertically)
Examples
1) <table bgcolor=red >
2) <table background="sunset.jpg" >
If you give both bgcolor and background for a single table then high Priority is given for background
<table bgcolor=red background="sunset.jpg" >
<table border=10 >
<table border=10 cellpadding=50 >
<table border=10 cellspacing=50 >

<table border=10 align=right >
<table border=10 align=center >
Valign will not work in HTML so we have to write CSS coding instead of Valign
EX : <table border=10 style="position:absolute;top:200;left:150" >
Attributes of TD
Bgcolor
Background
Width
Height
Col span
Row span
Align ( left , right , center )
Valign ( Top , middle , bottom)
Example 1
<table border=10 >
<tr>
<td bgcolor=red> 1 </td>
<td background="sunset.jpg"> Siva </td>
<td height =200 width = 200> 20000 </td>
</tr>
<tr>
<td> 2 </td>
<td> Brahma </td>

<td> 25000 </td>
</tr>
</table>
For Height complete Row will be affected. For Width complete Column will be affected
Example 2
<table border=10>
<tr>
<td bgcolor=red> 1 </td>
<td background="sunset.jpg"> Vishnu </td>
<td height =200 width = 200> 20000 </td>
</tr>
<tr>
<td align=right height=100 width=100> 2 </td>
<td align=center width=100> Lakshmi </td>
<td valign=top width=100 > 25000 </td>
</tr>
</table>
Example 3
<table border=1 height=300 width=300 >
<tr>
<td> Cell1 </td>
<td colspan=2> Cell2 </td>
</tr>
<tr>
<td rowspan=2> Cell4 </td>

<td> Cell5 </td>
<td> Cell6 </td>
</tr>
<tr> <td colspan=2> Cell7 </td> </tr>
</table>
Table with in Table
<html>
<head>
</head>
<body >
<table border=1 height=300 width=300>
<tr>
<td> <table border=1>
<tr>
<td> cell5 </td>
<td> cell6 </td>
</tr>
<tr>
<td> cell7 </td>

<td> cell8 </td>
</tr>
</table>
</td>
<td> cell2 </td>
</tr>
<tr>
<td> cell3 </td>
<td> cell4 </td>
</tr>
</table>
</body>
</html>
Designing Forms
<html>
<body>
<form method=POST action=a.php>
Username : <input type=text name=user id=u value=Ram> <br>
Password : <input type=password name=pwd id=p > <br>
Age: <input type=text size=2 name=age id=a><br>
Sex: <input type=radio name=sex id=s1 value=M>Male

<input type=radio name=sex id=s2 value=F>Female<br>
Choose your Favourite Sport
<input type=checkbox name=interest id=v1 value=crick>Cricket
<input type=checkbox name=interest id=v2 value=tenis>Tennis
<br>
Select your Country
<select name=country>
<option value=ind> India </option>
<option value=uk> England </option>
<option value=us> USA </option>
<option value=aus> Australia </option>
</select>
<br>
Favourite Holiday Spot <br>
<select multiple size=3 name=hspot>
<option value=africa> America </option>
<option value=europe> Europe </option>
<option value=asia> Switzerland </option>
<option value=australia> Australia </option>
</select>
<br>
Complete Address <br>
<textarea name=addrs rows=5 cols=50></textarea> <br>
Resume : <input type=file name=resume id=res> <Br>
<input type=reset name=clear id=c value=Reset>
<input type=submit value="Continue">
<input type=button name=close id=s value=close>
</form>
</body>
</html>
Note : In text box we can give attribute maxlength to restrict the length of text. In a Text Box Maximum we can give 160 characters. In
List Box we can select multiple items with using attribute multiple. Every Object should have name , id ( names can be same but id s
must be unique). If you select radio buttons or check boxes or combo boxes or list boxes then the value will be returned, so value
attribute is recommended for these objects.
XHTML (XHTML stands for EXtensible HyperText Markup Language)
XHTML is almost identical to HTML 4.01
XHTML is a stricter and cleaner version of HTML
XHTML is HTML defined as an XML application
XHTML is a combination of HTML and XML (EXtensible Markup Language).
XHTML consists of all the elements in HTML 4.01, combined with the strict syntax of XML.
Why XHTML?
Many pages on the internet contain "bad" HTML.
The following HTML code will work just fine if you view it in a browser (even if it does NOT follow the HTML rules):
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
</body>
XML is a markup language where everything must be marked up correctly, which results in "well formed" documents. XML is designed
to describe data, and HTML is designed to display data. Some browsers run on computers, and some browsers run on mobile phones or
other small devices. mobile phones or other small devices do not have the resources or power to interpret a "bad" markup language.
Therefore by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future is XHTML.
Get Ready For XHTML. XHTML is not very different from the HTML 4.01 standard. So, bringing your code up to the 4.01 standard is a
good start. In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER skip closing tags (like </p>).
The most important differences between HTML and XHTML
 XHTML elements must be properly nested

 XHTML elements must always be closed
 XHTML elements must be in lowercase
 XHTML documents must have one root element
 XHTML Elements Must Be Properly Nested
In HTML, some elements can be improperly nested within each other, like this:
<b><i>This text is bold and italic</b></i>
In XHTML, all elements must be properly nested within each other, like this:
<b><i>This text is bold and italic</i></b>
Note: A common mistake with nested lists, is to forget that the inside list must be within <li> and </li> tags.
Invalid Method writing the script
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>
This is correct:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example. XHTML Elements must be Closed. Nonempty
elements must have a closing tag.
This is wrong
<p>This is a paragraph
<p>This is another paragraph
This is correct
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Empty Elements Must Also Be Closed. Empty elements must also be closed.
This is wrong
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
This is correct
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML Elements Must Be In Lower Case
Tag names and attributes must be in lower case.
This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
<body>
<p>This is a paragraph</p>
</body>
XHTML Documents Must Have One Root Element
All XHTML elements must be nested within the <html> root element. Child elements must be in pairs and correctly nested within their
parent element.
The basic document structure is:
<html>
<head> ... </head>
<body> ... </body>
</html>

HTML Classes

Uploaded by

HTML Classes

Uploaded by

HTML

(Hyper Text Markup Language)

HTML is a language for describing web pages.

 A markup language is a set of markup tags

 HTML tags are keywords surrounded by angle brackets like <html>

Editing HTML Files:

HTML File Extension:

Nested HTML Elements

Empty HTML Elements

 Attributes provide additional information about the element

Ex: <! This is a comment >

Basic HTML Tags: <html>, <title>, <meta> and <body>

<title> tag indicate what the page content is.

The <body> tag includes the HTML body of the document.

alink The color of the links.

background Specifies a background image for a document

bgcolor Specifies the background color of a document

vlink Specifies the color of the visited links in a document

Ex: <body bgcolor="#ffffff" text="yellow">

So, in general, all HTML documents have the following format:

<h1 align=”center”>This is heading 1</h1>

* <h1 style="text-align:center">This is heading 1</h1>

* <body style="background-color:yellow"> background

HTML Formatting Text Examples

<p> tag used for Paragraph.

<p><b>This text is bold </b></p>

This text is bold

This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This is subscript and superscript

<p>The pre tag is good for displaying computer code:</p>

The pre tag is good for displaying computer code:

Different computer-output tags:-

Horizontal rule: <hr/>

Attributes: align, width, size, color

Text Formatting Tags

<b> Defines bold text

<big> Defines big text

<em> Defines emphasized text

<i> Defines italic text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<s> Deprecated. Use <del> instead

<strike> Deprecated. Use <del> instead

<u> Deprecated. Use styles instead

Citations, Quotations, and Definition Tags

<abbr> Defines an abbreviation

<acronym> Defines an acronym

<address> Defines an address element

<bdo> Defines the text direction

<blockquote> Defines a long quotation

Defines a short quotation

<cite> Defines a citation

<dfn> Defines a definition term

<abbr title="United Nations">UN</abbr>

<bdo> stand for bidirectional override.

Here is some Hebrew text

<em>Emphasized text</em><br />

<strong>Strong text</strong><br />

<dfn>Definition term</dfn><br />

<code>Computer code text</code><br />

<samp>Sample computer code text</samp><br />

HTML List are of 3 Types

Example for Ordered List:

Example for Ordered List with type of Numbering

Note : You can use a,i,I for the Type.

Unordered List with 3 types :

Example for Un-Ordered List with type of Bullet

Example for Un-Ordered List within Ordered List

<li> Databases </li>