Select Lesson
HTML Review Quiz
5 min
Vocab Recall
10 min
Attributes — href=
, src=
5 min
Image tag —<img src="" alt="">
2 min
Image —src
attribute
3 min
Image —width
and height
attributes
5 min
Image —title
attribute
5 min
Image —alt
attribute
5 min
File sizes
2 min
Image file types
3 min
Copyright and Creative Commons
5 min
Lesson 4. image tag
30 min
CSS to center an image
5 min
Images Review Quiz
5 min
images
10 min
Attribute and Images
Level OneHTML Review Quiz
5 min
Vocab Recall
10 min
Attributes — href=
, src=
5 min
Image tag —<img src="" alt="">
2 min
Image —src
attribute
3 min
Image —width
and height
attributes
5 min
Image —title
attribute
5 min
Image —alt
attribute
5 min
File sizes
2 min
Image file types
3 min
Copyright and Creative Commons
5 min
Lesson 4. image tag
30 min
CSS to center an image
5 min
Images Review Quiz
5 min
images
10 min
60 min
Attributes and Images
Use the image tag to insert pictures on webpages and learn more about images.
Code Avengers Quiz
HTML Review Quiz
Recap learning with this quiz.
Activity
Vocab Recall
This is a group activity
Objective
To cement vocabulary words through practice.There is a lot of new jargon to remember when you study in a new area. The more of the words you know the better you will be at researching and answering your own questions online.
Background
Preparation
Requires: Written recording device (pen and paper, computer document etc)
Instructions
- You have 1 minute to write down all the new words you can remember from past lessons.
- Go around the group and ask others to call out their words.
- If another has it cross it off everyone’s list.
- The winner is the one who has the most words that no one else got.
Key vocab from past lessons:
Internet, Server, Client, ISP, IP address, packets, protocol, (server), path, URL, DNS JavaScript, HTML, CSS, editor, web builder
Tags: paragraph <p>
, heading, title, strong, break, link, self closing, start-end, element
Extension: Concepts
Attributes — href=
, src=
Our HTML tags can be as simple as a <p>
, to create a paragraph, or they can have more information inside them.
Anchor tags for example need an attribute called href
(hypertext-referencing), href
holds the to link to another webpage. href=""
is an example of an attribute.
Below we have a color-coded example of parts of an HTML element.
<tag attribute="value">Text node inside element</tag>
<a href="www.codeavenger.com"> This is a (hyperlink) link to CA!</a>
Tags structure your webpage, they add spaces and headings and images. Some of these tags use attributes these add more functionality a tag.
Attributes have a specific name, like width=' '
or href=" "
and have a value inside quote marks, like width='300px'
. You can have more than one attribute in a tag. Some attributes must be used with a tag and some are optional, you will learn them as you go.
Confused? It will make more sense as you write the code yourself.
Here is an example of an image tag
<img src="http://gathergather.co.nz/grumpy-cat.png" height="100">
The src attribute is not optional, it tells the browser where to find the image. In this case the value is the to a grumpycat image.
The height attribute is optional has a value of 100 pixels.
This will make the image image 100 pixels tall. The width can also be set with a width attribute, if it is not added the width of the image will automatically resize to keep the same height to width ratio of the image.
Concepts
Image tag —<img src="" alt="">
The image tag adds images to your web page.
Required attributes | src= The source attribute tells the browser where to "source" (find) the image. It is usually the URL of where the image is.alt= is text to describe the image. It is not required but you should use it.
|
Tag placement | Middle of page (body) |
Tag type | Self-closing |
Concepts
Image —src
attribute
To add images we use the self-closing <img>
tag
The <img>
tag always needs a src
attribute to tell the browser where to source (find) the image. It is usually the url of where the image is.
For example
<img src="http://gathergather.co.nz/grumpy-cat.png" width="100%">
Concepts
Image —width
and height
attributes
Tags can have more than one attribute, some (like src) are required and others are optional:
Width and height tell the browser what size to display the image at.
For example
Without width and height attributes, the browser displays image at original size.
<img src="http://gathergather.co.nz/grumpy-cat.png">
Here we have added the height and width attributes, setting them to roughly half the pixel size of the original:
<img src="http://gathergather.co.nz/grumpy-cat.png" width="320" height="262">
Because people use many different sized devices to look at webpages, it is often best to use a percentage (%) rather than set the width or height to a fixed size in pixels.
For example
The width of an image set to 50% will make the image take up exactly half of the container it is in, no matter what size the screen is.
So lets look at some different percentages.
You can change the code in the boxes below to try your own.
What does 200% look like?
Concepts
Image —title
attribute
The title
attribute is used to add tool-tip to the
image.
A tool-tip is a message that is shown when the mouse
pointer hovers over an item on a web page.
Hover over the picture in the webpage output container.
The attribute looks like this
<img title = "message">
Concepts
Image —alt
attribute
alt
is another image attribute:
<img alt="explanation of image.">
alt
is alternative text that screen readers use to explain images to people who are visually impaired. It also shows up when there's a "broken image", when the computer can't find a picture because of typos or moved files.
You should always include it in your image code.
Think about the words you use:
Describing the meaning of the image is far more useful than describing what it looks like.
For example:
"Logo of Code Avengers" is far more useful than "Red letters"
Below we have a broken image with alt
text.
Do you see how both alt
and title
have text but they are used differently?
Concepts
File sizes
Photos from a camera have a large file size and they can slow down your webpage.
You should use image editing software, like Photoshop or GIMP, to make digital photos (from a camera) smaller.
In those programs, you should take the size of images down and make them as small as you will use them and save them again.
If you already have an image, you can use
tinypng.com
to compress your image smaller.
There are two important things to think about when adding images to your website:
- The file size
- The image quality
Basically the more beautiful and detailed your photos are the bigger their file size.
The more information a webpage has to load, the slower it works.However, usually you can run your image through a program that can cut the file size down without changing the look of the image (called an optimizer, a compressor, a reducer). You want to get the best quality for the smallest file size. (More on that in the extension)
Concepts
Image file types
Images can be saved as different file types and they all do slightly different things.
There are three common file types:
GIF images
These images have no more than 256 colors. This file type is used for animated images. 1 of the colors can be transparent.
This is from giphy.com
JPG images
This file type is used for photographs and other images that have millions of colors. The image, when saved as a JPEG, is looked at in sections by the compressor and the high frequency colors are averaged out, removing a lot of data but keeping images pretty similar looking to the original. With JPEGS there is a trade off between quality and file size. You should choose the smallest file size and minimum quality that still gives a clear picture, with no noticeable pixelation.
PNG images
This file type is good for images with text, crisp edges and/or transparency. It can be 24 bit with 8 bits for red, green and blue, or 32 bits with an additional 8 bits for an alpha value. Great for logos and pictures with text or black and white cartoons
File types poster
Here is a colorful poster from the internet you can print out and put on your wall:
Know Your File types">https://s-media-cache-ak0.pinimg.com/originals/62/51/67/62516788823380d4704ae906d9ef74e7.jpg">Know Your File types (when to use JPEG, GIF, PNG) #infographic
This info-graphic originally comes from www.whoishostingthis.com.
They have some awesome resources to further explore.
Concepts
Copyright and Creative Commons
Think about copyright
You must learn to not use copyrighted material.
Intellectual property is important to recognize and you can easily fail assessments or get in trouble at work for stealing images from people and trying to pass the off as your own.
There are a lot of creators who are happy for you to use their images for free, they will say their work is CC or under the creative commons licence.
An easy way to find them is using:
It gives access to search services that find content you can use, share and remix.
To use this page, enter a search query then click one of the search buttons.
Your content must be legal- http://legislation.govt.nz/
Below are some links to the kind of images you can use.
Reference
You should also get into the habit of referencing outside material. Adding a quick link and date underneath written information helps you to find the source of the information again quickly and helps you develop your organizational skills.
NOTE ALL images on wikipedia are copyright free and maybe used BUT they might still need the user to do something like have a caption with the image holders name.
Wikipedia must reference example.
Race CarsMust caption with name and licence, the date and hyperlink are just bonus good things: Nascarking CC BY-SA 4.0 accessed 24.8.217
Wikipedia reference not legally needed
King Henry VIIIDoes not need this caption: Google Cultural Institute Public Domain
Using other web-sites images.
CA level 1, lesson 4.5 explains how to show an image from a Google image search by linking directly to the image hosted on another site. This approach is often useful for rapid prototyping and testing (quickly building and testing your webpage) but when you have your own site you should use your own images.
HTML/CSS 1 Lesson
Lesson 4. image tag
Extension: Concepts
CSS to center an image
You will learn about CSS later but for those of you who want to center your images here is what you do
To center only a few add a class (You will learn about this later)
Code Avengers Quiz
Images Review Quiz
Extension: Concepts
images
The example images above are saved using GIMP at various qualities:
Notice that in this case the 90% quality JPG is 1/4 the file size of the PNG with little difference in quality. The 50% quality JPG is 1/10 the file size of the PNG and is still reasonable quality. The 10% JPG has noticeable pixelation .
Here are a few examples of text saved as JPG and PNG with GIMP.
90% quality JPG, 4.9KB 50% quality JPG, 2.9KB 10% quality JPG, 1.7KB 32bit PNG, 5.1KB 8bit PNG, 1.5KB
Notice that in this case the 90% quality JPEG is smaller than the PNG. However, if you zoom in, you will see some pixelation around the text.
More info:
web design
Use GIF if you need animation or a low color range with transparency (Usually you should use PNG if you need transparency.
Use JPEG if the image is a photograph.
Use PNG if you need straight lines, like a cartoon, of if you need a wide color range with transparency
Summarised in Stackoverflow
There is more technical information on JPEG compression here
The CS Feild Guide has a useful section on color and images in their data representation chapter.
Resources
Guide
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F