HTML 4: Images
A webpage without images has no soul. I suppose it has no soul anyway, not being sentient after all. What I mean to say is, sans images, your website is cold and impersonal. Quite possibly boring. Maybe you should write a book instead of a webpage. No? Let's proceed.
Include an image with the <img> tag. The crucial attribute here is src, where you put the source URL (or local location) of the image you want to display.
<img src="/images/IMG_6177.jpg">
For unknown reasons, the <img> tag doesn't require a closing tag. The > suffices. In addition to src, there is another attribute that is required - alt. The text you put in this attribute will only appear if the image fails to load, so this text tends to be a title or a description of the image. The code becomes<img src="/images/IMG_6177.jpg" alt="Out of the Studio, 2016">
The image I'm using in this example is much too large to be displayed on a webpage. Often, it is necessary to specify the width (and corresponding height) so that the image is the inteded size on your webpage. You can use width and height attributes to specify the number of pixels or use the style attribute, in which you can add CSS.
The width and height attributes are less reliable than using the style attribute for several reasons. First, specifying the image's dimensions in pixels can be problematic if you want your webpage to be responsive, that is, resize to fit the size of the screen/window. Pixels are a fixed unit, whereas percents respond to the width of the container (screen size or div size) - either unit can by used with the style attribute. Another reason to use the style attribute is that it overrides CSS for a stylesheet, so an image width specification on a stylesheet won't apply if you use the style attribute. The width and height attributes do not override the stylesheet, so (depending on your CSS) they may not have an effect on the size of image.
I use the style attribute to set the width to 28% and the height to automatically adjust to the width. This percent corresponds to the width of the container, not to the size of the image.
<img src="/images/IMG_6177.jpg" alt="Out of the Studio, 2016" style="width:28%; height:auto;">
The result:
If you resize the window, you will see that the image resizes accordingly.
By default, images are displayed in line with text and other images.
:)
Blah blah blah etc
Maybe you don't want this. You can insert a line break between each element with <br> or start a new paragraph with <p>. Alternatively, you can use the style attribute - adding CSS to an HTML element. The default value for display is inline, but if you want your image to be on its own line, you can change inline to block.
<img src="/images/IMG_6177.jpg" alt="Out of the Studio, 2016" style="width:25%; height:auto; display:block;">
:)
<img src="/images/IMG_6286.jpg" alt="Yellow Dress and Wrinkly Curtains, 2016" style="width:25%; height:auto; display:block;">
Blah blah blah etc
<img src="/images/matt.png" alt="Matt, 2017" style="width:25%; height:auto; display:block;">
The result:
:)
Blah blah blah etc
Let's continue dipping our toes into CSS. Another useful aspect of the style attribute is the ability to float images to the right or left, such that the text surrounds the images, like a figure in a textbook.
<img src="/images/matt.png" alt="Matt, 2017" style="width:20%; height:auto; float:right;">
<p>See how the image is pushed to the right of the text? Thanks, style attribute. Good job.</p>
<p>More text. More text. More text. More text. More text. La la la la la. La la la la la. La la la la la. La la la la la. La la la la la. La la la la la. La la la la la. La la la la la.</p>
<p>More text. La la la la la.</p>
<p>More text. La la la la la.</p>
<p>More text. La la la la la.</p>
<p>Even more text. Just for the visual effect.</p>
And the result:
See how the image is pushed to the right of the text? Thanks, style attribute. Good job.
More text. More text. More text. More text. More text. La la la la la. La la la la la. La la la la la. La la la la la. La la la la la. La la la la la. La la la la la. La la la la la.
More text. La la la la la.
More text. La la la la la.
More text. La la la la la.
Even more text. Just for the visual effect.