Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
0% found this document useful (0 votes)
10 views

HTML Examples

Uploaded by

mansouranthony77
Copyright
© © All Rights Reserved
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
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 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:

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

You might also like