A Step-By-Step Tutorial For Coding Your First HTML Document- III

  In our previous blog, A Step-By-Step Tutorial For Coding Your First HTML Document- II, in which we talked about adding formatting to the text, creating lists etc.

Now we are going to talk about Adding an image, creating tables etc.

So, let's get started.

Step 10 – Add An Image

 

Most people agree that webpages full of text are boring. The best websites have lots of images, so let’s add an image to our site.

We can add an image using the <img> tag.

The image element is one of the few elements that doesn’t require a closing tag. We include all the important information as attributes inside the <img> tag.

There are three main attributes we can use with images – the source attribute, the alternative text attribute and the style attribute.

The src source attribute is used to define the location of the image we want to display. The location could be the address of a file stored somewhere else on the web, or it could be the location of an image stored on your server. If you want to show an image that is in the same directory as your HTML file, you can simply enter the name of the image file. If the image is located in a different directory or on another server, you have to specify the full address or path of the file.

The alt alternative text attribute is used to define some text that will appear if there is a problem displaying your image. This is important because it allows blind and visually impaired people to get some information from your site, and it also helps with Search Engine Optimization (SEO).

The style attribute can be used to define the width and height of an image in pixels (px).

The basic syntax for an image is:

<img src=”url” alt=”some_text” style=”width:width;height:height;”>

Let’s add an image to our document. For this example, we’ll use an image that is stored locally on our computer. If you have your own image you’d like to use, put a copy of that image in the same directory as your HTML document.

For the src attribute we’ll use the filename of the image (the filename of our image is cutedog.jpg), for the alt description we’ll use “a cute dog”, and we’ll set the image size as 400 x 400 pixels.

Add this code to your HTML document (we added an extra line break <br> because we want the image to display on a new line – if you want to see what happens without the <br>, give it a try without the line break):

<br>

<img src=”cutedog.jpg” alt=”a cute dog” style=”width:400px;height:400px;”>

When you preview the document in your browser, you be able to see the image like this:

 

 

 

 

Step 11 – Create A Table

 

Tables in HTML are great for displaying tabular data, such as an address book or a list of product descriptions and prices. Although tables are good for keeping things organized, tables should only be used for displaying data, not for defining the layout of a page.

We can use HTML to define the structure and contents of a table. We usually use CSS to style the table (eg. adding borders, colors and text alignment), so for this example our table is going to look very simple.

Creating tables can be a little confusing at first. The best way to learn tables is to create an example.

We first create a table using the <table> tag.

We then need to create our table row by row using the <tr> table row tag for each row.

In the first row, we can use the <th> table heading tag to define the heading for each column.

In each following row, we use the <td> table data tag to define the data for each cell.

Each element should be indented to make our table code easy to read.

Let’s practice tables by creating a short address book.

First, add a table opening and closing tag to the HTML document:

<table>

</table>

We’re going to have four rows in our table – one heading row and three data rows – so let’s add four table row tags inside the table element (don’t forget to indent):

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

In the first row, we’re going to add three heading using table heading tags – First Name, Last Name and Address:

<table>

<tr>

<th>First Name</th>

<th>Last Name</th>

<th>Address</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

In each following row, we’re going to add the data for each entry:

<table>

<tr>

<th>First Name</th>

<th>Last Name</th>

<th>Address</th>

</tr>

<tr>

<td>Mary</td>

<td>Smith</td>

<td>123 Main Street</td>

</tr>

<tr>

<td>John</td>

<td>Green</td>

<td>463 Church Street</td>

</tr>

<tr>

<td>Sally</td>

<td>Jones</td>

<td>867 Park Avenue</td>

</tr>

</table>

When you’ve added all the information, our HTML document should look like this:

When you view the document in the browser, the table should look like this:

 

 

 

Step 12 – Add A Quotation

 

Quotations can be used to highlight an important quote contained within some text.

There are two types of quotations – regular quotations and block quotations.

Regular quotations use the <q> tag and simply add quotation marks around everything inside the element. At first, using this element may seem unnecessary as we can simply use regular quotation marks in the text. But the quotation element becomes important when we start styling our page with CSS. Using CSS, we can style all our quotes at once by selecting all the <q> tags and making them bold, italic, a different size or a different color.

Block quotations use the <blockquote> tag and create a stylish indented block of text.

Let’s add one of each type of quote to our document.

For the regular quotation, add this code to the document:

<p>This is an example of a regular quote – <q>to be or not to be.</q></p>

For the block quotation, let’s add a paragraph from the Lorem Ipsum. The Lorem Impsum is a piece of classical Latin text that is often used by web developers as a placeholder. When web developers are creating a website but don’t know what content will be used on the site, they often add text from the Lorem Ipsum.

Add this code to the document:

<p>This is an example of a block quotation – <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</blockquote></p>

When you add the code, our HTML document should look like this:

When you preview the document in the browser, the quotations should look like this:

 

 

 

Step 13 – Add A Comment

 

The final thing we’re going to learn about is comments.

Comments are a special kind of element that can be included in any part of the HTML document, but will not be displayed by the browser.

The syntax for comments is:

<!– Write your comments here –>

 

Comments have two main purposes.

The first purpose is to add notes to your code. These notes can be for yourself (eg. a note reminding you why you edited a certain section of code), or could be for other people (eg. a note to explain something to another person working on your site).

The second purpose is to debug your code. Debugging means searching for and fixing problems with your code. If you have a problem with your code and you think you’ve figured out what is causing the problem, it’s much easier to test your theory by commenting out the code instead of deleting it.

Conclusion

 After completing this tutorial,

You should be able to open the source code of any page on the web and be able to identify certain HTML features and know how they affect what is displayed in the browser window. You should be able to identify images, tables, lists, comments and many other HTML elements.

The next step is to practice what you’ve learned by coding your own page. Anytime you get lost or confused, you can look back at this tutorial to find the answer.

Once you’re confident in your HTML skills, you can move on to the next step in your web development journey – styling your page with CSS.

From our next blog we are going to start HTML CSS.

I hope you like this post too. Kindly subscribe to our YouTube channel CodinIndia