XHTML

1
XHTML

• Week 2 - Basic XHTML programming
• Markup language
• A set of rules that defines the layout, format
  and structure of a document.
• However markup languages have existed for many
  years one of the earliest was Standard
  Generalised Markup Language (SGML)
• Basically it is the means to describe how text
  will look very much like a style sheet in Word

2
Introduction

• Week 2 - Basic XHTML programming
• XHTML EXtensible HyperText Markup Language
• Why study XHTML?
• Its forerunner HTML is the foundation for many
  Web pages.
• why not just use a XHTML/HTML code generator?
• a basic knowledge will allow effective editing.
• Existing versions of HTML include 2, 3.2, 4
• XHTML 1.0
• W3C's recommendation for the latest version of
  HTML
• combines the strength of HTML4 with the power of
  XML.

3
Historical Development of HTML

• HTML
• was intended as a language for the exchange of
  scientific and other technical documents,
  suitable for use by non-document specialists
• It specified a small set of structural and
  semantic tags suitable for authoring relatively
  simple documents
• HTML added support for hypertext
• Multimedia capabilities were added later
• no rigid programming standards apply

4
Some history of HTML development

• Earlier version of HTML (HTML 3.2 and HTML 2.0)
  offered
• text,
• multimedia, and
• hyperlink features
• HTML 4 supports
• more multimedia options,
• scripting languages,
• style sheets,
• better printing facilities, and
• documents that are more accessible to users with
  disabilities.

5
More on HTML 4

• HTML 4
• It conforms to an International Standard ISO 8879
• Was widely regarded as the standard publishing
  language of the World Wide Web.
• Problem there has been rapid invention of new
  elements for use within HTML - this has resulted
  in compatibility problems for documents across
  different platforms.
• End result is that the suitability of HTML 4 is
  limited.

6
Need for an alternative to HTML 4.0

• HTML is not applicable to a wide range of Web
  clients (TVs, fridges, PDAs, mobile phones etc).
• What was required was a basic set of HTML
  features applicable to wide range of features.

7
XML versus XHTML

• XML.
• EXtensible Markup Language.
• Extensible is that the markup symbols are
  unlimited and self-defining.
• HTML4 cannot define its own elements (tags)
• XML does allow for custom elements to be
  processed without redefining the whole DTD (style
  sheet).
• It was an attempt to separate the actual document
  to how it would be presented
• XHTML The eXtensible HyperText Markup Language.
• a reformulation of HTML 4 but written in XML 1.0
  - it looks very similar to HTML4 but the tag
  rules are stricter.
• Pages written in XHTML work well in most browsers
• Elements (tags) are almost identical to HTML.
• Will allow for use on the non-standard devices
  like fridges, AC etc

8
Definitions

• To summarise XHTML
• Has become the standard for future WWW
  applications
• Introduces more rigid programming standards
• Reformation of 3 HTML documentation types as
  applications of XML
• when a XHTML document is loaded into your browser
  - it uses the Hyper Text Transfer Protocol
  (HTTP)
• Check how good your XHTML code is
  http//validator.w3.org/
• for conformance with W3C recommendations

9
Summary of markup languages
XHTML
XML
SGML
HTML
Reference Hughes, C. M. 2005. The Web Wizards
Guide to XHTML. Pearson Boston
10
Where do you write the XHTML code?

• So how do you do it?
• use an editor or wordprocessor - save the files
  as text
• add the extension .html e.g. homepage.html
• to open a file in MS-Explorer File, Open File
• file///C/DATA/test.html

Browser e.g. Explorer
Editor e.g Notepad
to view the saved .html file - from the menu
File, Open File
remembersave inText format with .html
11
Basic rules for XHTML

• The most important differences between HTML and
  XHTML are
• XHTML elements must be properly nested
  Not Correcte.g. ltbgtltugtJohnlt/bgtlt/ugt ltbgtltugtJo
  hnlt/ugtlt/bgt
• XHTML documents must be well-formed and nested
  within the lthtmlgt root elementlthtmlgt ltheadgt
  ... lt/headgt ltbodygt ... lt/bodygt lt/htmlgt

12
Basic XHTML rules

• Tag names (elements) must be in lowercase XML is
  case sensitive e.g. ltligt and ltLIgt are different
  tags. Therefore .
• Incorrect CorrectltA HREF lta href
• XHTML elements must be closedIncorrect Correct
  ltpgtJohn ltpgtJohn lt/pgt ltpgtMary ltpgtMary
  lt/pgtAlso- Horizontal rule - lt/ hrgt rather
  than lthrgt- Break- lt/ brgt rather than ltbrgt- ltimg
  srcjohn.jpg" altJohn Atkinson" /gt

13
Some more XHTML rules

• Attribute values must be quoted
• Incorrect Correctlttable width 100gt
  lttable width 100gt ltbody background
  john.gifgt ltbody background john.gifgt
• Attribute minimization is forbidden
• Incorrect Correctltinput readonlygt ltinput
  readonly readonlygt ltinput disabledgt
  ltinput disabled disabledgt

14
XHTML components

• an XML declaration (although depending on the
  document type this may not be essential)
• a DOCTYPE (which is like defining a style-sheet
  in a Word document)
• the element lthtmlgt must be the first one in your
  XHTML document
• the XML namespace (xmlns) and its appropriate
  value
• tags and attributes contained within the ltbodygt
  of your XHTML document.

15
Essential structure of every XHTML documents1.
XML declaration

• 1. XML declaration
• This is simply a statement to indicate that it
  is an XML application and which version it is.
  This statement is included in the very first line
  of the XHTML document.
• lt?xml version"1.0" encoding"UTF-8"?gt 

16
Essential structure of every XHTML documents2.
DOCTYPE

• A DOCTYPE is similar to the way you use a style
  sheet in Word. That is, it is a means to define
  how the overall document will appear. The DOCTYPE
  used is referred to a DTD (Document Type
  Definition) and there are three that you can
  select from either
• Strict basically follows XHTML definitions
  exactly
• Transitional allows for some flexibility
• Frameset must be used when using frames and can
  be either strict or transitional

17
Essential structure of every XHTML documents2.
DOCTYPE

• How to define the respective DOCTYPE.
• Strict
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN"    "http//www.w3.org/TR/xhtml1/DTD/x
  html1-strict.dtd"gt 
• Transitional
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN"    "http//www.w3.org/TR/xhtml1
  /DTD/xhtml1-transitional.dtd"gt 
• Framset
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Frameset//EN"    "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-frameset.dtd"gt

18
Essential structure of every XHTML documents2.
DOCTYPE

• For this subject we will require you to use the
  strict DOCTYPE
• this will mean that you will need to be very
  CAREFUL in the Web pages that you generate.
• You will use the W3C validator to check the
  quality of your XHTML code.

19
Essential structure of every XHTML documents

• lt?xml version"1.0" encoding"UTF-8"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
  1.0 Strict//EN "http//www.w3.org/
  TR/xhtml1/DTD/xhtml1-strict.dtd"gt
• lthtmlgt
• ltheadgt lttitlegtMy first HTML filelt/titlegtlt/headgt
  
• ltbodygt    My name is John Atkinsonlt/bodygt
• lt/htmlgt

20
Head tag

• ltheadgt tag
• The ltheadgt tag provides information about the
  HTML document including
• lttitlegt tag - appears at the top of the browser.
  It can be used by searching engines.
• ltmetagt tag meta data must be included in this
  section
• ltstylegt tag - specifies style sheets to be used
  with the document
• lttitlegt
• This is the homepage for Mary Smith
• lt/titlegt

21
Body tag

• Body components
• The ltbodygt tag encloses all other tags that
  create the Web page
• headings
• ordinary text
• lists
• images
• tables
• frames

22
Start tag
Content
End tag

• ltstronggtMy name is Johnlt/stronggt

Element
Reference Hughes, C. M. 2005. The Web Wizards
Guide to XHTML. Pearson Boston
23
Heading tags

• Headings
• Basic syntax
• lthngt Heading text . lt/hngt
• h1 - largest font, h6 - smallest
  font(note you can not use the ltaligngt tag in
  the strict version of XHTML)
• Spaces and new lines in your Web page
• nbsp -will force one space into HTML
  presentation (same as pressing the space bar
  once)
• ltpgt - starts new paragraph - it concludes with a
  lt/pgt (same as pressing Enter twice)
• ltbr /gt - start a new line (same as pressing
  Enter once)

24
Syntax in the BODY

• Basic Syntax placed in the BODY of your page
• ltstronggtboldlt/stronggt
• ltemgtitalicslt/emgt
• ltugtunderlinelt/ugt
• ltpregt preformatted text lt/pregt

25
font size and hr

• Horizontal rule
• Basic syntax
• lthr /gt

26
Lists

• Lists
• There are three types of lists
• ordered lists - 1,2,3,4 etc
• bullets lists
• definition lists

27
Ordered lists

• Ordered Lists ltolgt to open the list and lt/olgt
• Example 1.The items in an ordered list look
  like this. 2. It will add numbers to each
  item with a next to it
• Basic syntax ltolgt ltligt The items in an
  ordered list look like this. lt/ligt
• ltligt It will add numbers to each item with a
  next to it lt/ligt
• lt/olgt

28
Unordered lists

• Bullet or Unordered Lists ltulgt to open the list
  and lt/ulgt to close the list
• Example
• The items in an unordered list look like this.
• They have bullet points next to them.
• Basic syntax ltulgt ltligt The items in an
  unordered list look like this. lt/ligt ltligt
  They have bullet points next to them. lt/ligt
• lt/ulgt

29
Definition lists

• Definition List
• Definition Term This is the first
  definition description This is the second
  definition description Here is another
  definition list They are useful for any
  list shaped like this!
• Basic syntax
• ltdlgt
• ltdtgt Definition term lt/dtgt ltddgt This is the
  first definition description lt/ddgt ltddgt This
  is the second definition description lt/ddgt ltdtgt
  Here is another definition list lt/dtgt ltddgt
  They are useful for any list shaped like this
  lt/ddgt
• lt/dlgt

30
Nesting Lists

• ltulgt
• ltligtFirst level list item 1 lt/ligt
• ltligtFirst level list item 2 lt/ligt
• ltolgt ltligtSecond level list item 1 lt/ligt
  ltligtSecond level list item 2 lt/ligt
• ltligt Second level list item 3 lt/ligt
• ltulgt ltligtThird level list item 1lt/ligt
  ltligtThird level list item 2 lt/ligt
• lt/ulgt
• ltligtSecond level list item 4 lt/ligt
• lt/olgt
• ltligt First level list item 3 lt/ligt
• lt/ulgt

31
This is what it should look like ..

• First level list item 1
• First level list item 2
• Second level list item 1
• Second level list item 2
• Second level list item 3
• Third level list item 1
• Third level list item 2
• Second level list item 4
• First level list item 3

32
Defining a table

• Tables are 2-dimensional representations of data
  
• You need to specify the contents of the
  respective cells.
• Tables are defined within the lttablegt and
  lt/tablegt tags
• Each row in your table requires a lttrgt and lt/trgt
  tags.
• Once you have defined a row, you then define each
  of the columns with the lttdgt and lt/tdgt tags
• Also possible to define
• bordern - sets size of the table border,
  default value is 1.
• cellspacingn - sets amount of spacing within
  each table cell
• widthn - specifies the size of the table
  normally stated as a percentage.

33

• Tables are 2-dimensional lists. The format is
• lttablegt
• lttrgt lttdgt Table Entry lt/tdgt ... lttdgt Table Entry
  lt/tdgt
• lt/trgt
• lttrgt
• lttdgt Table Entry lt/tdgt ... lttdgt Table Entry
  lt/tdgt
• lt/trgt
• lt/tablegt
• lttd colspangt.... lt/tdgt,
• lttd rowspangt.... lt/tdgt

34
A another table example
35
Output from the table
36
Links

• There are four types of hypertext links
• links to other places in this document
• links to other documents on this computer
• links to documents on another computer / server
• email links
• General format
• lta href place to go gt Text to display lt/agt
• The above HTML code will look like Text to
  display

37
HTML code
Outcome of HTML in your browser
. lta href introgt1. Introductionlt/agt lta
href discussgt2. Discussionlt/agt lta name
introgtlt/agt lth2gtIntroductionlt/h2gt . lta name
discussgtlt/agt lth2gtDiscussionlt/h2gt .
1. Introduction 2. Discussion Introduction D
iscussion
38
ltA NAMEgt links

• 1. Links to other places in this document There
  are 2 steps ..
• 1. defines a hypertext link that specifies
  where you want to go within a document
• lta href Part1gtGo to part 1lt/agt
• 2. defines the place where you will jump to with
  a document when you click on the above link
• lta namePart1gt Part 1 is here lt/agt
• The sign indicates a location within a
  document and must be included.

39
HTML code index.html
Outcome of HTML in your browser
lta href results/test1.htmlgt1. Testlt/agt lta
href answers/test1ans.htmlgt2. Answerslt/agt
1. Test 2. Answers
HTML code results/test1.html
lthtmlgtltbodygt This is your test one
This is your test one
HTML code answers/test1ans.html
This is the answer to your test one
lthtmlgtltbodygt This is the answer to your test
one
40
Relative links

• 2. Links to other documents on this computer -
  Relative Linking
• Just one step is needed
• make a link to go to other document with an
  Anchor
• lta href"path/filename.html"gt anchor textlt/agt
• Examplelta href"../ass/ass1.html"gt Assignment 1
  lt/agtIf the hypertext link is clicked it will
  jump out of the current document into the file
  specified.

41
Absolute links

• 3. Link to another file on another server -
  absolute linking
• Again one step is needed
• lta href"http//server/path/filename.html"gt
  anchor text lt/agt
• lta href"http//www.csu.edu.au"gt Charles
  Sturt University lt/agt
• http// means connect to another computer

42
Links to emails

• 4. Link to email
• This creates a link that allows users to click on
  to send an email message
• lta href mailtojatkinson_at_csu.edu.augt John
  Atkinsonlt/agt will result in the following
  appearing on the screen
• John Atkinson

43
Images in a document

• Including an image in a document
• ltimg src"picture /gt
• Example a. Relative link ltimg src"CSU.gif
  /gt
• b. Absolute link
• lta hrefhttp//www.csu.edu.augt ltimg
  srchttp//www.csu.edu.au/images/11.jpg lt/Agt
• Make links relative rather than absolute (where
  possible)

44
Colours and Browsers

• Not all colours can be displayed in a browsers
  in such cases an approximation is made called
  dithering.
• Many PCs have colour table of 256, with only 216
  that can used between Macs and PCs referred to
  as the browser safe colour palette.
• These 216 colours information is specified at
• http//www.lynda.com/hex.html
• If you use one of these 216 colours it will look
  the same whether on a Mac or PC browsers.
• Excellent reference site
  http//www.webmoments.com/colors.htm
  (Color Code Converter site)

45
Backgrounds and Colours non XHTML (these must
now be defined in CSS)

• 1. Background image
• ltbody backgroundimages/image.jpg /gt
• 2. Background colour
• ltbody bgcolor"FFFFFF /gt
• 3. Body text
• ltbody text"FFFFFF"gt (default
  colour is black)

46
More on colours

• 4. Link colours
• ltbody link0080000 alinkOOFFFF
  vlinkOOFFFFgt
• What is wrong with the following?
• ltbody bgcolorXXXXXX textXXXXXX linkXXXXXX
  vlinkXXXXXXgt
• 5. Font colours to change only a portion of the
  text
• ltfont colorRRGGBB lt/fontgt

47
Meta tags

• Meta tags
• Meta data is structured data about data
• can be used either by an HTTP server or indexed
  by a search engine.
• Placed within the ltheadgt tags of the XHTML
  document.
• Should be included in all pages generated by you
  in XHTML.

48
More meta tags

• Suggested structure
• Meta tags have two attributes
• 1.the meta tag. e.g. ltmeta name"keywords"
• 2.the data or content of the tag. e.g.
  contentXHTML, syntax, tutorial"
• lt meta name"Title" content"ITC125 - The
  Information Superhighway"gt
• lt meta name"Source" content"Charles Sturt
  University"gt
• lt meta name"Description" content"A tutorial
  on how to use XHTML"gt
• lt meta name"Keywords" contentXHTML, syntax,
  tutorial"gt
• lt meta name"URL" content
  "http//life.csu.edu.au/itc125/module2/"gt
• lt meta name"Date" content"1 August 2005"gt
• lt meta name"Author" contentJohn Atkinson"gt

49
Another use of a meta tag

• To refresh your screen
• The http-equiv attribute can be used to update
  a page. In this example, the update occurs every
  thirty seconds ltmeta http-equiv"refresh"
  content"30"gt
• To redirect your screen to another location
• ltmeta http-equiv"refresh" content"5
  URLmain.html"gt

50
Comment tags

• What are comment tags?
• Basically hidden information embedded in the
  XHTML code
• Why have them?
• Used by people reading your code to better
  understand what you are trying to achieve
• What do they look like?
• You use the lt!-- to indicate the start of the
  comment and --gt to indicate the end of the
  comment, e.g.
• lt!-- This is a comment and will not be displayed
  in your browser --gt

51
More on comment tags

• Am I supposed to use comment tags?
• Yes you must use comment tags to explain the
  basics of your code
• Example
• lt!--gt The following XHTML code will create a
  table 4 rows by 3 columns lt /!gt
• or
• lt!--gt The background colour will now be light
  blue lt /!gt
• etc

52
Style Sheets

• A Cascading Style Sheet (CSS)
• separates the information or content that we are
  providing in the web page from the way we want it
  to appear on the web page (the format and the
  presentation of the information).
• The CSS is information that tells the browser
  how to display the information or content. This
  means that if you want to change the way the
  content of the XHTML file appears in the browser
  then all we need to do is to change the CSS.

53
Sheet Sheet

• A style for a web page can be defined according
  to four possible ways
• inline style (within the XHTML document)
• within the ltheadgt element of a XHTML document
• within an linked CSS file - this is a separate
  file from the XHTML document.
• by the browser (Explorer or Netscape or Mozilla)

54
1. Inline Style Sheets

• This style sheet is contained within the ltbodygt
  of the XHTML document. The inline style sheet
  uses lt rather than .
• Examples include
• ltp style "font-size 12pt"gtlth1 style
  "font-family arial font-size 20ptgtlth2 style
  "color green"gtlthr style "color blue"gt

55
2. Internal Style Sheets

• Using the strict DTD allows you to define the
  structure of the style as an internal style
  sheet.
• lthtmlgt
• ltheadgt
• ltstyle type"text/css"gt
• h3 font-family times
• p font courier small-caps times
• h1 font-style italic
• h1 font-size 150
• lt/stylegt
• lt/headgt
• ltbodygt
• lth3gt This is a paragraph in times fontlt/h3gt
• lt/bodygt

56
2. Internal Style Sheet another examples

• lthtmlgt
• ltheadgt
• ltstyle type"text/css"gt
• h1 text-align center
• p.margin margin-left 1cmlt/stylegt
• lt/headgt
• ltbodygt
• ltpgtThis is a normal paragraphlt/gt
• ltp class"margin"gt
• This is a paragraph indented 1 cm from left
  lt/pgt
• lt/body
• lt/htmlgt

57
3. Linked or External Style Sheet

• Is an external file contained data on how the
  browser should display the related Web pages.
• type of style sheet will result in your web pages
  must be linked to one of these external style
  sheet using the ltlinkgt element which must be
  placed within the ltheadgt element
  exampleltheadgt    ltlink rel "stylesheet" type
  "text/css"       href"css_master.css"
  /gtlt/headgt

58
An example of an external or linked Style Sheet

• body background-color FFFFF0 font-family
  Times font-size 16px color 00008B h1   
  font-family Arial, Verdana, sans-serif
  font-size 32px color blue h2   
  font-family Arial, Verdana, sans-serif
  font-size 24px color red hr  
  colorbrown background-colortan width90
  height2px table   font-family Arial,
  Verdana, sans-serif  font-size 18px  color
  black  margin-top 10px  margin-left 10px 
  margin-right 10px  margin-bottom 10px 
  padding-top 10px  padding-right 10px 

59
XHTML

• List of all the Schools site which illustrates
  XHTML tags
• http//www.w3schools.com/xhtml/xhtml_reference.a
  sp
• The definitive site on XHTML
• http//www.w3.org/TR/xhtml1/
• HTML validator
• http//validator.w3.org/

60
Validator

• You need to ensure that your XHTML is in the
  strict DOCTYPE.
• The W3C validator will check whether your code is
  in strict format http//www..w3c.org.
• For the correct settings for the validator
• http//life.csu.edu.au/itc125/validator/

61
Requirements for your homepage

• Requirements for your Homepage
• create your pages using a text editor (not a
  XHTML editing tool).
• Use the strict DOCTYPE.
• the start page should contain a clear statement
  that this is your home page, including your name
• there should be at least one other page in
  addition to the start page, plus a relative link
  from the start page to each other page
• you should include at least two images
• include different sized and coloured text, bold
  and italic text, and either a background image or
  a background colour
• include numbered and/or bullet lists, normal
  paragraphs, line breaks, horizontal rules and
  tables

62
ITC125 The Information Superhighway

• graphics images should be less than 100K in size
• include absolute links to pages that are part of
  other sites, with both text and images acting as
  links
• Use indentation to improve the readability of
  your XHTML code
• include comments and meta tags
• acknowledge any material that is not your own - a
  reference section must be included

63

• NOW IT IS UP TO