Maintaining Personal Web Pages 1

Maintaining Personal Web Pages 1 Martin O’Shea and Mark Levene Department of Computer Science and Information Systems 22 Feb 2011 @ 1500 - 1700

Overview of the course Week 1 • What is a web page, and why do you need one? • Introduction to HTML • Structuring text • Adding links and images to your pages • Build and publish a home page Week 2 • Cascading style sheets (CSS) • Web visibility - getting your page noticed • Accessibility issues • Some examples of dynamic page content

First things first: What is a web page? • A basic web page is just a file of plain text (in HTML) on a computer somewhere <HTML> <HEAD> <title>Mark Levene's Home Page</title> </HEAD> <BODY BGCOLOR="#ffffff"> <IMG SRC="mark3_trails.jpg" ALT="Mark Levene"> <H1>Mark Levene</H1> <P> Professor of Computer Science ... </BODY> </HTML>

What is a web site? • A basic website is a collection of text files (HTML web pages) on a computer somewhere • The pages can be organised hierarchically in a file system, and this gives the web site structure • More ‘advanced’ websites are based on a database or active web pages, to give dynamic content (briefly covered on this course)

URLs – Uniform Resource Locators • A URL is the address of a resource on the internet • E.g. http://www.dcs.bbk.ac.uk/~mark • http is the protocol (others: ftp, mailto, file) • www.dcs.bbk.ac.uk is the domain name • ~mark is the path to the resource. • The query string follows a ? to run a script (dynamic URL) e.g. • http://www.google.com/search?q=url

How does the World Wide Web work?

The function of your web page • We assume your web page will describe the following: • Contact details • Activities/research interests • Information dissemination • Publicity • Starting point for browsing • Commercial sites will differ considerably

Personal web page components • Does anyone already have a home page? • Example: Mark’s home page www.dcs.bbk.ac.uk/~mark • Personal details and photo • Short biography • Recent events – past and future • Headings to various activities – research, teaching, … • Personal but public material • A web page should be dynamic and up-to-date!

Template 1 – Mark’s home page • We have seen it already: ww.dcs.bbk.ac.uk/~mark • Plain, clearly structured text • A couple of images • Plenty of categorised links to browse • Regularly updated with current content and links • Simple and effective academic web page and home page

Template 2 – Martin’s home page • http://www.dcs.bbk.ac.uk/~martin/ • Very different to Mark’s page and with far fewer links • Uses a cascading style sheet (CSS) to apply formatting to text • Probably not 100% HTML compliant • Fine for the purposes of information dissemination and publicity, but rather static

Template 3 – “Weblog” style • http://schwitzsplinters.blogspot.com/ • Some fixed links to permanent information • Regular updates in the form of ‘posts’, ordered by date of posting • Links to the ‘archive’ of older posts • Good if you have regular news or lots to say! • Supported by specialist ‘blogging’ software tools, which provide a web-based interface for updating the site

Template 4 – Flash and graphics • http://www.denofgeek.com/ or other media sites • Animation, sound, ‘rollover’ effects • Performs the same roles as text-based sites • May take longer to load • Will not be accessible to visitors with older browsers or without Flash • May not be properly indexed by search engines • Flash is not really necessary for an academic home page • Example of ‘good Flash’: http://www.tfl.gov.uk/tfl/livetravelnews/realtime/tube/default.html

What can I use to write my page? • Any text editor can be used to create the HTML code for web pages, but not all editors are equal. Available editors include editors include: • Windows Notepad • Textpad • Notepad++ • But we are going to be using the popular WSYIWYG application Dreamweaver because it has many features other editors lack.

Where can I find Dreamweaver? • You can find Dreamweaver on your PCs via the Windows menu icon (at the bottom left of the screen)  All programs  Adobe Web Standard 4 , Adobe Dreamweaver, from the Windows menus • When you open Dreamweaver, and select Create New  HTML, a window with two ‘panes’ appears

Light introduction to HTML 1 • The text in Dreamweaver’s upper pane is some simple HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> </body> </html> • This code is just to define a page. And you see nothing in the bottom pane. But to say something about HTML first…

Light introduction to HTML 2 • HTML documents are made up from nested elements, which are shown with tags: • Tags describe parts of a document • Start: <tagname> End: </tagname> • Some tags are ‘self-closed’: <tagname /> • Tags can be used to specify both structure (e.g. <p>…</p>) for a paragraph and formatting (e.g. <b>…</b>)for bold text) • In Dreamweaver, you define your page in the top pane, and display it in the bottom pane, as we see here…

Light introduction to HTML 3 • In this graphic, a pair of <h1> tags have been used to define this course’s title: • See the ‘HTML Reference sheet’ for other common tags

Where is the web page in my folder? • Your ‘live’ site is the folder public_www on hermes (the H: drive) • You should develop pages for your site in some other folder (e.g. H:\my-website), and make pages ‘live’ only when they are ready • Your home page should ideally be called index.html • File names should contain no spaces

How do I publish my page? • Publish the page by simply ‘cutting and pasting’ it to public_www. • As soon as the page is in the public_www folder it is live and available to the world! • The URL to access your site will be http://www.dcs.bbk.ac.uk/~username • To demonstrate…

Adding images to your home page • Images in GIF or JPEG format are most widely used on the WWW, but also PNG • Try to keep image files as small as possible – they add download time to pages (with today’s fast internet connections this is less of a problem, but still…) • Use the self-closed <img> tag to add images: <imgsrc="images/logo.gif" alt="logo" /> • To demonstrate…

Adding hyperlinks to your pages 1 • Hyperlinks are added using the anchor tag <a> • Hyperlinks can link to any page on the internet • <a href="http://www.w3.org">World Wide Web Site</a> • Website URL Text on page describing link • Links using the full URL (beginning with “http://”) are called absolute links • Use these for linking to other (external) websites • Can also be used to display graphics as well

Adding hyperlinks to your pages 2 • For linking pages within your own site you should always use relative links: • <a href="research.html">My Research</a> • Relative link to Text on page describing link • another web page • in the same folder • Images can also be used instead of link text – simply put an <img> tag inside the <a> tag • To demonstrate…

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 • To ‘expose’ your pages, we can add their addresses to the course home page – please email me the addresses!

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 • To demonstrate…

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 (at least IE and Firefox)

Finding out more • W3Schools HTML tutorial:http://www.w3schools.com/html/default.asp • W3Schools HTML/XHTML tags reference:http://www.w3schools.com/tags/default.asp • There are thousands of web pages offering advice, tutorials and free resources (graphics, etc.) for building web pages (For Dreamweaver support and training see: http://www.adobe.com/products/dreamweaver/) • Books: there are hundreds! See what your college library has available under ‘HTML’

Practical after the break The handout gives full instructions: • Log in to the system with your new username • Create a home page (index.html) • Add relevant details about yourself • Add images and links to other pages • Publish the page on the WWW

What to expect next week… • Basic principles of CSS • Layout and formatting using CSS • Add formatting to your web page • Visibility of a web page (how to get highly ranked on search engines) • Accessibility issues • Some simple examples of dynamic page content

Maintaining Personal Web Pages 1