1 / 19

Enhancing Web Page Visibility and Accessibility through Linking and CSS

This guide explores critical aspects of web page design, focusing on the importance of linking, browser compatibility, and accessibility. It emphasizes how linking can enhance visibility, helping users discover pages through search engines and other sites. The document also introduces cascading style sheets (CSS) as a method to separate content from presentation, promoting better accessibility for users with disabilities. Practical exercises illustrate CSS syntax, linking stylesheets, and use of class selectors to apply varying styles efficiently across web elements.

vidar
Télécharger la présentation

Enhancing Web Page Visibility and Accessibility through Linking and CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Maintaining Personal Web Pages 2 Martin O’Shea and Mark Levene Department of Computer Science and Information Systems 01 Mar 2011 @ 1500 - 1700

  2. 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

  3. 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:www.dcs.bbk.ac.uk/~martin/mpwp/

  4. 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

  5. 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 • Mobiles • You should check how your site looks in a range of browsers

  6. 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!

  7. 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

  8. 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

  9. 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">

  10. Linking a stylesheet 2 • So, in Dreamweaver, the adding a CSS tag using a pre-defined stylesheet changes a page: From this: To this:

  11. 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"}

  12. 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)

  13. 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

  14. 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>

  15. <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>...

  16. 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}

  17. 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 To demonstrate a few of these…

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

  19. 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 disk as your accounts will be disabled on 01 Mar 2011)

More Related