CV page with HTML only

Learn How to create a CV page using HTML only

A brief overview of how to create a CV page using HTML only.

  • Set the background color to sea green.
  • Use table tags to structure the CV page.
  • Add your personal information to create CV page.

Source code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Resume
</title>
</head>
<body bgcolor="seagreen">
<table border="1" align="center" width="55%">
<tr bgcolor="darkgreen">
<th>
<h1>Resume</h1>
</th>
</tr>
<tr>
<td align="left">
<h2>
Muhammad Usama Yousaf
<img src="images/Profile.jpg" alt="profile pic" align="right" height="180" width="160">
</h2>
<ol>
<li>
<h3>
Contact Details:
</h3>
</li>
<ul>
<b>
<li>
Mobile No : ** *** ********
</li>
<li>
Email Address: *****@gamil.com
</li>
</b>
</ul>
<li>
<h3>
Personal Details:
</h3>
</li>
<ul>
<b>
<li>Name:Muhammad Usama Yousaf</li>
<li>CNIC: *****-*******-*</li>
<li>Date of Birth:**/**/****</li>
<li>Religion:Islam</li>
<li>Phone No:** *** ********</li>
</b>
</ul>
<li>
<H3>
Qualification:
</H3>
</li>
<table cellpadding="20%">
<tr bgcolor="darkgreen">
<th>Examination </th>
<th>Division </th>
<th>board/University </th>
</tr>
<tr align="center">
<td>Matric</td>
<td>1</td>
<td>Multan Board</td>
</tr>
<tr align="center">
<td>Ics</td>
<td>1</td>
<td>Rawalpindi Board</td>
</tr>
<tr align="center">
<td>Bscs</td>
<td>1</td>
<td>Comset University Islamabad</td>
</tr>
<tr align="center">
<td>Mscs</td>
<td>1</td>
<td>NUML Islamabad</td>
</tr>
</table>
<li>
<h3>
Personal Certificates:
</h3>
</li>
<ul>
<b>
<li>Freelancing (Certified by DigiSkills.com) </li>
<li>WordPress (Certified by DigiSkills.com)</li>
<li>Responsive Website(Certified by Topcoder Academy.com)</li>
<li>Javascript DSA (Certified by Topcoder Academy.com)</li>
<li>Scientific Computing with Python (Certified by Topcoder Academy.com)</li>
<li>SCO, E-commerce (Certified by DigiSkills.com)</li>
</b>
</ul>
<li>
<h2>
Experience
</h2>
</li>
<ul>
<b>
<li>IT ASSISTANT </li>
<li>Web Developer</li>
<li>WordPress Developer</li>
</b>
</ul>
</ol>
</td>
</tr>
</table>
</body>
</html>

Learn how to create a CV page using HTML only

1. Structural elements.

 <!DOCTYPE html>, <html> <head>, <title>, and <body> are structural elements.

We have created a separate page for these elements Click Here to learn about these elements.

2. content structure elements.

  • <table>: Used to create the CV page’s main structure.
  • <tr>: Represents rows in table.
  • <th>: Used to display Resume as heading in a table.
  • <td>: Used to Represents Personal Information, Qualification.
  • <img>: Used to insert a Profile picture.
  • <ol>: Creates an ordered list for sections like contact details, and experience.
  • <ul>: Creates an unordered list of Mobile No, Email Address, for the contact section and an unordered list of names, CNIC, D/O/B, etc for the Personal detail section.
  • <li>: Represents list items used in ol and ul.
  • <h1>, <h2> <h3>: Are different levels of heading used for name, and section title.
  • <b>: Used to Bold the text. 

3. Formating and Styling Properties.

  • bgcolor: Set the background color Seagreen for the table, and dark green for the header now.
  • border: Set the border width of the table to 1 ( A black solid line of 1px will be displayed on the screen).
  • Align: Align the table to the center of the screen and the image to the right of the table.
  • Cellpadding: Adjust the 20% spacing between cells in the table.
  • width: Specifies table width to 55% and image width to 160px.
  • Src: Specifies the file path of an image (folder-name/image-name.jpg).
  • Alt: Provide alternative text for the image displays when the internet is slow and an image is not loaded.

Additional Notes.

  • Before HTML 5 table was used for layout in Web Development.
  • However nowadays CSS is used for styling a web page..

Thanks for reading this article.

How to create a CV page using html only

1 thought on “how to create a CV page using html only”

  1. Awesome HTML CV I Love how you structured it with clean coding. Adding personal certificates is a great touch, and shows the diversity of your skills!

Leave a Comment

Your email address will not be published. Required fields are marked *