advertisement

Web publishing and XHTML

50 %
50 %
advertisement
Information about Web publishing and XHTML

Published on November 5, 2007

Author: bjornh

Source: slideshare.net

advertisement

Web publishing and xhtml

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

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

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

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

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)

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)

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…

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…

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>

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>

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

<html>

<head>

<title>

A Title

</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

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>

<?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>

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>

<?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>

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>

<?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>

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/>

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/>

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 (”).

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 (”).

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; />

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; />

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.

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.

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.

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.

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…) .

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…) .

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;>

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;>

Add a comment

Related pages

Web-Publishing. Basiswissen für Internet-Projekte

Herzlich Willkommen! Web-Publishing ermöglicht Inhalte (neudeutsch Content) in Form von Texten, Bildern, Audios und Videos im Internet zu publizieren.
Read more

Basiswissen Web-Publishing

Herzlich Willkommen! Web-Publishing ermöglicht Inhalte (neudeutsch Content) in Form von Texten, Bildern, Audios und Videos im Internet zu publizieren.
Read more

web-publishing.com Yhaoo | Publishers | My Way ...

Finden Sie Bewertungen und Erfahrungen zu Web-Publishing.com. Yhaoo, Publishers, My, Way und Publishing
Read more

XHTML, CSS und Co. W3C-Spezifikationen, Stefan Mintert

Die W3C-Spezifikationen zu XHTML, CSS etc. für das Web-Publishing. Für jeden Webmaster ein Muss. Rezension von Optimierung.Net, München.
Read more

Lesson 2: Web Publishing Technologies: HTML/XHTML/CSS

A GIS mashup is essentially a web page containing special scripts that dynamically add a map to the page. The bulk of this course will be concerned with ...
Read more

Sams Teach Yourself Web Publishing with HTML and XHTML in ...

Sams Teach Yourself Web Publishing with HTML and XHTML in 21 Days with CDROM Sams Teach Yourself...in 21 Days: Amazon.de: Laura Lemay: Fremdsprachige Bücher
Read more

Web Publishing and Design with HTML 4.01 and XHTML: Basics ...

Buy Web Publishing and Design with HTML 4.01 and XHTML: Basics of HTML and XHTML: Read Kindle Store Reviews - Amazon.com
Read more

HTML, CSS & JavaScript Web Publishing in One Hour a Day ...

Buy HTML, CSS & JavaScript Web Publishing in One Hour a Day, Sams Teach Yourself: Covering HTML5, CSS3, and jQuery (7th Edition) on Amazon.com ...
Read more

An Introduction to Web Publishing in HTML | What HTML Is ...

An Introduction to Web Publishing in HTML. By Rafe Colburn and Laura Lemay; ... Sams Teach Yourself Web Publishing with HTML & XHTML in 21 Days, ...
Read more

The W3C Markup Validation Service - World Wide Web Consortium

A free service from W3C that checks HTML and XHTML code against the W3C Web Accessibility Guidelines.
Read more