Class Notes (7): Online publishing

with 1 Comment

These are the class notes for the “Introduction to XML and editing ancient documents” seminar I am doing this summer semester at LMU, Munich

Last week we looked at transforming XML into text, XML, HTML and CSV. This week we will focus more on the HTML again and style this even further by using CSS too.
We will begin by adding some more HTML transformations to our XSLT stylesheet and then we will use CSS to style the HTML classes in an interesting way. The participants will be encouraged to find colours on the Internet and try styling the document on their own.

This week I made a slightly different version of XML document with the quote from Persuasion with some new words tagged with the tag and some divisions.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="xsltforhtml.xsl"?>
<TEI xmlns="http://www.tei-c.org/ns/1.0">
<teiHeader>
 <fileDesc>
  <titleStmt>
   <title>A citation from <title type="book">Persuasion</title> by <name type="author"><forename>Jane</forename> <surname>Austen</surname></name></title>
  </titleStmt>
 <publicationStmt>
 <p>This document is as a part of the Introduction to XML seminar, 2013</p>
 </publicationStmt>
 <sourceDesc>
 <p>From Persuasion</p>
 </sourceDesc>
 </fileDesc>
</teiHeader>
<!-- This is my text-->
<text>
 <body>
  <div>
  <ab type="quote">I do not think I ever opened a book in my life which had not something to say upon woman's inconstancy. <lb/>
 Songs and proverbs, all talk of woman's <w type="funny">fickleness</w>. <lb/>
   But perhaps you will say, these were all written by men.<lb/>
<lb/>
   Perhaps I shall. Yes, yes, if you please, no reference to examples in books. <lb/>
   Men have had every advantage of us in telling their own story. <lb/>
   <w type="important">Education</w> has been theirs in so much higher a degree; the <w type="thing">pen</w> has been in their hands. <lb/>
   I will not allow books to prove anything.<lb/></ab>
<lb/>
<name type="author">Jane Austen</name>, <title>Persuasion</title></div>
  <div><ab type="comment">
   So why have I been using this quote through out the class? <lb/>You tell me?!?<lb/> I guess it just appeals to me with it's <w type="funny">fickleness</w>.<lb/>
   Let's go look at <ref target="http://en.wikipedia.org/wiki/Persuasion_(novel)">the book on Wikipedia</ref>. <lb/>
   ~ <name type="commenter"><forename>Henriette</forename></name><lb/>
  </ab></div>
</body>
</text>
</TEI>

We only used one XSLT stylesheet this week transforming our XML into HTML. You can read more about the structure of HTML here at the W3Schools pages HTML. We transform the title from the teiHeader into the HTML title tag in the head so that it’s displayed in the tab of the browser.

Screen Shot 2013-06-04 at 20.52.01

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:t="http://www.tei-c.org/ns/1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" encoding="utf-8" indent="yes" />
  <xsl:template match="//t:TEI">
      <html>
          <head>
            <xsl:apply-templates select="//t:teiHeader"/>
            <link rel="stylesheet" type="text/css" href="csspersuasion.css"/>
          </head>
          <body>  
             <xsl:apply-templates/>
          </body>
      </html>  
    </xsl:template>
    <xsl:template match="//t:lb">
        <br/>
    </xsl:template>
    <xsl:template match="//t:ab">
        <xsl:choose>
            <xsl:when test="@type='quote'">
                "<xsl:apply-templates/>"
            </xsl:when>
            <xsl:otherwise>
                <b><xsl:apply-templates/></b>
            </xsl:otherwise>
        </xsl:choose>

    </xsl:template>
        <xsl:template match="//t:div">
        <div class="mysillyblock">
        <xsl:apply-templates/>"
        </div>
    </xsl:template>

    <xsl:template match="//t:w">
        <xsl:choose>
            <xsl:when test="@type='funny'">
           <span class="pink mysillyblock"> <xsl:value-of select="."/></span>
            </xsl:when>
            <xsl:otherwise>
                <b><xsl:value-of select="."/></b>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:template>
    <xsl:template match="//t:ref">
       <a href="{@target}"><xsl:value-of select="."/></a>
    </xsl:template>
    
   <xsl:template match="//t:teiHeader">
        <title><xsl:value-of select="./t:fileDesc/t:titleStmt/t:title"/></title>
    </xsl:template>
    
</xsl:stylesheet>

Then we applied the rest of the text and templates in the HTML tag for it to be displayed in the browser.
We talked about what HTML tags already contain formatting such as the < b > (bold) and < i > (italics) tags and which carry no styling at all such as < span > and < div > tags. We then went on to look at how CSS can give us extra styling with class and id attributes. As an example of this I showed the participants how different a website looks when you turn the CSS styling off.

So the next thing we experimented with was using CSS to style our document.

	
.pink{
    color:#D3DEC7;
    font-weight:bold;
    font-size:150%;
    text-shadow: 3px 3px 3px #D10F94;
}
div.mysillyblock{
    border:2px solid;
    border-radius:25px;
    padding:15px;
    box-shadow: 10px 10px 5px #888888;
    width:600px;
    margin-bottom: 10px;
}
a{
    color: #76d5dc;
    font-weight: bold;
    text-decoration: none;
}

The result was lovely – if I may say so myself 😉
Screen Shot 2013-06-04 at 21.25.02

Following this the participants were given free roam to play around with the documents and colours with the help of Colorhexa and Colourlovers.

Next week will be all about web services.

Links:

One Response

  1. […] class began with a look-back at what we did last week, where we transformed XML into HTML and used CSS to style it. There was some confusion about how […]