Using HTML - PowerPoint PPT Presentation

1 / 55
About This Presentation
Title:

Using HTML

Description:

Using HTML The aim is to separate content from presentation and write code that adheres to available published standards. – PowerPoint PPT presentation

Number of Views:83
Avg rating:3.0/5.0
Slides: 56
Provided by: John1880
Category:
Tags: html | swimsuit | using

less

Transcript and Presenter's Notes

Title: Using HTML


1
Using HTML
  • The aim is to separate content from presentation
    and write code that adheres to available
    published standards.

2
Aim
  • pages that should work on the maximum number of
    platforms and devices
  • ...therefore pages will work for the maximum
    number of the potential audience
  • pages will be flexible enough to respond to
    audience needs
  • e.g. simple change of text size in user-defined
    style sheets
  • pages will contain inherent structure and
    elements will have inherent meaning
  • making them more machine readable and more easily
    understood by people

3
More
  • pages will essentially be self-documenting
  • making them easier to modify in the future
  • pages will be easier to upgrade and easier to
    repurpose for emerging technologies and
    standards
  • pages will be easier to find and classify
  • by both humans and machines.

4
Important HTML Code elements
  • These are fairly basic code elements that can be
    cut and pasted into a standard template. They are
    important for accessibility and code validation.
    They provide
  • the version of HTML used
  • the language in which the page is written
  • useful information for search engines, browsing
    devices and people
  • useful navigation options.

5
  • Specify a valid Document Type Definition (DTD)
  • Ideally you should use the most up-to-date web
    technology
  • See the List of valid DTD's from W3C.

6
Example Document type definitions
  • lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
    Transitional//EN"
  • "http//www.w3.org/TR/html4/loose.dtd"gt
  • lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN""http//www.w3.org/TR/xhtml1/DT
    D/xhtml1-transitional.dtd"gt

7
Identify the primary natural language
  • Add lang attribute to opening ltHTMLgt declaration
  • Choose from list of ISO language codes.

8
Language declarations
  • html documents
  • lthtml lang"en"gt
  • For xhtml documents
  • lthtml xmlns"http//www.w3.org/1999/xhtml"
    lang"en" xmllang"en"gt

9
Provide unique and meaningful titles for each
page
  • Vital for accessibility - good for bookmarking
  • The title should correlate with the main page
    title (the H1,)
  • Avoid long titles where the relevant part for the
    page only appears at the end,
  • The most unique thing should go first - a
    'reverse bookmark' works well.

10
Page title (a 'reverse breadcrumb')
  • lttitlegt5.1 Include this stuff at the top - HTML
    coding - NDA Accessibility Guidance lt/titlegt

11
Provide metadata
  • At the least, a description and keywords and the
    default character set used
  • You may also want to explore using elements from
    standard metadata sets to create a local metadata
    standard for all your sites
  • Public sector sites should investigate the Irish
    Public Service Metadata Standard (IPSMS)

12
Basic metadata
  • ltmeta name"description" content"Describe page
    and the scope of contents provided"gt
  • ltmeta name"keywords" content"Relevent keywords,
    Relevent Phrases, comma, Separated"gt
  • ltmeta http-equiv"Content-Type"
    content"text/html charsetiso-8859-1"gt

13
Navigational Metadata
  • Consider providing navigation information in
    metadata
  • See more on navigational metadata

14
Some navigational metadata examples
  • ltlink rel"start" href"tips_intro.html"gt
  • ltlink rel"home" href"../index.html" /gt
  • ltlink rel"contents" href"../about/index.html"
    title"Contents accessibility guidelines" /gt
  • ltlink rel"help" href"../about/help.html" /gt
  • ltlink rel"author" href"mailto
  • xyz_at_aaa.com" /gt
  • ltlink rel"prev" href"page9.htm"gt
  • ltlink rel"contents" href"contents.html"
    title"accessibility tips contents"gt
  • ltlink rel"next" href"page11"gt
  • More on navigational metadata

15
Links to Style Sheets
  • Provide links to external style sheets and
    alternative styles for different media types
  • Print particularly useful for excluding all
    navigational elements etc. from print out.

16
Linked style sheets
  • ltlink rel"stylesheet" type"text/css"
    media"all" href"standard.css")
  • ltstyle type"text/css" media"screen"gt_at_import
    url(hidefromoldbrowsers.css)lt/stylegt
  • ltlink rel"stylesheet" type"text/css"
    media"Braille" href"braileversion.css")
  • ltlink rel"stylesheet" type"text/css"
    media"print" href"printversion.css" /gt

17
Construct proper headings
  • Many people rely on headings to interpret the
    structure of the page.
  • Without headings, some people (e.g. screen reader
    users) cannot easily browse the contents of the
    page (e.g. by skipping to and reading just the
    headings or by listing all the headings to get an
    idea of the contents of the page).

18
Use lth1gt, lth2gt ... lth6gt to provide structure to
web pages
  • All pages should include lth1gt for the primary
    page heading
  • Ideally only 1 heading should be coded with lth1gt
    per page
  • Avoid skipping levels, e.g.
  • lth1gt, lth3gt should not follow sequentially
    (skipping the lth2gt)

19
Use
  • lth1gt Page Title lt/h1gt
  • lth2gt Sub Headinglt/h2gt
  • lth3gt Sub Sub Headinglt/h3gt

20
Do Not use
  • ltbgt This is not a real Heading even though its
    bolded lt/bgt
  • Lesson Style with CSS
  • Don't use presentation markup to simulate
    headings.

21
Likewise
  • Don't use heading markup to produce
    presentational effects
  • Only use the Heading tags for headings - nothing
    else.

22
Define list and list items properly
  • Lists, when coded correctly, can provide useful
    information, e.g.
  • the fact that there is a list of related items
  • the number of items in the list
  • the number of the current item in the list.
  • Lists also add structure to a page, making it
    easier to read and scan.

23
  • If something is a list, always code it as one
    using ltulgt, ltolgt, ltdlgt
  • Include all menus if possible
  • They are logically lists - and, when style sheets
    are turned off, maintain structure and meaning.

24
  • Avoid using inline images to create list
    effects
  • Spacers, bullets, etc
  • Use lists and style the CSS.

25
Code ltulgt, ltolgt, ltdlgt properly according to
standards
  • Ensure correct syntax when embedding a list with
    a list (see example.)

26
HTML Unordered Lists
  • An unordered list starts with the ltulgt tag. Each
    list item starts with the ltligt tag.
  • The list items are marked with bullets (typically
    small black circles).
  • ltulgtltligtCoffeelt/ligtltligtMilklt/ligtlt/ulgt
  • How the HTML code above looks in a browser
  • -------------------------------------------
  • Coffee
  • Milk

27
HTML Ordered Lists
  • An ordered list starts with the ltolgt tag. Each
    list item starts with the ltligt tag.
  • The list items are marked with numbers.
  • ltolgtltligtCoffeelt/ligtltligtMilklt/ligtlt/olgt
  • How the HTML code above looks in a browser
  • -------------------------
  • Coffee
  • Milk

28
HTML Definition Lists
  • A definition list is a list of items, with a
    description of each item.
  • The ltdlgt tag defines a definition list.
  • The ltdlgt tag is used in conjunction with ltdtgt
    (defines the item in the list) and ltddgt
    (describes the item in the list)

29
Example
  • ltdlgtltdtgtCoffeelt/dtgtltddgt- black hot
    drinklt/ddgtltdtgtMilklt/dtgtltddgt- white cold
    drinklt/ddgtlt/dlgt How the HTML code above looks in
    a browser
  • --------------------------------------------------
    --
  • Coffee
  • - black hot drink
  • Milk
  • - white cold drink

30
A simple nested list
  • ltpgtItems needed for holidaylt/pgt  ltolgt
  •     ltligtSunglasseslt/ligt    ltligtSwimming things
          ltulgt        ltligtSwimsuitlt/ligt        ltl
    igtTowellt/ligt
  •       lt/ulgt    lt/ligt lt!-- note the placement --gt
        ltligtSuncreamlt/ligt    ltligtMoneylt/ligt  lt/olgt

31
Use CSS
  • Use CSS to alter appearance of bullets and
    numbers, for example using
  • List-style disc url(newbullet.gif) outside.

32
Note
  • Note nav bars should ideally be coded as a list
  • Even horizontal menus can be coded as lists using
    CSS, e.g.
  • Use displayinline on the .ul and .li definition
    or
  • Use list-style-type none on the .ul definition,
    display block float left on the .li
    definition.

33
Use lang, abbr amp acronym to embed useful
information
  • Some browsers/devices can utilise embedded
    information to more effectively communicate
    information about a page's contents.

34
Identify all changes in the natural language
within a page
  • Attach the lang attribute to almost any block
    level tag, or ltspangt
  • Choose the language argument from the list of ISO
    language codes.

35
Lang example
  • html lang"en"gt  ...  ltpgtHow do you say hello
    in French?lt/pgt
  •   ltpgtYou say  ltspan lang"fr"gtBonjourlt/spangtlt/pgt
      ltpgtAnd in German?lt/pgt  ltp lang"de"gtGuten tag
    lt/pgt
  •   ltp lang"ga"gt
  •   lta href"irishversion.html"gt  as gaeilge
    lt/agtlt/pgt

36
Acronym v abbr?
  • There is much debate and confusion about what
    exactly constitutes an acronym versus an
    abbreviation. Also there is different support
    across browsers and changing support in new
    standards (acronym is likely to be dropped). The
    best advice is to adopt one and use it
    consistently and to always expand the
    abbreviation somewhere in the main body of the
    text.

37
Use ltacronymgt and ltabbrgt
  • to expand acronyms and abbreviations using the
    title attribute
  • Some browsers style these using dotted
    underlines.

38
Acronym examples
  • ...ltacronym title"World Wide Web"gt
  •   WWWlt/acronymgt...
  • ... the ltacronym title"National Disability
    Authority"gtNDAlt/acronymgt is a...gt

39
Use structural and semantic markup properly and
validate code
  • Markup such as headings, paragraphs, lists,
    definitions and quotations add useful semantic
    (inherently meaningful) information. Markup used
    solely for presentation purposes doesn't. You
    should make full use of structural and semantic
    coding.
  • Valid code ensures the widest possible acceptance
    by the multitude of devices and a clearer upgrade
    path to new standards.

40
  • Use the structural/semantic markup wherever
    possible to add meaning to a page
  • use CSS to style the elements as required.

41
Misuse
  • Do not misuse semantic / structural markup for
    presentation effects, e.g.
  • Do not use ltblockquotegt for indents
  • ltblockquotegtThe power of the Internet is in its
    universality... lt/blockquotegtltpgtTim Berners
    Leelt/pgt
  • Do not use ltthgt for centre align in layout
    tables

42
More Misuse
  • Do not use ltaddressgt, ltemgt for italics (default
    style for these elements)
  • ltaddressgtNational Disability Authority, 25 Clyde
    Road, Dublin 4lt/addressgt
  • Do not use ltstronggt for bold (default style.)
  • this is ltemgtimportantlt/emgt but this is ltstronggt
    even more important ltstronggt...

43
  • Do not use presentation elements to simulate
    structure
  • e.g. do not use bolding and increased font size
    to make a heading
  • use lth1gt, lth2gt etc. (see DEV 5.2.)

44
Structural / semantic coding Use
  • Use these
  • h1...h6, p
  • em, strong
  • cite, blockquote
  • ul, ol, li
  • dl, dt, dd
  • address
  • code.

45
Deprecated Features
  • A number of elements and attributes are
    deprecated in HTML 4 as an indication that other
    methods of accomplishing the same task are
    preferred.
  • Deprecated features may become obsolete in future
    versions of HTML, though browsers that support
    the features will likely continue to support
    them.
  • Deprecated features are included in HTML 4
    Transitional and HTML 4 Frameset but not HTML 4
    Strict.

46
Style Sheets
  • Many presentational elements and attributes are
    deprecated in favor of style sheets, which allow
    authors to suggest a presentation with more
    flexibility and without sacrificing
    accessibility.
  • Presentational attributes that cannot currently
    be replaced with style sheets are in most cases
    not deprecated.

47
The following elements are deprecated in favor of
style sheets
  • BASEFONT - Base font change
  • CENTER - Centered block
  • FONT - Font change
  • S - Strike-through text
  • STRIKE - Strike-through text
  • U - Underlined text
  • Although not deprecated, avoid b, i
  • (use CSS instead.)

48
More Deprecated Features
  • The following elements are also deprecated
  • APPLET - Java applet (deprecated in favor of
    OBJECT)
  • DIR - Directory list (deprecated in favor of UL)
  • ISINDEX - Input prompt (deprecated in favor of
    INPUT)
  • MENU - Menu list (deprecated in favor of UL)

49
Standards
  • Write HTML and CSS according to the specified
    standards.
  • Ensure all code is validated against the
    appropriate standard.

50
Notes and Tips
  • Note The quotation tag ltqgt isn't well supported
    by browsers at the moment - avoid using for now.
  • Tip The emphasis tags em and strong should be
    used to mark important phrases or words.
    Semantically strong is supposed to be 'stronger'
    than em.
  • One advantage of using these is that screen
    reader users can potentially hear the difference
    (when they would not with ltbgt and ltigt).

51
Code Validators
  • Tip Many code validators will help weed out
    deprecated tags and syntax problems, and assist
    you to code to standards, for example use the
    following free resources

52
Use relative font sizing, not absolute units
  • Absolute units make resizing text in some
    browsers impossible for many users who may need
    it.

53
To size text use the following CSS values
  • Font size keywords (recommended)
  • percent ()
  • ltemgt values.
  • Example
  • p font-size large
  • p font-size 120
  • These are ok

54
Avoid
  • Do not use
  • px, pt, cm, ....
  • e.g. p font-size 14px
  • Put all style information including sizes in
    style sheets
  • Do not use the deprecated ltfontgt tag.
  • E.g.
  • ltpgt lt font size 8ptgt This is not good
    lt/fontgtlt/pgt

55
  • Difficulties Unfortunately, due to browser
    inconsistencies, using relative units (, ltemgt )
    does not always produce the desired effect.
  • At present, some advanced workarounds are
    required.
  • These use bugs in some browsers' CSS parsing to
    deliver accessible and compatible cross-browser
    scaling. Most techniques currently recommend
    using font size keywords.
Write a Comment
User Comments (0)
About PowerShow.com