In the previous part of this tutorial, I had given an exercise to develop your resume in HTML. If you are able to develop it, then you have done great job. If you are still confused, then don’t worry. I will show you how to do it.
Let’s create a new web page resume.html –
Now let’s write some html code. Create three sections using <div> tags as shown below. I have added id attribute to uniquely identify the sections viz, profile, education, personal and footer. Use <hr> tag to separate each sections with a horizontal line.
<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
</head>
<body>
<h1> Resume </h1>
<div id="profile">
<!-- Write profile description here -->
</div>
<hr>
<div id="education">
<!-- Write educational qualifications here -->
</div>
<hr>
<div id="personal">
<!-- Write personal details here -->
</div>
<hr>
<div id="footer">
<!-- Your name and date here -->
</div>
</body>
</html>We have the document structure ready. If you open the file in browser you will only see the header Resume. Now add some content to it.
<div id="profile">
<h3>Profile</h3>
<p>Computer Science Graduate, willing to learn new technologies.. </p>
</div><div id="education">
<h3>Education</h3>
<ol>
<li> Graduation in the year 2020 from <b>XYZ College</b></li>
<li> 10+2 in the year 2016 from <b>ABC PU College</b></li>
<li> 10<sup>th</sup> Std. in the year 2014 from <b>ABC School</b></li>
</ol>
</div><div id="personal">
<h3>Personal Info </h3>
<ul>
<li> Name: Lokesh</li>
<li> Sex: Male</li>
<li> DOB: 1-1-1990</li>
<li> Address: ABC, XYZ Road, India</li>
</ul>
</div>Let’s put everything together –
<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
</head>
<body>
<h1> Resume </h1>
<div id="profile">
<h3>Profile</h3>
<p>
Computer Science Graduate, willing to learn new technologies..
</p>
</div>
<hr>
<div id="education">
<h3>Education</h3>
<ol>
<li> Graduation in the year 2020 from <b>XYZ College</b></li>
<li> 10+2 in the year 2016 from <b>ABC PU College</b></li>
<li> 10<sup>th</sup> Std. in the year 2014 from <b>ABC School</b></li>
</ol>
</div>
<hr>
<div id="personal">
<h3>Personal Info </h3>
<ul>
<li> Name: Lokesh</li>
<li> Sex: Male</li>
<li> DOB: 1-1-1990</li>
<li> Address: ABC, XYZ Road, India</li>
</ul>
</div>
<hr>
<div id="footer">
<p>Sincerely,<p>
<p>
Your Name <br>
Date: 1-1-2020
</p>
</div>
</body>
</html>Open the file in browser –
Similarly, you can take any MS Word document as reference and try to create html version of it.
In the next part (Part 3) of this tutorial, I will show you how to create html table, insert image, create hyperlinks and develop html form.