Maintaining Personal Web Pages 2

Maintaining Personal Web Pages 2 Martin O’Shea and Mark Levene Department of Computer Science and Information Systems 13 Feb 2013 @ 1400 - 1600

Overview for this week Week 2 • The importance of linking pages and web visibility - getting your page noticed • Browser dependence • Web page accessibility • Cascading style sheets (CSS) – introduction and practical exercise • Some examples of dynamic page content • Current trends in web page design

The power of linking • The key to people finding your page is to have other web pages that link to it: • If there are links to it then people can find it as they ‘surf’ the web • For search engines such as Google, many links in to your page means it is a popular, and therefore higher ranked, page • We can also expose your pages to the internet by linking them all to the course home page:http://www.dcs.bbk.ac.uk/~martin/mpwp_2013/mpwp.html

Navigational structure – beyond the home page • Your home page becomes the entry point to your web site when you create more pages and link to them from your home page • You could create separate pages for ‘Research projects’, ‘Publications’, etc. • You may link to pages you want to share with others, or ones you often visit • The folder structure that you save the new files in determines the URL for the page

Web browser dependence • Browsers (and other devices) differ, often greatly, in how they render web pages • Web designers spend a lot of time ensuring their sites work with a range of browsers and devices • Firefox, Internet Explorer, Opera, Safari or Chrome • PC, Mac and Unix • Printers • Mobile devices • You should check how your site looks in a range of browsers

Accessibility • Pages should be accessible to people with disabilities (sight/hearing impaired, etc.) • Assistive technologies used (screen magnifiers/readers, Braille translators,…) • Using stylesheets helps with accessibility as they separate page content from formatting • Accessible pages are good web design!

Some accessibility guidelines • Focus on text and document structure in the page itself – format using an external stylesheet to keep content and style separate • Always include alt text for images, e.g.:<imgsrc="me.jpg" alt="Picture of me" /> • Avoid using images for text, menus, etc. • If you use an image as a link, include a caption (text) that is the same link • Don’t rely on colour alone to convey information

Cascading styles sheets (CSS) • A separate text file (in CSS format), that is ‘linked’ to in the <head> of an HTML page • Styles tell the browser how to display the different elements of the page • Stylesheets separate content from style • Multiple style definitions ‘cascade’ into one • Allow you to change the formatting of many pages at once (one stylesheet whole website) • A good demonstration is available at: www.w3schools.com/css/demo_default.htm

Linking a stylesheet 1 • Stylesheets are included by using a <link> tag in the head section of an HTML page: <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> • The browser will read the file style.css and apply the styles there to the current page • CSS introduced with HTML 4, so use doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Linking a stylesheet 2 • So, using a CSS tag using a pre-defined stylesheet changes a page: To this:

Basic CSS 1 • CSS syntax consists of three parts:selector {property: value} • p{color: green}will format all paragraphs with green text • There can be multiple property:value pairs for a single selector, separated by a semi-colon • p{color: red; font-family: arial} will format all paragraphs with red Arial text • If values have multiple words, use quotes: • body{font-family: "sans serif"}

Basic CSS 2 • Put one value on each line to make your stylesheet easier to read, e.g.: body { text-align: center; color: black; font-family: arial } • You can group selectors together using a comma to separate them, e.g.: h1,h2,h3,h4,h5,h6 { color: green } • Save CSS with .css extension (e.g. style.css)

The ‘class’ selector 1 • The class selector lets you define different styles for the same type of HTML element, e.g.: p.right {text-align: right} p.center {text-align: center} • Then use the “class” attribute in your HTML: <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be centre-aligned. </p> • Only one class can be specified per element

The ‘class’ selector 2 • If you want to be able to apply a class to all elements then omit the tag name, e.g.: .center{text-align: center} • And you can then do the following: <h1 class="center"> This heading will be centre-aligned </h1> <p class="center"> This paragraph will also be centre-aligned. </p>

<span> and <div> HTML elements • These are structural HTML elements that are very useful when applying classes from stylesheets • <div> elements show sections of a page <div class="center"> <p> ... </p> <p> ... </p> </div> • <span> elements delimit fragments of a page that should have a class applied ...text <span class="bold">in bold</span>... • In HTML5, these can still be used despite newer tags like <section> and <footer>.

The ‘ID’ selector • With the ID selector you can apply the same style to named elements on different pages, e.g.: #header {color: red} • This will match any element with the ID ‘header’: <h1 id="header">Some text</h1> <p id="header">Some text</p> • This style will match a p element with id para1: p#para1 {text-align: center; color: red}

Some examples of dynamic content Dynamic content makes your page interesting for others to visit and can keep it up to date: Examples of dynamic content are: • Adding video content • RSS feeds or other dynamic content • Data sourced from a database • Use of Javascript If there is time, we will try to demonstrate a few of these…

Some current trends in web page design In this course, we can only say so much: but we can give you some ideas of future directions: • HTML 5: The newest version of HTML has many new audio and video objects to compete with the popular, but proprietary, Flash addon. • The ubiquitous growth in mobile devices and tailoring of web pages for them. • The growth in touch-screen devices and how this will affect browsing habits and interface design. • Changes in browser shares: Figures for Oct 2012 show Chrome with 37.2% of the market, IE has 26.17%, and Firefox stands at 23.18%. These figures exclude mobile browsers.

Finding out more • Web Accessibility Initiative:www.w3.org/WAI • W3Schools CSS tutorial:www.w3schools.com/css/default.asp • W3Schools CSS reference:http://www.w3schools.com/cssref/ • Various stylesheet tutorials: http://www.htmlgoodies.com/ • Dreamweaver: http://www.adobe.com/products/dreamweaver/ (Look for Support and training)

Practical after the break The handout gives full instructions: • Log in to the system with your username • Download and unzip the resource folder • Create a stylesheet to try out different styles on the sample HTML page • Add a stylesheet to your own home page AT THE END OF THE SESSION TAKE A COPY OF YOUR WEB PAGE(S) AND FILES WITH YOU Either e-mail them to yourself, or take them on a memory stick, because your accounts will be disabled after 13 Feb 2013.

Maintaining Personal Web Pages 2