35
Learn HTML5/CSS3 By:-AhmedYousef Co-founder DEVMIX team BY:-AhmedYousef
| Date post: | 10-May-2015 |
| Category: |
Technology |
| Upload: | ahmed-yousef |
| View: | 2,334 times |
| Download: | 0 times |
Learn HTML5/CSS3
By:-AhmedYousefCo-founder DEVMIX team
BY:-AhmedYousef
let's Start……
• We will start with HTML5 and will continue with CSS3.
BY:-AhmedYousef
Previous knowledge Before start you should know :-1. HTML . 2. CSS .3. Java Script .Why???????New features should be based on HTML, CSS, DOM, and
JavaScript
BY:-AhmedYousef
Today, We Will Cover...What is HTML5? HTML5 is the next generation of HTML.
What I gain from Learning it?1. HTML5 ~= HTML + CSS + JS.2. You can work offline .3. You can draw online.!!4. You can develop a mobile Apps!!!!!!!!!??5. Windows 8 Apps!!!???
BY:-AhmedYousef
Introduction in details….
What is HTML5?• HTML5 will be the new standard for HTML, XHTML, and the
HTML DOM.• HTML5 is still a work in progress. However, most modern
browsers have some HTML5 support.
How Did HTML5 Get Started?HTML5 is a cooperation between the World Wide Web Consortium
(W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
BY:-AhmedYousef
Some rules for HTML5 were established….
• New features should be based on HTML, CSS, DOM, and JavaScript
• Reduce the need for external plugins (like Flash)• Better error handling• More markup to replace scripting• HTML5 should be device independent• The development process should be visible to the public.
BY:-AhmedYousef
Why I should learn HTML5….Some of the most interesting new features in
HTML5:• The canvas element for drawing• The video and audio elements for media playback• Better support for local offline storage• New content specific elements, like article, footer,
header, nav, section• New form controls, like calendar, date, time, email, url.
BY:-AhmedYousef
So how …?How can I know if my browser support
HTML5??!!! http://www.html5test.com/
• all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.
BY:-AhmedYousef
So what is new??• The internet has changed a lot since HTML 4.01 became
a standard in 1999.• Today, some elements in HTML 4.01 are obsolete, never
used, or not used the way they were intended to. These elements are deleted or re-written in HTML5.
• To better handle today's internet use, HTML5 also includes new elements for better structure, drawing, media content, and better form handling.
BY:-AhmedYousef
let's talk about new….New Markup Elements:- like(<article>, <footer>,
<header>, <section>,<nav>).
BY:-AhmedYousef
And new…New Media Elements:-like(<audio>, <video>,
<source>,<embed>).
The Canvas Element:-it is a mazing tag??!!
New Form Elements:-like(<datalist>,<Date pickers>,<keygen>, <email>, <url>,<number>, <search>,<datalist>).
BY:-AhmedYousef
After this boring intro.let's go to work….
BY:-AhmedYousef
HTMl5 BasicsVideo ,Audio ,Canvas………,…….. And so on:-
BY:-AhmedYousef
New Doc TypeIn HTML4:- it is an instruction to the web browser about what
version of the markup language the page is written in. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">In HTML5:-
<!DOCTYPE html>BY:-AhmedYousef
New Markup Elements
<Header> Tag:- Introduction to my home page. Specifies a group of navigation elements for the
document.
Browser Support:- All major browsers support <Header> Tag.
BY:-AhmedYousef
Cont-New Markup ElementsHow <Header> works??<Header> <h1>Welcome to my website</h1> <p>My name is Ahmed Youssef</p> </Header>
<p> the rest of page</p>
BY:-AhmedYousef
Cont. New Markup Elements<Footer> Tag:- defines the footer of a section or document. contains the name of the author, the date the
document was written and/or contact information.
Browser Support:- All major browsers support <Header> Tag.
BY:-AhmedYousef
Cont. New Markup ElementsHow <Footer> works:- <!DOCTYPE HTML><html><body><footer><p>This document was written in 2011</p><p> all copyright reserved © DEVMIX 2011</p> </footer></body></html>
BY:-AhmedYousef
Cont. New Markup Elements<Article> Tag:- An article should make sense on its own and it should be
possible to distribute. Examples of possible articles: forum post newspaper article blog entry
Browser Support:- All major browsers support <Article> Tag.
BY:-AhmedYousef
Cont. New Markup Elements
How <Article> works:- <article>
<a href="http://blog.netscape.com/2007/12/28/end-of-support-for-netscape-web-browsers">Netscape is dead</a><br />AOL has a long history on the internet, being one ofthe first companies to really get people online.....</article>
BY:-AhmedYousef
Cont. New Markup Elements
<aside> Tag:- defines some content aside from the content it is placed
in. The aside content should be related to the surrounding
content.Browser Support:-All major browsers support <Aside> Tag.
BY:-AhmedYousef
Cont. New Markup ElementsHow <Aside> works:-<p>My family and I visited Cairo this
summer.</p><aside><h4>Tahrir Square</h4>Cairo is the biggest city in Egypt .</aside>
BY:-AhmedYousef
Cont. New Markup Elements
<section> tag:- defines sections in a document like :- Chapters.
Browser Support:-All major browsers support <Section> Tag
BY:-AhmedYousef
HTML5 VideoVideo on the Web:- Until now, there has never been
a standard for showing video on a web page.Today, most videos are shown through a plugin (like
flash). However, not all browsers have the same plugins.
HTML5 specifies a standard way to include video, with the video element.
Video Formats:- (Ogg , MPEG 4 , WebM).Hint ( all works in chrome).
BY:-AhmedYousef
Cont. HTML5 VideoHow can I use it?? <video src="movie.ogg" width="320" height="240"
controls="controls">Your browser does not support the video tag.</video>
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" />Your browser does not support the video tag.</video>(use more formats).
BY:-AhmedYousef
Cont. HTML5 VideoAll <video> Attributes:- Attribute Value
audio muted
autoplay autoplay
controls controls
height pixels
loop loop
poster url
preload preload
src url
width pixels
BY:-AhmedYousef
Cont. HTML5 VideoMost strange Examples:-YoutubeNewlook(http://www.youtube.com/testtube).<video> element support:-
IE Firefox Safari Chrome Opera iPhone Android
9.0+ 3.5+ 3.0+ 3.0+ 10.5+ 1.0+ 2.0+
BY:-AhmedYousef
HTML5 AudioAudio on the Web:-Until now, there has never been a
standard for playing audio on a web page.Today, most audio are played through a plugin (like flash).
However, not all browsers have the same plugins.HTML5 specifies a standard way to include audio, with the
audio element.The audio element can play sound files, or an audio
stream.Audio Formats:- (Ogg Vorbis, MP3, Wav).Hint:- all
works in chrome.
BY:-AhmedYousef
Cont. HTML5 AudioHow can I use it?? <audio src="song.ogg" controls="controls">
Your browser does not support the audio element.</audio>.
<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" />Your browser does not support the audio element.</audio>(use more formats).
BY:-AhmedYousef
Cont. HTML5 AudioAll <audio> Attributes:-
BY:-AhmedYousef
Attribute Valueauto play auto play
controls controls
loop loop
preload preload
src url
Cont. HTML5 AudioAudio controls on different browsers:-
BY:-AhmedYousef
HTML5 <canvas>What is Canvas?? <canvas> tag is used to display graphics. it is only a container for graphics, you must use a script
to actually paint graphics. Browser Support:-All major browsers support <Canvas> Tag.
BY:-AhmedYousef
Cont. HTML5 <canvas>How <Canvas> works:- <canvas id="myCanvas">your browser does not support
the canvas tag </canvas><script type="text/javascript">varcanvas=document.getElementById('myCanv');var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);</script>
BY:-AhmedYousef
Cont. HTML5 <canvas>
Attribute Value
height pixels
width pixels
BY:-AhmedYousef
Project 1
BY:-AhmedYousef
