Learning HTML

LEARNIN
G HTML &
CSS
HTML (Hyper Text Mark-up Language)
HTML: HTML is a complete code package that allows a user to create web pages.
It includes text and graphics. You can add links to your web pages.
Hyperlinks are the highlighted text segments or images that connect a
page to other page on the web.
HyperText: hypertext is the text used to link various web pages. It is

the text on the web page, clicking on which opens a new webpage.
Mark-up: it means highlighting the text either by underlining or displaying it in

different colours, or both
Language: it refers to the mode of communication between web pages. HTML has
its own syntax and rules.
TAG
HTML is a tag based language. A tag is a piece of code, which acts as
a label that a web browser interprets. It instructs a web browser what
to display. A complete tag having an opening <tag> and closing </tag>
is known as element.
A tag comprises of text enclosed in <>. All tags have their attributes
and default values. These tags are not case sensitive.
HTML ELEMENTS
Container Elements
A tag that include both ON and OFF tags are called container
tags. A tag is opened using opening angle bracket <> and
closed using closing brackets </>.
Example: <HTML> </HTML>
<tag1><tag2></tag2></tag1> (correct way to use nested container tags.
Empty Elements
A tag that contains only ON tag, they do not have OFF tags are
called empty tags. these elements do not enclose any data.
Example: <BR>
BASIC STRUCTURE OF HTML
<HTML>
<HEAD>
<TITLE>First Page </TITLE>
</HEAD>
<BODY>
Contains text to be displayed on the browser
</BODY>
</HTML>
TAGS WITH THEIR ATTRIBUTES

<!DOCTYPE...>
This tag defines the document type and HTML version.
Syntax: <!DOCTYPE html>
HTML TAG
This tag encloses the entire HTML document. This tag tells the
browser that it is reading an HTML document and to display as
such.
An HTML document is divided into a HEAD and BODY.
HEAD TAG
This tag represents the document's header which keeps HTML
tag <TITLE> tag.
TITLE TAG
This tag is used to display the document title.
BODY TAG
This tag represents the document’s body which keeps other
HTML tags like <H1>, <P>, etc.
Attributes: Bgcolor(used to set the background color of
webpage),Background (used to set an image for the
background),Text(used to set the color of the text displayed on the
webpage)
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>Body tag</title>
</head>
<body bgcolor="red" text="green">
<p>Hello<br>
You delivered your assignment on time.<br>
</body>
</html>
Output:
HEADING TAGS
You can use different sizes for your headings. HTML has six
levels of headings, which use the elements
<H1>,<H2>,<H3>,<H4>,<H5>, <H6>. <H1> is the top level
heading and <H6> is the lowest level heading. Example:
<h1> Heading1 <h1>Heading 1 Output:
Example</h1>
<h2> Heading2 <h2>Heading 2

Example</h2>

Example</h3>

Example</h4>

Example</h5>

Example</h6>
PARAGRAPH TAG
The <P> tag offers a way to structure your text into different
paragraphs. Each paragraph of text should go in between an
opening <P>and a closing</P>tag. This tag will create a line break
and a space between lines.
Attributes: Align (Left, Center, Right)
Syntax: <p>…… </p>

Example:
Input: Output:
<!DOCTYPE html>
<html> This is an example
<head> displaying the use
<title>Paragraph of the paragraph tag.
Example</title>
</head>
<body>
<p align=”left”> This is an example
This is an example displaying the use
displaying the use of the paragraph tag.
of the paragraph This is an example

tag.</p><br> displaying the use
<p align=”right”> of the paragraph tag.
This is an example
displaying the use
of the paragraph
tag.</p><br>
<p align=”right”>
Example 3:
This is an example
displaying the use
of the paragraph tag.</p>
</body>
</html>
LINE BREAK TAG
Whenever you use the <BR> element, anything following it
starts from the next line. This tag is an example of an empty
element.
Syntax: <br>
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br>
You delivered your assignment on time.<br>
Thanks<br>
Mahnaz</p>
</body>
</html>
Output:
Hello
You delivered your assignment on time.
Thanks
Mahnaz
CENTER TAG
The <CENTER> tag is used to put any content in the center of
the page or any table cell.
Syntax: <center>…….</center>
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>Centering Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
Output:
This text is not in the center.
This text is in the center.
HORIZONTAL LINES TAG

The <HR> tags are used to visually break-up sections of a
document. It creates a line from the current position in the
document to the right margin. Attributes: Width, Size, Color
Syntax :<hr>
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p> Contents of your web page</p>
<hr width="75%" color="red" size="4">
<p> Contents of your web page</p>
</body>
</html>
Output:
Contents of your web page
Contents of your web page

BOLD TAG
Text positioned between <B> tag will be displayed in bold font on
your HTML page.
Syntax :<b>…..</b>
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<b>Example</b>
</body>
</html>
Output:
Example
ITALIC TAG
Text positioned between <I> tags will be displayed in italic font on
your HTML page.
Syntax :<i>…..</i>
Example:

Input:
<body>
<i>Example</i>
</body>
Output:
Example
UNDERLINE TAG
Text positioned between <U> tags will be displayed underlined on
your HTML page.
Syntax :<u>…..</u>
Example:
Input:
<body>
<u>Example</u>
</body>
Output:
Example
STRIKETHROUGH TAG
The <STRIKE> tag displays the text with a strikethrough, or a
line through it. Syntax :<strike>…..</strike>
Example:
Input:
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
Output:
The following word uses a strikethrough typeface.
SUPERSCRIPT TAG
The <SUP> tag displays text above the line.
Syntax :<sup>…..</sup>
Example:
Input:
<body>
<p>H<sup>2</sup>O</p>
</body>
Output:
HO
2
SUBSCRIPT TAG
The <SUB> tag displays text below the line.
Syntax :<sub>…..</sub>
Example:
Input:
<body>
<p>C<sub>2</sub>O</p>
</body>
Output:
CO
2
MARK TAG
The <MARK> tag represents highlighted text, i.e. text marked for
reference purpose.
Syntax :<mark>…..</mark>
Example:
Input:
<body>
<p>The following word has been <mark>marked</mark> with
yellow</p> </body>
Output:
STRONG TAG
The <STRONG> tag gives text strong importance, and is typically
displayed in bold.
Syntax :<strong>…..</strong>
Example:
Input:
<body>
<p>The following word uses a <strong>strong</strong>
typeface.</p> </body>
Output:
The following word uses a strong typeface.
TEXT ABBREVIATION TAG
The <ABBR> tag represents an abbreviation and optionally
provides a full description for it. If present, the title attribute must
contain this full description and nothing else.
Syntax :<abbr>…..</abbr>
Example:
Input:
<body>
<p>I do <abbr title="Hypertext Markup Language">HTML</abbr></p>

</body>
Output:
BLOCKQUOTE TAG
The <BLOCKQUOTE> tag indicates that the enclosed text is
an extended quotation. Usually, this is rendered visually by
indentation.
Syntax :<blockquote>…..</blockquote>
Example:
Input:
<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML, following
on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML
2.0.</blockquote> </body>
Output:
The following description of XHTML is taken from the W3C Web site:
XHTML 1.0 is the W3C's first Recommendation for XHTML, following on

from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.
QUOTATION TAG
The <Q> tag element is used when you want to add a double
quote within a sentence.
Syntax :<q>…..</q>
Example:
Input:
<body>
<p>Amit is in Spain, <q>I think I am
wrong</q>.</p>
</body>
Output:
Amit is in Spain, “I think I am wrong”.
ADDRESS TAG
The <ADDRESS> tag is used to contain any address.
Syntax :<address>…..</address>
Example:
Input:
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
Output:
388A, Road No 22, Jubilee Hills - Hyderabad
COMMENT TAG
LEARNING HTML 9
Comment is a piece of code which is ignored by any web browser.
It is a good practice to add comments into your HTML code,
especially in complex documents, to indicate sections of a
document, and any other notes to anyone looking at the code.
Comments help you and others understand your code and
increases code readability.
Syntax : 
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>

<p>Document content goes
here.....</p>
</body>
</html>
Output:
Document content goes here.....
IMAGE TAG
The <IMG> tag is used to insert any image in your web page.
Attributes: Src(The URL of the image), Height, Width, Alt(The text
that will be displayed in non-graphical browsers), border
Syntax : <img>
Example:
Input:
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" border="7" width="350"
height="250" align=“center”>
</body>
Output:
ANCHOR TAG
The <A> tag defines a hyperlink to a location on the same page or
any other page on the Web. It can also be used (in an obsolete way)
to create an anchor point—a destination for hyperlinks within the
content of a page.
LEARNING HTML 10
Hyperlinks allow visitors to navigate between Web sites by clicking
on words, phrases, and images. Thus you can create hyperlinks
using text or images available on a webpage.
Attributes: href(Specifies the URL of the page the link goes
to),vlink(used to set the color of visited link), link(used to set the
color of unvisited link),alink(used to set the color of active link)
Syntax:<a>…..</a>
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body vlink="red" link="green">
<a href="http://www.w3schools.com">Visit W3Schools.com!</a><br>
<a href="http://www.tutorialspoint.com" target="_self">Tutorials Point</a> <br>
<a href="http://www.tutorialspoint.com" target="_self">Tutorials Point new</a>
<br> <a href="https://www.facebook.com/">Tutorials Point new</a> <br>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial">
</a>
</body>
</html>
Output:
Visit W3Schools.com!
Tutorials Point
Tutorials Point
Tutorials Point new
MARQUEE TAG
The <MARQUEE> tag displays a moving text massage on the
background of your webpage.
Attributes: direction(up,down,right,left),bgcolor
Syntax : 
Example:
Input:
<!DOCTYPE html>
<html>
<body>
<marquee direction="up" bgcolor="red">The image is a link. You can click
on it.</marquee>
</body>
</html>
Output:
LEARNING HTML 11
FONT TAG
The <FONT> tag is used to change color, size and style of text on
your webpage.
Attributes: size, color, face
Syntax : 
Example:
Input:
<!DOCTYPE html>
<html>
<body>
<p><font size="20", color="green", face="calibri">The image is a link. You can click
on it.</font></p>
</body>
</html>
Output:
NSERT TAG
The <INS> tag represents a range of text that has been added to a
document. Syntax: <ins>…..</ins>
Example:
Input:
<body>
<p>I want to drink
<ins>wine</ins></p>
</body>
Output:
I want to drink wine
DELETE TAG
The <DEL> tag represents a range of text that has been deleted
from a document.
Syntax: <del>…..</del>
Example:
Input:
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
LEARNING HTML 12
</body>
Output:
I want to drink cola wine
BIG TAG
The <BIG> tag displays one font size larger than the rest of the text
surrounding it.
Syntax : <big>…..</big>
Example:
Input:
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>
Output:
The following word uses a big typeface.
SMALL TAG
The <SMALL> tag displays one font size smaller than the rest of
the text surrounding it
Syntax: <small>…..</small>
Example:
Input:
<body>
<p>The following word uses a <small>small</small>
typeface.</p>
</body>
</html>
Output:
The following word uses a small typeface.
EMPHASIS TAG
The <EM> tag displays text as emphasized text. It marks text that
has stress emphasis.
Syntax: <eml>…..</em>
Example:
Input:
<body>
<p>The following word uses a <em>emphasized</em>
typeface.</p> </body>
Output:
The following word uses an emphasized typeface.
TABLE
The HTML tables allow you to arrange data like text, images, links,
other tables, etc. into rows and columns of cells.
<TABLE> tag represents tabular data in the form of rows
and columns. <TR> tag defines a row of cells in a table.
<TD> tag ) defines a cell of a table that contains data.
The HTML tables are created using the <table> tag in which the
<tr> tag is used to create table rows and <td> tag is used to create
data cells. Attributes: bgcolor( background color for whole table or
just for one cell), background (set background image for whole
table or just for one cel), bordercoder (set border color of the
table), height, width
Syntax:
<table>
<tr>
<td>…</td>
</tr>
</table>
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="2" bordercolor="red" bgcolor="yellow" width="400"
height="150"> <tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Output:
TABLE HEADING TAG
Table heading can be defined using <TH> tag. This tag will be put
to replace <td> tag, which is used to represent actual data cell.
Normally you will put your top row as table heading.
Syntax: <th>….</th>
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body> </html>
Output:
CELLSPACING AND CELLPADDING

There are two attributes called cellpadding and cellspacing which
you will use to adjust the white space in your table cells. The
cellspacing attribute defines the width of the border, while
cellpadding represents the distance between cell borders and the
content within a cell.
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5">
<tr>
LEARNING HTML 15
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Output:
COLSPAN AND ROWSPAN

There are two attributes called cellpadding and cellspacing which
you will use to adjust the white space in your table cells. The
cellspacing attribute defines the width of the border, while
cellpadding represents the distance between cell borders and the
content within a cell. Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell
3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>
Output:
LEARNING HTML 16
TABLE CAPTION TAG

The <CAPTION> tag will serve as a title or explanation for the table
and it shows up at the top of the table.
Syntax: <caption>…..</caption>
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, column 2</td>
</tr> </table>
</body>
</html>
Output:
TABLE HEADER AND FOOTER

Tables can be divided into three portions: a header, a body, and a
foot. The head and foot are rather similar to headers and footers in
a word-processed document that remain the same for every page,
while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of
a table are: <THEAD> - to create a separate table header.
<TFOOT> - to create a separate table footer.
Example:
LEARNING HTML 17

Input:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
LIST
UNORDERDED LIST TAG

The <UL> tag is used to create unordered list of items that have no
special order or sequence. Each item in a list is represented with
<li>…</li> tags. Attributes: type(square, disc, circle)
Syntax:
<ul type=” ”>
<li>….</li>
<li>….</li>
<li>….</li>
</ul>
Example:
LEARNING HTML 18
Input:
<!DOCTYPE html>
< <!DOCTYPE html>
<html>
<head>
<title>HTML Unordered
List</title>
</head>
<body>
<ul type="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Output:
LIST ITEM TAG
The <LI> tag is used to display list items in an Ordered list or

unordered list using <li> tag
Syntax:
<li>….</li>
ORDERDED LIST TAG

The <OL> tag represents an ordered list of items. Typically,
ordered-list items are displayed with a preceding numbering, which
can be of any form, like numerals, letters or Romans numerals or
even simple bullets. Each item in a list is represented with <li>…
</li> tags.
Attributes: type(1, I, i, a, A), start(specify the starting point of
numbering you need).
Syntax:<ol type=" ">
<li>….</li>
<li>….</li>
<li>….</li>
</ol>
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered
List</title>
</head>
<body>
<ol type="1">
LEARNING HTML 19
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>
Output:
HTML DEFINITION LIST

HTML supports a list style which is called definition lists where
entries are listed like in a dictionary or encyclopaedia. The
definition list is the ideal way to present a glossary, list of terms, or
other name/value list.
Definition List makes use of following three tags.
o <DL> - Defines the start of the list
o <DT> - A term
o <DD> - Term definition
o </DL> - Defines the end of the list
Syntax:
<dl>
<dt>….</dt>
<dd>….</dd>
</dl>
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
Output:
FRAMES
HTML frames are used to divide your browser window into multiple
sections where each section can load a separate HTML document.
A collection of frames in the browser window is known as a
frameset. The window is divided into frames in a similar way the
tables are organized: into rows and columns.
<FRAMESET> is an HTML tag which is used to contain <frame>
tags. <FRAME> is an HTML tag which defines a particular area in
which another HTML document can be displayed. A frame should be
used within a <frameset>.
Each <frame> in a <frameset> can have different attributes, such as
border, scrolling, the ability to resize, etc.
Attributes: Frameset:cols/rows(Specifies how many columns/rows are
contained in the frameset and the size of each column)
Frame(Name, Src, Frameborder)
Example:
Input:
<!DOCTYPE html>
<html>
<frameset cols="25%,10%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="framec.htm">
</frameset>
<body>
Your browser does not support frames.
</body>
</html>
Output:
INLINE FRAME TAG
The <IFRAME> tag is not somehow related to <frameset> tag,

instead, it can appear anywhere in your document. The <iframe>
tag defines a rectangular region within the document in which the
browser can display a separate document, including scrollbars and
borders.
Attributes: src, name, frameborder
Syntax :<iframe>…….</iframe>
Example:
Input:
<!DOCTYPE html>
<html>
<body>
Your browser does not support frames.
<iframe src="/html/menu.htm" width="555" height="200" frameborder="1"> Sorry
your browser does not support inline frames.
</iframe>
</body>
</html>
Output:
DIVISON TAG
The <DIV> tag is the generic container for flow content, which does
not inherently represent anything. It can be used to group elements
for styling purposes.
Attributes: style(Border Sides(border-top:,border-left:,border-
bottom:,border right: )(Border width:- border-width: thin;border-
width: medium;border-width: thick;border: 1px;border-top: 2px;)
(Border Styles:-border-style: dotted; border style: dashed;border-
style: solid;border-style: double;border-style: groove;border-style:
ridge;border-style: inset;border-style: outset;) Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body> 
<div style="color:red; background:green">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
LEARNING HTML 22
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>

<div style="color:green;
float:right";>
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>
Output:
SPAN TAG
The HTML <span> is an inline element and it can be used to group
inline elements in an HTML document. This tag also does not
provide any visual change on the block but has more meaning
when it is used with CSS. The difference between the <span> tag
and the <div> tag is that the <span> tag is used with inline
elements whereas the <div> tag is used with block-level elements.
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style="color:red">red</span> and this is
<span
style="color:green">green</span></p>
</body>
</html>
Output:
This is red, and this is green
FORMS
HTML web forms are a composition of buttons, checkboxes, and text
input fields embedded inside of HTML documents with one goal in
mind: to capture user input. By doing things such as providing fields
for user data such as names, phone number, and email addresses,
web forms give users the opportunity to interact directly with a
webpage.
<FORM> tag is used to create an HTML form.
Attributes: action (Backend script ready to process your passed
data), method(Method to be used to upload data. The most
frequently used are GET and POST methods)
Syntax:
<form action="Script URL" method="GET/POST">
form elements like input, textarea etc.
</form>
There are different types of form controls that you can use to collect
data using HTML form:
o Text Input Controls
o Checkboxes Controls
o Radio Box Controls
o Select Box Controls
o File Select boxes
o Clickable Buttons
o Submit and Reset Button
LEARNING HTML 24

INPUT TAG
The <INPUT> tag defines a one-line input field for text input. this tag is
used for items that require only one line of user input, such as search
boxes or names.
SINGLE LINE TEXT INPUT CONTROLS

o Single-line text input controls - This control is used for items that require
only one line of user input, such as search boxes or names. They are
created using HTML <input> tag.
o Password input controls - This is also a single-line text input but it masks
the character as soon as a user enters it. They are also created using
HTMl <input> tag.
o Multi-line text input controls - This is used when the user is required to
give details that may be longer than a single sentence. Multi-line input
controls are created using HTML <textarea> tag.
Attributes: type (Indicates the type of input control and for text input
control it will be set to text and for password input it will be
password),name(Used to give a name to the control which is sent to
the server to be recognized and get the value), value(This can be
used to provide an initial value inside the control), maxlength (Allows
to specify the maximum number of characters a user can enter into
the text box)
Example:
Input:
<!DOCTYPE html>
<html>
<body>
<form>
user name:<br>
<input type="text" name="user">
<br>
password:<br>
<input type="password"
name="password">
</form>
</body>
</html>
Output:
MULTI LINE TEXT INPUT CONTROLS

This is used when the user is required to give details that may be
longer than a single sentence. Multi-line input controls are created
using HTML <TEXTAREA> tag.
Attributes: name(Used to give a name to the control which is sent
to the server to be recognized and get the value)rows(Indicates
the number of rows of text area box),cols(Indicates the number of
columns of text area box) Syntax:
<textarea>…..</textarea>
Example:
Input:
<!DOCTYPE html>
<html>
<form>
description:<br>
<textarea rows="5"
cols="50">
enter
your
description
here...
</textarea>
</form>
<body>
</body>
</html>
Output:
CHECKBOX CONTROL
Checkboxes are used when more than one option is required to
be selected. They are also created using HTML <input> tag but
type attribute is set to checkbox.
Attributes: name(Used to give a name to the control which is sent to
the server to be recognized and get the value)value(The value that
will be used if the checkbox is selected),type(Indicates the type of
input control and for checkbox input control it will be set to
checkbox),checked(Set to checked if you want to select it by
default)
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
LEARNING HTML 26
<body>
<form>
<input type="checkbox" name="maths" value="on" checked>
Maths
<input type="checkbox" name="physics" value="on"> Physics
</form>
</body>
</html>
Output:
RADIO BUTTON CONTROL

Radio buttons are used when out of many options, just one option
is required to be selected. They are also created using HTML
<input> tag but type attribute is set to radio.
Attributes: name(Used to give a name to the control which is sent to
the server to be recognized and get the value)value(The value that
will be used if the radio box is selected),type(Indicates the type of
input control and for checkbox input control it will be set to
radio),checked(Set to checked if you want to select it by default)
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics" checked>
Physics </form> </body>
</html>
Output:
SELECT BOX CONTROL

A select box, also called drop down box which provides option to
list down various options in the form of drop down list, from where
a user can select one or more options.
Attributes: name (Used to give a name to the control which is sent
to the server to be recognized and get the value) size(This can be
used to present a scrolling list box),type(Indicates the type of input
control and for checkbox input control it will be set to
radio),multiple(If set to "multiple" then allows a user to select
multiple items from the menu),selected(Specifies that this option
should be the initially selected value when the page loads)
LEARNING HTML 27

Syntax:
<select name="dropdown">
<option>…</option>
</select>
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name="dropdown">
<option value="Maths"
selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
</body>
</html>
Output:
FILE UPLOAD BOX

If you want to allow a user to upload a file to your web site, you will
need to use a file upload box, also known as a file select box. This is
also created using the <input> element but type attribute is set to
file.
Attributes: name (Used to give a name to the control which is sent to
the server to be recognized and get the value), accept(Specifies the
types of files that the server accepts)
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="file" name="fileupload"
accept="image/*" />
</form>
</body>
</html>
Output:
BUTTON CONTROL
There are various ways in HTML to create clickable buttons. You can
also create a clickable button using <input> tag by setting its type
attribute to button. The type attribute can take the following values:
TYPE DESCRIPTION
submit This creates a button that automatically submits a form.
reset This creates a button that automatically resets form controls to their
initial values.
button This creates a button that is used to trigger a client-side script

when the user clicks that button.
image This creates a clickable button but we can use an image as
background of the button.
Attributes: name (Used to give a name to the control which is sent to

the server to be recognized and get the value), value (text that will
be displayed on button) Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type="submit" name="submit" value="Submit" /> <br><br>
<input type="reset" name="reset" value="Reset" /> <br><br>
<input type="button" name="ok" value="OK" /> <br><br>
<input type="image" name="imagebutton" src="smiley.gif" />
<br><br> </form>
</body>
</html>
Output:
HTML EMBED MULTIMEDIA

EMBED TAG
<embed> tag is used to add music or video into your web page. This
tag causes the browser itself to include controls for the multimedia
automatically provided browser supports <embed> tag and given
media type.
<embed>puts a browser plugin in the page. A plugin is a special
program located on the client computer (i.e. not on your web
server) that handles its own special type of data file. The most
common plugins are for sounds and movies. The <EMBED ...>
tag gives the location of a data file that the plugin should
handle.
Attributes: align, height, width, src(URL of the object to be
embedded) Supported Video Types
You can use various media types like Flash movies (.swf), AVI's
(.avi), and MOV's (.mov) file types inside embed tag.
o .swf files - are the file types created by Macromedia's Flash
program. o .wmv files - are Microsoft's Window's Media
Video file types.
o .mov files - are Apple's Quick Time Movie format.
o .mpeg files - are movie files created by the Moving Pictures Expert
Group.
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src="helloworld.swf" height="450" width="450">
</embed>
</body>
</html>
Output:
CORE ATTRIBUTES
ID ATTRIBUTE
The id attribute of an HTML tag can be used to uniquely identify any
element within an HTML page. There are two primary reasons that
you might want to use an id attribute on an element:
o If an element carries an id attribute as a unique identifier, it is possible
to identify just that element and its content.
o If you have two elements of the same name within a Web page (or
style sheet), you can use the id attribute to distinguish between
elements that have the same name.
Example:
Input:
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style
Sheet</p>
TITLE ATTRIBUTE
The title attribute gives a suggested title for the element. They syntax
for the title attribute is similar as explained for id attribute:
The behavior of this attribute will depend upon the element that
carries it, although it is often displayed as a tooltip when cursor
comes over the element or while the element is loading.
Example:
Input:
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html
Output:
CLASS ATTRIBURE
The class attribute is used to associate an element with a style
sheet, and specifies the class of element. You will learn more about
the use of the class attribute when you will learn Cascading Style
Sheet (CSS).
Example:
Input:
<body>
<p class="html">This para explains what is
HTML</p>
</body>
HTML STYLE SHEET

Cascading Style Sheets (CSS) provide easy and effective
alternatives to specify various attributes for the HTML tags. Using
CSS, you can specify a number of style properties for a given HTML
element. Each property has a name and a value, separated by a
colon (:). Each property declaration is separated by a semi-colon
(;).
You can use CSS in three ways in your HTML document:
o External Style Sheet: Define style sheet rules in a separate .css
file and then include that file in your HTML document using
HTML <link> tag. o Internal Style Sheet: Define style sheet rules
in header section of the HTML document using <style> tag.
o Inline Style Sheet: Define style sheet rules directly along-with the
HTML elements using style attribute.
Example: First let's consider an example of HTML document which makes use
of <font> tag and style tag associated attributes to specify text color and
font size:
Input:
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS using font tag</title>
</head>
<body>
<p><font color="green" size="5">Hello, World!
</font></p>
</body>
</html>
OR
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS using style tag</title>
</head>
<body>
<p style="color:green;font-size:24px;">Hello, World!</p>
</body>
</html>
Output:
INLINE STYLE SHEET

You can apply style sheet rules directly to any HTML element using
style attribute of the relevant tag. This should be done only when
you are interested to make a particular change in any HTML
element only.
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style="color:red;">This is red</p>
<p style="font-size:20px;">This is thick</p>
<p style="color:green;">This is green</p>
<p style="color:green;font-size:20px;">This is thick and
green</p>
</body>
</html>
Output:
NTERNAL STYLE SHEET

If you want to apply Style Sheet rules to a single document only,
then you can include those rules in header section of the HTML
document using <style> tag. Rules defined in internal style sheet
overrides the rules defined in an external CSS file.
Example:
Input:
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type="text/css">
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
</style>
</head>
<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">This is thick and green</p>
</body>
</html>
Output:
EXTERNAL STYLE SHEET

If you want to apply Style Sheet rules to a single document only,
then you can include those rules in header section of the HTML
document using <style> tag. Rules defined in internal style sheet
overrides the rules defined in an external CSS file.
Example:
Consider we define a style sheet file style.css which has following rules:
Input:
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
Here we defined three CSS rules which will be applicable to three different classes
defined for the HTML tags. I suggest you should not bother about how these rules are
being defined because you will learn them while studying CSS. Now let's make use of
the above external CSS file in our following HTML document:
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">This is thick and green</p>
</body>
</html>
Output:
References:- http://www.tutorialspoint.com/
http://www.w3schools.com/
LEARNING HTML 36

.

Learning HTML

Uploaded by

Document Information

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

Learning HTML

Uploaded by

Copyright:

Available Formats

LEARNIN

HyperText: hypertext is the text used to link various web pages. It is

Mark-up: it means highlighting the text either by underlining or displaying it in

TAGS WITH THEIR ATTRIBUTES

<h2> Heading2 <h2>Heading 2

<h3> Heading3 <h3>Heading 3

<h4> Heading4 <h4>Heading 4

<h5> Heading5 <h5>Heading 5

<h6> Heading6 <h6>Heading 6

Syntax: <p>…… </p>

of the paragraph This is an example

HORIZONTAL LINES TAG

Contents of your web page

<p>I do <abbr title="Hypertext Markup Language">HTML</abbr></p>

XHTML 1.0 is the W3C's first Recommendation for XHTML, following on

LEARNING HTML 12

CELLSPACING AND CELLPADDING

LEARNING HTML 15

COLSPAN AND ROWSPAN

LEARNING HTML 16

TABLE CAPTION TAG

TABLE HEADER AND FOOTER

LEARNING HTML 17

UNORDERDED LIST TAG

LIST ITEM TAG

The <LI> tag is used to display list items in an Ordered list or

ORDERDED LIST TAG

LEARNING HTML 19

HTML DEFINITION LIST

INLINE FRAME TAG

The <IFRAME> tag is not somehow related to <frameset> tag,

LEARNING HTML 22

LEARNING HTML 24

SINGLE LINE TEXT INPUT CONTROLS

MULTI LINE TEXT INPUT CONTROLS

LEARNING HTML 26

RADIO BUTTON CONTROL

SELECT BOX CONTROL

LEARNING HTML 27

FILE UPLOAD BOX

submit This creates a button that automatically submits a form.

button This creates a button that is used to trigger a client-side script

Attributes: name (Used to give a name to the control which is sent to

HTML EMBED MULTIMEDIA

HTML STYLE SHEET

INLINE STYLE SHEET

NTERNAL STYLE SHEET

EXTERNAL STYLE SHEET

You might also like