1. Basic HTML Hyper text markup Language

2. Lesson Overview  In this lesson, you will learn to:  Images  Colors

3. 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.jpeg  Image.png  Image.bmp  Image.tiff

4. Images  - (image) is the element used to embed images  - src (source)is an attribute of which provides path to the image being embedded. It embeds an image file “smiley.gif” from the same directory as the html file.

5. Images  Embeds an image file “newpic.gif” from directory c:\webdesign  Embeds an image file “anotherpic.gif” from the directory \\server\webdesign

6. Images  Width and height attributes of 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).

7. Assignment - Images  Find 2 images for your assignment 1e.g http://commons.wikimedia.org/wiki/Main_Page 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

8. Where can I get images for my website

9. 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

10. 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)

11. 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

13. What are primary COLORS

14. RED GREEN BLUE

15. RGB Mixing RED – 0-255 GREEN – 0 - 255 BLUE- 0-255 creates all other colors

16. Hex Mixing RED – 00-FF GREEN – 00 - FF BLUE- 00-FF creates all other colors

17. Adding color to your text…  I am Red  I am Blue

18. Color reference  http://www.w3schools.com/html/html_colors. asp http://www.w3schools.com/html/html_colors. asp  http://www.w3schools.com/html/html_colorn ames.asp http://www.w3schools.com/html/html_colorn ames.asp  https://kuler.adobe.com/create/color-wheel/ https://kuler.adobe.com/create/color-wheel/  http://www.pagetutor.com/colorpicker/index.html http://www.pagetutor.com/colorpicker/index.html  http://colorschemedesigner.com http://colorschemedesigner.com  http://www.colorcodehex.com/html-color- picker.html http://www.colorcodehex.com/html-color- picker.html  Another tip is to Google “html colors”

19. HEX COLORS Defined as… #000000 #FFFFFF #FF0000

20.  I am Spring Green #00FF7F  I am blue Violet #8A2BE2

21. Hexadecimal numbers 0,1,2,3,4,5,6,7,8,9, 10(A),11(B),12(C), 13(D),14(E), 15(F)

22. RGB Colors are defined as rgb(0,0,0) rgb(255,255,255) rgb(0,255,0) rgb(255,0,0)

23. More Ways to mix: Cyan, Magenta, Yellow, Black CMYK cmyk(0, 100, 50, 0) Hue, Saturation, Light HSL Mixing hsl(120, 100%, 50%)

24. Setting font color  This is red  Blue  Green  ….

25. Assignment - Colors  Color the heading of your recipe.  Color the background of your recipe.