Download presentation
Presentation is loading. Please wait.
1
Hyper text markup Language
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 <img> tag Image.gif Image.jpeg Image.png Image.bmp Image.tiff
4
Images <img …./> - <img> (image) is the element used to embed images <img src="smiley.jpeg" /> - 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.
5
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).
6
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
7
Where can I get images for my website
8
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 Talk about using other images, copy right and fair use
9
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)
10
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
12
What are primary COLORS
13
RED GREEN BLUE Class activity, have the kids invent a way to describe a color. Have them give the pros and cons for the different ways they have thought of
14
RGB Mixing RED – 0-255 GREEN – 0 - 255 BLUE- 0-255 creates all other colors
15
Hex Mixing RED – 00-FF GREEN – 00 - FF BLUE- 00-FF creates all other colors
16
Adding color to your text…
<h2 style="color:red">I am Red</h2> <h2 style="color:blue">I am Blue</h2>
17
Color reference http://www.w3schools.com/html/html_colors.asp
Another tip is to Google “html colors”
18
HEX COLORS Defined as… #000000 #FFFFFF #FF0000
19
<h2 style="color:#00FF7F">I am Spring Green</h2>
<h2 style="color:#8A2BE2">I am blue Violet</h2>
20
More Ways to mix: Cyan, Magenta, Yellow, Black CMYK cmyk(0, 100, 50, 0) Hue, Saturation, Light HSL Mixing hsl(120, 100%, 50%) Why would someone use one of these color schemes
21
Setting font color <p style = “color: #0000FF”>Blue</p>
All the text in the paragraph will be blue. <body style = "background-color: #0BCEC7"> The entire background will be #0BCEC7 Always use the Letter/Number combo for Hexi Colors after the Hashtag.
22
Assignment - Colors Color the heading of your recipe.
Color the background of your recipe.
23
Style Fonts <h1 style="font-family:verdana;">This is a heading</h1> Use W3 Schools or search for various “HTML fonts”
24
Style Cont… Font size Text Alignment
<p style="font-size: 300%;">This is a paragraph.</p> Text Alignment <h4 style = "text-align: center;" style = "color: #191970"> This is a text align and a font color. This is what it looks like when using more than one style command.
Similar presentations
