HTML

HTML5
HTML5 HTML 5 + CSS 3 +

JavaScript
HTML5 is a suite of tools for:
Markup (HTML 5)
Presentation (CSS 3)
Interaction (DOM, Ajax, APIs)
Brought on by the evolving use of the

web
History, Vision & Future of HTML5

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

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

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 dont use
The power of HTML5 being ready for prime-time can be seen in Microsofts choice to
utilize it in Windows 8
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
Why Use HTML5 Today?

Pros
Better semantics
Lean code
Improved user experience
Cons
Some work is needed to accommodate
older browsers
Document
Type Definition
Document Type Definition

(DTD)
doctype statement
identifies the version of HTML
contained in your document.
placed at the top of a web page
document
DTD Examples
XHTML 1.0 Transitional DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
HTML5 DTD
<!DOCTYPE html>
Example HTML5 Web

Page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title Goes Here</title>
<meta charset="utf-8">
</head>
<body>
... body text and more HTML5 tags go here ...
</body>
</html>
UTF-8(Ufrom Universal Character Set +Transformation Format8-bit)

is a character encoding capable of encoding all possible characters
(called code points) in Unicode. The encoding is variable-length and
uses8-bitcodeunits.
Under the Hood of

a Web Page
DTD describes the markup language syntax
HTML element contains the web page
document
Head element contains the head section
The head section contains information that describes the
web page document
Title element Text displays in title bar of window
Meta element describes the character encoding
Body element contains the body section

The body section contains the text and elements that
display in the browser viewport.
11
Title Element
Meta Element
12
The Heading Element

<h1>Heading Level 1</h1>
The Paragraph Element

<p> tag
Paragraph element
<p> paragraph goes here </p>
Groups sentences and sections of text
together.
Configures empty space above and
below the paragraph
The Line Break Element

<br> tag
Line Break element
Stand-alone tag
Called a void element in HTML5
text goes here <br>
This starts on a new line.
Causes the next element or text to

display on a new line
The Horizontal Rule Element

<hr> tag
Horizontal Rule element
void element
<hr >
Configures a horizontal line on the page

In HTML5, it should be used to indicate
a thematic break at the paragraph level
The Blockquote Element

<blockquote>
Blockquote element
Indents a block of text for special
emphasis
<blockquote>
text goes here
</blockquote>
Phrase Elements
Indicate the context and meaning of the text
Display inline with the text
Common Phrase Elements
<b></b>
Text is displayed in bold font
<strong></strong>
Text has strong importance and is displayed in bold
<i></i>
Text is displayed in italic font
<em></em>
Text has emphasis and is displayed in italic font
Proper Nesting
CODE:
<p><i>Call for a free quote for your web development needs:
<strong>888.555.5555 </strong></i></p>
BROWSER DISPLAY:
Call for a free quote for your web
development needs: 888.555.5555
19
HTML List Basics

Unordered List
Description List (XHTML Definition
List)
Ordered List
Unordered List
Displays information with bullet points
Unordered List Element
<ul>
Contains the unordered list
List Item Element

<li>
Contains an item in the list
Unordered List Example

<h1>My Favorite Colors</h1>
<ul>
<li>Blue</li>
<li>Teal</li>
<li>Read</li>
</ul>
Ordered List
Conveys information in an ordered
fashion
Ordered List Element
<ol>
Contains the ordered list
type attribute determines numbering scheme of list
default is numerals
List Item Element

<li>
Contains an item in the list
Ordered List Example

<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
Description List
Formerly called a definition list in XHTML and HTML 4.0

Uses:
Display a list of terms and descriptions
Display a list of FAQ and answers
The Description List element

<dl> tag
Contains the definition list
The dt Element
<dt> tag
Contains a term or name
The dd Element
<dd> tag
Contains a definition or description

Indents the text
Description List Example

<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>
Special Entity Characters

Display special characters such as
quotes, copyright symbol, etc.
Character
Code
©
<
<
>
>
&
&

The div element

<div>
Purpose:
Configure a specially formatted division or
area of a web page
Block display with empty space above

and below the div
Can contain other block display and
inline display elements
HTML5 Structural Elements

Header Element
<header></header>
Contains the web page
documents headings
Nav Element
<nav></nav>
Contains web page
documents main navigation
Footer Element
<footer></footer>
Contains the web page
documents footer
HTML5 Structural
Elements
Example:
<body>
<header> document headings go here </header>
<nav> main navigation goes here </nav>
<div> main content goes here </div>
<footer> document footer information goes here </footer>
</body>
The Anchor Element

<a>
The anchor element
Inline display element
Specifies a hyperlink reference (href) to a file
Text between the <a> and </a> is displayed on the
web page.
<a href="contact.html">Contact Us</a>

href Attribute
Indicates the file name or URL
Web page document, photo, pdf, etc .
More on Hyperlinks
Absolute link
Link to other websites
<a href="http://yahoo.com">Yahoo</a>
Relative link
Link to pages on your own site
Relative to the current page
<a href="index.html">Home</a>
Opening a Link
in a New Browser Window
The target attribute on the anchor element
opens a link in a new browser window or new
browser tab.
<a href="http://yahoo.com" target="_blank">Yahoo!</a>
Email Hyperlinks
Automatically launch the default mail
program configured for the browser
If no browser default is configured,
a dialog box is displayed
<a href="mailto:me@hotmail.com">me@hotmail.com</a>
Writing Valid HTML

Check your code for syntax errors
Benefit:
Valid code
more consistent browser display
W3C HTML Validation Tool

http://validator.w3.org
Additional HTML5 Validation Tool

http://html5.validator.nu

HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML

Încărcat de

Drepturi de autor:

Formate disponibile

HTML5

HTML5 HTML 5 + CSS 3 +

Brought on by the evolving use of the

History, Vision & Future of HTML5

Successor of HTML 4.01 and XHTML 1.1

1. History, Vision & Future of HTML5

December 1997: HTML 4.0 is published by the W3C

February - March 1998: XML 1.0 is 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

84% of Developers Plan to Adopt Key HTML5 Features

Getting started with HTML5

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

Why Use HTML5 Today?

Document Type Definition

Example HTML5 Web

UTF-8(Ufrom Universal Character Set +Transformation Format8-bit)

Under the Hood of

Body element contains the body section

The Heading Element

The Paragraph Element

The Line Break Element

Causes the next element or text to

The Horizontal Rule Element

Configures a horizontal line on the page

The Blockquote Element

Text is displayed in bold font

Text has strong importance and is displayed in bold

Text is displayed in italic font

Text has emphasis and is displayed in italic font

HTML List Basics

List Item Element

Unordered List Example

List Item Element

Ordered List Example

Formerly called a definition list in XHTML and HTML 4.0

The Description List element

Contains a term or name

Contains a definition or description

Description List Example

Special Entity Characters

The div element

Block display with empty space above

HTML5 Structural Elements

The Anchor Element

<a href="contact.html">Contact Us</a>

Web page document, photo, pdf, etc .

Writing Valid HTML

W3C HTML Validation Tool

Additional HTML5 Validation Tool

S-ar putea să vă placă și