for archivists 8/9/2010

Download Report

Transcript for archivists 8/9/2010 

EABH SUMMER SCHOOL
Web Page Construction
Andy Dawson
Department of Information Studies, UCL
Andy Dawson– University College London
1
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
2
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
3
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
4
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
5
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
6
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
7
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
8
Format and syntax of XHTML tags
• XHTML tags identified by pointed brackets
e.g. <...>
• Tags come in pairs or are “empty”, lowercase
e.g. <h1>......</h1>, <br />
• Tags may have attributes which condition or
modify their effects
e.g. <a href=“filename”>..... </a>
<a name=“marker”>..... </a>
• Unknown tags are ignored
Andy Dawson– University College London
9
Basic XHTML tags etc
• The (X)HTML document:
– The <?xml> and <!DOCTYPE> declarations and
Character Encoding information
– <Head> and <Body> elements
• Headings, stylistics and layout
– White space in XHTML (<p>, <br />)
– Heading tags (<h1> - <h6>)
– Emphasis (<b>, <i>)
Andy Dawson– University College London
10
Basic XHTML tags etc
• Lists
– Ordered (<ol>), Unordered (<ul>) and Data (<dl>)
lists
– List items (<li>)
• Links (<a>)
– Links, Anchors, relative and absolute addressing
• Images (<img />)
Andy Dawson– University College London
11
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
12