HTML
What is HTML?
HTML stands for HyperText Markup Language. It is a standard markup language
for web page creation. It allows the creation and structure of sections, paragraphs,
and links using HTML elements (the building blocks of a web page) such as tags
and attributes.
HTML document is divided into two Section:
➢ Head Section
➢ Body Section
Head Section
I. Head section is a container for Metadata for HTML documents.
MetaData is data about data.(we are going to discuss this Meta-data
in the Page Information Topic)
II. Content within the Metadata is not displayed on the Browser on Page
Loading.
Body Section
I. Content written between the body tags are displayed on the Browser on
page loading.
Example1:
<!DOCTYPE html> <!-- document declaration -->
<html>
<head>
<title>First HTML Program</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Comments in HTML
Comments in the HTML document are an unexecutable part of the code as it is
ignored by the Browser. As the Browser Ignore it, they are not displayed on the
Browser.
Comment helps us to understand the purpose of the code. It helps to maintain
your code properly.
Syntax:
<!----- Your comment Goes here---->
Example:
<html>
<head>
<title>
Html Comments
</title>
</head>
<body>
hi this is my comment tag
<!-- this is comment area-->
</body>
</html>
Page Information-title, meta, link, style, script:
I. Page Information is called Metadata. Metadata is a Data about HTML
Document.
II. This Metadata is not displayed on the Browser.
For example Metadata about the Music file might include the artist name,
the album name and the year it was released.
III. Metadata of the HTML document consists of Title of the Document, Links,
Charsets, Scripts,Styles and other Meta Information.
Tags used in the Head section for Metadata:
● <title>
● <meta>
● <link>
● <style>
➢ <title> Tag
Defines a title in the browser Tab.
● Provides a title for the page when it is added to favorites.
● Displays a title for the page in search-engine results. So if we don't
provide the Title to the HTML document, then that web page will not be
listed by the search Engine.
➢ <meta> Tag:
• This tag contains page description,keywords,charset,author and other
information.
Charset Attribute
• Charset in meta tag helps us to select character encoding for the HTML
document.
Description
• This meta description is used to define the description for the web Page.
This description helps Search Engine to perform the relevant search.
Keywords
• It is used to define the Keywords used for Search Engines.
➢ <link> Tag:
• Link tag is used to link the external stylesheet.
➢ <style> Tag:
Style Tag is used to Provide internal CSS to the HTML page.
Example:
<html>
<head>
<title>itvedant</title>
<meta charset="utf-8">
<meta name="description" content="Wikipedia is a free online encycl
opedia, created and edited by volunteers around the world and hosted by
the Wikimedia Foundation.">
<meta name="keywords" content="it training institute in mumbai">
<<meta name="author" content="itvedant">
<link rel="">
<style></style>
<script></script>
</head>
</html>
HTML Tags and Attributes
Tags:
Html Tags are like keywords which have predefined meanings. Tags apply the
meaning and formatting to the content between the Tags.
HTML tags has three parts:
● Opening tag.
● Content.
● Closing tag.
Syntax:
<tag> Content </tag>
Attributes:
Attributes in the tag give additional information or additional formatting to the
content within the Tag.
Attributes are written in the starting tag.
Syntax:
attribute_name = value
Header Tag:
Header tags are block level elements we use to create headers of content. We
can create six different sizes for header using six different tags.
Example:
<html>
<head>
<title>HTML example</title>
</head>
<body>
<!-- Heading Tags -->
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</body>
</html>
Paragraph tags are use to write normal text content. It
helps create new paragraphs on new lines. Paragraph tags are also block level
elements which acquire the entire width of the row. It has default margin on Top
and bottom side which creates spacing between two paragraphs.
Example:
<html>
<head>
<title>HTML example</title>
</head>
<body>
<!-- Paragraph Tags -->
<p>This is my paragraph tag</p>
<p>One more paragraph content</p>
</body>
</html>
➢ Format Tag
● Formatting tags are used to format Textual data.
● Text formatting can be done using CSS, but HTML also has few tags
which are helpful in formatting texts as per our need.
● All these formatting elements are Inline elements.
<Strong> Tag and <bold> Tag
To display text in bold letters. Generally used to highlight important data.
Here strong is the semantic element.
<emphasis> Tag and <i>Tag
Both these tags display output in italics. <em> tag is used to emphasize the text.
Generally, Quotes and conversations the blogs or content is displayed with the help
of italic <i> and <em> tag
<ins> Tag and <u> Tag
Both of these tags put an underline on the text.
<del> Tag
This will strike-out the textual data. To display deleted text we use this tag. Like if
we want to show a discount by striking out price or to showcase task done.
<small> Tag
This tag will display text in smaller size than regular text. By default, text size is
16px but when we use <small> tag it showcases data with 14px
<sup> Tag
Superscript tags are used to display text in superscript format where text will be
raised from regular baseline for solely typographical reasons.
<sub> Tag
Subscript tags are used to display text in subscript format where text will be
lowered from regular baseline for solely typographical reasons.
Example:
<html>
<head>
<title>HTML example</title>
</head>
<body>
<!-- Formatting Tags -->
<!-- We are using break to display output in new line -->
<strong>This is strong tag</strong> <br>
<b>This is bold tag</b> <br>
<em>This is emphasis tag</em> <br>
<i>This is italic tag</i> <br>
<ins>This is inserted tag</ins> <br>
<u>This is Underline tag</u> <br>
<del>This is deleted tag</del> <br>
<small>This is small tag</small>
<br> Todays date is 25<sup>th</sup> May, 2021 <br>
Formula for water is H<sub>2</sub>O
</body>
</html>
Document structure - Div tag, Span tag
➢ Div Tag:
● Div tags are used to create document structures.
● Multi column structure which we see in most of the websites are created
using div elements with the help of CSS properties.
● Div elements are used as containers which can be used to create sections
having other html elements.
Example:
<html>
<head>
<title>HTML example</title>
</head>
<body>
<!-- Div Tags -->
<div>This is a div tag</div>
<div>
<h3>HTML</h3>
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book.
</p>
</div>
</body>
</html>
➢ Span Tag:
<span> tag can be useful for the following task:
○ It used to change the language of a part of the text.
○ Using span tag change the color, font, background of a part of text using CSS
○ To apply the scripts to the particular part of the text.
Example:
<html>
<head>
<title>HTML example</title>
</head>
<body>
<!-- Span Tags -->
<span>This is a Span tag 1</span>
<span>This is a Span tag 2</span>
</body>
</html>
➢ Anchor Tag
Anchor tags <a> are used to create Hyperlinks (links). On clicking these links will
take you to another web page.
● <a> are useful in navigating the entire website.
● We can give links on any text, group of text and on image.
● Anchor tag requires to have href attribute to make it working.
Syntax:
<a href="path/to/file">Text for link</a>
Example:
<html>
<head>
<title>
Anchor Tag
</title>
</head>
<body>
<a href="[Link]">click here .....</a><br>
<a href="[Link] here to go itvedant website</a>
</body>
</html>
➢ Image Tag
● <img> tag is used for displaying images in your web pages.
● <img> tag has src attribute where we define the path of images.
● We can give relative/absolute path
● <img> is an empty tag hence it self closes itself.
Syntax:
<img src="path/to/image" alt="alternate text" />
Alternate text is not a compulsory attribute but using it helps in SEO as well as
displaying text if image could not load.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<img src="img/[Link]" alt="apple" width="200" height=”400”/>
</body>
</html>
List - Ordered, unordered, definition
Lists
● HTML list tags <li> are used to display information in list format. Such
information seems more structured and point to point.
● HTML has 3 different types of Lists. - Ordered List, Unordered List and
Definition List
Ordered List
● <ol> tag is used to create an ordered list.
● It displays data in sequence of numbers, alphabets, roman numbers.
● By default, It displays information in the numeric list.
Try it yourself—
!DOCTYPE html>
<html>
<head>
<title>Order List</title>
</head>
<body>
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
</ol>
</body>
</html>
Unordered List
● <ul> tag is used to create an unordered list.
● It displays data in sequence of symbols such as disc, square and
circle.
● By default, It displays information in the bullet(disc) list.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Unoder List</title>
</head>
<body>
<ul style=" list-style-type:circle;">
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
</ul>
</body>
</html>
Definition List
● <dl> tag is used to create a Definition list.
● every definition has Definition Term <dt> and Definition Description
<dd>
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>Defination List</title>
</head>
<body>
<dl>
<dt>HtML</dt>
<dd>Html it is markup lang</dd>
<dt>
python
</dt>
<dd>Python is programming Lang</dd>
</dl>
</body>
</html>
Table structure-tr, td, th, colspan and rowspan
What is the use of table tags?
● In HTML Table is a representation of data arranged in rows and columns.
● The most important one is the <table> tag which is the main container of
the table
● Table is divided into rows and each row is further divided into data
cells
● The letters td stand for "table data," which is the data cell's content.
● <tr> tag is used to create table rows.
● <th> and <td> tags can be used to create columns.
Table tag Structure:
Example:
<html>
<head>
<title>
Table Tag
</title
</head>
<body>
<table border="2">
<tr>
<th>Roll No</th>
<th>Name</th>
</tr>
<tr>
<td>100</td>
<td>Ram</td>
</tr>
<tr>
<td>200</td>
<td>sam</td>
</tr>
</table>
</body>
</html>
colspan and rowspan:
● Colspan and rowspan are the table attributes which are used to
specify the no. of columns or rows a cell should span.
● These attributes have a numeric value.
● Colspan span the cell in horizontal direction and rowspan span the
cell in vertical direction.
● You will use the colspan attribute if you want to merge two or
more columns into a single column. Similarly you will use rowspan if
you want to merge two or more rows.
Example:
<html>
<head>
<title>
Table Tag
</title>
</head>
<body>
<table border="2" cellpadding="50" cellspacing="20">
<tr>
<th colspan="2" >Roll No</th>
<th>Name</th>
</tr>
<tr>
<td>100</td>
<td rowspan="2" >Ram</td>
</tr>
<tr>
<td>200</td>
<td>sam</td>
</tr>
</table>
</body>
</html>
Form tag and Form Elements - Input type, textarea, select
● In HTML form tag is used to create a form for taking user input on a
webpage. It contains multiple fields such as textarea, label, checkbox,
password field etc.
Where do we use form tags?
● form tags can be used to implement Log-in features on a website or
creating registration forms on a website etc.
The <form> element contains other HTML tags, The <input> tag defines a user
input field.
● The <fieldset> is used to visually group the elements inside the form
set by the <form> tag.
● The <label> tag sets the text label for the <input> element.
● The <legend> tag defines the header for the fieldset element.
●
● The <textarea> tag defines a form field to create a multiline input area.
● The <button> tag is used to place a button inside a form
Creating Registration Form
Example:
<html>
<head>
</head>
<body>
<h1>Registration Form</h1>
<form method="post" action="[Link]">
<table>
<tr>
<td><label for="name">Name</label></td>
<td><input type="text" name="name" id="name" placeholder="Ent
er your name"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" name="email" id="email" placeholder="
Enter your email"></td>
</tr>
<tr>
<td><label for="password">password</label></td>
<td><input type="password" name="password" id="password" pla
ceholder="Enter your password"></td>
</tr>
<tr>
<td><label for="phoneNumber">phoneNumber</label></td>
<td><input type="number" name="phoneNumber" id="phoneNum
ber" ></td>
</tr>
<tr>
<td><label for="gender">gender</label></td>
<td>Male<input type="radio" name="gender" value="male" ></td
>
<td>FeMale<input type="radio" name="gender" value="Female" >
</td>
<td>other<input type="radio" name="gender" value="other" ></td
>
</tr>
<tr>
<td><label for="language">language</label></td>
<td>
<select name="language" id="language">
<option value="">select language</option>
<option value="English">English</option>
<option value="hindi">Hindi</option>
<option value="spanish">spanish</option>
</select>
</td>
</tr>
<tr>
<td><label for="about">About</label></td>
<td><textarea name="about" id="about" placeholder="write yourse
lf"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="Register"></td>
</tr>
</table>
</form>
</body>
</html>
Fieldset and Legend–
Fieldset–
Within a web form, fieldset element is used to group several controls and labels
(<label>).
Legend–
The <legend> tag defines a caption for the <fieldset> element.
E+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++xample:
<html>
<head>
</head>
<body>
<h1>Registration Form</h1>
<form method="post" action="[Link]">
<fieldset>
<legend>My Personal information</legend>
<table>
<tr>
<td><label for="name">Name</label></td>
<td><input type="text" name="name" id="name" placeholder="Ent
er your name"></td
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" name="email" id="email" placeholder="
Enter your email"></td>
</tr>
<tr>
<td><label for="password">password</label></td>
<td><input type="password" name="password" id="password" pla
ceholder="Enter your password"></td>
</tr>
<tr>
<td><label for="phoneNumber">phoneNumber</label></td>
<td><input type="number" name="phoneNumber" id="phoneNum
ber" ></td>
</tr>
<tr>
<td><label for="gender">gender</label></td>
<td>Male<input type="radio" name="gender" value="male" ></td
>
<td>FeMale<input type="radio" name="gender" value="Female" >
</td>
<td>other<input type="radio" name="gender" value="other" ></td
>
</tr>
<tr>
<td><label for="language">language</label></td>
<td>
<select name="language" id="language">
<option value="">select language</option>
<option value="English">English</option>
<option value="hindi">Hindi</option>
<option value="spanish">spanish</option>
</select>
</td>
</tr>
<tr>
<td><label for="about">About</label></td>
<td><textarea name="about" id="about" placeholder="write yourse
lf"></textarea></td>
</tr>
<tr>
<td><input type="submit" value="Register"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>