HTML – Hypertext Markup Language
Total Page:16
File Type:pdf, Size:1020Kb
HTML – Hypertext Markup Language Computer Science and Engineering n College of Engineering n The Ohio State University Lecture 9 HTML Computer Science and Engineering n The Ohio State University o Hypertext Markup Language o Key ideas: 1. Connect documents via (hyper)links o Visual point-and-click o Distributed, decentralized set of documents 2. Describe content of document, not style o Structure with semantics o Separation of concerns o Rephrasing these key ideas: 1. Hypertext 2. Markup Markup: Describing Content Computer Science and Engineering n The Ohio State University o WYSIWYG n A paragraph or bulleted list in MS Word n Benefits: o No surprises in final appearance o Quick and easy o Control: Author can use visual elements to stand in for structural elements o WYSIWYM n A paragraph or list in LaTeX n Benefits: o More information in document (visual & semantic) o Lack of Control: Author doesn't know how to apply visual elements properly for structure Abstraction vs Representation Computer Science and Engineering n The Ohio State University \section{To Do List} \begin{enumerate} \item{Study for midterm} \item{Sleep} \end{enumerate} Authors Lack Requisite Expertise Computer Science and Engineering n The Ohio State University o What's wrong with the following page? Chapter 9 Now that we have the ability to display a catalog containing all our wonderful products, it would be nice to be able to sell them. We will need to cover sessions, models, and adding a button to a view. So let's get started. Iteration D1: Finding a Cart … Evolution of HTML Computer Science and Engineering n The Ohio State University o HTML (Berners-Lee, early 90's) o HTML 2.0 (W3C, '95) o HTML 3.2 (W3C, '97) o HTML 4.0 (W3C, '97) n To form a more perfect union… o HTML 4.01 (W3C, '99) n To smooth out the edges… big dog for years o The great schism n W3C: XHTML 1.0 ('00), 1.1 ('01), 2.0 n Everyone else: HTML Forms, WHAT… o Capitulation ('09): W3C abandons XHTML 2.0 o HTML5 (October 2014) n One ring to rule them all… n (includes XHTML5, but no one seems to care) Page Validation Computer Science and Engineering n The Ohio State University o Design-by-contract: n Strong ensures, weak requires n Be strict in output, permissive in input o Browsers (taking HTML as input) are permissive n "Tag soup" still renders o Web authors (writing HTML as output) should be as strict as possible n But permissive browsers hide errors! o Solution: use a validator n See validator.w3.org n Checks for syntax problems only Example Computer Science and Engineering n The Ohio State University <!DOCTYPE html> <html lang="en"> <head> <title>Something Short and Sweet</title> <meta charset="utf-8" /> </head> <body> <p> Hello <a href="planet.html">World</a>! <br /> <img src="pic.png" alt="a globe" /> </p> </body> </html> Example Computer Science and Engineering n The Ohio State University <!DOCTYPE html> <html lang="en"> <head> <title>Something Short and Sweet</title> <meta charset="utf-8" /> </head> <body> <p> Hello <a href="planet.html">World</a>! <br /> <img src="globe.png" alt="a globe"/> </p> </body> </html> Example (Rewritten) Computer Science and Engineering n The Ohio State University <!DOCTYPE html> <html lang="en"> <head> <title>Something Short and Sweet</title> <meta charset="utf-8" /> </head> <body> <p> Hello <a href="planet.html">World</a>! <br /> <img src="pic.png" alt="a globe" /> </p> </body> </html> Type Declaration for HTML 5 Computer Science and Engineering n The Ohio State University <!DOCTYPE html> <html lang="en"> <head> <title>Something Short and Sweet</title> <meta charset="utf-8" /> </head> <body> <p> Hello <a href="planet.html">World</a>! <br /> <img src="pic.png" alt="a globe" /> </p> </body> </html> Document Type Declarations Computer Science and Engineering n The Ohio State University o HTML 5 <!DOCTYPE html> o HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> o XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> Type Declaration for HTML 5 Computer Science and Engineering n The Ohio State University <!DOCTYPE html> <html lang="en"> <head> <title>Something Short and Sweet</title> <meta charset="utf-8" /> </head> <body> <p> Hello <a href="planet.html">World</a>! <br /> <img src="pic.png" alt="a globe" /> </p> </body> </html> Element Tags: Nested Start/End Computer Science and Engineering n The Ohio State University <!DOCTYPE html> <html lang="en"> <head> <title>Something Short and Sweet</title> <meta charset="utf-8" /> start tag </head> content <body> end tag <p> Hello <a href="planet.html">World</a>! <br /> <img src="pic.png" alt="a globe" /> </p> </body> </html> Structure: Nesting of Elements Computer Science and Engineering n The Ohio State University html lang: en element attr name: attr value head body content title meta p charset: utf-8 Hello a ! br img href: planet.html src: pic.png ald: a globe Something Short World and Sweet Attributes: Name/Value Pairs Computer Science and Engineering n The Ohio State University <!DOCTYPE html> <html lang="en"> <head> <title>Something Short and Sweet</title> <meta charset="utf-8" /> </head> <body> <p> Hello <a href="planet.html">World</a>! <br /> <img src="pic.png" alt="a globe" /> </p> </body> </html> Structure of Example Computer Science and Engineering n The Ohio State University html lang: en element attr name: attr value head body text title meta p charset: utf-8 Hello a ! br img href: planet.html src: pic.png alt: a globe Something Short World and Sweet HTML Entities Computer Science and Engineering n The Ohio State University o Familiar problem: Encoding n Is <br /> a tag or (literal) content? n Meta-characters (e.g. '<') need to be escaped o HTML entities represent a literal &#dddd; n Where dddd is the "unicode code point" (as a decimal number) &#xhhhh; n Where hhhh is the code point in hex &name; n Where name is from a small set (lt, gt, amp…) o Examples: < < < ♥ ♥ ♥ Kinds of Elements Computer Science and Engineering n The Ohio State University 1. Document structure elements n Root of tree is always <html> n Two children: <head>, <body> 2. Head elements n (Meta) information about document 3. Body elements 1. Block o Content that stands alone o Starts new line of text o May contain other elements (block or inline) 2. Inline o Intimately part of surrounding context o Does not interrupt "flow" of text o May contain other inline elements Block vs Inline Computer Science and Engineering n The Ohio State University flow body inline paragraph heading horz rule blocks Demo: 3D View in FF Dev Tools Computer Science and Engineering n The Ohio State University Required Structure for HTML5 Computer Science and Engineering n The Ohio State University html lang: en element attr name: attr value head body text title meta charset: utf-8 Common Head Elements Computer Science and Engineering n The Ohio State University o <title>: required, must be only text n May be displayed in window title bar o <script>: client-side code to run o <link>: other documents to use n Commonly used for style information o <meta>: information about the information (document) n <meta http-equiv="…" content="…" /> becomes a header field in HTTP response! <meta http-equiv="Content-Type" content= <meta http-equiv="Location" content=… <meta http-equiv="Last-modified" content=… n <meta name="keywords" content="…" /> Common Block Elements in Body Computer Science and Engineering n The Ohio State University o Text n Paragraph <p>, horizontal rule <hr> n Headings <h1> <h2> … <h6> n Preformatted <pre>, quotations <blockquote> o Lists n Ordered <ol>, unordered <ul>, definition <dl> n Item in list <li> (<dt> <dd> for definitions) o Table <table> o Form <form> (and some form elements) o Sectioning (HTML 5) n Article <article>, section <section> n Header <header>, footer <footer> n Canvas <canvas> o Generic container for flow content <div> Common Inline Elements Computer Science and Engineering n The Ohio State University o Anchor <a> o Phrasing and text n Emphasis <em>, strong emphasis <strong> n Code snippet <code> n Inline quotation <q> n Inserted text <ins>, deleted text <del> o Image <img> o Form elements o Generic container within flow content <span> o Visual markup: deprecated n Bold <b>, italic <i>, underline <u> n Typewriter font <tt> n Font control <font> And Don't Forget Comments Computer Science and Engineering n The Ohio State University o Comments set off by <!-- … --> o Beware: they do not nest Tables Computer Science and Engineering n The Ohio State University o Row <tr> o Cell of data <td> o Header cell (for row or column) <th> o Caption <caption> o And some more exotic ones too n Header (repeat if splitting) <thead> n Body <tbody> n Footer (repeat if splitting) <tfoot> Table Example Computer Science and Engineering n The Ohio State University <table> <caption> Important Dates in CSE 3901 </caption> <tr> <th scope="col">Quiz</th> <th scope="col">Day, time</th> </tr> <tr> <th scope="row">Midterm 1</th> <td> Friday, Sept 21, in class</td> </tr> <tr> <th scope="row">Midterm 2</th> <td> Monday, Oct 22, in class</td> </tr> <tr> <th scope="row">Final</th> <td> Wednesday Dec 12, 12:00–1:45 </td> </tr> </table> Table Example Rendered Computer Science and Engineering n The Ohio State University Hyperlinks Computer Science and Engineering n The Ohio State University o Anchor tag with href attribute <a href=…>some text</a> some text o Clickable element o Click results in: an HTTP request