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