Scribd
Upload
11 views

HTML Documents

The document provides an overview of HTML structure and formatting, detailing the use of various tags such as <html>, <head>, <body>, and formatting elements like headings, paragraphs, lists, and text styles. It also covers the <marquee> tag for scrolling text, the <img> tag for images, and the <a> tag for hyperlinks, including attributes for customization. Additionally, it explains the use of lists and the importance of using CSS over deprecated HTML tags for styling.

Uploaded by

manojkumarmathur783858
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views

HTML Documents

The document provides an overview of HTML structure and formatting, detailing the use of various tags such as <html>, <head>, <body>, and formatting elements like headings, paragraphs, lists, and text styles. It also covers the <marquee> tag for scrolling text, the <img> tag for images, and the <a> tag for hyperlinks, including attributes for customization. Additionally, it explains the use of lists and the importance of using CSS over deprecated HTML tags for styling.

Uploaded by

manojkumarmathur783858
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 35

HTML Documents

The HTML document itself begins with <html> and ends with </html>.
<head> tag contains the title of web page.
The visible part of the HTML document is between <body> and </body>.

<html>

<head>

<title>First Web Page</title>

</head>

<body>

Hello World

</body>

</html>

HTML Formatting
HTML Headings

To create headings in HTML, you can use the <h1> to <h6> tags. The <h1> tag defines the most
important heading and <h6> defines the least important heading. You should only use
one <h1> per page
Here is an example of how to create a header using HTML

<h1>Hello World</h1>

<h2>Hello World</h2>

<h3>Hello World</h3>

<h4>Hello World</h4>

<h5>Hello World</h5>

<h6>Hello World</h6>

HTML Paragraphs

To create paragraphs in HTML, you can use the <p> tag. The <p> element defines a
paragraph. A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.
<p>Quisque iaculis consectetur odio. Praesent commodo.</p>

<p>Vestibulum et dolor pellentesque magna pulvinar fermentum a


at eros. Pellentesque vel imperdiet enim. Phasellus eget
volutpat purus.</p>

HTML <b> Tag

<b> tag bold the text given inside it to draw the reader's attention to the important text.

<b>Hello World</b>

HTML <i> Tag

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside
is typically displayed in italic.

<i>Hello World</i>

HTML <u> Tag

The contents inside this tag displayed with an underline.

<u>Hello World</u>

HTML <s> Tag

The <s> HTML element is used to represent text that is no longer accurate or relevant. The text
will be displayed with a line through it.
Here is an example of how to use the <s> tag:

<s>Hello World</s>

Align Property

The align attribute is used to specify the alignment of text content of an element.There are Four
align types
Align Types : Left, Right, Center, Justify
Here is an example of how to use the align attribute with center value:

<html>
<head>

<title>First Web Page</title>

</head>

<body>

<h1 align="center">Hello World</h1>

<p align="center">

Quisque iaculis consectetur odio. Praesent commodo, est nec


suscipit ultricies, nulla eros

molestie mauris, eu tincidunt ex nunc non ipsum. Maecenas


ornare semper ante, volutpat euismod

arcu faucibus id. Vivamus ut nisi nec tellus condimentum


auctor a eu dui. Quisque nunc urna,

euismod sit amet pharetra vitae, mollis vitae leo. Aenean


viverra consequat nibh

</p>

</body>

</html>

HTML <sup> Tag

The <sup> HTML element is used to represent superscript text. Superscript text appears half a
character above the normal line and is sometimes rendered in a smaller font.
Here is an example of how to use the <sup> tag:

<p>12<sup>th</sup></p>

HTML <sub> Tag

The <sub> HTML element is used to represent subscript text. Subscript text appears half a
character below the normal line and is sometimes rendered in a smaller font.
Here is an example of how to use the <sub> tag:

<p>H<sub>2</sub>O</p>
HTML <br/> Tag

The <br> HTML element produces a line break in text (carriage-return). It is useful for
writing a poem or an address, where the division of lines is significant.
Here is an example of how to use the <br> tag:

<p>Quisque iaculis consectetur odio.<br/> Praesent commodo, est


nec suscipit ultricies, <br/>nulla eros molestie mauris, eu
<br/>tincidunt ex nunc non ipsum. Maecenas ornare semper
<br/>ante, volutpat euismod arcu faucibus id</p>

HTML Non-breaking space

The non-breaking space is a special character in HTML that prevents the browser from
breaking a line at that point. It is useful for writing text that should not be broken by line
breaks or other whitespace.
Here is an example of how to use the non-breaking space:

<h1>Hello &nbsp;&nbsp;&nbsp; World</h1>

PreviousNext
HTML <font> Tag
HTML font is used to change the color, size, and style of text on a web page. You can use
the HTML <font> tag to add style, size, and color to the text on your website. However, it is
recommended to use CSS instead of HTML <font> tag.

Here are some of the best web safe fonts for HTML and CSS:
- Arial (sans-serif)
- Verdana (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)¹

<html>

<head>

<title>First Web Page</title>

</head>

<body>
<h1><font color="red" size="1" face="arial,verdana">Hello
World</font></h1>

<h1><font color="green" size="2" face="arial,verdana">Hello


World</font></h1>

<h1><font color="blue" size="3" face="arial,verdana">Hello


World</font></h1>

<h1><font color="purple" size="4" face="arial,verdana">Hello


World</font></h1>

<h1><font color="#fd521e" size="5" face="arial,verdana">Hello


World</font></h1>

<h1><font color="#be2276" size="6" face="arial,verdana">Hello


World</font></h1>

<h1><font color="#4c4f6b" size="7" face="arial,verdana">Hello


World</font></h1>

</body>

</html>

Set Font Size

You can set content font size using size attribute.

Setting Font Face

You can set font face using face attribute but be aware that if the user viewing the page
doesn't have the font installed, they will not be able to see it. Instead user will see the
default font face applicable to the user's computer.

Setting Font Color

You can set any font color you like using color attribute. You can specify the color that you
want by either the color name or hexadecimal code for that color.

HTML Lists
HTML lists are used to specify lists of information. There are three different types of HTML
lists:

 Ordered List or Numbered List (ol)


 Unordered List or Bulleted List (ul)
 Description List or Definition List (dl)

1. Unordered HTML List


The HTML <ul> tag defines an unordered (bulleted) list.
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list
items will be marked with bullets (small black circles) by default:

<ul>

<li>Orange</li>

<li>Apple</li>

<li>Grapes</li>

<li>Banana</li>

<li>Pineapple</li>

</ul>

Unordered List with type property

You can use the type attribute in the <ul> tag to specify the type of bullet point you want to
use for each list item in an unordered list. Here is an example of how to create an
unordered list with different bullet types:

Types : disc, square, circle

<ul type="sqare">

<li>Orange</li>

<li>Apple</li>

<li>Grapes</li>

<li>Banana</li>

<li>Pineapple</li>

</ul>

2. Ordered HTML List

To create an ordered list in HTML, you can use the <ol> tag. Each element of an ordered
list is declared inside the <li> tag. Here is an example of an ordered list:

<ol>

<li>Orange</li>
<li>Apple</li>

<li>Grapes</li>

<li>Banana</li>

<li>Pineapple</li>

</ol>

Ordered List with type and start property

You can use the type attribute in the <ol> tag to specify the type of numbering you want to
use for each list item in an ordered list. You can also use the start attribute to specify the
starting number for the list. Here is an example of how to create an ordered list with different
numbering types and a starting number:

Types : A,a,i.I,1

<ol type="A" start="3">

<li>Orange</li>

<li>Apple</li>

<li>Grapes</li>

<li>Banana</li>

<li>Pineapple</li>

</ol>

<ol type="a" start="4">

<li>Orange</li>

<li>Apple</li>

<li>Grapes</li>

<li>Banana</li>

<li>Pineapple</li>

</ol>

<ol type="i" start="10">


<li>Orange</li>

<li>Apple</li>

<li>Grapes</li>

<li>Banana</li>

<li>Pineapple</li>

</ol>

<ol type="I" start="100">

<li>Orange</li>

<li>Apple</li>

<li>Grapes</li>

<li>Banana</li>

<li>Pineapple</li>

</ol>

3. HTML Discription List

In HTML, you can create a description list using the <dl> tag. A description list is a list of
terms and their descriptions. Each term is declared inside the <dt> tag and each description
is declared inside the <dd> tag. Here is an example of a description list:

<dl>

<dt>Heading One</dt>

<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Vivamus porta nunc sem, non tincidunt

quam accumsan eget. Integer non cursus est. Cras eu ex odio.


Suspendisse euismod laoreet

porttitor. Pellentesque ac sem nec dolor ullamcorper


gravida.</dd>

<dt>Heading Two</dt>

<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Vivamus porta nunc sem, non tincidunt
quam accumsan eget. Integer non cursus est. Cras eu ex odio.
Suspendisse euismod laoreet

porttitor. Pellentesque ac sem nec dolor ullamcorper


gravida.</dd>

<dt>Heading Three</dt>

<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Vivamus porta nunc sem, non tincidunt

quam accumsan eget. Integer non cursus est. Cras eu ex odio.


Suspendisse euismod laoreet

porttitor. Pellentesque ac sem nec dolor ullamcorper


gravida.<dd>

</dl>

HTML Marquee
The <marquee> tag in HTML is used to create a scrolling or moving text or image effect.
However, it is considered an obsolete and non-standard tag in HTML5 and is not
recommended for use. The <marquee> tag was supported by older web browsers, but
modern browsers have phased out support for it.

If you still wish to use the <marquee> tag, here's an example of its basic usage:

<marquee>Hello World</marquee>

Marquee with behavior

<marquee behavior="scroll">Hello World</marquee>

<marquee behavior="slide">Hello World</marquee>

<marquee behavior="alternate">Hello World</marquee>

Marquee with scrollamount

<marquee behavior="scroll" scrollamount="5">Hello


World</marquee>

<marquee behavior="slide" scrollamount="10">Hello


World</marquee>

<marquee behavior="alternate" scrollamount="2">Hello


World</marquee>
Marquee with direction

<marquee behavior="scroll" scrollamount="5"


direction="left">Hello World</marquee>

<marquee behavior="slide" scrollamount="10"


direction="right">Hello World</marquee>

<marquee behavior="alternate" scrollamount="2"


direction="up">Hello World</marquee>

<marquee behavior="scroll" scrollamount="8"


direction="down">Hello World</marquee>

In the example above, the text or image within the <marquee> tags will scroll from right to
left. Here's a breakdown of the attributes used:

 direction: Specifies the direction of the scroll. It can be set to "left", "right", "up", or "down".
 behavior: Defines the scrolling behavior. It can be set to "scroll", "slide", or "alternate" (scrolls
back and forth).
 scrollamount: Sets the speed of the scrolling motion. The value can be adjusted according to
your preference.

Marquee with loop

The loop attribute specifies how many times the marquee should loop. If the loop attribute is not
specified, the marquee will scroll only once. Here is an example of how to use the <marquee> tag with
loop attribute:

<marquee scrollamount="5" loop="3">Hello World</marquee>

Marquee with bgcolor

The bgcolor attribute specifies the background color of the marquee. Here is an example of how to use
the <marquee> tag with bgcolor attribute:

<marquee scrollamount="5" bgcolor="pink">Hello World</marquee>

Marquee with height and width

The height and width attributes specify the height and width of the marquee. Here is an example of how
to use the <marquee> tagw with height and width:
<marquee scrollamount="5" bgcolor="pink" height="50%"
width="50%">Hello World</marquee>

HTML Pre & Horizontal Rule


HTML <hr/> Tag

The <hr> HTML element is used to create a horizontal line in an HTML page. It is often
used to separate sections of a page.
Here is an example of how to use the <hr> tag:

<html>

<head>

<title>First Web Page</title>

</head>

<body>

<h1>Hello World</h1>

<hr/>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Vivamus porta nunc sem, non tincidunt

quam accumsan eget. Integer non cursus est. Cras eu ex odio.


Suspendisse euismod laoreet

porttitor. Pellentesque ac sem nec dolor ullamcorper gravida.

</p>

</body>

</html>

HTML <pre> Tag

The <pre> HTML element is used to define preformatted text. The text inside
a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both
spaces and line breaks.
Here is an example of how to use the <pre> tag:
<html>

<head>

<title>First Web Page</title>

</head>

<body>

<pre> Hello World LBSTI </pre>

</body>

</html>

HTML Image
The <img> tag in HTML is used to embed images in an HTML document.

 The src attribute specifies the URL of the image.


 The alt attribute specifies an alternate text for the image, which is displayed if the
image cannot be loaded .
 You can also use the width and height attributes to specify the size of the image.

Here is an example of how to use the <img> tag:

<img src="YOUR IMAGE PATH" alt="Hello World" width="500px"


height="600px" title="Hello World">

HTML Anchor
The <a> tag in HTML is used to create hyperlinks. The href attribute specifies the URL of
the page the link goes to.
Here is an example of how to use the <a> tag:

<html>

<head>

<title>Anchor Tag</title>

</head>

<body>

<a href="https://www.LBSTI.net">Go to LBSTI</a>

</body>

</html>

Anchor Tag with target property


The target attribute specifies where to open the linked document.It specifies that the linked
document should be opened in a new window or tab. The value “_blank” specifies that the
linked document should be opened in a new window or tab.
Here is an example of how to use the target attribute:

<html>

<head>

<title>Anchor Tag</title>

</head>

<body>

<a href="https://www.LBSTI.net" target="_blank">Go to LBSTI</a>

</body>

</html>

HTML Anchor II
Internal Page Link

To create an internal link in HTML with the name attribute, you can use the <a> tag with the href
attribute set to the value of the name attribute on the element you want to link to.
Here is an example of how to create an internal link:

<html>

<head>

<title>Anchor Tag</title>

</head>

<body>

<a name="top"></a>

<a href="#linkone">Go to Link One</a><br/>

<a href="#linksecond">Go to Link Second</a>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Pellentesque sit amet molestie odio. Integer auctor tincidunt
massa sit amet lacinia. Sed non massa nec augue viverra blandit
sed ac mauris. Aliquam pellentesque pulvinar quam, sit amet
aliquam dui iaculis et. Praesent pulvinar rhoncus sollicitudin.
Vivamus sed maximus sapien.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing


elit. Pellentesque sit amet molestie odio. Integer auctor
tincidunt massa sit amet lacinia. Sed non massa nec augue
viverra blandit sed ac mauris. Aliquam pellentesque pulvinar
quam, sit amet aliquam dui iaculis et. Praesent pulvinar rhoncus
sollicitudin. Vivamus sed maximus sapien.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing


elit. Pellentesque sit amet molestie odio. Integer auctor
tincidunt massa sit amet lacinia. Sed non massa nec augue
viverra blandit sed ac mauris. Aliquam pellentesque pulvinar
quam, sit amet aliquam dui iaculis et. Praesent pulvinar rhoncus
sollicitudin. Vivamus sed maximus sapien.</p>

<h2><a name="linkone">Sub Heading One</a></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing


elit. Pellentesque sit amet molestie odio. Integer auctor
tincidunt massa sit amet lacinia. Sed non massa nec augue
viverra blandit sed ac mauris. Aliquam pellentesque pulvinar
quam, sit amet aliquam dui iaculis et. Praesent pulvinar rhoncus
sollicitudin. Vivamus sed maximus sapien.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing


elit. Pellentesque sit amet molestie odio. Integer auctor
tincidunt massa sit amet lacinia. Sed non massa nec augue
viverra blandit sed ac mauris. Aliquam pellentesque pulvinar
quam, sit amet aliquam dui iaculis et. Praesent pulvinar rhoncus
sollicitudin. Vivamus sed maximus sapien.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing


elit. Pellentesque sit amet molestie odio. Integer auctor
tincidunt massa sit amet lacinia. Sed non massa nec augue
viverra blandit sed ac mauris. Aliquam pellentesque pulvinar
quam, sit amet aliquam dui iaculis et. Praesent pulvinar rhoncus
sollicitudin. Vivamus sed maximus sapien.</p>

<a href="#top">GoTo Top</a>

<h2><a name="linksecond">Sub Heading Second</a></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing


elit. Pellentesque sit amet molestie odio. Integer auctor
tincidunt massa sit amet lacinia. Sed non massa nec augue
viverra blandit sed ac mauris. Aliquam pellentesque pulvinar
quam, sit amet aliquam dui iaculis et. Praesent pulvinar rhoncus
sollicitudin. Vivamus sed maximus sapien.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque sit amet molestie odio. Integer auctor
tincidunt massa sit amet lacinia. Sed non massa nec augue
viverra blandit sed ac mauris. Aliquam pellentesque pulvinar
quam, sit amet aliquam dui iaculis et. Praesent pulvinar rhoncus
sollicitudin. Vivamus sed maximus sapien.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing


elit. Pellentesque sit amet molestie odio. Integer auctor
tincidunt massa sit amet lacinia. Sed non massa nec augue
viverra blandit sed ac mauris. Aliquam pellentesque pulvinar
quam, sit amet aliquam dui iaculis et. Praesent pulvinar rhoncus
sollicitudin. Vivamus sed maximus sapien.</p>

<a href="#top">GoTo Top</a>

</body>

</html>

Mail to link

To create a link to an email address in HTML, you can use the <a> tag with the href attribute set
to “mailto:” followed by the email address.
In this example, clicking on the link will open the default email client with the recipient set to
“[email protected]” with subject as Hello World and body as this is just test.

<html>

<head>

<title>Anchor Tag II</title>

</head>

<body>

<a href="mailto:[email protected]?subject=Hello
World&body=this is just test">Contact Us</a>

</body>

</html>

HTML Tables
HTML tables are used to display data in rows and columns. They are created using
the <table> tag and its related tags such as <tr> (table row), <th> (table header),
and <td> (table data).
Here is an example of how to create a simple HTML table:

<html>

<head>

<title>Table Tag</title>

</head>

<body>

<table border="1" align="center" width="80%"


cellpadding="10px" cellspacing="10px">

<tr align="right">

<td valign="top">Nunc et eros mi. Nam


purus diam</td>

<td>Sed non massa nec augue viverra


blandit sed ac mauris. Aliquam pellentesque pulvinar quam</td>

</tr>

<tr>

<td height="400px" valign="top"


align="right">magna porttitor sed. Vivamus condimentum </td>

<td>Ut lobortis quis lacus vel viverra.


Nullam tempor ligula at urna condimentum ultrices. Ut sodales
ornare faucibus. Ut augue neque, interdum sit amet efficitur
euismod</td>

</tr>

</table>

</body>

</html>

Table with Colspan

HTML tables can have cells that span over multiple rows and/or columns.
To make a cell span over multiple columns, use the colspan attribute:

<html>

<head>
<title>Colspan</title>

</head>

<body>

<table border="1" align="center" width="50%"


cellpadding="10px" cellspacing="0px">

<tr>

<td height="100px">A</td>

<td>B</td>

</tr>

<tr>

<td height="100px" colspan="2">C</td>

</tr>

<tr>

<td height="100px">E</td>

<td>F</td>

</tr>

</table>

</body>

</html>

Note: The value of the colspan attribute represents the number of columns to span.

Table with rowspan

To make a cell span over multiple rows, use the rowspan attribute:

<html>

<head>

<title>Rowspan</title>

</head>

<body>
<table border="1" align="center" width="50%"
cellpadding="10px" cellspacing="0px">

<tr>

<td height="100px">A</td>

<td>B</td>

</tr>

<tr>

<td height="100px" rowspan="2">C</td>

<td>D</td>

</tr>

<tr>

<td height="100px">F</td>

</tr>

</table>

</body>

</html>

Note: The value of the rowspan attribute represents the number of rows to span.

Table with caption tag

You can add a caption to an HTML table using the <caption> tag. Here is an example of
how to use the caption tag:

<html>

<head>

<title>Table with caption</title>

</head>

<body>

<table border="1" align="center" width="50%"


cellpadding="10px" cellspacing="0px">
<caption>Student Record</caption>

<tr>

<td height="100px">A</td>

<td>B</td>

</tr>

<tr>

<td height="100px">C</td>

<td>D</td>

</tr>

<tr>

<td height="100px">E</td>

<td>F</td>

</tr>

</table>

</body>

</html>

Table with thead,tbody and tfoot

You can use the <thead>, <tbody> and <tfoot> tags to group the rows of an HTML table
into separate sections.

 <thead> tag is used to group the header content in a table.


 <tbody> tag is used to group the body content in a table.
 <tfoot> tag is used to group the footer content in a table.

Here is an example of how to use these tags:

<html>

<head>

<title>Table with caption</title>

</head>

<body>
<table border="1" align="center" width="50%"
cellpadding="10px" cellspacing="0px">

<thead>

<tr>

<th>Subject</th>

<th>Marks</th>

</tr>

</thead>

<tbody bgcolor="tan">

<tr>

<td>Math</td>

<td>80</td>

</tr>

<tr>

<td>English</td>

<td>70</td>

</tr>

<tr>

<td>Science</td>

<td>75</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>Total Marks</td>

<td>255</td>

</tr>

</tfoot>
</table>

</body>

</html>

HTML Table Layout


<html>
<head>
<title>Table Layout</title>
</head>

<body>
<table width="80%" border="1" cellpadding="10px"
cellspacing="0" align="center">
<tr bgcolor="pink">
<td colspan="2">
<h1>Site Name</h1>
</td>
</tr>
<tr bgcolor="orange">
<td colspan="2">
<a href="">Home</a> | <a href="">About
Us</a> | <a href="">Gallery</a> | <a href="">FAQ</a> | <a
href="">Contact Us</a>
</td>
</tr>
<tr>
<td width="80%">
<h2>Sub Heading</h2>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Morbi vel turpis maximus ex vulputate
venenatis cursus in justo. Donec euismod sagittis vehicula. Mauris
vel fermentum neque. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Sed interdum
placerat molestie. Etiam vestibulum, dui vel vulputate
sollicitudin, quam est pretium justo, sit amet gravida nisl quam ut
arcu. Aenean eu viverra tellus. Maecenas leo orci, ullamcorper
laoreet feugiat vel, consectetur eget leo. Nulla fringilla, leo non
finibus congue, sem massa faucibus felis, vitae sollicitudin diam
nisi eu ante. Nam eu quam malesuada, vehicula tellus eu, consequat
eros. Nam mattis est quis dolor ultricies bibendum. Maecenas eget
tellus ac diam consequat sollicitudin. In feugiat erat varius eros
eleifend posuere. Proin finibus vestibulum ante id tempor. Fusce
sollicitudin nunc a urna varius mollis non sed justo. Suspendisse
consectetur odio interdum libero vestibulum, non consequat est
suscipit.</p>
<p>Nam gravida ligula non ullamcorper
suscipit. Praesent ante nisl, vestibulum eget nibh quis, interdum
ornare tortor. In ac erat pharetra odio egestas viverra. Duis
consectetur tincidunt metus ornare hendrerit. Nullam nulla velit,
lacinia at lacus id, imperdiet dapibus purus. Nam non malesuada
eros, vel congue tortor. Cras massa orci, mattis aliquet feugiat a,
molestie eu nunc. Aenean suscipit sagittis mi sit amet tempus. Cras
porta, augue sit amet scelerisque suscipit, sem ligula vehicula
justo, nec consectetur tortor mauris quis orci. Etiam egestas
mattis justo, ut iaculis nulla interdum sed. Integer feugiat est at
nisl sagittis tincidunt.</p>

</td>
<td valign="top">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</td>
</tr>
<tr bgcolor="pink">
<td colspan="2">
@copyright sitename 2018.
</td>
</tr>
</table>
</body>
</html>

HTML Iframe
<html>
<head>
<title>Iframe Tag</title>
</head>

<body>
<iframe src="https://www.LBSTI.net" align="left"
frameborder="1" width="500px" height="500px"></iframe>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris placerat mi ac leo aliquet, at vehicula risus condimentum.
Nam ultrices magna eleifend ante tempus, id egestas odio
scelerisque. Sed ultrices eros eget tellus ultricies, vel eleifend
dui vulputate. Nunc id purus nec enim tincidunt tincidunt sit amet
vel neque. Donec rhoncus enim sem, a tristique lectus eleifend id.
Suspendisse et felis in nisi malesuada laoreet nec nec lacus. Ut
rutrum porttitor tortor, nec volutpat lorem semper ac. Etiam
sollicitudin maximus nisl, ut posuere felis malesuada eu.
</p>

</body>
</html>
HTML Audio
The HTML <audio> element is used to play an audio file on a web pag
The <audio> HTML element is used to embed sound content in a document, such as music
or other audio streams.
Here is an example of how to use the <audio> tag:

<html>

<head>

<title>Audio Tag</title>

</head>

<body>

<audio controls autoplay loop>

<source src="YOUR_FILE_PATH" type="audio/mpeg"


/>

</audio>

</body>

</html>

The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may
choose from. The browser will use the first recognized format.

HTML Video
The HTML <video> element is used to show a video on a web page.

<html>

<head>

<title>Video Tag</title>

</head>

<body>

<video controls loop width="320" height="240" muted


poster="IMAGE_PATH">
<source src="VIDEO_PATH" type="video/mp4" />

</video>

</body>

</html>

The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not
set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser may
choose from. The browser will use the first recognized format.

PreviousNext
HTML Forms
An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.An HTML form
facilitates the user to enter data that is to be sent to the server for processing such as
name, email address, password, phone number, etc. .

The HTML <form> element is used to create an HTML form for user input:
Here is the Example of Simple Form containing labels.

<html>

<head>

<title>Form Tags</title>

</head>

<body>

<form action="" method="post">

<label>Name</label> <input type="text"


name="fname" value="" placeholder="Enter your name" /> <br><br>

<label>Password</label> <input type="password"


name="" /> <br><br>

<label>Gender</label> <input type="radio"


name="gender" id="male" /><label for="male">Male</label> <input
type="radio" name="gender" id="female"><label
for="female">Female</label> <br><br>

<label>Hobbies</label> <input type="checkbox"


name="hobby" id="music" /><label for="music">Music</label> <input
type="checkbox" name="hobby" id="football"><label
for="football">Football</label> <br><br>

<label>Message</label> <textarea rows="10"


cols="60">Yahoo baba</textarea> <br><br>

</form>

</body>

</html>

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.Usually,
the form data is sent to a file on the server when the user clicks on the submit button.

The Method Attribute

The method attribute specifies the HTTP method to be used when submitting the form
data.The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").
The default HTTP method when submitting form data is GET.

HTML Form Elements


The HTML <form> Elements
The HTML <form> element provide a document section to take input from user. It provides
various interactive controls for submitting information to web server such as text field, text
area, password field, etc.
The HTML <form> element can contain one or more of the following form elements.

 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>
HTML <input> element

The HTML <input> element is fundamental form element. It is used to create form fields, to
take input from user. We can apply different input filed to gather different information form
user. Following is the example to show the simple text input.

The <label> Element

The <label> element defines a label for several form elements.The <label> element is
useful for screen-reader users, because the screen-reader will read out loud the label when
the user focus on the input element.

The <select> Element

The <select> element defines a drop-down list.The <option> elements defines an option
that can be selected. By default, the first item in the drop-down list is selected. Use
the multiple attribute to allow the user to select more than one value:

The <optgroup> Element

The <optgroup> tag is used to group related options in a <select> element (drop-down list).

The <datalist> Element

The <datalist> tag specifies a list of pre-defined options for an <input>


element.The <datalist> tag is used to provide an "autocomplete" feature
for <input> elements. Users will see a drop-down list of pre-defined options as they input
data. The <datalist> element's id attribute must be equal to the <input> element's list
attribute (this binds them together).

<html>

<head>

<title>Form Tags</title>

</head>

<body>

<form action="" method="post">

<label>Name</label>

<input type="text" name="fname" value=""


placeholder="Enter your name" /> <br><br>
<label>Password</label>

<input type="password" name="" /> <br><br>

<label>Gender</label>

<input type="radio" name="gender" id="male" /><label


for="male">Male</label> <input type="radio" name="gender"
id="female"><label for="female">Female</label> <br><br>

<label>Hobbies</label>

<input type="checkbox" name="hobby" id="music" /><label


for="music">Music</label>

<input type="checkbox" name="hobby"


id="football"><label for="football">Football</label> <br><br>

<label>Message</label>

<textarea rows="10" cols="60">Yahoo baba</textarea>


<br><br>

<label>Country</label>

<select name="" size="3" multiple>

<option value="in">India</option>

<option value="pk">Pakistan</option>

<option value="ne">Nepal</option>

<option value="cn"
selected>China</option>

</select>

<br/><br/>

<label>Cars</label>

<select>

<optgroup label="Toyota">

<option>Innova</option>

<option>Etios</option>
<option>Fortuner</option>

</optgroup>

<optgroup label="Renault">

<option>Kwid</option>

<option>Duster</option>

<option>Captur</option>

</optgroup>

</select>

<br><br>

<label>Cars</label>

<input list="cars">

<datalist id="cars">

<option value="Innova">

<option value="Kwid">

<option value="Etios">

<option value="Swift">

<option value="Duster">

</datalist>

<br><br>

<label>Upload File</label>

<input type="file" accept="video/*" name="" />

</form>

</body>

</html>

Submit button control

HTML <input type="submit"> are used to add a submit button on web page. When user
clicks on submit button, then form get submit to the server.The value attribute can be
anything which we write on button on web page.
<html>

<head>

<title>Form Tags</title>

</head>

<body>

<form action="" method="post">

<fieldset>

<legend>Enter Personal Detail</legend>

<label>Name</label> <input type="text"


name="fname" value="" placeholder="Enter your name" /> <br><br>

<label>Password</label> <input type="password"


name="" /> <br><br>

<label>Gender</label> <input type="radio"


name="gender" id="male" /><label for="male">Male</label> <input
type="radio" name="gender" id="female"><label
for="female">Female</label> <br><br>

<label>Hobbies</label> <input type="checkbox"


name="hobby" id="music" /><label for="music">Music</label> <input
type="checkbox" name="hobby" id="football"><label
for="football">Football</label> <br><br>

<label>Message</label> <textarea rows="10"


cols="60">Yahoo baba</textarea> <br><br>

<label>Country</label> <select name="" size="3"


multiple>

<option value="in">India</option>
<option value="pk">Pakistan</option>

<option value="ne">Nepal</option>

<option value="cn" selected>China</option>

</select>

<br/><br/>

<label>Cars</label> <select>

<optgroup label="Toyota">

<option>Innova</option>

<option>Etios</option>

<option>Fortuner</option>

</optgroup>

<optgroup label="Renault">

<option>Kwid</option>

<option>Duster</option>

<option>Captur</option>

</optgroup>

</select>

<br><br>

<label>Cars</label> <input list="cars">

<datalist
id="cars">
<option
value="Innova">

<option
value="Kwid">

<option
value="Etios">

<option
value="Swift">

<option
value="Duster">

</datalist>

<br><br>

<label>Upload File</label> <input type="file"


accept="video/*" name="" />

<br><br>

<input type="submit" value="Save" />

<input type="reset" />

<input type="image" src="IMAGE_PATH"


width="20px" alt="Submit button" />

</fieldset>

</form>

</body>

</html>

HTML5 Input Types


HTML Input Types

Here are the different input types you can use in HTML:

 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">

Input Type Text

<input type="text"> defines a single-line text input field:

Input Type Password

<input type="password"> defines a password field:

Input Type Submit

<input type="submit"> defines a button for submitting form data to a form-handler.

Input Type Reset

<input type="reset"> defines a reset button that will reset all form values to their default
values:

Input Type Radio

<input type="radio"> defines a radio button.Radio buttons let a user select ONLY ONE of
a limited number of choices:

Input Type Checkbox

<input type="checkbox"> defines a checkbox.Checkboxes let a user select ZERO or


MORE options of a limited number of choices.

Input Type Button

<input type="button"> defines a button:

Input Type Color


The <input type="color"> is used for input fields that should contain a color.Depending
on browser support, a color picker can show up in the input field.

Input Type Date

The <input type="date"> is used for input fields that should contain a date.Depending on
browser support, a date picker can show up in the input field.

Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address.

Input Type Image

The <input type="image"> defines an image as a submit button. The path to the image is
specified in the src attribute.

<html>

<head>

<title>HTML5 Input Types</title>

</head>

<body>

<form action="">

<label>Select Color</label> <input


type="color" name=""/>

<br><br>

<label>Number</label> <input type="number"


min="0" max="100" step="10" name=""/>

<br><br>

<label>Range</label> <input type="range"


min="0" max="100" step="10" name=""/>

<br><br>
<label>Date</label> <input type="date"
name=""/>

<br><br>

<label>DateTime</label> <input
type="datetime-local" name=""/>

<br><br>

<label>Month</label> <input type="month"


name=""/>

<br><br>

<label>Week</label> <input type="week"


name=""/>

<br><br>

<label>Time</label> <input type="time"


name=""/>

<br><br>

<label>Email</label> <input type="email"


name=""/>

<br><br>

<label>URL</label> <input type="url"


name=""/>

<br><br>

<label>Search</label> <input type="search"


name=""/>

<br><br>

<label>Phone No.</label> <input type="tel"


name=""/>
<br><br>

<input type="submit"/>

</form>

</body>

</html>

Input Type File

The <input type="file"> defines a file-select field and a "Browse" button for file uploads.

Input Type Month

The <input type="month"> allows the user to select a month and year.

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular
text field).

Input Type Time

The <input type="time"> allows the user to select a time (no time zone).Depending on
browser support, a time picker can show up in the input field.

Input Type Url

The <input type="url"> is used for input fields that should contain a URL address.

Input Type Week

The <input type="week"> allows the user to select a week and year.

Previous

You might also like