XHTML II DIGITAL MEDIA: COMMUNICATION AND DESIGN F2007.

<h1>XHTML II</h1>

<h2>DIGITAL MEDIA: COMMUNICATION AND DESIGN</h2>

<h3>F2007</h3>

http://www.flickr.com/photos/melita/38992864/

Digital Media: Communication and Design F2007

Goals of the lecture

Learn the different text elements in an XHTML document

Learn how to create links in a website


Index

Text elements Links


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>


Elements

Structure: <element_name>content</element_name>

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

Empty elements:Line break: <br /> Image: <img src=“…” alt=“…” />


Text elements

Block elements: Headings, paragraphs, quotations…

Inline elements: Emphasized text, citations, code…

Lists: Unordered lists, ordered lists…

Generic elements Presentational elements: deprecated!!


Block elements

Headings Paragraphs Blockquotes Preformatted text Addresses Lists Div Tables Forms


Block elements I: Headings

<h#>…</h#>, with # from 1 to 6 Structure sections of the document Their appearance can be changed with

style sheets


Block elements II: Paragraphs

<p>…</p> They always start a new line May not contain other block elements


Block elements III: Quotations

<blockquote>…</blockquote> May contain other block elements


Block elements IV: Preformatted

<pre>…</pre> Text is displayed exactly as it is typed in

the HTML document


Inline elements

Phrase elementsEmphasisAcronyms and abbreviations

Quotations Deleted and inserted text


Inline elements I: Phrase elements

Add structure and meaning to inline text May contain other inline elements

em: italicsstrong: boldabbr: Inc.acronym: ITUcode: write code (Courier font)


Inline elements II: Quotations

<q>…</q> It introduces quotation marks


Inline elements III: Deleted and inserted text <del>…</del>

Usually displayed as strike-through text <ins>…</ins>

Usually displayed underlined


Generic elements I: div

<div>…</div> Identify a block of text Really useful when used with CSS


Generic elements II: span

<span>…</span> Identify inline elements Javier: <span

class=“phone”>5064</span>


Element identifiers

class:Group multiple elementsAll elements will be treated similarly

id:Give a unique name to a specific elementWe can apply a style sheet to each identified

element


Lists

Block element Unordered lists: <ul>…</ul> Ordered lists: <ol>…</ol> List element: <li>…</li>


Presentational elements I

Some are deprecated!! Use style sheets instead<big>, <small>, <s>, <strike>, <u>

font element emphatically deprecatedcolor facesize


Presentational elements II

<b>Bold textUse <strong> instead

<i> ItalicsUse <em> instead


Presentational elements III

Line break<br />

Horizontal rule<hr /> Introduces a horizontal rule to separate text It’s preferred to use the border property in a

stylesheet


Index

Text elements Links


Links (anchor)

<a>…</a> Creates a hypertext link to another

document or a section of a document Important attributes:

href=“URL” target=“text” (deprecated) id=“text”


Links II

You can access ITU’s website <a href=“http://www.itu.dk”>here</a> or clicking in the logo

<a href=“http://www.itu.dk”><img src=“logo.jpg” /></a>


Links III

Absolute URL<a href=“http://www.itu.dk”>ITU</a>

Relative URLLinking to a document in the same siteSyntax based on UNIX<a href=“../index.html”>Home</a>


Links IVimages

index.html

list.html

index.html

charlie.html

students

teachers

/

big

small

javier.html


Links V: linking to a section

We identify the fragment <h1><a id=“contact” name=“contact”>Contact

information</a></h1> <h1 id=“contact”>Contact information</h1>

If we link from the same document <a href=“#contact”>See contact information</a>

If we link from another document <a href=“index.html#contact>See contact

information</a>


Links VI: targeting windows

Deprecated, but very popular We can open a link in a new window/tab

<a href=“http://www.google.com” target=“_blank”>Google</a>

Can be annoying


Links VII: other protocols

FTP, ftp://<a href=“ftp://ftp.itu.dk”>Access ITU’s FTP

server</a> Mail, mailto://

<a href=“mailto:[email protected]”>Send me an e-mail</a>


Links VIII: link

Link to an external document Used to link to a CSS file

<link href=“stylesheet.css” rel=“stylesheet” type=“text/css” media=“screen” />


Questions?

XHTML II DIGITAL MEDIA: COMMUNICATION AND DESIGN F2007.

Documents