1 / 15

CMPT241 Web Programming

Learn about HTML elements such as superscript, subscript, abbreviations, and embedding audio and video. Understand the importance of using valid HTML and adhering to web standards. Explore metadata and redirecting techniques in HTML.

janiceporter
Download Presentation

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><abbr title = “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="https://www.youtube.com/embed/Dv7gLpW91DM" width="400" height="300"> </iframe>

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

  8. <p> <a href="https://validator.w3.org/check/referer"> Validate this page </a> </p> HTML W3C HTML Validator • 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. <meta name="description" content=“Harry Potter Official Website." /> <meta name="keywords" content="harry potter, harry potter and the deathly hallows, deathly hallows" /> HTML Web page metadata <meta> • 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

  12. <meta>

  13. <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 meta element to describe the page • http://www.w3schools.com/charsets/

  14. <meta name="description” content="how you want search engines to display your page" /> HTML meta element to aid search engines • 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

More Related