Ex No: 1 PERSONAL PROFILE PAGE
Aim: To design a HTML page describing your profile with image, heading, horizontal ruler and three links. Create three different HTML page for the links with forward, backward and home links.
Algorithm
Step1: Create a folder “Ex1” to place all the HTML files.
Step2: Create four HTML files “index.html”, “mark.html”, “lang.html”, “contact.html” and “ex1sty.css”.
Step3: Create “index.html” page with the necessary HTML tags and use “style” attribute in the “ex1sty.css” file to provide design to HTML elements.
Step4: Use <a> tag to provide links to “mark.html”, “lang.html” and “contact.html” page in “index.html” page.
Step5: Create “mark.html”, “lang.html” and “contact.html” page with necessary information and provide links for forward, backward and home in nav section.
HTML Tag Description
<header> Specify title and heading
<article> Represent an article
<section> Specify the content of a section
<img> Display an image on the webpage
<nav> Define set of navigation links
<a> Specify a link to another web page
<table> Display data in table format
<ul> Display data in unordered list format
<p> Define a paragraph
<h> Define header text
<br> Specify line break
<hr> Draw horizontal line
CSS Property Description
background-color Specify background color
text-align Align text in an element
border Specify border property
border-radius Specify rounded corner radius
border-collapse Combine multiple border into single border
width, height Specify width and height value
text-decoration Specify underline, overline and strikethrough
text-indent Specify space for first line text
text-align Specify text alignment
font-size Specify size of the font
display Specify the display property of an element
Source Code

index.html


<!DOCTYPE html>
<html>
<head>
  <title>My Profile</title>		
  <link rel="stylesheet" href="ex1sty.css">
</head>
<body>		
 <header>
	<h1>Welcome to My Profile Page</h1>
 </header>		
 <nav>
  <a href = "#">Home</a> | 
  <a href = "mark.html">Marks</a> | 
  <a href = "lang.html">Languages</a> | 
  <a href = "contact.html">Contact</a> 
 </nav>	
 <hr>
 <article>			
  <section>
   <h2>About Myself</h1>
   <img src="pic.jpg">				
   <p>
		I am Anbarasan K studying in 3rd Year in Department of Computer Engineering at Tamilnadu Government Polytechnic College, Madurai.
   </p>
  </section>
 </article>
 <footer>
   Developed by K Anbarasan
 </footer>
</body>
</html>

mark.html


<!DOCTYPE html>
<html>
 <head>
  <title>My Marks</title>	
  <link rel="stylesheet" href="ex1sty.css">
 </head>
 <body>		
  <header>
	<h1>My Marks Page</h1>
  </header>		
  <nav>
	<a href = "index.html">< < Previous</a> 
	<a href = "index.html">Home</a> 
	<a href = "lang.html">Next > > </a> 
  </nav>	
  <hr>
  <article>
	<section>
	 <h2>Fourth Sem Marks</h1>
	 <table>
	    <tr>
	        <th>Subject Code</th>
	        <th>Subject Name</th>
	        <th>Marks</th>
	    </tr>
	    <tr>
	        <td>401</td>
	        <td>Computer Architecture</td>
	        <td>86</td>
	    </tr>
	    <tr>
	        <td>402</td>
	        <td>Computer Networks and Security</td>
	        <td>78</td>
	    </tr>
	    <tr>
	        <td>403</td>
	        <td>Java Programming</td>
	        <td>83</td>
	    </tr>
	    <tr>
	        <td>404</td>
	        <td>Data Structures using C</td>
	        <td>89</td>
	    </tr>
	    <tr>
	        <td>405</td>
	        <td>Java Programming Practical</td>
	        <td>95</td>
	    </tr>
	    <tr>
	        <td>404</td>
	        <td>Data Structures using C Practical</td>
	        <td>95</td>
	    </tr>
	 </table>
	</section>
  </article>
  <footer>
	Developed by K Anbarasan
  </footer>
  </body>
</html>

lang.html


<!DOCTYPE html>
<html>
 <head>
  <title>Languages</title>		
  <link rel="stylesheet" href="ex1sty.css">
 </head>
 <body>		
  <header>
	<h1>Programming Lanugage</h1>
  </header>		
  <nav>
	<a href = "mark.html">< < Previous</a> 
	<a href = "index.html">Home</a> 
	<a href = "contact.html">Next > > </a> 
  </nav>	
  <hr>
  <article>			
	<section>
	 <h2>Programming Languages I know</h1>
	 <ul>
		<li>C Language</li>
		<li>JAVA Language</li>
		<li>.Net Language</li>
		<li>HTML</li>
	 </ul>
	</section>
  </article>
  <footer>
    Developed by K Anbarasan
  </footer>
 </body>
</html>

contact.html


<!DOCTYPE html>
<html>
 <head>
	<title>Contact</title>		
	<link rel="stylesheet" href="ex1sty.css">
 </head>
 <body>
  <header>
    <h1>Contact Details</h1>
  </header>
  <nav>
    <a href = "lang.html">< < Previous</a>
    <a href = "index.html">Home</a> 
  </nav>
  <hr>
  <article>
    <section>
     <h2>Residential Address</h1>
     <p>
       K. Anbarasan<br>
       117, South Car Street,<br>
       Madurai - 11<br>
     </p>
    </section>
  </article>
  <footer>
    Developed by K Anbarasan
  </footer>
 </body>
</html>

ex1sty.css


header {
  text-align:center;
  height: 100px;
  background-color: #96e6ff;
  padding: 10px; 
  border-radius: 10px 10px 0px 0px;
}
nav{
  background-color: #96e6ff;
  text-align:left;
  font-size:15px;
}
footer {
  text-align:center;
  font-size: 12px;
  height: 50px;
  line-height: 50px;
  background-color: #96e6ff;
  padding: 10px; 
  border-radius: 10px;		
}
img{
  width: 100px;
  height: 100px;
}
article{
  width: auto; 
  border: 2px solid gray;
  padding: 10px; 
  border-radius: 10px;
  margin:5px;
}
section > table, th, td{
  border-collapse: collapse;
  border: 2px solid BLUE;
}
section > h2{
  text-decoration: underline;
  font-family: serif;
}
section > p{
  text-indent: 20px;
  display: inline;
}
Result: Thus a HTML page is designed to describe your profile with image, heading, horizontal ruler and three links to other HTML pages. Three different HTML pages were designed with forward, backward and home links. The pages were viewed in a browser and results were verified.