Digital Image File Formats and their Storage -- TIFF, JPEG & JPEG2000
* HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The...
-
Upload
annabel-knight -
Category
Documents
-
view
217 -
download
0
Transcript of * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The...
![Page 1: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/1.jpg)
* HTML * ADDING IMAGES AND LINKS
![Page 2: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/2.jpg)
WHAT WE WILL LEARN
• 1. How to add an image to a website.• 2. The different main image formats ?• 3. What is resolution and what is a good
resolution for an image on a website?• 4. HOW TO EDIT A PICTURE
![Page 3: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/3.jpg)
What We Did Do So Far:
• HTML BASICS: YOU HAD TO UPLOAD A FILE THAT HAS1. HEAD <head>
• 2. BODY <body>• 4. HEADERS <h1>….. <h6>• 5. PARAGRAPH <p>• 6. Line break <br/>• 7. HORIZONTAL LINE <hr/>• 8. <html > tag of course….• IS YOUR FILE UPLODED TO WIKISPACES????
![Page 4: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/4.jpg)
SIZE OF IMAGES ON A WEBPAGE
• Images are perhaps the largest files a new web designer will be handling.
• Web pages should download as quickly as possible so…Don’t be oblivious to the file size of images, which can be extremely large.
• You need to strike a balance between image quality and image size.
• compressing images helps but to decide what is best suited for yourself is trial and error.
![Page 5: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/5.jpg)
FILE FORMATS•Most common :• GIFs and JPEGs-Both are compressed formats with different uses.TYPES OF COMPRESSION:• LOSSLESS-no loss of info• LOSSY-loses some of the info
![Page 6: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/6.jpg)
JPEGs & GIFs & PNGsLossless compression• GIFs-Graphic Interchange Format:- -• no more than 256 colors- • The lower the number of colors -the lower the file size.GIFS ( & PNGs) SHOULD BE USED FOR IMAGES WITH SOLID COLORS.Lossy compression• JPEGs - mathematical algorithm compresses the image and will distort
the original slightly. • The lower the compression, the higher the file size, but the clearer the
image. JPEGS SHOULD BE USED FOR IMAGES SUCH AS PHOTOGRAPHS.
• Gifs xxx.gif JPEG : xxx.jpg
![Page 7: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/7.jpg)
STANDARD RESOLUTIONFFOR WEB 72 PPI
PPI =Pixels Per Inch
![Page 9: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/9.jpg)
YOU CAN EDIT YOUR IMAGES ON VARIOUS PROGRAMS
• PIC MONKEY (No registration)• http://www.picmonkey.com/
• Or PHOTOSHOP EXPRESS (you have to register but gives you more options!)
• http://www.photoshop.com/tools/expresseditor
![Page 10: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/10.jpg)
WITH PHOTO EDITORS You can…
• Crop & RESIZE• Eliminate red eye• Add interesting effects• Add text• Change coloring • Etc…. • ENDLESS OPORTUNITIES.
![Page 11: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/11.jpg)
ADDING IMAGES in HTML – IMG TAG<img />
<img src=”xxxx.jpg”/> xxxx is the name of the image file. .jpg (the
extension) tells the browser what is the name of the image.
The image should be in the same folder of the webpage =the .html File
• (or in a subfolder /images/xxx.jpg )
![Page 12: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/12.jpg)
HTML Images – Set Height and Width of an Image
• The height and width attributes are specified in pixels by default:
• <img src=“SmilingCat.jpg" alt=“CAT" width="304" height="228">
• Best to specify both height width attributes • If these attributes are set, the space required for the image is
reserved when the page is loaded. • Otherwise the browser does not know the size of the image. The
page layout will change during loading (while the images load).
![Page 13: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/13.jpg)
TIPS
• USE IMAGES CAREFULLY- Think about loading timeMAKE SURE THEY “STAY PUT” IN SAME LOCATION SO
THE BROWSER CAN FIND THEMThere are many other fancy things you can do to an
image…LEARN MORE AT HTMLDOG.COM OR http://w3schools.com/html/
![Page 15: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/15.jpg)
DECISIONS, DECISIONS
• 1: who is your partner• 2. What is your website about?• Ideas; Music groups; A favorite TV shows; A
famous person (Obama, or event) ; A Place you want to visit; A subject that interests you such as cars, musical instruments, computers, games, books, etc.
![Page 16: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/16.jpg)
Today
• Create a folder for your website on the desktop• Start gathering images for your web site by
going to google images. • Upload 2 images to picmonkey and edit them• (upload the before and after images to your
wikispace page)• Add the edited photos to your html file. Be sure
to use width and length, alt and title.
![Page 17: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/17.jpg)
EXTRA CREDIT – MORPH A FACEUpload and Morph a Face here
Upload to your wikispaces page for credit.
• http://morph.cs.st-andrews.ac.uk/Transformer
• /
I made this guy younger
![Page 18: * HTML * ADDING IMAGES AND LINKS. WHAT WE WILL LEARN 1. How to add an image to a website. 2. The different main image formats ? 3. What is resolution.](https://reader035.fdocuments.net/reader035/viewer/2022070323/56649da15503460f94a8ccc3/html5/thumbnails/18.jpg)
ADDING HYPER-LINKS<a href="http://www.vannuyshs.org/">VNHS website</a>
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.
The HTML <a> tag defines a hyperlink.• move the cursor over a link in a Web page ->turn into a little
hand.• The href attribute, which indicates the link’s destination.• An unvisited link is underlined and blue• A visited link is underlined and purple• An active link is underlined and red
• http://www.vannuyshs.org