Andy Dawson– University College London 1 EABH SUMMER SCHOOL Web Page Construction Andy Dawson Department of Information Studies, UCL

Andy Dawson– University College London 2 WELCOME! A bit about me A bit about you! A bit about what we’ll be doing today: –Some basic considerations for web pages –How webpages work –LOTS OF PRACTICAL WORK! Minor timetable change The workbook and appendices

Andy Dawson– University College London 3 What is a web page? Essentially, a file of plain text, divided into –Data (content) –Instructions (markup) –Content can consist of –basic data (e.g. textual content) –pointers to further data (e.g. hypertextual links) –program instructions to manipulate data (e.g. scripts) Instructions are INTERPRETED by a client browser in order to present the data to the user on their system

Andy Dawson– University College London 4 Approaches to webpage creation Write native code unaided Convert from existing material Use editor programs Use web development environments/tools –Pros and cons “Borrowing” from others –Copyright issues –Linking or passing off?

Andy Dawson– University College London 5 What makes a good website? Good points? Bad points? Think of your own experiences Don’t forget what’s really important!

Andy Dawson– University College London 6 Page and Graphic design Natural tendencies of designers WYSINWTG Relative benefits of artistic & technical design Form, content and structure Remember your –purpose –audience –degree of control

Andy Dawson– University College London 7 Structural and Site design Terminology: –Page, Document, Site Importance of good structure Common document structures Storyboarding and structural preparation Arranging documents within sites Aim for ease of navigability, ease of use and speed of download

Andy Dawson– University College London 8 Introduction to (X)HTML What is HTML? Structural definition vs page layout The concept of tags HTML functions Versions of HTML, XHTML and XML Editors, converters and other HTML tools

Andy Dawson– University College London 9 Format and syntax of XHTML tags XHTML tags identified by pointed brackets e.g. Tags come in pairs or are “empty”, lowercase e.g , Tags may have attributes which condition or modify their effects e.g Unknown tags are ignored

Andy Dawson– University College London 10 Basic XHTML tags etc The (X)HTML document: –The and declarations and Character Encoding information – and elements Headings, stylistics and layout –White space in XHTML (, ) –Heading tags ( - ) –Emphasis (, )

Andy Dawson– University College London 11 Basic XHTML tags etc Lists –Ordered ( ), Unordered ( ) and Data ( ) lists –List items ( ) Links ( ) –Links, Anchors, relative and absolute addressing Images ( )

Andy Dawson– University College London 12 Basic XHTML tags etc Lots more in the handbook – –Image maps –Tables –Forms –Frames And especially –Stylesheets – “controlling” look and feel with style But that’s enough for now!

Andy Dawson– University College London 13 That’s it for theory today... Now off to practical work! You can mail me at