Html5 and-css3-overview

tSsdf
Thursday, January 19, 2017
JACOB NELSON
Software Architect

Three Layers of Web Design
Structure, Style, Behavior

Structure
HTML
Presentation
CSS
Behavior
Javascript

What is HTML?
Hypertext Markup Language, a standardized
system for tagging text files to achieve font,
colour, graphic, and hyperlink effects on World
Wide Web pages.

What is HTML?
HTML documents consist of a tree of elements
and text. Each element is denoted in the source
by a start tag, such as "<body>", and an end tag,
such as "</body>".

History of HTML
• 1989 - Tim Berners-Lee invented www
• 1991 - Tim Berners-Lee invented HTML
• 1993 - Dave Raggett drafted HTML+
• 1993 - The first web browser, Mosaic, was
introduced.
• 1994 - Netscape browser, based on Mosaic,
was introduced.
• 1994 – W3C was formed

History of HTML
• 1995 - HTML 2.0 was first published by W3C.
• 2000 – XHTML 1.0 was published by W3C.
• 2008 – WHATWG published HTML5 First Public Draft
• 2014 - HTML5 was published by W3C.
• 2016 - HTML5.1 was published by W3C.

Standards Organizations – W3C
W3C (World Wide Web Consortium)
The W3C is the source for most of the
recommendations that concern web developers.
They produce recommendations for the
implementation of such technologies as HTML,
the Document Object Model, and Cascading
Style Sheets.

W3C is not a standards body. Instead, the W3C
organizes groups of experts in web-related fields. These
groups produce recommendations on how to
implement web technology. Although the W3C does
not have any enforcement power over how their
recommendations are implemented, most of their
recommendations are taken as de facto standards.
W3C wanted to develop a definitive HTML5 and XHTML
standard.
Standards Organizations – W3C
W3C (World Wide Web Consortium)

Standards Organizations – WHATWG
Web Hypertext Application Technology Working Group (WHATWG)
The WHATWG was formed in response to the
slow development of World Wide Web
Consortium (W3C) Web standards and W3C's
decision to abandon HTML in favor of XML-
based technologies.
WHATWG wanted to develop HTML as a "Living
Standard". A living standard is always updated
and improved. New features can be added, but
old functionality cannot be removed.

HTML5 vs HTML Living Standard
The WHATWG version of the specification was
renamed at the beginning of 2011 to HTML
dropping the 5 at the end of the name. Then, it
was further renamed into HTML living standard
to specify that it’ll be in constant development
and will no longer referred by using a version
number.

On the contrary, the W3C’s specifications still
use version numbers. the last stable version is 5,
thus HTML5. As a consequence of this step, the
consortium is now actively developing the new
version of the standard known as HTML5.1. In
HTML5.1 some elements and attributes that
didn’t find their place in HTML5 are being
discussed such as the dialog element and the
new input types of month and week.

Stated by, David Baron from Mozilla
When the W3C’s and WHATWG’s HTML specifications differ, we tend to follow
the WHATWG one.

What is HTML5?
HTML5 is the latest version of Hypertext Markup
Language, the code that describes web pages.
It's actually three kinds of code: HTML, which
provides the structure; Cascading Style Sheets
(CSS), which take care of presentation; and
JavaScript, which makes things happen.

Browser Support for HTML5

basic HTML document
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>

</body>
</html>

<!DOCTYPE html>
• <!DOCTYPE html> goes at the top of every HTML5
page.
• The HTML5 word <!DOCTYPE html> means "this
page is written in HTML5" as opposed to, say
HTML 4.01.
• it's better than what they had before. Here's an
example of one common type of XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Example Explained
The <html> element is the root element of an HTML
page
The <head> element contains meta information about
the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph

The New Elements of HTML5
The most basic new elements of HTML5 make it
easier to lay out web pages and to debug your
code or others'. It also makes it easier for
automated services to scan the web and
understand the importance of different page
components.

For page layout and key features, there are now specific elements such as:
• <header> and <footer>
• <nav> for all the kinds of menus
• <aside> for sidebars or nearby related content
• <article> where content goes such as a blog post
• <section> similar to <div> but more content-oriented
• <audio> and <video> tags to have native browsers manage playback of
each. No more plugins and security updates for this
• <canvas> specifically for letting you draw graphics on using a separate
scripting language
• <embed> to place external content or applications into the page

Here's a nice visual outline of these by Smashing Magazine:

Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) is a style sheet
language used for describing the look and
formatting of a document written in a markup
language. CSS3 is a latest standard of CSS earlier
versions(CSS2).

Style Sheet
A stylesheet is a set of rules defining how an
HTML element will be presented in the browser.
These rules are targeted to specific elements in
HTML document

The Cascade
The cascade part of CSS is a set of rules for
resolving conflicts with multiple CSS rules
applied to the same elements.
For example, if there are two rules defining the
color or your h1 elements, the rule that comes
last in the cascade order will trump the other.

Browser Style Sheet
Unstyled HTML elements are displayed by a
browser according to rules devised by the
software developer.
For example, text marked up as an <h1> is often
displayed as 24-point, bold in the typeface
Times New Roman.
Default styles also affect the space around
elements.

External Style Sheet
With an external style sheet, you can change the
look of an entire website by changing just one
file!
Each page must include a reference to the
external style sheet file inside the <link>
element. The <link> element goes inside the
<head> section:

External Style Sheet
The external style sheet file must be saved with
a .css extension.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Internal Style Sheet
An internal style sheet may be used if one single page
has a unique style.
Internal styles are defined within the <style> element,
inside the <head> section of an HTML page:
<head>
<style>
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

Inline Style
An inline style may be used to apply a unique style for a
single element.
To use inline styles, add the style attribute to the
relevant element. The style attribute can contain any
CSS property.
<header style="color:blue;padding-left:20px;">This is a heading.</header>

Browser stylesheet
Linked (external) stylesheet
Embedded (internal) stylesheet
Inline (internal) Styles
HighImportanceLowImportance

CSS Rules

CSS Selectors
• Selectors are used to target which HTML to style.
Properties and values are used to set the style
rules.
• There are three kinds of selectors:

CSS Selectors - Tag
• TagAn HTML tag such as h1 or p.
HTML tag selector:
HTML tag selector CSS:
<p>Sample paragraph.</p>
p {
color: red;
font-size: 200%;
}

CSS Selectors - Class
• A class attribute of one or more elements.
Referenced in CSS with a “.” before it.
Class selector HTML:
HTML class selector CSS:
<p class="warning">This is a paragraph with a class="warning".</p>
.warning {
background-color: #ffc;
}

CSS Selectors - Id
• An id attribute of a unique element, should only
be used once. Referenced in CSS with a “#”
before it.
Id selector HTML:
HTML Id selector CSS:
<h1 id="site-title">Sample Blog Title</h1>
#site-title {
font-size: 3em;
}

Web Form 2.0
• Form elements and attributes in HTML5 provide a
greater degree of semantic mark-up than HTML4
and remove a great deal of the need for tedious
scripting and styling that was required in HTML4.
• The forms features in HTML5 provide a better
experience for users by making forms more
consistent across different web sites and giving
immediate feedback to the user about data entry.

Web Form 2.0
• They also provide this experience to users who
have scripting disabled in their browser.

Web Form 2.0 – Input Types
• url - For entering a URL. It must start with a valid
URI scheme, for example http://, ftp:// or mailto:.
• tel - For entering phone numbers. It does not
enforce a particular syntax for validation, so if you
want to ensure a particular format, you can use
pattern.
• email - For entering email addresses, and hints
that the @ should be shown on the keyboard by
default.

• search - A text input field styled in a way that is
consistent with the platform's search field.
• number - For numeric input, can be any rational
integer or float value.
• range - For number input, but unlike the number
input type, the value is less important. It is
displayed to the user as a slider control.

• datetime-local - For entering a date and time
value where the time zone provided is the local
time zone.
• date - For entering a date (only) with no time
zone provided.
• time - For entering a time (only) with no time
zone provided.
• week - For entering a week (only) with no time
zone provided.

• month - For entering a month (only) with no time
zone provided.
• color - For picking a color.

Web Form 2.0 – Attributes
• placeholder
• autofocus
• autocomplete
• required
• pattern
• novalidate
• formnovalidate
• list
• multiple
• form
• formaction
• formenctype
• formmethod
• formtarget

<audio>
The HTML <audio> element is used to embed sound
content in documents. It may contain one or more
audio sources, represented using the src attribute
or the <source> element; the browser will choose
the most suitable one.
Reference: https://developer.mozilla.org/en/docs/Web/HTML/Element/audio

<audio> example
Basic usage
Audio element with source element
<audio src="sample/sample.mp3" controls autoplay loop>
This feature is not supported. please upgrade your browser.
</audio>
<audio controls="controls">
Your browser does not support the <code>audio</code> element.
<source src="foo.wav" type="audio/wav">
</audio>

<audio> - supported formats

<video>
The HTML <video> element is used to embed video
content in a document. It may contain one or more
video sources, represented using the src attribute
or the <source> element; the browser will choose
the most suitable one.
Reference: https://developer.mozilla.org/en/docs/Web/HTML/Element/video

<video> example
Basic usage
Video element with source element
<video src="sample/sample.mov" controls autoplay loop>
This feature is not supported. please upgrade your browser.
</video>
<video id="sampleMovie" width="640" height="360" controls>
<source src="HTML5Sample_H264.mov" />
<source src="HTML5Sample_Ogg.ogv" />
<source src="HTML5Sample_WebM.webm" />
</video>

<video> - supported formats

Offline Storage
• Apart from new elements in HTML5, this new
web technology offers us Offline Storage.
• Offline Storage allows us to save data in the
user’s browser and makes our web apps or games
work without a connection.

Offline Storage - sessionStorage
• sessionStorage is a form of storage that stores
data temporarily in the browser.
• The data in sessionStorage is set in key and value
pairing.
• The data set by sessionStorage is
– exclusive to the browser window or tab.
– still be there, unless we erase it intentionally or we
quit the browser.

Offline Storage - localStorage
• localStorage is a form of storage that stores data
in the browser.
• The data in localStorage is set in key and value
pairing.
• unlike sessionStorage, localStorage data is
persistent.
– the data will remain in the browser as long as we do
not intentionally remove it.

<summary><details>
• It seems like every Web site needs to have an
expanding/collapsing block of text.
• While this is easy enough to do with JavaScript, the
<details> tag makes it even easier. It does exactly
what we've all been doing for years now: makes a
simple block that expands and collapses the content
when the header is clicked.
• The <details> tag is supported only by Google
Chrome and Opera browsers, as of today.

Responsive Web Design (RWD)
• RWD is a web development approach that creates
dynamic changes to the appearance of a website,
depending on the screen size and orientation of the
device being used to view it.
• RWD is achieved using a mix of fluid grids and
layouts, flexible images and an intelligent use of CSS
media queries.

RWD - Advantages
• The same HTML is served to all devices, using CSS
(which determines the layout of webpage) to change
the appearance of the page.
• Rather than creating a separate site and
corresponding codebase for wide-screen monitors,
desktops, laptops, tablets and phones of all sizes, a
single codebase can support users with differently
sized viewports.

RWD - Advantages
• In responsive design, page elements reshuffle as the
viewport grows or shrinks. A three-column desktop
design may reshuffle to two columns for a tablet and
a single column for a smartphone.
• Responsive design relies on proportion-based grids
to rearrange content and design elements.
• The use of a single codebase can make development
faster, compared to developing 3 or 4 distinct sites, and
makes maintenance easier over time, as one set of code
and content needs to be updated rather than 3 or 4.

Media Query
• The @media query is the key ingredient that, allows
specified CSS to be applied depending on the device
and whether it matches the media query criteria.

How to use Media Query
CSS External Call
CSS Direct Call
<link rel=”stylesheet” media=”screen and (min-width:320px) and (max-
width:480px) “href=”css/yourstylesheet.css” />
@media screen and (min-width:320px)
and (max-width:480px){
/* Insert your styles here */
}

<canvas>
A whiteboard where your pen/eraser is Javascript

<canvas> - supported contexts
• 2d - representing a two-dimensional rendering
context.
• webgl - representing a three-dimensional rendering
context. This context is only available on browsers
that implement WebGl version 1 (OpenGL ES 2.0).
• webgl2 - representing a three-dimensional rendering
context. This context is only available on browsers
that implement WebGl version 2 (OpenGL ES 3.0).
• Bitmaprenderer - provides functionality to replace
the content of the canvas with a given ImageBitmap.

<canvas> - How to Clear?
When any element on the canvas needs to change
(move, erase, etc), the standard method is to
completely erase the canvas and redraw the canvas
with the elements in their new positions (or not redraw
the elements if they are erased).
That's because canvas does not "remember" where it
drew any individual element and therefore cannot
individually move or erase any element.

<canvas> - How to Clear?
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);

References
• http://www.w3schools.com/html5/
• http://htmldog.com/reference/htmltags/
• https://www.smashingmagazine.com/wp-content/uploads/images/html5-
cheat-sheet/html5-cheat-sheet.pdf
• http://html5demos.com/
• http://www.cssbasics.com/
• http://css3test.com/
• http://cssmediaqueries.com/

CODE IS POETRY

Html5 and-css3-overview

Recommended

More Related Content

What's hot (20)

Similar to Html5 and-css3-overview (20)

Recently uploaded (20)

Html5 and-css3-overview