Introduction to XHTML

1
Introduction to XHTML

• Prof. Rares Pateanu
• York University
• ITEC 1010-N

2
What is XHTML?

• EXtended HiperText Markup Language
• A markup language is a way to express information
  about how other information should be represented
• XHTML is the latest version of the markup
  language for representing web pages in a browser
• XHTML files are text files saved with the
  extension .html or .htm
• The simplest way to create them is to use the
  Notepad editor provided with Windows

3
Standards

• There are many versions
• HTML 1 to 4
• Proprietary extensions
• Stick to the standard to maximize the ability to
  view your page in many browsers
• XHTML is more strict
• See http//www.w3.org/TR/xhtml1/ for details
• Full online XHTML tutorial available at
• http//www.w3schools.com/Xhtml/

4
What is a Web Site?

• A Web Site is a collection of related Web Pages
  with a mechanism to go from one page to another
• How you do that is called Navigation
• Good (intuitive, logical, and easy) navigation is
  essential for a good web site
• A Web Site is identified by a Universal Resource
  Locator (URL)
• www.atkinson.yoryu.ca/pateanu
• The first Web Page of the Web Site (the one you
  see when you type in the URL) is usually known as
  index.htm

5
An XHTML Web Page
Tells the browser how characters are encoded
lt?xml version"1.0" encoding"UTF-8"?gt lt!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/x
html1/DTD/xhtml1-transitional.dtd"gt lthtml
xmlns"http//www.w3.org/1999/xhtml"
xmllang"en" lang"en"gt ltheadgt
lttitlegt The title of the web page goes here
lt/titlegt lt/headgt ltbodygt The
actual content of the web page goes here
lt/bodygt lt/htmlgt
Tells the browser what HTML version is used .
Tells the browser what nameset and language to use
Tag
End Tag
Always start with this text as a template
6
Web Page elements

• A Web Page can contain any kind of Data
• Text
• Multimedia (images, sound, video)
• Links to other parts of the page, or another page
• Graphic elements (lines, spacing, etc.)
• All this data is organized in Containers
• Frames, Tables, Paragraphs, Lists
• Containers can be nested

7
Defining Web Page elements

• Both data and containers are defined using lttaggt
  lt/taggt pairs
• E.g. ltbodygt . lt/bodygt
• Some graphic elements dont need an end tag
• ltbr/gt - this tag adds a blank line
• lthr/gt - this tag adds a horizontal line
• lt! Comment, which doesnt show on the pagegt
• We will see some more

8
Nested elements

• Web Page elements, whether Data or Containers,
  can be nested (i.e., an element can contain
  another element)
• Both lttaggt and lt/taggt of the innermost element
  must be between the lttaggt and lt/taggt of the
  outermost element
• ltheadgt lttitlegt My Title lt/titlegt lt/headgt
• ltheadgt lttitlegt My Title lt/headgt lt/titlegt

9
Text on a Web Page

• The most common forms of adding text
• Paragraph
• ltpgt text lt/pgt
• Heading
• lth1gt Heading Level 1 lt/h1gt
• .
• lth6gt Heading Level 6 lt/h6gt
• Indented block
• ltblockquotegt text lt/blockquotegt
• Each new element (tag) starts on a new line

10
Formatting Text

• Bold ltbgt Bold text lt/bgt
• Italic ltigt Italic text lt/igt
• Underline ltugt Underlined text lt/ugt
• Bigger ltbiggt Bigger text lt/biggt
• Smaller ltsmallgt Smaller text lt/smallgt
• Emphasize ltemgt Emphasized text lt/emgt
• How emphasized text displays depends on the
  browser
• Custom formatting
• ltp style"font-familyonyx colorred
  font-size20px "gt
• lth1 style"text-aligncenter"gt

11
Pictures

• For adding an image, use the ltimggt tag
• ltimg src"angry.gif" alt"Angry face" /gt
• Note there is no lt/imggt
• The src attribute gives the name of the image
  file
• in this case in the same directory as the .htm
  file
• For a subdirectory, use src"./Images/angry.gif"
• You can specify a complete path, but it is a bad
  idea
• The alt attribute provides a text to be displayed
  when the browser settings prohibit image
  downloading

12
Pictures additional attributes

• height"120" width"140"
• Numbers are in pixels
• Good practice always specify image size, and
  make sure it matches the actual size of the
  picture
• although it can cause problems with the alt
  attribute
• Bad practice resizing a picture through
  attributes
• height"25" width"40"
• Percentages are tricky (use only one attribute)
• If only one dimension is specified, browsers
  usually maintain the correct ratio

13
Pictures deprecated attributes

• Deprecated attributes are obsolete in XHTML and
  are replaced by other syntax
• You must specify "Transitional" or "Frameset" in
  the DOCTYPE declaration when using deprecated
  attributes
• align"top"
• or "bottom", "left", "right", "middle"
• hspace"10"
• Specifies horizontal white space (left and right
  of the image) in pixels
• vspace"20"
• Specifies vertical white space (above and below
  the image) in pixels
• border"3"
• Places a border 3 pixels wide around the image

14
Anchors

• An anchor defines a link to
• Another document, using the href attribute
• lta href"AnotherPage.htm"gt Link Text lt/agt
• Another place in the same document, using the
  name attribute
• lta name"label"gt Link Text lt/agt
• The destination of the link has to be labeled
  with "label"
• lta name"label" gtlt/agt

15
Where does a link go?

• Use the target attribute to specify where the new
  document should be displayed
• Target"_blank" New window (default)
• Target"_self" Same frame
• Target"_parent" Parent frameset
• Target"_top" Full window
• Target"frame" Another frame
• Note Frames will be explained a bit later

16
Documents

• An anchor can point to more than web pages
• Video
• lta href"MyMovie.wmv"gt Watch Movie lt/agt
• Sound
• lta href"MySong.mp3"gt Listen to Song lt/agt
• E-mail
• lta href"mailtoprof2_at_pateanu"gt E-mail Prof lt/agt
• Another Web Site
• lta href"www.engadget.com"gt Tech News lt/agt
• Sound and Video behaviour varies with the
  browser there are better ways to do it.
• object tag and embed tag

17
How links look like

• All examples we used show a text for the link
• By default
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
• Links can be other elements
• lta href"AboutMe.htm"gt ltimg src"RP.jpg"gtlt/agt
• Cursor changes to small hand when hovering over a
  link

18
Frames

• The highest level container is a frameset
• Framesets contain frames
• Frames are areas on a web page which can be
  filled independent of each other
• Typical use put navigation links in a frame
  while content pages go to a different frame this
  way navigation links are always present
• Think of frames as rectangular subdivisions of
  the page, aligned vertically (in rows) or
  horizontally (in columns)

19
Simple frames

• A frameset with three horizontal frames
• A frameset with three vertical frames

ltframeset rows"100,200,"gt ltframe
src"page1.htm" /gt ltframe src"page2.htm /gt
ltframe src"page3.htm" /gt lt/framesetgt
ltframeset rows"10,20,"gt ltframe
src"page1.htm"/gt ltframe src"page2.htm"/gt
ltframe src"page3.htm" /gt lt/framesetgt
ltframeset cols"100,200,"gt ltframe
src"page1.htm" /gt ltframe src"page2.htm"/gt
ltframe src"page3.htm" /gt lt/framesetgt
ltframeset cols"10,20,"gt ltframe
src"page1.htm"/gt ltframe src"page2.htm"/gt
ltframe src"page3.htm"/gt lt/framesetgt
20
Nested frames

• You can nest framesets, to obtain any layout

ltframeset rows"" cols"190,"gt ltframeset
rows"100," cols""gt ltframe
src"YorkULogo.htm" /gt ltframe
src"Navigation.htm" /gt lt/framesetgt
ltframeset rows"200," cols""gt ltframe
src"WelcomeLogo.htm"/gt ltframe
src"Welcome.htm" /gt lt/framesetgt lt/framesetgt
21
Additional frame attributes

• Adding an id to each frame will allow you to
  refer to it in a link
• ltframe src"Welcome.htm" id"frame1" /gt
• Later you can display another page in this frame
• lta href src"Other.htm" target"frame1"gt link
  lt/agt
• Frame sizes can be changed by the viewer
• To fix the size use noresize"noresize" attribute
• You can prevent scrolling in a frame by using
• scrolling"no" attribute
• Not a good idea!

22
Tables

• Tables allow you to organize any container into
  rectangular areas called cells
• Cells can contain any data or any other
  container, except a frameset
• Tables are different from framesets because
• Framesets subdivide a whole browser window or
  another frame, while tables subdivide any
  container (frame, a portion of a frame, another
  cell, etc.)
• The content of a frame can be updated
  independently of other frames, but table cells
  cannot

23
Basic tables
lttablegt lttrgt ltthgt Name lt/thgt
ltthgt E-mail lt/thgt ltthgt Phone lt/thgt
lt/trgt lttrgt lttdgt Bob lt/tdgt lttdgt
bob_at_gmail.com lt/tdgt lttdgt
416-123-4567 lt/tdgt lt/trgt lttrgt lttdgt Marylt/tdgt
lttdgt mary_at_gmail.com lt/tdgt
lttdgt 416-234-567 8lt/tdgt lt/trgt lttrgt lttdgt
Danlt/tdgt lttdgt dan_at_gmail.com lt/tdgt
lttdgt 416-345-67 89lt/tdgt
lt/trgt lt/tablegt

• Of course, you can use
• lta href"mailtobob_at_gmail.com" bob_at_gmail.comgtlt/agt
• inside the lttdgt lt/tdgt to transform the e-mail
  address from text into an e-mail link

24
Table attributes

• To add a border around the table and each cell
• border"3"
• To add space inside each cell (between the cell
  border and the content)
• cellpadding"2"
• To add space between cells
• cellspacing"3"
• To specify the width of the table
• width"200" or width"50"

25
Cell attributes

• You can merge cells horizontally or vertically
• lttd colspan"2"gt Text spans 2 cells horizontally
  lt/tdgt
• lttd rowspan"3"gt Text spans 3 cells vertically
  lt/tdgt
• Add background to a cell (or the whole table, if
  you place the style attribute in the lttablegt tag)
• lttd style"background-colorred"gtRed celllt/tdgt
• lttd style"background-imageurl(pic.jpg)"gtabclt/tdgt
  
• To position data in the cell
• align"right" align"left" align"center"
• valign"top" valign"bottom" valign"middle"

26
Lists

• Lists are containers for elements displayed one
  after the other, vertically, with a marker
• bullet or a number, much like in Word
• Markers for Ordered Lists are a sequence
• Markers for Unordered Lists are graphics

ltolgt ltligt Coffee lt/ligt ltligt Tea lt/ligt
ltligt Milk lt/ligt lt/olgt
ltulgt ltligt Coffee lt/ligt ltligt Tea lt/ligt
ltligt Milk lt/ligt lt/ulgt
27
List styles

• You can change the marker style
• ltol style"list-style-typelower-alpha"gt
• ltul style"list-style-image url(Dot.jpg)"gt
• Style attributes trump tags
• Here is a table with the major style types