html5 basic structure
DESCRIPTION
TRANSCRIPT
![Page 1: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/1.jpg)
Welcome to the World of
![Page 2: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/2.jpg)
What is Html 5 ?
HTML5 is a markup language for structuring and presenting content for the World Wide Web.
NEW MARK UPs
JAVA SCRIPT API’s
HTML 5
![Page 3: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/3.jpg)
Semantic Markup’s
hgroup
RT Aside
Section
Canvas
Header
Time
Command Mark
Details
Nav
Summary
Ruby
Article Footer
Audio
Datalist
Keygen
Source
Meter
Output
Fig captio
n
Progress
Video Embed
![Page 4: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/4.jpg)
Main contents of the article or Primary contents.
It contains the primary Information of the WEB PAGE.
In your page there must be one article, it shows the reader the basic information about the page.
It is the Main content of the page.
Article
ARTICLE
![Page 5: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/5.jpg)
It contain the little bit information about something, may be it’s your product, page, Blog info. , Person info. , etc.
Mostly use see it into a magazines.
Aside
Aside
![Page 6: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/6.jpg)
The Audio and Video support in the Browser.
The Source Tag is use to show the path of your Audio and video file.
Audio and Video
Audio
Source
Video
Source
![Page 7: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/7.jpg)
Use to embed the Third Party Object like Flash Player, Silverlight Player.
Embed
Embed
![Page 8: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/8.jpg)
Work Side By Side. We can attach a
figure in any image format (.jpeg, .png, .bmp) by the use of the source.
We can also put the little bit info about the image.
Figure and Fig caption
Figure
Figcaption
Source
![Page 9: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/9.jpg)
It basically Contain the Information of the Copy write information (©), and the upper and lower links, Branding taglines, Sponsors, ..etc.
In every standard webpage there is a header and footer.
Header and Footer
Footer
Header
![Page 10: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/10.jpg)
Keygen Contain the Cryptography information to the webpage and back to the server.
Canvas is the powerful tool use to put the SAVE button and all such things.
Button coding is done in XAML.
Canvas and Keygen
Canvas
![Page 11: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/11.jpg)
It shows the date and time into your webpage.
It’ll show the time spend by the user, or the last date and time when webpage get updated.
Time and Date
Time and Date
![Page 12: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/12.jpg)
JavaScript API’s
Server 2d Context
XML HTTP Request Level2 Messagi
ng
Geolocation
Server Events
HTML Micro data
Selection
Contacts
Indexed Database
Web Workers
Forms
Offline Apps
WebStorage
Web Sockets
Media Capture
API’sWeb SQL
DB
![Page 13: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/13.jpg)
Contact : You can directly attach your gmail, facebook, linkedin, slideshare contacts into your Browser.
Selection : It Support the CSS and JQuery selection. Offline Apps : You can Mark some items which is used
in offline mode by user. Indexed Database : It is a local database into you
webpage. Web SQL DB : It works as the local database into
your Browser. Web Workers : Helps to calculate major calculations
parallel with you browser or in the background.
API’s Details
![Page 14: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/14.jpg)
Messaging : Use to communicate the web workers with the Browser
Web Storage : a) Session storage : page to page b) Local Storage --> Cookies
(client to server). Web Socket : Instant messaging (IM). Ajax : XML HTTPrequest Level2 : Cross domain
request. Forms : Use to add datatype Like email.
API’s Details (cont..)
![Page 15: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/15.jpg)
Some startup Tags
<!doctype html> <Head> <titile> XYZ </titlte> </Head> </body> <other tags> ABC </other
tags> <other tags > ABC</other
tags> <other tags >ABC</other
tags> </Body> </html>
![Page 16: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/16.jpg)
Working With HTML5…
Click Me…
MY FIRST WEB PAGE….
The basic HELLO World Web Page….
![Page 17: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/17.jpg)
Framing
Click on the click me button, there we find the notepad file having some written text….
Now we have to modify that note file into some good looking webpage..
<meta charset="utf-8">
<hgroup> <h1>abc</h1> <h2>abc</h2> <p> xyz <br> </p> <b><u>ABC</
u></b> </hgroup>
ClickMe…
Tags we use
![Page 18: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/18.jpg)
Ordered and Unordered List
<nav> <ol> <li> <a href”ABC”>
XYZ</a></li> <li> <a href”ABC”>
XYZ</a></li> </ol> <ul> <li> <a href”ABC”>
XYZ</a></li> <li> <a href”ABC”>
XYZ</a></li> </ul> </nav>
![Page 19: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/19.jpg)
Add a Image and Caption
<figure> <img src=“XYZ”
alt=“ABC”><figcaption>DETAIL OF THE GIVEN IMAGE</figcaption> </figure>
![Page 20: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/20.jpg)
Header And Footer
<footer> <small>Copyright © 2012-2014</small> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </footer>
![Page 21: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/21.jpg)
What is CSS3 ?
(CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language.
(CSS) is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.
Cascading Style Sheets
![Page 22: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/22.jpg)
How to Attach the CSS file.
Link rel :- It represent that you like to relate your page with some other page, through which enhance the styling of your Page.
Type :- It represent the format of the file.
Href :- Source File of the file having the extension (.css).
Media :- It is the tag which represent the output of the page.
First we have to write a code before ending the head tag.<head><link rel="stylesheet" type="text/css" href="styles.css" media="screen"></head>
![Page 23: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/23.jpg)
Working with..
Body H1 H2 Hgroup P Section Image Aside Nav Footer
font-family font-size: width: background-
color: Color: margin-right: margin-left padding Overflow Float: Height: Border Shadow:
Sectio
ns o
f p
ag
e
Basic
C
on
ten
ts
InDifferent
![Page 24: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/24.jpg)
![Page 25: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/25.jpg)
How To Validate your HTML5 Code.
In place of Address, Choose TEXT FIEDL.
Copy your main page Code there.
And Click VALIDATE
In the Browser type Validator.nu
Note :- Your Device (PC, Laptop, other) must connected to internet network.
Click it
![Page 26: Html5 Basic Structure](https://reader034.vdocument.in/reader034/viewer/2022051208/54799314b37959652b8b47c8/html5/thumbnails/26.jpg)
To Know More…
1.Channel 92.W3 School3.W3Org4.Tutorial Point5.Html Goodies
https://twitter.com/Niketch786 https://www.facebook.com/niket786 www.slideshare.net/niket7861 http://niket786.webs.com http://innovtechno.blogspot.com E-Mail :- [email protected]
Niket.Ch