HTML5 - Jeff Van Tassel
Download
Report
Transcript HTML5 - Jeff Van Tassel
HTML5
By: Jeff Van Tassel
What is it?
• HTML5 is the 5 version of HTML.(3)
• “HTML stands for HyperText Markup
Language.” (2)
• “It was developed by a collaboration between
the World Wide Web Consortium (W3C) and
the Web Hypertext Application Technology
Working Group (WHATWG) and IETF.” (3)
• HTML is one of the programming languages to
write web pages
History of HTML
•
•
•
•
•
•
HTML was first developed in the early 1990s at CERN ( European Center of Nuclear research)
(3)
“In 1994 Tim Berners-Lee founded the World Wide Web Consortium (W3C) at MIT
Laboratory of Computer Science [MIT/LCS] in collaboration with CERN, with support from
DARPA and the European Commission” (1)
Following the creation of W3C HTML 3.2 and 4.0 were launched. (3)
In 1998 the W3C decided to stop the evolution of HTML and produce an XML based
equivalent called XHTML (3)
The continued evolution of HTML was brought up at a W3C workshop in 2004 was presented
jointly by Mozilla and Opera. The proposal was rejected and the W3C staff and membership
decided to continue XML instead. (3)
“Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue
working on the effort under the umbrella of a new venue called the WHATWG. A public
mailing list was created, and the draft was moved to the WHATWG site. The copyright was
subsequently amended to be jointly owned by all three vendors, and to allow reuse of the
specification.” (3)
Basic HTML Structure
• <HTML>
• <HEAD>
<TITLE>My new webpage</TITLE>
</HEAD>
• <BODY>
(All the content of your webpage goes in here,
between the <BODY> tags)
</BODY>
• </HTML>
Taken from source #6 (6)
<HTML>
• “the html element—this is the root element of the document
tree and everything that follows is a descendant of that root
element.”
• “If the root element exists within the context of a document
that’s identified by its doctype as XHTML, then the html
element also requires an xmlns (XML Namespace) attribute
(this isn’t needed for HTML documents)”
• “The html element breaks the document into two main
sections: the head and the body.”
Comes from source #5 (5).
<head>
• “The head element contains meta data—information that describes the
document itself, or associates it with related resources, such as scripts and
style sheets.”
• “The simple example below contains the compulsory title element, which
represents the document’s title or name—essentially, it identifies what
this document is. The content inside the title may be used to provide a
heading that appears in the browser’s title bar, and when the user saves
the page as a favorite. It’s also a very important piece of information in
terms of providing a meaningful summary of the page for the search
engines, which display the title content in the search results.”
Comes from source #5 (5).
<head> continued…
•
•
•
•
•
•
•
•
In addition to the title element, the head may also contain:
base
defines base URLs for links or resources on the page, and target windows in which to open linked content
link
refers to a resource of some kind, most often to a style sheet that provides instructions about how to style the various
elements on the web page
meta
provides additional information about the page; for example, which character encoding the page uses, a summary of the
page’s content, instructions to search engines about whether or not to index content, and so on
object
represents a generic, multipurpose container for a media object
script
used either to embed or refer to an external script
Style
provides an area for defining embedded (page-specific) CSS styles
All of these elements are optional and can appear in any order within the head.
Comes from source #5 (5).
<Title>
• “which represents the document’s title or name—essentially,
it identifies what this document is. The content inside the title
may be used to provide a heading that appears in the
browser’s title bar, and when the user saves the page as a
favorite. It’s also a very important piece of information in
terms of providing a meaningful summary of the page for the
search engines, which display the title content in the search
results.”
• Is located in the head <head>
Comes from source #5 (5).
<body>
• “This is where the bulk of the page is contained.
Everything that you can see in the browser window
(or viewport) is contained inside this element,
including paragraphs, lists, links, images, tables, and
more. The body element has some unique attributes
of its own, all of which are now deprecated, but
aside from that, there’s little to say about this
element. How the page looks will depend entirely
upon the content that you decide to fill it with”
• Comes from source #5 (5).
What’s new in HTML 5?
•
•
•
•
•
•
•
Changes from HTML to HTML5
Changes to the HTML language itself are evident in HTML5. A few tags have been added to
the HTML 4 standard, and a number have been taken away. However, HTML5 remains
backward-compatible with HTML 4, so there's no absolute requirement to write your code in
the HTML5 standard. Adapting from HTML 4 to HTML5 is probably the easiest part of moving
to the complete HTML mindset.
The main changes include:
Semantic markup: HTML5 now includes new tags that describe parts of a document. Now
there are dedicated tags for navigation elements, articles, sections, headers, and footers.
New form elements: HTML5 forms have some major updates. There are several new versions
of the <input> element, allowing users to pick colors, numbers, e-mail addresses, and dates
with easy-to-use elements.
Media elements: At long last, HTML5 has native support for audio and video with tags similar
to the <img> tag.
canvas tag: The canvas tag allows the programmer to build graphics interactively. This
capability will allow for very intriguing capabilities like custom gaming and interface
elements.
Source #4 (4)
What’s New continued…
•
•
•
•
•
•
•
The relationship between CSS and HTML5
Probably the biggest adjustment from HTML 4 is the changing relationship between HTML and CSS. CSS is
central to the HTML5 way of thinking. In HTML5 (like in XHTML), the markup language only describes what
various elements mean; CSS is used to describe how things look.
Along with the HTML5 standard comes a new standard for CSS, called CSS3. It's nearly impossible to talk
about HTML5 without also including CSS3 because they're so closely related. Here are the main new
features:
Embedded font support: With this long-awaited tool, you can include a font with a web page, and it will
render even if the user doesn't have the font installed on her operating system.
New selectors: Selectors are used to describe a chunk of code to be modified. CSS3 now supports new
selectors that let you choose every other element, as well as specific sub-elements (different types of
input tags, for example).
Columns: HTML has never had decent support for columns, and all kinds of hacks have been used to
overcome this shortcoming. Finally, CSS includes the ability to break an element into any number of
columns easily.
Visual enhancements: CSS has a number of interesting new capabilities: transparency, shadows, rounded
corners, animations, gradients, and transformations. These provide a profound new level of control over
the appearance of a page.
Source #4 (4)
What’s New continued…
•
•
•
•
•
•
JavaScript and HTML5
If HTML describes what parts of the document are, and CSS describe how these parts look,
JavaScript defines how elements act. JavaScript is a full-blown programming language and a
very critical part of the HTML5 point of view. A few of HTML5's most interesting features are
accessible only through JavaScript.
Vector graphics support: Vector-based graphics provide an interesting alternative to
traditional graphics because they can be created on the fly through code. HTML5 actually has
two ways to do this: through SVG (Scalable Vector Graphics) and the canvas tag.
New selectors: Most JavaScript programming begins by grabbing an element by ID. HTML5
now allows you to select elements by tag name, or by the same mechanisms you use to
select elements in CSS.
Local storage mechanisms: Previous versions of HTML allowed very limited storage of
information on the client. HTML5 now allows the developer to store data on the client. There
is even a built-in database manager that accepts SQL commands.
Geolocation: This interesting feature uses a variety of mechanisms to determine where the
user is located.
Source 4(4)
• Server technologies and HTML5
• Modern web development is about communication. All the technologies
that make up HTML5 reside in the web browser, which is an important
part of the web. However, an equally important part of web development
is a raft of technologies that live on the web server. Many of the most
interesting things happening today use technologies like PHP or ASP to run
programs that create web pages or use database programs like Oracle or
MySQL to manage large amounts of data. The advent of AJAX has made
integration between those technologies and the browser much easier. You
can expect to use a host of other applications and technologies in tandem
with HTML5.
Source #4 (4)
References
1. Facts About W3C (2012). Retrieved from http://www.w3.org/Consortium/facts#history
2. HTML & CSS. (2012). Retrieved from http://www.w3.org/standards/webdesign/htmlcss
3. HTML Living standard (8 June, 2012). Retrieved from
http://www.whatwg.org/specs/web-apps/currentwork/multipage/introduction.html#introduction
4. Notable Changes in HTML5. (2012) Retrieved from http://www.dummies.com/howto/content/notable-changes-in-html5.html
5. Sitepoint. (2012) .Basic Structure of a Web Page. Retrieved from
http://reference.sitepoint.com/html/page-structure
6. Storm, John. (n.d.). Creating your first page Retrieved from
http://www.jonstorm.com/html/struct.htm