f2007 06.02.2007 digital media: communication and design introduction to xml and xhtml

F200706.02.2007

DIGITAL MEDIA: COMMUNICATION AND DESIGN

INTRODUCTION TO XML AND XHTML

Digital Media: Communication and Design F2007

Goals of the lecture

Get a basic understanding of XML Learn the main components in an XHTML

document Understand the structure of an XHTML

document: declaration, header and body Use an FTP client to connect to a remote

server


Index

What is XML Structure of an XML document Elements in (X)HTML Structure of an (X)HTML document How to use an FTP client


What is XML

eXtensible Markup Language Describes the data using user-defined tags No information on how the data should be

displayed W3C recommendation Example in notepad


What is XML II

Declaration <?xml version=“1.0”?>

Root element <course> … </course>

Nested elements <name>, <year>, <teachers>…

Content <name>Digital Media</name>

Attribute <teacher num=“1”>Charlie</teacher>


What is XML III

Four components:An XML documentA Document Type Definition (DTD) or XML

SchemaStyle sheets to describe presentationA parser that interprets the XML document


Index



Structure of an XML document

Tree-like structure Root element: course Branches: name,

year, teachers, students

course

year

name

students

teachers

name

email

name

email

homepage


Well-formed XML documents

XML must be well-formed Some rules:

No whitespaces before the XML declaration One root element Every element must have an opening and a closing tag, except

empty elements Empty elements must contain a closing slash, ex: <br /> Opening and closing tags must nest correctly Element attribute values must be in quotation marks

Example with notepad


RSS

RDF Site Summary (RSS 0.9 and 1.0) Really Simple Syndication (RSS 2.0) Rich Site Summary (RSS 0.91 and 1.0) Atom (standardised by the IETF) Syndicating web content Example: subscribe to NYT in Flock


More about XML…

…the 20th of February, guest lecture by Alexandre Alapetite.


HTML

Hypertext Markup Language Used to make web pages Defines the structure of the document,

NOT the presentation


XHTML

eXtensible Hypertext Markup Language Reformulation of HTML using XML syntax We’ll talk about XHTML Again:

Keep structure and presentation apartValidate the XHTML and CSS documents


Index



Elements

An element in XHTML is coded with a tag Structure:

<element_name>content</element_name>

Examples: Paragraph: <p>This a paragraph</p> Header: <h1>This is a header</h1>

Some elements are empty Line break: <br />


Elements

Some elements can have attributes Structure:

<element attribute=“value”>content</element>

Examples: Image: <img src=“images/flowers.gif” />Table: <table summary=“This is the plan for

the course”>…</table>


Well-formed XHTML documents

All element and attribute names in lowercase

All attribute values must be quoted All elements, including empty elements,

must be terminated All elements must be properly nested Use of id and name attributes


Index



Document structure

Declaration html head title body

<?xml version=“1.0” encoding=“UTF-8”?><!DOCTYPE html PUBLIC “-//W3C//DTD

XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml”xml:lang=“en” lang=“en”>

<head><title>Welcome to my website</title>

</head>

<body><p>Hello world!</p>

</body>

</html>


Root element

<html>…</html> Example:

<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>


Header

<head>…</head> Information for browsers and search engines

Title: <title>Welcome to my web</title> Metadata: <meta />

<meta name=“author” content=“JSA” /> <meta name=“description” content=“Course homepage” /> <meta name=“keywords” content=“course, itu, dmfd,

webdesign, digital media” /> <meta http-equiv=“refresh” content=“15” />


Body

<body>…</body> The content of the body is what is shown

in the browser


Index



How to use FTP

http://filezilla.sourceforge.net/


How to use FTP II


How to use FTP III

f2007 06.02.2007 digital media: communication and design introduction to xml and xhtml

Documents