In this lecture we will see how to include images on your web page and what are HTML image attributes.
We will now add some images to our web page. Make sure anything you’re doing in this section is within the body element
<body>
…
…
</body>
- If you have some images in your system, copy 2 images into the project folder (blogpost)
- The first one will be a random image e.g. mypalace.jpg
- While the second will be the suppose author of the page. Preferably your image (author.jpg)
- To add an image to your web page, you use the image (img) tag (<img>) – this tag has no closing tag i.e (</>). Understand also that there are some html elements that has only opening tag and no closing tag.
- For instance, now we want to know which image we want to display. We will use the ‘Source’ (src) Attribute with an equal sign – <img src =.
- VSCode will help you find directions to your image folder which in this case is your project folder. Choose the first image you want to use. It could be a logo, an image of a place, whatever catches your fancy .
- The path will look like this if you are getting the image from your computer –
<img src=”mypalace.jpg” alt=””>
- Now let’s insect the author’s image. Below the second closing tag in the second paragraph of your last work enter the same command – <img src=”author.jpg” alt=””>. Your author’s image should be there.
- Introducing image Attributes. Attributes are text that will appear if the image is not displaying as at the time your user is using your website. We declare the image attribute with the alt command inside the image (img) tag.
- Now inside the img element, we will also give the alt attribute. Remember the alt attribute is the alternative text that is displayed for your users if the image cannot be displayed to the user as at that time he or she is using your application – remember there could be network failure.
To declare the alt attribute we place the alt command within the image tag <img src=”mypalace.jpg” alt=”This is where I started as a developer”>
HTML attributes are text that describes the image depicted as the “alt” tag.
Now for the first image it will be <img src=”mypalace.jpg” alt=” This is where I started as a developer”> and the second image will be <img src=”author.jpg” alt=”Author’s image”>
This is just a text in case the image is not displaying to the user.
- Finally! Below the author’s image place a paragraph and add the name of the Author that will be visible to your users e.g <p>Ubong Nsekpong</p>
- Now the final code within the body element will look like this.
If you have followed to this point I want to say a big congratulations to you. You are awesome. There are a thousand and one persons that have registered for a course like this and could not make it even to the level of installing the code editor.
But you are here adding image in codes to your blog post. Congratulations! I am saying it from my heart.
Now here was my final code after today.
<div class=”container”>
<div class=”blog-post”>
<h1>My first Post</h1>
<p class=”date”>April 29, 2019</p>
<h2>I am approaching mastery in html</h2>
<p class=”main-text”>
The last major overhaul of HTML during the late 1990s was a major collaborative effort by global experts to internationalize the language and make it easier for coders across the world to collaborate. As a part of this effort, the Universal Coded Character Set was adopted as the official HTML character set. This move allowed browsers to better represent the many characters and accentuations present in human languages and dialects.
</p>
<img src=”mypalace.jpg” alt=”eliana my girl”>
<p><a href=”# “>Visit our blog</a></p>
<p class=”main-text”>
The last major overhaul of HTML during the late 1990s was a major collaborative effort by global experts to internationalize the language and make it easier for coders across the world to collaborate. As a part of this effort, the Universal Coded Character Set was adopted as the official HTML character set. This move allowed browsers to better represent the many characters and accentuations present in human languages and dialects.
</p>
<div class=”author-box”>
<img src=”author-photo.jpg” alt=”thi was xander’s dedication”>
</div>
<div class=”author-text”>
<p>Ubong Nsekpong<br>SocialMedia: @ubnsekpong</p>
</div>
</div>
