Class: TE AIML Academic Year: 2024-2025
Name: SHAMBHURADITYA HANMANT PAWAR
Roll no.: 122A9049
Experiment – 3
Designing of Personal Profile using HTML5
_______________________________________________________________
1. Aim: To design personal profile using HTML5
2. Objective: After performing the experiment, the students will be able to understand and
implement the basic concepts of HTML5 including –
• Use of various Attributes and Formatting tags
• Use of Hyperlink
• Insertion of Images, Tables, List and Multimedia
3. Prerequisite: HTML5
4. Requirements: The following are the requirements –
• PC/Laptop
• Visual Studio Code/Notepad
• Browser
5. Pre-Experiment Theory:
HTML is the standard markup language for creating Web pages. It describes the structure
of a Web page. It is platform independent and hence works on all operating OS
Structure of an HTML document -
• Each HTML document begins with DOCTYPE - It defines that this document is an
HTML5 document
<!DOCTYPE html>
• html section, which has the actual content - It is the root element of an HTML page.
Entire HTML code has to be written between these two tags
<html> … </html>
• Head section which contains the meta/header information of the HTML page like
Title, Description, Keywords etc.
<head>……. </head>
• Title section specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
<title> …….</title>
• Body section defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
<body>……..</body>
Tags and Elements
Contents to be structured on the web are defined by tags - Tags are written in between <>
(angular brackets). Syntax of a tag is:
<tag-name> content </tag-name>
Most of the tags will have a start and an end. Some tags do not require an end tag. eg.
<br>, <hr>
Each line is an element. Some elements don't require any content. These are called as
Empty Elements. We can also have Nested Elements
Commonly used Tags
• HTML Headings - Defined with <h1> to <h6> tags o <h1> defines
the most important heading. <h6> defines the least important heading
o Each HTML heading has a default size but we can change it
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
• HTML Paragraphs - Defined with <p> tag o A paragraph always starts
on a new line, and is usually a block of text
<p>My name is Sanjay.</p>
<p>I work in SFIT.</p>
• Horizontal Rule Tag - Defined by <hr> tag o Provides a thematic
break in an HTML page o Used to separate content (or define a
change) in an HTML page o Empty tag and does not require an end tag
<p>
Twinkle twinkle little star.
How I wonder what you are!
<br>
Up above the world so high.
Like a diamond in the sky.
</p>
• Break Tag - Defined with <br> tag o Provides a line break
o Empty tag and does not require an end tag <p>
Twinkle twinkle little star.
How I wonder what you are!
<br>
Up above the world so high.
Like a diamond in the sky.
</p>
• Preformatted text - Defined with <pre> tag o The text inside displayed
in a fixed-width font (usually Courier) o It preserves both spaces,
indentations and line breaks <pre>
Twinkle twinkle little star.
How I wonder what you are!
Up above the world so high.
Like a diamond in the sky.
</pre>
• HTML Short Quotations - Defined with <q> tag o Browsers normally
insert quotation marks around the quotation
<p>SFIT vision is to: <q>To be a chrysalis where bright youngsters
are transformed into technological entrepreneurs and innovative
leaders of tomorrow’s world, consistent with the Franciscan vision of
integrity, peace and love.</q></p>
• Address Tag - Defined by <address> tag o Defines the contact
information for the author/owner of a document or an article
o The text usually renders in italic, and browsers will always add a line break
before and after the element.
<address>
Presented by Dr. Raj Sharma <br>
Visit us at:<br>
sfit.ac.in<br>
Mt. Poinsur, Borivali (W)<br>
Mumbai
</address>
• Cite Tag - Defined with <cite> tag o Defines the title of a creative
work o The text in the <cite> element usually renders in italic.
<p><cite>Harry Potter and the Sorcerer's Stone</cite> by J.K.
Rowling..</p>
Attributes
• HTML attributes provide additional information about HTML elements
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name=”value”
Few Common Attributes
• href o The <a> tag defines a hyperlink. The href attribute specifies the URL of the
page the link goes to.
<a href="https://www.sfit.ac.in">Visit SFIT website</a>
• title o The title attribute defines some extra information about an element.
o The value of the title attribute will be displayed as a tooltip when you mouse
over the element
<h2 title="Click">Student List</h2>
• style o The style attribute is used to add styles to an element, such as color, font,
size, and more.
o Background color
<body style="background-color:powderblue;">
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
o Text Color
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
o Border Color
<h1 style="border:2px solid Tomato;">Hello World</h1>
Fonts
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
• Text Size
<p style="font-size:50px;">I am big</p>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Comments Tags
HTML comments are not displayed in the browser, but they can help document your
HTML source code.
<!-- Write your comments here -->
o Shortcut on vscode: Ctrl+K+U
Formatting
Formatting elements were designed to display special types of text:
• <b> Defines bold text
<b>I study in SFIT</b> <strong> Defines important text. The
content inside is typically displayed in bold.
<strong>This text is important!</strong>
<i> Defines italic text
<i>Information Technology</i>
• <em> Defines emphasized text
<em>Information Technology</em>
• <u> Defines underlining text
<u>This will underline text.</small>
• <small> Defines smaller text
<small>This is smaller text.</small>
• <big> Defines bigger text
<big>This is bigger text.</big>
• <sub> Defines subscripted text
<p>This is <sub>subscripted</sub> text.</p>
• <sup> Defines superscripted text
<p>This is <sup>superscripted</sup> text.</p>
• <mark> Defines marked/highlighted text
<p>Please finish your <mark>assignment</mark> today.</p>
• <ins> Defines inserted text and <del> Defines deleted text
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
• <abbr> Defines an abbreviation or an acronym
<p><abbr title=“Hypertext Markup Language”>HTML</abbr> is
used to design webpages.</p>
• <q> Defines a short quotation. Browsers normally insert quotation marks around the
quotation
<p>I believe<q>Honesty is the best policy..</q></p>
• <cite> Defines the title of a creative work (e.g. a book, a poem, a song, a movie, a
painting, a sculpture, etc.)
<p><cite>Harry Potter an the Sorcerer's Stone</cite> by J.K.
Rowling.</p>
Images
Images can improve the design and the appearance of a web page
• <img> tag is used to embed an image in a web page. It is an empty tag, it contains
attributes; does not have a closing tag
• <img> tag has two required attributes:
o src - Specifies the path (URL) to the image o alt - Specifies
an alternate text for the image
<img src= "pan.jpeg" alt= "PAN Card" >
o You can use the width and height attributes:
<img src= "pan.jpeg" alt= "PAN Card" width="500" height="600">
• If image is in a sub-folder, include the folder name in the src attribute
• To point to an image on another server, specify an absolute (full) URL in the src
attribute
• HTML allows animated GIFs
Tables
Allows web developers to arrange data into rows and columns.
• <table> tag defines an HTML table Each table row is defined with a
<tr> tag.
• Each table header is defined with a <th> tag.
• Each table data/cell is defined with a <td> tag.
• By default, the text in <th> elements are bold and centered. By default,
the text in <td> elements are regular and left-aligned.
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
To add a caption to a table, use the <caption> tag. The <caption> tag must be
inserted immediately after the <table> tag.
<table style="width:100%">
<caption>Monthlysavings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Lists
HTML lists allow web developers to group a set of related items in lists.
• An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
o The list items will be marked with bullets (small black circles) by
default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag.
o The list items will be marked with numbers by default: <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
• HTML also supports description lists.
o A description list is a list of terms, with a description of each term. o
The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Hyperlinks
• Links allow users to click their way from page to page. A link does not have to be
text. A link can be an image or any other HTML element. When you move the mouse
over a link, the mouse arrow will turn into a little hand.
• <a> tag defines a hyperlink
• The most important attribute of the <a> element is the href attribute, which indicates
the link's destination.
• The link text is the part that will be visible to the reader. Clicking on the link text,
will send the reader to the specified URL address. <a href="url">link text</a>
<a href="https://www.sfit.ac.in/">Visit SFIT website</a>
• By default, the linked page will be displayed in the current browser window. To
change this, specify another target for the link. The target attribute specifies where to
open the linked document. The target attribute can have one of the following values:
o _self - Default. Opens the document in the same window/tab as it was clicked o
_blank - Opens the document in a new window or tab o _parent - Opens the
document in the parent frame o _top - Opens the document in the full body of the
window
<a href="https://www.sfit.ac.in/" target="_blank">Visit SFIT
website</a>
• Link to an Email Address: Use mailto: inside the href attribute to create a link that
opens the user's email program (to let them send a new email):
<a href="mailto:[email protected]">Send email</a>
Multimedia
Multimedia on the web is sound, music, videos, movies, and animations. Web pages
often contain multimedia elements of different types and formats.
Common Video Formats supported by HTML.
o .mpeg, .avi, .wmv, .mov, .rm, .swf, .flv, .ogg, .webm, .mp4
Common Audio Formats supported by HTML.
o .midi, .ram, .wma, .aac, .wav, .ogg, .mp3, .mp4 The
HTML <video> element is used to show a video on a web page.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video> To start a video automatically, use the autoplay attribute:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
</video> To play an audio file in HTML, use the <audio> element:
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
</audio> To start an audio file automatically, use the autoplay attribute:
<audio controls autoplay>
<source src="horse.mp3" type="audio/mpeg"> </audio>
6. Laboratory Exercise
A. Procedure-
Write HTML code on Visual Studio Code/Notepad
Select File, New to write to a new file
Save the file as .html
To view the output, right-click on the file and select Open With option. Then choose any
web browser that is available.
Check output
B. Program Code
Write and execute an HTML code to design your personal profile page. The profile page
should include (This is suggestive – You can use your creativity) -
• Your photograph (image)
• About you (Add an inspirational quote here)
• Personal details including name, address, mobile number, email id (link),
LinkedIn profile (link)
• Academic qualifications (Table)
• Skills - Technical and non-technical – (List)
• Internships
• Projects – (video)
• Certifications (Images)
• Hobbies
• Social Responsibility activities
• Achievements
• References
The following tags are expected to be used -
• Attributes like headings, paragraphs, break, horizontal rule, preformatted text,
address, cite
• Formatting tags like title, style tags – background, text, border color, fonts, text
size and alignment, superscript, subscript etc.
• Hyperlink
• Images
• Tables
• List
• Audio clip
• Video clip
7. Results/Observations/Program output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Personal Portfolio</title>
<style>
body {
font-family: Arial, sans-
serif;
background-color: #f0f0f0;
padding: 20px;
max-width: 800px;
margin: 0 auto;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,
0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
img {
display: block;
margin: 0 auto;
border-radius: 50%;
}
div {
background-color: #fff;
padding: 20px;
margin-top: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,
0, 0, 0.1);
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
table, th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
th {
background-color: #f0f0f0;
}
ul {
list-style-type: none;
padding-left: 0;
}
hr {
margin: 20px 0;
border: none;
border-top: 1px solid #ccc;
}
ol {
padding-left: 20px;
}
a {
text-decoration: none;
color: #007bff;
}
</style>
</head>
<body>
<h1>My Personal Portfolio</h1>
<img
src="https://picsum.photos/300/200"
alt="Profile Picture">
<div>
<h3>About Me:</h3>
<p>
I am currently pursuing my
engineering degree with a focus on
Artificial Intelligence and Machine
Learning.
</p>
</div>
<hr>
<div>
<h3>Academic Qualifications:</h3>
<table>
<tr>
<th>Course</th>
<th>Institution</th>
<th>Year</th>
</tr>
<tr>
<td>SSC</td>
<td>Mahaboard</td>
<td>2020</td>
</tr>
<tr>
<td>HSC</td>
<td>CBSE</td>
<td>2022</td>
</tr>
<tr>
<td>Engg (AI/ML)</td>
<td>MU</td>
<td>2026</td>
</tr>
</table>
</div>
<div>
<h3>Skills:</h3>
<ul>
<li>Web computing</li>
<li>Data Analysis</li>
<li>Studying</li>
</ul>
</div>
<hr>
<div>
<h3>Internship:</h3>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Dolorem,
unde!</p>
</div>
<div>
<h3>Projects:</h3>
<a
href="http://commondatastorage.googleapis
.com/gtv-videos-bucket/sample/
BigBuckBunny.mp4">Watch my video
project</a>
</div>
<div>
<h3>Certifications:</h3>
<img
src="https://picsum.photos/300/200"
alt="Certification">
</div>
<hr>
<div>
<h3>Hobbies:</h3>
<p>Investment | Video Gaming</p>
</div>
<div>
<h3>Achievements:</h3>
<ol>
<li>asdsd</li>
<li>asdsads</li>
</ol>
</div>
<hr>
<div>
<h3>Personal Details:</h3>
<p>Name: Shambhuraditya Pawar</p>
<p>Address: Lorem ipsum dolor sit
amet.</p>
<p>Mobile number: 23672362877</p>
<p>Email: <a
href="mailto:
[email protected]">shambhu@g
mail.com</a></p>
<p>LinkedIn: <a
href="https://www.linkedin.com/in/tanmayr
ewale/">Shambhuraditya Pawar</a></p>
</div>
<hr>
<div>
<h3>References</h3>
<ul>
<li><a href="#">Reference
1</a></li>
<li><a href="#">Reference
2</a></li>
</ul>
</div>
</body>
</html>
Output:
8. Conclusion:
In conclusion, the experiment successfully demonstrated the creation of a personal
portfolio website using basic html.
9. References:
HTML 5 Black Book (Covers CSS3, JavaScript, XML, XHTML, AJAX, PHP,
jQuery) 2Ed., DT Editorial Services
https://www.w3schools.com/html/default.asp
https://www.youtube.com/watch?v=qz0aGYrrlhU
https://www.tutorialspoint.com/html/index.htm
https://spoken-tutorial.org/tutorial-search/?search_foss=HTML&search_language=English
