Search

Web publishing and XHTML

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    1 Favorite & 1 Group

    Web publishing and XHTML - Presentation Transcript

    1. Web publishing and xhtml
    2. This lecture
      • Goal
        • Introduce XML based markup languages, using xhtml as example
        • Understand "well formed" and "valid"
        • Understand difference between structure and presentation
        • Differences between the ”old” html and the ”new” xhtml
    3. Web - basic principles
      • Two main components.
        • http - Hypertext Transfer Protocol
          • A computer protocol for transferring small files over the internet.
        • html - Hypertext Markup Language
          • A markup language used to describe hypertext documents, that is documents with links to other documents. Also the main topic of this lecture
    4. Markup languages
      • A family of computer languages for encoding information using elements/tags
        • <title>A Midsummer Night's Dream</title>
      • Many different markup languages for different purposes
        • html for web pages
        • Wml for (old) wap pages (mobile phones)
        • SVG for vector graphics
        • SMIL for multimedia
        • JDF for ”job tickets” (printing industry)
    5. Why use markup for content?
      • Structure adds flexibility. Compare
        • A scanned text. No possibilities to change the text, change pictures, fonts, colours…
        • A word document where only different fonts and font sizes have been used to indicate headings: changes in heading fonts/sizes must be done for each heading individually, no possibilities for creating indexes.
        • A word document where headings are coded as actual headings (heading1, heading2…). Changes can easilly be done in the templates which affect the entire document instantly, indexes can be created…
    6. Example of markup language:xhtml
      • Elements start with <element_name> and are finished with </element_name>
      • Different markup languages have different elements
      • The elements to the right are from the xhtml vocabulary, but does not exist in, for example, SVG.
      • <html>
      • <head>
      • <title>
      • A Title
      • </title>
      • </head>
      • <body>
      • <h1>Hello World</h1>
      • </body>
      • </html>
    7. Hierarchical strukture
      • <html>
      • <head>
      • <title>
      • A Title
      • </title>
      • </head>
      • <body>
      • <h1>Hello World</h1>
      • </body>
      • </html>
      html head body title h1 A Title Hello World Element nodes Text nodes
    8. Example - XHTML
      • <?xml version=&quot;1.0&quot;>
      • <?xml-stylesheet type=&quot;text/css&quot; href=&quot;style.css&quot; type=&quot;text/css&quot; />
      • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
      • <html>
      • <head>
      • <title>Personal web page </title>
      • </head>
      • <body>
      • <p align=&quot;center&quot;>
      • <img src=&quot;/kth/bilder/nada.gif&quot; alt=&quot;Nada&quot; width=&quot;468&quot; height=&quot;68&quot;/>
      • </p>
      • </body>
      • </html>
    9. Exemple - SMIL
      • <?xml version=&quot;1.0&quot;?>
      • <smil>
      • <head>
      • <layout>
      • <root-layout height=&quot;350&quot; width=&quot;600&quot; title=&quot;Universal SMIL Document&quot;/>
      • <region id=&quot;w&quot; left=&quot;174&quot; top=&quot;100&quot; height=&quot;47&quot; width=&quot;63&quot; z-index=&quot;3&quot; />
      • </layout>
      • </head>
      • <body>
      • <video src=&quot;Help.mov&quot; begin=&quot;0.00s&quot; end=&quot;11.00s&quot; />
      • </body>
      • </smil>
    10. Example - Data format
      • <?xml version=&quot;1.0&quot;?>
      • <imf>
      • <head>
      • <version>3.0</version>
      • <source supplier=&quot;PrintingCompany-1&quot; application=&quot;Application-1&quot;/>
      • <time>1997-10-06T00:11:00.00+2</time>
      • </head>
      • <body>
      • <object action=&quot;modify&quot;>
      • <PrintingJob/>
      • <object_uid>
      • <source supplier=&quot;PrintingCompany-1&quot; application=&quot;Application-1&quot;/>
      • <local_id>17</local_id>
      • </object_uid>
      • <attributes>
      • <ActualCopies>14322</ActualCopies>
      • </attributes>
      • </object>
      • </body>
      • </imf>
    11. Element contents
      • Most elements have content, either text content or other elements
      • Some elements does not have content, the presence of the element is all information that is required
      • Element content
      • <head>
      • <title>Hello</title>
      • </head>
      • Text content
      • <title>Hello</title>
      • Empty content
      • <br></br>, <hr></hr>
      • Or the short form
      • <br/>, <hr/>
    12. Attributes
      • Additional aspects of an element can be encoded as ”attributes” of the element
        • <img src=”monkey.gif&quot; alt=”Picture of a monkey&quot;/>
          • An empty element with two attributes; src and alt
        • General syntax: attribute_name = ” attribute_value &quot;
        • Single quotes ok: attribute_name = ' attribute_value '
      • Note! It must be regular quotes (&quot;), not typographical quotes (”).
    13. Images
      • Images are inserted using the element <img> with the attribute src with a reference to an image file
      • Starting with xhtml all image elements must also contain the attribute ”alt” with a text-based description of the image
      • <img src=&quot;http://www.kth.se/logos/kth.gif&quot; alt=”Image of KTH&quot; />
    14. html and xhtml
      • Xhtml is based on XML, when html was based on SGML. More on XML in a later lecture.
      • Being based on XML makes it possible to use a number of tools and sofware.
      • Important differences between html and xhtml
        • All tags must be closed:. <br></br> (or the short form <br/> for line breaks instead of just <br> which was used in html
        • All tag names and element names must be in ”small” letters.
    15. Well-formed
      • An XML document is &quot;well formed&quot; if it fulfills a number of criteria. All XML documents (including xhtml) must be well-formed.
      • Example
      • All start-tags must have a corresponding end-tag (<html></html>)
      • The elements must form a tree structure <i><p></p></i> but NOT <i><p></i></p>)
      • Attribute values must be enclosed by quotes.
    16. Logical vs physical tags
      • XHTML separates content and the presentation of content
      • Tags like <font> and attributes like bgcolor are no longer allowed, all layout should be done using style sheets, CSS.
      • This makes it easier to interpret content for other devices than web browsers (like voice synthesizes, search engines, mobile web browsers…) .
    17. Validation
      • To check if xhtml code is correct, you can use a process called validation
      • This process checks that only xhtml elements and attributes are used, and are used correctly
      • Web based validation service at http://validator.w3.org/
      • To be able to validate a web page, it is important to denote exactly which xhtml version the web page conforms to. In an xhmlt document, lines like this are added in the beginning of the document.
      • <!DOCTYPE html
      • PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
      • &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>

    + bjornhbjornh, 3 years ago

    custom

    738 views, 1 favs, 0 embeds more stats

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 738
      • 738 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 1
    • Downloads 0
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    Groups / Events

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved