Html5 css3

HTML 5HTML 5

Web Tech History

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

<html>Less i

s More

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

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

<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 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"

CSS3 Syntax

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

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;

}

Thanks !

Html5 css3

Technology

Transcript of Html5 css3