1 / 28

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

beau
Download Presentation

Maintaining Personal Web Pages 1

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 1 Martin O’Shea and Mark Levene Department of Computer Science and Information Systems 22 Feb 2011 @ 1500 - 1700

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

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

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

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

  6. How does the World Wide Web work?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related