Hyperlinks, Images and Tables Part 2

Overview… We are going to look at… The type of Image formats used online.

Image formats There are many image formats that are used online. There is no single standard used. The web supports a wide range of formats. Images supported are controlled by the browser. If the image is not supported then don’t use it. Bitmap is not supported by all browsers. Supported by Windows Not supported by MAC, UNIX or Mobile Devices Plugins are available but why?

Image Formats We will be looking into the following formats:- Graphics Interchange Format (GIF) Joint Photographic Experts Group (JPEG/JPG) Portable Network Graphics (PNG)

Graphics Interchange Format (GIF) An important format as it illustrates many concepts used today. Originally created by CompuServe. The first major commercial on-line service in the US For many people in the UK, the first “service provider” Had its own content in terms of news groups, discussion forums etc.. It developed its own standards for communication protocols and graphics, thus the development of the GIF format CompuServe was eventually bought by America On-Line (AOL), which moved the content to the web.

GIF and Colour GIF became the de-facto standard for images on the web. Limited to 256 colours. So a conversion from 16 million colours to 256 GIF format will result in loss of colour depth. Uses dithering to create the illusion of colour depth with images of a limited colour palette. It fools the brain into thinking there is more information in the image than there really is. Defacto is something that becomes industry standards because everyone uses it like VHS, DVD, Blu Ray etc…

GIF Dithering A - The original unchanged image. B – 1 bit monochrome with dithering C – 1 – bit monochrome without dithering (loss of detail) D – 8 bit colour with dithering – speckled effect A B C D

GIF Banding Without dithering a GIF image develop harsh conditions known as banding. Original Non dithered Dithered

Interlacing When downloading an image it is usually displayed from left to right down the image. GIF images used a technique called interlacing that displays every eighth line at a time. The effect that you get is something like…

Interlacing This process is ran through over an over again until the image is complete. This allows us to see the image without downloading the whole image. This was used more frequently on a low bandwidth networks.

Transparency GIF images allow the use of a transparent background. Lets look at this image of Arabic Characters. Each character is contained on a white background that is obscuring the start background.

Transparency To prevent the obscurity of the background we can set the background to transparent. This changes the graphic so we do not see the white surrounding. This makes images more visually appealing. Be careful of which colours you use as many colours will make the picture look like its full of pinholes.

GIF Animation The GIF format provides the functionality to create a animated graphic. Here are three frames from an animated butterfly. This is created by creating individual frames and cycling through the frames to create a simple animation.

Joint Photographic Experts Group (JPEG/JPG) JPEG is a compression standard that’s best applied to photographs or complex shading/lighting effects. Stores a complete black and white version of the image and most of its colour information. This makes JPEG a “lossy” compression method. The compression removes redundant information, in this case is some of the colour information.

Joint Photographic Experts Group (JPEG/JPG) The compression process creates errors within images like…

Progressive JPEGS Progressive JPEGS also have a similar method to interlacing like in GIF which are better known as progressive files. A progressive JPEG is downloaded in sections across the image rather than start to finish. This provides the viewer with a preview of the file before downloading the whole file.

Portable Network Graphics (PNG) PNG offers a range of advantages over GIF:- Better compression 10%-30% better. Not limited to 256 colours Supports Interlacing Supports transparent colours. So why are other methods used? Not supported in older browsers. Developers prefer GIF and JPEG. Over time will replace GIF and JPEG

Embedding Images in HTML5 Using hypertext images can be embedded within HTML web pages. This is completed using the <img> tag. This will display the image like so…

Embedding Images in HTML5 Lets look at the code to upload the image…. To access this image we have moved up two layers.

Alt tag So what about someone that is visually impaired? How would they know what is being displayed? We used the alt attribute to include a text description of the image being displayed. This will be read out loud, if the user is using a speech synthesiser to aid the user identifying the image displayed.

Using Images as Hyperlinks Images can be used as links. To create this…simply place the image within the <a> tags instead of the text display to the user. This image will allow the user to navigate to IMDB to the Blade Trinity page.

HTML Tables Dynamic tables can be created within HTML. These provide a structure for displaying data in a more pleasant way. An example of a table looks like this…

HTML Tables There are multiple tags that are used in the creation of a table. <table></table> - This indicates the start and end of the table. <th></th> - This is the header of the table. <tr></tr> - Indicates a new row in the table. <td></td> -Indicates a new division within the row.

HTML Tables

Applying classes to tables There are multiple ways to style a table. We can style all tables by using the table tag within the CSS. We can create a class that we will apply to the table when we create it. To apply a class to the table, the following code would work… The class that applied will center the table in the middle of the screen.

Recap We have looked at:- Image Formats Interlacing GIF Animation JPEGS PNG Interlacing GIF Animation Embedding images in HTML5 Embedding images as links Creating Dynamic Tables

Next Week… We are going to be looking at:- Securing the channel Security Considerations Communication Authentication Authorisation Common types of attacks Injection Attacks Social Engineering Interception of data.