Scribd
Upload
220 views

HTML

HTML AND HTML5

Uploaded by

Maha Ibrahim
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
220 views

HTML

HTML AND HTML5

Uploaded by

Maha Ibrahim
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 35

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>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

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
&copy;
<
&lt;
>
&gt;
&
&amp;
&nbsp;

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:[email protected]">[email protected]</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

You might also like