| Date post: | 08-Jan-2017 |
| Category: |
Technology |
| Upload: | sayed-ahmed |
| View: | 56 times |
| Download: | 0 times |
1
RANDOM HTML 5 STUFF: INTRODUCTION TO HTML5
This document is created when I was creating a video and was typing. Just improved by little bit, not much
HTML is not rocket science.. Anyway, HTML5 Any application, having web-based user
interface, in general, will use HTML HTML5 is the most recent version of HTML.. Just an example of HTML5 document structure...
2
BY THE WAY THIS IS
Sayed Ahmedhttp://sayed.justetc.netSoftware/Web/Mobile Architect/Engineer/Developer
3
All of our services http://www.sitestree.com/our-services/
Our training services In English:
www.SaLearningSchool.com English.SaLearningSchool.com, www.SitesTree.com
In Bangla: Bangla.SaLearningSchool.com Blog.SaLearningSchool.com
Ask a question and get answers : Ask.JustEtc.net
Offline IT Training (Occasional): University.JustEtc.net
4
HTML 5 So you can see the structure of a well structured
HTML5 document view-source:http://www.justetc.net/ It is kind of modified than I showed in the video
The doctype <!DOCTYPE html> is simple Previously you had transitional, strict, loose... Loose-> do not care for perfectness that much Transitional -> better, somewhat
forgiving...usually the common choice Strict -> your HTML need to be perfect...
5
HTML 5 <meta charset="utf-8"> is important in html
5 These were there before (I mean, before
HTML 5 <meta name="description" content="Your
description"> <meta name="keywords" content="Your
keywords"> <meta name="author" content="Your name">
Meta stuff
6
MISC HTML STUFF Metas can be good for SEO for some
search engines.. Google reduced importance on meta
tags recently.. Links to CSS and JS as usual...
7
SUPPORTING HTML 5 TAGS FOR IE VERSIONS <!--[if lt IE 8]> <div style=' clear: both; text-align:center; position: relative;'> <a href="http://windows.microsoft.com/en-US/internet-explorer/products/
ie/home?ocid=ie6_countdown_bannercode"> <img
src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a> </div> <![endif]--> <!--[if lt IE 9]> <script type="text/javascript" src="js/html5.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="css/ie.css"> <![endif]-->
8
SUPPORTING HTML 5 TAGS FOR IE VERSIONS
So you can see that in the html5.js, we are creating HTML5 related tags that are not supported in those browsers..lt IE 9
Anyway, you can see here the main and newer HTML 5 tags...
In our example, document we will use..
9
SUPPORTING HTML 5 TAGS FOR IE VERSIONS
<!--[if lt IE 8]> <!--[if lt IE 9]> These are to handle some situations for IE
versions 8 and 9 IE8 and before do not support some new
HTML5 tags.. So one approach is, we create some
elements for the new HTML5 tags such as section aside and similar
10
SUPPORTING HTML 5 TAGS For HTML5 non-compliant browsers
other than IE, supply the following CSS (similar) Article, section, header, footer {
display:block; }
11
HTML 5 TAGS Header -> to create a header section Footer to create a footer section Before HTML 5, you could use div to
create sections, however, div itself does not indicate section
Using CSS, you can, and actually you did defined/divided sections
In HTML5, sections are defined using section, header, footer tags...
12
HTML 5 TAGS You can use the nav tag to define navigation
menu/section We actually could use section in addition to header
and footer tags Esp. For the content section -> to define content section
So section is used as well (I mean in the example code)
article tag is used to define an article aside, just to put something on the side – not part
of the main structure...
13
HTML 5 DIFFERENCES Just a few more notes on HTML5
In HTML 4, the sections are not precise with tags like div unless you assign some styles to them.
For defining sections, you do not need div tags but header tags (h1..h6) can imply sections.
HTML4 is very imprecise on what a section is and what is it's scope.
I just told, divs do not indicate sections unless you assign meaningful CSS classes to them, h1 to h6 could define sections
Actually, some of the above information are based on Mozilla Firefox resources on HTML5, check their site..
14
HTML 5 AND H1..H6 TAGS This is important
In HTML5, tags such as h1, h2,...h6 are relative to the current section not relative to the whole page
You know that unless you customize the style, h1 to h6 decreases font-sizes..
In HTML 5, this relativeness/relative sizes are related to the current section
So, you can see h1 size text in different sections using h1 tags
15
HTML 5 DOCUMENT OUTLINE/STRUCTURE article, section, nav and aside
are always subsections to their nearest sections; they are not dependent on header tags
In HTML 4, everything belongs to the main outline of the web-page.
In HTML5, aside does not belong to the main outline. Can be used for advertising blocks
About aside -> does not belong to the main web-page outline
16
HTML 5 DOCUMENT OUTLINE/STRUCTURE In HTML5, nav, header, footer do not belong to the
content but to the whole site nav, header, footer are not for content...as the name says
For browsers, other than IE, if they do not support HTML5 yet, we can just create the following CSS classes to make the new tags known section, article, aside, footer, header, nav, hgroup
{ display:block; } For IE and versions less than 9, we need to create the
elements as well using JS
Also, as I told before...
17
LET’S SEE SOME NEW FEATURES OF HTML5
As the article on the left tells, some new HTML 5 tags are <nav>: for navigation menu, is not part of content , <header>, to define header section, does not
belong to content <footer>, to define footer section, does not belong
to content and <figure>: to show figure in the content area
You can use figcaption to define the caption of the figure Figure, diagrams, and similar
18
SOME NEW HTML5 TAGS <figure>
<img src="/macaque.jpg" alt="Macaque in the trees"> <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <ahref="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption></figure>
19
HTML5, FIGURE TAG You could do without figure tag...and
using img tag; however, figure tags make the rendering and grouping easy
HTML5 also tells browsers how to render
Previous HTML specifications did not define that, and the browsers were free to render on their own way...
20
HTML 5 RULES HTML 5 provides precise rules on how
to handle the HTML elements, and how to recover from errors to
provide interoperability. Hence, if browsers implement the
specifications correctly, you will have less cross browser issues with html 5
21
HTML 5 AT A GLANCE Check the short-note at
http://salearningschool.com/displayArticle.php?table=Articles&articleID=1318
22
HTML5 SERVER-SENT EVENTS Servers can push data Remote scripts sending updates How to check if the browser supports it or not SSE is supported by all major browsers except
Internet Explorer. if(typeof(EventSource)!=="undefined") { // Yes! } else { // Sorry! No }
The code to check for browser support for other similar HTML 5 features will also be similar to the above code
23
HTML5 SERVER-SENT EVENTS <?php
header('Content-Type: text/event-stream'); header('Cache-Control: no-cache');
$time = date(); echo ("Server time: {$time}"); flush(); ?>
24
SSE AND WEB-WORKER Server is sending message, client is
displaying... HTML5 now can do it You could do using Ajax previously..
HTML 5 Web Worker A Web Worker is a JavaScript Code running
in the background without interfering (delaying) user interactions.
25
HTML5 APPLICATION CACHE
< html manifest="manifest_file.appcache" >
Control caching from client side HTML5 Web Storage
Offline storage This is cookie like storage but more secure
and faster.
26
HTML5 FORM ATTRIBUTES autocomplete, novalidate are the two new
attributes for the form tag. novalidate indicates when the form will be
submitted, no validation will be performed on the data.
HTML 5 form attributes autocomplete, autofocus, form, formaction,
formenctype, formmethod, formnovalidate, formtarget, height and width, list, min and max, multiple, pattern (regexp), paceholder, required, step
Using pattern attribute, you can define regex for validation
27
HTML5 NEW FORM ELEMENTS HTML5 New Form Elements
datalist: pre defined list of data for an input element
keygen: generates public key and private key
output: used to keep output data
28
SOME NEW INPUT TYPES IN HTML5 Copy the following code and open in a browser
<input type="color" name="..."> <input type="date" name="..."><input type="datetime" name="..."><input type="datetime-local" name="..."><input type="email" name="..."><input type="month" name="..."><input type="number" name="..." min="1" max="5"><input type="range" name="..." min="1" max="10"><input type="search" name="..."><input type="tel" name="..."><input type="time" name="..."><input type="url" name="..."><input type="week" name="...">
29
SOME NEW INPUT TYPES IN HTML5 You can find some cool controls such as
Color picker and Date controls
30
HTML5 AND AUDIO/VIDEO Audio and video are two main selling
points for HTML5 <audio controls="controls">
<source src="xyz.ogg" type="audio/ogg"> <source src="xyz.mp3" type="audio/mpeg"> </audio>
31
HTML5 VIDEO Supported by: Internet Explorer 9,
Firefox, Opera, Chrome, and Safari <video width="320" height="240"
controls="controls"> <source src="xyz.mp4" type="video/mp4"> <source src="xyz.ogg" type="video/ogg"> </video>
32
LOCATION TRACKING WITH GEOLOCATION HTML5 Geolocation navigator.geolocation.getCurrentPositio
n can be used to find user's current position
33
HTML5 DRAG AND DROP Any element is draggable The element you want to drag needs to use
the attribute draggable="true"; You need to use ondragstart and setData() to
specify what should happen on drag event. ondragover mentions where the dragged
data can be dropped. Example
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
34
HTML5 INLINE SVG: SUPPORTING VECTOR GRAPHICS
In HTML5, you can use SVG tag to include vector graphics. SVG defines graphics in xml format. Vector Graphics are independent of resolution, can have events, can be manipulated without being redrawn
Vector graphics are good in the sense that quality does not degrade with resolution changes
35
CANVAS FOR DRAWING (SIMPLE DRAWING)
<canvas id="myCanvas" width="200" height="100"></canvas>
to draw <script type="text/javascript">
var c=document.getElementById("canvas_id"); var ctx=c.getContext("2d"); //java like drawing...ctx.fillStyle="#FFFF00"; ctx.fillRect(0,0,200,100); </script>
36
NEW ELEMENTS IN HTML5
article, aside, bdi, command, details, summary, figure, figcaption, footer,
37
NEW ELEMENTS IN HTML5 header, hgroup, mark, meter, nav, progress, ruby, rt, section, time, wbr
38
WAS SHOWING A DEMO HTML 5 SITE This is a HTML site... type="email“ is used It used iframe for video Did not use video tag.. You can find some HTML5 and video tag related
custom library Tried such control in a project Though playing in phone was pretty slow...probably it
was not even showing up...anyway..later the requirements changed and no further work were done on that
39
VIDEO.JS, HTML5 VIDEO PLAYER Video.js that is what I was talking
about... HTML5 video player... Here, you can see the use of different
html5 tags That’s all for now...
