HTML5 MULTIMEDIA: WORKING WITH IMAGES

images are pictures or colors and design used in a web page, images are used to improve the design and the appearance of a webpage for example to add an image to a webpage we use the tags <img> tag to embed it in a webpage

The <img> tag has two required attributes in the sense that you must link the image to the file or folder of the webpage you are working on e.g

The <img>tag has two required attributes

the .src- specifies the path to the image

.alt-specifies an alternate text for the image for example below

<img src="url"
alt= "alternatetext">

NOTE: When a webpage loads, it is the browser, at the moment that gets the image from the web server and inserts it into the page therefore making sure that the image stays in the same spot in relation to the web page for example

<img src= "img=chania.jpg "alt= "flowers in chania" >

IMAGE SIZE-width and height

you can use the style attribute to specify the width and height of an image for example

<img  src="img_girl.jpg"
alt="girl in a jacket"
style="width:500px;height:600px;">

the width and height attributes always define the width and height of an image in pixels so it is very important to always add height and width

IMAGES IN ANOTHER FOLDER

if you have your images in a subfolder, you must include the folder name in the src attribute for example

<img src="/images/html5.gif"
 alt="html5 icon"
style="width:128px height:128px:>

IMAGES on another server/ website

some websites point to an image on another server. To point to an image on another server, you must specify an absolute full url in the src attributes.

<img
src="https://www.w3schools.com/images/w3schools_green.jpg" alt="w3schools.com">

IMAGE FLOATING

use the CSS float property to let the image float to the right or the left of a text example

<p><img src="smiley,gif"
alt="smiley face"
style="float:right;width:42px;height:42px;">
image will float to the  right

<p><img src= "smiley.gif"
alt="smiley face"
style:float:left;width:42px;height:42px;".
the image will float to the right

COMMON IMAGE FORMATS

here are some common image file types, which are supported in all browsers [chrome, edge, firefox ] eg png, gif

Chapter Summary:

• Use the HTML <img> elements to define an image
• Use the HTML src attribute to define the url of the image
• Use the HTML alt attributes to define an alternate text for an image if it cannot be displayed
• Use the HTML width and height attributes or the CSS width and height properties to define the size of an image
• Use the CSS float property to let the image float to the left or the right