HTML5 Basics–Practice 4

This is in continuation to HTML5 Basics–Practice 3. The method will remain same. Codes will be same with addition of new statements. If you have any queries, feel free to comment.

If you want to get the source code of web pages, just right click and select view source.

Sometimes you might want to put a line between contents. For this we can use the Horizontal Rules . It is represented by the <hr> tag. Also, in HTML5 Basics–Practice 1, we had mentioned about blank spaces in paragraph. We will show it in the following code.

“Code starts”

<!DOCTYPE html>
<html lang=”en-US”>
<head>
<title>First Page</title>
</head>
<body>
<h1>First Page Heading 1</h1>
<p title=”Tooltip for first paragraph”>Paragraph 1</p>
<hr>
<h2>First Page Heading 2</h2>
<p>Paragraph 2</p>
<hr>
<h3>First Page Heading 3</h3>
<p>Paragraph 3</p>
<hr>
<h4>First Page Heading 4</h4>
<p>Paragraph 4</p>
<hr>
<h5>First Page Heading 5</h5>
<p>Paragraph 5</p>
<hr>
<h6>First Page Heading 6</h6>
<p>Paragraph 6</p>
<hr>

<a href=”https://www.workeatpraylove.com”>Click on this to see my website!!</a>

<br>

<img src= “IMG_0032.jpg” alt=”alternate text for image” width=”104″ height=”142″>
<p title=’example when single quotes to be used: “Spriha” wrote it’>Hover mouse here for single quote usage</p>

<h1>Extra space in paragraph element</h1>
<p>This is the first line
This is the second line
This is the third line</p>
</body>
</html>

“Code ends”

Out put for <hr> tag:

Output for white space:

 

 

This is also referred to as the poem problem. A poem includes short lines that come one after the other. To include break after each line can be a tedious task. To overcome this, we have the <pre> tag. It prints the output the way it is written,i.e, including the white spaces. To implement the same, just replace the tag <p> with <pre>. Do not forget to close this tag.

Advertisements

3 thoughts on “HTML5 Basics–Practice 4

  1. Drema Atha says:

    Pretty component to content. I simply stumbled upon your weblog and in accession capital to say that I get in fact loved account your blog posts. Any way I’ll be subscribing to your feeds and even I fulfillment you get entry to constantly rapidly.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s