Introduction to XHTML - PowerPoint PPT Presentation

Loading...

PPT – Introduction to XHTML PowerPoint presentation | free to view - id: 7e65e7-MDNhZ



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Introduction to XHTML

Description:

Introduction. Web developers view web pages as documents that must be created according to authoring and development guidelines. Web developers use HTML or XHTML to ... – PowerPoint PPT presentation

Number of Views:486
Avg rating:3.0/5.0
Slides: 126
Provided by: gsu135
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Introduction to XHTML


1
Introduction to XHTML
2
Introduction
  • Web developers view web pages as documents that
    must be created according to authoring and
    development guidelines
  • Web developers use HTML or XHTML to write code of
    a web page
  • Web browsers have a built-in interpreter to
    render the results of the code in its window

3
What is the World Wide Web
  • The World Wide Web (WWW) is most often called the
    Web.
  • The Web is a network of computers all over the
    world.
  • All the computers in the Web can communicate with
    each other.
  • All the computers use a communication standard
    called HTTP.

4
How does the  WWW work?
  • Web information is stored in documents called Web
    pages. 
  • Web pages are files stored on computers called
    Web servers.
  • Computers reading the Web pages are called Web
    clients.
  • Web clients view the pages with a program called
    a Web browser.
  • Popular browsers are Internet Explorer and
    Mozilla Firefox Chrome.

5
Web Browsers and Web Servers
  • The Web browser makes a request to the web server
  • The server which is running an HTTP server that
    is listening for requests, receives the request
    and locates the document.
  • The server then sends back the content of the
    requested page to the client.
  • The browser receives the information from the
    server and displays the page in the browser
    window. The transaction is now complete.

6
How to Fetch Web Pages
  • A browser fetches a Web page from a server by a
    request.
  • A request is a standard HTTP request containing a
    page address.
  • A page address looks like this
    http//www.ibm.com/index.htm.

7
Uniform Resource Locator (URL)
  • All Web pages are addressed with URLs
  • The URL specifies
  • A server name
  • A directory path
  • A filename
  • URLs are part of the HTTP (Hypertext Transfer
    Protocol) communications protocol.

8
Jargon
  • URL Uniform Resource Locator
  • W3C World Wide Web Consortium
  • HTML Hyper-Text Markup Language
  • DOCTYPE Document Type Declaration
  • XHTML Extensible Hyper-Text Markup Language
  • CSS Cascading Style Sheets

9
Web Page Displays
  • All browsers are designed to display .html and
    .htm files
  • Browsers have to rework their page displays
    whenever a browser window is resized
  • Web pages can look a little different on
    different computers
  • Web page authors cannot completely control their
    page displays

10
How does the browser display the pages?
  • All Web pages contain instructions for display
  • The browser displays the page by reading these
    instructions.
  • The most common display instructions are called
    XHTML tags.
  • XHTML tags look like this lth1gtThis is a
    headinglt/h1gt.

11
The World Wide Web
  • Definitions
  • HTML
  • The HyperText Markup Language
  • The language used to structure text-based
    information in a document
  • by denoting certain text as headings, paragraphs,
    lists, etc and to supplement that text with
    interactive forms, embedded images, and other
    multimedia objects
  • XHTML
  • The eXtensible HyperText Markup Language
  • XHTML consists of all the elements in HTML 4.01
    combined with the syntax of XML.
  • Allows users to define their own tags for
    defining structure, layout, etc.

12
Content of Web Pages
  • A web site may contain a combination of 13
    standard elements
  • Text Sound
  • Lists Video
  • Hyperlinks Tables
  • Colour Layers
  • Graphics Frames
  • Images Forms
  • Image Maps

13
Content of Web Pages
  • The content of a web site can be classified as
  • Static content does not change regularly e.g.
    personal and professional web sites
  • Dynamic content changes regularly e.g.,
    newspaper web sites, weather report sites

14
Authoring of Web Pages
  • After a web page layout is designed, one needs to
    use HTML/XHTML code to implement the design
  • Introduction to XHTML
  • Syntax
  • Document Tags
  • Authoring tools
  • Text formatting
  • Special characters
  • Hyperlinks
  • Lists
  • Meta Data
  • Colours
  • Audio Video

15
XHTML Syntax
  • XHTML uses tags that are enclosed in brackets lt gt
  • XHTML content is contained between tags
  • Tags and content form an XHTML element
  • Generic element form ltstart-taggt content
    ltend-taggt
  • Start and end tags have the same name, end tag
    has a / before it ltbgtThis is BOLDlt/bgt
  • XHTML tags can be nested according to the first
    open, last closed rule ltbgtltigtbold and
    italiclt/igtlt/bgt

16
XHTML Syntax
  • XHTML rules
  • Tags must be closed
  • XHTML is case sensitive
  • Use lower case tags and attribute names, e.g.
    width100
  • All attribute values must be double quoted, e.g.
    100
  • Tags must not overlap (i.e., during nesting)
  • Comments can be used
  • lt!-- This text is a comment --gt
  • Do not use obsolete (deprecated) tags
  • Browsers ignore misspelled tags (and many other
    things!)

17
The eXtensible Hypertext Markup Language (XHTML)
  • XHTML formatting commands control Web page
    displays
  • All XHTML formatting is achieved with XHTML
    elements
  • All XHTML elements are based on XHTML tags and
    tag-pairs
  • XHTML files can be created with text editors

18
Elements of a Page
  • Doctype
  • Head
  • Title
  • Body
  • HTML

19
Tags
  • DOCTYPE
  • ltHTMLgt
  • ltHEADgt
  • ltTITLEgt stufflt/TITLEgt
  • lt/HEADgt
  • ltBODYgt
  • ltPgtstuff that people seelt/pgt
  • lt/BODYgt
  • lt/HTMLgt

20
DOCTYPE Avoid Quirks!
  • Versions
  • 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/x
    html1/DTD/xhtml1-transitional.dtdgt

21
HEAD
  • ltTITLEgt lt/TITLEgt
  • ltMETAgt lt/METAgt
  • Language, Encoding, Keywords
  • Self-closing
  • ltmeta Contentgt lt/metagt
  • ltmeta Content /gt
  • Page Properties

22
A HTML Tag Template
  • lthtmlgt
  • ltheadgt
  • lttitlegt
  • (insert text for the browsers title bar
    here)
  • lt/titlegt
  • lt/headgt
  • ltbodygt
  • (insert visible Web page elements here)
  • lt/bodygt
  • lt/htmlgt

23
Who is making the Web standards?
  • The Web standards ( rule-making body ) of the Web
    is the W3C.
  • It is not made up by Mozilla or Microsoft.
  • W3C stands for the World Wide Web Consortium.
  • W3C puts together specifications for Web
    standards.
  • The most essential Web standards are XHTML, CSS
    and XML.
  • The latest HTML standard is XHTML 2.0

24
Markup Languages
  • SGML stands for Standard Generalized Markup
    Language and was developed in the 1960s as the
    first standardized markup language
  • HTML was developed in the early 1990s as a
    lightweight application of SGML for transporting
    documents over HTTP
  • HTML documents were portable among different
    operating systems and computer applications
  • XML was developed to address the limitations of
    HTML
  • XML is a meta-language, or a set of rules, for
    building other languages
  • XML and HTML are both SGLM applications
  • XHTML is the successor of HTML

25
Origins of Markup Languages
26
Overview of XHTML
  • The first version of XHTML 1.0, was released in
    2000
  • W3C description of XHTML
  • XHTML 1.0 reformulates HTML as an XML
    application. This makes it easier to process and
    easier to maintain. XHTML 1.0 borrows elements
    and attributes from W3C's earlier work on HTML 4,
    and can be interpreted by existing browsers, by
    following a few simple guidelines. This allows
    you to start using XHTML now!
  • XHTML is extensible meaning that its element set
    is not finite, like that of HTML. Additional
    elements or other XML-based languages can be
    integrated with XHTML
  • XHTML consists of the element set of HTML
    reformulated to adhere to the syntax rules of XML
  • XHTML is compatible with existing web browser
    technology and will be compatible with future
    XML-based clients

27
Building XHTML Documents
  • Elements consist of a start tag, content and an
    end tag
  • lth1gt Introduction to XHTMLlt/h1gt
  • Empty elements are used to describe elements that
    do not have any content ltbr /gt
  • Attributes are used to describe elements and are
    placed inside the open tag of an element
  • ltimg srcpicture.jpg alt This is my picture
    /gt
  • alt attribute specifies an alternate text for an
    image
  • Comments are used to notate the document, but are
    not processed by parsers
  • lt!-- This is a comment --gt

Content
Start Tag
End Tag
28
Three Flavors of XHTML 1.0
  • XHTML 1.0 Transitional
  • This DTD contains all HTML elements and
    attributes, INCLUDING presentational and
    deprecated elements (like font). Framesets are
    not allowed. The markup must also be written as
    well-formed XML. lt!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http//www.w3.org/TR/xhtml1/DTD/xhtml1-transition
    al.dtd"gt
  • XHTML 1.0 Strict
  • This DTD contains all HTML elements and
    attributes, but does NOT INCLUDE presentational
    or deprecated elements (like font). Framesets are
    not allowed. The markup must also be written as
    well-formed XML.
  • lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
    1-strict.dtd"gt
  • XHTML 1.0 Frameset
  • This DTD is equal to XHTML 1.0 Transitional, but
    allows the use of frameset content.
  • lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Frameset//EN" "http//www.w3.org/TR/xhtml1/DTD/xht
    ml1-frameset.dtd"gt

29
Document Tags
  • The tags that make up the framework of a typical
    XHTML document include the following
  • Document type definition (DTD) tag DOCTYPE
  • lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Strict//EN"
  • "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.
    dtd"gt
  • Describes (to web browsers) what type/version of
    (x)html is used
  • Specifies rules that apply to the markup of
    documents
  • Used for document syntax validation (e.g. strict)
    and for web browser to process document in proper
    parsing mode (impacts on consistency and speed
    of display)
  • An XHTML document is validated against a Document
    Type Definition.
  • Top-level tag, generally lthtmlgt
  • Tag indicates the beginning and /end of an XHTML
    document

30
Document Tags - Header
  • Header section, delimited by ltheadgt tags
  • Provides extra information about the document
  • Serves as a container for styles, global scripts,
    etc.
  • The main tags used in this section are
  • lttitlegt - specifies the document title
  • ltmetagt - provides information to search engines
  • ltstylegt - declares general local styles for the
    document
  • ltscriptgt - declares any scripting information

31
Meta Tags
  • Web pages are designed for surfers and surf
    engines
  • The ltmetagt tag increases the chances of page
    indexing
  • Meta data refers to data about XHTML document
    rather than the document content
  • Browsers do not render meta data
  • Search engines use it for indexing and ranking
    the page hits in a given search
  • Some attributes of this tag are name, content,
    http-equiv, etc.

32
Meta Tags
  • Most often the meta element is used to provide
    information that is relevant to browsers or
    search engines like describing the content of
    your document.
  • ltmeta namekeywords contentopen, source, PHP,
    programming, code /gt
  • When a search engine indexes the page, it
    includes the extra information -gt open, source,
    etc.
  • It provides these keywords to search agents
    requesting them

33
Amazons Meta Tags
  • ltmeta name"description" content"Low prices on
    digital cameras, MP3, LCD TVs, books, music,
    DVDs, video games, software, home garden and
    much, much more. Free delivery on orders over
    15." /gt
  • ltmeta name"keywords" content"digital camera,
    LCD TV, books, DVD, low prices, video games, pc
    games, software, electronics, home, garden,
    video, amazon" /gt

34
META
  • Specify information about a document
  • Attribute name
  • Identifies the type of meta element
  • keywords ( name keywords )
  • Provides search engines with a list of words that
    describe a page
  • description ( name description )
  • Provides a description of a site
  • Attribute content
  • Provides the information search engine use to
    catalog pages

35
Sample XHTML Document Structure
  • lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Strict//EN"
  • "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.
    dtd"gt
  • ltHTMLgt
  • ltHEADgt
  • ltTITLEgt New Document lt/TITLEgt
  • ltMETA NAME"Author" CONTENT""gt
  • ltMETA NAME"Keywords" CONTENT""gt
  • ltMETA NAME"Description" CONTENT""gt
  • lt/HEADgt
  • ltBODYgt
  • webpage content goes here!
  • lt/BODYgt
  • lt/HTMLgt

36

37
(No Transcript)
38
Minimal XHTML Document
  • lt!DOCTYPE .gt lthtmlgt
  • ltheadgt .. lt/headgt
  • ltbodygt
  • ltpgt
  • .
  • lt/pgt lt/bodygt lt/htmlgt

39
XHTML Document Example
  • lt?xml version1.0?gt
  • lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN"
  • "http//www.w3.org/TR/xhtml1/DTD/xhtml1-trans
    itional.dtd"gt
  • lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
  • ltheadgt
  • lttitlegt Introduction to XHTMLlt/titlegt
  • lt/headgt
  • ltbodygt
  • ltstronggt Course Name lt/stronggt
    Introduction to XHTML ltbr /gt
  • ltstronggt Course Number lt/stronggt CS 112
    ltbr /gt
  • ltstronggt Instructor lt/stronggt T. Perdue
    ltbr /gt
  • ltstronggt Meeting Time lt/stronggt
    Wednesday, 530pm730pm ltbr /gt
  • ltp /gt
  • ltstronggt Course Description lt/stronggt This
    course covers the basics
  • of how to write XHTML Web documents.
  • ltp /gt
  • ltstronggt Prerequsites lt/stronggt
  • ltulgt
  • ltligt CS 101Introduction to Computers
    lt/ligt

40
XHTML Document Example
41
Using TextPad
TextPad is an editor that allows you to type
text. Can be used to create web pages
View in Web browser
file name
42
View in browser
43
Validating your pages
  • XHTML shouldnt contain any deprecated (old and
    out of date) tags.
  • Needs to be well formed (see slide 25)
  • Needs to reference a DTD (DOCTYPE) (Document Type
    Definition)
  • Prefers that character encoding is declared (for
    transitional is required for strict)
  • Validate documents online at the W3Cs Validator
    website http//validator.w3.org

44
Validating your pages
  • http//validator.w3.org

Choose File Upload
Browse to find file
Then click here
Get this screen if code is valid
45
Validating XHTML Documents
  • Valid documents must be well-formed and adhere to
    the rules of a DTD
  • XHTML Transitional
  • lt!DOCTYPE html
  • PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN"
  • "http//www.w3.org/TR/xhtml1/DTD/xhtml1-trans
    itional.dtd"gt
  • XHTML Frameset
  • lt!DOCTYPE html
  • PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  • "http//www.w3.org/TR/xhtml1/DTD/xhtml1-frame
    set.dtd"gt
  • XHTML Strict
  • lt!DOCTYPE html
  • PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  • "http//www.w3.org/TR/xhtml1/DTD/xhtml1-stric
    t.dtd"gt

46
Well-Formed XHTML Documents
  1. XHTML documents must contain the root element
    lthtmlgt
  2. All elements must have a start and end tag, or
    must be an empty element
  3. Elements must be nested properly
  4. All attributes must have a value
  5. Attributes must be placed in the start tag
  6. Element names are case sensitive

47
Class Activity 1
  • Type the following xhtml code in Text pad,
    validate it and then view it in a browser
  • lthtmlgt ltheadgt
  • lttitlegtThe First Page in these noteslt/titlegt
  • lt/headgt
  • ltbodygt lth1gtYour text goes here or possibly
    imageslt/h1gt
  • ltpgtltstronggt Or it could go herelt/stronggtlt/pgt
  • lt/bodygt
  • lt/htmlgt

48
Class Activity 1
  • Now edit the code to look like this and validate
    it and then view in a browser
  • lt?xml version1.0?gt
  • lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN"
  • "http//www.w3.org/TR/xhtml1/DTD/xhtml1-tran
    sitional.dtd"gt
  • lthtml xmlnshttp//www.w3.org/1999/xhtml gt
  • ltheadgt
  • ltmeta http-equiv"Content-Type"
    content"text/html charsetISO-8859-1 /gt
  • lttitlegtThe First Page in these noteslt/titlegt
  • lt/headgt
  • ltbodygt lth1gtYour text goes here or possibly
    imageslt/h1gt
  • ltpgtltstronggt Or it could go herelt/stronggtlt/pgt
  • lt/bodygt
  • lt/htmlgt

49
  • XHTML - Basic Formatting

50
XHTML Tags Attributes
  • The following slides do not contain a complete
    list of available tags and attributes for XHTML
  • Refer to the web site http//www.w3schools.com/xht
    ml/default.asp
  • To access a full list of the standards associated
    with XHTML

51
Structure of XHTML Documents
  • Documents consist of three parts
  • Document Prolog
  • Header
  • Body
  • 1 lt?xml version1.0?gt
  • 2 lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Strict//EN"
  • "http//www.w3.org/TR/xhtml1/DTD/xhtml1-stric
    t.dtd"gt
  • 3 lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
  • 4 ltheadgt
  • 5 lttitlegtStrict XHTML Documentlt/titlegt
  • 6 lt/headgt
  • 7 ltbodygt
  • 8 lt!-- Body of document goes here --gt
  • 9 lt/bodygt
  • 10 lt/htmlgt

1 lt?xml version1.0?gt 2 lt!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"gt 3 lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
4 ltheadgt 5 lttitlegtStrict XHTML
Documentlt/titlegt 6 lt/headgt 7 ltbodygt 8
lt!-- Body of document goes here --gt 9
lt/bodygt 10 lt/htmlgt
Root Element
52
Document Framework Elements
  • The lthtmlgt element
  • This is the root element for an XHTML document
    and must be present in every XHTML document
  • The header and body elements are contained within
    the root lthtmlgt element
  • Attributes xmlnshttp//www.w3.org/1999/xhtml
    (Declares a namespace for custom tags in an HTML
    document.)
  • The ltheadgt element
  • Contains header elements that contain data used
    primarily by programs such as search engines
  • Elements that can be contained within the ltheadgt
    element
  • lttitlegt - Title of the document
  • ltbasegt - Base URL of the document
  • ltlinkgt - Defines document relationship to other
    documents
  • ltmetagt - Contains information about document such
    as keywords, author information and content
    type
  • ltscriptgt - Defines link to scripts used in the
    document
  • ltstylegt - Defines links to style sheets used in
    the document

53
Document Framework Elements (cont.)
  • The ltbodygt element
  • This element encompasses the content of the
    document
  • Style attributes available with XHTML
    Transitional and Frameset
  • bgcolor sets the background color for the
    document
  • text sets the color for text in the document
  • link sets the color for hyperlinks
  • vlink sets the color for hyperlinks that have
    been clicked on
  • alink sets the color for active hyperlink
  • NOTE Formatting attributes not included in the
    XHTML Strict 1.0 specification and will not be
    included in future versions of XHTML. The
    formatting styles provided by these attributes
    are being replaced by style sheet properties.

54
Basic Formatting Elements
  • Block Level Elements
  • Used to describe blocks of content and to label
    the main content headings
  • Character Level Elements
  • Presentational Elements Used to define how text
    should be displayed
  • Logical Elements Used to define the meaning of
    the text style

55
Block Level Elements
  • ltpgtlt/pgt - Paragraph element
  • ltpgt This is a paragraph lt/pgt
  • ltbr /gt - Line break (empty element)
  • This is a line break ltbr /gt
  • lth1gtlt/h1gt to lth6gtlt/h6gt - Heading elements
  • lth1gtThis is the largest headinglt/h1gt
  • lth6gtThis is the smallest headinglt/h6gt
  • lthr /gt - Horizontal rule (empty element)
  • This is a horizontal rule lthr /gt
  • ltdivgtlt/divgt - Section divider
  • ltdivgtThis is a section dividerlt/divgt

56
Block Level Elements XHTML Code
  • lt?xml version1.0?gt
  • lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Strict//EN"
  • "http//www.w3.org/TR/xhtml1/DTD/xhtml1-stric
    t.dtd"gt
  • lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
  • ltheadgt
  • lttitlegtXHTML Block-level Elementslt/titlegt
  • lt/headgt
  • ltbodygt
  • ltpgt This is a paragraph about African Gray
    parrots. The African Gray is
  • one of the most popular pet birds of
    the parrot family. It is known
  • for its intellegence and is one of the
    best talkers of all domestic
  • birds. This parrot is native to Africa
    and can live to be almost 70
  • years old.lt/pgt
  • ltpgt This is also a paragraph about African
    Gray parrots. Here is some
  • additional information about the
    African Gray parrot separated by
  • line breaks (break here) ltbr /gtThe
    African Gray parrot is about 15
  • inches long and (break here) ltbr /gtHas
    a wing span of about 20
  • inches.lt/pgt
  • lthr /gt

57
Block Level Elements Web Browser
58
Presentational Formatting Elements
  • ltbgtlt/bgt - Bold font style
  • ltbgtThis text is boldlt/bgt
  • ltbiggtlt/biggt - Increases the current font size
  • ltbiggtThis text is larger than the current
    fontltbiggt
  • ltigtlt/igt - Italic font style
  • ltigtThis text is in italic fontlt/igt
  • ltsmallgtlt/smallgt - Decreases the current font
    size
  • ltsmallgtThis text is smaller than the current
    fontlt/smallgt
  • ltsubgtlt/subgt - Subscript text
  • ltsubgtThis text is subscriptlt/subgt
  • ltsupgtlt/supgt - Superscripted text
  • ltsupgtThis text is superscriptlt/supgt

59
Presentational Formatting Elements XHTML Code
  • lt?xml version1.0?gt
  • lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Strict//EN"
  • "http//www.w3.org/TR/xhtml1/DTD/xhtml1-stric
    t.dtd"gt
  • lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
  • ltheadgt
  • lttitlegtXHTML Presentational Text Formatting
    Elementslt/titlegt
  • lt/headgt
  • ltbodygt
  • ltpgt
  • This text is formatted in ltbgtboldlt/bgt
  • lt/pgt
  • ltpgt
  • This text is formatted in ltigtitalicslt/igt
  • lt/pgt
  • ltpgt
  • See how ltbiggtthe big elementlt/biggt
    increases the current font size
  • and how ltsmallgtthe small
    elementlt/smallgtdecreases it.
  • lt/pgt
  • ltpgt

60
Presentational Formatting Elements Web browser
61
Presentation Controls
  • All tags have associated attributes but many
    attributes ( tags) have been deprecated with the
    move from HTML to XHTML
  • XHTML uses Cascading Style Sheets (CSS) to format
    the content rather that embedding the formatting
    code within the XHTML code (these will be covered
    later in the course)
  • Transitional XHTML still supports these
    attributes and they can be used for the first few
    tutorials until CSS has been covered.
  • The background colour can be set with the ltbodygt
    tag (deprecated in XHTML) ltbody bgcolor
    FFFF00gt (sets the colour to yellow)
  • Font attributes can be set with ltfont color
    0066CC face Timesgt (Both the tag and the
    attributes have been deprecated)
  • Text can also be aligned (deprecated) either with
    ltpgtorlth1gt etc ltp align centergt or lth3 align
    rightgt

62
Logical Formatting Elements
  • ltcitegtlt/citegt - Formats citation text
  • ltcitegtThis text is boldlt/citegt
  • ltcodegtlt/codegt - Formats computer code text
  • ltcodegtThis is computer code textlt/codegt
  • ltemgtlt/emgt - Emphasis formatting in most
    browsers, this is italic text
  • ltemgtThis is emphasis text - italicslt/emgt
  • ltstronggtlt/stronggt - Emphasis formatting in
    most browsers, bold text
  • ltstronggtThis is emphasis text - boldlt/stronggt

63
Logical Formatting Elements- XHTML Code
  • lt?xml version1.0?gt
  • lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Strict//EN"
  • "http//www.w3.org/TR/xhtml1/DTD/xhtml1-stric
    t.dtd"gt
  • lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
  • ltheadgt
  • lttitlegtXHTML Logical Text Formatting
    Elementslt/titlegt
  • lt/headgt
  • ltbodygt
  • ltpgt
  • Following is a citation ltbr /gt
  • ltcitegt
  • Four score and seven years ago, our fathers
    brought forth upon this continent a new nation
  • conceived in liberty, and dedicated to the
    proposition that all men are created equal.
  • lt/citegt
  • lt/pgt
  • ltpgt
  • Following is a block of code ltbr /gt
  • ltcodegt
  • while (x lt 10) ltbr /gt

64
Logical Formatting Elements- Web browser
65
  • XHTML Lists

66
XHTML Lists
List Type Element Item Element
Ordered List ltolgtlt/olgt ltligtlt/ligt
Unordered List ltulgtlt/ulgt ltligtlt/ligt
Definition List ltdlgtlt/dlgt ltdtgtlt/dtgt ltddgtlt/ddgt
67
Ordered list - code
68
Ordered list web browser
69
Unordered list - code
70
Unordered list web browser
71
XHML Lists Nesting Lists
  • A nested list is a list of items which is
    contained within another list
  • Lists can be nested any number of times
  • List types can be mixed when nesting. For
    example, an ordered list of items can be nested
    within an unordered list
  • The open and close tags of the nested list must
    be completely contained within one item of the
    outer list

72
Nested list - code
73
Nested list web browser
74
Class Activity 2
  • Create the following web page using Textpad,
    validate your code and then view in a browser.

heading 1
heading 2
paragraph
line break
horizontal rule
75
Class Activity 2
  • Create the following web page using Textpad,
    validate your code and then view in a browser.

heading 1
Heading 2
ordered list
unordered list
76
  • XHTML Tables

77
XHTML Tables
  • XHTML tables are sets of elements used to format
    content, or even an entire document, into rows
    and columns
  • Tables can contain any type of content, including
    text, links, images, and multimedia
  • Tables in XHTML work much the way they do in a
    spreadsheet or word processing application and
    resemble a grid
  • Tables can be used to format blocks of content or
    they can also be used to providing formatting for
    an entire document

78
Table Elements
  • lttablegt - Encloses the rest of the table
    elements
  • lttrgt - Table Row Used to designate the
    beginning and ending of a row of data
  • ltthgt - Table Heading Used to label the heading
    cells in a table row
  • lttdgt - Table Data Used to label data cells in a
    table row
  • ltcaptiongt - Optional element. Used to describe
    the data in the table.

79
Table- code
80
Table- web browser
This output isnt very easy to read. It would
be easier to read if it had a border and the
columns were wider. To vary the output from the
default you need to set attributes
81
lttablegt Common Element Attributes
  • Name Description and Values
  • width Sets the width of the table.
  • Values Percentage or pixels
  • border Sets the width of the border around the
    table. Values A value of 0 makes the border
    invisible. An integer value greater than 0 will
    result in a border of that number of pixels.
  • cellpadding Sets the amount of space between
    the border of the table cell and the data
    contained in the cell.
  • Values Percentage or pixels
  • cellspacing Sets the amount of space between
    cells.
  • Values Percentage or pixels

82
Table code with attributes
border width attribute set
Attributes have a name and a value the value is
written in double quotes in lowercase
83
Table web browser
84
lttdgt and ltthgt Element Attributes
  • Name Description and Values
  • align Horizontal alignment of data in a cell
  • Values left, center, right, justified
  • valign Vertical alignment of data in a cell
  • Values top, middle, bottom
  • rowspan Number of rows a cell span
  • Values integer greater than 1 and less than or
    equal to the total number of rows in the table
  • colspan Number of columns a cell span
  • Values integer greater than 1 and less than or
    equal to the total number of columns in the table
  • abbr Used for an abbreviated version of the
    content of the cell
  • axis Used to assign a cell to a category group
  • headers List of cells that provide header
    information for the current cell based on the
    values of the id

85
lttrgt Element Attributes
  • Name Description and Values
  • align Horizontal alignment of data in all cells
    in a row
  • Values left, center, right, justified
  • valign Vertical alignment of data in all cells in
    a row
  • Values top, middle, bottom

86
Class Activity 3
  • Create the following web page using Textpad,
    validate your code and then view in a browser.

Now modify your code so the web page looks like
this
87
Class Activity 3
  • Create the following web page using Textpad,
    validate your code and then view in a browser.

88
Class Activity 3
  • Create the following web page using Textpad,
    validate your code and then view in a browser.

89
  • XHTML Images

90
Image File Formats
  • Three primary formats for Web images
  • GIF Graphics Interchange Format
  • The GIF format supports 256 colors and is a good
    format for small non-photographic images like
    icons and buttons
  • JPEG - Joint Photographic Experts Group
  • JPEG is a compression technique that is used to
    reduce large file sizes for high quality images,
    like photographs
  • PNG - Portable Network Graphics
  • PNG was originally developed to replace the GIF
    format. The biggest difference between PNG and
    GIF is that PNG supports more than 256 colors
  • The next slide will demonstrate the differences
    in image quality and file sizes for these 3
    formats. Notice that the GIF file is much more
    grainy than the JPEG and PNG files. This is due
    to the restriction to only 256 colors.

91
Image File Formats Example
Original file Windows Bitmap file Stage.bmp
File Size 351k
GIF Format Stage.gif File size 13k
PNG Format Stage.png File size 164k
JPEG Format Stage.jpg File size 28k
92
The ltimggt element
  • The ltimggt element is an empty element
  • The two required attributes are
  • src Defines the path to the image file - can be
    an absolute or relative path
  • alt Defines alternate text for the image file
    that will display in place of the image if the
    client can not display images
  • ltimg src"myimage.gif" alt"Alternate text" /gt

93
Image- code
This code assumes that an image named forest.jpg
is stored in the same directory as the html file
94
Image- Web browser
95
File organisation
  • The previous example assumes the image file is in
    the same folder as html file
  • But web sites can get complicated and they are
    much easier to manage if your files are organised
    into folders
  • Eg
  • if your images are in a separate folder - then
    the path would look like this in the previous
    example ltimg src../images/forest.jpg
    alttrees /gt

96
Class Activity 4
Download the images from online
  • Create the following web page using Textpad,
    validate your code and then view in a browser.

mountains.png
beach.jpg
97
Class Activity 4- Challenge
  • Create the following web page using Textpad,
    validate your code and then view in a browser.

Hint Use a table without borders and investigate
the attribute colspan for the heading
98
  • XHTML - Links

99
Link Types
  • Link to other pages within site
  • Link to other sites
  • Link to a named place within the same page
  • Link to create an email message.

100
Creating XHTML Links
  • The anchor element - ltagt
  • Requires the user to perform an action in order
    to activate the link. Usually this is clicking
    on the linked text or image
  • The href attribute defines the file to be linked
    to
  • lta hrefhttp//chughes.com/index.htmlgtThis is a
    linklt/agt

101
Creating XHTML Links
  • Relative vs. Absolute URLs
  • Relative links are used to link to documents that
    reside on the same Web server, so the protocol
    and domain name reference can be omitted from the
    URL
  • lta hrefnewpage.htmlgtClick Herelt/agt
  • Absolute links are used to link to documents that
    reside on different Web servers and must contain
    the complete URL
  • lta hrefhttp//chughes.com/newpage.htmlgtClick
    Herelt/agt

102
Linking With the ltimggt Element
  • To use the ltimggt element as a link
  • Embed the ltimggt element within an ltagt element
  • lta hrefnewpage.htmlgtltimg srcmyimage.gif
    altClick on this image /gtlt/agt
  • By default, web browsers place a blue border
    around the image to identify it as a clickable
    object
  • To remove the blue border around the image, use a
    style definition. This is usually done in a
    cascading style sheet.(CSS) This will be covered
    later in the course.

103
XHTML Links code
  • lt?xml version1.0?gt
  • lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Strict//EN"
  • "http//www.w3.org/TR/xhtml1/DTD/xhtml1-stric
    t.dtd"gt
  • lthtml xmlnshttp//www.w3.org/1999/xhtmlgt
  • ltheadgt
  • lttitlegtLink Examples in XHTMLlt/titlegt
  • lt/headgt
  • ltbodygt
  • ltpgt Here are some examples of links in XHTML
    lt/pgt
  • ltpgtlta hrefhttp//chughes.com/newpage.htmlgtThi
    s is an absolute link to a new
    pagelt/agtlt/pgt
  • ltpgtlta hrefnewpage.htmlgtThis is a relative
    link to a new pagelt/agtlt/pgt
  • ltpgtlta hrefnewpage.htmlgtltimg srcbutton.gif
    altThis image is a
  • clickable buttongtlt/agtlt/pgt
  • ltpgtlta hrefmailtocheryl_at_chughes.comgtThis is
    link that launches an
  • email messagelt/agtlt/pgt
  • lt/bodygt
  • lt/htmlgt

104
XHTML Links Web Browser
105
Linking within a single document
  • Links can be created to reference different
    sections of a single document using internal
    links and anchors
  • Use an anchor to mark a section in the document
    where you would like to link to
  • lta namefootnotegtFootnotelt/agt
  • Use an internal link to reference the anchored
    section. Internal links begin with a
    character
  • lta hreffootnotegtLink to footnotelt/agt
  • When the user clicks on the internal link, they
    will be directed to the section referenced by the
    anchor

106
Linking within a single document - code
internal link has in front of name
Named anchor
107
Linking within a single document web browser
internal links will jump to where the named is
anchor is
108
Class Activity 5
  • Create the following web page using Textpad,
    validate your code and then view in a browser.

Links to Act3_Q1.html
Links to Act4_Q1.html
109

XHTML Forms
110
Overview of XHTML Forms
  • Web forms give Website owners the ability to
    receive information from their users or to allow
    users to personalize the Website
  • A Web form can contain many types of input
    elements
  • Text boxes
  • Password boxes
  • Buttons
  • Checkboxes
  • Pull-down menus
  • Form input values are processed by a program on
    the Web server and usually send another XHTML
    page back to the Web browser with either a set of
    results based on the users input, or a
    confirmation page
  • Forms can be located anywhere in the body of an
    XHTML document

111
The ltformgt Element
  • The ltformgt - element contains all of the input
    elements of the form
  • Attributes
  • action This attribute is required and provides
    the path to the program that will process the
    form data when the user submits the form
  • Examples
  • ltform action/cgi-bin/process.cgigt
  • ltform actionhttp//www.grahamm.com/cgi-bin/proce
    ss.cgigt
  • ltform actionmailtograhamm_at_chisholm.vic.edu.augt
  • method This attribute tells the web server how
    to process the data
  • Values
  • get This is the default value and will
    automatically assign this value if the method
    attribute is not present in the ltformgt element.
    This method appends the form input data to the
    end of a URL.
  • The following two ltformgt start tags are the
    same
  • ltform action/cgi-bin/process.cgi methodgetgt
  • ltform action/cgi-bin/process.cgigt
  • post This value tells the processing program to
    send the form data to the server as regular input
    data. Nothing will be appended to the URL

112
Text Input Elements
  • There are three types of text input elements
    which are empty elements
  • Text ltinput typetext /gt Allows users to
    enter text
  • Password ltinput typepassword /gt Allows users
    to enter text which is not visible to others.
    The characters are entered and appear only as the
    character.
  • WARNING even though the value is hidden while
    it is being typed, the value is sent to the
    server in text form
  • File ltinput typefile /gt Allows users to
    Browse their computer in order to send a file to
    the Web server

113
Text input elements - attributes
  • The following attributes can be used with text
    input elements
  • maxlength - Maximum number of characters allowed
    for input
  • name - Used to identify the input field
  • size - Defines the size of the input field in
    characters. If this is smaller than the
    maxlength attribute, the field will scroll.
  • type - Defines the type of input (text, password,
    or file for text input fields)
  • disabled - Disables the field for user input. The
    value of a disabled field will not
    be sent to the processing program
  • readonly - Makes the content of the text field
    unchangable. The value of this field will be
    sent to the processing program
  • value - Sets a default value
  • onselect - For use with scripts. An event handle
    that specifies an action to be performed when
    the field is selected
  • onchange - For use with scripts. An event handle
    that specifies an action to be performed when
    the content of the field has been changed

114
Selection Form Elements
  • The selection form elements allow the user to
    select one or many choices from a list
  • There are 3 types of selection elements
  • Checkboxes ltinput typecheckbox /gt
  • Radio buttons ltinput typeradio /gt
  • Drop-down lists ltselectgtlt/selectgt
  • Using selection elements
  • Checkboxes - used for lists where the user can
    choose one or more selections from a list
    of options. Each item in a checkbox group
    can be checked or unchecked.
  • Radio Buttons used for lists which allow the
    user to choose only one item in the
    list
  • Drop-down lists - The list appears in a
    scrollable box. These are usually used for
    long lists of items.
  • Each item is listed in a separate ltoptiongt
    element

115
Completing the Form
  • Once a user has completed the form, the data must
    be sent to the server to be processed
  • The XHTML language provides a means to submit the
    form using the program that is specified in the
    action attribute of the ltformgt element by
    assigning the value of submit to the type
    attribute for the ltinput /gt element
  • ltinput typesubmit /gt
  • XHTML also gives users an ability to clear the
    form and reset the default values by assigning
    the value of reset to the type attribute for
    the ltinput /gt element
  • ltinput typereset /gt
  • The value attribute can be set to assign names to
    either of these buttons. If no value is set, then
    the computer will assign default text

116
Form Example code
Open ltformgt element

Checkbox group for accounts

Radio group for emp

Select group for branch
submit button
close ltformgt element
117
Form Example Web Browser
118
Class Activity 6
  • Create the following web page using Textpad,
    validate your code and then view in a browser.

119
Class Activity 6
  • Modify the form created in Question 1 and use a
    table to set the elements out more neatly, like
    in the example below

120
Lab 1
  • A web site is a collection of web pages that link
    together. You are now going to create the
    following web site that uses tables, links,
    images, lists and forms. The site consists of
    four pages
  • welcome.html
  • baked_pears.html
  • pumpkin_creme_brulee.html
  • contact_me.html

121
Lab 1
To complete this table you will need to
investigate the attributes rowspan colspan
Links to baked_pears.html
Links to pumpkin_creme_brulee.html
recipe.jpg
Links to contact_me.html
welcome.html
122
Lab 1
back_button.jpg links back to welcome.html
pumpkin_creme_brulee.jpg
pumpkin_creme_brulee.html
123
Lab 1
back_button.jpg links back to welcome.html
Challenge Work out how to add a fraction
degree symbol
baked_pears.jpg
baked_pears.html
124
Lab 1
back_button.jpg links back to welcome.html
contact_me.html
125
Summary
  • In this section you learnt how to add the
    following elements to a web page
  • Headings
  • Lists
  • Tables
  • Images
  • Links
  • Forms
  • We didnt cover any formatting like different
    fonts or colors or alignment or removing
    borders. This is because most of those attributes
    and tags are deprecated and formatting is
    primarily done using cascading style sheets (CSS)
    this is covered in the next section.
About PowerShow.com