1 / 16

CMPT241 Web Programming

CMPT241 Web Programming. More HTML. 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>. A few miscellaneous elements. Abbreviation < abbr title = “”>content</ abbr >

vesta
Télécharger la présentation

CMPT241 Web Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CMPT241 Web Programming More HTML

  2. 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>

  3. A few miscellaneous elements • Abbreviation • <abbr title = “”>content</abbr> • <p><abbrtitle = “Please Excuse my Dear Aunt Sally”>PEMDAS</abbr></p>

  4. 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”

  5. HTML 5 embedding a video • <video src = "test.ogg" width = "320" height = "150" controls = "controls" ></video> • can use all attributes introduced in audio • muted

  6. Embedding a YouTube video <iframesrc=“http://www.youtube.com/v/eKgPY1adc0A” width="420" height="345“> </iframe>

  7. Web Standards • Why use valid HTMLand 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

  8. W3C HTML Validator <p> <a href="http://validator.w3.org/check/referer"> Validate this page </a> </p> 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

  9. 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

  10. www.w3schools.com

  11. 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 contentattributes

  12. <meta>

  13. 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

  14. 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/35624?hl=en&ref_topic=2370570

  15. 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

  16. Homework 1 • Create a separate html page using what we learned in this week • Summary • You may start a page and make it more perfect every week. • Create a link on your home page to link to the homework • Due by the end of the week

More Related