XHTML Continued

1
XHTML Continued
2
XML Declaration

• Every strictly conforming XHTML document must
  begin with an XML declaration
• lt?xml version 1.0 charsetiso-8859-1 ?gt
• See http//www.w3.org/International/O-charset.html
  
• Simply states that the rest of the document is XML

3
XML Declaration

• The version attribute gives the version of XML
  that the document is based on the current
  supported value is 1.0
• The charset property defines the character set
  and encoding in which the document is stored on a
  computer.

4
Three "flavors" of XHTML 1.0

• XHTML 1.0 is specified in three "flavors".
• You specify which of these variants you are using
  by inserting a DOCTYPE line at the beginning of
  the document.
• Each variant has its own DTD - Document Type
  Definition - which sets out the rules and
  regulations for using HTML in a succinct and
  definitive manner.

5
XHTML 1.0 Strict

• Use this when you want really clean structural
  mark-up, free of any markup associated with
  layout.
• Use this together with W3C's Cascading Style
  Sheet language (CSS) to get the font, color, and
  layout effects you want.

6
XHTML 1.0 Transitional

• Many people writing Web pages for the general
  public to access might want to use this flavor of
  XHTML 1.0.
• The idea is to take advantage of XHTML features
  including style sheets but nonetheless to make
  small adjustments to your markup for the benefit
  of those viewing your pages with older browsers
  which can't understand style sheets.

7
XHTML 1.0 Frameset

• Use this when you want to use Frames to partition
  the browser window into two or more frames.

8
DOCTYPE Declarations

• There must be a DOCTYPE declaration in the
  document prior to the root element.
• The public identifier included in the DOCTYPE
  declaration must reference one of the three DTDs
  using the respective Formal Public Identifier.

9
DOCTYPE Declarations

• XHTML 1.0 Strict
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"gt

10
DOCTYPE Declarations

• XHTML 1.0 Transitional
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt

11
DOCTYPE Declarations

• XHTML 1.0 Frameset
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Frameset//EN" "http//www.w3.org/TR/xhtml1/DTD/xht
  ml1-frameset.dtd"gt

12
ltHTMLgt

• The xmlns attribute indicates the URL identifying
  the namespace location a resource containing a
  general definition of the language.
• i.e. the place at which the element names and
  language rules are defined.
• The value for XHTML is fixed.

13
ltHTMLgt

• To conform to the XHTML 1.0 standard The root
  element of the document must be html.
• The root element of the document must contain an
  xmlns declaration for the XHTML namespace.
• The namespace for XHTML is defined to be
  http//www.w3.org/1999/xhtml. An example root
  element might look like
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  xmllang"en" lang"en"gt

14
Put it all together

• lt?xml version 1.0 charsetiso-8859-1 ?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD
• XHTML 1.0 Strict//EN" "http//www.w3.org/TR/xhtml
  1/DTD/xhtml1-strict.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  xmllang"en" lang"en"gt
• ltheadgt lttitlegtXHTMLlt/titlegt lt/headgt
• ltbodygt lt/bodygt
• lt/htmlgt

15
CSS Positioning The Mighty ltdivgt Tag

• Tables may be great for representing tabular data
  fields, but when they're used to lay out a Web
  page, they are a clunky work-around and one of
  the biggest abuses of HTML.
• Using CSS, you can control the color, size,
  margins, and presentation of most objects found
  on a page.
• You can also place elements exactly where you
  want them, without interrupting the flow of your
  documents structure.

16
CSS Positioning

• ltdivgt
• Used for formatting large blocks of text, images,
  and just about anything else that has an HTML tag
  around it.
• ltdiv align"center"gt
• lth3gtHi, I'm the webmonkey.lt/h3gt
• ltpgtltimg src"monkey_white.gif"gtlt/pgt
• lth4gtThis is a picture of melt/h4gt
• lt/divgt

17
CSS Positioning

• The new properties we have to look at are

18
CSS Positioning

• Position
• Can be relative or absolute or fixed (default is
  relative)
• relative works the way you'd expect a normal
  html page to flow. Things come in from the top
  and lay themselves out, with each element's
  position determined by the previous element's end
  point.
• So with positionrelative left100px an element
  would be positioned 100px left of where it would
  if just relying on the normal flow

19
CSS Positioning

• Position
• The absolute setting positions elements based on
  their distance from their parent's upper-left
  corner.
• So if you have a paragraph that isn't contained
  within any elements, its position is determined
  by the upper left-hand corner of the body.
• But if you've contained it within a ltdivgt tag,
  the paragraph's position is determined by the
  upper-left corner of the ltdivgt that contains it.

20
CSS positioning

• Fixed
• keeps an element fixed relative to the top left
  corner even when the page is scrolled.
• Not fully supported in all browsers but If better
  supported could easily do away with frames.

21
CSS Positioning

• left and top
• The left and top properties refer to the amount
  of space from the starting position of the
  element.
• lthtmlgt
• ltheadgtlttitlegtThe Wonderful ltdivgt Taglt/titlegt
• ltstylegtdivpositionabsoluteleft135px
• top100pxbackgroundgreen
• lt/stylegtlt/headgt
• ltbodygt
• ltdivgt
• positioning with pixel precision
• lt/divgt
• lt/bodygtlt/htmlgt

22
CSS Positioning
23
CSS Positioning

• Absolutely positioned elements show up the number
  of units you specify from the left and top of
  their parent element.
• Units are in the standard CSS units pixels - px,
  points - pt, inches in, and percentage - .
• So a ltdivgt that's at the top level of the HTML
  hierarchy with an absolute positioning of left
  50px top 50px, would appear 50 pixels from the
  left, and 50 pixels from the top of the page.

24
CSS Positioning

• z-index
• What if we position elements on top of each
  other?
• The z-index determines which elements are drawn
  over others.
• Eg., if you have two elements that inhabit the
  same space, you need to specify which gets drawn
  and which is hidden.
• The one with the highest z-index number gets
  placed on top, while the one with the lowest gets
  placed on the bottom.

25
CSS Positioning

• z-index
• The z-index order is relative to the parent
  element.
• Even if an element has a z-index of a million,
  but its parent is at the bottom of the z-index,
  it can't rise above it in the overall scheme of
  things.

26
CSS PositioningLab Assignment. Create the
arrangement of DIVs and text below. Use an
embedded Style sheet to control the positioning
and color.
27
CSS Positioning

• visibility
• visibility controls whether or not the element is
  drawn on the screen.
• values are visible and hidden, which are pretty
  much self-explanatory.
• http//www.the-cool-place.co.uk/javascript/tutoria
  l/javascript1.html
• width and height
• width and height work pretty much the way they
  always have, but absolutely positioned objects
  can also have percentage widths and heights.

28
CSS Positioning

• Now you can position things on the page, to the
  exact pixel.
• Please remember that people still have monitors
  and browsers that are different sizes than the
  one you are currently using.
• Absolutely positioned objects do not cause the
  scrollbars to appear if they're off the page.
• CSS positioning works on version 4 of both major
  browsers.

29
overflow

• Because height and width can be specified, we
  face the potential problem that the content of an
  element will not fit into its area. What's to be
  done? If you are familiar with frames, you might
  be able to guess.
• The overflow property allows you to specify what
  happens in this situation. Content that does not
  fit inside the area can be clipped, can overflow,
  or scroll bars can be drawn to accommodate the
  content, as happens with frames.

30
Possible values

• overflow can be specified as one of the following
• visible
• Specifies that the width and or height of an
  element should be adjusted to accommodate the
  contents that don't fit into the original area of
  the element.
• hidden
• Specifies that the contents should be 'clipped'
  to the height and width of the element. Anything
  that does not fit into this area is not visible

31

• auto
• Specifies that scroll bars should be drawn only
  when scrolling is necessary to accommodate the
  content that does not fit into the dimensions of
  the element.
• scroll
• Specifies that scroll bars should always appear
  on the element, regardless of whether they are
  necessary.

32

• Default Values
• If no value is specified for overflow, the
  default is visible.
• Is it inherited?
• The overflow of an element is not inherited from
  its parent.
• Hints and suggestions
• As with much of CSS2, the implementation of this
  property in the major browsers (Netscape 4 and
  4.5 and Internet Explorer 4, 4.5 and 5) is poor.
  Don't count on it working, sadly.

33
Putting it all together

• content position relative
• width 779px
• top100px
• left20px
• z-index 2
• overflowauto

34
resources

• Essential clarifier re absolute and relative
• http//www.westciv.com/style_master/house/tutorial
  s/quick/positioning/
• Whats supported on what browser
• http//www.quirksmode.org/css/contents.html

35
HTML Continued Even More Tags

• Lines
• A horizontal line, or horizontal rule as it is
  known in HTML is one of the easiest tags to use.
• You can insert the lthr /gt tag anywhere in your
  document to insert a horizontal line that extends
  across the space allowed.

36
Even More Tags

• Lines
• lthtmlgt
• ltheadgtlttitlegtHorizonal Lineslt/titlegtlt/headgt
• ltbodygt
• This is a horizontal line.lthr /gt
• ltpgt
• This is another horizontal line.lthr /gt
• ltpgt
• lttable width50 rulescolsgt
• lttrgt
• lttdgt this is also a lthr /gt horizontal line.lt/tdgt
• lttdgtThere is ltbrgtno line on thisltbrgt side of the
  table.lt/tdgtlt/trgtlt/tablegt
• lt/bodygt
• lt/htmlgt

37
Even More Tags

• Special Characters
• Symbols such as , -, , and are used
  frequently.
• Not all Web browsers display these symbols
  correctly.
• HTML uses a little computer shorthand to tell the
  browser how to interpret these symbols.
• www.w3.org/TR/REC-html40/sgml/entities.htmlh-24.2
  .1 - Contains a complete list of the characters
  supported by HTML.

38
Even More Tags
39
Creating Frames

• Simple Frames-
• A complete HTML document that appears inside of
  or alongside, one or more other HTML documents
  within the same browser window.
• Often used to hold navigation bars.

40
Frame Border
41
Creating Frames

• To create frames you need a new type of HTML
  document called a frameset
• A frameset defines how many frames will be
  displayed and which HTML documents will appear in
  each frame

42
Creating Frames

• lthtmlgt
• ltheadgt
• lttitlegtfirst framesetlt/titlegt
• lt/headgt
• ltframeset cols"20, "gt
• ltframe src"leftnav.html nameleftgt
• ltframe src"content.html namemaingt
• ltnoframesgtlta href"nofirstframe.html"gt click here
  if your browser does not support
  frameslt/agtlt/noframesgt
• lt/framesetgt
• lt/htmlgt

43
Creating Frames

• The first thing to notice is that the ltbodygt tag
  is missing and has been replaced by the
  ltframesetgt tag.
• Within the ltframesetgt tag, youll see the ltframegt
  tag used to describe the contents of each
  frame.
• The ltnoframesgt tag instructs the browser what to
  display if the viewers browser does not support
  frames.

44
Creating Frames

• ltframesetgt
• Within this tag you must define the orientation
  of the frames
• In vertical columns, cols
• In horizontal rows, rows
• You must also define the size of each of your
  frames. Eg. If you have three vertical frames in
  you frameset you will need to specify three size
  attributes.

45
Creating Frames

• ltframesetgt
• ltframeset cols20,gt
• This tag defines two vertical columns
• The first column is 20 of the screen width.
• The second column fills the remainder of the
  screen 80.(The asterisk () tells the browser
  to fill the remainder of the screen.)
• If there are three frames the browser will split
  the 80 in two equally.

46
Creating Frames

• ltframesetgt
• You dont have to let the browser figure out the
  size of your frames just do your maths and
  specify the size yourself.
• You can specify the size of your frames in pixels
  or as a percentage of the browser window (pixels
  are the default).

47
Creating Frames

• ltframesetgt
• Use the frameborder attribute to remove the small
  line that separates frames.
• ltframeset cols"20, frameborder0gt

48
Creating Frames

• ltframegt
• Uses the src attribute to tell the browser where
  to find the document to display.
• Also requires a name attribute (this will be used
  when youre linking between frames).
• ltframe src"leftnav.html nameleftgt
• ltframe src"content.html namemaingt

49
Creating Frames

• ltframegt - Other Attributes
• marginwidth or marginheight- these attributes
  specify (in pixels) the space between the border
  and the text in the frame.
• ltframe srcleftnav.html" name left
  marginwidth"5" marginheight"10"gt
• Your frame will have a 5-pixel margin on the
  left and right side, and a 10-pixel margin on the
  top and bottom.

50
Creating Frames

• ltframegt - Other Attributes
• noresize
• The user can resize frames manually by dragging
  the frames border (even when the frameborder0
  attribute has been specified).
• You can stop this by using the noresize
  attribute. It has no values
• ltframe srcleftnav.html" noresizenoresizegt

51
Creating Frames

• ltframegt - Other Attributes
• scrolling - to set whether or not your frame has
  a scrollbar
• Three possible scrolling options yes, no, and
  auto
• yes will place a scrollbar, whether it's needed
  or not
• no will prevent the scrollbar from appearing,
  whether you need it or not
• auto will place a scrollbar only when necessary
  (i.e., when there's more content than can fit in
  the user's window).
• ltframe srcleftnav.html scrollingautogt

52
Creating Frames

• ltnoframesgt
• Tells the browser what to do if it doesnt know
  how to display frames.
• ltnoframesgtlta href"nofirstframe.html"gt click
  here if your browser does not support
  frameslt/agtlt/noframesgt
• The ltnoframesgt tag is not required but can be
  manipulated for search engine optimisation.

53
Creating Frames

• Nested Frames - You can use the ltframesetgt tag
  more than once in a single frameset document.
  This allows you to nest frames within each other
• ltframeset rows"15, , 10"gt
• ltframe src"topbar.html" name"top"gt
• ltframeset cols"20, , 11"gt
• ltframe src"leftnav.html" name"left"gt
• ltframe src"content.html" name"main"gt
• ltframe src"rightside.html" name"right"gt
• lt/framesetgt
• ltframe src"bottombar.html" name"bottom"gt
• lt/framesetgt

54
Creating Frames

• Linking between Frames
• All frames have a name attribute assigned to
  them.
• You use that attribute to specify which frame you
  want your hyperlink to open in.
• lta hrefcontent2.html targetmain"gtPage 1lt/agt

55
Creating Frames

• Linking between Frames
• The target attribute refers to the target frame
  for the hyperlink.
• You use the frame names that youve specified in
  your frameset document.

56
Creating Frames

• Linking between Frames
• As well as this you can target three other names
• lta hrefurl target_blankgt This opens the
  hyperlink in a new browser window.
• lta hrefurl target_selfgt If the hyperlink is
  in a frame, the link will open in the same frame,
  replacing that frame document.
• lta hrefurl target_topgt This opens the
  hyperlink in the same browser window replacing
  the entire frameset. Use this for linking back
  outside your site.

57
Creating Frames

• Problems
• Tricky to implement
• The URL in the location bar points to the
  frameset and not the current view therefore your
  user cant bookmark pages.
• The Print button only prints the active frame
• Search engines have trouble with frames since
  they don't know what composites of frames to link
  to.

58
Creating Frames

• Tips
• Frames are not a toy They work best when used
  as a navigation tool, or when it makes sense to
  show two or more elements of a document at the
  same time.
• Remember the target attribute (otherwise you can
  end up in a complete mess).
• Never frame other framed pages very confusing.

59
Assignment

• Create the following framesets

60
(No Transcript)
61
Even More Tags

• Special Characters
• Probably the most important of these special
  characters is the non-breaking space
• nbsp
• Used to insert a space inside a HTML document.
• Also used to create an empty cell in a table.

62
Even More Tags

• Maths and Science Notations
• HTML has yet to support mathematical and
  scientific notation with any degree of complexity
• Two tags to help you write simple
  equations ltsupgt and ltsubgt
• A² B² C²
• Altsupgt2lt/supgt Bltsupgt2lt/supgt Cltsupgt2lt/supgt
• CO2
• COltsubgt2lt/subgt Carbon Dioxide

63
Even More Tags

• Maths and Science Notations
• For more complex equations youll need to be a
  little more creative
• Write your equation in the application you
  normally use then use a graphics application to
  turn it into an image.
• Insert your image into the HTML page
• Limited solution
• because the image is graphical you will not be
  able to index or search for text within the
  equation.
• Images slow your pages load time.
• Equation cannot be viewed by non-graphical
  browsers
• The W3C has been working on a mathematical
  language since 1989 (MathML Mathematical Markup
  Language) not yet widely used.

64
Even More Tags

• English Isnt the Only Language
• URLs, hyperlinks, HTML tags, and document
  formatting elements are language neutral.
• May have to specify the language of text for the
  browser.
• lthtml langen-brgt
• lthtml langfrgt
• http//www.w3.org/TR/html4/struct/dirlang.htmlh-8
  .1.1

65
Even More Tags

• English Isnt the Only Language
• Language information specified via the lang
  attribute may be used by a user agent to control
  rendering in a variety of ways
• Assisting search engines
• Assisting speech synthesizers
• Helping a user agent choose a set of quotation
  marks
• Helping a user agent make decisions about
  hyphenation and spacing
• Assisting spell checkers and grammar checkers

66
Even More Tags

• English Isnt the Only Language
• Text Direction
• Use the dir attribute with the lang attribute to
  set the direction
• The dir attribute accepts two values rtl (right
  to left) or ltr (left to right). ltr is the
  default.
• lthtml langhe dirrtlgt

67
Even More Tags

• English Isnt the Only Language
• Mixing Languages in a Single Page
• If you wish to include different languages on the
  one page you can assign the lang attribute to the
  ltpgt tag
• lthtml langen-USgt
• ltheadgt
• lttitlegtMulti-Language Document lt/titlegt lt/headgt
• ltbodygt
• Insert your English text here.
• ltp langfrgt
• Mettez votre texte français ici.
• ltp langen-USgt
• Insert the rest of your English text here.
• lt/bodygtlt/htmlgt

68
Even More Tags

• Meta Tags
• Contained within the ltheadgt tag.
• Can Use as many ltmetagt tags as you want in your
  page
• Doesnt appear in the document.
• Used to
• identify the pages author,
• identify keywords used for searching,
• a brief description to appear in search results
• give commands to the browser

69
Even More Tags

• Meta Tags
• Improve Searching
• Search Engines add the content of your Web pages
  to their indexes
• When a potential visitor enters a search phrase,
  the search engine checks its index to find that
  word and returns any pages that include that
  word.

70
Even More Tags

• Meta Tags
• Improve Searching
• You can use the ltmetagt tag to include product
  names, geographic locations, industry terms, and
  synonyms.
• There are three ltmetagt tags that work to help
  improve your chances of being found by a search
  engine
• Keywords
• Description
• Author

71
Even More Tags

• Meta Tags
• Improve Searching
• Keywords words that you feel people might use
  to search for your web page, or synonyms for
  words in your document.
• Description usually a paragraph of information
  about your page. Some search engines use this
  description to describe your page other search
  engines use the first few lines of text in your
  document.
• Author This is your opportunity to shine. Just
  in case someone is searching for your name, they
  will find it if you enter that information into
  the ltmetagt tag

72
Even More Tags

• Meta Tags
• Improve Searching
• Meta information for search engines comes in
  pairs name and contents.
• lthtmlgt
• ltheadgtlttitlegtYour HTML Pagelt/titlegt
• ltmeta namekeywords contentskeywords, that
  people, might, use, to, search, for, your, pagegt
• ltmeta namedescription contentsa brief
  paragraph describing your documentgt
• ltmeta nameauthor contentsyour namegt
• lt/headgt
• ltbodygtInsert your document herelt/bodygt
• lt/htmlgt

73
Even More Tags

• Meta Tags
• Refresh and Redirect (not all browsers)
• Replace one page with another
• Redirect a link
• Include a splash page
• You can use meta inforamation to force the page
  to change within a given time span.
• Can use the refresh tag to refresh the same page
  use if there are frequent updates
• ltmeta http-equivrefresh contenttime in
  seconds URLURL for new pagegt