HTML Profile Project
AIM:
To design an HTML page that describes your profile in one paragraph. The design must
include a heading, a horizontal rule, three links, and your photo. Also, create three
additional HTML documents for the three links. Include forward, backward, and home
navigation facilities.
SOFTWARE REQUIRED:
1. Notepad or any text editor.
2. Web browser (e.g., Internet Explorer, Chrome, Firefox)
PROCEDURE:
Step 1: Open the Notepad window.
Step 2: Type the HTML code in the Notepad window.
Step 3: Save the HTML document with a filename and .html extension (e.g., profile.html).
Step 4: Open any web browser and open the saved HTML file.
TAGS USED:
TAG DESCRIPTION
<html> Defines an HTML document
<head> Defines the document's head section
<body> Defines the document's body section
<h1> to <h6> Define heading levels from 1 to 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!-- --> Defines a comment
bgcolor Defines the background color
<img src> Adds an image to the webpage
<a href> Creates a hyperlink to another webpage
<title> Defines the document's title shown in the
browser tab
Main Profile Page (profile.html)
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>My Profile</title>
</head>
<body bgcolor="#e0f7fa">
<h1>Welcome to My Profile</h1>
<hr>
<p>Hello! My name is Rahul Sharma. I am a passionate web developer with a keen
interest in designing creative websites. I love learning new technologies, and I enjoy turning
ideas into reality through coding and innovation.</p>
<img src="myphoto.jpg" alt="My Photo" width="200" height="200">
<h2>Explore More:</h2>
<a href="link1.html">About My Hobbies</a><br>
<a href="link2.html">My Projects</a><br>
<a href="link3.html">Contact Me</a><br>
<br><br>
<button onclick="history.back()">Backward</button>
<button onclick="history.forward()">Forward</button>
<button onclick="window.location.href='profile.html'">Home</button>
</body>
</html>
First Link Page (link1.html)
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>My Hobbies</title>
</head>
<body bgcolor="#fce4ec">
<h1>My Hobbies</h1>
<hr>
<p>I love painting, traveling, and coding. During my free time, I also enjoy playing guitar
and photography.</p>
<br><br>
<button onclick="history.back()">Backward</button>
<button onclick="history.forward()">Forward</button>
<button onclick="window.location.href='profile.html'">Home</button>
</body>
</html>
Second Link Page (link2.html)
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>My Projects</title>
</head>
<body bgcolor="#fff9c4">
<h1>My Projects</h1>
<hr>
<p>I have worked on multiple web development projects, including a portfolio site, an e-
commerce website, and a blogging platform.</p>
<br><br>
<button onclick="history.back()">Backward</button>
<button onclick="history.forward()">Forward</button>
<button onclick="window.location.href='profile.html'">Home</button>
</body>
</html>
Third Link Page (link3.html)
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Contact Me</title>
</head>
<body bgcolor="#e8f5e9">
<h1>Contact Me</h1>
<hr>
<p>You can contact me through email at [email protected] or call me at +91-
9876543210.</p>
<br><br>
<button onclick="history.back()">Backward</button>
<button onclick="history.forward()">Forward</button>
<button onclick="window.location.href='profile.html'">Home</button>
</body>
</html>
