CMPT241 Web Programming More HTML

Homework 1 Summary of what you have learned Link to the homework on the home page The page needs to be representable Check your page from the public url ▫Pictures are not displayed ▫You shouldn’t use the same examples we did in class ▫You may start a page and make it more perfect every week. 2

A few miscellaneous elements Superscript and subscript (inline) ▫ element ▫ ▫ x t = v 0 t + at 2 ▫ 3

A few miscellaneous elements Abbreviation ▫ content ▫ PEMDAS 4

HTML 5 embedding an audio New in HTML5: audio and video Before: object ▫ play in the background without visible appearance ▫ autoplay = “autoplay” ▫ loop = “loop” 5

HTML 5 embedding a video can use all attributes introduced in audio ▫ muted 6

Embedding a YouTube video 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

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 Validate this page HTML

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

11

Web page metadata 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 name="description" content=“Harry Potter Official Website." /> HTML

NameValueDescription charsetutf-8International character set used by the page nameauthor description keywords generatorwhat software was used to create this page reviseddate when the page was late updated http-equivrefreshtime and/or URL to which the browser should redirect 13

meta element to describe the page 14 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. ▫ 24?hl=en&ref_topic= https://support.google.com/webmasters/answer/356 24?hl=en&ref_topic= HTML

Redirecting The meta refresh tag can also redirect from one page to another 16 HTML HTML