CFT2111 Introduction to Website Development Module Leader: Matthew Mantle

CFT2111 Introduction to Website Development Module Leader: Matthew Mantle e-mail: m.e.mantle@hud.ac.uk

Today’s Lecture • Recap Question • Hyperlinks and Images

Recap Question <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Recap Question 1</title> </head> <h1>Things I Need to Learn</h1> <body> <p> <h2>Term 1<h2> </p> <ul> <li>HTML</li> <li>CSS</li> <li>Validating Webpages<li> </ul> <p>I’ll need to attend all the practical sessions and read some books about HTML and CSS if I’m going to be <em>successful</p></em> <body> </html> • This page looks okay when viewed in my web browser but has four errors in the HTML . What are they?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Recap Question 1</title> </head> <h1>Things I Need to Learn</h1> h1 elements need to be in the body of the document <body> <p> <h2>Term 1</h2> Can’t nest a h2 element inside a p element </p> <ul> <li>HTML</li> <li>CSS</li> <li>Validating Webpages<li> Missing a slash on the closing li </ul> <p> I’ll need to attend all the practical sessions and read some books about HTML and CSS if I’m going to be <em>successful </p></em> em and p elements overlap <body> </html> Recap Question

Recap Questions 2) In the first week we looked a validating web pages, why do we validate our web pages?

Recap Questions 2) In the first week we looked a validating web pages, why do we validate our web pages? • It is a guarantee that our pages will work in any HTML 5 compliant browser • Our pages may look okay using IE or FF on a PC but unless they are valid HTML we don’t know if they can be understood by everyone

Hyperlinks • A link is a connection from one web resource to another • Web resource • HTML page • An image • An audio file • A video file etc. • The key to the web • Links let us ‘surf’ the web • Only one tag responsible for linking documents - The anchor tag - a

Creating Hyperlinks • Hyperlinks always have the same structure <a href="URL">link text</a> - rendered in the browser as - link text • Example <a href="http://www.hud.ac.uk"> Uni website</a> -rendered as - Uni website • The <a> works just like any other tags <p>, <h1> etc. • The href attribute specifies the URL of the page that the user will link to • URL (Universal Resource Locator) • The address of a web resource • Two types of URL, absolute and relative

Attributes • The anchor element demonstrates the use of an attribute • Attributes specify additional information for a tag • Attributes always the follow the same structure <tag attribute="value"> • Attributes, like tags are always written in lower case • The value goes in quotation marks • Here are some examples, you should be able to identify the tags, attributes and values <div id="special"> <h5 class="subhead" style="background-color:red"> <frameset rows="5" cols="2" frameborder="yes">

Using the anchor element • The anchor element can be used to mark up individual words, sentences and images • It can also be used to mark up large blocks of text • This is new for HTML 5 <p> <a href="week02/lec02.ppt">Hyperlinks and Images </a> </p> Valid - <a> is nested inside a paragraph <a href="week02/lec02.ppt"><p>Hyperlinks and Images</p></a> Also valid - the anchor element contains a <p> element (flow content)

Using the anchor element • If we have a major group of navigation options i.e. a navigation bar, we should structure this using the <nav> element • The <nav> element is new for HTML 5 • The <nav> element is important for users with disabilities e.g. using a screen reader, or navigating by tabbing • Grouping links inside a <nav> element makes them easy to skip <nav> <ul> <li><a href="home.html">Home</a></li> <li><a href="aboutus.html">About</a></li> <li><a href="products.html">Products</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </nav>

Absolute URLs • Absolute URLs specify the complete address of a web resource • http://www.mysite.com/work/test.htm • K:/Web Programming/week01/test.html • Made up of • A protocol identifier - http:// • The hostname (name of the web server) - www.mysite.com • The pathname to the specific resource - work/test.htm • Absolute URLs should only be used when linking to a separate website!!!!!!!!! • For linking pages together in the same website we should use relative URLs

Relative URLs portfolio • Relative URLs specify the location of a web resource relative to the current documents location about.htm contact.htm work pic1.htm pic2.htm pic3.htm

Relative URLs portfolio • If we wanted to create a relative link from about.htm to contact.htm we would write • <a href="contact.htm">Contact us</a> about.htm contact.htm work pic1.htm pic2.htm pic3.htm

Relative URLs portfolio • If we wanted to create a relative link from about.htm to contact.htm we would write • <a href="contact.htm">Contact us</a> • They are in the same directory(folder), we can refer to the page directly about.htm contact.htm work pic1.htm pic2.htm pic3.htm

Relative URLs portfolio • If we wanted to create a relative link from contact.htm to pic2.htm we would write • <a href="work/pic2.htm">View Image 2</a> • Look in the directory called work and then look for the file called pic2.htm about.htm contact.htm work pic1.htm pic2.htm pic3.htm

Relative URLs portfolio • If we wanted to create a hyperlink from pic1.htm to about.htm • <a href="../about.htm>About our Company</a> • The ../ means look in the directory above. The browser would look for the file about.htm in the directory above the current directory. about.htm contact.htm work pic1.htm pic2.htm pic3.htm

Relative URLs • Understanding and being able to use relative URLs is very important • Websites are often organised into separate folders for images, HTML pages and CSS • In your assessment you will be required to link pages together using relative URLs!!!!!!!!!!!!!!!! • If you use absolute URLs you will get severely penalised!!!!!!!!!!!!

Images – Image File Formats • There are lots of image file formats • The only images formats that can be inserted in a web page are GIFs, JPEGs and PNGs • GIF – Graphic Interchange Format • Limited to 8-bit, i.e. 256 colours – small file size • One colour can be designated as transparent • Can be animated • Suitable for images with a limited no. of colours • Not suitable for images with thousands of colours e.g. photographs

Images – Image File Formats • JPEG – Joint Photographic Experts Group • Lossy compression • 24-bit colour • Good for photographic images • Loss of data shows in images with large areas of flat colour • PNG (Portable Network Graphic) • Variable bit depth 8-bit or 24-bit • Lossless compression • Supersedes GIFs • A 8-bit PNG is often smaller and better quality than the equivalent .gif • Rarely a replacement for a JPEG • The 24-bit PNG is usually bigger in file size

Preparing images for inclusion in a Webpage • Common Image Editors • PhotoShop, Paint, PaintShop Pro, Fireworks • Many of these applications are complex, but.. • Using them to perform simple manipulations e.g. resizing, changing resolution, cropping etc. is fairly easy • Choosing a file format • Limited number of colours (logos, buttons etc.) • Save as a GIF or 8-bit PNG – smaller file size • Great number of colours (photographs etc.) • Save as JPEG • Many Image Editors offer a ‘save for web’ options

Look at the following images what file format (PNG or JPEG) would you choose to save each of the images as a) b) c) e) d)

Question • Look at the following images what file format (GIF, PNG or JPEG) would you choose to save each of the images as a) 8-bit PNG b) JPEG c) 8-bit PNG d) 8-bit PNG (photographic but not many colours) e) JPEG

Inserting an Image into a Webpage • Images are easy to add to a web page • The img tag is a standalone tag (like <br>) • The src attribute specifies the location of the image file to be added • The alt attribute specifies alternative text • This is used to describe the image for visually impaired users • You should always include an alt attribute <img src="URL" alt="description of image"> <img src="logo.gif" alt="company logo"> ‘One way to think of alternative text is to think about how you would read the page containing the image to someone over the phone, without mentioning that there is an image present. Whatever you say instead of the image is typically a good start for writing the alternative text.’ - http://www.whatwg.org/specs/web-apps/current-work/#alt

Image Usage • Images can be used in a variety of different ways • As a simple image • Adds information: photograph, logo, diagram etc. • As a link • Images can be used as navigation elements • Simply nest in an anchor element • As an image map • A single image with multiple ‘hotspots’ …. <a href="home.htm"><img src="logo.gif" alt="company logo"></a>

Resizing Images • Bitmap Images resize badly • E.g. a stored image 2 pixels by 2 pixels displayed at a size of 4 pixels by 4 pixels • Have to guess what the extra pixels will look like • Display each pixel 4 times • Interpolating calculating the difference between adjacent pixels • Loss of quality – pixelation, distortion • Never use the width and height attributes to resize an image!!!!!!! • Use an image editing application instead! • But it is a good idea include the width and height attirbutes • But they must be set to the actual size of the image • They allow the browser to layout the page while waiting for the image to download <img src="logo.gif" alt="company logo" width="200" height="250" >

Video • Before HTML 5 there were a number of problems integrating video into a web page • No standard way to embed video in a webpage • Dependant on 3rd party plug-ins e.g. Flash, RealPlayer, QuickTime • Users need to install the plug-ins • We were reliant on the <object> tag to embed the media • Messy … <object type="application/x-shockwave-flash" data="filename.swf" width="470" height="73"> <param name="movie" value="filename.swf" /> <param name="FlashVars" value="playerMode=embedded" /> </object>

Video • The <video> tag is new to HTML 5 • It works in a very simple way • We can specify attributes e.g. controls, autoplay to affect how the video is played <video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls> </video> • It should be easy to embed video using HTML 5 • However not all browsers support the same video formats

Video Codec Support • H.264 (MPEG-4 Advanced Video Coding) • Supported by Safari, Chrome, iPhone, Android, IE 9 • Theora • Supported by Firefox, Chrome, Opera • WebM • Supported by Chrome, Opera and upcoming versions of Firefox and IE • There is no single video format that will work in all browsers! • There is a very good article on HTML 5 video at http://diveintohtml5.org/video.html • Explains in detail about different codecs and how to integrate video in a range of browsers.

Playing Video Cross browser • We can use the source tag to specify the video source • By providing multiple source tags we can deliver video in several different formats <video width="640" height="360" controls> <source src="testvid.mp4"> <source src="testvid.ogv"> </video> • We should always specify mp4 first as the iPad only recognises the first source element

Audio • Audio works in a very similar way to video <audio controls autobuffer> <source src="track1.ogg" /> <source src="track1.mp3" /> </audio> • We have an <audio> tag and <source tags • We have the attributes controls, autoplay, autobuffer and loop • We also have the same problems of cross browser support • Safari, Chrome, IE9 support mp3 • Firefox + Chrome support Ogg(vorbis) • But we can specify multiple source tags to deliver video cross browser

Practical Session • Hyperlinks and Images • Next week • CSS – adding some colour to our web pages

CFT2111 Introduction to Website Development Module Leader: Matthew Mantle