Embed Size (px)
Citation preview
<h1>XHTML II</h1>
<h2>DIGITAL MEDIA: COMMUNICATION AND DESIGN</h2>
<h3>F2007</h3>
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
Digital Media: Communication and Design F2007
Index
Text elements Links
Digital Media: Communication and Design F2007
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>
Digital Media: Communication and Design F2007
Elements
Structure: <element_name>content</element_name>
Attributes: <element attribute=“value”>content</element>
Empty elements:Line break: <br /> Image: <img src=“…” alt=“…” />
Digital Media: Communication and Design F2007
Text elements
Block elements: Headings, paragraphs, quotations…
Inline elements: Emphasized text, citations, code…
Lists: Unordered lists, ordered lists…
Generic elements Presentational elements: deprecated!!
Digital Media: Communication and Design F2007
Block elements
Headings Paragraphs Blockquotes Preformatted text Addresses Lists Div Tables Forms
Digital Media: Communication and Design F2007
Block elements I: Headings
<h#>…</h#>, with # from 1 to 6 Structure sections of the document Their appearance can be changed with
style sheets
Digital Media: Communication and Design F2007
Block elements II: Paragraphs
<p>…</p> They always start a new line May not contain other block elements
Digital Media: Communication and Design F2007
Block elements III: Quotations
<blockquote>…</blockquote> May contain other block elements
Digital Media: Communication and Design F2007
Block elements IV: Preformatted
<pre>…</pre> Text is displayed exactly as it is typed in
the HTML document
Digital Media: Communication and Design F2007
Inline elements
Phrase elementsEmphasisAcronyms and abbreviations
Quotations Deleted and inserted text
Digital Media: Communication and Design F2007
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)
Digital Media: Communication and Design F2007
Inline elements II: Quotations
<q>…</q> It introduces quotation marks
Digital Media: Communication and Design F2007
Inline elements III: Deleted and inserted text <del>…</del>
Usually displayed as strike-through text <ins>…</ins>
Usually displayed underlined
Digital Media: Communication and Design F2007
Generic elements I: div
<div>…</div> Identify a block of text Really useful when used with CSS
Digital Media: Communication and Design F2007
Generic elements II: span
<span>…</span> Identify inline elements Javier: <span
class=“phone”>5064</span>
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
Lists
Block element Unordered lists: <ul>…</ul> Ordered lists: <ol>…</ol> List element: <li>…</li>
Digital Media: Communication and Design F2007
Presentational elements I
Some are deprecated!! Use style sheets instead<big>, <small>, <s>, <strike>, <u>
font element emphatically deprecatedcolor facesize
Digital Media: Communication and Design F2007
Presentational elements II
<b>Bold textUse <strong> instead
<i> ItalicsUse <em> instead
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
Index
Text elements Links
Digital Media: Communication and Design F2007
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”
Digital Media: Communication and Design F2007
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>
Digital Media: Communication and Design F2007
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>
Digital Media: Communication and Design F2007
Links IVimages
index.html
list.html
index.html
charlie.html
students
teachers
/
big
small
javier.html
Digital Media: Communication and Design F2007
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>
Digital Media: Communication and Design F2007
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
Digital Media: Communication and Design F2007
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>
Digital Media: Communication and Design F2007
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” />
Digital Media: Communication and Design F2007
Questions?
