Web Development

GURU NANAK COLLEGE
BUDHLADA
SESSION:2023-24
PRACTICAL FILE
WEB DESIGNING
SUBMITTED TO: SUBMITTED BY:

ASST. PROF. GURSAINHEERA
SINGH
BHAWNA BANSAL B.VOC.SD(I)
ROLL NO. 11103

TABLE OF CONTENT
1. 1. Introduction to html.
a) HTML tag
b) creating HTML Document
c) Structure of Html Page.
2. Create a web page using font tag and it's attributes
3. Create a Web page using anchor tag
4. Create a web page to include image using HTML tag.
Create a Web Page using list tag of HTMI.
5. 1. <ol> 2. <ul> tag
6. Create a Web page of nested list using <ol> and <ul> tag.
7. Create a Web page using table tag of HTML.
8. Create a Web page using row span and call span.
Create a web page which defined all text formatting tags of html in
9. tabular format.
10.
Create a Web Page using image mapping.
11.
Create a Web Page using Button tag.
12.
Create employ registration web page using HTML form objects.
13.
Create a Web Page using frame tag using it's attributes.
14. Introduction of style sheet. (CSS)
1.Inline CSS 2.External CSS
15.
Create a Web Page with background image using CSS.
1.INTRODUCTION TO HTML
What is HTML?
 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a
link", etc.
HTML TAG
The <html> tag represents the root of an HTML document.
The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).
Create Html Page
You can create your first HTML page by the following steps:
Step 1: Open the Text Editor
In this step, we have to open any text editor such as Notepad or Notepad++ for writing an HTML code. The
following image is the screenshot of the text editor (notepad++) for writing the HTML code.
Step 2: Type the HTML code.
In this step, we have to type the HTML code in the text editor. The HTML code is composed of various tags
and always begins with the opening tag of HTML and complete with the closing tag of HTML.
The following block describes the syntax for creating any HTML page:
1. <HTML>
2. <HEAD>
3. 
4. </HEAD>
5. <BODY>
6. 
7. </BODY>
8. </HTML> 
In the above syntax, some important tags or elements are used, which are given below:
<HTML>: It is the opening tag of any HTML code.
<HEAD>: The Head tag is used to create a title of the web page, CSS syntax for a web page, and helps in
written a JavaScript code The <head> must be closed before the opening of <body> tag.
<BODY>: The Body tag is used to display the content or text on a web page, which is specified between the
body tag.-->
</HTML>: It is the Closing tag of any HTML code.

Example: The following example creates a simple HTML page as an example through which you can
understand easily:
1. <HTML> 

2. <HEAD>
3. 
4. <title> 
5. Simple HTML Page
6. </title>
7. <script>
8. 
9. </script>
10. <style>. 2
11. /* This tag is used to create a Cascading Style Sheet for displaying the attractive web page. */
12. </style>
13. </HEAD>
14. <BODY>
15. <center> 
16. 
17. </center>
18. </BODY>
19. </HTML>
Step 3: Save the HTML code.
After typing the complete HTML code, we have to save that file in a folder with .html extension. We can
easily save the html file by clicking on the File menu and then click on Save As option. After that, type the
file name with .html extension. The following screenshot describes how we save the above html code in a
text editor.
Step 4: Run the HTML file.
At the last step, we have to execute or run an HTML file from the location where we saved the file. The file
will run on a default browser. Consider the below output:
HTML PAGE STRUCTURE
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph. < /p>
<p>This is another paragraph. < /p>
</body>
</html>
Note: The content inside the <body> section will be displayed in a browser. The content inside the <title>
element will be shown in the browser's title bar or in the page's tab.
<html> </html> :
<html> is a root element of html. It’s a biggest and main element in complete html language, all the tags ,
elements and attributes enclosed in it or we can say wrap int , which is used to structure a web page. <html>
tag is parent tag of <head> and <body> tag , other tags enclosed within <head > and <body>.
<head>:
Head tag contains metadata, title, page CSS etc. Data stored in the <head> tag is not displayed to the user,
it is just written for reference purposes and as a watermark of the owner.
<body>:
A body tag is used to enclose all the data which a web page has from texts to links. All the content that you
see rendered in the browser is contained within this element. Following tags and elements used in the body.
1. <h1 > , <h2> ,<h3> to <h6>
2. <p>
3. <div> and <span>
4. <form>
5. <label> and <input> others……….
OUTPUT:
2.Create a web page using font tag and its attributes.
The <font> tag was used to specify the font face, font size, and color of text.
Attributes of font tag
1. FONT Color : Set the color of text(with CSS)
<html>
<body>
<p style="color:black">HTML</p>
<p style="color:blue">Hyper Text Markup Language.</p>
</body>
</html>
2. FONT style : Set the font

of text(with CSS)
<html>
<body>
<p style="candara">HTML</p>
<p style="font-family:’times new roman’'">Hyper Text Markup
Language.</p>
</body>
</html>
3.FONT size : Set the size of text(with CSS)
<html>
<body>
<p style="font-size:30px">HTML</p>
<p style="font-size:11px">Hyper Text Markup Language</p>
</body>
</html>
OUTPUT:
3.Create a web page using anchor tag.
Syntax:
<a href = "link"> Link Name </a>
Example:
<html>
<body>
<h1>The anchor element</h1>
<a href="https://www.google.com/">google</a>
</body>
</html>
Image as a link
<html>
<body>
<a href="https://www.google.com/">
<img src="C:\Users\Sunil Kumar\OneDrive\Desktop\IMAGES\
google.png" alt="google logo" width="200" height="200"
border="1px solid black">
</a>
</body>
</html>
OUTPUT:
4. Create a web page to include image using HTML tag.
<html>
<body>
<h2>HTML Image</h2>
<img src="C:\Users\Sunil Kumar\OneDrive\Desktop\IMAGES\boattail.jpg" alt=0"luxury car" width="460"

height="345">
</body>
</html>
OUTPUT:
5.Create a web page using list tag of HTML.
1. <ol> tag
<html>
<body>
<h2>An ordered HTML list</h2>
<ol type='a'>
<li>mango</li>
<li>grapes</li>
<li>kiwi</li>
</ol>
</body>
</html>
2. <ul> tag
<html>
<body>
<h2>An Unordered HTML list</h2>
<ul>
<li>mango</li>
<li>grapes</li>
<li>kiwi</li>
</ul>
</body>
</html>
OUTPUT:
6. Create a Web page of nested list using <ol> and <ul> tag.
<html>
<body>
<h2>A Nested List</h2>

<p>Lists can be nested (list inside list):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
<html>
<body>
<h2>A Nested List</h2>

<p>Lists can be nested (list inside list):</p>
<ol>
<li>Coffee</li>
<li>Tea
<ol type="a">
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
</body>
</html>
OUTPUT:
7. Create a Web page using table tag of HTML.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>Table with Collapsed Borders</h1>
<table>
<tr>
<th>NAME</th>
<th>CONTACT NO.</th>
</tr>
<tr>
<td>KRITIKA</td>
<td>9876435665</td>
</tr>
<tr>
<td>ABHISHEK</td>
<td>9944876538</td>
</tr>
</table>
</body>
</HTML>
OUTPUT:
8.Create a web page using rowspan and colspan.
COLSPAN ROWSPAN
<html> <html>
<head> <head>
<style>
<style>
table,th,td{
table, th, td {
border:2px solid black;
border: 1px solid black;
border-collapse:collapse;
} border-collapse: collapse;
</style> }
</style>
<body> </head>
<table>
<body>
<tr>
<table>
<th colspan="2">Name</th>
<th>Age</th> <tr>
</tr> <th>Name</th>
<tr> <td>Jill</td>
<td>James</td> </tr>
<td>Mill</td>
<tr>
<td>43</td>
<th rowspan="2">Phone</th>
</tr>
<td>555-1234</td>
<tr>
<td>Eve</td> </tr>
<td>Jackson</td> <tr>
<td>57</td> <td>555-8745</td>
</tr> </tr>
</table>
</table>
</body>
</body>
</head>
OUTPUT:
9. Create a web page which defined all text formatting tags of html in
tabular format.
<html>
<head>
<body>
<h1>Formatting tags</h1>
<b>This text is bold</b>
<strong>This text is important!</strong>
<i>This text is italic</i>
<small>This is some smaller text.</small>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</head>
</body>
OUTPUT:
10. Create a Web Page with background image using CSS.
<html>
<head>
<style>
body {
background-image:url(".\bgcomp.jpg");
background-size:100% 100%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<p>This page has an image as the background!</p>
</body>
</html>
OUTPUT:
11. Create a Web Page using Button tag.
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color: blue;}

.button2 {background-color: green;}
</style>
</head>
<body>
<h1>The button element - Styled with CSS</h1>

<p>Change the background color of a button with the background-color property:</p>
<button class="button button1">submit</button>

<button class="button button2">reset</button>
</body>
</html>
OUTPUT:
12. Create employ registration web page using HTML form objects.
<html> </tr>
<head> <tr>
<meta name="viewport" <td><input type="text" name=""></td>
content="width=device-width, initial-scale=1.0">
<td> <input type="text" name=""></td>
</head>
</tr>
<style>
<tr>
table{
<td>Gender</td>
border-top: 8px solid grey;
<td>Address</td>
border-left: 8px solid grey ;
border-bottom: 8px solid rgb(70, 69, 69) ;

</tr>
border-right: 8px solid rgb(70, 69, 69) ;
<tr>
}
<td>
th,td{
<input type="radio" name=" gender"
border: 2px solid black; value="MALE">MALE
} <input type="radio" name="
gender">FEMALE
.butt{
</td>
margin: 70px;
<td><textarea name="" id="" cols="10"
position: relative;
rows="5"></textarea></td>
left: 650px;
</tr>
}
<tr>
</style>
<td>Date of Birth </td>
<body>
<td>Time of Birth</td>
<h1 style="text-align: center;">APPLICATION
</tr>
FORM</h1>
<tr>
<form action="./registration_form1.html"
method="post"> <td><input type="date" name=""></td>
<table align="center";> <td><input type="time" name=""></td>
<tr> </tr>
<td>First Name</td> <tr>
<td> Last Name</td> <td>Phone Number</td>
</tr> <td> Are you a citizen of india</td>
</tr>
<tr>
<td><input type="number"
<td><input type="number" name=""></td>
<td>
<input type="radio" name="citizen" value="MALE">Yes
<input type="radio" name="citizen">No
</td>
</tr>
<td>
Profile Photo :
<input type="file" name="upload" id="fileselect">
</td>
</tr>
<tr>
<td>Email</td>
<td>Password </td>
</tr>
<tr>
<td>
<input type="email" name="">
</td>
<td><input type="password" name=""></td>
</tr>
</table>
<div class="butt">
<button type="submit" href="./registration_form1.html"> Submit

</button>
<button type="reset" href="./registration_form1.html"> Reset

</button>
</div>
</form>
</body>
</html>
OUTPUT:
13.Create a Web Page using frame tag using it's attributes.
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="designer form.html">
</frameset>
</html>
OUTPUT:
14.Introduction of style sheet. (CSS)
1.Inline CSS 2.External CSS
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
1. Inline css
<html>
<body>
<h1 style="color:blue;">A
Blue Heading</h1>
<p style="color:red;">A red
paragraph.</p>
</body>
2.External css
Style.css
<html>
<head> .h1{
<link rel="stylesheet" href="styles.css"> color:blue;
</head> }
<body> .p{
<h1>This is a heading</h1> color:red;
<p>This is a paragraph.</p> }
</body>
</html>
OUTPUT:
15.CREATE A WEB PAGE USING IMAGE MAPPING.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>image mapping</title>
</head>
<body>
<img src="../insta.jpg" alt="" usemap="#kashi">
<map name="kashi">
<area shape="poly" coords="143,3,254,23,233,103,187,164,78,108,128,68" href="" alt="">
</map>
</body>
</html>

Web Development

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Development

Uploaded by

Copyright:

Available Formats

GURU NANAK COLLEGE

SUBMITTED TO: SUBMITTED BY:

ROLL NO. 11103

 HTML stands for Hyper Text Markup Language

The <html> tag represents the root of an HTML document.

Step 1: Open the Text Editor

<HTML>: It is the opening tag of any HTML code.

</HTML>: It is the Closing tag of any HTML code.

1. <HTML>

Attributes of font tag

1. FONT Color : Set the color of text(with CSS)

<p style="color:blue">Hyper Text Markup Language.</p>

2. FONT style : Set the font

3.FONT size : Set the size of text(with CSS)

<img src="C:\Users\Sunil Kumar\OneDrive\Desktop\IMAGES\boattail.jpg" alt=0"luxury car" width="460"

<h2>An ordered HTML list</h2>

<h2>An Unordered HTML list</h2>

<h2>A Nested List</h2>

<h2>A Nested List</h2>

<h1>Table with Collapsed Borders</h1>

<b>This text is bold</b>

<strong>This text is important!</strong>

<i>This text is italic</i>

<small>This is some smaller text.</small>

<p>Do not forget to buy <mark>milk</mark> today.</p>

<p>My favorite color is <del>blue</del> red.</p>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

<p>This is <sub>subscripted</sub> text.</p>

<p>This is <sup>superscripted</sup> text.</p>

.button1 {background-color: blue;}

<h1>The button element - Styled with CSS</h1>

<button class="button button1">submit</button>

border-bottom: 8px solid rgb(70, 69, 69) ;

<input type="radio" name="citizen" value="MALE">Yes

<input type="radio" name="citizen">No

<input type="file" name="upload" id="fileselect">

<input type="email" name="">

<td><input type="password" name=""></td>

<button type="submit" href="./registration_form1.html"> Submit

<button type="reset" href="./registration_form1.html"> Reset

<frame src="designer form.html">

<frame src="designer form.html">

<frame src="designer form.html">

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

You might also like