1. Studio 4 XML and HTML Introduction to the Digital Liberal Arts MDST 3703 / 7703Fall 2010

2. 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?

3. Overview Gentle introduction to XML and HTML Some historical background Exercise on using HTML in WordPress

4. What is text?

5. page o’ text Real world text comes packaged in documents

6. A document is a material artifact How is meaning conveyed in a document?

8. What is text?

9. Visual Signifiers Small caps Indentation Alignment Italics Space All used to signify aspects of text

10. 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.

11. XML is a language to describe the structure of documents

12. So, how are docs structured?

13. Hierarchically … (theoretically)

14. XML looks like this

15. also in-line mark-up

16. Two kinds of elements Divisions – blocks of text Spans – inline elements spans don’t always nest

17. 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 …

19. XML Premises All documents are comprised of elements. Elements contain content. Elements have no layout. Elements are hierarchical. Elements are to be indicated by “markup” – tags that define the beginning and end of an element

20. 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>

21. XML Rules Tags cannot overlap <header> This is not <para>cool</header> at all.</para> Attributes must be quoted <stanza type=whoa>

22. XML is used everywhere HTML Embed codes TEI (Text Encoding Initiative) RSS Civilization IV Playlists (e.g. XSPF or “spiff”)

23. 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

24. HTML

25. HTML Paragraphs = <p> … </p> Headers = <h1> … </h1> Images = <imgsrc=“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

26. Exercise: Create a WordPress post in HTML mode using content from the Web Start a new post in your blog. Put the editor in HTML mode. Go to the following URL and copy the text with your mouse http://hd.housedivided.dickinson.edu/node/1937 Paste the text into your editor Go through the text and mark up text for emphases Add at least one Block quote External link to an article illuminating the subject linked Flip back and forth between Visual and HTML modes

29. WordPress Quirks Does not use paragraph tags Strips out advanced HTML (such as embed) Will accept things not listed in the toolbar