Post on 05-Dec-2014
description
transcript
Studio 4 XML and HTML
Introduction to the Digital Liberal ArtsMDST 3703 / 7703
Fall 2010
Business
• Quiz 1 – next week (sorry!)– Wanted to include WWW and HTML
• WordPress sites with missing plugins – working on this– Ellie Stanton, Kathryn Corcoran, and Jonathan
Guerra• Questions about the new synthetic post
system?
Overview
• Gentle introduction to XML and HTML• Some historical background• Exercise on using HTML in WordPress
What is text?
page o’ text
Real world text comes packaged in documents
How is meaning conveyed in a document?
A document is a material artifact
What is text?
Visual Signifiers
• Small caps• Indentation• Alignment• Italics• Space
All used to signify aspects of text
3 Levels: Text, Structure, Layout
• Text = characters, e.g. /A/ – Not to be confused with any particular
representation– Exists only as a category
• Structure = units, e.g. paragraphs, and other elements (e.g. titles, foreign words, etc.)
• Layout = size, color, space, shape, etc.
XML is a language to describe the structure of
documents
So, how are docs structured?
Hierarchically …
(theoretically)
XML looks like this
also in-line mark-up
Two kinds of elements
• Divisions – blocks of text• Spans – inline elements
spans don’t always nest
XML
• Stands for eXtensible Markup Language– Actually invented after the web– A simplification of SGML, the language used to
create HTML• HTML (now XHTML) is written in XML• Based on some premises about what a
document is …
XML Premises
1. All documents are comprised of elements.2. Elements contain content.3. Elements have no layout.4. Elements are hierarchical.5. Elements are to be indicated by “markup” –
tags that define the beginning and end of an element
XML Markup Rules
• All elements have a start tag and an end tag• Start tags look like this:
<stanza>
• End tags look like this:</stanza>
• Tags can have attributes<stanza type="tercina"> … </stanza>
XML Rules
• Tags cannot overlap<header> This is not <para>cool</header> at
all.</para>• Attributes must be quoted
<stanza type=whoa>
XML is used everywhere
• HTML– Embed codes
• TEI (Text Encoding Initiative)• RSS• Civilization IV• Playlists (e.g. XSPF or “spiff”)
TEI
• Represents an alternative strand in the history of digital text– Focused on recovering the past– Core of “humanities computing”
• Tutorial:www.tei-c.org/Guidelines/Customization/Lite/U5-eg.html
• Resources for scholars:www.rilune.org/europelitteraire/database.htm
HTML
HTML
• Paragraphs = <p> … </p>• Headers = <h1> … </h1>• Images =
<img src=“http://foo.com/img.gif”></img>
• Links = <a href=“http://foo.com/page.html”>Label of link</a>
• Other elements– Lists, tables, etc.– See http://www.w3schools.com/html/default.asp
Exercise: Create a WordPress post in HTML mode using content from the Web
1. Start a new post in your blog.2. Put the editor in HTML mode.3. Go to the following URL and copy the text with your
mouse http://hd.housedivided.dickinson.edu/node/1937
4. Paste the text into your editor5. Go through the text and mark up text for emphases6. Add at least one
1. Block quote2. External link to an article illuminating the subject linked
7. Flip back and forth between Visual and HTML modes
WordPress Quirks
• Does not use paragraph tags• Strips out advanced HTML (such as embed)• Will accept things not listed in the toolbar