Ex No: 2 PERSONAL PROFILE PAGE
Aim: To design a HTML page about computer languages. List each language as list with link. Prepare separate page for each language and open them in the appropriate link
Algorithm
Step1: Create a folder “Ex2” to place all the HTML files.
Step2: Create five HTML files “index.html”, “clang.html”, “java.html”, “php.html”, “python.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 “clang.html”, “java.html”, “php.html” and “python.html” page in “index.html” page.
Step5: Create “clang.html”, “java.html”, “php.html” and “python.html” page with necessary information and provide link to home in nav section.
HTML Tag Description
<header> Specify title and heading
<article> Represent an article
<section> Specify the content of a section
<nav> Define set of navigation links
<a> Specify a link to another web page
<ol> Display data as ordered 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
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
Source Code

index.html


<!DOCTYPE html>
<html>
  <head>
	<title>Computer Languages</title>	
	<link rel="stylesheet" href="ex2sty.css">	
  </head>
  <body>		
	<header>
	  <h1>List of Computer Languages</h1>
	</header>	
	<hr>
	<article>			
	  <section>
		<h2>Computer Languages</h1>
		<ol>
		  <li><a href = "clang.html">C Language</a></li>
		  <li><a href = "java.html">Java Language</a></li>
		  <li><a href = "php.html">PHP Language</a></li>
		  <li><a href = "python.html">Python Language</a></li>
		</ol>
	  </section>
	</article>
	<footer>
	 	Developed by K Anbarasan
	</footer>
  </body>
</html>

clang.html


<!DOCTYPE html>
<html>
  <head>
	<title>C Language</title>
	<link rel="stylesheet" href="ex2sty.css">		
  </head>
  <body>		
	<header>
	  <h1>C Language</h1>
	</header>		
	<nav> 
	  <a href = "index.html">Home</a> 
	</nav>	
	<hr>
	<article>			
	  <section>
	    <p> The C Language is developed by Dennis Ritchie. C programming
	        is considered as the base for other programming languages.
	    </p>
	  </section>
	</article>
	<footer>
	  Developed by K Anbarasan
	</footer>
  </body>
</html>

java.html


<!DOCTYPE html>
<html>
  <head>
    <title>Java Language</title>
	<link rel="stylesheet" href="ex2sty.css">		
  </head>
  <body>		
	<header>
	  <h1>Java Language</h1>
	</header>		
	<nav> 
	  <a href = "index.html">Home</a> 
	</nav>	
	<hr>
	<article>			
	  <section>
		<p> Java is a powerful general-purpose programming language.
		   It is used to develop desktop and mobile applications, big data 
		   processing, embedded systems, and so on.
		</p>
	  </section>
	</article>
	<footer>
	  Developed by K Anbarasan
	</footer>
  </body>
</html>

php.html


<!DOCTYPE html>
<html>
  <head>
    <title>PHP Language</title>
	<link rel="stylesheet" href="ex2sty.css">		
  </head>
  <body>		
	<header>
	  <h1>PHP Language</h1>
	</header>		
	<nav> 
	  <a href = "index.html">Home</a> 
	</nav>	
	<hr>
	<article>			
	  <section>
		<p> PHP (recursive acronym for PHP: Hypertext Preprocessor) is a 
		    widely-used open source general-purpose scripting language that is
		    especially suited for web development and can be embedded into HTML.
		</p>
	  </section>
	</article>
	<footer>
	  Developed by K Anbarasan
	</footer>
  </body>
</html>

python.html


<!DOCTYPE html>
<html>
  <head>
	<title>Python Language</title>
	<link rel="stylesheet" href="ex2sty.css">		
  </head>
  <body>		
	<header>
	  <h1>Python Language</h1>
	</header>		
	<nav> 
	  <a href = "index.html">Home</a> 
	</nav>	
	<hr>
	<article>			
	  <section>
		<p> Python is a high-level, interpreted, interactive and object
		    -oriented scripting language. Python is designed to be highly readable.
	    </p>
	  </section>
	</article>
	<footer>
	  Developed by K Anbarasan
	</footer>
  </body>
</html>

ex2sty.css


header {
	text-align:center;
	height: 100px;
	background-color: #ffe697;
	padding: 10px; 
	border-radius: 10px 10px 0px 0px;
}
footer {
	text-align:center;
	font-size: 12px;
	height: 50px;
	line-height: 50px;
	background-color: #ffe697;
	padding: 10px; 
	border-radius: 10px;		
}
article{
	width: auto; 
	border: 2px solid gray;
	padding: 10px; 
	border-radius: 10px;
	margin:5px;
}
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.