XHTML II DIGITAL MEDIA: COMMUNICATION AND DESIGN F2007
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
Digital Media: Communication and DesignF2007 Index Text elements Links
Digital Media: Communication and DesignF2007 Document structure Declaration html head title body <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “ <html xmlns=“ xml:lang=“en” lang=“en”> Welcome to my website Hello world!
Digital Media: Communication and DesignF2007 Elements Structure: content Attributes: content Empty elements: Line break: Image:
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!!
Digital Media: Communication and DesignF2007 Block elements Headings Paragraphs Blockquotes Preformatted text Addresses Lists Div Tables Forms
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
Digital Media: Communication and DesignF2007 Block elements II: Paragraphs … They always start a new line May not contain other block elements
Digital Media: Communication and DesignF2007 Block elements III: Quotations … May contain other block elements
Digital Media: Communication and DesignF2007 Block elements IV: Preformatted … Text is displayed exactly as it is typed in the HTML document
Digital Media: Communication and DesignF2007 Inline elements Phrase elements Emphasis Acronyms and abbreviations Quotations Deleted and inserted text
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)
Digital Media: Communication and DesignF2007 Inline elements II: Quotations … It introduces quotation marks
Digital Media: Communication and DesignF2007 Inline elements III: Deleted and inserted text … Usually displayed as strike-through text … Usually displayed underlined
Digital Media: Communication and DesignF2007 Generic elements I: div … Identify a block of text Really useful when used with CSS
Digital Media: Communication and DesignF2007 Generic elements II: span … Identify inline elements Javier: 5064
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
Digital Media: Communication and DesignF2007 Lists Block element Unordered lists: … Ordered lists: … List element: …
Digital Media: Communication and DesignF2007 Presentational elements I Some are deprecated!! Use style sheets instead ,,,, font element emphatically deprecated color face size
Digital Media: Communication and DesignF2007 Presentational elements II Bold text Use instead Italics Use instead
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
Digital Media: Communication and DesignF2007 Index Text elements Links
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”
Digital Media: Communication and DesignF2007 Links II You can access ITU’s website here or clicking in the logo
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
Digital Media: Communication and DesignF2007 Links IV
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
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
Digital Media: Communication and DesignF2007 Links VII: other protocols FTP, ftp:// Access ITU’s FTP server Mail, mailto:// Send me an e- mail
Digital Media: Communication and DesignF2007 Links VIII: link Link to an external document Used to link to a CSS file
Digital Media: Communication and DesignF2007 Questions?