is more appropriate
Don’t use

unless there is naturally a heading at the start of
the section

Defining Sections of a Web Page with

Element
•

– a section of a page that links to other pages or to parts within the page; a

section with navigation links
• In the following example, the page has several places where links are present, but only

one of those places is considered a navigation section.

Wake up sheeple!

News –

Blog –
Forums

Last Modified: 2009-04-01

My Day at the Beach

Defining Sections of a Web Page with

Element
•

– a component of a page that consists of a self-contained portion intended to be

independently distributable or reusable;
– This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted

comment, an interactive widget or gadget, or any other independent item of content; Here is
an example of a blog post showing an article followed by two comments:

The Very First Rule of Life

If there’s a microphone anywhere near you, assume it’s hot and sending

whatever you’re saying to the world. Seriously.

…

Comments

Yeah! Especially when talking about your lobbyist friends!

Hey, you have the same first name as me.

Video on the Web

• HTML5 defines a standard way to embed video in a web page, using a

• Video container files include video and audio files
• There are lots of competing container files, e.g.

– MPEG4 compressed video (mp4 or m4v)
– QuickTime (.mov)
– Flash Video (.flv) from Adobe
– Ogg (.ogv) open source
– WebM (VP8/VP9 video + Vorbis audio), from Google
– Audio Video Interleave (.avi), invented by Microsoft

Video Codecs
• There are lossy and lossless video codecs. Lossless video is much too big to be useful on the

web. A lossy video codec means that information is being irretrievably lost during encoding.
• Popular video codecs are:

– MPEG-4 (also known as MPEG4 Part 2)
– H.264 (also known as MPEG4 Part 10), a.k.a. Advanced Video Coding (AVC)
– H.265, successor to H.264 (doubles video compression and supports 8K UHD), a.k.a.

High Efficiency Video Coding (HEVC) or MPEG-H part 2, used in FaceTime
– Theora
– VP8 open source codec, formerly from On2, now Google WebM
– VP9, successor to VP8 (doubles video compression)
– Sorenson Spark (H.263 variant) from Adobe

• The H.264 standard is split into “profiles,” defining a set of optional features that trade
complexity for file size. Higher profiles use more features, offer better visual quality at
smaller file sizes, take longer to encode, and require more CPU power to decode in real-time.

• Apples iPhone 12 supports H.264 video format: playback in 1080p (30 & 60 fps), MPEG4 (30
fps), 4K (24, 30 and 60 fps), also supports H.265 (HEVC) for FaceTime; Apple TV 4K (5th gen.)
set-top box supports H.264 video up to 2160p (60 fps) and MPEG-4 video (30 fps), Main 10
profile; and Adobe Flash on a desktop PC supports Baseline, Main, and High profiles.

• YouTube uses H.264 to encode HD videos (Google dropped Flash, replaced by HTML5 video).
http://www.theverge.com/2015/1/27/7926001/youtube-drops-flash-for-html5-video-default

http://en.wikipedia.org/wiki/H.264

Video Codecs (recent development)
• The H.264 vs. WebM video “war” has ended.
• On March 2012 Firefox CTO “capitulated” and decided to support H.264. See:
http://news.cnet.com/8301-30685_3-57397031-264/mozilla-execs-capitulate-in-h.264-web-video-war/

• HTML5 / H.264 now supported by YouTube. See:
http://www.youtube.com/html5

• On March 7, 2013, Google admitted its VP8/WebM codec infringes MPEG H.264 patents,
and agreed to pay to license H.264 patents, see

http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8

• As of January 2016, H.264 reigns supreme, Flash video on life support, see

H.264 and HLS Reign in Online Video, Finds Encoding.com Report

• Adobe system “retired” Flash at the end of 2020. See:
http://www.scmp.com/tech/enterprises/article/2104092/adobe-systems-retiring-flash-end-2020
https://www.adobe.com/products/flashplayer/end-of-life.html

http://news.cnet.com/8301-30685_3-57397031-264/mozilla-execs-capitulate-in-h.264-web-video-war/
http://www.youtube.com/html5
http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8

H.264 and HLS Reign in Online Video, Finds Encoding.com Report

http://www.scmp.com/tech/enterprises/article/2104092/adobe-systems-retiring-flash-end-2020
https://www.adobe.com/products/flashplayer/end-of-life.html

Audio Codecs
• And like lossless video, lossless audio is really too big to put on the web.
• The audio codec specifies how to decode the audio stream and turn it into digital waveforms

that your speakers then turn into sound.
• On the web, there are really only three audio codecs you need to know about:

– MP3
• MP3s can contain up to 2 channels of sound. They can be encoded at different

bitrates: 64 kbps, 128 kbps, 192 kbps, and a variety of others from 32 to 320.
Higher bitrates mean larger file sizes and better quality audio,

– Advanced Audio Encoding, (AAC and AAC+)
• It is the default format for Apple’s iTunes
• It supports up to 48 channels of sound

– Vorbis
• Usually comes in a Ogg container
• Android phones can play Vorbis audio

HTML MarkUp of Video

• To insert a video file in a web page use the

• The

• you can tell the browser to display a built-in set of controls. To do this, just include
the controls attribute in your

http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html

Using Attributes preload and autoplay for Video
• The preload attribute tells the browser that you would like it to start

downloading the video file as soon as the page loads. This makes sense if the
entire point of the page is to view the video. On the other hand, if it’s just
supplementary material that only a few visitors will watch, then you can set
preload to none to tell the browser to minimize network traffic.

• Here’s an example of a video that will start downloading (but not playing) as soon
as the page loads:

• And here’s an example of a video that will not start downloading as soon as the
page loads:

• The autoplay attribute tells the browser that you want to start downloading the
video file as soon as the page loads, and you would like it to start playing the video
automatically as soon as possible. Mostly blocked by browsers, unless muted.

• Here’s an example of a video that will start downloading and playing as soon as
possible after the page loads:

HTML5 Video Example
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all

Video Attributes

Audio

localStorage
• localStorage is a client-side key-value database,

– data is stored in the user’s browser and remains there even across sessions (open/close
browser)

– data is only available when on that machine and in that browser.
– localStorage is per browser not per computer.
– localStorage only supports storing of strings

• Below is an example of local storage that counts the number of clicks on a button

Click the button to see the counter increase.

Close the browser tab (or window), and try again, and the counter will continue to count (is not

reset).

See: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_local_clickcount
(C) 2011 – 2021 Ellis Horowitz 26

Session Storage
• Session storage is designed for scenarios where the user is carrying out a single

transaction, but could be carrying out multiple transactions in different windows at
the same time.

• To address this, this specification introduces the sessionStorage IDL attribute
(An IDL attribute determines the behavior of script data). Sites can add data to the
session storage, and it will be accessible to any page from the same site opened in
that window. The sessionStorage object is equal to the localStorage
object, except that it stores the data for only one session. The data is deleted
when the user closes the specific browser tab.

• For example, a page could have a checkbox that the user ticks to indicate that he
wants insurance:

I want insurance on this trip.

• A later page could then check, from script, whether the user had checked the
checkbox or not:

if (sessionStorage.insurance) { … }
• If the user had multiple windows opened on the site, each one would have its own

individual copy of the session storage object.

View Some New HTML5 Capabilities

• Go to https://bestvpn.org/html5demos/ and select your favorite browser,
e.g., Firefox, and try these examples:
– Drag files directly into your browser

• Try it with an image
– Interactive canvas gradients

• Move mouse across gradient
Then View Source

– Content editable
• Edit some text and then restore

– Geolocation
• Try it

• More significant examples
of content editable and geolocation
can be found at
https://csci571.com/examples.html#html5

https://bestvpn.org/html5demos/
https://csci571.com/examples.html

Drag an Image from Desktop to drop Zone

Before
After

Image

Geolocation Example

Chrome Firefox Safari

Apple support for HTML5

https://developer.apple.com/safari/whats-new/

Some Other HTML5 Video Examples
• A good HTML5 Audio and Video guide is available at:
http://developer.apple.com/library/safari/#documentation/A

udioVideo/Conceptual/Using_HTML5_Audio_Video/Introductio
n/Introduction.html

http://developer.apple.com/library/safari/

HTML5 Also Introduces Many New APIs
http://alebelcor.blogspot.com/2011/10/html5-apis.html

http://alebelcor.blogspot.com/2011/10/html5-apis.html

HTML5 Logo

http://www.w3.org/html/logo/

More Articles on the Flash vs HTML5 Controversy

• Adobe to More Aggressively Contribute to HTML5
http://blogs.adobe.com/flashplatform/2011/11/flash-to-focus-on-pc-

browsing-and-mobile-apps-adobe-to-more-aggressively-contribute-to-
html5.html

• Comparison of speed of Flash and HTML5
http://www.appleinsider.com/articles/10/03/10/flash_html_5_comparison_finds_neither_has_p

erformance_advantage.html

• SproutCore:
http://www.appleinsider.com/articles/10/04/19/sproutcore_debuts_new_html5_web_developm

ent_tools.html
https://sproutcore.com/

http://blogs.adobe.com/flashplatform/2011/11/flash-to-focus-on-pc-browsing-and-mobile-apps-adobe-to-more-aggressively-contribute-to-html5.html
http://www.appleinsider.com/articles/10/03/10/flash_html_5_comparison_finds_neither_has_performance_advantage.html
http://www.appleinsider.com/articles/10/04/19/sproutcore_debuts_new_html5_web_development_tools.html
https://sproutcore.com/

More HTML5 fun….

• http://www.chromeexperiments.com/
• http://www.creativebloq.com/web-design/examples-of-html-1233547
• https://www.noupe.com/essentials/freebies-tools-templates/40-beautiful-free-

html5-css3-templates.html
• http://html5gallery.com
• https://www.juicebox.net/demos/
• http://wowslider.com/html5-gallery-puzzle-collage-demo.html

video element (added many more attributes):
https://html.spec.whatwg.org/#video

• audio element:
https://html.spec.whatwg.org/#audio

https://html.spec.whatwg.org/
https://html.spec.whatwg.org/

CS计算机代考程序代写 javascript database Java android Hive HTML5

Apples

Tasty, delicious fruit!

Red Delicious

Granny Smith

The Very First Rule of Life

Comments