Loading...
HTML5, the Web & the Mobile
Press → key to continue.
What is HTML5?
HTML5 = HTML + CSS3 + Javascript
CSS3
- Border Radius
- Transitions
- Animation
- Media Queries
- Text Shadow
Border Radius
border-radius
Syntax: border-radius: <X px >;
Transition
mouse hover
Syntax: transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;
Animation
mouse hover
Syntax: animation: <animation-name> <transition-duration> ;
Media Queries
Text Shadow
This text has shadow
Syntax: text-shadow: [X offset] [Y offset] [Blur size] [Colour];;
HTML5 Tags
- nav tag
- figure tag
- article tag
- section tag
- Many more semantic tags
HTML5 video tag
<video width="320" height="240" controls="controls">
<source src="video/movie.mp4" type="video/mp4"/>
<source src="video/movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
<source src="video/movie.mp4" type="video/mp4"/>
<source src="video/movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
HTML5 audio tag
<audio width="320" height="240" controls="controls">
<source src="audio/movie.mp4" type="audio/mp4"/>
<source src="audio/movie.ogg" type="audio/ogg" />
Your browser does not support the audio tag.
</audio>
<source src="audio/movie.mp4" type="audio/mp4"/>
<source src="audio/movie.ogg" type="audio/ogg" />
Your browser does not support the audio tag.
</audio>
Javasctipt APIs
- Canvas API
- Request Animation Frame
- Local Storage
- Session Storage
- getUserMedia()
Canvas API
Request Animation
Local Storage
| Status | No key-value pair written yet |
| Enter Key | |
| Enter Value | |
Session Storage
| Status | No key-value pair written yet |
| Enter Key | |
| Enter Value | |
getUserMedia()
- Really new API
- Can be used for video streaming
- Online Conference Applications