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., [Link]).
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 ([Link])
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="[Link]" alt="My Photo" width="200" height="200">
<h2>Explore More:</h2>
<a href="[Link]">About My Hobbies</a><br>
<a href="[Link]">My Projects</a><br>
<a href="[Link]">Contact Me</a><br>
<br><br>
<button onclick="[Link]()">Backward</button>
<button onclick="[Link]()">Forward</button>
<button onclick="[Link]='[Link]'">Home</button>
</body>
</html>
First Link Page ([Link])
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="[Link]()">Backward</button>
<button onclick="[Link]()">Forward</button>
<button onclick="[Link]='[Link]'">Home</button>
</body>
</html>
Second Link Page ([Link])
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="[Link]()">Backward</button>
<button onclick="[Link]()">Forward</button>
<button onclick="[Link]='[Link]'">Home</button>
</body>
</html>
Third Link Page ([Link])
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 [Link]@[Link] or call me at +91-
9876543210.</p>
<br><br>
<button onclick="[Link]()">Backward</button>
<button onclick="[Link]()">Forward</button>
<button onclick="[Link]='[Link]'">Home</button>
</body>
</html>
