MODULE 2 HTML 5 FUNDAMENTALS HyperText > Douglas Engelbart (1925-2013)
Tim Berners-Lee's proposal In March 1989, Tim Berners- Lee submitted a proposal for an information management system to his boss, Mike Sendall. Vague, but exciting, were the words that Sendall wrote on the proposal, allowing Berners-Lee to continue. http://www.w3.org/history/1989/proposal.html What is HTML? > Invented in 1991 by Tim Berners-Lee > HTML = Hyper Text Markup Language > Contains data and metadata for how to display it > Can include text, images, audio, video, applications, and more > Can contain hyperlinks, which connect one page to another
> Quirks mode > HTML 2.0 > HTML 3.2 > HTML 4.01 > HTML 5 Versions of HTML HTML 5 > WHATWS The Web Hypertext Application Technology Working Group > W3C favored XHTML 2.0 > A group of related technologies > WHATWG and W3C versions > They do agree on HTML5 markup
The importance of HTML HTML CSS JS Essential structure Page Design Page Behavior The importance of HTML 5 > Semantic Web Web 3.0 > Programming Platform Canvas API WebGL Multi-media API Drag-and-Drop API GeoLocation API Web Storage API Local Database API File API
HTML Files > Hypertext Markup Language (HTML): It is a language used to define documents. Structure, layout, and content Documents contain hyperlinks. To navigate to other documents To include resources > In a web application, HTML: Defines the page layout Links to other pages References other files Contains forms HTML File Structure
HTML File Structure HTML File Structure
HTML Tag Scope HTML Head > Defines document properties: Title Encoding Viewport size Styles
HTML Body > Contains the document content, including: Text Paragraphs Areas (span, div) Forms Tables Scripts Working with Tags > HTML is mostly made up of markup tags > Tags are enclosed within angled brackets: < and > > Most tags have a corresponding closing tag > Each tag has its own meaning and effect <div> <h3> paragraph heading</h3> <p>a paragraph</p> </div> <table> <tr> <td></td> <td></td> </tr> </table>
Working with Tags > Tags can be embedded in other tags > Each tag has a set of possible attributes (properties) > Attributes are written into the opening tag > Also known as a webpage The HTML Document > Describes how to render a webpage > Can contain: HTML tags CSS blocks JavaScript blocks Plain text <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8" /> <title>an HTML document</title> </head> <body> <p>hello world!</p> </body> </html>
Content Elements > Content HTML elements Divs Spans Paragraphs > Most of the content elements hold: Text Other HTML elements <div>this is a division.</div> <span>this is a span.</span> <p>this is a paragraph.</p> HTML5 Content Elements > Each element in HTML falls into zero or more categories that group elements with similar characteristics together: Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content
Phrasing > <a>, <form>, <b>, <i>, <img>, <canvas>, <datalist>, <em>, <span>, <strong>, <video>, > Anything you put inside paragraph! Heading > <h1>,<h2>,<h3>,<h4>,<h5>, <h6> > <hgroup>
Sectioning > <article>, <aside>, <nav>, <section> Embedded > Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document. > <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>
Interactive > Interactive content is specifically intended for user interaction. Metadata > Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.
The Doctype Element > A declaration of document type > Must be provided by any HTML document > Defines the rendering mode of the browser > Was created to enable HTML parsing and validation <!doctype html> The New Elements in HTML5 > The canvas element > The video and audio elements > New content-specific elements: article, footer, header, nav, section, and more > New form controls: calendar, date, time, email, url, search, and more
Obsolete elements in HTML5 https://developers.whatwg.org/obsolete.html Obsolete attributes in HTML5 https://developers.whatwg.org/obsolete.html