HTML
Introduction to HTML
- HTML stands for Hyper Text Markup Language where HyperText means “link” to connect
webpages with one another and Markup means “tag”.
- HTML is a set of logic codes or tags (markup) that are used to define the web browser how to
present the information in the webpage.
- It is developed by Tim Berners Lee in 1990 at CERN (Conseil Europeenne pour la
Recherche Nucleaire).
Uses of HTML
1. It is used for creating basic layout and designing webpage.
2. Without HTML, the World Wide Web will not exist.
3. It allows embedding text, images, multimedia (audio/video) and links to other documents and
the webpages.
4. It can embed scripts such as CSS, JavaScript, which affect the behavior and design of the
webpage.
Objective of HTML
Some of the objective of HTML are;
1. Create a webpage.
2. Validate a webpage.
3. Publish a webpage.
4. Insert a graphic within a webpage.
5. Create a link within a webpage.
6. Create a table within a webpage.
7. Insert heading levels within a webpage.
8. Insert ordered and unordered lists within a webpage.
9. Use cascading style sheets.
Structure of HTML
<html>
<head>
<title>Global Academy</title>
</head>
<body>
This is the body section.
</body>
</html>
Tags and Attributes
Tag is an HTML command that shows the layout or display of the desired output of a whole or
part of the webpage.
All HTML tag is bounded by angular brackets (<>) that always opens with a < (less than> and
close with a > (greater than> sign.
Attributes is a special word or set of words contained inside an opening tag that specifies
additional information of tags like background, color, font, font size and alignment.
There are two types of Tags in HTML. They are;
A. Singular tag
The tag which doesn’t has closing tag is called singular tag. It is also known as stand-alone tag or
empty tag. For example: <BR>, <HR> .
B. Paired tag
The tag which has both opening and closing tag is called paired tag. For example: <p> </p> etc.
Heading Tag
Heading tag is used to create heading in document. HTML supports six different levels of heading
tags.
The highest-level of header format is <h1> tag and lowest level is <h6>
For example:
<html>
<head>
<title> Global Academy</title>
</head>
<body>
<h1>I am a student</h1>
<h2>I am a student</h2>
<h3>I am a student</h3>
<h4>I am a student</h4>
<h5>I am a student</h5>
<h6>I am a student</h6>
</body>
</html>
FONT tag and Attributes
The tag <FONT> is used for setting the size, color and face of any text on the web page. This is
paired tag.
Syntax:
<FONT> I am a boy. </FONT>
The attributes of font tag are
a. Size : having the font size value 1 to 7
b. Color: black, white, red, green, blue, yellow, gray, purple, aqua, lime, maroon, navy, sliver,
fuchsia, olive or teal.
c. Face : To set the font type
For example
<html>
<head>
<title> Global Academy</title>
</head>
<body>
<font>I am a student</font><br>
<font size="7" color="Blue" face="Book Antiqua">I am a student. </font>
</body>
</html>
Ordered List
An ordered list starts with the tag <OL> and ends with </OL>. Each list items start with the tag
<li> and end with the tag </li> items. By default the list are numbered automatically by the
browser as 1.2.3…..
<html>
<head>
<title> Global Academy</title>
</head>
<body>
<h2>This is the normal list without attribute</h2>
<ol>
<li>Janakpur</li>
<li>Pokhara</li>
<li>Birgunj</li>
<li>Lumbini</li>
<li>Kathmandu</li>
</ol>
</body>
</html>
<html>
<head>
<title> Global Academy</title>
</head>
<body>
<h2>This is the normal list with attribute</h2>
<ol type="A">
<li>Janakpur</li>
<li>Pokhara</li>
<li>Birgunj</li>
<li>Lumbini</li>
<li>Kathmandu</li>
</ol>
</body>
</html>
<html>
<head>
<title> Global Academy</title>
</head>
<body>
<h2>This is the normal list with start attribute</h2>
<ol type="A" start="3">
<li>Janakpur</li>
<li>Pokhara</li>
<li>Birgunj</li>
<li>Lumbini</li>
<li>Kathmandu</li>
</ol>
</body>
</html>
Unordered List
Item in this list start with a list mask such as a bullet. Browsers will usually change the list mark
in nested list. List starts with tag <UL> and ends with </UL>. Each list item starts with <LI> tag
and ends with </LI> tag.
One has the choice has three bullet types: Disc (default), circle and square.
<html>
<head>
<title> Global Academy</title>
</head>
<body>
<h2>This is the normal unordered list</h2>
<ul>
<li>Janakpur</li>
<li>Pokhara</li>
<li>Birgunj</li>
<li>Lumbini</li>
<li>Kathmandu</li>
</ul>
</body>
</html>
<html>
<head>
<title> Global Academy</title>
</head>
<body>
<h2>This is the unordered list with attribute</h2>
<ul type=”circle”>
<li>Janakpur</li>
<li>Pokhara</li>
<li>Birgunj</li>
<li>Lumbini</li>
<li>Kathmandu</li>
</ul>
</body>
</html>
Table in HTML
A table is a two dimensional matrix, consisting of rows and columns. Tables are intended for
displaying data in rows and columns on the webpage.
All table tags are included between the <TABLE></TABLE>. It has four sub-elements.
Name of element Opening tag – Closing tag
Table row <TR>……………..</TR>
Table heading <TH>……………..</TH>
Table data <TD>……………..</TD>
Caption <CAPTION>……..<Caption>
The attributes of table are bgcolor, width, border, cellspacing, cellpadding, align, background,
bordercolor.
For example:
<html>
<head>
<title> Global Academy</title>
</head>
<body>
<h2>This is the normal table</h2>
<table border="2px" cellpadding="10px" cellspacing="0px" bgcolor="sky-blue"
bordercolor="red">
<h2>District with their famous place name</h2>
<tr>
<th> District</th>
<th>Place</th>
</tr>
<tr>
<td>Mahottari</td>
<td>Bardibash</td>
</tr>
<tr>
<td>Dhanusha</td>
<td>Janakpur</td>
</tr>
<tr>
<td>Kaski</td>
<td>Pokhara</td>
</tr>
<tr>
<td>Lumbini</td>
<td>Butwal</td>
</tr>
<tr>
<td>Morang</td>
<td>Biratnagar</td>
</tr>
</table>
</body>
</html>
Anchor tag in HTML
The HTML anchor tag defines a hyperlink that links one page to another page. It can create
hyperlink to other web page as well as files, location, or any URL. The "href" attribute is the most
important attribute of the HTML a tag which links to destination page or URL.
Syntax
<a href = "..........."> Link Text </a>
<html>
<head>
<title> Global Academy</title>
</head>
<body>
<font>I am a student</font><br>
<font size="7" color="Blue" face="Book Antiqua">I am a student. </font><br>
<a href="table.html">Click to table</a><br>
<a href="https://www.facebook.com/">Facebook</a>
</body>
</html>
Forms in HTML
