1. Studio 3: Semantic HTML
Prof. Alvarado
MDST 3703
12 September 2013

2. Business
• About the Readings
– Primary sources, not digested
– Coming from many directions
– Not required to know everything!
– Salient points discussed in class
• Exercises
– Not graded directly
– Not highly structured on purpose

3. Review
• What is an "Interface”?

4. Text interface (aka command-line interface)

5. A window from a Graphical User Interface (aka GUI)

6. First Mac interface

7. The IBM 7090 had an interface of switches and
lights

8. Review
• I have used the word “interface” in contrast with
source code
– As in “web interface”
• But source code is accessed through an interface
too
– E.g. JEdit
– Key contrast is between that which is source and
product of interpretation
– Sometimes, we think the product of interpretation
(structuralism) is closer to the original

9. Review
• Is Text shadow or puppet?

10. Review
• Text is shadow and puppet
– Shadow in that is it created by an author to
produce effects
– Puppet in that writing is a powerful form of
representation that can express both rules and
patterns (O'Shea's point)
– What's a puppet and what's a shadow has more to
do with context
– One's man's shadow is another man's puppet

11. Semantic HTML

12. Semantic HTML
• Elements should stand for meaningful units, not
layout instructions
– E.g. <i>The Name of the Rose</i> is not
semantic
• So, two new elements:
– DIV: Defines and arbitrary block of text
– SPAN: Defines and arbitrary segment of text (i.e. no
implied hard return)
• And two new attributes:
– CLASS: Associates a DIV or SPAN with a category
– ID: Identifies a unique DIV or SPAN in a document

13. Semantic HTML
• So, we do things like this instead:
<span class=“book-title”>The Name of the
Rose</span>
<div id=“abstract”><p>Blah, blah, blah.
Blah? Of course, blah.</div>
• We can make up our own class and id names as
we go along

14. Applying CSS
• Why do we do this?
– So we can use HTML to define structure and CSS
to define style
– We want our code to map onto the levels of text
– Principle of “separation of concerns”
• The CSS looks like this:
.book-title { font-style: italic; }
#abstract { font-size: 90%; }

15. Example of a CSS directive
.foo {
font-size:14pt;
font-weight:bold;
}

16. CSS Syntax: Selectors
.important {
background-color: yellow;
}
The “selector” indicates what elements
the styles apply to. Can address
element names, classes, and ID.

17. CSS Syntax: Selectors
#abstract {
font-size:11pt;
font-weight:bold;
}
Here the selector finds
an element with an ID
attribute with the value
“foo” …
e.g. <div id=“foo”>Hey.</div>

18. Example selectors
div
Any DIV element
span#important
Any SPAN element with a class of
important
.importatn
Any element with a class of
important
#abstract
The one element with an id of abstract

19. CSS Syntax: Declarations
.important {
font-size:14pt;
font-weight:bold;
}
The “declarations” specify
properties and values to apply to
the element.
Format = property-name: value;

20. Example Directives
font-family: Georgia, Garamond, serif;
color: blue;
color: #eeff99;
background-color: gray;
border: 1px solid black;

21. CSS Box Model

22. Basic Idea
• A CSS file is just a series of “rules” that
associated styles with elements
• A CSS rule has two parts
– A selector to identify elements (tag name, class,
id)
– One or more declarations of style
• CSS rules have a simple syntax
– Selectors followed by curly braces
– Key/value pairs separated by colons
– Rules separated by semi-colons

23. Exercises

24. Exercise 1: Add semantic markup to
the Poetics
1. Create a folder for this week (09-12)
2. Make a copy of the poetics.html file you
created last week and paste it into today’s
folder
3. Add some semantic HTML to the document
and add a style
– E.g. mark up some people’s names in the text
and give them the class “person”

25. Exercise 2: Mark up Oedipus
• Create an empty HTML document (with the
four basic elements)
– Call it “oedipus.html”
• Go to the Oedipus link provided in today’s
blog post
• Grab the source and paste it into your new
document

26. Exercise 3: Inspect the source code
• Form into groups of 5 and discuss the
question: Does it use semantic html?
– 5 minutes of discussion
– 1 respondent from each group

27. Exercise 4: Markup Challenge
• Stay in your groups and respond to the
following challenge as a group
– Using the page anchors as clues, how would you
go about visually representing page breaks?
– Based on your answer, implement your solution
• Scribes: describe what was done
– What are the problems that you see in terms of
the structure?
– Why would you want to show pages?