VISION INSTITUTE OF TECHNOLOGY,ALIGARH
Subject: html
Unit-1 lab manual
1. write program basic HTML Page
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a basic HTML page.</p>
</body>
</html>
Output:
Welcome to My Website *(Displayed as a large heading - <h1>)
This is a basic HTML page. (Displayed as a normal paragraph - <p>)
2.write a program to create heading in html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Headings</title>
</head>
<body>
<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>
</body>
Page1 Faculty: VIKRAM SHARMA
[email protected] VISION INSTITUTE OF TECHNOLOGY,ALIGARH
Subject: html
Unit-1 lab manual
</html>
Output:
This is Heading 1 (Largest, <h1>)
This is Heading 2 (Slightly smaller, <h2>)
This is Heading 3 (Medium-sized, <h3>)
This is Heading 4 (Smaller, <h4>)
This is Heading 5 (Even smaller, <h5>)
This is Heading 6 (Smallest, <h6>)
3.write a program to create html paragraph
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Paragraph Example</title>
</head>
<body>
<h1>HTML Paragraphs</h1>
<p>This is a simple paragraph in HTML. Paragraphs are created using the <p> tag.</p>
<p>Paragraphs help in organizing content and improving readability.</p>
<p>Here is another paragraph with a <b>bold</b> word and an <i>italic</i> word.</p>
</body>
</html>
OUTPUT: This is a simple paragraph in HTML. Paragraphs are created using the
<p> tag.
(Displayed as a normal paragraph with default black text.)
Paragraphs help in organizing content and improving readability.
(Displayed as another normal paragraph.)
Page2 Faculty: VIKRAM SHARMA
[email protected] VISION INSTITUTE OF TECHNOLOGY,ALIGARH
Subject: html
Unit-1 lab manual
This paragraph is styled with color and font size using inline CSS.
(Displayed in blue color and font size 18px due to inline CSS.)
Here is another paragraph with a bold word and an italic word.
(The words "bold" and "italic" are formatted accordingly.)
4. write a program in HTML with Inline CSS
<!DOCTYPE html>
<html>
<head>
<title>Styled Page</title>
</head>
<body style="background-color: lightblue; text-align: center;">
<h1 style="color: red;">Hello, World!</h1>
<p>This page has inline CSS styling.</p>
</body>
</html>
Output:
Background Color: Light Blue (due to background-color: lightblue; in the <body>
tag).
1. Text Alignment: Centered (because of text-align: center; in the <body> tag).
2. Heading (<h1>) Appearance:
o Displays "Hello, World!"
o The text color is red (color: red;).
o The text is centered due to the body's text alignment.
3. Paragraph (<p>) Appearance:
o Displays "This page has inline CSS styling."
o It appears in default black color.
o The text is centered (inherited from <body>).
5. Adding an Image
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h1>Beautiful Nature</h1>
<img src="https://via.placeholder.com/300" alt="Sample Image">
Page3 Faculty: VIKRAM SHARMA
[email protected] VISION INSTITUTE OF TECHNOLOGY,ALIGARH
Subject: html
Unit-1 lab manual
</body>
</html>
Output:
A centered heading: "Welcome to My Web Page".
A centered image:
Displays "image.jpg" (Make sure the image file is in the same folder as your HTML
file).
The image size is 400px width × 300px height.
6. Creating a Hyperlink
<!DOCTYPE html>
<html>
<head>
<title>Link Example</title>
</head>
<body>
<h1>Visit Google</h1>
<a href="https://www.google.com" target="_blank">Click here to go to
Google</a>
</body>
</html>
Output: Output of the Given HTML Program in a Web Browser:
1. A heading (<h1>) displaying:
"Visit Google" (big and bold).
2. A clickable hyperlink (<a> tag) that says:
"Click here to go to Google"
o When clicked, it opens Google (https://www.google.com) in a new tab
(target="_blank").
7. Creating an HTML Table
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<h1>Student Grades</h1>
<table border="1">
<tr>
Page4 Faculty: VIKRAM SHARMA
[email protected] VISION INSTITUTE OF TECHNOLOGY,ALIGARH
Subject: html
Unit-1 lab manual
<th>Name</th>
<th>Grade</th>
</tr>
<tr>
<td>Alice</td>
<td>A</td>
</tr>
<tr>
<td>Bob</td>
<td>B</td>
</tr>
</table>
</body>
</html>
Output:
Student Grades
Name Grade
Alice A
Bob B
8. HTML Form Example
<!DOCTYPE html>
<html>
<head>
<title>Simple Form</title>
</head>
<body>
<h1>Contact Us</h1>
<form>
Name: <input type="text" name="name"><br><br>
Email: <input type="email" name="email"><br><br>
Message: <textarea name="message"></textarea><br><br>
<input type="submit" value="Send">
</form>
</body>
</html>
Page5 Faculty: VIKRAM SHARMA
[email protected] VISION INSTITUTE OF TECHNOLOGY,ALIGARH
Subject: html
Unit-1 lab manual
OUTPUT:
9. Creating an Ordered List
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<h1>Top 3 Programming Languages</h1>
<ol>
<li>Python</li>
<li>JavaScript</li>
<li>Java</li>
</ol>
</body>
</html>
OUTPUT: Top 3 Programming Languages
1. Python
2. JavaScript
3. Java
10. Creating an Unordered List
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
</head>
Page6 Faculty: VIKRAM SHARMA
[email protected] VISION INSTITUTE OF TECHNOLOGY,ALIGARH
Subject: html
Unit-1 lab manual
<body>
<h1>Grocery List</h1>
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Bread</li>
</ul>
</body>
</html>
OUTPUT: Grocery List
Milk
Eggs
Bread
Page7 Faculty: VIKRAM SHARMA
[email protected]
