html5 css3
TRANSCRIPT
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 final 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 SupportHTML5 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 i
s 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
charsetLess i
s 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
<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 AttributesAutofocus– Support for placing the focus on a specific form element
<input type="text“ autofocus>
Placeholder– Support for placing placeholder text inside a form field
<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 first 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 & SVGCanvas- draws 2D graphics, on the fly
- 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"
id and class Selectorsid 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 Selectorsclass SelectorThe 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 CSS3Internal
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 CSS3External
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 ModulesWith 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
CSS3 Borders Modulesborder-radius
In CSS3, creating rounded corners is easy.
div
{
border:2px solid;
border-radius:25px ;
}
CSS3 Borders ModulesBox Shadow
box-shadow property is used to add shadow to boxes:
div
{
border:2px solid #888888;
box-shadow: 10px 10px 5px #888888;
}
CSS3 Borders ModulesBorder 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 ModulesIn 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;
}