Computer Science and Engineering The Ohio State University
There are 7 holes in a straight line
A mole is hiding in one of the holes
Each morning, a fox checks one of the
Copyright By PowCoder代写 加微信 powcoder
holes in the hope of catching the mole
Each night, the mole moves to an
adjacent hole (either left or right)
Question: Is there a strategy for the
fox to guarantee it catches the mole?
Hypertext Markup Language
Computer Science and Engineering College of Engineering The Ohio State University
Computer Science and Engineering The Ohio State University
Hypertext Markup Language
Key ideas:
1. Connect documents via (hyper)links
Visual point-and-click
Distributed, decentralized set of documents
2. Describe content of document, not style
Structure with semantics
Separation of concerns
Rephrasing these key ideas: 1. Hypertext
Markup: Describing Content
Computer Science and Engineering The Ohio State University
A paragraph or bulleted list in MS Word
No surprises in final appearance
Quick and easy
Control: Author can use visual elements to stand in for structural elements
A paragraph or list in LaTeX
More information in document (visual & semantic)
Lack of Control: Author doesn’t know how to apply visual elements properly for structure
Abstraction vs Representation
Computer Science and Engineering The Ohio State University
\section{To Do List}
\begin{enumerate}
\item{Study for midterm}
\item{Sleep}
\end{enumerate}
Evolution of HTML
HTML (Berners-Lee, early 90’s)
HTML 2.0 (W3C, ’95)
HTML 3.2 (W3C, ’97)
HTML 4.0 (W3C, ’97)
HTML 4.01 (W3C, ’99)
Computer Science and Engineering The Ohio State University
To form a more perfect union…
To smooth out the edges… big dog for years
The great schism
Capitulation (’09): W3C abandons XHTML 2.0
HTML5 (October 2014)
W3C: XHTML 1.0 (’00), 1.1 (’01), 2.0 Everyone else: HTML Forms, WHAT…
One ring to rule them all…
(includes XHTML5, but no one seems to care)
Page Validation
Design-by-contract:
Strong ensures, weak requires
Be strict in output, permissive in input
Browsers (taking HTML as input) are
Computer Science and Engineering The Ohio State University
permissive
“Tag soup” still renders
Web authors (writing HTML as output) should
be as strict as possible
But permissive browsers hide errors!
Solution: use a validator See validator.w3.org
Checks for syntax problems only
Computer Science and Engineering The Ohio State University
Hello World!
Computer Science and Engineering The Ohio State University
Hello World!
Example (Rewritten)
Computer Science and Engineering The Ohio State University
Hello World!
Hello World!
Computer Science and Engineering The Ohio State University
Document Type Declarations
XHTML 1.0 Strict
Hello World!
Computer Science and Engineering The Ohio State University
Element Tags: Nested Start/End
Computer Science and Engineering The Ohio State University
Hello World!
Structure: Nesting of Elements
Computer Science and Engineering The Ohio State University
attr name: attr value content
Something Short and Sweet
charset: utf-8
href: planet.html
src: pic.png ald: a globe
Attributes: Name/Value Pairs
Hello World!
Computer Science and Engineering The Ohio State University
Structure of Example
Computer Science and Engineering The Ohio State University
attr name:
attr value
Something Short and Sweet
charset: utf-8
href: planet.html
src: pic.png alt: a globe
HTML Entities
Familiar problem: Encoding
HTML entities represent a literal &#dddd;
Examples:
< < < ♥ ♥ ♥
Is
a tag or (literal) content? Meta-characters (e.g. ‘<') need to be escaped
Where dddd is the "unicode code point" (as a decimal number)
Where hhhh is the code point in hex
Where name is from a small set (lt, gt, amp...)
Computer Science and Engineering The Ohio State University
Kinds of Elements
1. Document structure elements
2. Head elements
Computer Science and Engineering The Ohio State University
Root of tree is always
Two children:
(Meta) information about document 3. Body elements
Content that stands alone
Starts new line of text
May contain other elements (block or inline)
Intimately part of surrounding context Does not interrupt “flow” of text
May contain other inline elements
Block vs Inline
Computer Science and Engineering The Ohio State University
paragraph heading
Required Structure for HTML5
Computer Science and Engineering The Ohio State University
attr name:
attr value
charset: utf-8
Common Head Elements
Computer Science and Engineering The Ohio State University