HTML Examples
HTML Examples
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My First Page</h1>
<p>This is my first page.</p>
<h2>A secondary header.</h2>
<p>Some more text.</p>
</body>
</html>
Output:
Example 3: Horizontal rulers
A horizontal ruler <hr> tag acts as a simple separator between page sections.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My First Page</h1>
<p>This is my first page.</p>
<hr>
<p>This is the footer - all rights are reserved to me.</p>
</body>
</html>
Output:
Example 4:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>I'm the most important!</h1>
<h2>I'm less important!</h2>
<h6>I'm the least important</h6>
</body>
</html>
Output:
Example 5: Links
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My First Page</h1>
<p>This is my first page.</p>
<a href="#faq">Click here to read the Frequently Asked Questions</a>
<hr/>
<h3 id="faq">Frequently asked questions</h3>
<p>The first rule about fight club is that you do not talk about fight club.</p>
<p>However, if you do have questions, please e-mail me at foo@bar.com</p>
</body>
</html>
Output:
Example 6: Mark the word Go to blue! to an anchor and link it to element <div id="blue"> ,
and so does Back to green! .
Solution:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width:60%;
height:150px;
}
</style>
</head>
<body>
<a href='https://www.google.com'>Go to google.</a>
<h3>I'm Green!</h3>
<a href='#blue'>Go to blue!</a>
<div id='green' style='background-color:#00A000'></div>
<h3>I'm Blue!</h3>
<a href='#green'>Back to green!</a>
<div id='blue' style='background-color:#0000A0'></div>
</body>
</html>
Output:
Example 7: