F27DB Introduction to Database Systems Introduction to Writing Web Pages

1
F27DB Introduction to Database Systems
Introduction to Writing Web Pages

• Monica Farrow
• monica_at_macs.hw.ac.uk
• Room EMG30
• Material available on Vision

2
A Graphical User Interface for the database

• The database management system allows us to
  define, store, update and retrieve the data using
  SQL
• We need a more user-friendly way to let anyone
  interact with the database, using forms and
  reports
• Microsoft Access allows you to create your own
  forms and reports
• With other databases, interaction with the
  database can be provided via web pages or a
  computer program such as java.

3
A complete system
Request with parametersmaybe from forms
Web Browser for external use
Server Program with Functionality Code
Response e.g. htmlfor display
Queries (e.g. SQL)
Etc
Order
Browse
Search
Management Programs (application in e.g. java
or maybe also a web app)
Data/ Success?
Data Management (updates)
Data Repository e.g. Database
Queries (e.g. SQL)
Customer e-mail
Data/ Success?
Manager Reports
4
Web servers

• When you click on a link or a submit button in a
  web page, you make a request.
• The web page that you see in reply is the
  response
• Your request is sent to the web server, which
• Receives your request
• Processes any data sent
• Generates the response.

5
Using server-side scripts
SERVER
Web Browser
XHTML containing form
XHTML PAGE
lawn_length 2.1 lawn_width 10

• SCRIPT
• receives form
• data
• processes it
• outputs XHTML

XHTML
6
Web pages in this module

• We will concentrate on interacting with the
  database via web pages
• We need to learn
• XHTML, a mark-up language, used to display
  information on a web page, including
• Forms, to insert data into the database
• Forms, to specify which details in the database
  we would like to see
• Data included in the page, to display details
  from the database
• PHP, a server side scripting language, used to
  process the request (data from web forms) and to
  generate new web pages containing the response.

7
XHTML and Markup Languages

• XHTML is a markup language
• a language for adding some annotation or markup
  to text.
• XHTML markup allows you to
• specify structure of page, (headings, paragraphs
  etc)
• define hyperlinks between documents.
• XHTML is a better version of HTML, the original
  mark-up language for web pages

8
XHTML Example
9
Tags and Elements

• HTML tags are used to mark up a page.
• Tags
• start and end with angle brackets e.g.lth1gt.
• Need a start and an end tag to mark up a region
  (match up)
• End tags have an additional /.
• lth1gt My Page lt/h1gt
• The two tags define named elements
• Above is an h1 element heading size 1
• head element gives information about page.
• body element contains content of page.

10
Empty elements

• Most elements have a start tag, a value, and an
  end tag
• E.g. lth1gtMy headinglt/h1gt
• Some elements are empty (no value needed)
• E.g. the br tag (meaning break take a new
  line)
• Either write as ltbrgtlt/brgt (people dont usually
  do this) OR abbreviate to ltbr/gt
• Other empty elements are the img and input tags

11
Useful elements, comments.

• Elements that you are likely to find essential
  include
• Headings of varying levels
• h1, h2, h3 etc
• Paragraph
• p
• Lists
• ul, li (un-ordered list, list item)
• Tables
• table, th, tr, td (table, heading, row, data)
• You can and should also add comments to your
  HTML.
• lt!-- This is a comment. --gt

12
Example.html
13
Defining hyperlinks

• Clickable links to other documents on the web can
  be defined, usually using the anchor tag ltagt
• e.g links to another page in the same folder
• lta href page2.htmlgt Next page lt/agt
• To link to a document outside the current
  folder, supply the full URL

14
URLs Uniform Resource Locators

• Links to other files are defined using URLs.
  These define precisely the location of a file,
  anywhere on the WWW.
• URLs can be relative or absolute.
• Absolute URLs give the full path to the file.
• http//www.loc/bit.html
• Relative URLs give the location relative to the
  file containing the URL. This is in the same
  folder.
• bit.html
• URLs are also referred to by the broader term
  URIs - Uniform Resource Indicators

15
Elements and Attributes

• Elements can also have attributes, giving
  additional information
• Attributes have a name and a value
• The value must be enclosed in double quotes

16
Adding multimedia etc.

• Images and other multimedia elements easily added
  to the page, e.g.,
• ltimg srcmypic.jpg altme/gt
• ltimg srchttp//www.macs../alison/mypic.jpg../gt
  
• The included image is indicated using a URL.
• Strictly you must use an alt attribute giving a
  text description of the file, for folk who cant
  access the image.
• Recent versions of HTML use the object element to
  incorporate any media object, rather than img
  (etc).

17
HTML Page Structure

• You cant use any tags anywhere on the page!
• The rules for which structures are allowed are
  well defined (as for programming languages).
• References are available http//www.w3schools.com/
  
• These state which elements are allowed within
  which other elements.
• There are loads of examples on this website too.

18
Correct XHTML

• All element and attribute names are
  case-sensitive, so the XHTML approach has been to
  define all tag names to be lowercase.
• All attribute values must be enclosed by quotes
• All elements must also be explicitly closed
• Start tags followed by values must have an end
  tag
• empty elements such as img and br can be closed
  by adding a closing slash to the start tag ltimg
  /gt and ltbr /gt.

19

• Stylesheets - Presentation

20
Managing the Presentation Stylesheets

• XHTML markup should be about the structure of a
  document, not how it should be displayed.
• Should ideally keep control of presentation
  separate
• Browsers have default styles (e.g. white
  background). To change this, use stylesheets

Content
Structure
Presentation
21
Formatting Attributes

• XHTML does not permit formatting attributes (to
  force separation of style from structure) so
  dont use deprecated attributes
• Check at http//www.w3schools.com/tags/
• Dont do this
• ltbody bgcolorbluegt
• Instead define the appearance in a separate
  stylesheet
• CSS stands for cascading stylesheets
• You could use these in a very simple way in this
  module

22
Using CSS to control presentation
Without any style information using browser
defaults
Same XHTML style specifies green background,
yellow serif header, white sans-serif paragraph
Same XHTML style specifies blue background,
white sans-serif header, yellow serif paragraph
23
CSS Stylesheets

• Stylesheets can be used to control the
  presentation.
• Main stylesheet language is CSS (Cascading
  StyleSheets).
• A stylesheet specifies how different elements
  should be displayed, e.g.

body background-color blue h1 color red
font-family times p colorwhite
24
CSS syntax

• CSS is based on simple statement
• selector property value
• E.g. p colorwhite
• Selector is (usually) name of element
• e.g. h1, body, li
• Property is something like font or color or
  alignment.
• Value is value you want that property to have,
  e.g. times,blue

25
CSS syntax continued

• You can string several selectors and property
  value pairs together, so it is a bit shorter
• To use CSS you have to look up which properties
  and values can go with which elements.
• www.w3schools.com/css/
• Browsers have default settings for all the
  selectors that you do not define

h1, h2, h3 color green font-family times
26
CSS Stylesheets the link
ltheadgt . . ltlink rel"stylesheet"
href"MyStyle.css"/gt lt/headgt ltbodygt lth1gt My
Heading lt/h1gt ltpgt Isn't it a nice page. lt/pgt
lt/bodygt
Name of css file
Content of css file
body background-color blue h1 color
red font-family times p colorwhite
27

• Validating your XHTML

This file is supplied for you, and contains the
correct declarations and validator url and
logo XHTMLTemplate.html
28
HTML and Browsers

• Browsers aim to display any version of HTML, even
  if it has errors.
• Different browsers with different settings will
  display a page differently.
• Incorrect HTML may be displayed weirdly or not at
  all in some browsers.
• Always aim to write correct XHTML, not just HTML
  that happens to display in your browser nicely.
• It might look totally different in another
  browser
• Valid XHTML can be read with a screen-reader

29
Versions of XHTML for validation

• XHTML
• Strict
• No deprecated tags, code correct
• You should aim to use this
• Transitional
• Code correct but deprecated tags allowed
• Frameset
• Code correct and using frames
• Not covered, because there are better ways of
  dividing into sections

30
Example.html

• To validate, click on images at bottom of page
• Either put file in your www folder, or use File
  upload

31
Document Type Declaration

• There are tools that allow you to validate or
  check your HTML page.
• For them to work you must make it clear which
  version of HTML you are writing!
• You can do that by adding a document type
  declaration to top of your page. E.g.
• lt!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-stri
  ct.dtd"gt

32
Character encodings

• You may also need to state what character
  encoding you are using
• For this we can add the following in the head
  element of the documentltmeta http-equivContent
  -Type contenttext/html
  charsetutf-8gt
• UTF8 (8-bit Unicode Translation Format) is a
  preferred encoding for web pages
• Variable length, consistent with ASCII

33
HTML Validators

• Once we have added these declarations, we can use
  an online HTML validator to check our document is
  quite correct.
• One validator is the W3Cs validator at
  http//validator.w3.org.
• Enter url and upload your file
• or copy/paste your file contents
• or click on validator logo in your page
• Validate frequently so that you can track down
  your errors
• Sometimes the messages arent very helpful

34
Checking that XHTML is valid
35
Can you see the errors?

• ltbodygt
• lth1gtWelcome to the first examplelt/h1gt
• ltPgt
• This is a simple page with a list
• lt/Pgt
• ltulgt
• ltligtJanuary
• ltligtFebruary
• ltligtMarch
• ltligtApril
• lt/bodygt

This browser displays it exactly as required
36
Conclusion

• Its easy to create Web pages, but its important
  to understand basis of XHTML, and ideally start
  authoring by hand using text editors.
• Use XHTML rather than HTML, for future
  compatibility
• Use styles to control presentation
• Pages that work in your browser may not work in
  someone elses!
• Validate your documents.
• If you get errors try and understand them by
  looking at XHTML references.

37
Labs

• There are no more formal lab exercises
• In the lab session next week you could
• Finish understanding how to write queries using
  gt1 table (if necessary). Answers on web soon.
• Alter the example XHTML page downloadable from
  vision
• Different data extra items in list, extra
  columns rows in table
• Different appearance
• Ask questions about the coursework

38
Next

• Forms on web pages
• Sending data to the server
• Creating a response