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

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.

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

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

Assignment - Images  Find 2 images for your assignment 1e.g  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

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

What are primary COLORS

RED GREEN BLUE

RGB Mixing RED – GREEN – BLUE creates all other colors

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

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

Color reference  asp asp  ames.asp ames.asp     picker.html picker.html  Another tip is to Google “html colors”

HEX COLORS Defined as… # #FFFFFF #FF0000

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

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

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%)

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

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