HTML5 Basics–Practice 2

This is in continuation with our first practice, HTML5 Basics–Practice 1. I will mostly use previous code and will italicize and bold the code that will be new. Here I am continuing the code from Practice 1.

There is an element: <br>. This is an empty element as it does not have any content. It is used for line break. Now type the following code. Please do not copy paste.

“Code starts”

<!DOCTYPE html>
<html>
<head>
<title>First Page</title>
</head>
<body>
<h1>First Page Heading 1</h1>
<p>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″>
</body>
</html>

“Code ends”

As you have noticed, there are a few statements i have added to the code from HTML5 Basics–Practice 1(starting from <br>). Here we are trying to add an image. Make sure that the image is placed in the same folder where your .html file is saved. Alternative text (alt), width and height are attributes. If sometime the image cannot be viewed, because of slow connection or any other reason, this text gets displayed. Width and height are the dimensions of the image. If you are not sure how the dimensions being set by you will look, open the respective html document(in my case i have saved the code in the file named “eg1.html”), right click on the web page and select Inspect Element. A window will appear. See the following image.

Here you can see a window has appeared with tabs like Inspector, Console and so on. Click the Inspector tab, select the statement of the image, and change the dimensions to check which size suits you. Accordingly you can change it in your code.

In HTML, elements can be nested. It means that we can define an element inside another element. Also, HTML tags are not case-sensitive. But lower case is preferred. Also, double quotes can be omitted. But it is preferred to use the quotes. Sometimes the content to be displayed has quotes in it, in that case we use single quotes around the double quotes. Refer to the example given in HTML5 Basics–Practice 3.

Advertisements

4 thoughts on “HTML5 Basics–Practice 2

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