Scribd
Upload
6 views6 pages

Sachin_Labfile2.docx

The document outlines an experiment for creating a CV webpage using HTML, which includes implementing frames for navigation and content display. It details the procedure for creating various HTML files such as cv.html, frame.html, menu.html, and about.html, along with their respective structures and functionalities. The conclusion emphasizes the successful demonstration of structured content organization and dynamic navigation using frames.

Uploaded by

ashwinsharma2099
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views6 pages

Sachin_Labfile2.docx

The document outlines an experiment for creating a CV webpage using HTML, which includes implementing frames for navigation and content display. It details the procedure for creating various HTML files such as cv.html, frame.html, menu.html, and about.html, along with their respective structures and functionalities. The conclusion emphasizes the successful demonstration of structured content organization and dynamic navigation using frames.

Uploaded by

ashwinsharma2099
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Student Name Sachin

Admission Number 22SCSE1310001

Roll Number 22131310002

Programme B.tech CSE

Course Name Web Technology

Course Code R1UC626C

Experiment No: 02
Experiment Title: Write an HTML code to display your CV on a web page. Write an
HTML code to implement the concept of frames with 2 frames: one for hyperlinks and
another for opening the content to that link.

Aim: To create a webpage that displays a personal CV using HTML and to implement
the concept of frames, where one frame contains hyperlinks and the other displays the
corresponding content.

Procedure:
1. Create the CV Web Page (cv.html).
● Write an HTML document that includes sections like Personal Information,
Education, Skills, Projects, and Contact.
● Use appropriate HTML tags such as <h1>, <h2>, <p>, and <ul> to structure the
content.
● Save the file as cv.html.
2. Create the Frame Structure (frame.html).
● Use the <frameset> tag to divide the webpage into two sections:
○ Left Frame (30%) → Contains navigation links.

○ Right Frame (70%) → Displays the selected content.

● Set the default page in the right frame to cv.html.


● Save the file as frame.html.
3. Create the Navigation Menu (menu.html).
● Create a simple HTML page with links (<a> tags) for View CV and About Me. ● Set
the target="contentFrame" so that clicking on a link updates only the right frame. ●
Save the file as menu.html.
4. Create the About Me Page (about.html).
● Write an HTML page with a brief description about yourself.
● Use a <h1> heading and a <p> tag for structured content.
● Save the file as about.html.
5. Link the Files Together.
● The navigation links in menu.html should open cv.html and about.html in the right
frame.
● The <frameset> in frame.html should correctly reference menu.html and cv.html.
6. Run the Web Page in a Browser.
● Open frame.html in a web browser to view the framed structure. ● Click on the
links in the left frame to ensure they load content in the right frame.
7. Verify the Output.
● Ensure that clicking "View CV" loads cv.html in the right frame. ●
Ensure that clicking "About Me" loads about.html in the right frame.
Source Code:
1. cv.html
<!DOCTYPE html>

<html>

<head>

<title>My CV</title>

</head>

<body>

<h1> Sachin</h1>

<p><strong>Profession:</strong> Web Developer | Designer |


Programmer</p>

<h2>Contact Information</h2>

<p>Email: [email protected]</p>

<p>Phone: 9719112474</p>
<p>Address: Delhi, India</p>

<p>LinkedIn: linkedin.com/in/Sachinsirohi</p>

<h2>Profile Summary</h2>

<p>

A highly motivated web developer with experience in


building responsive and interactive websites.

Passionate about learning new technologies and solving


real-world problems.

</p>

<h2>Education</h2>

<ul>

<li><strong>Master of Computer Science</strong> - XYZ


University (2022 - 2024)</li>

<li><strong>Bachelor of Computer Science</strong> - ABC


College (2018 - 2022)</li>

</ul>

<h2>Work Experience</h2>

<h3>Front-End Developer - ABC Company</h3>

<p>2023 - Present</p>

<ul>

<li>Developed and maintained responsive websites using


HTML, CSS, and JavaScript.</li>

<li>Collaborated with designers and back-end developers to


improve user experience.</li>

</ul>
<h3>Intern Web Developer - XYZ Solutions</h3>

<p>2022 - 2023</p>

<ul>

<li>Assisted in creating landing pages and updating


website content.</li>

<li>Performed website testing and debugging.</li>

</ul>

<h2>Skills</h2>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>React</li>

<li>Git & GitHub</li>

</ul>

<h2>Languages</h2>

<ul>

<li>English - Fluent</li>

<li>Hindi - Native</li>

</ul>

</body>

</html>
Result:

Conclusion
In this experiment, we successfully created a CV webpage and implemented frames in HTML
to display content dynamically. The following key concepts were demonstrated:
● Creating a structured CV webpage (cv.html) using HTML elements like headings
(<h1>, <h2>), paragraphs (<p>), and lists (<ul>).
● Using frames (frame.html) to divide the webpage into two sections:
● A navigation frame (menu.html) containing links.
● A content frame (cv.html by default) where linked pages are displayed. ● Implementing
hyperlink navigation within frames to load different pages (cv.html and about.html) in
the content frame dynamically.
● Ensuring seamless content display when clicking on links, demonstrating how frames
can be used for better content organization.

You might also like