The Image Tag and the Src Attribute
explanation video
In HTML, images are defined with the <img> tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.
The syntax for defining an image:
<img src="url">
The URL points to the location where the image is stored.
The url can be either a
- file name of file you have placed locally (e.g. oscar.png) or
- internet location (e.g. https://i.kym-cdn.com/photos/images/original/001/065/957/dca.jpg
I have placed some more detailed instructions on how to use images found on the internet. They are inside of Project 9 in repl.it (in README.md).
Reading
Study this section of W3Schools to learn about the image tag.
The Alt Attribute
The alt attribute is used to define an "alternate text" for an image. You should use something brief and informative. For example:
<img src="boat.gif" alt="sailboat">
The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image.
Screen readers will read this alternate text aloud, so it conveys information to non-readers, blind users, or people that have text-only browsers.
Include the "alt" attribute for each image on a page.
If you don't, it's not considered valid html.
The Title Attribute
The title attribute is used to provide a tooltip for an image. Tooltips are the words that pop-up on screen if you position the cursor over the image and wait for a quarter second. The title attribute can be the same as the alt attribute:
<img src="boat.gif" alt="whaleboat" title="whaleboat">
The Width (or Height) Attribute
The width attribute is used to make the image smaller:
<img src="boat.gif" width="100px">
You can give both a width and a height (if you know both), but if you have to calculate it, be careful! You risk stretching or scrunching the image.
If I am changing the size, I usually just give it a width. The browser will choose the correct height.
Center an Image
Here's a link if you need to center an image.
Align an Image Relative to a Line of Text
Within the web page you are creating, the browser puts the image where the image tag occurs in the your html document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
If you put the image element in the middle of a bunch of text (which might be inside a <p> element, it will display it there. If you want it higher up, just place it higher within the <p> element.
Float:left and float:right are very effective at positioning an image to the left or to the right. To create a little space around the image, you will probably also want to adjust the margins of the img and perhaps the padding of the td.
This is shown in the example below.
I also use padding of the td, to keep both image and text way from the sides.
Please open this Indian paintbrush example and use “Rt-click → View Page Source” to see how it might be done.
Due Date: Thursday, 5/16/24:
Tribute Site - create a website that is dedicated as a tribute to some person, place, or thing (such as an activist, a poet, or a musical work, video game, novel, etc.). The website should contain a background image, images which are pleasingly placed within text, a table of images dedicated to your tribute, and will show proper use of the alt and title attributes.
To save time typing, you will probably want to begin with a copy of a previous template with a layout table. Or not.
But if you do, make it completely new, with new content and new styling.
- Background image: set an image as the background for a page. Find information on this here in W3Schools.
- Let an image float. (This controls it's position in the left-right direction, relative to other stuff, like text.) Use float:right or float:left.
- Adjust images to different sizes
- Use at least 4 images in a table layout
- Display alternate text for all <img> elements in this assignment.
- Use the title attribute for all <img> elements in this assignment.
- Make at least one image a clickable link to somewhere else.
Rubric
| Category | minus 15 points | minus 10 points | minus 5 points | Full points |
|---|---|---|---|---|
| Project Requirements | Student follows 4 of the bulleted instructions, above. | Student follows 5 of the bulleted instructions, above. | Student follows 6 of the bulleted instructions, above. | Student follows all 7 bulleted instructions, above. |
| Code Quality | Code doesn't run as expected and shows they did not study or understand the learning resources | Code displays somewhat as expected, minimal understanding of learning resources | Uses somewhat appropriate syntax and correct features. Well formatted, basic understanding of learning resources | Easy to understand. Uses appropriate syntax and features to accomplish the task. Shows they studied and understood the learning resources very well |
| Code Style | Code is very hard to read and understand, follows almost no styling guidelines, inconsistent and causes errors | Code is not very readable or consistent, but follows some styling guidelines, some errors | Code is fairly readable and consistent, but does not follow all styling guidelines, minimal errors | Code is readable and follows all styling guidelines, no errors |
| Creativity | Student does not show basic creative effort (i.e. no addition of content, text/headers/etc) | Student shows minimal creativity from base requirement (i.e adds a couple things but not much) | Student shows some creativity from base requirement (i.e creates some content, text/headings/etc and some nice styling) | Student goes above and beyond base requirement and shows understanding of project (i.e. additional content, styling) |