Scribd
Upload
84 views

3 HTML 28 05 2024

Uploaded by

sahaj jain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
84 views

3 HTML 28 05 2024

Uploaded by

sahaj jain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

GETTING STARTED WITH HTML5

Agenda
 History, Vision & Future of HTML5
 Getting Started With HTML5
 Structure of a Web Page
 Forms
 Audio and Video
1. History, Vision & Future of HTML5
1.1 What Is HTML5?

• Successor of HTML 4.01 and XHTML 1.1


• It comes with new tags, features and APIs
• Below is a non exhaustive list of features that tend to be labelled as "HTML5" in the
medias:
– New structural elements (<header>, <footer>, <nav> and more)
– Forms 2.0 and client-side validation
– Native browser support for audio and video (<video>, <audio>)
– Canvas API and SVG
– Web storage
– Offline applications
– Geolocation
– Drag & Drop
– Web Workers
– New communications API (Server Sent Events, Web Sockets, …)
1. History, Vision & Future of HTML5
1.2 History of HTML5?

• December 1997: HTML 4.0 is published by the W3C

• February - March 1998: XML 1.0 is published

• December 1999 - January 2000: ECMAScript 3rd Edition, XHTML 1.0 (Basically
HTML tags
reformulated in XML) and, HTML 4.01 recommendations are published

• May 2001: XHTML 1.1 recommendation is published

• August 2002: XHTML 2.0 first working draft is released.

• December 2002: XHTML 2.0 second working draft published.

• January 2008: First W3C working draft of HTML5 is published!!


1. History, Vision & Future of HTML5
1.3 Future of HTML5

• 84% of Developers Plan to Adopt Key HTML5 Features

• The key to understanding HTML5 is that it is not one, but a group of technologies.
Within HTML5, developers have a tremendous amount of choice regarding what they
use and what they don’t use

• The power of HTML5 being ready for prime-time can be seen in Microsoft’s choice to
utilize it in Windows 8

Still on the fence with adopting HTML5 in your next


project?
2. Getting started with HTML5
Wondering what it takes to get it started?

• Any Text editor such as Notepad++, Editplus, Textmate, Dream weaver

• Modern browsers such as Firefox 3.5 +, IE9, chrome, safari


• Prior knowledge of HTML 4
3. Structure of Web page
3.1. New and Updated HTML5 Elements
HTML5 introduces 28 new elements:
<section>, <article>, <aside>, <hgroup>, <header>,<footer>, <nav>, <figure>, <figcaption>, <vi
deo>, <audio>, <source>, <embed>, <mark>,<progress>, <meter>, <time>, <ruby>, <rt>, <rp>,

<wbr>, <canvas>, <command>, <details>,<summary>, <datalist>, <keygen> and <output>


An HTML page first starts with the DOCTYPE declaration

HTML5 also update some of the previous existing elements to better reflect how they are used on
the Web or to make them more useful such as:

• The <a> element can now also contain flow content instead of just phrasing content
• The <hr> element is now representing a paragraph-level thematic break
• The <cite> element only represent the title of a work
• The <strong> element is now representing importance rather than strong emphasis
3. Structure of Web page
3.2. First HTML5 webpage
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
That’s all I need to create my first HTML5 page
</body>

</html>

Output: Click here


3. Structure of Web page

3.3. New Semantic Elements


<nav>: Represents a major navigation block. It groups links to other pages or to parts of the
current page.

<nav> does not have to be used in every place you can find links.
For instance, footers often contains links to terms of service, copyright page and such,

the <footer> element would be sufficient in that case


3. Structure of Web page

3.3. New Semantic Elements


<Header>: tag specifies a header for a document or section.

However, we mustn't think that "header" is only for masthead of a website. "header" can be use as a
heading of an blog entry or news article as every article has its title and published date and time
3. Structure of Web page

3.3. New Semantic Elements


<article>: The web today contains a ocean of news articles and blog entries. That gives W3C a
good reason to define an element for article instead of <div class="article">.

We should use article for content that we think it can be distributable. Just like news or blog entry
can we can share in RSS feed

"article" element can be nested in another "article" element.


An article element doesn't just mean article content. You can have header andfooter element in an

article. In fact, it is very common to have header as each article should have a title.
3. Structure of Web page

3.3. New Semantic Elements


<aside>: The "aside" element is a section that somehow related to main content, but it can be

separate from that content


3. Structure of Web page

3.3. New Semantic Elements


<footer>: Similarly to "header" element, "footer" element is often referred to the footer of a web
page. Well, most of the time, footer can be used as what we thought.

Please don't think you can only have one footer per web document, you can have a footer in every

section, or every article.


3. Structure of Web page

3.3. New Semantic Elements


<Progress>: The new "progress" element appears to be very similar to the "meter" element. It is
created to indicate progress of a specific task.

The progress can be either determinate OR interderminate. Which means, you can use "progress"
element to indicate a progress that you do not even know how much more work is to be done yet.

Progress of Task A : <progress value="60" max="100">60%</progress>


3. Structure of Web page

3.3. New Semantic Elements


<meter>: "Meter" is a new element in HTML5 which represenet value of a known range as a
gauge. The keyword here is "known range". That means, you are only allowed to use it when you
are clearly aware of its minimum value and maximum value.

One example is score of rating. I would rate this movie <meter min="0" max="10" value="8">8 of

10</meter>.
3. Structure of Web page

3.3. New Semantic Elements


<mark>: The mark <mark> element represents a run of text in one document marked or
highlighted for reference purposes, due to its relevance in another context.

Basically, it is used to bring the reader's attention to a part of the text that might not have been
3. Structure of Web page

3.3. New Semantic Elements


<figure>: The <figure> tag specifies self-contained content, like illustrations, diagrams, photos,
code listings, etc.

While the content of the <figure> element is related to the main flow, its position is independent
of the main flow, and if removed it should not affect the flow of the document
3. Structure of Web page
3.3. Lets put altogether
3. Structure of Web page
3.3. Designing blog with html5

IE layout
There’s one gotcha about styling HTML 5 pages in IE: it doesn’t work.
You can force it to quite easily with a JavaScript hack
document.createElement('element name').

HTML 5 enabling script which I use in the header to conjure all the missing elements into existence
all at once.
3. Structure of Web page
3.3. why so much fuss for semantics in html5

Well, they add semantics to the page. The browser now knows which area of your site is the header or
the footer because there are header and footer elements, whereas div might be called “branding

The first is for search engine use; it’s easy to imagine Messrs Google or Yahoo! giving lower weighting
to content in footer elements, or extra weight to content in the header.

site navigable for people with disabilities. People with learning difficulties might instruct their
browser always to put the articles before the navigation
HTML 5 Forms
4. Forms
4.1. Introduction
HTML5 web forms have introduced new form elements, input types, attributes, and
other features. Many of these features we’ve been using in our interfaces for years:
form validation, combo boxes, placeholder text, and the like. The difference is that
where before we had to resort to JavaScript to create these behaviors, they’re now
available directly in the browser; all you need to do is set an attribute in your markup
to make them available.
4. Forms
4.1. Introduction
HTML5 web forms have introduced new form elements, input types, attributes, and
other features. Many of these features we’ve been using in our interfaces for years:
form validation, combo boxes, placeholder text, and the like. The difference is that
where before we had to resort to JavaScript to create these behaviors, they’re now
available directly in the browser; all you need to do is set an attribute in your markup
to make them available.

HTML5 not only makes marking up forms easier on the developer, it’s also better
for the user. With client-side validation being handled natively by the browser,
there will be greater consistency across different sites, and many pages will load
faster without all that redundant JavaScript.

Now Lets look at


HTML5 Form Attributes
HTML5 Input Types
HTML5 Form Elements
4. Forms
4.1. form attributes

<form> / <input> autocomplete Attribute

The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.
When autocomplete is on, the browser automatically complete values based on values that the user has
entered before.

Example: ../forms/autocomplete.html
4. Forms
4.1. form attributes

<form> / <input> novalidate Attribute

The novalidate attribute is a boolean attribute.


When present, it specifies that the form-data (input) should not be validated when submitted.

Example: ../forms/noValidate.html
4. Forms
4.2. input attributes

<input> autofocus Attribute

The novalidate attribute is a boolean attribute.


When present, it specifies that an <input> element should automatically get focus when the page
loads.
Only one form element can have autofocus in a given page.

Example: ../forms/autofocus.html
4. Forms
4.2. input attributes

<input> formaction Attribute

• The formaction attribute specifies the URL of a file that will process the input control when the
form is submitted.
• The formaction attribute overrides the action attribute of the <form> element.
• Note: The formaction attribute is used with type="submit" and type="image"

Example: ../forms/formaction.html
4. Forms
4.2. input attributes

<input> formmethod Attribute

• The formmethod attribute defines the HTTP method for sending form-data to the action URL.
• The formmethod attribute overrides the method attribute of the <form> element.
• Note: The formmethod attribute can be used with type="submit" and type="image".

Example: ../forms/formmethod.html
4. Forms
4.2. input attributes

<input> formnovalidate Attribute

• The novalidate attribute is a boolean attribute.


• When present, it specifies that the <input> element should not be validated when submitted.
• The formnovalidate attribute overrides the novalidate attribute of the <form> element.
• Note: The formnovalidate attribute can be used with type="submit".

Example: ../forms/formnovalidate.html
4. Forms
4.2. input attributes

<input> formtarget Attribute

• The novalidate attribute is a boolean attribute.


• When present, it specifies that the <input> element should not be validated when submitted.
• The formnovalidate attribute overrides the novalidate attribute of the <form> element.
• Note: The formnovalidate attribute can be used with type="submit".

Example: ../forms/formtarget.html
4. Forms
4.2. input attributes

<input> list Attribute

• Datalists are currently only supported in Firefox and Opera, but they are very cool.
• They fulfill a common requirement: a text field with a set of predefined autocomplete
• options.
Example: ../forms/datalist.html
4. Forms
4.2. input attributes

<input> required Attribute

The Boolean required attribute tells the browser to only submit the form if the field
in question is filled out correctly. Obviously, this means that the field can’t be left
empty, but it also means that, depending on other attributes or the field’s type, only
certain types of values will be accepted.

If a required field is empty or invalid, the form will fail to submit, and focus will
move to the first invalid form element.

The required attribute can be set on any input type except button, range, color,
and hidden, all of which generally have a default value.

• Example: ../forms/required.html
4. Forms
4.2. input attributes

<input> placeholder Attribute

The placeholder attribute allows a short hint to be displayed inside the form element,
space permitting, telling the user what data should be entered in that field.
The placeholder text disappears when the field gains focus, and reappears on blur
if no data was entered.

Developers have provided this functionality with JavaScript


for years, but in HTML5 the placeholder attribute allows it to happen natively, with
no JavaScript required.

• Example: ../forms/placeholder.html
4. Forms
4.2. input attributes

<input> readonly Attribute

The readonly attribute is similar to the disabled attribute: it makes it impossible


for the user to edit the form field. Unlike disabled, however, the field can receive
focus, and its value is submitted with the form.
4. Forms
4.2. input attributes

<input> multiple Attribute

The multiple attribute, if present, indicates that multiple values can be entered in
a form control. While it has been available in previous versions of HTML, it only applied to the select
element. In HTML5, it can be added to email and file input types as well.

If present, the user can select more than one file, or include several comma-separated email addresses.

At the time of writing, multiple file input is only supported in Chrome, Opera, and
Firefox.

Select images: <input type="file" name="img" multiple="multiple" />


4. Forms
4.3. input types

Introduction
you’re familiar with: checkbox, text, password, and submit. Here’s the full list of types that were
available before HTML5:
■ button ■ checkbox ■ file ■ hidden ■ image ■ password ■ radio ■ reset ■ submit ■ text

HTML5 gives us input types that provide for more data-specific UI elements and
native data validation. HTML5 has a total of 13 new input types:
■ search
■ email
■ url
■ tel
■ datetime
■ date
■ month
■ week
■ time
■ datetime-local
■ number
■ range
■ color
4. Forms
4.3. input types

<input type> email

The email type (type="email") is, unsurprisingly, used for specifying one or more email addresses.
It supports the Boolean multiple attribute, allowing for multiple, comma-separated email addresses.

Search type is only supported in Chrome, Opera, firefox and safari.

E-mail: <input type="email" name="usermail" />


4. Forms
4.3. input types

<input type> url

The url type is used for input fields that should contain a URL address.
The value of the url field is automatically validated when the form is submitted.

Search type is only supported in Chrome, Opera, firefox

Add your homepage: <input type="url" name="homepage" />


4. Forms
4.3. input types

<input type> tel

For telephone numbers, use the tel input type (type="tel"). Unlike the url and email types,
the tel type doesn’t enforce a particular syntax or pattern. Letters and numbers—indeed, any
characters other than new lines or carriage returns—are valid.

Telephone: <input type="tel" name="usrtel" />


4. Forms
4.3. input types

<input type> range

The range input type (type="range") displays a slider control in browsers that
support it (currently Opera and WebKit). As with the number type, it allows the
min, max, and step attributes.

Define a control for entering a number whose exact value is not important

<label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label>


<input type="range" min="1" max="10" name="rating" type="range">
4. Forms
4.3. input types

<input type> color

The color input type (type="color") provides the user with a color picker
Supported only in Opera

Select your favorite color: <input type="color" name="favcolor" />


HTML 5 audio & video
5. Audio & video
4.3. new html5 element

<audio>

Until now, there has not been a standard for playing audio files on a web page.
Today, most audio files are played through a plug-in (like flash). However, different browsers may
have different plug-ins.

HTML5 defines a new element which specifies a standard way to embed an audio file on a web page:
the <audio> element.

Example: ../audioVideo/audio.html
5. Audio & video
4.3. new html5 element

<audio> : Add Fallback to flash

To be safe, we need to add the fallback to a Flash audio player, in case the browser doesn't support any
of the formats we specified. For instance, Firefox 3.5 only supports the audio tag with Ogg format, but
we might only have the mp3 file available
5. Audio & video
4.3. new html5 element

<video>

Until now, there has not been a standard for showing a video/movie on a web page.
Today, most videos are shown through a plug-in (like flash). However, different browsers may have
different plug-ins.
HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page:
the <video> element.
5. Audio & video
4.3. new html5 element

<video attributes>

You might also like