Reading notes for Code Fellows!
There are several things to consider when selecting and preparing images for our site. Things to consider are:
CSS can also be used to include images on our pages using the background-image: property.
Remember that all images are subject to copyright. We can get into trouble for simply taking photos from another website. If our page will show several related images, putting them all on simple, consistent backgrounds will help them look better as a group.
When building our site from scratch, it is good practice to create an images folder for all of the images the site will use. The folder could be subdivided into folders for images pertaining to specific pages or aspects of the site for better organization.
We use an <img> tag in our HTML page to add an image. This is an empty element that does not require a closing tag. Three common attributes for this tag are src which is is where we insert the URL for the image, alt which provides a text description of the image (useful if you are unable to see the image) and title to provide addition information about the picture that most browsers display when the user hovers over the image.
We can also set the height and/or width of the image using the height and width attributes. The numeric values assigned in these attributes are measures in pixels. However, better practice is to use CSS to designate dimensions of rendered images.
Where we place an image in our code will affect how it is displayed. Three examples are:
There are several tools we can use to edit and save images for use. The most popular tool amongst professionals is Adobe Photoshop. However, there are other alternatives such as:
WHen our image has many different colors, we should use a jpeg format. If the image has few colors or large areas of the same color, we should use gif or png formats.
Images should be saved at the same width and height that we want them to appear on the web page. We can reduce the size of our image to create a smaller version of the image which is quicker to download. We can’t increase the size of our image significantly without making it look blurry or blocky. While we can alter the shape of an image, only some images can be cropped and still make sense (where at all possible, source images that are the correct shape. Don’t crop).
Vector images are different from bitmap images and are resolution independent. They are commonly created in programs like Adobe Illustrator and are often employed for logos, diagrams and illustrations. Scalable Vector Graphics (SVG) are a relatively new format and their use is not yet widespread.
Creating an image that is partially transparent for the web involves selecting either (transparent) gif or png. The png format offers more options for manipulation later including drop shadows…
HTML5 has introduced the <figure> element to contain images and any captions we wish to associate with them. Captions for he image(s) are added with the new <figcaption> tag.
COlor not only brings our site to life, but also helps convey the mood and evokes reactions. When selecting colors for an element, they can be specified in several ways. However, the three most common are:
Colors can be apply to different things.
The color property sets the color of foreground items such as text.
The background-color property sets the color of the background of a particular element.
It is important to select text and background colors that provide enough contrast to be legible.
Using color indicators like rgba or hsla, allows you to specify the opacity of a color. The “a” position is a value between 0.0 and 1.0 that represents a percentage of transparency. Some browsers may not support opacity so it is good practice to create an alternate backup CSS rule above the rule that those browsers can use.
The properties that allow us to control the appearance of text can be divided into two groups:
When choosing a typeface for our site, it is important to understand that a browser will usually only display it if it is installed on the user’s computer. Three more common types are:
font-family is the property which specifcies typeface
font-size is a property that allows us to specify a size for the font in pixels, percentages or ems (equivalent to the width of a letter “M”)
font-weight commonly takes one of two values, normal or bold
font-style used to create italic text. THere are three possible values: normal, italic or oblique
text-transform is used to change the case of text with values like: uppercase, lowercase and capitalize
text-decoration can be used to underline, overline or strikethrough text, etc.
line-height, letter-spacing and word-spacing are all properties which allow us to control the amount ospace between letters, words and lines of text
text-align can alter alignment of the text to left, center, right or justified
text-indent is the property which we can use to indent the first line of text within an element
Technically these are not properties. They are more like selector extensions. They can be added to the end of selectors to designate specific parts of a word or text to modify or to respond to users.
:first-letter:first-line:link:visited:hover:active:focus| Selector | Meaning | Example |
|---|---|---|
| Existence | [ ] Matches a specific attribute regardless of value | p[class] |
| Equality | [=] Matches a specific attribute with a specific value | p[class="dog"] |
| Space | [~=] Matches a specific attribute whose value appears in a space-separated list of words | p[class~="dog"] |
| Prefix | [^=] Matches a specific attribute whose value begins with a specified string | p[attr^="d"] |
| Substring | [*=] Matches a spcific attribute whose value contains a specific substring | p[attr*="do"] |
| Suffix | [$=] Matches a specific attribute whose value ends with a specific string | p[attr$="g"] |