Top Banner
HTML Tutorial 14 Thumbnails
12

Html tutorial.lesson14

Jul 07, 2015

Download

Education

grassos

Basic HTML Thumbnails
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Html tutorial.lesson14

HTML Tutorial 14Thumbnails

Page 2: Html tutorial.lesson14

Download an image from the internet Control click –save

image as

Navigate to your images folder

Save image as name_lrg

Page 3: Html tutorial.lesson14

Launch Photoshop Application

Page 4: Html tutorial.lesson14

Open Image name_lrgin Photoshop

Page 5: Html tutorial.lesson14

Open the image size under the image tab

Page 6: Html tutorial.lesson14

Change Image SizeDeselect Constrain proportions

change width and height

Page 7: Html tutorial.lesson14

Save image as name_sm in your images file

Page 8: Html tutorial.lesson14

Two Images

You should have two of the same images in your folder

One large

One small

NOW YOUR READY FOR HTML!!!

Page 9: Html tutorial.lesson14

>Create a New Doc in TextWrangler

Name it tutorial14.html and save it in your html folder

Page 10: Html tutorial.lesson14

Start with <img> tag

Page 11: Html tutorial.lesson14

Add <a> tags

Page 12: Html tutorial.lesson14

Add url of large picture