Ex No: 2 LANGUAGE LIST 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 “ex2sty.css”.
Step3: Create “index.html” page with the necessary HTML tags and use “style” attribute in the “ex2sty.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 list languages and provide link for each lanuage is viewed in a browser and results were verified.