Web Design Unit 5 Todays Lesson Objectives Identify

Web Design Unit 5

Today’s Lesson Objectives: Identify standard image resolution (72 dpi) Resized and crop images for web Identify and differentiate between forms: jpg, gif, png Create html page that includes image Sign up for codepen. io

Review What tags did we learn last week?

Discussion: Image Format Image properties are relevant to web use. It is important to check the size when preparing an image for use on the web. Resolution can be set under the image size (72 dpi). Make webpage user friendly and accessible to diverse users.

Selecting and Cropping an image Cropping and resizing in Photoshop or image editor of choice (Preview). Choose a few images that you will add to home page and crop them. Save your images for use in this project and other projects Who is familiar with Photoshop?

Image Tag Description End Tag <img Defines an image /> • <img src= “xxxx. jpg” alt=“Text that describes the image” /> • xxxx is the name of the image file. • The image should be in the same folder as the html file. • The alt is added to describe the image in the event that it cannot be viewed for some reason • Pair up and add image to folder and insert image to webpage. • Can add title by: “img src=“xxxx. jpg” width=“some#” height=“some#” title=“This is my photo…. ”/> • Experiment with placement, sizes, headings, and additional images.

iframe Tag Description End Tag <iframe> Displays web page within a webpage. </iframe> • See w 3 schools. com

Table Tags See w 3 schools. com

Practice www. w 3 schools. com Under image do exercises 1 to 6. Add images to your homepage

Resources https: //www. photoshop. com/express