Web publishing and XHTML

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="1.0"><?xml-stylesheet type="text/css" href="style.css" type="text/css" /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <title>Personal web page </title> </head> <body> <p align="center"> <img src="/kth/bilder/nada.gif" alt="Nada" width="468" height="68"/> </p> </body></html>

9

Exemple - SMIL

<?xml version="1.0"?><smil> <head> <layout> <root-layout height="350" width="600" title="Universal SMIL Document"/> <region id="w" left="174" top="100" height="47" width="63" z-index="3" /> </layout> </head> <body> <video src="Help.mov" begin="0.00s" end="11.00s" /> </body></smil>

10

Example - Data format

<?xml version="1.0"?><imf> <head> <version>3.0</version> <source supplier="PrintingCompany-1" application="Application-1"/> <time>1997-10-06T00:11:00.00+2</time> </head> <body> <object action="modify"> <PrintingJob/> <object_uid> <source supplier="PrintingCompany-1" application="Application-1"/> <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" alt=”Picture of a monkey"/>

• An empty element with two attributes; src and alt– General syntax: attribute_name = ”attribute_value"– Single quotes ok: attribute_name = 'attribute_value'

• Note! It must be regular quotes ("), 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="http://www.kth.se/logos/kth.gif" alt=”Image of KTH" />

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 "well formed" 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 "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Web publishing and XHTML

Technology

Transcript of Web publishing and XHTML