HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.
Basic HTML Document
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here....</p>
</body>
</html>
Save the file with the .html. Start your Internet browser. Select Open (or Open Page) in the
File.
• The text between the <head>tag and the </head>tag is header information. Header
information is not displayed in the browser window.
• The text between the <<title> tags is the title of your document. The <title> tag is
used to uniquely identify each document and is also displayed in the title bar of the
browser window.
• The text between the <body> tags is the text that will be displayed in your browser.
HTML Tags
• HTML tags are used to mark-up HTML elements
• HTML tags are surrounded by the two characters < and >
• The surrounding characters are called angle brackets
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the end tag
• The text between the start and end tags is the element content
• HTML tags are not case sensitive, <b> means the same as <B>
HTML - Basic Tags
Heading Tags
HTML headings are defined with the <h1> to <h6> tags.
Examples:
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading1</h1>
<h2>This is heading2</h2>
<h3>This is heading3</h3>
<h4>This is heading4</h4>
<h5>This is heading5</h5>
<h6>This is heading6</h6>
</body>
</html>
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.
Examples:
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Line Break Tag
The HTML <br> tag is used to give a line break.
Examples:
<html>
<head>
<title>HTML <br/> Tag</title>
</head>
<body>
<p>This is before the line break<br />
and this after the line break.</p>
</body>
</html>
Horizontal Lines Tag
The HTML <hr> tag is used for creating a horizontal line. This is also called Horizontal
Rule in HTML.
Examples:
<html>
<head>
<title>HTML hr Tag</title>
</head>
<body>
<p>This text will be followed by a horizontal line <hr /></p>
</body>
</html>
Center Tag
The HTML <center> tag to put any content in the center of the page or any table cell.
Examples:
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
Nonbreaking Spaces
For nonbreaking space entity instead of a normal space.
Examples:
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p> An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>
HTML <b> Tag
The <b> tag specifies bold text.
HTML <i> Tag
The italics tags should be used to highlight a key word or phrase
HTML <u> Tag
HTML u tag is used to represents underlined text.
HTML <strong> tag
HTML <strong> tag is used to highlight the important parts of the text
HTML <strike> tag
The <strike> tag was an inline element used to draw a strikethrough on a section of
text.
Examples:
<html>
<head>
<title>Formate</title>
</head>
<body>
<b>IT World Infotech Computer Education Center</b>
<i>IT World Infotech Computer Education Center</i>
<u>IT World Infotech Computer Education Center</u>
< strong >IT World Infotech Computer Education Center</strong>
<strike>IT World Infotech Computer Education Center</strike>
</body>
</html>
HTML <sup> Tag
The <sup> tag defines superscript text.
HTML <sub> Tag
The <sub> tag defines subscript text.
HTML <tt> Tag
The <sub> <tt> tag defines teletype text:
HTML <small> Tag
The <small> tag defines smaller text.
HTML <big> Tag
The <big> tag defines bigger text.
HTML <mark> Tag
The HTML <mark> element defines marked or highlighted text:
Examples:
<html>
<head>
<title>Some Baisc Tag</title>
</head>
<body>
<p>(a+b)<sup>2</sup> </p>
<p>CO<sub>2</sub></p>
<p><tt>IT World Infotech</tt></p>
<p><small>IT World Infotech</small></p>
<p><big>IT World Infotech</big></p>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>
HTML Attributes
Attributes provide additional information about HTML elements.
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value".
The href Attribute
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
<a href="https://www.w3schools.com">This is a link</a>
Linking Documents
A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the
opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to
reach to the linked document. Following is the simple syntax to use <a> tag.
<a href = "Document URL" ... attributes-list>Link Text</a>
Examples:
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href = "https://www.itworldinfotech.com">IT World Infotech</a>
</body>
</html>
HTML Images
The HTML <img> tag is used to put an image in an HTML document.
The <img> tag is empty; it contains attributes only, and does not have a closing tag.
Specific Attributes:
1. Src attribute: Use the HTML src attribute to define the URL of the image
Example: <img src="img_chania.jpg" alt="Flowers in Chania">
2. Alt attribute: The alt attribute provides an alternate text for an image, if the user for some
reason cannot view it (because of slow connection, an error in the src attribute, or if the user
uses a screen reader).
Example: <img src="img_chania.jpg" alt="Flowers in Chania">
3. Width and Height attributes : Use the HTML width and height attributes to define the size of
the image
Example: <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
4. Align attributes: Deprecated− Specifies the alignment for the image. We can use top,
bottom, middle, left and right in the value of align attributes.
5. Border attributes: Deprecated − Specifies the width of the image border.
Note: For Image Size We can use style attribute to specify the width and height of an image.
Examples: <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Examples:
<html>
<head>
<title>HTML Tag</title>
</head>
<body>
<img src = "https://www.tutorialspoint.com/images/html.gif"
alt = "HTML Tutorial" height = "150" width = "140" />
</body>
</html>
Font Tag
HTML <font> tag to add style, size, and color to the text on your website.
Note: The font tag is having three attributes called size, color, and face to
customize your fonts.
Examples:
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">IT World Infotech Computer Center</font><br />
<font size = "1" color =”red”> IT World Infotech Computer
Center</font><br />
<font size = "1" color =”red” face=”Verdana”> IT World Infotech Computer
Center</font><br />
</body>
</html>
HTML – Lists
HTML offers web authors three ways for specifying lists of information.
There are three list types in HTML: unordered list, ordered and definition.
• <ul> − An unordered list. This will list items using plain bullets.
• <ol> − An ordered list. This will use different schemes of numbers to list your items.
• <dl> − A definition list. This arranges your items in the same way as they are
arranged in a dictionary.
HTML Unordered Lists
An unordered list is a collection of related items that have no special order or sequence. This
list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.
Examples:
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>
Note: We can use type attribute for <ul> tag to specify the type of bullet you like.
By default, it is a disc. Following are the possible options: <ul type = "square">,
<ul type = "disc"> and <ul type = "circle"> .
HTML Ordered Lists
HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for
ordered list. We can use ordered list to represent items either in numerical order format or alphabetical
order format, or any format where an order is emphasized.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
There can be different types of numbered list:
• Numeric Number (1, 2, 3)
• Capital Roman Number (I II III)
• Small Roman
• Number (i ii iii)
• Capital Alphabet (A B C)
• Small Alphabet (a b c)
To represent different ordered lists, there are 5 types of attributes in <ol> tag.
Type Description
Type=“1” This is the default type. In this type, the list items are numbered with numbers.
Type =“I” In this type, the list items are numbered with upper case roman numbers.
Type =“i” In this type, the list items are numbered with lower case roman numbers.
Type=“A” In this type, the list items are numbered with upper case (A to Z) letters.
Type=”a” In this type, the list items are numbered with lower case (a toz) letters.
Examples:
<html>
<head>
<title>Order List</title>
</head>
<body>
<ol>
<li>Keyboard</li>
<li>Mouse</li>
<li>Monitor</li>
<li>Hard Disk</li>
<li>Pen drive</li>
</ol>
</body>
</html>
HTML - Tables
The HTML tables allow web authors to arrange data like text, images, links, other
tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to create data cells. The elements under
<td> are regular and left aligned by default.
Example:
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Here, the border is an attribute of <table> tag and it is used to put a border across
all the cells. If you do not need a border, then you can use border = "0".
Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td>
tag.
Example
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Cellpadding and Cellspacing Attributes
There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your
table cells. The cellspacing attribute defines space between table cells, while cellpadding represents the distance
between cell borders and the content within a cell.
Example:
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Colspan and Rowspan Attributes
You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will
use rowspan if you want to merge two or more rows.
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "3">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
HTML - Marquees
An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically
down your webpage depending on the settings. This is created by using HTML <marquees>
tag.
Examples:
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>IT World Infotech Computer Center</marquee>
</body>
</html>
The <marquee> Tag Attributes
Sr.No Attribute & Description
1 width
This specifies the width of the marquee. This can be a value like 10 or
20% etc.
2 height
This specifies the height of the marquee. This can be a value like 10 or
20% etc.
3 direction
This specifies the direction in which marquee should scroll. This can be a
value like up, down, left or right.
4 behavior
This specifies the type of scrolling of the marquee. This can have a value
like scroll, slide and alternate.
5 scrolldelay
This specifies how long to delay between each jump. This will have a value
like 10 etc.
6 scrollamount
This specifies the speed of marquee text. This can have a value like 10
etc.
7 loop
This specifies how many times to loop. The default value is INFINITE,
which means that the marquee loops endlessly.
8 bgcolor
This specifies background color in terms of color name or color hex value.
9 hspace
This specifies horizontal space around the marquee. This can be a value
like 10 or 20% etc.
10 vspace
This specifies vertical space around the marquee. This can be a value like
10 or 20% etc.
