Scribd
Upload
2 views

HTML_Profile_Project

The document outlines a project to create an HTML profile page that includes a heading, a horizontal rule, three links, and a photo. It provides step-by-step instructions for coding and saving the HTML files, as well as navigation options between the main profile page and three additional linked pages. The document also lists the HTML tags used and their descriptions.

Uploaded by

rajsaini088
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

HTML_Profile_Project

The document outlines a project to create an HTML profile page that includes a heading, a horizontal rule, three links, and a photo. It provides step-by-step instructions for coding and saving the HTML files, as well as navigation options between the main profile page and three additional linked pages. The document also lists the HTML tags used and their descriptions.

Uploaded by

rajsaini088
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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>

You might also like