WEB

TECHNOLOGIES
Lecture # 4
Engr. FARYAL BALOCH
Department of Software Engineering MUET
 HTML5 – From HTML to HTML5 the story so far…
❑ The Beginning:
- HTML was first came out in 1993.
- During the ’90s HTML grew up faster and faster and finally, in 1999, version 4.01 was
released.
- In 2000, the World Wide Web Consortium (W3C) recommended XHTML 1.0.
- The XHTML syntax was strict, and the developers were forced to write valid and
"well-formed" code.
❑ HTML VS XML:
- After the rapid delivery of these four versions though, HTML was widely considered a
dead-end;
- the focus of web standards shifted to XML and XHTML.
- In the meantime, HTML refused to die, and most of the content on the web continued to be
served as HTML.
- To enable new web applications and address HTML’s shortcomings, new features and
specifications were needed for HTML.
So, what's new in HTML5?...
❑HTML5 is more than just new tags; it provides deeper
functionality for your web apps to interface with the browser.
-Web Storage: a way for websites to store information on
the user's browser over time.
-Offline Web Applications: allows you to download and
view full pages offline.
-Geolocation: "Geolocation" gives you the ability to
discover where the user is just by querying the browser.
Accessed via JavaScript.
So, what's new in HTML5?...
-Microdata: Microdata is an international standard for the
semantic markup of HTML pages.
-In plain English, microdata helps computers understand
what the contents of your webpages say.
-Search engines, web crawlers and browsers can extract
and process microdata.
-Application programming interfaces (APIs): for complex
web applications.
-Multimedia: you can add audio, video into your webpage
without using extra plugins such as flash.
HTML5 – Browser Support
-HTML5 is not yet an official standard, and no browsers have
full HTML5 support.
-But all major browsers (Safari, Chrome, Firefox, Opera,
Internet Explorer) continue to add new HTML5 features to
their latest versions.
HTML5 –
Layout
HTML5 allows to divide
page into various parts
This division allows to
describe the structure of
the page.
allows search engines to
place more weight on the
content in an <article>
element than that in the
<header> or
<footer>elements.
it also makes the code
easier to follow.
Doctypes
❑ Because there have been several versions of HTML, each web page should begin
with a DOCTYPE declaration to tell a browser which version of HTML the page is
using (although browsers usually display the page even if it is not included).
HTML5 – Semantic/Structural Elements
❑ Semantic HTML elements are those that clearly describe their meaning in a human
and machine-readable way.
❑ They are concerned with how we display our html page header, navigation, footer etc.
❑ Elements such as <header>, <footer> and <article> are all considered
semantic because they accurately describe the purpose of the element and the type of
content that is inside them.
❑ HTML5 defines many semantic elements and all of these are block level elements
(always appear to start on a new line in the browser window)
semantic elements Non-Semantic Elements
Header and Footer <header> & <footer>
❑ <header>….. <footer> appears at the top or bottom of every page on the site.
- A header or footer for an individual <article> or <section> within the page.
- In this example, the <header> element used to contain the site name and the main
navigation.
- The <footer> element contains copyright information, along with links to the privacy policy
and terms and conditions.
Navigation <nav>
❑<nav> is used to contain the major navigational
blocks on the site
Articles <article>
❑ <article> element acts as a container for any section of a page that could stand
alone
- This could be an individual article or blog entry, a comment or forum post, or any
other independent piece of content.
- The <article> elements can even be nested inside each other.
Aside <aside>
❑ <aside>
- When the <aside> element is used inside an <article> element, it should contain
information that is related to the article but not essential to its overall meaning.
- When the <aside> element is used outside an <article> element, it should contain
information that is related to the entire page.
Section <section>
❑ <section>
- Groups related content together; separate heading for each section
- Such as a homepage of website containing different sections as latest news, top products,
and newsletter signup.
Heading Groups <hgroup>
❑ <hgroup>
- Groups together a set of one or more <h1> through <h6> elements so that they are
treated as one single heading.
- For example, the <hgroup> element could be used to contain both a title inside an
<h2> element and a subtitle within an <h3> element.
HTML5 – Multimedia Elements
❑In HTML5, you can embed audio or video using
native HTML tags audio and video, and if the
browser supports the tags, it will give users
controls to play the file.
-No plugins needed
-Better performance
-Native, accessible controls
HTML5 –
Adding Video
<video>
- Allows you to add video
file to your page.
- It has several attributes
- Note: all these attributes
are used inside video
element as
- <video controls muted>
HTML5 - Video Formats
HTML5 –
Adding audio
<audio> The audio
element is used for
embedding an audio
player inside a page for a
particular audio file.
It has several attributes
Note: all these attributes
are used inside audio
element as
<audio controls muted>
HTML audio Formats and browser support
HTML5 – Adding YouTube
-Take a note of the video id
-Define an <iframe> element in your web page
-Let the src attribute point to the video URL
-Use the width and height attributes to specify the dimension
of the player
-Add mute=1 after autoplay=1 to let your video start
playing automatically (but muted).
HTML5 – Graphic Elements (Canvas)
❑ In HTML5 we can draw graphics using <canvas> element via scripting
(usually JavaScript).
- The <canvas> element is only a container for graphics; you must use a
script to draw the graphics.
- Canvas has several methods for drawing paths, boxes, circles, text, and
adding images.
- Browser Support:
HTML5 – Graphic Elements (CANVAS)
-HTML Canvas can:
- draw Text
- draw Graphics (Lines, rectangles etc.)
- be Animated (objects can move from simple bouncing balls to
complex animations.)
- be Interactive (respond to buttons, mouse clicks etc.)
- be Used in Games (methods of animations etc.)
- By default, the <canvas> element has no border and no content.
HTML5 – Drawing on canvas with JavaScript…
-Step 1: create a canvas element

-Step 2:
-Find the <canvas> element so we could manipulate it with
JS; this is done by using the HTML DOM method
getElementById():

-So, What is happening here? Basically, we are searching

entire HTML document for HTML canvas element. Once the
canvas element is found it is placed inside canvas variable.
HTML5 – Drawing on canvas with JavaScript…
-Step 3:
- Create a drawing object: Now we need a drawing object for the
canvas.

- The getContext() function returns the drawing context - which is an

object that has all the drawing properties and functions you use to
draw on the canvas.
- Via this method we draw the 2D drawings.
HTML5 – Drawing on canvas with JavaScript…
-Step 4:
- Draw on the canvas:

- The fillStyle property can be a CSS color, a gradient, or a pattern. The default
fillStyle is black.
- The fillRect(x,y,width,height) method draws a rectangle, filled with the fill style,
on the canvas
HTML5 – Setting Canvas Coordinates
HTML5 – Drawing Lines on canvas with JavaScript…

- This method is called before beginning each line, so that they may be drawn with
different colors.

- Defines the starting point of the line

- Defines the ending point of the line

HTML5 – Drawing Circles and Arcs on canvas with JavaScript…

- Curved paths are created using the arc() function.

-x and y specify the position of the center of the circle.

-Radius set the radius of circle
-startAngle (at what angle it should start drawing using arc) and
endAngle (where should it end) take input in radians
-Anticlockwise parameter defines whether the arc should be drawn
anticlockwise (true) or clockwise (false).
HTML5 – Graphic Elements SVG
-The other way of drawing graphics is scalable vector
graphics or SVG
-SVG defines vector-based graphics in XML format.
-The HTML <svg> element is a container for SVG
graphics.
-SVG has several methods for drawing paths, boxes, circles,
text, and graphic images.
-SVG is a W3C Recommendation
HTML5 – Drawing Circles via SVG…

◦ An SVG image begins with an <svg> element

◦ The width and height attributes of the <svg> element define the width and height of the
SVG image
◦ The <circle> element is used to draw a circle
◦ The cx and cy attributes define the x and y coordinates of the center of the circle.
◦ The r attribute defines the radius of the circle
◦ The stroke and stroke-width attributes control how the outline of a shape appears.
◦ The fill attribute refers to the color inside the circle.
◦ The closing </svg> tag closes the SVG image
HTML5 – Drawing Circles via SVG…
HTML5 – Drawing rectangles via SVG…
HTML5 – Drawing ellipse via SVG…

Code explanation:
•The cx attribute defines the x coordinate of the center of the ellipse
•The cy attribute defines the y coordinate of the center of the ellipse
•The rx attribute defines the horizontal radius
•The ry attribute defines the vertical radius
HTML5 – Drawing lines via SVG…

Code explanation:
•The x1 attribute defines the start of the line on the x-axis
•The y1 attribute defines the start of the line on the y-axis
•The x2 attribute defines the end of the line on the x-axis
•The y2 attribute defines the end of the line on the y-axis
HTML5 –SVG Animation
◦ SVG animations can be created using the <animate> element.
◦ The example below creates a rectangle that will change its position in 3
seconds and will then repeat the animation twice:
HTML5 – New
Form Elements
…
HTML5 allows for creation
of more powerful forms
and more compelling user
experiences.
The <datalist> specifies
drop-down list of
pre-defined options as
they input data.
HTML5 – New
Form Elements
…
The <output> element is
used to represent the
result of a calculation (like
one performed by a
script).
HTML5 – Form (new attributes)…
- HTML5 has introduced a new attribute called placeholder.
- On <input> and <textarea> elements, this attribute provides a hint to the
user of what information can be entered into the field.
HTML5 – Form (new attributes)…
◦ The multiple specifies that the user can enter more than one value in the
<input> element.
◦ Works with email, and file.
HTML5 – Form (new attributes)…
◦ The required attribute is used to make the input elements required.
◦ The form will not be submitted without filling in the required fields.
HTML5 – Form (new input types)…
HTML5 – Form (new input types)…
 HTML5 – APIs and SDKs
❑ APIs (Application Programming Interfaces)
- So, firstly, APIs are all about communication, they are a set of definitions and protocols for apps
or services to talk to other apps or services.
- Features:
▪ Communication:
▪ Abstraction: it abstracts away all that complicated logic; you only have to worry about getting
the data you need
▪ Standardized: there's industry-defined standards for how to define an API and there's a few
formats that are popular for APIs e.g., SOAP, GraphQL, or REST.
❑ SDK (software development kit)
▪ is just like a toolbox
▪ Its a collection of software development tools in one installable package.
▪ They facilitate the creation of applications by having compiler, debugger.
▪ It is through sdk that u call an api
HTML5 – APIs…
❑ HTML5 includes several built-in APIs that are designed to move the
browser towards being more of a native programming platform reducing
or eliminating the need for outside plugins and services
❑ All these APIs are JavaScript based so you must have good amount of
knowledge of JavaScript.
HTML5 – Integrated APIs…
❑ Video and audio API:
- designed to control playback of audio and video content this will allow authors to create
robust media players
- create a complete video/audio album, video gallery, cue points video application etc. by just
using HTML5 Video API.
❑ Inline editing API:
- this API allows users to edit content directly on the page without the use of an external editor
- this could be used to create an interface for blogs, content management systems or to allow
clients to update web page content directly within the browser
❑ Offline application API:
- this offline cache API will allow authors to build applications that continue to work even when
internet connections are not available
- these applications could then update data when connectivity is restored
HTML5 – Integrated APIs…
❑ History API:
- that will enable applications to access the browser history, save history states and navigate
between those states.
❑ Web Protocol API:
- allows applications to register themselves as handlers of a URL scheme
- what does that mean? well using this API mail applications could register themselves to
handle mail protocols file upload applications could register themselves to handle FTP and
so on
- Not yet finalized
❑ Drag and Drop API:
- you can drag things and drop them in a container in a native manner using HTML.
HTML5 – Associated APIs…
❑ In addition to those built-in APIs html5 has several related application programming interfaces
that either started out in the specification only to be split off later or APIs that are being
developed at the same time and are mentioned frequently along with html5
❑ these include:
- Geolocation API : helps identify the web browser’s geographic location.
- https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation
- 2D canvas drawing API: for drawing graphics animations etc.,
- Web storage: Local Storage and session storage
- https://www.w3schools.com/html/html5_webstorage.asp
- Web Workers API: addresses browser performance.
- Web Sockets API
- Messaging API
THANK YOU