Download presentation
Presentation is loading. Please wait.
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 can use all attributes introduced in audio
<video src = "test.ogg" width = "320" height = "150" controls = "controls" ></video> can use all attributes introduced in audio muted
6
Embedding a YouTube video
<iframe src=" DM" 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
W3C HTML Validator validator.w3.org
<p> <a href=" 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
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 content attributes Data useful for dreamweaver, frontpage Also helpful for validator
12
<meta> Name Value Description charset utf-8
International character set used by the page name author description keywords generator what software was used to create this page revised date when the page was late updated http-equiv refresh time and/or URL to which the browser should redirect
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. 24?hl=en&ref_topic=
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 = /> HTML
Similar presentations
