[Web Development #3] – Headings & Images in HTML

[Web Development #3] – Headings & Images in HTML

In this tutorial, we will: 

  • – Create our first blog post called “My Favourite Case” 
  • – Learn how to create headings using the <h1><h6> elements
  • – Learn how to add images using the <img> element
  • – Complete an exercise that will test what you have learned today!

In the previous tutorial, we created our law blog and added hyperlinks to our LinkedIn/Instagram and CV using the <a> element. Now, let’s add some content to our blog!

To view some of the code snippets in this tutorial, you will need to scroll horizontally to the right. To scroll right, click on any of the orange code blocks and press and hold the right arrow key →. You can then scroll back to the left by pressing and holding the left arrow key ←. If you are on mobile, simply swipe left or right.

1. Headings

Let’s say that we want to add a blogpost to the law blog we created in the previous tutorial. Let’s call it “My Favourite Case: Donoghue v Stevenson” – everyone’s favourite! And let’s say that we want to include a brief summary of this legendary case. How do we do this? 

To start the post, let’s add a heading with the text “My Favourite Case: Donoghue v Stevenson” to our law blog. We can do this with the following code:

<h2>My Favourite Case: Donoghue v Stevenson</h2>

This will display:

Notice that we added the heading using the <h2> element instead of the <h1> element used for “Tony’s Law Blog”. We can also see that the size of our new <h2> heading is smaller than the size of our <h1> heading. This is because there are actually six different heading elements ranging from <h1> to <h6> which differ in size from largest to smallest. As an illustration, this code

<h1>Snail</h1>
<h2>Snail</h2>
<h3>Snail</h3>
<h4>Snail</h4>
<h5>Snail</h5>
<h6>Snail</h6>

will display:

So, depending on the heading size you wish to have, choose the heading element accordingly. Generally, developers use the <h1> element for main headings and the <h2> or <h3> element for sub-headings. It is rare to see <h4>, <h5> or <h6> being used. Later, when we learn about CSS, we can change the font-size of any textual piece on our site.

Okay, so now that we have added our heading, let’s add a paragraph (<p> element) containing a brief case summary. Just like this:

<h2>My Favourite Case: Donoghue v Stevenson</h2>
<p>Donoghue v Stevenson [1932] UKHL 100 was a landmark court decision in Scots delict law and English tort law by the House of Lords. It laid the foundation of the modern law of negligence, establishing general principles of the duty of care.</p>

This will display:

2. Images

Now that we have created our first blogpost, let’s add an image to liven up our blog. To add an image in HTML, we need use the <img> image element: 

<img src="./image.png">

The <img> element is part of a unique set of elements called ‘empty elements’ which do not require a closing tag! So unlike <p></p>, <h1></h1>, <a></a> and many other elements, the <img> element does not require a closing tag (</>) to work. The only thing required is the <img> tag with the src attribute inside it. The src attribute is extremely important because it dictates what image will appear. To add an image to our HTML page, we add the src value of: the image file itself or the image’s URL. Just like this:

Image file:

<img src="./snail.png">

Image URL:

<img src="https://vignette.wikia.nocookie.net/spongebob/images/9/9e/Gary_looking_up_stock_art.png/revision/latest/scale-to-width-down/350?cb=20181227162221">

When added to our HTML code, both variants will display:

To download an image file and use it as the value of the src attribute – find the image you want on Google Images or anywhere on the web and right click on it. Once right clicked, click on ‘Save Image as…’ and save the image file inside the folder containing your HTML document. Then you will be able to use it in your src attribute as shown above.

To find the URL of the image and use it as the value of the src attribute – find the image you want just like the previous step and right click. Once right clicked, click on ‘Copy Image Address’. To use the image, paste the copied URL to the value of the src attribute.

Well done, now our blogpost has an image! The image of Gary the snail however, is huge! How can we change the size of an image using HTML? We can do this by adding the height and width attributes to the <img> tag. Just like this:

<img src="./snail.png" height="200" width="180">

Notice the values of the height and width attributes. By inputting “200” and “180”, we are telling the code to resize the image with 200 pixels height and 180 pixels width. So if we add the above code to our HTML, it will display:

3. Exercise

Now you know how to add headings and images in HTML. So let’s test what you have learned today!

In the code editor below, (a) create a heading with the name of your favourite case. For example, a heading with the text: “Ivey v Genting Casinos”. (b) Under the heading, add a paragraph with a brief summary of the case. (c) Under the paragraph, add an image that best describes your favourite case.

Leave a Reply

Your email address will not be published. Required fields are marked *