Definition list , , - Web Access for Home
advertisement
CMPT241 Web Programming More HTML 2 A few things • You may view each other’s work online now! • When was HTML 5 created? ▫ finalized and published in October 2014! ▫ initialized in 2004 ▫ became well known in 2010 • allowfullscreen in iframe 3 Homework 1 • Deadline: Monday 11:59pm ▫ Make it your weekly routine • Have your name in the page title • Summary of what you have learned • Link to the homework on the home page ▫ No need to email • The page needs to be representable • Check your page from the public url • You shouldn’t use the same examples we did in class 4 A few miscellaneous elements • Superscript and subscript (inline) ▫ <sup>element</sup> ▫ <sub>element</sub> ▫ <p> ▫ x<sub>t</sub> = v<sub>0</sub>t + at<sup>2</sup> ▫ </p> 5 A few miscellaneous elements • Abbreviation ▫ <abbr title = “”>content</abbr> ▫ <p><abbr title = “Please Excuse my Dear Aunt Sally”>PEMDAS</abbr></p> 6 HTML 5 embedding an audio • New in HTML5: audio and video • Before: object ▫ <p><audio src = “test.mp3” controls = “controls”></audio></p> • play in the background without visible appearance ▫ autoplay = “autoplay” ▫ loop = “loop” 7 HTML 5 embedding a video • <video src = "test.ogg" width = "320" height = "150" controls = "controls" ></video> • can use all attributes introduced in audio ▫ muted 8 Embedding a YouTube video <iframe src="https://www.youtube.com/embed/QRQv74J7o Sk" width="420" height="345"> </iframe> 9 Web Standards • Why use valid HTML and web standards? ▫ more rigid and structured language ▫ more interoperable across different web browsers ▫ more likely that our pages will display correctly in the future ▫ easier for search engines to examine 10 W3C HTML Validator <p> </p> <a href="http://validator.w3.org/check/referer"> Validate this page </a> HTML • validator.w3.org • checks your HTML code to make sure it meets the official strict HTML specifications ▫ Start from the first error • more picky than the browser 11 What is HTML 5? • a new W3C standard version of the HTML markup language • successor to HTML 4.01 and XHTML 1.1 • balance between too-loose-ness of HTML 4 and too-strict-ness of XHTML • reduces the browser's need for plugins to display content, e.g. multimedia • make web content more rich, semantically meaningful, descriptive, accessible 12 • www.w3schools.com 13 Web page metadata <meta> <meta name="description" content=“Harry Potter Official Website." /> <meta name="keywords" content="harry potter, harry potter and the deathly hallows, deathly hallows" /> HTML • data about data ▫ information about your page (for a browser, search engine, etc.) • placed in the head of your HTML page • meta tags often have both the name and content attributes 14 <meta> Name Value Description charset utf-8 International character set used by the page name author description keywords http-equiv generator what software was used to create this page revised date when the page was late updated refresh time and/or URL to which the browser should redirect 15 meta element to describe the page <head> <meta charset = “utf-8” /> <meta name="author“ content="web page's author" /> <meta name="revised“ content="web page version and/or last modification date" /> <meta name="generator“ content="the software used to create the page" /> </head> HTML • http://www.w3schools.com/charsets/ 16 meta element to aid search engines <meta name="description” content="how you want search engines to display your page" /> HTML • Google usually uses the content of your meta description tag as their short snippet to display in the search results, along with the page’s title. ▫ https://support.google.com/webmasters/answer/356 24?hl=en&ref_topic=2370570 17 Redirecting <meta http-equiv="refresh” content="how often to refresh the page (seconds)" /> HTML • The meta refresh tag can also redirect from one page to another <meta http-equiv="refresh” content=“5" /> <meta http-equiv="refresh” content=“5;url = http://www.manhattan.edu" /> HTML
