The following charts are for copying and displaying.

The following charts are for copying and displaying.

-

Documents
50 pages
Lire
Le téléchargement nécessite un accès à la bibliothèque YouScribe
Tout savoir sur nos offres

Description

  • expression écrite - matière potentielle : behaviour
66 Ha ndwriting JOUIF4PVUIVTUSBMJBO$VSSJDVMVN £ Ó £ Ó The following charts are for copying and displaying. Appendix 2a Graphological approach Appendix 2b Capital letters Appendix 2c Foundation script letters and numerals Appendix 2d Letters with links Appendix 2e Larger letters for laminating Appendix 2f Appropriate sitting position Charts
  • international handwriting trends
  • copperplate
  • following charts
  • print script
  • let ters with links
  • upright shapes
  • cursive forms
  • styles
  • capital letters
  • schools

Sujets

Informations

Publié par
Nombre de visites sur la page 34
Langue English
Signaler un problème




XHTML and CSS Computing

Services













© Computing Services
Queen Mary
University of London
David Goddard
Permission to use material in
Computing Services this document for any
purpose other than personal Queen Mary, University of London
use should be obtained from
d.lexton@qmul.ac.uk
Updated: 1 Mar 2005

1. XHTML essentials................................................................................... 6
1.1. Copying the exercises files to My Documents................................... 6
1.2. Labelling an XHTML element............................................................ 6
1.3. Correcting some HTML examples..................................................... 6
1.4. White space in XHTML documents................................................... 7
2. A complete XHTML document............................................................... 8
2.1. DOCTYPEs....................................................................................... 8
2.2. Use Notepad to create a template XHTML document....................... 8
2.3. Previewing the document in Firefox .................................................. 9
2.4. Validating your document.................................................................. 9
2.5. Marking your template document as read-only ............................... 10
2.6. Comparing HTML 4 and XHTML..................................................... 10
2.7. Using tools to automate the conversion process............................. 10
3. Writing structural XHTML - 1............................................................... 12
3.1. Categorising elements as block-level or inline ................................ 12
3.2. Identifying mistakes in HTML .......................................................... 12
3.3. Using the HTML elements in a document ....................................... 13
3.4. Visiting the HTML specification ....................................................... 14
4. Writing structural HTML - 2 ................................................................. 15
4.1. Lists................................................................................................. 15
4.2. Tables ............................................................................................. 16
5. Using CSS in XHTML documents 18
5.1. Writing and linking to your first CSS style sheet.............................. 18
5.2. Linking to a print style sheet............................................................ 19
5.3. Embedding styles in the <head> element ....................................... 19
5.4. Embedding styles inside individual HTML elements ....................... 19
6. Selectors ............................................................................................... 21
6.1. Copying the exercises files to My Documents................................. 21
6.2. Which elements do these selectors apply to? 21
6.3. Which rule wins? ............................................................................. 23
7. Box model............................................................................................. 25
7.1. Label a box...................................................................................... 25
7.2. Adding margins using CSS ............................................................. 25
7.3. Adding borders using CSS.............................................................. 26
7.4. Adding padding using CSS 27
XHTML and CSS 3
Computing Services, Queen Mary, University of London 7.5. Adding borders to an inline element................................................ 27
8. Text and fonts....................................................................................... 28
8.1. Setting the font-family ..................................................................... 28
8.2. Font size.......................................................................................... 29
8.3. Text appearance ............................................................................. 30
8.4. Link styling ...................................................................................... 31
9. Backgrounds ........................................................................................ 33
9.1. Background colours and images..................................................... 33
9.2. Adding corners................................................................................ 34
10. Positioning 36
10.1. Resizing elements ....................................................................... 36
10.2. Relative positioning ..................................................................... 37
10.3. Absolute positioning .................................................................... 37
10.4. Fixed positioning.......................................................................... 39
10.5. Three columns with absolute positioning..................................... 40
10.6. Box width problem 41
11. Resources for XHTML and CSS course.......................................... 43
11.1. Further study ............................................................................... 43
11.2. Books........................................................................................... 43
11.3. Firefox.......................................................................................... 43
11.4. Specification, validation and tools................................................ 44
11.5. Accessibility................................................................................. 44
11.6. Online guides, tutorials, advice.................................................... 44
12. Appendix 45
12.1. Getting Firefox and some useful extensions................................ 45
12.2. Rules for writing XHTML.............................................................. 45
13. Answers............................................................................................. 47
13.1. Answers to 1.2 Labelling an XHTML element.............................. 47
13.2. Answ3 Correcting some HTML examples....................... 47
13.3. Answers to 1.4 White space in XHTML documents..................... 47
13.4. Answers to 3.1 Categorising elements as block-level or inline .... 47
13.5. Answ2 Identifying mistakes in HTML.............................. 47
13.6. Answers to 4.1 Lists .................................................................... 48
13.7. Answers to 5.4 Embedding styles inside individual HTML elements
48
XHTML and CSS 4
Computing Services, Queen Mary, University of London 13.8. Answers to 6.2 Which elements do these selectors apply to?..... 49
13.9. Answ3 Which rule wins?................................................. 49
13.10. Answers to 7.1 Label a box ......................................................... 50

XHTML and CSS 5
Computing Services, Queen Mary, University of London 1. XHTML essentials
In this section you will:
• Copy the exercise files to My Documents
• Label an HTML element
• Correct some HTML examples
• Investigate white space in HTML documents
1.1. Copying the exercises files to My Documents
In this exercise you will copy the files needed for exercises in this course to your My
Documents folder. You can also download a Zip file containing all the exercise for
this part of the course documents from:
http://www.css.qmul.ac.uk/training/manuals/CourseFiles/XHTML1.zip
1. On the Windows desktop, open the Shortcut to STU (H) folder
2. Click on the XHTML1 folder and choose Edit > Copy (Ctrl + C)
3. On the WiMy Documents folder
4. Paste the XHTML1 folder into My Documents by choosing Edit > Paste (Ctrl + V)
During this course please keep all the documents and files you create or edit inside
this XHTML1 folder in My Documents
1.2. Labelling an XHTML element
Label the following diagram, using the following words:
end tag, contents, start tag, h1 element, attribute




<h1 class=”toc”>Forest elephants</h1>




See page 47 to check your answers.
1.3. Correcting some HTML examples
Correct the mistakes in these HTML examples so that they obey all the rules of
XHTML. Remember:
• Every start tag requires a corresponding end tag
• Empty tags need a slash (/) in them
XHTML and CSS 6
Computing Services, Queen Mary, University of London • All tags and attribute names are in lower case
• All attributes must be quoted
• Replace special characters:
o < with &lt;
o > with &gt;
o & with &amp;
o " with &quot;
1. <P>In this section we'll discuss some points.
<P>Furthermore, we must note many other things.
....................................................................................................................................
.......
2. <p>Here is a point with <em>emphasis</p></em>
.......
3. <p>The good <br> The bad <br> And the ugly</p>
.......
4. <p>Shakespeare's "Romeo & Juliet"</p>
....................................................................................................................................
5. <img SRC=bill.jpg alt="The cover of "Romeo & Juliet" />
.......
.......
Check your answer on page 47.
1.4. White space in XHTML documents
Compare these two XHTML elements
1. <p>In this section we discuss the lesser known forest elephant</p>
2. <p>In this section
we discuss the lesser known
forest elephant</p>

What difference would you expect to see when you viewed these two HTML
elements using a web browser
..........................................................................................................................................
Check your answer on page 47.
XHTML and CSS 7
Computing Services, Queen Mary, University of London 2. A complete XHTML document
In this section you will:
• Create a template XHTML document
• Use the Firefox web browser to preview the template document
• Validate the XHTML document
• Compare HTML 4 and XHTML versions of a document
• Learn about some of the tools that you can use to automate the conversion process
2.1. DOCTYPEs
Remember that there are three valid DOCTYPES in XHTML
• Strict - no presentational elements or attributes
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• Transitional - presentational elements and attributes allowed
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• Frameset - same as Transitional but framesets also allowed
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
To save typing, these DOCTYPEs can be copied from the W3C website at:
http://www.w3.org/TR/xhtml1/#strict
2.2. Use Notepad to create a template XHTML document
In this exercise you will create a template XHTML document that you can use as a
basis for all subsequent XHTML documents. This document will use the Transitional
DOCTYPE which allows user presentational tags and attributes as required.
1. Start Notepad by choosing Start > Programs > Accessories > Notepad
2. Enter the text in Figure 1 (over page) to create your template XHTML document.
If you don’t want to type all this in, there is a finished document at
XHTML1/complete/template.html
XHTML and CSS 8
Computing Services, Queen Mary, University of London <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Untitled document</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>Hello world</p>
</body>
</html>
Figure 1 - A template XTHML Transitional document
3. Save the document in the XHTML1 folder of My Documents as template.html
2.3. Previewing the document in Firefox
Firefox is a standards compliant web browser that runs on most operating systems
(Windows, Mac OS X, Unix). It is very customisable and we will be using several of
these customisations, or ‘extensions’, during this course in order to learn about
XHTML and CSS.
One Firefox extension you will use is the Web Developer Toolbar (see Figure 2)
Figure 2 - The Web Developer Toolbar
1. Start the Firefox web browser by choosing Start > Programs > Mozilla Firefox
> Firefox
2. Open your HTML document by choosing File > Open File (Ctrl + O) and
selecting My Documents/XHTML1/template.html
3. Firefox will display your template document, which at the moment consists of
only one “Hello World” paragraph.
2.4. Validating your document
Manually validating your document
To check your template document is valid you will use the W3C validator website to
validate your document.
1. Open a new tab in the Firefox web browser by choosing File > New Tab (Ctrl +
T)
2. In the address bar enter the address for the W3C validator service
http://validator.w3.org/
3. In the Validate by File Upload box click on the Browse... button
4. Choose My Documents/XHTML1/template.html and click Open
5. Click on the Check button. You should get back a page congratulating you on a
valid document.
XHTML and CSS 9
Computing Services, Queen Mary, University of London If there are any errors reported, try to correct them, save the document and try
revalidating it.
6. Close the tab with the validation results by choosing File > Close Tab (Ctrl + W)
or right-click over the tab and choose Close Tab
Using the Web Developer Toolbar to validate your document
The Web Developer Toolbar can speed up the validation process by automatically
submitting the document you are viewing to the validation service.
1. Make sure you are looking at your template document in Firefox.
2. On the Web Developer Toolbar click on the Tools button and select
Validate Local HTML (Ctrl + Shift + A).
A new tab will open with the validation results.
3. Close the tab by choosing File > Close Tab (Ctrl + W)
2.5. Marking your template document as read-only
Having created a template XHTML document you may want to write-protect it so that
you don’t accidentally edit it and/or overwrite it.
1. From the Windows desktop open My Documents and then the XHTML1 folder
2. Right-click over template.html and choose Properties
3. In the Attributes section at the bottom, check the Read-only box. Click OK.
2.6. Comparing HTML 4 and XHTML
There are two HTML documents on the next page. Both would look identical when
viewed through a web browser, but one is valid HTML 4 and the other is valid
XHTML.
1. Compare the two documents on the next page. Using these documents as a guide,
try to make a list of the rules for writing an XHTML document.
2. See page 45 for a list of the rules for writing XHTML.
The documents are also available in the XHTML/complete folder as
validhtml4.html and validxhtmltransitional.xhtml
2.7. Using tools to automate the conversion process
If you own a copy, Dreamweaver can automatically convert a document to XHTML.
Choose File > Convert > XHTML. It will always add the optional XML prolog
which you will have to remove manually to accommodate Internet Explorer 6.
A free command line tool is also available called HTMLTidy
http://tidy.sourceforge.net/ that can convert HTML documents to XHTML.
Several graphical user interfaces are available for HTMLTidy.

XHTML and CSS 10
Computing Services, Queen Mary, University of London