HTML Images
Format Support
-some browsers may not support all image formats -using the <picture> element, you can add images of all formats, and the browser will use the first format it recognizes and ignore the rest
2 main purposes for the <picture> element:
1. Bandwidth 2. Format Support
Create image Map
1. add <map> element 2. add <area> element
<img> tag has 2 required attributes:
1. src 2. alt
background image for entire page is added in the
<body> section
can specify the background image in <style> element in the:
<head> section
<picture> element contains 1 or more:
<source> elements
common image formats
APNG, PNG, GIF, JPEG, SVG, ICO
a clickable area can also trigger a:
Javascript function
to be able to point to an image on another server, you specify the:
absolute url in the src attribute
shape="circle"
add a circle to the area to locate the coordinates of the center of the circle -specify the radius
<picture> element
allows you to display different pictures for different devices or screen size
for the image to stretch and cover the entire element, use:
background-size to 100% 100% ex: background-size: 100% 100%;
Image map
can create clickable areas on an image
what do you need to add to the <area> element to execute javascript function?
click event
shape="poly"
contains several coordinate points, creates a shape formed with straight lines -find x,y coordinates for all edges of object then list them all
for the image to cover the entire element set background-size to
cover
<map> tag
defines an image map
<area> tag
defines the area with 1 or more <area> tags
media attribute
defines when the image is the suitable
to make sure the entire element is always covered, set background-attachment to
fixed
HTML Images
improve design and appearance of a webpage
shape="rect"
is x and y axis (x, y, margin, top)
If the background image is smaller than the screen, what will happen?
it will repeat
float property
lets the image float to the right/left of a text
each <source> element has a:
media attribute
width and height always define the image in:
pixels
define clickable area shape and coordinates by:
rect - rectangular region circle - circular region poly - polygonal region default - entire region
srcset attribute
refers to different images and allows the browser to pick the best fit image for the current view/device
alt attribute
specifies an alt text for the image and helps the user if they cannot view the image
src attribute
specifies the path to the image
if you have images in a sub-folder, you must include the folder name in the:
src attribute
usemap value
starts with a harsh tag (#) followed by the name of the image map, and used to create a relationship between the image and the image map
what attribute is suggested the most because it will help prevent style sheets from changing the size of the image?
style attribute
what attributes can you use to specify the width and height of an image?
style or width and height
Bandwidth
the browser will use the first <source> element with matching attribute values and ignore any following elements
<picture> element gives web developers more flexibility in specifying image resources true or false
true
HTML allows animated GIFs true or false
true
some websites point to an image on another server true or false
true
the image tag is an empty tag true or false
true
put <img> inside <a> will:
use an image as a link
background images
use style attribute and css background-image property
<map> element
used to create image map linked to image by using required name attribute
<img> tag
used to imbed an image in a webpage -creates a holding space for the image
how do you prevent the background image from repeating
using background-repeat property to no-repeat ex: background-repeat:no-repeat;