Let’s face it, without Images, Pictures, Photos, Galleries, whatever you wanna call it, blog posts, articles, Social Media like Instagram, just wouldn’t be the same. Images play an important role to the process of crafting your story, sharing your ideas, keeping people hooked.
I know what you’re saying, “Joel, you don’t always have pictures in your tutorials, or if you do, they aren’t the best. What’s up with that?”
Yes, I know. It’s something I’m working on. That being said, I will show you how you can add images to your HTML the right way.
The HTML Img Tag
<img src="picture.jpg" alt="Picture of Whatever">
In the above code example, you will see the
<img> which is a self closing HTML Element. Unlike other HTML Elements, the
<img> doesn’t have a companion closing tag.
You will also notice that the
<img src=""> tag has the HTML Attribute src followed by the = with two quotation marks. Inside the quotation marks you will find the location of the image that will be displayed.
You will also notice that you have another HTML Attribute
<img src="" alt="">, the alt attribute. This is important because it provides information about the image that will be displayed if for whatever reason, the actual image doesn’t get displayed. The alt attribute should have information about what the picture is about. It should be descriptive.
You can also add some style to the image itself. Checkout the code below.
<img src="picture.jpg" alt="Picture of Whatever" style="width:1140px;height:641px;">
In the code above, we added the
style="width:1140px;height:641px;". What this does is make sure that the web browser can display the structure of the HTML Document properly and timely.
<img src="picture.jpg" alt="Picture of Whatever" width="1140" height="641">
In the above code example, instead of using the style attribute, we simply added the width and height after the
alt="" attribute. This is a simpler way to accomplish the task of providing the width and height.
Note: it’s important to make sure your images are not to big and not to small. Images can take up a lot of space on a web page and this can impact the performance of that page.
It’s important to compress your images and to use the correct size based on the content and context it’s being displayed.
<img src="pixemweb.jpg" alt="PixemWeb Website" width="1140px"; height="641px";>
In the above code example, we wrap the img tag with the HTML Link tag
You can link to a webpage on your website or another site with an image link. Below is an actual example of an image link.
The image link above takes you to my YouTube Video where I talk about what a Full Stack Web Developer is and gives you a timeline on the learning process. Take a look at it when you get a chance.
Images are an important part of a web page and as a web developer, you’re going to find that you end up including images into your HTML Document to add something extra to the story you’re trying to tell.
Where Can You Get Free Pictures for your Website?
Getting good pictures for your website isn’t easy. You might not be a photographer, you might not have access to a commercial grade camera. You might not have the time to go get the image that you need for your article.
If that’s the case, then you might be tempted to just grab an image from Google. Don’t, images are often copy righted. So what should you do?
Fortunately there are resources that allow you to use professional photos on your website, for free. For blogs and commercial sites.
In the video above, I share with you the Top 10 Websites for Free Pictures.
The beauty of using these websites is they have high quality photos that come in various sizes and for virtually all niches.
You can style your images with CSS. While this is an HTML Image tutorial, I just want to share a small example of CSS you might find helpful.
The simple code snippet above makes your HTML Images responsive. There’s more that can go into styling your images but I’ll save that for the CSS Image Style Tutorial.
Hopefully you found this tutorial helpful.