23. mos.bayomi@gmail.com
HEADER:
<header>
<h1>Heading Text</h1>
<p> Text or images can be included here</p>
<p> Logos are frequently placed here too</p>
</header>
The <header> tag can also contain an <hgroup> tag, as shown. The <hgroup> tag
groups headings together, using the <h1> to <h6> heading levels
shown here with a main heading and a sub-heading.
<header>
<hgroup>
<h1>Main Heading</h1>
<h2>Sub-heading </h2>
</hgroup>
<p> Text or images can be included here</p>
</header>
24. mos.bayomi@gmail.com
FOOTER:
The <footer> element contains information about a page, article, or section, such as
the author or date of the article.
As a page footer, it may contain copyright or other important legal information.
<footer>
<p>Copyright 2011 Acme United. All rights reserved.</p>
</footer>
The HTML5 specification says: ―A footer typically contains information about its
section such as
who wrote it, links to related documents, copyright data, and the like.‖
------------------------------------------------------------------------------------------------------------------
The Navigation area
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
26. mos.bayomi@gmail.com
<menu>
<button type="button" >Clio</button>
<button type="button" >Thalia</button>
<button type="button">Urania</button>
<button type="button">Calliope</button>
</menu>
------------------------------------------------------------------------------------------------------------------
<section>
The <section> element is commonly misused. Most people would think of using the
section tag as a container block level element to contain a portion of the site. This is
incorrect.
The true way to use the section element is to think of it in terms of grouping specific
portions of content. Inside a section you may have multiple headings to further narrow
the focus of the section and there may be multiple sections inside a particular piece of
content.
27. mos.bayomi@gmail.com
The <section> tag—and the <article> tag, as well—can contain headers, footers, or
any other components required to complete the section. The <section> tag is for
grouping content. The content for both the <section> tag and the <article> tag usually
starts with a <header> and ends with a <footer>, with the content for the tag in
between.
The <section> tag can also contain <article> tags, just as the <article> tag can contain
the <section> tag
------------------------------------------------------------------------------------------------------------------
<article>
<section> Content </section>
<section> Content </section>
</article>
------------------------------------------------------------------------------------------------------------------
<section>
<article> Content </article>
<article> Content </article>
</section>
29. mos.bayomi@gmail.com
<aside>
Think of this tag as holding supplementary content that is not part of the flow of the
article it supplements. In magazines, asides are frequently used to highlight a point
that was made in the article itself. The <aside> tag contains content that can be
removed without affecting the information conveyed by the article, section, or page
that contains it.
<p>My family and I visited Euro Disney last year.</p>
<aside>
<h4>Disney in France</h4>
<p>Besides Euro Disney, there is a Disneyland in California.</p>
</aside>
32. mos.bayomi@gmail.com
• Input type= datetime global date-and-time input control
• input type = datetime-local local date-and-time input control
• input type = date date input control
• input type = month year-and-month input control
• input type = time time input control
• input type = week year-and-week input control
• input type = number number input control
• input type = range imprecise number-input control
• input type = email e-mail address input control
• input type = url URL input control
• input type = search search field
• input type = tel telephone-number-input field
• input type = color color-well control
•
34. mos.bayomi@gmail.com
How to solve the problem for browsers that doesn’t support new input types
Ex
<form>
<input type="date" id="idate">
</form>
...
<script>
var idate = document.getElementById("idate");
if (idate.type != "date")
{
$("#idate").datepicker(); // using jQuery UI
}
</script>
40. mos.bayomi@gmail.com
The latest versions of Safari, Chrome, and Opera all do this.
(Sadly, the iPhone renders it as a simple text box. It doesn’t even optimize its
onscreen keyboard for numeric input.)
All other browsers simply treat the field as type="text"
42. mos.bayomi@gmail.com
The email INPUT tag gives you a way to request email addresses in your web form.
In most web browsers, this won't look any different than a standard .
Where this field becomes important is on mobile devices that change their interface
for email address fields, such as the iPhone, iPad, and iPod.
On those devices, email form fields are given a different keyboard with things like
readily available @-key, period, and minimized spacebar.
52. mos.bayomi@gmail.com
To use this combination:
1. Create a datalistelement in your document with its id set to a unique value.
The datalist can be located anywhere in the document.
2. Populate the datalist with as many option elements as needed to represent
the full set of suggestions for values of a control.
For example, a datalist representing e-mail contacts should contain all of the contact
e-mail addresses as individual option children.
<datalist id="contactList">
<option value="x@example.com" label="Racer X">
<option value="peter@example.com" label="Peter">
</datalist>
3. Link the input element to the datalistby setting the listattribute to a value
which is the idof the associated datalist.
<input type="email" id="contacts" list="contactList">
54. mos.bayomi@gmail.com
The valueMissing Constraint
Purpose: Ensure that some value is set on this form control
Usage: Set the requiredattribute on the form control to true
Usage example: <input type="text" name="myText" required>
Details: If the required attribute is set on a form control, the control will be in an
invalid state unless the user or a programmatic call sets some value to the field.
For example, a blank text field will fail a required check, but will pass as soon as any
text is entered. When blank, the valueMissing will return true.
58. mos.bayomi@gmail.commos.bayomi@gmail.com
What Is a Canvas?
When you use a canvas element in your web page, it creates a rectangular
area on the page.
By default, this rectangular area is 300 pixels wide and 150 pixels high, but
you can specify the exact size and set other attributes for your canvas
element.
66. mos.bayomi@gmail.commos.bayomi@gmail.com
To programmatically use a canvas, you have to first get its
context.
You can then perform actions on the context and finally apply
those actions to the context.
You can think of making canvas modifications as similar to
database transactions: you start a transaction, perform certain
actions, and then commit the transaction.
70. mos.bayomi@gmail.commos.bayomi@gmail.com
The first thing this script does is find the element with the
id draw-square:
var canvas = document.getElementById('draw-square');
Then it checks to see if the browser supports the context
method on this element.
This is an easy way to make sure that your canvas will only
display on browsers that support the tag.
if (canvas.getContext) { ... }
71. mos.bayomi@gmail.commos.bayomi@gmail.com
The context is the rendering context that is used to manipulate
content that is displayed.
You should use a 2-dimensional (2d) rendering context. But in
the future, 3-dimensional context may be supported.
Once I have the context, I need to build my square with the two
lines:
context.fillStyle = "rgb(150,29,28)";
context.fillRect (2,2,96,96);
I created a square that is red (rgb(150,29,28)) and is positioned
2 pixels down and 2 pixels over and 96 pixels wide and high
(fillRect (2,2,96,96)).
Then, in the else section of my script, I can put any JavaScript I
want to display if the canvas element isn’t supported.
74. mos.bayomi@gmail.commos.bayomi@gmail.com
Like other 2d platforms, it uses a flat Cartesian coordinate
system with the origin (0, 0) at the top left.
Moving to the right will increase the x value, and moving
downwards will increase the y value.
Understanding how the coordinate system works is integral if
you want to have things draw in the right place.
A single unit in the coordinate system is usually equivalent to 1
pixel on the screen, so the position (24, 30) would be 24 pixels
right and 30 pixels down.
84. mos.bayomi@gmail.com
var bg= new Image();
bg= "gravel.jpg";
bg.onload = function (){
.....
context.strokeStyle=context.createPattern(bg,'repeat')
.....
}
85. mos.bayomi@gmail.commos.bayomi@gmail.com
As you can see, we are still calling stroke() for our path.
However, this time we have set a strokeStyle property on the
context first, passing in the result of a call to
context.createPattern. and once again the image needs
to be previously loaded in order for the canvas to perform the
operation.
The second argument is a repetition pattern that can be one of
the choices :
repeat (Default) The image is repeated in both directions
repeat-x The image is repeated only in the X dimension
repeat-y The image is repeated only in the Y dimension
no-repeat The image is displayed once and not repeated
90. mos.bayomi@gmail.commos.bayomi@gmail.com
Both functions take the text as well as the location at which it
should be drawn.
Optionally, a maxwidth argument can be provided to constrain
the size of the text by automatically shrinking the font to fit the
given size.
93. mos.bayomi@gmail.commos.bayomi@gmail.com
The top of the em square is roughly at the top of the glyphs in a
font, the hanging baseline is where some glyphs like ը are
anchored, the middle is half-way between the top of the
em square and the bottom of the em square, the alphabetic
baseline is where characters like Á, ÿ, f, and Ω are anchored,
the ideographic baseline is where glyphs like 私 and
達 are anchored
and the bottom of the em square is roughly at the bottom of the
glyphsin a font.
The top and bottom of the bounding box can be far from these
baselines, due
to glyphs extending far outside the em square
97. mos.bayomi@gmail.com
function animate() {
// get canvas and its context
.....
// clear canvas context
context.clearRect(0, 0, canvas.width, canvas.height);
// draw stuff
.....
// request new frame
requestAnimFrame(function() {
animate();
});
}// end of animate function
110. mos.bayomi@gmail.com
<audio>
– The <audio> tag identifies sound content, such as music or any other audio
streams.
– The <audio> tag has attributes that control what, when, and how audio will be
played. The attributes are src, preload, controls, loop, and autoplay.
<audio src="MyFirstMusic.ogg" controls autoplay loop>
Your browser does not support the audio tag.
</audio>
111. mos.bayomi@gmail.com
<source>
<source>
– The <video> and <audio> tags can contain the <source> tag, which
defines multimedia resources for <video> and <audio>tags.
– With this element, you specify alternative video and audio files from
which the browser can then choose based on its media type or codec
support.
<audio controls>
<source src="MyFirstAudio.ogg" />
<source src=" MyFirstAudio.mp3" />
<p>Your browser does not support the audio tag</p>
</audio>
112. mos.bayomi@gmail.com
Browser MP3 Wav Ogg
Internet Explorer 9 YES NO NO
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES YES NO
Opera 10.6 NO YES YES
<audio>
121. mos.bayomi@gmail.com
<video>
<video>
– allows you to broadcast video clips or streaming visual media.
– It has all the attributes of the <audio> tag plus three more: poster, width,
and height.
– The poster attribute lets you identify an image to be used while the video is
loading or in the case when the video won't load at all.
<video src="MyFirstMovie.ogg" controls="controls">
Your browser does not support the video tag
</video>
• Problems:
<video>
130. mos.bayomi@gmail.com
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// let's show a map or do something interesting!
}
coords timestamp
getCurrentPosition(callback function)
131. mos.bayomi@gmail.com
(Since this is all happening asynchronously, you can’t really
know when that will happen in advance.
It might take some time for the user to read the info bar and agree to share
her location, devices with dedicated GPS hardware may take some more
time to connect to a GPS satellite, and so on.)
133. mos.bayomi@gmail.com
Only three of the properties are guaranteed to be there (coords.latitude,
coords.longitude, and coords.accuracy).
The rest might come back as null, depending on the capabilities of your
device and the backend positioning server with which it communicates.
The headingand speedproperties are calculated based on the user’s
previous position, if possible.
142. mos.bayomi@gmail.com
var myOptions = {
zoom: 8, //the zoom level 0 to 21
center: new google.maps.LatLng(latitude, longitude),
//the center of map displayed
mapTypeId: google.maps.MapTypeId.ROADMAP
//Map Type
}
149. mos.bayomi@gmail.com
sessionStorage localStorage
Values persist only as long as
the window or tab in which
they were stored
Values persist beyond window and
browser lifetimes.
Values are only visible within
the window or tab that created
them.
Values are shared across every window
or tab
running at the same origin.