Beginning XHTML

1
Beginning XHTML

• Making Simple Documents

2
Getting Started - Tags

• Use some standard text editor to create your
  XHTML source file
• we will not use WYSIWYG editors here
• Notepad or TextPad are good.
• XHTML uses tags (ltgt around elements) and
  attributes to accomplish markup data are put
  inside tags
• Tags are of the form
• ltelementname attname1value1, attname2value2,..
  gt
• Without attributes, simply ltelementnamegt
• All tags have associated close tag paired
  lt/elementnamegt
• The close tags dont have atrributes
• Content material placed between lttaggt and lt/taggt
  is structured and rendered according to the
  meaning of the given tag
• The text of the document is the content, the
  elements (tags) are the markup

3
Components of an XHTML Document

• An XHTML document is made up of
• ltElementgts aka markup tags
• Text content
• Comments (always specified lt!- - comment - - gt
  )
• See source code of example http//clem.mscd.edu/e
  vansell/WEBPROG/FTPclients.html.
• First three lines are XML preliminaries we
  actually process XML here explained later
• There is an html element tag with attribute
  telling where to get the namespace
• At the end a lt/htmlgt tag
• Note the head versus body separation body
  is usually rendered in browsers main window
  head can label the top browser frame and have
  other non-visible information about the document
• The lttitlegt tag gives the name for the top
  browser frame and bookmark name
• Note the nesting of the ltbodygt and ltheadgt scope
  inside the lthtmlgt scope
• Some XHTML rules
• All element (tag) and attribute names in lower
  case
• While tag scopes can nest, they cannot overlap
• Attribute values have to be in single or
  double-quotes
• Every open tag must eventually have a matching
  close-tag

4
Starter List of Tags and Attributes

• lthtmlgt
• ltheadgt
• ltbodygt
• lttitlegt - for the browsers title bar and as a
  name for the page (inside ltheadgt)
• ltpgt - paragraph all text between ltpgt and lt/pgt
  structured as one paragraph
• ltagt - the anchor tag for hyperlinks most notable
  attribute field is href whose value is any
  Uniform Resource Locator (URL)
• lta hrefURL to go togt Visible Hypertext
  lt/agt
• Also useful the mailtoemailaddr URL
• lth1gt, lth2gt through lth6gt - header tags to identify
  more important text usually associated with
  sections of a document
• High the number, the less the emphasis
• lth1gt Important Heading Text lt/h1gt

5
URLs

• A URL can be a fully qualified URL with protocol,
  host machine name, and file path, as in
  protocol//servername/filepath
  http//clem.mscd.edu/evansell/index.html
• In this, http is the protocol, the machine name
  is clem.mscd.edu and the file is indicated by
  evansell/index.html
• When the protocol is http, it is implicit that
  the named machine is an HTTP server
  (clem.mscd.edu better be the name of a HTTP
  server web server)
• ftp//evanshost.org/top/file.txt - is a URL
  saying to use the FTP protocol to download a file
  top/file.txt from the FTP server machine
  evanshost.org.
• But a URL can be as simple as a single file name
  where the file lies in the same directory as
  the current file we are browsing.
• It can also be a relative file name. If we want
  to refer a file up.html in the parent directory
  of the directory we are currently browsing we
  might say ../up.html
• We could even go up one directory and then down
  into another. Say we want to refer to a file
  named cousin.html in the sibling directory other.
  We could say ../other/cousin.html

6
Some Anchor Examples

• Assuming that we are browsing the file
  something.html in the directory A under the
  evansell home directory. Suppose B is another
  directory under evansell.
• The URL for our current file would be
  http//clem.mscd.edu/evansell/A/something.html
• Some hyperlinks that might occur inside the file
  something.html
• lta hrefthatone.htmlgt would refer to a file
  thatone.html is the same A directory. This would
  be equivalent to
  lta
  hrefhttp//clem.mscd.edu/evansell/A/thatone.htm
  lgt
• lta href../up.htmlgt would refer to a file
  up.html in the parent directory of A. So up.html
  is assumed in the evansell home directory. This
  would be equivalent to lta hrefhttp//clem.mscd.
  edu/evansell/up.htmlgt
• lta href../B/other.htmlgt would refer to a file
  cousin.html in the directory B, which is a child
  directory of the evansell home. This would be
  equivalent to
  lta
  hrefhttp//clem.mscd.edu/evansell/B/
  cousin.htmlgt

7
Empty Tags

• If you want a tag to have no content, but you
  want its effect, you can say lttaggtlt/taggt
  (immediately) or (in XML) you can say lttag/gt -
  which has the same effect
• ltbr/gt - to put in a line break
• lthr/gt to put in a horizontal rule
• But this can apply to other tags (like ltimggt)

8
Lists

• Unordered Lists (items will be bulleted, not
  numbered)
• ltulgt (unnumbered list) to bound the whole list
• ltligt (list item) to bound the content for each
  item in the list
• ltulgt can have transitional attribute
  typedisccirclesquare
• Ordered Lists (items will be numbered by some
  scheme)
• ltolgt (ordered list) to bound the whole list
• ltligt (list item) to bound the content for each
  item in the list
• ltolgt can have transitional attribute
  typeIiAa1
• Lists can contain any legal XHTML components that
  can appear in a body hence they can include
  links, images, or other lists
• Example of lists study the source
  http//clem.mscd.edu/evansell/WEBPROG/EXAMPLES/Li
  stsOne.html

9
Images Putting Pictures in

• ltimg sourceimagefileURL widthw heighth/gt
• Used with immediate close no content but
  picture
• alt attribute for list alternative content if
  image cannot be rendered
• Images can be put into lists, into links, etc.
• There are attributes to align the image in the
  page (align)
• Best to use width and height and use them to
  respect aspect-ratio (width-to-height)
• If you dont use a full URL, and just use a file
  name, then that file needs to be in same
  directory as enclosing HTML document
• See the example http//clem.mscd.edu/evansell/W
  EBPROG/EXAMPLES/ImagesTwo.html

10
Special Characters

• lt
• gt
• frac23
• nbsp
• amp
• copy
• Really special
• 8734 infinity!
• 8747 integral sign
• See Appendix A. Also useful http//www.htmlprime
  r.com/entity.shtml and http//www.w3.org/TR/REC-h
  tml40/sgml/entities.html
• Example http//clem.mscd.edu/evansell/WEBPROG/EXA
  MPLES/SpecialFour.html

11
Another Use of Anchors

• Anchor element can be used to navigate around
  inside a single page
• lta nameanamegt puts an anchor at any location
  in a web page
• Then to jump to that point use a link created by
  lta hrefanamegt
• Externally use lta hrefurl_for_fileanamegt
• Example see class web page at
  http//clem.mscd.edu/evansell/WEBPROG/WEBPROG.htm
  l
• Example jump straight to the important dates,
  link to http//clem.mscd.edu/evansell/WEBPROG/WE
  BPROG.html - keydates

12
Helping Search Engines and other Tools

• ltmetagt allows you to put meta-information into
  your documents header that search engines and
  other tools can use but that wont appear
  visibly in the browser only in header!
• Some ltmetagt attributes
• Name can be set to description or keywords
  to either describe your document or list keywords
  suggesting what the document is about
• Content specifies the value for the name
  property (name and content come in pair in one
  meta tag).
• http-equiv Used to express special HTTP
  processing
• Examples
• ltmeta namedescription contentA course in Web
  Programming/gt
• ltmeta namekeywords contentHTML, XHTML,
  JavaScript, VBScript/gt
• ltmeta namehttp-equiv content5,URLhttp//clem
  .mscd.edu/gt
• ltmeta namehttp-equiv contentTue, 3 June 2003
  170000 GMT/gt
• See code at http//clem.mscd.edu/evansell/WEBPRO
  G/EXAMPLES/TABLES/TableTwo.html

13
Good Practices

• Always comment your code to allow maintenance and
  support
• Use mnemonically suggestive names for files and
  other components
• Indentation helps readability and seeing the
  scope of tags
• Use width and height on images for faster loading
  and layout respect aspect ratio
• Always check if your XHTML is valid using the
  validator at http//validator.w3.org/