HTML Training by Thiru

What is HTML?
HTML, an acronym for HyperText Markup Language, is

a computer language for creating websites and web
applications.
Consisting mainly of a series of codes usually written in

a text file and then saved as html, code written in the
HTML language translates into a beautiful, well-
formatted text or a combination of text and media
when viewed through a browser.
HTML was first developed by Tim Berners-Lee in 1990.
1. HTML stands for Hyper Text Markup Language

2. HTML is not a programming language.
3. HTML is a Markup Language
4. Markup language consists of set of tags called
Markup Tags.
5. Markup tags are used to describe web page using
Markup Tags.
6. HTML is not case sensitive.
7. HTML contains predefined tags.
HTML Versions :
Version Year
HTML 1991
HTML+ 1993
HTML2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
Tools required to HTML:
 Text Editor Or HTML Editor

 Web Browser
If you will be creating web pages in HTML, you will

need an HTML editor. There are several benefits to
using an HTML editor.
It will also detect when you open a new tag and

automatically close it to avoid you having buggy code
and as a result reducing how much typing you have to
do.
Name of Text Editor or HTML Editor
CoffeeCup Free HTML Editor

Aptana Studio
NetBeans
Bluefish
Adobe Dreamweaver
HTML-KIT
Eclipse
Notepad++
SubLime Text
Name of Browser
Internet Explorer Google Chrome
UC Browser
Mozilla Firefox
Opera
Safari
SOME BASICS TAGS IN HTML:
<html> </html> The main tag
<head> </head> header tag
<body> </body> body tag

<b> </b> makes the font bold
<center> </center>aligns things in center
<br> break line tag
space tag
<p></p> define paragraph
<H1></H1> makes the font as a heading
<u> </u> underlines the font
<i> </i> makes the font italic
<strike> </strike> makes striked text or word
<font> </font> sets font color, size, type
<img> </img> used to add image
<a> </a> linking tag
<marquee></marquee> make text move
<ul> </ul> used to list things
<ol> </ol> used to list things
<ol="value"> Bullet styles
<dl> </dl> used to list things
<li> </li> used to list things
<table> </table> to define table
<tr> </tr> table row inside table
<th></th> table heading

<td> </td> table column inside row
<hr> horizontal line tag
<form> </form> define forms
<textarea> </textarea> shows text area
<input> </input> creates form types
<select> </select> used to create combo box
<audio> </audio>Embed audio in web page
<video> </video> Include video in web page
<frameset> </frameset> Frameset
<sub> </sub> Subscript
<sup></sup>superscript
<input type="image"> button as an image
<a href title="value">Create Tooltip
HTML Structure
CORRECT USE OF TAGS
An example of a correct sequence of tags is:
<tag1><tag2> statements </tag2></tag1>

Understanding elements
To markup your web pages, you will need to learn the

syntax of HTML. HTML syntax is very simple to follow.
It is very simple task to write HTML element. We have

pre-defined set of HTML elements and each element is
represented using the starting and ending tag.
Any thing we type inside the body tag will be displayed

in the browser page.
Program:
<html>
<head>
<title>This is Document Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<b>Text is bold</b>
</body>
</html>
Attrtibutes:
Sometimes in HTML tags are not enough to perform the

necessary action. We need some extra bits of
information of particular tag.
HTML attributes are used to provied the extra
information about the HTML tags.
1. HTML attributes provides extra bits of information

about HTML element.
2. HTML attributes are used to define characteristics of
HTML element
3. HTML attributes are placed inside the element’s
opening tag.
4. HTML element can have any number of HTML
attributes
5.
Some of HTML Attributes:
Alt Specifies an alternative text for an image
Specifies that an input element should be

disabled
disabled
Href Specifies the URL (web address) for a link
Id Specifies a unique id for an element
Specifies the URL (web address) for an

Src
image
Specifies an inline CSS style for an

Style
element
Specifies extra information about an

Title
element (displayed as a tool tip)
Specifies the value (text content) for an

value
input element.
Example:
<html>
<head>
<title> Attribute Example</title>
</head>
<body>
<p align="left">Left aligned</p>
<p align="center">Center aligned</p>
<p align="right">Right aligned</p>

</body>
</html>
Paragraph tag:
The paragraph tags are used to define a block of text

as a paragraph.
To define a paragraph, you use the opening and closing

paragraph set of tags.
<p>The contents of the paragraph.</p>
Paragraph Tag Attributes
id
class
style
Example:
<html>
<body>
<p>This is a paragraph 1</p>

</body>
</html>
Heading
1. If we want to make the some part of the text

appears to be under some heading then we can use
the heading tags in HTML.
2. HTML supports 6 types of headings.
3. These are the headings defined in HTML
– <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
Example:
<html>
<head>
<title>Heading </title>
<body>
<h1>Heading1</h1>
<h2> Heading2</h2>
<h3> Heading3</h3>
<h4> Heading4</h4>
<h5> Heading5</h5>
<h6> Heading6</h6>
</body>
</html>
Space:
This code will help you to give some big space between
words or character.
One (nbsp stands for "non-breaking space") is

equal to a single space.
Example:
<html>
<head>
<title>Breaking Space </title>
</head>
<body>
PROGRAMMING PULSE

TECHNOLOGY
</body></html>
Line Break: <br>
This is a tag which is used to break the line and move

to next line.
This tag does not require closing tag.
Example:
<html>
<head>
<title>Break Tag</title>
</head>
<body>
Address:
120, Middle Street,<br>Gandhipuram<br>Kovai-1.
</body>
</html>
Combining Things:
<html><head>
<title> My Page</title>
</head>
<body>
<center> <b> <u> <i>This is my first page </i>
</u> </b> </center>
</body>
</html>
Horizontal Rule: <hr>
This is special tag used to draw new horizontal line.
It doesn't require closing tags.
Example:
<html>
<head>
<title>HR </title></head>
<body>
Resume
<hr>
</body>
</html>
HTML - Font
The size, color, and face attributes can be used all at
once or individually, providing users with the ability to
create dynamic font styles for any HTML element.
Example:
<html>
<head>
<title>Font </title>
</head>
<body>
<p>
<font COLOR=”RED” size="20" face="Showcard

Gothic">WEB DEVELOPMENT</font>
</p>
</body>
</html>
Beautiful First Letter Style
Customize your fonts to achieve any desired look.

Example:
<html>
<head>
<title>Customize font</title></head>
<body>
<p><font size="7" face="Pristina"

color="maroon">H</font>industhan college
Engineering and Technology.</p>
</body>
</html>
HTML - Comments
Write notes or reminders to yourself inside your

actual HTML documents.
Comment Tags:

<a
href="file:///D:/PICTURES/Desktop%20BG/Download-
Angry-Birds-PC-Game-Free-and-Full.png" >My
Picture</a>
</body>
</html>
Lists:
Lists are used all the time on the web. Articles, website
navigation menus, and product features on e-
commerce websites all make frequent use of lists
Three types of Lists:
1.UnOrdered List
2.Ordered List
3.Definition List
1.UnOrdered List
Unordered Lists An unordered list is a list in which the

order of the list items does not matter.
The ul element opens and closes an unordered list.
Example:
<html>
<head>
<title>UNORDERED LIST</title>
</head>
<body bgcolor="orange">
<ul type="disc"> 
<li>PHP</li>
<li>HTML</li>
<li>JAVA</li>
<li>DOTNET</li>
<li>C</li>
<li>C++</li>
</ul>
</body>
</html>
HTML Unordered List Type Code:
<ul type="square">
<ul type="disc">
<ul type="circle">
Ordered Lists:
Tag to create a list of numbered items. The numbering
will be done automatically.
<!DOCTYPE html>
<html>
<head>
<title>ORDERED LIST</title>
</head>
<ol type="i" start="200">
<li>PHP</li>
<li>HTML</li>
<li>JAVA</li>
<li>DOTNET</li>
<li>C</li>
<li>C++</li>
</ol>
</body>
</html>
HTML Code:
<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">
DEFINITION LIST:
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor="yellow">
<dl>
<dt>NEWS</dt>
<dd>North East West South</dd>

<dt>PAPER</dt>
<dd>Past And Present Event Report</dd>
<dt>SMILE</dt>
<dd>Sweet Memories In Lip Expression</dd>
</dl>
</body>
</html>
BackGround Color
To set the background color in HTML, use the style

attribute. The style attribute specifies an inline style for
an element. The attribute is used with the HTML
<body> tag, with the CSS property background-color.
<html>
<head>
<title> My Page
</title>
</head>
<body bgcolor="green">
This is my first page
</body>
</html>
Color :
Direct color name Ex: "red"
RGB combination Ex: "rgb(255,0,0)"
Hex Code: Ex: "#ff00ff"
Background Image:
To add a background image on an HTML element, use

the background attribute or style attribute and the CSS
background-image property.
Example 1:
<html>
<head>
<title> My Page
</title>
</head>
<body
background="file:///D:/PICTURES/Desktop%20BG/Wall
paper-Desktop-80.jpg">
</body>
</html>
Example 2:
<html>
<head>
<title> My Page
</title>
</head>
<body>
<div style="background-image: url('baby.jpg');">
</body>
</html>
Example 3:
<html>
<head>
<title> My Page
</title>
<style>
div {
background-image: url('baby.jpg');
</style>
</head>
<body>
<h2>Background Image</h2>
<div>
You can specify background images<br>
</div>
</body>
</html>
IMAGE:
Images can improve the design and the appearance of

a web page. The label is used to insert images: <img>.
Syntax:
<IMG SRC = "URL" ALT = "ALTERNATIVE TEXT" >
Example:
<HTML>
<HEAD>
<TITLE>Image – Web Design</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">About Image Tag</H2><HR>
<H4><IMG
SRC="file:///D:/PICTURES/Desktop%20BG/34.jpg" ALT
= “IMAGE OF THIRU” WIDTH="800" HEIGHT="500"
HSPACE="25">Graduation day.</H4>
Sweet Memories<HR>
</BODY>
</HTML>
ATTRIBUTES USED WITH <IMG> TAG
 HEIGHT AND WIDTH

Syntax
<IMG SRC ="URL" HEIGHT= "PIXELS" WIDTH = "PIXELS">
 ALIGN
Syntax
<IMG SRC = "URL" ALIGN = "LEFT | RIGHT | TOP | MIDDLE |
BOTTOM">
 BORDER
Syntax
<lMG SRC = "URL” BORDER = "PIXELS”>
 VSPACE AND HSPACE
Syntax
<IMG SRC = "DRL" HSPACE="PIXELS" VSPACE="PIXELS">
Marquee Tag: <marquee> </marquee>
If you want your text to move with in the screen, use

this tag.
This tag is used to scroll text horizontally across the

screen.
It is mainly used to deliver a specific message to the

visitor or to scroll Ads on a page.
The tag used is "marquee"
Attributes used in <MARQUEE> tag
Attribute Possible values Function

al
Bgcolor Anv standard Specifies the
color name or background
hexadecimal color color of the
value marquee.
Direction Left, Right, Up, Specifies the

Down direction in
which the
marquee
contents
Scrolls
Height Any valid S
percentage pecifies the
or no. of vertical
pixels dimension of
the
marquee
Behavior Scroll, Slide, Scroll: Text

Alternate scrolls like a
stock ticker.
Slide: Text
slides into
view.
Alternate: Text
alternates
between
scrolling and
sliding.
Width Any valid Specifies the

percentage or no. left and right
of pixels margin of the
marquee
Loop Any positive Controls the

integer of number of
INFINITE appearance of
the marquee
Content
Scrollamount Number of pixels Specifies the
shift of
marquee text
Scrolldelay Number Specifies how
specifying the often the
delay in marquee text
milliseconds redraws
Example:
<!DOCTYPE html>
<html>
<head>
<title>Marquee</title>
</head>
<body>
Have a nice day
<br><br><br><br><br><br><br><br><br><br><
br>
<br>
<br>
<br>
<br>
<br>
<Marquee bgcolor="pink" direction="left"
behavior="alternate">
<h1>
<font color="light blue">
Today all colleges and schools will be holiday due rain

issues...
</font>
</h1>
</Marquee>
</body>
</html>
Attribute: direction
This sets the background color for marquee path.
It takes values LEFT or RIGHT or UP or DOWN
direction="left"
direction="right"
direction="up"
direction="down"
EXAMPLE:
<html>
<head>
<title>Marquee </title>
<body>
<marquee bgcolor=”orange” width=”100” height=”20”

direction=”right”> HAVE A NICE DAY </marquee>
</body>
</html>
Marquee Attributes:
behavior="scroll"
behavior="slide"
behavior="alternate"
Example:
<html>
<head>
<body>
<marquee width="100%" behavior="scroll"

bgcolor="pink">
Have a Nice day
</marquee>
</body>
</html>
Moving Image
Similarly image can be moved. Instead of text in

between marquee tags give an image. It will
scroll/move
Example:
<html>
<head>
<body>
<marquee width=100 height=20> <img

src="file:///D:/PICTURES/Desktop%20BG/aZuKy2T.jpg
"> </marquee>
</body>
</html>
Table
The table element allows you to arrange and present

data in rows and columns of cells.
<TABLE>
<TR>
<TH>
……………….
………………
</TH>
</TR>
<TABLE>
Example:
<HTML>
<HEAD>
<TITLE> TABLE TAGS</TITLE>
</HEAD>
<BODY>
<TABLE >
<TR>
<TH>LANGUAGES</TH>
<TH>AUTHORS</TH>
</TR>
<TR>
<TD>JAVA</TD>
<TD>JAMES GOSLING</TD>
</TR>
<TR>
<TD>PHP</TD>
<TD>RASMUS</TD>
</TR>
<TR>
<TD>HTML</TD>
<TD>TIM BERNERS LEE</TD>
</TR>
</TABLE>
</BODY>
</HTML>
SETTING TABLE BORDERS AND BORDER COLOR
Tables with borders are much easier to read and are

more attractive. You can specify a table border by using
"border = number" attribute in the opening table tag.
<HTML>
<HEAD>
<TITLE> TABLE TAGS</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”2” BORDERCOLOR=”RED”>
<TR>
<TH>LANGUAGES</TH>
<TH>AUTHORS</TH>
</TR>
<TR>
<TD>JAVA</TD>
<TD>JAMES GOSLING</TD>
</TR>
<TR>
<TD>PHP</TD>
<TD>RASMUS</TD>
</TR>
<TR>
<TD>HTML</TD>
<TD>TIM BERNERS LEE</TD>
</TR>
</TABLE>
</BODY>
</HTML>
TABLE BACKGROUND COLOR
<TABLE BGCOLOR=”YELLOW”>
<TR>
<TH>
……………….
………………
</TH>
</TR>
</TABLE>
TABLE SIZE
<TABLE WIDTH=”200” HEIGHT=”300”>

<TR>
<TH>
……………….
………………
</TH>
</TR>
</TABLE>
IMAGES WITHIN TABLES
<TABLE BORDER=5
BACKGROUND=”D:\PICTURES\THIRU_PIC.JPEG”
WIDTH = “100” HEIGHT = “200” ALIGN=”CENTER”>
...
...
</TABLE>
To include images within Cells:
Images can be included within header or data cells.
<TABLE>
...
...
<TD><IMG SRC=”D:\PHOTOS\NATURE.GIF”
HEIGHT=60 WIDTH=50>JAMES GOSLING</TD>
...
...
</TABLE>
SPANNING ROWS AND COLUMNS
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<center>
<table border="2" bordercolor="red">
<tr><th colspan="3" align="center"><font

color="green">Colleges</font></th></tr>
<tr>
<td>District</td>
<td>Colleges</td>
<td bgcolor="red">University</td>
</tr>
<tr>
<td>Salem</td>
<td>Sarada College</td>
<td bgcolor="red">Periyar</td>
</tr>
<tr>
<td>Tirunelveli</td>
<td>Govt College</td>
<td bgcolor="red">Alagappa University</td>
</tr>
<tr>
<td>Coimbatore</td>
<td>Krishnambal College</td>
<td bgcolor="red">Barathiyar
University</td>
</tr>
</table>
</center>
</body>
</html>
HTML ANCHOR TAG:

Anchors elements are used to link multiple HTML
documents.
If an anchor is used to turn text into a hyperlink, the

text is usually colored blue and underlined.
Syntax
<A href =" " > NAME</A>
Example:
<html>
<head>
<title>Link</title>
</head>
<body>
<a href="marquee.html" target="blank">
Output
</a>
</body>
</html>
HTML FRAMES:
A frame is an independent scrolling region or window, of

a web page.
A framed document divides a browser window into
multiple panes or smaller window frames.
Each frame may contain a different document.
Syntax:
<FRAMESET COLS = "Width1, Width2, " Rows =

“height1, height2,....">
...... Frame or Frameset definitions……….
</FRAMESET>
EXAMPLE:
mainframe.html
<!DOCTYPE html>
<html>
<frameset rows="20%,*,20%">
<frame src="marquee.html">
<frameset cols="30%,*,30%">
<frame src="ul.html">
<frame src=basic.html>
<frame src="font.html">
</frameset>
<frameset rows="20%">
<frame src="ol.html">
</frameset>
</frameset>
</html>
ol.html
<!DOCTYPE html>
<html>
<head>
<title>OL</title>
</head>
<body>
<OL start="1" type="A">
<li>Sona</li>
<li>AVS</li>
<li>KSR</li>
<li>Mahendra</li>
<li>Jairam</li>
</OL>
</body>
</html>
marquee.html
<!DOCTYPE html>
<html>
<head>
<title>Marquee</title>
</head>
<body>
Have a nice day
<br>
<Marquee bgcolor="pink" direction="left"

behavior="alternate">
<h1>
<font color="light blue">
Today all colleges and schools will be holiday due rain

issues...
</font>
</h1>
</Marquee>
</body>
</html>
ul.html
<!DOCTYPE html>
<html>
<head>
<title>UL</title>
</head>
<body>
<ul type="circle">
<li>Sona
<li>AVS
<li>KSR
<li>Mahendra
<li>Jairam
</ul>
</body>
</html>
basic.html
<html>
<head>
<title>Sandhiya</title>
</head>
<body>
Hindusthan Engineering College

<img src="C:\Users\Public\Pictures\Sample
Pictures\Koala.jpg" width="70"
height="70" align="center">
</body>
</html>
font.html
<!DOCTYPE html>
<html>
<head>
<title>Font</title>
</head>
<body>
<center>
<font size="8" face="Pristina"
color="green">H</font>industhan College of
Engineering and Technology<br>

<br>
Coimbatore
</center>
</body>
</html>
SEMANTICS TAGS IN HTML
HTML tags are classified in two types.
Semantic
Semantic elements have meaningful names which tells

about type of content. For example header, footer,
table, … etc
Semantic which make the code easier to write and

understand for the developer as well as instructs the
browser on how to treat them.
Non-Semantic
Tags like div, span fall under the Non- Semantic
categories as their names don’t tell anything about
what kind of content is present inside them.
Article Tag
It contains independent content which doesn't require

any other context.
Example: Blog Post, Newspaper Article etc.
<!DOCTYPE html>
<html>
<head>
<title>Article</title>
<style type="text/css">
article
display: block;
width: 300px;
border: 1px solid red;
padding: 10px;
margin: 10px;
text-align: justify;
}
</style>
</head>
<body>
<article>
<img src="../image/tcode.png" width="300"

height="250">
<h1>HTML5 ARTICLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur

adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut

aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in

voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur

sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit

anim id est laborum.</p>
</article>
</body>
</html>
Aside Tag
The <aside> tag is new in HTML5
The <aside> tag is used to describe the main object of

the web page in a shorter way like a highlighter
The <aside> tag contains mainly author

details, explanations of
definitions, related information, ads, etc
<aside> Vs <div>
Both tags have same behavior with different

meaning
<div>
It define or create division or section in the web page
<aside>
It does the same job by creating section or division but

it contains only the content that is related to the main
web page.
Syntax
<aside>
<h3>Contents...</h3>
<p>Contents...</p>
</aside>
Browser Supports
Google chrome 6.0 and above
Internet Explorer 9.0 and above
Firefox 4.0 and above
Opera 11.1 and above
Safari 5.0 and above
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Aside</title>
article
width: 55%;
padding: 15px;
float: left;
aside
{
width: 37%;
float: right;
background-color: lightgreen;
color: white;
padding: 8px;
margin: 10px;
height: 200px;
</style>
</head>
<body>
<h1>ASIDE HTML</h1>
<article>

tempor incididunt ut labore et dolore magna aliqua. Ut

enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip

ex ea commodo

cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim

id est laborum. Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut

enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip

ex ea commodo

cillum dolore eu fugiat nulla pariatur. Excepteur sint

occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim

id est laborum.</p>
</article>
<aside>
<h1>ASIDE IN HTML</h1>





</aside>
</body>
</html>
Details and Summary Tag
“details” defines additional details that the user can

hide or view. “summary” defines a visible heading for a
“details” element.
PROGRAM
<!DOCTYPE html>
<html>
<head>
<title>Details and Summary</title>
summary
{
font-size: 40px;
text-align: none;
width: 40%;
font-size: 28px;
color: black;
padding: 8px;
width: 40%;
</style>
</head>
<body>
<details>
<summary>Lorem psum</summary>





</details>
</body>
</html>
Figure and Figcaption Tag
These are used to add an image in a web page with

small description.
PROGRAM
<!DOCTYPE html>
<html>
<head>
<title>Figure</title>
h2
{
font-size: 30px;
color: red;
</style>
</head>
<body>
<h2>Figure and Figure Caption</h2>
<figure>
<img src="../image/tcode.png" alt="tcode logo"

style="width: 20%">
<figcaption>TCODE LOGO</figcaption>
</figure>
</body>
</html>
Header Tag
As the name suggests, it is for the header of a section

introductory of a page.
There can be multiple headers on a page.
PROGRAM
<!DOCTYPE html>
<html>
<head>
<title>Header</title>
</head>
<body>
<article>
<header>
<h1>HTML Semantic Tag</h1>
<h3>Header Tag</h3>
<p>This header tag is one of the sematic tag

in HTML5</p>
</header>
</article>
</body>
</html>
Footer Tag
Footer located at the bottom of any article or

document, they can contain contact details, copyright
information etc
There can be multiple footers on a page

PROGRAM
<!DOCTYPE html>
<html>
<head>
<title>Footer</title>
font-size: 30px;
text-align: center;
font-family: verdana;
</style>
</head>
<body>
<footer>
<p>Developed by </p>
<p><a
href="https://www.google.com">TCODE</a></p>
</footer>
</body>
</html>
Main Tag
It defines the main content of the document
The content inside main tag should be unique
PROGRAM
<!DOCTYPE html>
<html>
<head>
<title>Main</title>
h1
color: black;
font-size: 24px;
width: 50%;
font-size: 20px;
width: 50%;
</style>
</head>
<body>
<main>
<h1>HTML Main Tag</h1>






<article>
<h1>Example of Article 1</h1>


quis nostrud exercitation ullamco laboris nisi

ut aliquip ex ea commodo
consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt

mollit anim id est laborum.</p>
</article>
<article>
<h1>Example of Article 2</h1>


quis nostrud exercitation ullamco laboris nisi

ut aliquip ex ea commodo
consequat. Duis aute irure dolor in

reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt

mollit anim id est laborum.</p>
</article>
</main>
</body>
</html>
Section Tag
A page can be split into sections like Introduction,

Contact Information, Details etc and each of these
sections can be in a different section tag.
PROGRAM
<!DOCTYPE html>
<html>
<head>
<title>Section Tag</title>
</head>
<body>
<section>
<h1>Title 1</h1>






</section>
<section>
<h1>Title 2</h1>





</section>
</body>
</html>
Nav Tag
It is used to define a set of navigation links in the form

of navigation bar or nav menu.
PROGRAM
<!DOCTYPE html>
<html>
<head>
<title>NAV TAG</title>
</head>
<body>
<h1>College Menu</h1>
<nav>
<a href="">Home</a> |
<a href="">About Us</a> |
<a href="">Gallery</a> |
<a href="">Dept</a> |
<a href="">Contact Us</a>
</nav>
</body>
</html>
Mark Tag
It is used to highlight the text
PROGRAM
<!DOCTYPE html>
<html>
<head>
<title>Mark Tag</title>
mark
}
</style>
</head>
<body>
<h1>Mark Tag in HTML</h1>
<p>Have a nice day. Welcome to <mark>REACT

JS</mark> TRAINING</p>
</body>
</html>
Non-Semantic Elements
Tags like div, span fall under the Non- Semantic

categories as their names don’t tell anything about
what kind of content is present inside them.
Div Tag
div It is a block level element or division of a section
It is used as a container.
PROGRAM
<!DOCTYPE html>
<html>
<head>
<title>Non Semantic</title>
.demo
background-color: red;
</style>
</head>
<body>
<h1>Non Semantic Tag</h1>
<div class="demo">
<h1>Heading</h1>





</div>
<div>






</div>
</body>
</html>
HTML FORMS:
An HTML form is a section of a web document into which
the user can enter information.
Forms are used for two-way communication between

web pages and web sites.
Common uses of forms:
Comment response
Online Order Forms
Subscription forms
Registration forms
FORM CONTROLS
Text Fields - These are areas for brief text input.
Check boxes - That allow visitors to select none, one or

several items from a list use them to elicit multiple
answers.
Submit and Reset buttons - These send the form
information to the server for processing and return the
form to its original settings.
Radio buttons -They give visitors an opportunity to

choose only one item:
Text Areas - These are areas for lengthy text input, as

in open-ended comments or free form responses.
Select lists - These are lists from which visitors can
choose one or more items, use them to present long but
finite list of choices.
THE FORM TAG:

<FORM>
……
......
</FORM>
Syntax
<FORM action = "URL" method = get | post>

...
form elements
...
</FORM>
THE INPUT TAG
This tag defines an input area within a form. It asks the
user to input information in one of several ways.
The different ways of input are specified by "type
attribute.
This attribute can accept text, radio, checkbox,
passwords submit, reset, image, hidden, etc. as its
value.
TEXT FIELDS
The most common "type" of form <INPUT> is text.
It presents the user with a prompt for a single line of

text.
These fields are commonly used for a name address,

email address, country, postal code etc.
Syntax
<INPUT type = “text" name= “text-id" value= “default-

text" size= “n" maxlength = “m" read only>
EXAMPLE:
<HTML>
<HEAD>
<TITLE> TEXT FIELDS</TITLE>
</HEAD>
<BODY BGCOLOR="orange">
<P ALIGN ="CENTER"><B>ADMISSION FORM</B>
<FORM>
<P>
USERNAME<INPUT TYPE ="TEXT" NAME="NAME"

SIZE="25"
MAXLENGTH="30"> <BR><BR>
ADDRESS <INPUT TYPE ="TEXT" NAME="ADDRESS"

SIZE="25" MAXLENGTH="30">
<BR><BR>
</FORM>
</BODY>
</HTML>
Passwords:
Password fields are similar to text fields, except the
contents of the field are not visible on the screen.
It displays * * * * (asterisks) instead or the actual

input.
Syntax
<INPUT type = "password" name = "password-id" Value

= "default-text" size = "n" Maxlength = "m" readonly >
EXAMPLE:
<HTML>
<HEAD>
<TITLE> PASSWORD FIELDS</TITLE>
</HEAD>
<BODY BGCOLOR="Orange">
<center>
<P ALIGN ="CENTER"><B>ADMISSION FORM</B>
<FORM>
<P>
USERNAME: <INPUT TYPE ="TEXT" NAME="NAME"

SIZE="25" MAXLENGTH="30"> <BR><BR>
PASSWORD: <INPUT TYPE ="PASSWORD"

NAME="PASSWD" SIZE="25"
MAXLENGTH="30"><BR><BR>
ADDRESS: <INPUT TYPE ="TEXT" NAME="ADDRESS"

SIZE="25" MAXLENGTH="30">
<BR><BR>
</FORM>
</center>
</BODY>
</HTML>
RADIO BUTTONS:
Radio buttons are mutually exclusive i.e. they allow the

user to choose one of the several options. Selecting
one turns the other options off.
Syntax
<INPUT type = "radio" name = "radio-id" Value =
"choice-id" checked>
EXAMPLE:
<html>
<head>
<title>Radio Button</title>
<body>
<form name=”myform”>
<input type="radio" name=”myradio” >JAVA
<input type="radio" name=”myradio” >HTML
<input type="radio" name=”myradio” >PHP
</form>
</body>
</html>
Pre selected RadioButton
If we want the radiobutton to be shown selected even

before the user tries to select
one, we have to use the entry "checked".
Non Editable / Un selectable radio
We can make a radio button unselectable (disable)

using the entry "disabled"
<html>
<head>
<title>Radio Button</title>
<body>
<input type="radio" name=”myradio” disabled>JAVA
<input type="radio" name=”myradio” checked disabled

>HTML
<input type="radio" name=”myradio” disabled >PHP
</form>
</body>
</html>
Checkboxes
An INPUT tag with attribute type ="checkbox" offers

the user an "on" or "off" switch.
Each check box works independently from the others,

visitors can select or deselect any combination of
checkboxes.
Syntax
<INPUT type = "Checkbox" name ="box -id" Value =
"choice-id" checked>
EXAMPLE:
<html>
<head>
<title> Check Box </title>
<body>
<input type="checkbox" name=”mybox” >JAVA
<input type="checkbox" name=”mybox” >HTML

<input type="checkbox" name=”mybox” >PHP
</form>
</body>
</html>
Pre selected Checkbox
We can make a check box pre selected (checked) even

before the users try to select,
using the entry "checked"
<html>
<head>
<title> Check Box </title>
<body>
<input type="checkbox" name=”mybox”

checked>JAVA
<input type="checkbox" name=”mybox” >HTML
<input type="checkbox" name=”mybox” checked>PHP
</form>
</body>
</html>
Non Editable / Non Selectable check box
We can make a Checkbox non selectable (disable)

using the entry "disabled"
<html>
<head>
<title>Check Box</title>
<body>

disabled>JAVA

disabled>HTML
<input type="checkbox" name=”mybox” disabled>PHP
</form>
</body>
</html>
DROPDOWN LIST BOX:
A drop down menu lets the user select one choice out
of many possible choices.
Syntax
<SELECT name = "text-id" size="n" multiple >
<OPTION Value = "Choice-id" selected> Text Label -1
</OPTION>
…………………………………………………………..
…………………………………………………………..
<OPTION Value = "Choice id m" selected> TEXT LABEL.

- m </OPTION>
</SELECT>
EXAMPLE:
<html>
<head>
<title>Combo & Dropdown</title></head>

<body>
<select>
<option name=”one”> Java</option>
<option name=”two”> PHP</option>
<option name=”three”> DOTNET</option>
</select>
</form>
</body>
</html>
Preselected Select Option
The options can be preselected using the entity

"selected".
<html>
<head>
<title>Combo & Dropdown</title>
<body>
<select>
<option name=”one”> Java</option>
<option name=”two” selected> PHP</option>
<option name=”three”> DOTNET</option>
</select>
</form>
</body>
</html>
TEXTAREA :
This tag is used to set an area within a form in which

the user can type a large amount of text.
The textarea's are basically used for giving comments

and free form feedback from visitors.
Syntax
<TEXTAREA name = "text-id" rows = "n" Cols = "m"

Wrap= "Virtual physically off" read only> Initial content
</TEXT AREA>
EXAMPLE:
<html>
<head>
<title> Text Area </title>
<body>
<textarea>
This is a text area ...........
</textarea>
</form>
</body>
</html>
Setting TextArea Size
<html>
<head>
<title> Text Area </title>
<body>
<textarea name=”mytextarea” cols=”35” rows=”3”>
</textarea>
</form>
</body>
</html>
Non Editable Text Area
We can make a test area non selectable (i.e user cant

edit the field) using the entry
"readonly"
<html>
<head>
<title>Text Area</title>
<body>
<textarea name=”mytextarea” cols=”5” rows=”5”

readonly>

</textarea>
</form>
</body>
</html>
RESET AND SUBMIT BUTTONS:
SUBMIT- After filling up the form, the user needs to

submit the information.
An <INPUT> tag with type = submit provides a button

that submits the information in the completed form to
the URL, given as the action attribute of the FORM tag.
Syntax
<INPUT type = "submit" Value = "button label text" >
RESET:
The reset value of the type attribute clears all form

entries to the default one or leaves them blank .
Syntax
<INPUT type = "reset" Value =" button label text">
EXAMPLE:
LOGIN:
<HTML>
<body bgcolor="pink">
<h1 align="center">LOGIN</h1>
<form action="sample.html" method="get">
<h3>
Enter UserName: <input type="text"

name="uname"> <br>
Enter Password: <input type="password"

name="pass"> <br>
<input type="submit" value="LOGIN">
<input type="reset" value="CLEAR">

</h3>
</body>
</HTML>
sample.html
<html>
<head><title>New Page</title>
</head>
<body bgcolor="yellow">
<h2><marquee> THIRU PHP TRAINER

</marquee></h2>
<h2><marquee direction="right"> THIRU PHP

TRAINER </marquee></h2>
<h2><marquee> THIRU JAVA / J2EE TRAINER

</marquee></h2>
<h2><marquee direction="right">THIRU JAVA / J2EE

TRAINER</marquee></h2>
</body>
</html>
Audio:
<html>
<h2>Adiye Azhage:</h2><br>
<audio controls autoplay loop="3">
<source src="D:\Adiye Azhage.mp3"

type="audio/mpeg">
</audio> <br>
<h2>Thalli Pogathey:</h2><br>
<audio controls>
<source src="D:\thalli pogathey.mp3"

type="audio/mpeg">
</audio>
</body>
</html>
Audio Attributes:
controls
autoplay
Video:
<html>
<body bgcolor="PINK"><center>
<video controls autoplay>
<source src="D:\ENTERTAINMENT\VIDEO
COLLECTION\Collection
\Sagaayam Sir.mp4" type="video/mp4" width="700"

height="800">
</video>
</body>
</html>
TextField:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform"
action="http://www.google.co.in" method="POST">
<div align="center">
<br><br>
<input type="text" size="100" value="Enter your

name here!">
<br><br>
</div>
</form>
</body>
</html>
Password Field:
<html>
<head>
</head>
<body>
<form name="myform"
action="http://www.google.co.in" method="POST">
Enter Password : <input type="password" size="25">
<br><br>
</div>
</form>
</body>
</html>
ImageButton:
<html>
<head>
</head>
<body>
<form name="myform"
action="http://www.facebook.com" method="POST">
<br><br>
<input type="text" size="25" value="Enter your name

here!">
<br><input type="image" src="D:\PICTURES\Desktop

BG\aZuKy2T.jpg"
name="image" width="60" height="60"><br>
</div>
</form>
</body>
</html>
Autofocus:
<html>
<body>
<form>
First name: <input type="text" name="fname"

><br>
Last name: <input type="text" name="lname"
autofocus><br>
<input type="submit" value="SUBMIT">
</form>
<p><strong>Note:</strong> The autofocus attribute

of the input tag is not supported in
Internet Explorer 9 and earlier versions.</p>
</body>
</html>
FieldSet:
<html>
<body>
<form>
<fieldset>
<legend>Personal Details:</legend>
Name: <input type="text"><br>

Email: <input type="text"><br>
Mobile Number: <input type="text">
</fieldset>
</form>
</body>
</html>
HTML Iframe
 An iframe or inline frame is used to display

external objects including other web pages within a
web page
 An iframe pretty much acts like a mini web

browser within a web browser
 Also, the content inside an iframe exists entirely

independent from the surrounding elements
Syntax:
<iframe src="URL"></iframe>
Example:
<iframe src=“index.html"></iframe>
Width and Height
The height and width attributes are used to specify

the height and width of the iframe
Example:
<iframe src=“index.html" width="400"

height="200"></iframe>
Note:
The width and height attribute values are specified

in pixels by default
But you can also set these values in percentage
Such as 50%, 100% and so on
The default width of an iframe is 300 pixels,

whereas the default height is 150 pixels
Example:
<!DOCTYPE html>
<html>
<head>
<title>IFRAME</title>
</head>
<body>
<h2>HTML IFRAME</h2>
<p>Your Iframe Here</p>
<iframe src="https://www.poorvikamobile.com"
width="500" height="300"></iframe>
</body>
</html>
HTML NEW INPUT TYPES
1. FORM – TextField
<!DOCTYPE html>
<html>
<head>
<title>FORM - TextField</title>
</head>
<body>
<form>
First name:
<input type="text" name="first_name" value=""

size="40" maxlength="7" placeholder="First Name">
Last name:
<input type="text" name="last_name" autofocus>
</form>
</body>
</html>
2. FORM – PASSWORD
<!DOCTYPE html>
<html>
<head>
<title>FORM - PASSWORD</title>
</head>
<body>
<form>
Username: <input type="text" name="uname">
Password: <input type="password" name="pass">
</form>
</body>
</html>
3. FORM – TEXTAREA
<!DOCTYPE html>
<html>
<head>
<title>FORM - TEXTAREA</title>
textarea
border: 2px solid red;
</style>
</head>
<body>
<form>
Comments:
<textarea rows="6" cols="40" readonly>
Enter your Comments here....
</textarea>
</form>
</body>
</html>
4. FORM – CHECKBOX
<!DOCTYPE html>
<html>
<head>
<title>FORM - CHECKBOX</title>
</head>
<body>
<form>
<input type="checkbox" name="html">HTML
<input type="checkbox" name="css">CSS
<input type="checkbox" name="js">JAVASCRIPT
<input type="checkbox" name="php">PHP
</form>
</body>
</html>
5. FORM - RADIO BUTTON
<!DOCTYPE html>
<html>
<head>
<title>FORM - RADIO BUTTON</title>
</head>
<body>
<form>
Select a Gender:
<input type="radio" name="ra">Male

<input type="radio" name="ra" checked
disabled>Female
</form>
</body>
</html>
6. FORM – DROPDOWN
<!DOCTYPE html>
<html>
<head>
<title>FORM - DROPDOWN</title>
</head>
<body>
<form>
<select size="1">
<option>HTML</option>
<option>PHP</option>
<option selected>CSS</option>
<option>MYSQL</option>
<option>JS</option>
</select>
</form>
</body>
</html>
7. FORM – FILE
<!DOCTYPE html>
<html>
<head>
<title>FORM - FILE</title>
</head>
<body>
<form>
<input type="file" accept="image/*">
</form>
</body>
</html>
8. FORM – BUTTON
<!DOCTYPE html>
<html>
<head>
<title>FORM - BUTTON</title>
</head>
<body>
<form action="1_textfield.html">
Username: <input type="text">
<input type="submit" value="Login">
<input type="reset" value="Reset">
<input type="button" value="Button">
</form>
</body>
</html>
9. FORM – HIDDEN
<!DOCTYPE html>
<html>
<head>
<title>FORM - HIDDEN</title>
</head>
<body>
<form method="get">
<p>Username is Arun</p>
<input type="hidden" name="uname"

value="Alex">
<input type="text" name="cname"
placeholder="Customer name"><br><br>
<input type="password" name="pass"

placeholder="Password">
<input type="submit" name="submit"

value="Submit">
<input type="reset" name="reset" value="Clear">
</form>
</body>
</html>
10. FORM – GROUP
<!DOCTYPE html>
<html>
<head>
<title>FORM - GROUP</title>
fieldset
width: 350px;
background-color: lightblue;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Contact Details</legend>
<label>Email: <input type="text"

name="email"></label><br><br>
<label>Phone Number: <input type="text"

name="phone"></label>
</fieldset>
</form>
</body>
</html>
11. FORM – COLOR
<!DOCTYPE html>
<html>
<head>
<title>FORM - COLOR</title>
</head>
<body>
<form>
<label for="mycolor">Select Color</label>
<input type="color" value="#ff0000"

id="mycolor">
</form>
</body>
</html>
12. FORM – DATE
<!DOCTYPE html>
<html>
<head>
<title>FORM - DATE</title>
</head>
<body>
<form>
<label>Select Date: </label>
<input type="date" value="2020-06-06"

id="mydate">
</form>
</body>
</html>
13. FORM - DATE TIME LOCAL
<!DOCTYPE html>
<html>
<head>
<title>FORM - DATE TIME LOCAL</title>
</head>
<body>
<form>
<label>Choose Date and Time: </label>
<input type="datetime-local" id="mydatetime">
</form>
</body>
</html>
14. FORM – EMAIL
<!DOCTYPE html>
<html>
<head>
<title>FORM - EMAIL</title>
</head>
<body>
<form>
<label for="myemail">Enter Email Address:

</label>
<input type="email" name="myemail" required>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>
15. FORM – MONTH
<!DOCTYPE html>
<html>
<head>
<title>FORM - MONTH</title>
</head>
<body>
<form>
<label>Select Month</label>
<input type="month" id="myvalue">
</form>
</body>
</html>
16. FORM – NUMBER
<!DOCTYPE html>
<html>
<head>
<title>FORM - NUMBER</title>
</head>
<body>
<form>
<label>Enter a Month: </label>
<input type="number" id="myNumber" min="1"

max="20" step="0.5">
</form>
</body>
</html>
17. FORM – RANGE
<!DOCTYPE html>
<html>
<head>
<title>FORM - RANGE</title>
</head>
<body>
<form>
<label>Enter a Number</label>
<input type="range" id="myRange" min="1"

max="10" step="2">
</form>
</body>
</html>
18. FORM – SEARCH
<!DOCTYPE html>
<html>
<head>
<title>FORM - SEARCH</title>
label
color: red;
input[type="search"]
{
width: 80%;
height: 40px;
border: 2px solid green;
input[type="search"]:hover
border: 2px solid purple;
border-radius: 10px;
</style>
</head>
<body>
<form>
<label>Search Website:</label>
<input type="search" id="mySearch" size="50">
</form>
</body>
</html>
19. FORM – TELEPHONE

<!DOCTYPE html>
<html>
<head>
<title>FORM - TELEPHONE</title>
</head>
<body>
<form>
<label>Telephone Number</label>
<input type="tel" placeholder="xx-xxxx-xxxx">
</form>
</body>
</html>
20. FORM – TIME
<!DOCTYPE html>
<html>
<head>
<title>FORM - TIME</title>
</head>
<body>
<form>
<label>Select Time:</label>
<input type="time" id="myTime">
</form>
</body>
</html>
21. FORM – WEEK
<!DOCTYPE html>
<html>
<head>
<title>FORM - WEEK</title>
</head>
<body>
<form>
<label>Choose a Week</label>
<input type="week" id="myWeek">
</form>
</body>
</html>
22. FORM – URL

<!DOCTYPE html>
<html>
<head>
<title>FORM - URL</title>
</head>
<body>
<form>
<label>Enter Website URL:</label>
<input type="url" id="myUrl" placeholder="Enter

URL">
</form>
</body>
</html>
SPECIAL ASCII CHARACTER IN HTML:
The ASCII characters listed below shows the value for

each special character in HTML
and a brief description of the symbol. It shows how to
add ascii characters into the
webpage using HTML.For example copyright symbol '©'

can be displayed using the following code in html
©".
Symbol HTMLCode Numerical values Description
‘ ‘ Left single-quote
’ ’ Right single-quote
™ ™ Trademark
˜ &tilde; tilde
“ “ Left double quotes
” ” Right double quotes
@ - @ At-sign
÷ ÷ ÷ Division
{ - { Left curly braces
} - } Right curly braces
_ - _ Underscore
? - ? Question mark
= - = Equal sign
( - ( Left paranthesis
) - ) Right paranthesis
* - &#4 2; Asterisk
, - , Comma
! - ! Exclamation mark
' - ' Single Quote
/ - / Forward slash
\ - \ Back slash
: - : Colon
; - ; Semicolon
[ - [ Left Square bracket
] - ] Right Square bracket
• - Small bullet
‰ &permil; Per million symbol
| - | Vertical bar
Ñ Ñ Ñ N tilde(enye)
Ò ÒÒ O grave
Ó ÓÓ O acute
Ô Ô Ô O circumflex
Õ Õ Õ O tidle
Ö Ö Ö O umlaut
Ø ØØ O slash
Ù ÙÙ U grave
Ú ÚÚ U acute
Û Û #219; U circumflex
Ü Ü Ü U umlaut
Ý ÝÝ Y acute
Þ ÞÞ Thorn
ß ß ß SZ ligature
á áá a acute
à àà a grave
â â â a circumflex
ã ã ã a tilde
ä ä ä a umlaut
å å å a ring
æ æ æ ae ligature
ç ç ç c cedilla
è èè e grave
é éé e acute
ê ê ê e circumflex
About Us
For More Courses,
C++
Java
JSP
Servlet
HTML
CSS
Java Script
PHP
MYSQL
DOTNET
ANDROID
Trainer’s Profile
Trainer Name: THIRUPATHY.M
MOBILE NO: 9952254454 / 9363361696
MAIL ID: thirufreelancer.06@gmail.com

HTML Training by Thiru

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Training by Thiru

Uploaded by

Copyright:

Available Formats

What is HTML?

HTML, an acronym for HyperText Markup Language, is

Consisting mainly of a series of codes usually written in

HTML was first developed by Tim Berners-Lee in 1990.

1. HTML stands for Hyper Text Markup Language

HTML 3.2 1997

HTML 4.01 1999

XHTML 1.0 2000

 Text Editor Or HTML Editor

If you will be creating web pages in HTML, you will

It will also detect when you open a new tag and

Name of Text Editor or HTML Editor

CoffeeCup Free HTML Editor

Internet Explorer Google Chrome

SOME BASICS TAGS IN HTML:

<html> </html> The main tag

<head> </head> header tag

<body> </body> body tag

<center> </center>aligns things in center

<br> break line tag

&nbsp; space tag

<p></p> define paragraph

<H1></H1> makes the font as a heading

<u> </u> underlines the font

<i> </i> makes the font italic

<strike> </strike> makes striked text or word

<font> </font> sets font color, size, type

<img> </img> used to add image

<a> </a> linking tag

<marquee></marquee> make text move

<ul> </ul> used to list things

<ol> </ol> used to list things

<ol="value"> Bullet styles

<dl> </dl> used to list things

<li> </li> used to list things

<table> </table> to define table

<tr> </tr> table row inside table

<th></th> table heading

<hr> horizontal line tag

<form> </form> define forms

<textarea> </textarea> shows text area

<input> </input> creates form types

<select> </select> used to create combo box

<audio> </audio>Embed audio in web page

<video> </video> Include video in web page

<frameset> </frameset> Frameset

<sub> </sub> Subscript

<input type="image"> button as an image

<a href title="value">Create Tooltip

An example of a correct sequence of tags is:

<tag1><tag2> statements </tag2></tag1>

To markup your web pages, you will need to learn the

It is very simple task to write HTML element. We have

Any thing we type inside the body tag will be displayed

<title>This is Document Title</title>

Sometimes in HTML tags are not enough to perform the

1. HTML attributes provides extra bits of information

Some of HTML Attributes:

Alt Specifies an alternative text for an image

Specifies that an input element should be

Id Specifies a unique id for an element

Specifies the URL (web address) for an

Specifies an inline CSS style for an

space tag

One (nbsp stands for "non-breaking space") is

PROGRAMMING PULSE