Introduction to XHTML
Download
Report
Transcript Introduction to XHTML
F27DB Introduction to Database Systems
Introduction to Writing Web Pages
Helen Hastie
[email protected]
Room: LT2, January 31st 2011
Material available on Vision (modified from slides by Monica
Farrow)
05/04/2016
Introduction to XHTML
1
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.
05/04/2016
Introduction to XHTML
2
A complete system today
Request with parameters
maybe from forms
Response e.g. html
for display
Search
Queries
(e.g. SQL)
Browse Order
Data
Management
(updates)
Customer
email
Manager
Reports
Introduction to Databases
Server Program
with
Functionality
Code
Data/
Success?
Management
Programs
(application in
e.g. java
or
maybe also
a web app)
Queries
(e.g. SQL)
Data/
Success?
3
Data
Repository
e.g. Database
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.
Example
05/04/2016
Internet & Communications Lecture 6
4
Using server-side scripts
Web Browser
SERVER
XHTML
containing
form
XHTML
PAGE
lawn_length
= 2.1
lawn_width
= 10
XHTML
05/04/2016
Introduction to XHTML
PHP SCRIPT
• receives form
data
• processes it
• outputs XHTML
5
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.
05/04/2016
Introduction to XHTML
6
Other ways to make websites
• WYSIWYG (What you see is what you get
code generators)
• Adobe dreamworks
• Googlesites (Free)
• Microsoft Expression web (formerly
Frontpage)
• Rapid Weaver
Also:
• Microsoft word/Excel (save as .html file)
We’re going to be using simple text editors (e.g.
Emacs)
05/04/2016
Introduction to XHTML
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
05/04/2016
Introduction to XHTML
8
XHTML: Example
<html>
<head>
<title> My Page
</title>
</head>
<body>
<h1> Welcome </h1>
<p> This is great </p>
</body>
</html>
Uses Tags:
html head
05/04/2016
title
body
Introduction to XHTML
h1
p
9
Tags and Elements
• HTML tags are used to mark up a page.
• Tags
• start and end with angle brackets e.g.<h1>.
• Need a start and an end tag to mark up a region
(match up)
• End tags have an additional “/”.
• <h1> My Page </h1>
• 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.
05/04/2016
Introduction to XHTML
10
Empty elements
• Most elements have a start tag, a value, and
an end tag
• E.g. <h1>My heading</h1>
• Some elements are empty (no value needed)
• E.g. the br tag (meaning ‘break’ – take a new line)
• Either write as <br></br> (people don’t usually do
this)
OR abbreviate to <br/>
• Other empty elements are the img and input
tags
05/04/2016
Introduction to XHTML
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.
• <!-- This is a comment. -->
05/04/2016
Introduction to XHTML
12
Example.html
05/04/2016
Introduction to XHTML
13
Defining hyperlinks
• Clickable links to other documents on the web
can be defined, usually using the anchor tag
<a>
• e.g links to another page in the same folder
<a href = “page2.html”>
Next page </a>
• To link to a document
outside the current folder,
supply the full URL (Uniform
Resource Locator)
Useful info on
this page
Next page
05/04/2016
Introduction to XHTML
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
05/04/2016
Introduction to XHTML
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
<table border = “1” >
..
</table>
<a href=“http://…” > link </a>
05/04/2016
Introduction to XHTML
16
Adding multimedia etc.
• Images and other multimedia elements easily added to
the page, e.g.,
<img src=“mypic.jpg” alt=“me”/>
<img src=“http://www.macs../~alison/mypic.jpg”../>
• You can change the size:
• <img src=”mypic.jpg" width="200" height="150”/>
• You can create space between the image and
surrounding text by defining vertical and horizontal
space like so:
• <img src="image.jpg" vspace="5" hspace="10”/>
• You can use the align attribute to position the image
(options: left, right, top, middle, bottom, absmiddle,
absbottom, baseline, texttop)
• <img src="image.jpg” align="left”/>
05/04/2016
Introduction to XHTML
17
Adding multimedia etc.
• Strictly you must use an “alt” attribute giving
a text description of the file, for folk who
can’t access the image.
• <img src=“mypic.jpg” alt=“myname”/>
• Recent versions of HTML use the object
element to incorporate any media object,
rather than img (etc).
05/04/2016
Introduction to XHTML
18
HTML Page Structure
• You can’t 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.
05/04/2016
Introduction to XHTML
19
Correct XHTML
• All element and attribute names are casesensitive, 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: <img />
and <br />.
05/04/2016
Introduction to XHTML
20
Stylesheets - Presentation
05/04/2016
Introduction to XHTML
21
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:
Content
Structure
My heading
<h1> My ..
Presentation
My heading
• Browsers have default styles (e.g. white
background). To change this, use stylesheets
05/04/2016
Introduction to XHTML
22
Formatting Attributes
• XHTML does not permit formatting attributes
(to force separation of style from structure)
so don’t use deprecated attributes
• Check at http://www.w3schools.com/tags/
• Don’t do this:
<body bgcolor=“blue”>
• 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
05/04/2016
Introduction to XHTML
23
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
05/04/2016
Introduction to XHTML
24
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 {color:white}
05/04/2016
Introduction to XHTML
25
CSS syntax
• CSS is based on simple statement:
• selector {property: value}
• E.g. p {color:white}
• 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
05/04/2016
Introduction to XHTML
26
CSS syntax continued
• You can string several selectors and property
value pairs together, so it is a bit shorter:
h1, h2, h3
{color: green; font-family: times}
• 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
05/04/2016
Introduction to XHTML
27
CSS: Stylesheets – the link
<head> . .
<link rel="stylesheet" href="MyStyle.css"/>
</head>
<body>
Name of css file
<h1> My Heading </h1>
Content of css file
<p> Isn't it a nice page. </p>
</body>
body {
background-color: blue}
h1 {color: red;
font-family: times}
p {color:white}
05/04/2016
Introduction to XHTML
28
Validating your XHTML
This file is supplied for you, and contains the
correct declarations and validator url and logo
XHTMLTemplate.html
05/04/2016
Introduction to XHTML
29
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
05/04/2016
Introduction to XHTML
30
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
05/04/2016
Introduction to XHTML
31
Example.html
• To validate,
click on
images at
bottom of
page
• Either put
file in your
www folder,
or use File
upload
05/04/2016
Introduction to XHTML
32
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.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
05/04/2016
Introduction to XHTML
33
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 document:
<meta http-equiv=“Content-Type”
content=“text/html; charset=utf-8”>
• UTF8 (8-bit Unicode Translation Format) is a
preferred encoding for web pages
• Variable length, consistent with ASCII
05/04/2016
Introduction to XHTML
34
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 W3C’s 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 aren’t very helpful
05/04/2016
Introduction to XHTML
35
Checking that XHTML is valid
05/04/2016
Introduction to XHTML
36
Can you see the errors?
<body>
<h1>Welcome to the first
example</h1>
<P>
This is a simple page with a list
</P>
This browser displays it
exactly as required
<ul>
<li>January </li>
<li>February </li>
<li>March </li>
<li>April </li>
</ul >
</body>
05/04/2016
Introduction to XHTML
37
Conclusion
• It’s easy to create Web pages, but it’s
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 else’s!
• Validate your documents.
• If you get errors try and understand them by
looking at XHTML references.
05/04/2016
Introduction to XHTML
38
Today’s Labs
• Save example.htm from Vision into your
~/www directory
• Now you can go to
http://www.macs.hw.ac.uk/~username/example.htm
• Alter the page:
• Different data – extra items in list, extra columns & rows in
table
• Different appearance
• Validate the website
• Copy example.htm to index.htm. This will give you your
own homepage
• http://www.macs.hw.ac.uk/~username
• Add a picture, text, links to your favourite websites, link to
your CV.
• Great for job hunting!
05/04/2016
Introduction to XHTML
39
Also
• Make sure finished all MySQL exercises on
how to write queries using >1 table (if
necessary). Answers on web soon.
• Ask questions about the coursework
Next Time:
• Forms on web pages
• Sending data to the server
• Creating a response
05/04/2016
Introduction to XHTML
40