HTML:
HTML stands for hyper text markup language.
Definition:
HTML (Hyper Text Markup Language) is the code that is used to
structure a web page and its content
Features:
Advantages:
Structure of html:
Html structure basically divides into two main sections head & body.
Here, html is a root element. head & body are their child elements.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Output:
HTML Elements:
The HTML element is everything from the start tag to the end tag:
Syntax:
<tagname>Content goes here...</tagname>
Note: Some HTML elements have no content (like the <br> element).
These elements are called empty elements. Empty elements do not
have an end tag!
Some basic HTML tags:
<p> paragraph
<u> underline
<i> Italic font
<b> Bold text
<br> Next line / break
<hr> Horizontal line
<s> Strike through
<del> delete
Nbsp entity:
Nbsp stands for non-breaking space
Html ignores extra spaces to insert extra spaces , we need to use
entity. here, semicolon is mandotary after  .
Without nbsp:
<!DOCTYPE html>
<html>
<body>
<p>this is a example of extra space</p>
</body>
</html>
Output:
this is a example of extra space
using nbsp:
<!DOCTYPE html>
<html>
<body>
<p> this is a
example &n
bsp; of extra space</p>
</body>
</html>
Output:
this is a example of extra space
<sup> and <sub> tag:
Tag meaning How to use? output
<sup> superScript X<sup>2</sup> X2
<sub> subScript H<sub>2</sub>O H2 O
Lists in html:
HTML lists allow web developers to group a set of related items in
lists
There are three types of list available in HTML :-
1)ordered list(<ol>):
These lists are used for items that do not need to be in any specific
order.
2)unordered list(<ul>):
These lists are used for items that do not need to be in any specific
order.
3)description list(<dl>):
These lists are used to contain terms and their corresponding
descriptions.
lists
Ordered list Unordered list Description list
1)ordered list:
An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
The list items will be marked with numbers by default:
Example:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Output:
Note: To change its type we have a type attribute & their values are
‘A’, ’a’ , ’I’ , ’i’ ,’1’
Syntax: <ol type=”value”> </ol>
Example: <ol type=”A”></ol>
2) unordered 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:
Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Output:
Note: To change its type we have a type attribute & their values are
‘disc’, ‘circle’, ‘square’.
Syntax: <ul type=”value”> </ul>
Example: <ul type=”A”></ul>
3) description list:
The <dl> tag defines the description list, the <dt> tag defines the
term (name), and the <dd> tag describes each term:
Example:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Output:
HTML list tags:
Marquee tag in html:
Syntax:
<marquee> content </marquee>
Sr.no attribute value meaning
1 behavior Scroll , Used to
Slide , set the
alternate behavior of
scrolling.
2 scrollamount Any value
between 1 For speed
to n
3 loop Any value It defines
between 1 How many
to n times you want
to iterate
marquee
4 direction Left ,
Right , To change
Up , direction of
down text
Example:
<marquee behavior=”alternate” scrollamount=”15” loop=”3”
direction=”left”> This is a marquee tag </marquee>
Image tag in html:
The HTML <img> tag is used to embed an image in web pages
by linking them.
It does not require a closing tag.
Syntax:
<img src=”image_path” alt=”alternate_text”>
Sr.no attribute Meaning
1 src Define image path
2 alt Specifies an
alternate text for
the image, if the
image for some
reason cannot be
displayed
3 title To displayed title
of image by
moving cursor on
image
Example:
<img src="pic_trulli.jpg" alt="Trulli" title="this is a image of
trulli" >
Output:
Video tag in HTML:
The <video> tag is used to embed video content in a
document, such as a movie clip or other video streams.
Example:
<video src=”movie.mp4” width="320" height="240" controls>
Audio tag in HTML:
The <audio> tag is used to embed sound content in a
document, such as music or other audio streams.
Example:
<audio src=”song.ogg” controls>
Anchor tag in html:
The <a> tag defines a hyperlink, which is used to link from one page
to another.
The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.
By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
Syntax:
<a href=”link_address” ></a>
Target attribute of anchor tag:
attribute value description
target _blank Specifies where to
_parent open the linked
_self document
_top
Example 1:
<a href=www.google.com target=”_blank”>GOOGLE</a>
Output:
Example 2:
How to link to an email address:
<a href="mailto:[email protected]">Send email</a>
Example 3:
How to link to a phone number:
<a href="tel:+4733378901">+47 333 78 901</a>
Tables in HTML:
The <table> tag defines an HTML table.
An HTML table consists of one <table> element and one or
more <tr>, <th>, and <td> elements.
The <tr> element defines a table row, the <th> element defines a
table header, and the <td> element defines a table cell.
Sr.no attribute description
1 border It sets the border
around the table
cells.
2 Cellpadding Cell spacing is the
space between each
cell.
By default the space
is set to 2 pixels.
3 Cellspacing Cell spacing is the
space between each
cell.
By default the space
is set to 2 pixels.
Example :
Table without using border attribute:
Output:
table using border attribute:
Output:
table using cellspacing attribute:
Output:
table using cellpadding attribute:
Output:
Forms in HTML:
An HTML form is used to collect user input. The user input is most
often sent to a server for processing.
The HTML <form> element is used to create an HTML form for user
input:
The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.
An <input> element can be displayed in many ways, depending on
the type attribute.
***
