We are going to work with Html images in this lesson. Html images are a big part of the internet and are one of the very first reasons why the internet became so popular decades ago. Being able to search for images of beautiful places and sharing photos with friends and relatives made the internet’s popularity explode with people looking to connect on a whole new level. I can remember as a child waiting five minutes for an image of my favorite athlete to load. That was back in the dial-up connection days. Today, a web page can load dozens of high definition images in a blink of an eye. Whether it’s sharing some of your favorite personal photos or displaying your business logo; knowing how to display, position, size, and style Html images are very important for web developers. We’ll first learn how to display an image on a web page and then we’ll work on styling and positioning. See the images below. NOTE: Before we begin, the images used in this lesson are saved in a subfolder named “my-images”. The “my-images” subfolder is saved in a main folder named “my-website”. If you use different locations to save your images; like your desktop; the URL’s (location of the images) will be different. If you want to set up the folder structure exactly as they are in this lesson, click here: WEBSITE FOLDER SETUP WITH IMAGES AND EXTERNAL STYLE SHEET. Also, you can use whatever images you want for these exercises. Just try to keep the sizes close to the images in the examples.
index.html EXAMPLE 1: DISPLAYING AN IMAGE
DISPLAYED PAGE EXAMPLE 1
We’ve added a few Html elements so that the web page isn’t so bare. You already know how to add HEADINGS and PARAGRAPHS, so we’ll focus on the img (image) element. The image that you use for this example should be large. You can simply create a colored square in a paint program around 600 pixels by 600 pixels.
<img> Defines an image in Html. The img tag has no content. It contains only attributes and has no closing tag.
src=”my-images/diver.jpg” The src (source) attribute specifies the URL or web address of the image. In our case, it is in the “my-images” subfolder. NOTE: Browsers expect to find images in the same folder as the web page by default. Since we have a subfolder for our images, we need to specify that in the src attribute URL with my-images/ before the image name diver.jpg. This is very common when building an actual website so the images can be kept separate and organized. If your image was saved directly into the “my-website” folder, the src attribute would need to be “diver.jpg”. Finally, if the image is stored on another website, your src attribute URL would look something like this, “http://www.thewebsite.com/site-images/diver.jpg”.
alt=”Cliff diving” alt stands for alternate text. The alt attribute will display the text Cliff diving if the image is unable to be viewed due to an error in the src attribute, slow internet connection, or if the viewer is using a screen reader. You should always add alt attributes to your images to prevent viewers from seeing an “image not found” error message, and because the text can be beneficial for page indexing in search engines. When search engines like Google crawl your web page, the keywords or phrases found in image alt attributes can help it figure out what the page is about and how to index it for searches. This will improve your SEO (Search Engine Optimization).
After successfully loading the image onto the page in example 1, we can see that the image is way too large. Let’s resize the image with Html code. See the images below.
index.html EXAMPLE 2: RESIZING THE HTML IMAGE
DISPLAYED PAGE EXAMPLE 2
We have done a few things in the above example. First, we added a second img element. The src attribute loads the exact same image as the first img element. There are two ways to resize an Html image. The width and height can be specified like this, width=”300″ height=”300″ or style=”width: 300px; height: 300px;”. NOTE: The values for width and height in the style attribute example use px after the number to specify pixels. In the first img element, we use the width and height attribute’s to resize the image to 300 pixels by 300 pixels. The second img element uses the style attribute to resize the image to 300 pixels by 300 pixels. So why does the first image with the width and height attributes get stretched when the page is run. Well, if you look in the head element of the index.html document, you can see that there are <style></style> tags that I have highlighted. These style tags hold CSS code and go inside of the Html head element. This is known as an internal CSS stylesheet because it is added directly into the Html document. The CSS rule inside of the style tags specify that all img elements take up 75% of the width of the browser screen. The image with the width and height attributes gets this CSS code applied to it, while the image with the style attribute overrides the CSS rule. This is because the style attribute allows us to add CSS code. Adding CSS code in this way is known as inline styling because the code is entered right into the Html tag.
This example was set up this way to show you a common issue that could come up when using the width and height attributes to resize an image. For this reason, it is recommended that you always use the style attribute for resizing. One common way that this issue could come up; is if multiple people are working on the same website and someone has added CSS code to affect the img elements without the others knowing. So, while both systems work, you should get used to using the style attribute. NOTE: You should always specify a width and height on all of your images to prevent page flickering when the image is loading; even when you are not actually changing the size of the Html image.
I want to touch on a few more things before we jump into the next example. Resizing one or two images isn’t a big deal, but when you have multiple images on a web page, you should use a photo editor to resize the images before loading them on the page. When an image is resized with Html or CSS code, the browser will load the original size image first and then resize accordingly. As you can probably tell, this can have a big impact on page loading times. Img elements display as INLINE by default. This means that content can display on the left and right sides as long as there is enough room. Most other Html elements display as BLOCK by default. For example, the paragraph in the above example is a block level element. A block element will take up the entire width of the browser window unless a width is specified. We’ll discuss block and inline elements in more detail, in a future tutorial.
In the following example, we will add another image to our page and turn it into a HYPERLINK. The code in the index.html document will also be cleaned up and changed for this example. See the images below.
index.html EXAMPLE 3: TURNING AN IMAGE INTO A LINK
DISPLAYED PAGE EXAMPLE 3
We got rid of the internal CSS stylesheet, one of the images, and resized the remaining diver.png image again to make it look a little cleaner. Next, we add an anchor element that links to Clear Coded Programming’s home page. Inside of the anchor element, we add the img element. This makes the image a clickable link that will take the user to whatever location you specified in the href attribute of the a element. You may have noticed that we added border: 0; after the width and height in the img element’s style attribute. The purpose of this is to prevent Internet Explorer 9 and earlier versions from adding a border around an image that is also a link.
The last thing that we’re going to do with Html images in this lesson is position them with the CSS FLOAT property. See the images below.
index.html EXAMPLE 4: FLOATING IMAGES WITH CSS
DISPLAYED PAGE EXAMPLE 4
Right after the closing anchor tag for the image link from example 3, we add the new code. Two h2 headings are added to separate the examples. We center these headings with text-align: center; in the style attribute. Under each h2 heading, we have a P ELEMENT with an img element inside of it. This makes the image part of the paragraph. In order to position the image to the left or right of the text, we use either float: right; or float: left; in the style attribute of the img element. Floating left works out pretty well every time, but floating right can be tricky if your paragraph doesn’t have much text. Depending on the image size and how many words you have in your paragraph, you may have to play around with it a little bit to get the result you want.
That finished up this lesson on Html images. You should now have a good understanding of what you can do with images in Html. In a future lesson, we will work with image maps. Image maps gives you the ability to assign multiple clickable areas inside of a single image. Thanks for reading, we’ll see you next time.
index.html Source Code
<link rel="stylesheet" type="text/css" href="my-styles.css">
<h2>Displaying Html Images</h2>
<img src="my-images/diver.jpg" alt="Cliff diving" style="width: 150px; height: 150px">
<p>Click on the image below to go to Clear Clear Programming's Main Page</p>
<img src="my-images/redlogo.png" alt="Clear Coded Programming" style="width:100px; height:100px; border:0;">
<h2 style="text-align: center;">FLOATING AN IMAGE TO THE RIGHT</h2>
<img src="my-images/diver.jpg" alt="Cliff diving right" style="float:right; width:50px; height:50px;">
This paragraph has an image that is resized and floated right using the style attribute and
CSS code. Floating right is a little more tricky then floating left. The image will float all the
way to the right of the browser window even if the paragraph is two or three words long. Some
more CSS code usually needs to be used to get the result you want.
<h2 style="text-align: center;">FLOATING AN IMAGE TO THE LEFT</h2>
<img src="my-images/diver.jpg" alt="Cliff diving left" style="float:left; width:50px; height:50px;">
This paragraph has an image that is resized and floated left using the style attribute and
Clear Coded Programming