Studio 3: Semantic HTML Prof. Alvarado MDST 3703 12 September 2013
Transcript
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. The Name of the Rose 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: The Name
of the Rose
Blah, blah, blah. Blah? Of course, blah.
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.
Hey.
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;
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 todays folder 3. Add
some semantic HTML to the document and add a style E.g. mark up
some peoples 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 todays 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?