HTML Documents
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>
</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>
<b> tag bold the text given inside it to draw the reader's attention to the important text.
<b>Hello World</b>
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>
<u>Hello World</u>
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>
</head>
<body>
<p align="center">
</p>
</body>
</html>
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>
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:
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:
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>
</head>
<body>
<h1><font color="red" size="1" face="arial,verdana">Hello
World</font></h1>
</body>
</html>
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.
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:
<ul>
<li>Orange</li>
<li>Apple</li>
<li>Grapes</li>
<li>Banana</li>
<li>Pineapple</li>
</ul>
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:
<ul type="sqare">
<li>Orange</li>
<li>Apple</li>
<li>Grapes</li>
<li>Banana</li>
<li>Pineapple</li>
</ul>
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>
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
<li>Orange</li>
<li>Apple</li>
<li>Grapes</li>
<li>Banana</li>
<li>Pineapple</li>
</ol>
<li>Orange</li>
<li>Apple</li>
<li>Grapes</li>
<li>Banana</li>
<li>Pineapple</li>
</ol>
<li>Apple</li>
<li>Grapes</li>
<li>Banana</li>
<li>Pineapple</li>
</ol>
<li>Orange</li>
<li>Apple</li>
<li>Grapes</li>
<li>Banana</li>
<li>Pineapple</li>
</ol>
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>
<dt>Heading Two</dt>
<dt>Heading Three</dt>
</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>
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.
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:
The bgcolor attribute specifies the background color of the marquee. Here is an example of how to use
the <marquee> tag with bgcolor attribute:
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>
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>
</head>
<body>
<h1>Hello World</h1>
<hr/>
<p>
</p>
</body>
</html>
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>
</head>
<body>
</body>
</html>
HTML Image
The <img> tag in HTML is used to embed images in an HTML document.
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>
</body>
</html>
<html>
<head>
<title>Anchor Tag</title>
</head>
<body>
</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>
</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>
</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>
<tr align="right">
</tr>
<tr>
</tr>
</table>
</body>
</html>
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>
<tr>
<td height="100px">A</td>
<td>B</td>
</tr>
<tr>
</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.
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>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.
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>
</head>
<body>
<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>
You can use the <thead>, <tbody> and <tfoot> tags to group the rows of an HTML table
into separate sections.
<html>
<head>
</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>
<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>
</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>
</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>
</body>
</html>
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 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.
<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 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 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> tag is used to group related options in a <select> element (drop-down list).
<html>
<head>
<title>Form Tags</title>
</head>
<body>
<label>Name</label>
<label>Gender</label>
<label>Hobbies</label>
<label>Message</label>
<label>Country</label>
<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>
</form>
</body>
</html>
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>
<fieldset>
<option value="in">India</option>
<option value="pk">Pakistan</option>
<option value="ne">Nepal</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>
<datalist
id="cars">
<option
value="Innova">
<option
value="Kwid">
<option
value="Etios">
<option
value="Swift">
<option
value="Duster">
</datalist>
<br><br>
<br><br>
</fieldset>
</form>
</body>
</html>
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="reset"> defines a reset button that will reset all form values to their default
values:
<input type="radio"> defines a radio button.Radio buttons let a user select ONLY ONE of
a limited number of choices:
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.
The <input type="email"> is used for input fields that should contain an e-mail address.
The <input type="image"> defines an image as a submit button. The path to the image is
specified in the src attribute.
<html>
<head>
</head>
<body>
<form action="">
<br><br>
<br><br>
<br><br>
<label>Date</label> <input type="date"
name=""/>
<br><br>
<label>DateTime</label> <input
type="datetime-local" name=""/>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<input type="submit"/>
</form>
</body>
</html>
The <input type="file"> defines a file-select field and a "Browse" button for file uploads.
The <input type="month"> allows the user to select a month and year.
The <input type="search"> is used for search fields (a search field behaves like a regular
text field).
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.
The <input type="url"> is used for input fields that should contain a URL address.
The <input type="week"> allows the user to select a week and year.
Previous