basic html hyper text markup language. lesson overview in this lesson, you will learn to: ...
DESCRIPTION
Image extensions There are multiple formats of images. Each format has a different file extension. You can use them as src (source) for tag Image.gif Image.jpg Image.png Image.bmp Image.tiffTRANSCRIPT
![Page 1: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/1.jpg)
Basic HTMLHypertext markup Language
![Page 2: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/2.jpg)
Lesson Overview In this lesson, you will learn to: Images
Colors
![Page 3: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/3.jpg)
Image extensionsThere are multiple formats of images. Each format has a different file extension. You can use them as src (source) for <img> tag Image.gif Image.jpg Image.png Image.bmp Image.tiff
![Page 4: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/4.jpg)
Images <img …./> - <img> (image) is the
element used to embed images <img src="smiley.gif" /> - src (source)is
an attribute of <img> which provides path to the image being embedded. It embeds an image file “smiley.gif” from the same directory as the html file.
![Page 5: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/5.jpg)
Images <img src=“c:\webdesign\newpic.gif" />
Embeds an image file “newpic.gif” from directory c:\webdesign
<img src=“\\server\webdesign\anotherpic.gif" />Embeds an image file “anotherpic.gif” from the directory \\server\webdesign
![Page 6: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/6.jpg)
Images <img src="smiley.gif" width="32"
height="32“ alt=“smile”/> Width and height attributes of <img> decides dimensions of embedded image. Only use one of these so the image doesn’t stretch.
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute).
![Page 7: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/7.jpg)
Where can I get images for my website
![Page 8: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/8.jpg)
Sources of images Pictures taken by you using your digital
camera Pictures taken by someone else Pictures created by you using software
like photoshop Pictures created by someone else using
software like photoshop
![Page 9: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/9.jpg)
Copyright of images If you are using someone else’s picture
Please attribute picture to original contributor
Please make sure that you have read and understood copyright license
Wikimedia commons – free license. you can use images from there (give attribute to original contributor)
![Page 10: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/10.jpg)
How to attribute pictures Please put the title of the picture (if
available) name of the author/creator (if available) E.g Thanks to Mary smith for this picture
of a panda E.g Picture courtesy of Mary Smith E.g Picture by Mary Smith
![Page 11: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/11.jpg)
![Page 12: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/12.jpg)
Assignment - Images Find 2 images for your assignment 1e.g
http://commons.wikimedia.org/wiki/Main_Page Save them to the SAME FOLDER as assignment1 Add 2 image tags to your assignment 1page to
verify the results. Attributes: src: Use the complete file name (pic.jpg) width or height (but not both) alt
![Page 13: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/13.jpg)
What are primary COLORS
![Page 14: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/14.jpg)
REDGREEN BLUE
![Page 15: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/15.jpg)
RGB Mixing RED – 0-255GREEN – 0 - 255BLUE- 0-255creates all other colors
![Page 16: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/16.jpg)
Hex Mixing RED – 00-FFGREEN – 00 - FFBLUE- 00-FFcreates all other colors
![Page 17: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/17.jpg)
Hexadecimal numbers0,1,2,3,4,5,6,7,8,9,10(A),11(B),12(C),13(D),14(E), 15(F)
![Page 18: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/18.jpg)
Hex Colors are defined as #000000#FFFFFF#FF0000
![Page 19: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/19.jpg)
RGB Colors are defined asrgb(0,0,0)rgb(255,255,255)rgb(0,255,0)rgb(255,0,0)
![Page 20: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/20.jpg)
More Ways to mix:Cyan, Magenta, Yellow, BlackCMYKcmyk(0, 100, 50, 0)
Hue, Saturation, LightHSL Mixinghsl(120, 100%, 50%)
![Page 21: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/21.jpg)
Color reference http://www.w3schools.com/html/html_co
lors.asp http://www.w3schools.com/html/html_co
lornames.asp https://kuler.adobe.com/create/color-wh
eel/ http://www.pagetutor.com/colorpicker/in
dex.html http://colorschemedesigner.com http://
www.colorcodehex.com/html-color-picker.html
![Page 22: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/22.jpg)
Setting font color <p><font color=“red”>This is red</font></p> <p><font color=“#0000FF”>Blue</font></p> <p><font
color=“rgb(0,255,0)”>Green</font></p> <body bgcolor=“yellow”>….</body>
![Page 23: Basic HTML Hyper text markup Language. Lesson Overview In this lesson, you will learn to: Images…](https://reader035.vdocuments.us/reader035/viewer/2022062911/5a4d1bf87f8b9ab0599ea6cd/html5/thumbnails/23.jpg)
Assignment - Colors On top of the two images you have put
on your page put a title. Make the title the dominate color for
that image