This document discusses semantic HTML and CSS. It provides examples of using semantic HTML elements like <div> and <span> with class and ID attributes to structure a document. It then explains how to apply CSS styles using selectors to target these elements and control things like font styles. Exercises are given to add semantic markup and CSS styles to sample texts.

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?