Html5 css3

What is HTML5?What is HTML5?
HTML5 is a new version of HTML 4.01 and XHTML 1.0 focusing on the needs of Web
application developers
HTML5 is still a work in progress…. W3C ﬁnal recommendation: 2020
HTML + CSS + JS + multimedia

The minimal HTML5 pageThe minimal HTML5 page
<!DOCTYPE>
<html>
<head>
<title>Title</title>
</head>
<body>
…
</body>
</html>

New FeaturesNew FeaturesSome 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, search
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

Browser SupportBrowser Support
HTML5 is not yet an official
standard, and no browsers have
full HTML5 support.
But all major browsers (Safari,
Chrome, Firefox, Opera, Internet
Explorer) continue to add new
HTML5 features to their latest
versions.

Structural Elements
<header>
<hgroup>
<nav>
<section>
<article>
<figure>
<video>
<audio>
<canvas>
<footer>
…and more
HTML4
•Poor accessibility
•Unnecessary complexity
•Larger document size

<doctype>Less is More
<!DOCTYPE> tag is used for specifying which language and version the document is using.
<!DOCTYPE> tag is mostly useless, as HTML 5 does not require a reference to a DTD

<html>Less is More
<html> tag is the container that contains all other HTML elements

charsetLess is More
<meta> tag is used for declaring metadata for the HTML document.
Used for http response message headers.

<header>
<header> tag represents a group of headings, subheadings, version information, navigational
controls

<Nav>
<nav> tag is used for declaring a navigational section of the HTML document.

<Section>
<section> tag is used to represent a section within an article.
Any given web page or article could have many sections. For example, a homepage could have a
section for introducing the company, another section for news items, and another section for
contact information.

<article>
<article> tag is used to represent an article. More specifically, the content within the <article> tag
is independent from the other content on the site.

<aside>
<aside> tag is used to represent content that is related to the surrounding content within an
article or web page.
This type of content is often represented in sidebars

<footer>
<footer> tag is used for defining the footer of an HTML document or section.
Footers usually contain information such as the author of the document, copyright information,
links to terms of use, privacy policy, etc.

<figure>
<figure> tag is used for annotating illustrations, diagrams, photos, code listings,
etc.
<figure id="1">
<figcaption>Figure 1.</figcaption>
</figure>

Form: < Inputs >
<input type=“password”>
“search”
“number”
“range”
“color”
“tel”
“email”
“url”
“date”, “week”, “datetime-local”, ...
“file”

Form Field Attributes
Autofocus
– Support for placing the focus on a speciﬁc form element
<input type="text“ autofocus>
Placeholder
– Support for placing placeholder text inside a form ﬁeld
<input type="text“ placeholder=“your name”>

Audio Element
<audio> tag is used to specify audio on an HTML document.
<audio controls>
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Not Supported
</audio>
Multiple sources - the browser will use the ﬁrst recognized format

Video Element
HTML 5 <video> tag is used to specify video on an HTML document. For
example, you could embed a music video on your web page for your
visitors to listen to and watch.
<video src=”a.mp4” width="320” height="240" autoplay> </video>
<video width="320" height="240" controls>
<source src="pr6.mp4" type='video/mp4'>
<source src="pr6.webm" type='video/webm'>
<source src="pr6.ogv" type='video/ogg'>
</video>

Canvas & SVG
Canvas
- draws 2D graphics, on the ﬂy
- you use JavaScript to draw on the canvas
- rendered pixel by pixel
SVG
- describes 2D graphics in XML
- every element is available within the SVG DOM
- JavaScript event handlers for an element

CSS3
1. CSS stands for Cascading Style Sheets Level 3
2. CSS3 is the latest standard for CSS.
3. CSS3 is split up into "modules"

CSS3 Syntax
p {color:red;text-align:center;}

id and class Selectors
id Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
#para1
{
text-align:center;
color:red;
}

id and class Selectors
class Selector
The class selector is used to specify a style for a group of elements. Unlike the id selector, the
class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
.para1, .para1
{
text-align:center;
color:red;
}

Applying CSS3
In-line
In-line styles are plonked straight into the HTML tags using the style attribute.
<p style="color: red">text</p>

Applying CSS3
Internal
Embedded, or internal, styles are used for the whole page. Inside the head
element, the style tags surround all of the styles for the page.
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
p {
color: red;
}
</style>
...

Applying CSS3
External
External styles are used for the whole, multiple-page website. There is a separate
CSS file, which will simply look something like:
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="style.css">
...

CSS3 Borders Modules
With CSS3, you can create rounded borders, add shadow to boxes, and use an
image as a border - without using a design program, like Photoshop.
border-radius
box-shadow
border-image

border-radius
In CSS3, creating rounded corners is easy.
div
{
border:2px solid;
border-radius:25px ;
}

Box Shadow
box-shadow property is used to add shadow to boxes:
div
{
border:2px solid #888888;
box-shadow: 10px 10px 5px #888888;
}

Border Image
With the CSS3 border-image property you can use an image to create a
border:
div
{
border-image:url(border.png) 30 30 round;
}

CSS3 Text Effects Modules
In CSS3, the text-shadow property applies shadow to text.
You specify the horizontal shadow, the vertical shadow, the blur distance, &
the color of the shadow:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Html5 css3

Recommended

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to Html5 css3 (20)

Recently uploaded (20)

Html5 css3