0% found this document useful (0 votes)
10 views

HTML Examples

Uploaded by

mansouranthony77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
10 views

HTML Examples

Uploaded by

mansouranthony77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Example 2:

<!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 [email protected]</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:

Mark the word Go to google. to a link to https://www.google.com .

You might also like