Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
51 views

Learning HTML

HTML is a markup language used to structure and present content on the web. It uses tags to define headings, paragraphs, lists and other elements. Common tags include <h1> for main headings, <p> for paragraphs, <ul> for unordered lists and <a> for links. CSS can be used to style and lay out HTML elements.

Uploaded by

IX-B-MAYANK YADAV (5466)
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
51 views

Learning HTML

HTML is a markup language used to structure and present content on the web. It uses tags to define headings, paragraphs, lists and other elements. Common tags include <h1> for main headings, <p> for paragraphs, <ul> for unordered lists and <a> for links. CSS can be used to style and lay out HTML elements.

Uploaded by

IX-B-MAYANK YADAV (5466)
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 38

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>

<h3>  Heading3  <h3>Heading 3  


Example</h3>

<h4>  Heading4  <h4>Heading 4  


Example</h4>

<h5>  Heading5  <h5>Heading 5  


Example</h5>

<h6>  Heading6  <h6>Heading 6  


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>  
<!-- This is valid comment -->  
<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>  
<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 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> <!-- First group of tags -->  
<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>  
<!-- Second group of tags -->  
<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> 
<option>…</option> 
<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 
 

. 

You might also like