html tutorial.lesson14
DESCRIPTION
Basic HTML ThumbnailsTRANSCRIPT
![Page 1: Html tutorial.lesson14](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b02581a28abda7e8b46cb/html5/thumbnails/1.jpg)
HTML Tutorial 14Thumbnails
![Page 2: Html tutorial.lesson14](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b02581a28abda7e8b46cb/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b02581a28abda7e8b46cb/html5/thumbnails/3.jpg)
Launch Photoshop Application
![Page 4: Html tutorial.lesson14](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b02581a28abda7e8b46cb/html5/thumbnails/4.jpg)
Open Image name_lrgin Photoshop
![Page 5: Html tutorial.lesson14](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b02581a28abda7e8b46cb/html5/thumbnails/5.jpg)
Open the image size under the image tab
![Page 6: Html tutorial.lesson14](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b02581a28abda7e8b46cb/html5/thumbnails/6.jpg)
Change Image SizeDeselect Constrain proportions
change width and height
![Page 7: Html tutorial.lesson14](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b02581a28abda7e8b46cb/html5/thumbnails/7.jpg)
Save image as name_sm in your images file
![Page 8: Html tutorial.lesson14](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b02581a28abda7e8b46cb/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b02581a28abda7e8b46cb/html5/thumbnails/9.jpg)
>Create a New Doc in TextWrangler
Name it tutorial14.html and save it in your html folder
![Page 10: Html tutorial.lesson14](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b02581a28abda7e8b46cb/html5/thumbnails/10.jpg)
Start with <img> tag
![Page 11: Html tutorial.lesson14](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b02581a28abda7e8b46cb/html5/thumbnails/11.jpg)
Add <a> tags
![Page 12: Html tutorial.lesson14](https://reader033.vdocuments.mx/reader033/viewer/2022060201/559b02581a28abda7e8b46cb/html5/thumbnails/12.jpg)
Add url of large picture