HTML tags are element names surrounded by angle brackets-
<tag name>content goes here...</tag name>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag (< >), the second tag is the end tag (</ >)
• The end tag is written like the start tag, but with a forward slash (/) inserted before the tag name.
Heading tag-
Basically, there are six heading tags in HTML from h1 (largest) to h6 (smallest). As-
<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>
Output-
Paragraph tag-
Paragraph tag is used to define paragraphs in a web page.
Example-
<p>Paragraph text 1</p>
<p>Paragraph text 2</p>
<p>Paragraph text 3</p>
This tag adds some space (margin) before and after each <p> tag automatically.
Font Tag-
The <font> tag contains the "color", "face" and "size" attributes. It is an inline element and also useful for changing font, font size and font colour.
Example-
<!DOCTYPE html>
<html>
<head>
<title>HTML font Tag</title>
</head>
<body>
<font face = "arial" color = "green" size = "4">
Uttarakhand Open University, Haldwani, Nainital
</font>
</body>
</html>
Note: The <font> tag is not supported in HTML5, for the same purpose CSS is used.
Images Embedding-
The image tag (<img>) is used to define the images in to a web page. The <img> tag is non paired, which contains the following attributes. As- "alt", "height", "width".
The alt (alt=”This is Image 1”) attribute provides an alternate text for an image, if the user for some reason cannot view the image, the value of the alt attribute should describe the image into a web page. As-
<img src="img_rose.jpg" alt="Rose flower- My favourite">
You can decide the height and width of your image. As-
<img src="img_rose.jpg" alt="Rose flower- My favourite" height=”100” width=”125”>
Example 1-
<!DOCTYPE html>
<html>
<head>
<title>My Image Gallery</title>
</head>
<body>
<p>Image Gallery</p>
<P>Fruit</p>
<img src="fruit.jpg" width="200" height="150" alt="My fruit Image">
<P>Music</p>
<img src="music.jpg" width="200" height="150" alt="My Music Image">
</body>
</html>
Hyper linking-
A link or a hyperlink is an icon, graphic, or text in a document that links to another file or object. All the web pages in the World Wide Web are comprised of hyperlinks to each other.
Example 1-
<a href="www.google.com">Click Here to open Google.com</a>
Example 2-
You have two files as- “Home.html” and “address.html”, and we want to create a hyper link between them.
Note: Both the files (Home.html, address.html) must be saved in a same folder, otherwise need to mention the complete address of the file where it locates.
File name- “Home.html”
<!DOCTYPE html>
<html>
<head>
<title>My Home Page</title>
</head>
<body>
<p>This is my Home Page</p>
<a href=”address.html”>Click here to see my Address</a>
</body>
</html>
File name- “address.html”
<!DOCTYPE html>
<html>
<head>
<title>My Address Page</title>
</head>
<body>
<p><b> My Address-</b></p>
<p>Uttarakhand Open University, University Marg, Haldwani- 263139</p>
<a href=”home.html”> <p><b> Click here to go back to Home page</b></p></a>
</body>
</html>
Hyperlinks-"target" Attribute
The attribute "target" specifies where to open the linked page. This attribute can have one of the following values. As- "_blank", "_self", "_parent", "_top", "frame_name".
Example-
<a href=" www.google.com" target="_blank"> Click Here to open Google.com in a Blank Tab</a>
Note: the target="_blank" opens the linked document in a new window or tab.
Example-
<a href=" www.google.com" target="_self"> Click Here to open Google.com in a same window/tab</a>
Note: the target="_self" opens the linked document in the same window/tab as it was clicked (this is by default).
Example-
<a href=" www.google.com" target="_parent"> Click Here to open Google.com in parent frame/tab</a>
Note: the target="_ parent" opens the linked document in the parent frame.
Example-
<a href=" www.google.com" target="_top"> Click Here to open Google.com in the full body of the window</a>
Note: the target="_ top " opens the linked document in the full body of the window.
Example-
<a href=" www.google.com" target="name_of_the_frame"> Click Here to open Google.com in the frame name provided by you</a>
Note: the target="_ top" opens the linked document in the frame name provided by you.
Hyperlinks- Linking images-
Example-
<!DOCTYPE html>
<html>
<head>
<title>Image Liking</title>
</head>
<body>
<p><b>Click on the below Images to follow the link</b></p>
<a href="Myfile1.html" target="_blank"><img src="img1.jpg" width="30" height="25" alt="My Image 1"></a>
<a href="Myfile2.html" target="_blank"><img src="img2.jpg" width="30" height="25" alt="My Image 2"></a>
</body>
</html>
Table tag-
When you want to present data in a web page in the form of row and column, then we required HTML table tag (<table>..... <table/>).
Example- we want to create the following table in HTML.
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<p>Table</p>
<table border="1">
<tr>
<td>Roll No.</td>
<td>Name</td>
<td>Class</td>
<td>Mobile No.</td>
</tr>
<tr>
<td>101</td>
<td>Ankit Singh</td>
<td>B.Sc. II Sem.</td>
<td>1234567890</td>
</tr>
<tr>
<td>102</td>
<td>Javed Aalam</td>
<td>BCA III Sem.</td>
<td>9876543210</td>
</tr>
</table>
</body>
</html>
Table Attributes-
Align (left, center, right)
Bgcolor (rgb(x,x,x), #xxxxxx, colorname)
Border (0,1)
Cellpadding (pixels)
Cellspacing (pixels)
Width (pixels, %)
Example 1-
<table border="1" align="center" width="500" cellpadding="2" cellspacing="0" bgcolor=“”>
<tr>
<td>Roll No.</td>
<td>Name</td>
<td>Class</td>
<td>Mobile No.</td>
</tr>
<tr>
<td>11</td>
<td>ABC</td>
<td>XII</td>
<td>2233441234</td>
</tr>
</table>
List tag-
Sometimes we require bullets or numbering in a web page to display any information point wise. We used two types of listing in HTML. As-
• Ordered List (<ol>....</ol>)
• UnOrdered List (<ul>....</ul>)
Example- We wants to display the following information into a web page-
Types of Computers-
Super Computer
Mainframe Computer
Mini Computer
Personal Computer
Example 1- (Ordered List)
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<p> Types of Computer </p>
<ol>
<li>Super Computer</li>
<li>Mainframe Computer</li>
<li>Mini Computer</li>
<li>Personal Computer</li>
</ol>
</body>
</html>
Output-
Example 2- (Unordered List)
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<p> Types of Computer </p>
<ul>
<li>Super Computer</li>
<li>Mainframe Computer</li>
<li>Mini Computer</li>
<li>Personal Computer</li>
</ul>
</body>
</html>
Output-
Ordered List- Attributes
The following attributes are used with list tag. As- “Type” and “start”.
The “type” attribute and its respective values-
Example-
<ol type="A" start=”4”>
<li>Green</li>
<li>Red</li>
</ol>
UnOrdered List- Attributes
The following attribute is used with list tag. As- “Type”
The “type” attribute and its respective values-
Example-
<ul type="square">
<li>Banana</li>
<li>Apple</li>
<li>Mango</li>
</ul>
Inline frame-
The inline frame (<iframe>) tag can appear anywhere in the web page, it defines a rectangular region within the document in which the browser can display another web page, including scrollbars and borders (if needed). As-
Example-
<iframe src=" Name_of_Web_page.html"></iframe>
Iframe- Attributes
The following attributes are used with <iframe>. As:
Example-
Note- The below code is written in “home.html” and “about.html” is already created.
<!DOCTYPE html>
<html>
<head>
<title>Inline Frame</title>
</head>
<body>
<p> some text here </p>
<iframe name=”my_iframe1” src="about.html" height=”300” width=”250” scrolling=”auto” frameborder=”1”>
</iframe>
</body>
</html>
Output-
