H T M L
HYPER TEXT MARKUP LANGUAGE
YAGANTI SPANDANA
LEARN WITH ME
[Link]
HTML OVERVIEW
HTML stands for Hypertext Markup Language, and it is the most widely
used language to write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML
to simply "mark-up" a text document with tags that tell a Web browser how to
structure it to display.
Originally, HTML was developed with the intent of defining the
structure of documents like headings, paragraphs, lists, and so forth to
facilitate the sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help of
different tags available in HTML language.
BASIC HTML DOCUMENT:
In its simplest form, following is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>SAMPLE DOCUMENT</title>
</head>
<body>
<h1>SAMPLE DOCUMENT</h1>
<p>HELLO ALL</p>
</body>
</html>
Save this HTML page with .HTML extension i.e., file_name.html
using your text editor. Finally open it using a web browser like
Internet Explorer or Google Chrome, or Firefox etc. It must show
the following output:
[Link]
[Link]
HTML TAGS:
As told earlier, HTML is a markup language and makes use of
various tags to format the content. These tags are enclosed within
angle braces <TAG NAME>. Except few tags, most of the tags
have their corresponding closing tags. For example,<HTML> has
its closing tag </HTML> and <BODY> tag has its closing tag
</BODY> tag etc.,
Above example of HTML document uses the following tags:
TAG DESCRIPTION
<!DOCTYPE…> This tag defines the document type and
HTML version.
<html> This tag encloses the complete HTML
document and mainly comprises of document
header which is represented by
<head>...</head> and document body which
is represented by <body> ...</body>
<head> This tag represents the document's header
which can keep other HTML tags like , etc.
[Link]
[Link]
<title> The tag is used inside the tag to mention the
document title.
<body> This tag represents the document's body
which keeps other HTML tags like , , etc.
<h1> This tag represents the heading.
<p> This tag represents a paragraph.
THE <!DOCTYPE> DECLARATION
The declaration tag is used by the web browser to understand the
version of the HTML used in the document. Current version of
HTML is 5 and it makes use of the following declaration:
< !DOCTYPE HTML >
There are many other declaration types which can be used in HTML
document depending on what version of HTML is being used. We
will see more details on this while discussing tag along with other
HTML tags.
[Link]
[Link]
HTML-BASIC TAGS:
HEADING TAGS:
Any document starts with a heading. You can use different sizes
for your headings. HTML also has six levels of headings, which
use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
While displaying any heading, browser adds one line before and
one line after that heading.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE FOR HEADINGS
TAGS</title>
</head>
<body>
<h1>THIS IS HEADING 1</h1>
<h2>THIS IS HEADING 2</h2>
<h3>THIS IS HEADING 3</h3>
<h4>THIS IS HEADING 4</h4>
<h5>THIS IS HEADING 5</h5>
<h6>THIS IS HEADING 6</h6>
</body>
</html>
OUTPUT:
[Link]
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 as shown below in the
example:
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE FOR PARAGRAPH
TAG</title>
<body>
<p>THIS IS FIRST PARAGRAPH</p>
<p>THIS IS SECOND
PARAGRAPH</p>
<p>THIS IS THIRD PARAGRAPH</p>
</body>
</html>
OUTPUT:
[Link]
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, where you do not need opening and closing tags, as
there is nothing to go in between them.
The </br> tag has a space between the characters br and the
forward slash. If you omit this space, older browsers will have
trouble rendering the line break, while if you miss the forward
slash character and just use </br> it is not valid in XHTML.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE FOR BRAK TAG</title>
</head>
<body>
<p>hii all! </br> How are you all! </p>
</body>
</html>
OUTPUT:
[Link]
CENTERING CONTENT:
You can use tag to put any content in the center of the page or any
table cell.
EXAPMLE:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE FOR CENTER TAG</title>
</head>
<body>
<p>CENTER TAG</p>
<center><P>
TWINKLE,TWINKLE ,LITTLE STAR,</br>
HOW I WONDER WHAT YOU ARE</br>
UP ABOVE THE WORLD SO HIGH,</br>
LIKE A DIAMOND IN THE SKY.</P></br>
</center>
</body>
</html>
OUTPUT:
[Link]
HORIZONTAL LINES:
Horizontal lines are used to visually break-up sections of a document.
The tag creates a line from the current position in the document to the
right margin and breaks the line accordingly. For example, you may
want to give a line between two paragraphs as in the given example
below:
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>EXAPMLE FOR HORIZONAL
TAG</title>
<body>
<p>THIS IS FIRST PARAGRAPH</p><hr>
<p>THIS IS SECOND PARAGRAPH</p>
</body>
</html>
OUTPUT:
Again tag is an example of the empty element, where you do not
need opening and closing tags, as there is nothing to go in between
them. The element has a space between the characters hr and the
forward slash. If you omit this space, older browsers will have
trouble rendering the horizontal line, while if you miss the forward
slash character and just use it is not valid in XHTML
[Link]
PRESERVE FORMATTING:
Sometimes, you want your text to follow the exact format of how it
is written in the HTML document. In these cases, you can use the
preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag
will preserve the formatting of the source document.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE FOR PRESERVE FORMATTING TAG</title>
</head>
<body>
<pre>
Function add(){
Int a=10;
Int b=20;
Int sum=a+b;
}
</pre>
</body>
</html>
OUTPUT:
[Link]
NON BREAKING SPACES:
In some cases we have to give more than one space between the
words, If we gave that spaces directly the browser doesn’t allow
those spaces. In such cases we can use this non breaking spaces
( ) . Follow the below example to understand more about
this  .
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE FOR NON BREAKING SPACE TAG</title>
</head>
<body>
<p>LOVE IS AN IRRESISTIBLE DESIRE TO BE IRRESISTIBLY DESIRED!</p>
<p>LOVE IS AN IRRESISTIBLE     DESIRE TO BE IRRESISTIBLY
DESIRED!</p>
</body>
</html>
OUTPUT:
[Link]
HTML ELEMENTS
An HTML element is defined with the starting tag. If this tag
followed with some content then it ends with closing tag.
Some of the elements are given below:
STARTING CONTENT ENDING TAG
TAG
<p> Paragraph tag </p>
<center> Center tag </center>
<title> Title tag </title>
</br>
</hr>
We also have some HTML elements which don’t need to be
closed. Some of them are </hr>,</br>,<img>,etc..,
NESTED HTML ELEMENTS:
Nested html elements means inserting one element in another
element.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE FOR NESTED
ELEMENTS</title>
</head>
<body>
<p>this is <u>underline</u> tag</p>
</body>
</html>
[Link]
HTML FORMATTING TAGS
TAG DESCRIPTION
Bold Output of the text is in bold format
Italic Output of the text is in bold format
Underline Output of the text will get along with underline
Strike text Striked text will be printed
Monospaced Font The content of a <tt>...</tt> element is written in
monospaced font. Most of the fonts are known as variable-
width fonts because different letters are of different widths
(for example, the letter 'm' is wider than the letter 'i'). In a
monospaced font, however, each letter has the same width.
Superscript Text The content of a <sup>--</sup> element is written in
superscript; the font size used is the same size as the
characters surrounding it but is displayed half a character's
height above the other characters.
Subscript Text The content of a <sub>-- </sub> element is written in
subscript; the font size used is the same as the characters
surrounding it, but is displayed half a character's height
beneath the other characters.
Inserted Text Anything that appears within <ins>--</ins> element is
displayed as inserted text.
Deleted Text Anything that appears within <del>---</del> element, is
displayed as deleted text.
Larger Text The content of the<big>---</big> element is displayed one
font size larger than the rest of the text surrounding it
Smaller Text The content of the<small>---</small> element is displayed
one font size smaller than the rest of the text surrounding it
Grouping Content The <div> and <span> elements allow you to group
together several elements to create sections or subsections
of a page.
[Link]
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE FOR FORMATTING TAG</title>
<body>
<b>THIS IS AN EXAMPLE FOR BOLD FORMATTING TAG</b><br>
<i>THIS IS AN EXAMPLE FOR ITALIC FORMATTING TAG</i><br>
<u>THIS IS AN EXAMPLE FOR UNDERLINE FORMATTING TAG</u><br>
<strike>THIS IS AN EXAMPLE FOR STRIKE FORMATTING TAG</strike><br>
<tt>THIS IS AN EXAMPLE FOR MONOSPACE FORMATTING TAG</tt><br>
<p>a<sup>2</sup>+b<sup>2</sup></p><br>
<p>H<sub>2</sup>SO<sup>4</sup></p><br>
<ins>THIS IS AN EXAMPLE FOR INSERT FORMATTING TAG</ins><br>
<del>THIS IS AN EXAMPLE FOR BOLD FORMATTING TAG</del><br>
<big>THIS IS AN EXAMPLE FOR LARGE FORMATTING TAG</big><br>
<small>THIS IS AN EXAMPLE FOR SMALLER FORMATTING TAG</small><br>
<b>THIS IS AN EXAMPLE FOR BOLD FORMATTING TAG</b><br>
<div>
<a href=“#”>HOME</a>
<a href=“#”>CONTACT</a>
<a href=“#”>ABOUT</a>
</div>
</body>
</html>
OUTPUT:
[Link]
HTML PHRASE TAGS:
TAG DESCRIPTION
Emphasized Anything that appears within <em>---</em> element is
displayed as emphasized text.
Marked Text Anything that appears with-in <mark>---</mark>element, is
displayed as marked with yellow ink.
Strong Text Anything that appears within <strong>---</strong> element
is displayed as important text.
Quoting Text When you want to quote a passage from another source, you
should put it in between <blockquote>---</blockquote>
tags.
Text inside a <blockquote> element is usually indented
from the left and right edges of the surrounding text, and
sometimes uses an italicized font.
Short Quotations The <q>---</q> element is used when you want to add a
double quote within a sentence.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE FOR PHRASE TAGS</title>
</head>
<body>
<em>THIS IS THE EXAMPLE FOR EMPHASIZED TEXT</em>
<mark>THIS IS THE EXAMPLE FOR MARKED TEXT</mark>
<strong>THIS IS THE EXAMPLE FOR STRONG TEXT</strong>
<blockquote>THIS IS THE EXAMPLE FOR QUOTING
TEXT</blockquote>
<q>THIS IS THE EXAMPLE FOR SHORT QUOTING TEXT</q>
</body>
</html>
[Link]
OUTPUT:
[Link]
HTML TABLE TAGS:
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for
formatting
<col> Specifies column properties for each column within a
<colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE FOR TABLE TAGS</title>
</head>
<body>
<table>
<tr>
<th>Company</th> <th>Contact</th> <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td>
</tr>
</table>
</body>
</html>
[Link]
OUTPUT:
HTML LIST TAGS:
TAG DESCRIPTION
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
[Link]
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE FOR LIST TAGS</title>
</head>
<body>
<ul>
<li>Coffee</li> <li>Tea</li> <li>Milk</li>
</ul>
<ol>
<li>Coffee</li> <li>Tea</li> <li>Milk</li>
</ol>
<dl>
<dt>Coffee</dt> <dd>- black hot drink</dd>
<dt>Milk</dt> <dd>- white cold drink</dd>
</dl>
</body>
</html>
OUTPUT:
[Link]
HTML FORM TAGS
Tag Description
It defines an HTML form to enter
<form>
inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
It defines a caption for a <fieldset>
<legend>
element.
<select> It defines a drop-down list.
It defines a group of related options in
<optgroup>
a drop-down list.
<option> It defines an option in a drop-down list.
HTML FORM ELEMENT:
<button> It defines
The HTML <form> element providea clickable button. section to
a document
take input from user. It provides various interactive controls for
submitting information to web server such as text field, text area,
password field, etc.
Syntax:
<form>
//Form elements
</form>
HTML FORM 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.
[Link]
HTML TEXTFIELD CONTROL:
The type="text" attribute of input tag creates text field control also
known as single line text field control. The name attribute is
optional, but it is required for the server side component such as
JSP, ASP, PHP etc.
LABEL TAG IN FORM:
It is considered better to have label in form. As it makes the code
parser/browser/user friendly.
If you click on the label tag, it will focus on the text control. To do
so, you need to have for attribute in label tag that must be same as
id attribute of input tag.
HTML PASSWORD FIELD CONTROL:
The password is not visible to the user in password field control.
HTML EMAIL FIELD CONTROL:
The email field in new in HTML 5. It validates the text for correct
email address. You must use @ and . in this field.
RADIO BUTTON CONTROL:
The radio button is used to select one option from multiple
options. It is used for selection of gender, quiz questions etc.
If you use one name for all the radio buttons, only one radio
button can be selected at a time.
Using radio buttons for multiple options, you can only choose
a single option at a time.
CHECKBOX CONTROL:
The checkbox control is used to check multiple options from
given checkboxes.
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.
HTML <fieldset> ELEMENT:
The <fieldset> element in HTML is used to group the related
information of a form. This element is used with <legend>
element which provide caption for the grouped elements.
[Link]
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<h2>Registration form</h2>
<form>
<fieldset>
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
<input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="ma
le"/>Male <br>
<input type="radio" id="gender" name="gender" value="fe
male"/>Female <br/>
<input type="radio" id="gender" name="gender" value="oth
ers"/>others <br/>
<br>Enter your Address:<br>
<textarea></textarea><br>
<input type="submit" value="sign-up">
</fieldset>
</form>
</body>
</html>
[Link]
OUTPUT:
[Link]
HTML MEDIA TAGS:
HTML IMAGE ELEMENT:
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are
linked to web pages. The <img> tag creates a holding space for the
referenced image.
The <img> tag is empty, it contains attributes only, and does not
have a closing tag.
The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image
HTML VIDEO ELEMENT:
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.
The text between the <video> and </video> tags will only be
displayed in browsers that do not support
the <video> element.
• To start a video automatically we can use
the autoplay attribute
• Add muted after autoplay to let your video start playing
automatically (but muted).
[Link]
HTML AUDIO ELEMENT:
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.
The text between the <audio> and </audio> tags will only be
displayed in browsers that do not support the <audio> element.
To start an audio file automatically, we can use
the autoplay attribute
Add muted after autoplay to let your audio file start playing
automatically (but muted).
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE FOR MULTITMEDIA TAGS</title>
</head>
<body>
<img
src=[Link]
[Link] alt=“SMILY”>
<video controls><source
src=[Link]
%2Fwatch%3Fv%3Di_4Pj_IVh48&psig=AOvVaw37DPAYLnODajnXCgKEN47y&ust=
1734790561622000&source=images&cd=vfe&opi=89978449&ved=0CBQQjRxqF
woTCNCr6s7EtooDFQAAAAAdAAAAABAE></video>
<audio controls><source
src=[Link]
m%2Fdownload-free-funny-sound-
[Link]&psig=AOvVaw0Zq4wFYHzPvA9M2qwlOaUJ&ust=1734790720143000
&source=images&cd=vfe&opi=89978449&ved=0CBQQjRxqFwoTCICZgZvFtooDFQ
AAAAAdAAAAABAE></audio>
</body>
</html>
OUTPUT:
THANK
YOU
[Link]