Html5 Basic Structure
26
Welcome to the World of
-
Upload
niket-chandrawanshi -
Category
Technology
-
view
1.001 -
download
1
description
Transcript of Html5 Basic Structure
Welcome to the World of
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
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
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
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
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
Use to embed the Third Party Object like Flash Player, Silverlight Player.
Embed
Embed
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
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
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
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
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
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
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..)
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>
Working With HTML5…
Click Me…
MY FIRST WEB PAGE….
The basic HELLO World Web Page….
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
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>
Add a Image and Caption
<figure> <img src=“XYZ”
alt=“ABC”><figcaption>DETAIL OF THE GIVEN IMAGE</figcaption> </figure>
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>
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
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>
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
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
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
