Download presentation
Presentation is loading. Please wait.
1
XHTML II DIGITAL MEDIA: COMMUNICATION AND DESIGN F2007
2
Digital Media: Communication and DesignF2007 Goals of the lecture Learn the different text elements in an XHTML document Learn how to create links in a website
3
Digital Media: Communication and DesignF2007 Index Text elements Links
4
Digital Media: Communication and DesignF2007 Document structure Declaration html head title body <!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”> Welcome to my website Hello world!
5
Digital Media: Communication and DesignF2007 Elements Structure: content Attributes: content Empty elements: Line break: Image:
6
Digital Media: Communication and DesignF2007 Text elements Block elements: Headings, paragraphs, quotations… Inline elements: Emphasized text, citations, code… Lists: Unordered lists, ordered lists… Generic elements Presentational elements: deprecated!!
7
Digital Media: Communication and DesignF2007 Block elements Headings Paragraphs Blockquotes Preformatted text Addresses Lists Div Tables Forms
8
Digital Media: Communication and DesignF2007 Block elements I: Headings …, with # from 1 to 6 Structure sections of the document Their appearance can be changed with style sheets
9
Digital Media: Communication and DesignF2007 Block elements II: Paragraphs … They always start a new line May not contain other block elements
10
Digital Media: Communication and DesignF2007 Block elements III: Quotations … May contain other block elements
11
Digital Media: Communication and DesignF2007 Block elements IV: Preformatted … Text is displayed exactly as it is typed in the HTML document
12
Digital Media: Communication and DesignF2007 Inline elements Phrase elements Emphasis Acronyms and abbreviations Quotations Deleted and inserted text
13
Digital Media: Communication and DesignF2007 Inline elements I: Phrase elements Add structure and meaning to inline text May contain other inline elements em: italics strong: bold abbr: Inc. acronym: ITU code: write code (Courier font)
14
Digital Media: Communication and DesignF2007 Inline elements II: Quotations … It introduces quotation marks
15
Digital Media: Communication and DesignF2007 Inline elements III: Deleted and inserted text … Usually displayed as strike-through text … Usually displayed underlined
16
Digital Media: Communication and DesignF2007 Generic elements I: div … Identify a block of text Really useful when used with CSS
17
Digital Media: Communication and DesignF2007 Generic elements II: span … Identify inline elements Javier: 5064
18
Digital Media: Communication and DesignF2007 Element identifiers class: Group multiple elements All elements will be treated similarly id: Give a unique name to a specific element We can apply a style sheet to each identified element
19
Digital Media: Communication and DesignF2007 Lists Block element Unordered lists: … Ordered lists: … List element: …
20
Digital Media: Communication and DesignF2007 Presentational elements I Some are deprecated!! Use style sheets instead ,,,, font element emphatically deprecated color face size
21
Digital Media: Communication and DesignF2007 Presentational elements II Bold text Use instead Italics Use instead
22
Digital Media: Communication and DesignF2007 Presentational elements III Line break Horizontal rule Introduces a horizontal rule to separate text It’s preferred to use the border property in a stylesheet
23
Digital Media: Communication and DesignF2007 Index Text elements Links
24
Digital Media: Communication and DesignF2007 Links (anchor) … Creates a hypertext link to another document or a section of a document Important attributes: href=“URL” target=“text” (deprecated) id=“text”
25
Digital Media: Communication and DesignF2007 Links II You can access ITU’s website here or clicking in the logo
26
Digital Media: Communication and DesignF2007 Links III Absolute URL ITU Relative URL Linking to a document in the same site Syntax based on UNIX Home
27
Digital Media: Communication and DesignF2007 Links IV
28
Digital Media: Communication and DesignF2007 Links V: linking to a section We identify the fragment Contact information If we link from the same document See contact information If we link from another document See contact information
29
Digital Media: Communication and DesignF2007 Links VI: targeting windows Deprecated, but very popular We can open a link in a new window/tab Google Can be annoying
30
Digital Media: Communication and DesignF2007 Links VII: other protocols FTP, ftp:// Access ITU’s FTP server Mail, mailto:// Send me an e- mail
31
Digital Media: Communication and DesignF2007 Links VIII: link Link to an external document Used to link to a CSS file
32
Digital Media: Communication and DesignF2007 Questions?
Similar presentations
