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
Something Short and Sweet Hello World!
Example
Computer Science and Engineering n The Ohio State University
Something Short and Sweet Hello World!
Example (Rewritten)
Computer Science and Engineering n The Ohio State University
Something Short and Sweet Hello World!
Type Declaration for HTML 5
Computer Science and Engineering n The Ohio State University
Something Short and Sweet Hello World!
Document Type Declarations
Computer Science and Engineering n The Ohio State University o HTML 5 o HTML 4.01 o XHTML 1.0 Strict Type Declaration for HTML 5
Computer Science and Engineering n The Ohio State University
Something Short and Sweet Hello World!
Element Tags: Nested Start/End
Computer Science and Engineering n The Ohio State University
Something Short and Sweet start tag content end tag
Hello World!
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
Something Short and Sweet Hello World!
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
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 n Two children:
, 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
: 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</p><p>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</p><p>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</p><p>Computer Science and Engineering n The Ohio State University o Comments set off by <!-- … --> o Beware: they do not nest Tables</p><p>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</p><p>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></p><p></tr> <tr> <th scope="row">Final</th> <td> Wednesday Dec 12, 12:00–1:45 </td> </tr> </table> Table Example Rendered</p><p>Computer Science and Engineering n The Ohio State University Hyperlinks</p><p>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 n GET request n URL from value of href attribute o What about arguments? n Must be “hard coded” into href <a href="summary?lang=en">notes</a> Forms</p><p>Computer Science and Engineering n The Ohio State University o More general mechanism for client to make HTTP requests n GET or POST <form action="path" method="get"> n HTTP arguments come from inputs <input… name="color"> o User Input: <input type=" "> n Text fields <input type="text"… n Radio buttons <input type="radio"… n Checkboxes <input type="checkbox"… n Hidden <input type="hidden"… o Button <button> n Type "submit" means send the request o Information (not input): <label> Example</p><p>Computer Science and Engineering n The Ohio State University <form action="/my-handling-form-page" method="post"> <div> <label for="name">Name:</label> <input type="text" id="name" name="user_name" /> </div> <div> <label for="mail">E-mail:</label> <input type="email" id="mail" name="user_mail" /> </div> <div> <label for="msg">Message:</label> <textarea id="msg" name="user_message"></textarea> </div></p><p><div class="button"> <button type="submit">Send your message</button> </div> </form> Form Rendered</p><p>Computer Science and Engineering n The Ohio State University Form Modified by User</p><p>Computer Science and Engineering n The Ohio State University Form Submitted</p><p>Computer Science and Engineering n The Ohio State University o HTTP request has n Verb from form's method n URL from form's action o Inputs determine request arguments n Name attribute is argument name n Value (usually user controllable) is argument value o When button with type "submit" is clicked: POST /my-handling-form-page HTTP/1.1 Host: www.example.com Content-Type: application/x-www-form-urlencoded Content-Length: 69</p><p> user_name=Brutus&user_mail=buckeye%40osu.edu&user _message=hello+world Summary</p><p>Computer Science and Engineering n The Ohio State University o Evolution of HTML: HTML 5 n Tension between permissive and strict n Page validation o An HTML document is a tree n Elements are nodes, text is leaves n Elements have attributes o Head elements: meta information o Body elements: content n Block elements n Inline elements o Tables and Forms</p>
</div>
</article>
</div>
</div>
</div>
<script type="text/javascript" async crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8519364510543070"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var docId = '1c875e223df814ee01b68bdfc73d90e2';
var endPage = 1;
var totalPage = 36;
var pfLoading = false;
window.addEventListener('scroll', function () {
if (pfLoading) return;
var $now = $('.article-imgview .pf').eq(endPage - 1);
if (document.documentElement.scrollTop + $(window).height() > $now.offset().top) {
pfLoading = true;
endPage++;
if (endPage > totalPage) return;
var imgEle = new Image();
var imgsrc = "//data.docslib.org/img/1c875e223df814ee01b68bdfc73d90e2-" + endPage + (endPage > 3 ? ".jpg" : ".webp");
imgEle.src = imgsrc;
var $imgLoad = $('<div class="pf" id="pf' + endPage + '"><img src="/loading.gif"></div>');
$('.article-imgview').append($imgLoad);
imgEle.addEventListener('load', function () {
$imgLoad.find('img').attr('src', imgsrc);
pfLoading = false
});
if (endPage < 7) {
adcall('pf' + endPage);
}
}
}, { passive: true });
</script>
<script>
var sc_project = 11552861;
var sc_invisible = 1;
var sc_security = "b956b151";
</script>
<script src="https://www.statcounter.com/counter/counter.js" async></script>
</html> 