Maintaining Personal Web Pages 1

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

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 next week)

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: www.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 – Use of graphics Many websites today have: Animations, adverts, sound, ‘rollover’ effects Performs the same roles as text-based sites Which may take longer to load May not be accessible to visitors with older browsers or without the Flash addon May not be properly indexed by search engines Animations, adverts, sound, ‘rollover’ effects are not really necessary for an academic home page Example of good use of ‘graphics’: 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. Freely available editors include: Windows Notepad Textpad Notepad++ Microsoft Expression Web 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 Design and Web Premium CS6 , Adobe Dreamweaver CS6, 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 left pane is some simple HTML (Hypertext markup language): <!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 right pane. But to say something about HTML first…

Light introduction to HTML 2 HTML is currently at version 5, introduced in 2012. HTML 5 introduces elements and attributes required for modern web sites, by focusing on audio and video objects. In this course we are focusing on simple, entry-level HTML. Therefore any pages you write should appear, or render, the same in any browser. Browser compliance is a perennial problem for web designers despite the use of CSS.

Light introduction to HTML 3 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 left pane, and display it in the right pane (or top and bottom panes respectively), …

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. This is a convention. 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

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" />

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

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

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 Where all of this going: a word about current trends in web page design

Maintaining Personal Web Pages 1