HTML – Hypertext Markup Language

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: < < < ♥ ♥ &hearts; 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

HTML – Hypertext Markup Language

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support