intro to html - 4 images colors
advertisement
Basic HTML Hyper text markup Language Lesson Overview In this lesson, you will learn to: Images Colors Image extensions There 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 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. 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 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). Where can I get images for my website 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 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) 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 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 What are primary COLORS RED GREEN BLUE RGB Mixing RED – 0-255 GREEN – 0 - 255 BLUE- 0-255 creates all other colors Hex Mixing RED – 00-FF GREEN – 00 - FF BLUE- 00-FF creates all other colors Hexadecimal numbers 0,1,2,3,4,5,6,7,8,9, 10(A),11(B),12(C), 13(D),14(E), 15(F) Hex Colors are defined as #000000 #FFFFFF #FF0000 RGB Colors are defined as rgb(0,0,0) rgb(255,255,255) rgb(0,255,0) rgb(255,0,0) More Ways to mix: Cyan, Magenta, Yellow, Black CMYK cmyk(0, 100, 50, 0) Hue, Saturation, Light HSL Mixing hsl(120, 100%, 50%) Color reference http://www.w3schools.com/html/html_colors. asp http://www.w3schools.com/html/html_colorn ames.asp https://kuler.adobe.com/create/color-wheel/ http://www.pagetutor.com/colorpicker/index .html http://colorschemedesigner.com http://www.colorcodehex.com/html-colorpicker.html 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> 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
