Scribd
Upload
11 views20 pages

WP - File Final

The document provides examples of using various HTML tags to structure and style web pages. It demonstrates tags for headings, paragraphs, lists, links, images and tables. It also shows how to add colors, comments and non-breaking spaces. The examples cover many basic and intermediate HTML elements and attributes.

Uploaded by

bikash Mishra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views20 pages

WP - File Final

The document provides examples of using various HTML tags to structure and style web pages. It demonstrates tags for headings, paragraphs, lists, links, images and tables. It also shows how to add colors, comments and non-breaking spaces. The examples cover many basic and intermediate HTML elements and attributes.

Uploaded by

bikash Mishra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

1. AIM: To use basic tags of html.

<html>
<head>
<title> This is my first Webpage </title>
</head>
<body> This is my first homepage.
</body>
</html>

Where,

 <HTML> This tag represents the root element of an HTML document.


 <HEAD> This tag contains metadata about the HTML document, such as the
title, stylesheets, scripts, and other information that is not displayed on the
webpage.
 <title>This tag specifies the title of the HTML document, which is displayed in
the browser's title bar or tab.
 <body> This tag represents the main content of the HTML document and
contains all the visible elements that are displayed on the webpage.

Output:-
2. AIM: To use of BOLD , ITALIC and UNDERLINE TAG.

<html>
<head>
<title> This is my first Webpage. </Title>
</head>
<body> <b> Hello! </b> <i> My name is Pankaj. </i> <u> And what’s your name?
</u> </body>
</html>

Where,

 <b> tag is used in HTML to apply bold formatting to text.


 <i> tag is used in HTML to apply italic formatting to text.
 <u> tag is used in HTML to apply underline formatting to text

Output:-
3. AIM: To add BACKGROUND colour in your webpage.

<html>
<head>
<title>My First Webpage</title>
</head>
<body bgcolor="black">
<h1 align="center">My First Webpage</h1>
<p>Welcome to my <strong>Web page.</strong> I am writing this page using Vs
Code
editor</p>
<p>By learning html, I'll be able to create webpages like a <strike>beginner</strike>
professional.
<br>
My name is Pankaj
</p>
</body>
</html>

Where,
 Bgcolor attribute was used to set the background color of the whole page.
 Align attribute is used to align the text on HTML page.
 <strong> tag is used to Bold the text on HTML page.
 <br> tag is used to break the sentence or break the line in HTML page.

Output:-
4. AIM: To use HEADING tag in a webpage.

<html>
<head>
<title> This is my first Webpage. </Title>
</head>
<body>
<h1> This is a heading 1. </h1>
<h2 > This is heading 2. </h2>
<h3 > This is heading 3. </h3>
<h4 > This is a heading 4 </h4>
</body>
</html>

Output:-
5. AIM: To use PARAGRAPH tag in a webpage.

<html>
<head>
<title> This is my Webpage. </Title>
</head>
<body>
<p> This is a Normal paragraph </p>
<p align="center" > This is a another paragraph. </p>
</body>
</html>

Where ,

<P> tag is used to create paragraph in HTML page.

Output:-
6. AIM: To use BREAK tag in a webpage.

<html>
<head>
<title> This is my first Webpage. </Title>
</head>
<body>
<p>Hii<br> How are You <br>my name is Pankaj </p>
</body>
</html>

Where,

<BR> tag is used to break the line.

Output:-
7. AIM: To use COMMENT tag in a webpage.

<html>
<head>
<title> This is my first Webpage. </Title>
</head>
<body>
<p> This html comment would <!—This is a comment -- > be displayed like this. </p>
</body>
</html>

Where,

<!--comment -- > is use to comment the text from HTML which will not display in
web page.

Output:-
8. AIM: To use PHYSICAL tags in a webpage : (big, small,
sup, sub, strikethrough)

<html>
<head>
<title> This is my first Webpage. </Title>
</head>
<body> <p> Hi! This is <big > Pankaj Mishra </big> And i am going to write the super
script and subscript.<br> H <sub>2</sub>so <sub>4</sub>
</p>
</body>
</html>

Where,

<big> tag is use to increase the text size than the normal size.
<small> tag is used to decrease the text size than the normal size.
<Sub> tag is used to display the base of any text.
<sup> tag is used to display power of text.

Output:-
9. AIM: To use NON-BREAKING SPACE in a webpage.

<html>
<head>
<title> This is my first Webpage. </Title>
</head>
<body>
<p>
This code &nbsp; &nbsp; &nbsp; would appear with three extra spaces. </p>
</body>
</html>

Where,

&nbsp; is used to give extra spacing on the sentence.

Output:-
10. AIM: To Use Definition List (<dl>, <dt>, <dd>) in a
webpage.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>

<dt>JavaScript</dt>
<dd>A programming language that enables interactivity on websites.</dd>
</dl>

</body>
</html>

Where,

<Dl> tag is used to create Definition list.


<DD> tag is used to make the describe the definition.
<DT> tag is used to create the term which is going to be defined.

Output:
11.AIM: To use ORDERED LIST in a webpage.
<html >
<head>
<title>Order List</title>
</head>
<body>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>

Where,

<OL> tag is use to create order list.


<Li> tag is used to make list.

Output:
12.AIM: To use UNOREDERED LIST in a webpage.

<html >
<head>
<title>Order List</title>
</head>
<body>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ul>
</body>
</html>

Where,

<ul> tag is used to make list in order way.


<li> tag is used to create list.

Output:-

13. AIM: To use ANCHOR and HREF tag in a webpage.


<html>
<head>
<title>Anchor</title>
</head>
<body>
<a href="http://www.google.com">Go</a>
</body>
</html>

Where,

<a> tag is used to create hyper link.


Href attribute is used to add link to the hyper text.

Output:-

14. AIM: To use IMAGE tag in a web page.


<html>
<head>
<title>Image Example</title>
</head>
<body>
<h1>My Web Page</h1>
<img src="https://niu.edu.in/wp-content/uploads/2022/05/icon.jpg" alt="Noida
international university">
</body>
</html>

Where,
<Img> tag is used to add image to the web page.

Output:-

15. AIM: To create EMAIL LINK in a webpage.


<html>
<head>
<title>Anchor</title>
</head>
<body>
<a href= [email protected]> Email US </a>
</body>
</html>

Output:-

16. AIM: To create TABLE in a webpage.


<html>
<head>
<title>Table</title>
</head>
<body>
<table border="5">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>&nbsp;</td> <!- An empty cell
</tr>
</table>
</body>
</html>

Where,

<Table> tag is used to create table.


<Tr> tag is used to make raw inside table.
<Td> tag is used to add data inside the table.

Output:-
17. AIM: To use CELLPADDING and CELLSPACING in a
webpage.
<html>
<head>
<title>table2</title>
</head>
<body>
<table border="1" celpadding="5">
<tr><th colspan="2">Production</th> </tr>
<tr><td>Pankaj Mishra </td>
<td>12000</td>
</tr>
<tr><td>Aditya Narayan </td>
<td>3000</td>
</tr>
<tr><td>Aarav </td>
<td>45000</td>
</tr>
<tr><th colspan="2">Sales</th>
</tr>
<tr><td>Raj upadhyaua </td>
<td>38000</td></tr>
<tr><td>prem sah </td>
<td>8000</td>
</tr>
<tr><td>Aashish jha </td>
<td>26000</td>
</tr>
</table>
</body>
</html>
Output:-
18. AIM: To use BGCOLOR in table in a webpage.
<html>
<head>
<title> table4 </title>
</head>
<body>
<table border="2" celpadding="4"
<tr>
<th rowspan="3" bgcolor="lime">Production</th> <td>Plabita Das</td> <td>550</td>
</tr>
<tr><td>Pankaj Mishra </td> <td>380</td></tr> <tr><td>Aditya </td> <td>300</td></tr>
<tr>
<th rowspan="3" bgcolor="black">Sales</th> <td>aarav Sarma</td> <td>500</td>
</tr>
<tr><td>Rahul </td> <td>270</td></tr> <tr><td>Raj </td> <td>550</td>
</tr> </table>
</body>
</html>

Output:-
19. AIM: To add BGCOLOR in a whole table in a webpage.
<html>
<head>
<title>Table</title>
</head>
<body>
<table align="left" bgcolor="Aqua " border="5" cellpadding="4" cellspacing="4"
bordercolor="red ">
<tr>
<td colspan="2">Dairy milk </td> <td rowspan="2"> </td> <td
rowspan="2">Cake</td> <td rowspan="2">Pastry</td> </tr>
<tr>
<td>Milk</td> <td>Wafer</td>
</tr>
<tr>
<td>coke</td> <td>slice</td> <td>Thumbs-up</td>
<td>Sprite</td>
<td>Fruit Juice</td>
</tr>
</table>
</body>
</html>

Output:-
20. AIM: To use rowspan and colspan attributes in a
webpage.

<html>
<head>
<title>Row and Column Spans</title>
</head>
<body>
<table border="1" summary="span example">
<tr>
<th colspan="2">Gender</th>
<th rowspan="2">Gender</th>
</tr>
<tr>
<th>Male</th>
<th>Female</th>
</tr>
<tr>
<td>15</td>
<td>23</td>
</tr>
</table>
</body>
</html>

Output:-

You might also like