4. 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.
Thursday, January 19, 2017
5. 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>".
Thursday, January 19, 2017
6. 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
Thursday, January 19, 2017
7. History of HTML
• 1995 - HTML 2.0 was first published by W3C.
• 1997 - HTML 3.0 was first published by W3C.
• 1999 - HTML 4.01 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.
Thursday, January 19, 2017
8. 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.
Thursday, January 19, 2017
9. 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.
Thursday, January 19, 2017
Standards Organizations – W3C
W3C (World Wide Web Consortium)
10. 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.
Thursday, January 19, 2017
11. 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.
Thursday, January 19, 2017
12. HTML5 vs HTML Living Standard
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.
Thursday, January 19, 2017
13. HTML5 vs HTML Living Standard
Stated by, David Baron from Mozilla
Thursday, January 19, 2017
When the W3C’s and WHATWG’s HTML specifications differ, we tend to follow
the WHATWG one.
14. 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.
Thursday, January 19, 2017
16. 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>
<!-- this is a comment -->
</body>
</html>
Thursday, January 19, 2017
17. <!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:
Thursday, January 19, 2017
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
18. 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
Thursday, January 19, 2017
19. 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.
Thursday, January 19, 2017
20. The New Elements of HTML5
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
Thursday, January 19, 2017
21. The New Elements of HTML5
Here's a nice visual outline of these by Smashing Magazine:
Thursday, January 19, 2017
22. 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).
Thursday, January 19, 2017
23. 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
Thursday, January 19, 2017
24. 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.
Thursday, January 19, 2017
25. 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.
Thursday, January 19, 2017
26. 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:
Thursday, January 19, 2017
27. External Style Sheet
The external style sheet file must be saved with
a .css extension.
Thursday, January 19, 2017
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
28. 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:
Thursday, January 19, 2017
<head>
<style>
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
29. 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.
Thursday, January 19, 2017
<header style="color:blue;padding-left:20px;">This is a heading.</header>
32. 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:
Thursday, January 19, 2017
33. CSS Selectors - Tag
• TagAn HTML tag such as h1 or p.
HTML tag selector:
HTML tag selector CSS:
Thursday, January 19, 2017
<p>Sample paragraph.</p>
p {
color: red;
font-size: 200%;
}
34. 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:
Thursday, January 19, 2017
<p class="warning">This is a paragraph with a class="warning".</p>
.warning {
background-color: #ffc;
}
35. 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:
Thursday, January 19, 2017
<h1 id="site-title">Sample Blog Title</h1>
#site-title {
font-size: 3em;
}
36. 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.
Thursday, January 19, 2017
37. Web Form 2.0
• They also provide this experience to users who
have scripting disabled in their browser.
Thursday, January 19, 2017
38. 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.
Thursday, January 19, 2017
39. Web Form 2.0 – Input Types
• 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.
Thursday, January 19, 2017
40. Web Form 2.0 – Input Types
• 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.
Thursday, January 19, 2017
41. Web Form 2.0 – Input Types
• month - For entering a month (only) with no time
zone provided.
• color - For picking a color.
Thursday, January 19, 2017
42. Web Form 2.0 – Attributes
• placeholder
• autofocus
• autocomplete
• required
• pattern
• novalidate
• formnovalidate
• list
• multiple
• form
• formaction
• formenctype
• formmethod
• formtarget
Thursday, January 19, 2017
43. <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
Thursday, January 19, 2017
44. <audio> example
Basic usage
Audio element with source element
Thursday, January 19, 2017
<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>
46. <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
Thursday, January 19, 2017
47. <video> example
Basic usage
Video element with source element
Thursday, January 19, 2017
<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>
49. 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.
Thursday, January 19, 2017
50. 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.
Thursday, January 19, 2017
51. 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.
Thursday, January 19, 2017
52. <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.
Thursday, January 19, 2017
53. 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.
Thursday, January 19, 2017
54. 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.
Thursday, January 19, 2017
55. 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.
Thursday, January 19, 2017
56. 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.
Thursday, January 19, 2017
57. How to use Media Query
CSS External Call
CSS Direct Call
Thursday, January 19, 2017
<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 */
}
59. <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.
Thursday, January 19, 2017
60. <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.
Thursday, January 19, 2017
61. <canvas> - How to Clear?
Thursday, January 19, 2017
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);