HTML5 Basics–Practice 3

This practice is in continuation to HTML5 Basics–Practice 2. I will be writing the complete code here, but if you have already written the code from previous practices, you just need to add the extra code.

You must have noticed in the code from practice 2 that we had mentioned width and height for image element. These are called attributes of an element. It provides additional information to the element.These are written in the opening tag. And the format is Name=Value.

The following table shows the list of some commonly used attributes in HTML.

We have already mentioned href, src, width, height and alt in the code. We will be adding a few.

“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>
<h2>First Page Heading 2</h2>
<p>Paragraph 2</p>
<h3>First Page Heading 3</h3>
<p>Paragraph 3</p>
<h4>First Page Heading 4</h4>
<p>Paragraph 4</p>
<h5>First Page Heading 5</h5>
<p>Paragraph 5</p>
<h6>First Page Heading 6</h6>
<p>Paragraph 6</p>

<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>
</body>
</html>

“Code ends”

Output for tooltip:

 

 

 

 

Output for single quote:

 

Advertisements

5 thoughts on “HTML5 Basics–Practice 3

  1. Ellsworth Dillabough says:

    Every code I try possibly leaves an enormous gap towards the top of the web page, or at the end of the web page. Its definitely that code causing this.. I’ve attempted so many requirements trying to hide the blogs & extended network, however they all leave a white gap either at the top or at the bottom.. Anyone got one which doesnt cause the white gap? Or how to remove the white space?.

    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