Class 05

HTML Media

Using Images In HTML

When using an image on a website we will often use the alt='' attribute, this provides a description of the image which can be used as an ‘alternative’ to the image itself. This is used when an image won’t load and also by screen readers and othere accessability tools.
You can improve the accessibility of images in HTML by using the alt='' attribute.
The <figure> element is used for self contained content such as illustrations, diagrams, photos, code listings and many more.
A GIF may be used when you wish to use an animated picture, an SVG however is a great way to provide a graphic with unlimited scale and clarity.
If you wanted to display something such as a screenshot on your website you would want to use a JPEG. This provides high clarity images.

Learn CSS

Using Color in CSS. Styling HTML Text Elements

The color property defines the foreground color of an HTML element’s content and the background-color property defines the element’s background color. These can be used on just about any element.
If someone asked you to add color to their website you may want to add some background color to certain sections to make it clear they are seperate. You back wish to add some color to the text for headings to further differentiate them from other content.
One of the first things to consider when chosing a font is the style and look the client wants, you will also want to take into account the legibility of the font.
You can style font’s with font-size to make the text bigger or smaller, font-weight to make the text bolder or thinner and font-style to make it italic. You can add spacing around the characters in a h1 element by using either letter-spacing or font-kerning.