Week 3 - Images and Tables
Images
There are many reasons why you might want to add an image to a web page: you might want to include a logo, photograph, illustration, diagram, or chart. There are several things to consider when selecting and preparing images for your site, but taking time to get them right will make it look more attractive and professional. We will be discussing how to:
- Include an image in your web pages using HTML
- Pick which image format to use
- Show an image at the right size
- Optimize an image for use on the web to make pages load faster
CHOOSING IMAGES FOR YOUR SITE
Great images help make the difference between an average-looking site and a great site. Images can be used to set the tone for a site in less time than it takes to read a description.
If you do not have photographs to use on your website, there are companies who sell stock images, which are images you pay to use. It is important to remember that all images are subject to copyright laws, and you can get into trouble for simply taking (and not even using) photographs from another website.
If you have a page that shows several images (such as product photographs or members of a team) then putting them on a simple, consistent background helps them look better as a group.
The images you use should
- Be relevant
- Convey information
- Convey the right mood
- Be instantly recognizable
- Fit the color palette
Stock Photo Resources
STORING IMAGES ON YOUR SITE
If you're building a site from scratch, it is good practice to create a folder for all of the images used by the site.
As a website grows, keeping images in a separate folder helps you understand how the site is organized. Here you can see an example of the files for a website; all of the images are stored in a folder called img.
On a big site, you might like to add subfolders inside the images (or img) directory. For example, images such as logos and buttons might sit in a folder called interface, product photos might sit in a folder called products, and images related to news might live in a folder called news.
If you are using a content management system (CMS) such as WordPress, Joomla, etc, there are usually tools built into the admin site that allow you to upload images, and the program will probably already have a separate folder for image files and other uploads.
ADDING IMAGES TO YOUR SITE
To add an image to a page you need to use the <img> tag. This is a "self-closing" tag, so you don't need a closing tag. You should include a few attributes in your img tag:
- src - This tells the browser where the it can find the image file. If you are linking to an external image (one on another server/site), you need to include the complete URL. If you are including an image that resides on your server (most likely), you need to provide the relative path to that file.
- alt - This provides a text description of the image which describes it in case it does not display. (Your site won't pass validation without this tag.)
- title - This tag is optional (while the other two are necessary). You can add a title to an image to provide additional information about it. Most browsers will display the title of an image when the user mouses over the image.
For example, if I have an image named "squirrel3.jpg" in my img directory (which sits inside of my working directory), I can load the image into the page as follows:
<img src="img/squirrel3.jpg" alt="pic of squirrel" title="a very curious squirrel" >
Note a couple things about this call. First, the img tag is self-closing (as we mentioned earlier). Second, each of the attributes (src, alt, title) must have its property specified within quotes. Also, and this isn't obvious, you will wind up with the image displayed at maximum resolution/width. So, if you want it to be 600px wide and it isn't, well you won't have what you want. You need further attributes to fix that.
HEIGHT & WIDTH OF IMAGES
You will often see an img element use two other attributes that specify its size:
- width - This specifies the width of the image in pixels.
- height - This specifies the height of the image in pixels.
Before giving an example of using these attributes, it is worth noting that you can simply specify one of them, and the other will be sized to suit. (I often do this. I set the width attribute to, say, "600px" and the height will scale to fit this.) You can specify the height and width as follows:
<img src="img/squirrel3.jpg" alt="pic of squirrel" width="600px" height="450px" >
Often, though, I'll just do this to make it simpler:
<img src="img/squirrel3.jpg" alt="pic of squirrel" width="600px" >
Using the very same syntax, I loaded the squirrel3.jpg image into this page:
Another reason why you might want to do this: If the image doesn't scale to the height/width dimensions you give it, the image won't show. However, if you simply give it one dimension (width, say), it will. It is worth noting here that CSS is the preferred method for sizing images and setting properties. We will discuss this later in the term.
WHERE TO PLACE IMAGES IN YOUR CODE
Where an image is placed in the code will affect how it is displayed. Here are three examples of image placement that produce different results:
1: Before a paragraph - The paragraph starts on a new line after the image.
2: Inside the start of a paragraph - The first row of text aligns with the bottom of the image.
3: In the middle of a paragraph - The image is placed between the words of the paragraph in which it appears.
Where you place an image in your code is important because browsers show HTML elements in one of two ways:
- Block elements always appear on a new line. Examples of block elements include the <h1> and <p> elements. If the <img> is followed by a block level element (such as a paragraph) then the block level element will sit on a new line after the image as shown in the first example above.
- Inline elements sit within a block level element and do not start on a new line. Examples of inline elements include the <b>, <em>, and <img> elements. If the <img> element is inside a block element (such as a paragraph), any text or other inline elements will flow around the image, as shown in the second third images above.
THREE RULES FOR CREATING IMAGES
There are three rules to remember when you are creating images for your website which are summarized below. We go into greater detail a bit later.
- Save images in the right format. Websites mainly use images in jpeg, gif, or png format. If you choose the wrong image format then your image might not look as sharp as it should and can make the page slower to load.
- Save images at the right size. You should save the image at the height and width at which you want it displayed on your page. (This means you should have multiple sizes of the same image if it appears at different sizes on your site.) If the image is smaller than the width or height you have specified, the image can be distorted or stretched. If the image is larger than the width and height you have specified, the image will take longer to display.
- Measure images in pixels. Computer screens are made up of tiny squares called pixels. The number of pixels shown per inch of screen can vary if the user increases or decreases the resolution. Therefore, when you are saving images for the web, you should always measure the image in terms of the width and height in pixels (and not, say, centimeters).
TOOLS TO EDIT & SAVE IMAGES
There are several tools you can use to edit and save images to ensure they are the right size, format, and resolution. The most popular tool amongst web professionals is Adobe Photoshop. (In fact, web designers often use this site to design entire sites.) Adobe Fireworks is another popular tool for web photo editing, and was in fact designed with that purpose in mind.
Commonly used software:
- Adobe Photoshop
- Adobe Firewords
- Pixelmator
- PaintShop Pro
- Paint.net
Online editors:
Image formats: JPEG
Whenever you have many different colors in a picture you should use a JPEG. A photograph that features snow or an overcast sky might look like it has large areas that are just white or gray, but the picture is usually made up of many different colors that are subtly different.
Image formats: GIF
Use GIF or PNG format when saving images with few colors or large areas of the same color. When a picture has an area that is filled with exactly the same color, it is known as flat color. Logos, illustrations, and diagrams often use flat colors. (Photographs of snow, sky, or grass are not flat colors, they are made up of many subtly different shades of the same color.)
IMAGE DIMENSIONS
The images you use on your site should be saved at the width and height that you want them to appear on your page. For example, if you have designed a page to include a 300 px wide by 150 px high image, then you should use an image that is 300 pixels wide and 150 pixels high. You might need to use an image editing tool to resize and crop (if necessary) the image. It is important to remember what you can and should do to images as well.
Reducing an image's size: You can reduce the size of images to create smaller versions of the image. For example, if your image is 600px by 300px and you have designed your site to require a 300px by 150px image, then you simply reduce the size of the image by 50%. The primary benefit of this is in terms of load times. Smaller files take less time to load!
Increasing an image's size: You can't increase the size of photos significantly without affecting image quality. For example, if your image is 100 pixels wide and 50 pixels tall, you do not want to expand it to fit a 300 px by 150 px slot. This will result in poor quality, and will make your site look like junk.
Changing an image's shape: Only some images can be cropped without losing valuable information. Be very careful when cropping your images, so as not to lose crucial information or information that enhances an image's "feel."
Examples:
The first image below is in landscape mode (in that there is content to the side of the image). I could crop this to portrait mode, provided I retain the bird, without losing crucial information.
However, this image - which is also in landscape mode - shouldn't be cropped to portrait. (Well, I suppose you could if you only wanted to catch the bird's eye or something.) The second version just doesn't say as much as the first (not that this image is good, but you get the point).
MEASURING IMAGES & RESOLUTION
When sizing an image for the web you should always set dimensions of the image in terms of pixels. The resolution of a monitor is the number of pixels represented on it, and on most computers you can increase and decrease this number. If a screen's resolution is set to 640x480 pixels and is then increased to 1024x768 pixels, the images and text on it will appear smaller because the screen is showing a lot more pixels within the same amount of space. (There are more pixels per inch - ppi.)
When creating images for print, it is best to save them at a resolution of 300 DPI or higher, to ensure they look sharp. On the web, however, the resolution of an image is irrelevant. We only need to think of the size of the image in terms of its pixel dimensions. You may have heard that web images need to be 72 ppi, but users can change the resolutions of their screens. Screens therefore determine the size of an image based solely on its width or height in pixels. What does this mean? On a screen, a 300x300 pixel image that is 72ppi will look exactly the same as a 300x300 pixel image at 500ppi. Resolution only matters in print.
VECTOR IMAGES
Vector images differ from bitmap images and are resolution-independent. Vector images are commonly created in programs such as Adobe Illustrator.
When an image is a line drawing (logo, illustration, or diagram), designers will often create it in vector format. Vector formatted images are very different to bitmap images.
Vector images are created by placing images on a grid, and drawing lines between points. A color then can be added to "fill in" the lines that have been created. The advantage of creating line drawings in vector format is that you can increase the dimensions of the image without affecting its quality. (For example, increasing the size of a small drawing to poster size.)
The current method of using vector images for display on websites involves saving a bitmap version of the original version and using that. Scalable Vector Graphics (SVG) are a relatively new format used to display vector images directly on the web (eliminating the need to create bitmap versions of them), but its use is not universal.
SVG Image Example (Open Source Initiative Logo, 04062014, property of OSI):
TRANSPARENCY
Creating an image that is partially transparent (or "see-through") for the web involves selecting one of two formats:
Transparent GIF - If the transparent part of the image has straight edges and it is 100% transparent (not semi-opaque), you can save the image as a GIF (with the transparency option selected.
PNG - If the transparent part of the image has diagonal of rounded images or if you want a semi-opaque transparency or a drop-shadow, then you need to save it as a PNG. (I simply save any image that will require transparency as a PNG.) It is worth noting that transparent PNGs are not fully supported in some older browsers, such as IE6 and earlier. You can use JavaScript to get around this, though.
Example of a PNG with transparency:
HTML5 FIGURE & FIGURE CAPTION
Images often come with captions. HTML5 introduced a new <figure> element to contain an image and its caption so that the two are associated. You can have more than one image inside the <figure> element as long as they all share the same caption. (Browsers sometimes indent the contents of the <figure> element.)
The <figcaption> element was added to HTML5 in order to allow web authors to add captios to images. Before these elements were created there was no way to associate an <img> element with its caption. Older browsers that do not understand HTML5 elements simply ignore the new elements and display their contents.
Here is the code I used to display the two images above (berry.jpg and berry.png):
IMAGES SUMMARY
- The <img> element is used to add images to a web page.
- You must always use an src attribute to indicate the source of an image and an alt attribute to describe the image's content.
- You should save images at the size you will be using them on the page and in the appropriate format.
- Photographs are best saved as JPEGs; illustrations or logos that use flat colors are better saved as GIFs or PNGs.
Tables
There are several types of information that should be displayed in grid or table fashion. For example: sports results, stock reports, train timetables, etc. When representing information in a table, you need to think in terms of a grid made up of rows and columns (a bit like a spreadsheet). We will discuss how to:
- Use the four key elements for creating tables
- Represent complex data using tables
- Add captions to tables
WHAT IS A TABLE?
A table represents information in a grid format. Examples of tables include financial reports, TV schedules, and sports results. Grids allow us to understand complex data by referencing information on two axes. Each block in the grid is referred to as a table cell. In HTML a table is written out row by row. Below is an example of the use of tables on Reuter's Global Market Data page.
BASIC TABLE STRUCTURE
The <table> element is used to create a table. The contents of the table (the HTML between the opening and closing table tags) are written out row by row. You indicate the start of each row using the opening <tr> tag. (The tr stands for table row.) It is followed by one or more <td> elements (one for each cell in that row). At the end of the row you use a closing </tr> tag.
Each cell of a table is represented using a <td> element, as mentioned above. (The td stands for table data.) At the end of each cell you use a closing </td> tag. Some browsers automatically draw lines around the table and/or the individual cells. You will learn how to control the appearance of tables later on (with CSS).
Example of a basic matrix/data table:
You can put anything in tabular form, even images:
TABLE HEADINGS
The <th> element is used just like the <td> element but its purpose is to represent the heading for either a column or a row. (The th stands for table heading.)
Even if a cell has no content, you should still use a <td> or <th> element to represent the presence of an empty cell, otherwise the table will not render correctly.
Using <th> elements for headings helps people who use screen readers, improves the ability for search engines to index your pages, and also gives you greater control over the appearance of tables when you start to use CSS.
You can use the scope attribute on the <th> element to indicate whether it is a heading for a column or a row. It can take the values row or col. (Browsers usuall display the contents of a <th> element in bold and in the middle of a cell.)
Example with table headings:
SPANNING COLUMNS
Sometimes you may need the entries in a table to stretch across more than one column. The colspan attribute can be used on a <td> or <th> element and indicates how many columns that cell should run across.
In the example below you can see a timetable with five columns; the first column contains the heading for that row (the day); the remaining four represent one hour time slots. If you look at the table cell that contains the word 'Geography' you will see the value of the colspan attribute is 2, and similarly you will note that the table cell containing the word 'Gym' has its colspan attribute set to 3. (This example looks like junk. We would use CSS to make it look good.)
SPANNING ROWS
You may also need entries in a table to stretch down across more than one row. The rowspan attribute can be used on <td> or <th> elements to indicate how many rows a cell should span down the table.
In the example below you can see that ABC is showing a movie from 6pm - 8pm, whereas the BBC and CNN channels are both showing two programs during this time period (each of which lasts one hour). (Note: This example looks like junk. We would use CSS to make it look good.)
LONG TABLES
There are three elements that help distinguish between the main content of the table and the first and last rows (which can contain different content). These elements help people who use scree readers and also allow you to style these sections in a different manner than the rest of the table.
The headings of the table should sit inside the <thead> element.
The body of the table should sit inside the <tbody> element.
The footer of the table should sit inside the <tfoot> element.
HOMEWORK 3
Part 1: Construct a web page that matches the image below exactly. Use an <h3> for the headings (Americas, Europe, and Asia Pacific). You will need three tables, each containing a <thead> and a <tbody>. Make sure you use <th> for the headings as well. When you are done, submit your file as hw3_pt1.html to the appropriate drop box.
Part 2: Find your own images for this, but make sure they are ok to use. (It is OK to use images from, say, Wikipedia, unless they say otherwise. Almost all have Creative Commons licenses.) Download six images, one of each of the following types of animal: elephant, anteater, lion, turtle, snake, and bird. Resize each image to be precisely 200 pixels high by 200 pixels wide. Then, construct a web page that matches the one below. When you're done, zip up the directory containing your web page AND your images, and submit the whole zip file to the appropriate drop box. (If you're artistic and feeling creative, it's ok to illustrate these animals in your favorite tool, such as Adobe Illustrator.)
