HTML
What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
Example Explained
• The <!DOCTYPE html> declaration defines that this document is an HTML5
document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images,
• hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
HTML Page Structure
Below is a visualization of an HTML page structure :
Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Step 2: Write Some HTML
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "[Link]" and set the encoding to UTF-8 (which is the preferred
encoding for HTML files).
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-
click - and choose "Open with").
HTML BASIC TAGS
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading:
HTML ELEMENTS:
An HTML element is defined by a start tag, some content, and an end tag.
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML element.
There are some HTML elements which don't need to be closed, such as <img.../>,
<hr /> and <br /> elements. These are known as singleton tags.
HTML documents consists of a tree of these elements and they specify how HTML
documents should be built, and what kind of content should be placed in what part
of an HTML document.
HTML Tag vs. Element
An HTML element is defined by a starting tag. If the element contains other
content, it ends with a closing tag.
For example, <p> is starting tag of a paragraph and </p> is closing tag of
the same paragraph but <p>This is paragraph</p> is a paragraph element.
Nested HTML Elements
It is very much allowed to keep one HTML element inside another HTML
element −
▰ The <html> element defines the whole document.
▰ It has a start tag <html> and an end tag </html>.
▰ The element content is another HTML element (the <body> element).
▰ The <body> element defines the document body.
▰ It has a start tag <body> and an end tag </body>.
The element content is two other HTML elements (<h1> and <p>).
HTML ATTRIBUTES:
An attribute is used to define the characteristics of an HTML element and is
placed inside the element's opening tag. All attributes are made up of two
parts − a name and a value .
Attributes usually come in name/value pairs like: name="value"
The name is the property you want to set. For example, the paragraph
<p> element in the example carries an attribute whose name is align,
which you can use to indicate the alignment of paragraph on the page.
The value is what you want the value of the property to be set and
always put within quotations. The below example shows three possible
values of align attribute: left, center and right.
Attribute names and attribute values are case-insensitive. However, the
World Wide Web Consortium (W3C) recommends lowercase
attributes/attribute values in their HTML 4 recommendation.
Core Attributes
The four core attributes that can be used on the majority of HTML elements
(although not all) are −
Id
Title
Class
Style
The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element
within an HTML page. There are two primary reasons that you might want to
use an id attribute on an element.
If an element carries an id attribute as a unique identifier, it is possible to
identify just that element and its content.
If you have two elements of the same name within a Web page (or style
sheet), you can use the id attribute to distinguish between elements that
have the same name.
Example:
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>
The title Attribute
The title attribute gives a suggested title for the element. They syntax for the
title attribute is similar as explained for id attribute −
The behavior of this attribute will depend upon the element that carries it,
although it is often displayed as a tooltip when cursor comes over the
element or while the element is loading.
The class Attribute
The class attribute is used to associate an element with a style sheet, and specifies the
class of element. You will learn more about the use of the class attribute when you will
learn Cascading Style Sheet (CSS). So for now you can avoid it.
The value of the attribute may also be a space-separated list of class names. For
example −
class = "className1 className2 className3"
The style Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the
element.
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as
a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
HTML PARAGRAPH:
The HTML <p> element defines a paragraph:
With HTML, you cannot change the output by adding extra spaces or extra lines
in your HTML code.
The browser will remove any extra spaces and extra lines when the page is
displayed:
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks:
HTML Text Formatting
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic
text.
Formatting elements were designed to display special types of text:
HTML FONT- Not Supported in HTML5.
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size,
and more.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
Text Color
The CSS color property defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to
page.
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
Example
<a href="[Link] [Link]!</a>
LINK COLORS:
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window.
To change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url">
The alt Attribute
The alt attribute provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user
uses a screen reader).
The value of the alt attribute should describe the image:
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
Example
Images in Another Folder
If you have your images in a sub-folder, you must include the folder name in
the src attribute:
Example:
<img src="/images/[Link]" alt="HTML5 Icon" style="width:128px;height:128px;">
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
Each table row is defined with the <tr> tag. A table header is defined with the <th>
tag. By default, table headings are bold and centered. A table data/cell is defined with
the <td> tag.
Example
HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property:
HTML Table - Collapsed Borders
If you want the borders to collapse into one border, add the CSS border-collapse
property:
Example
HTML Table - Cell Padding
Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:
HTML Table - Adding Border Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
Example
HTML Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute:
HTML Table Styling:
A Special Style for One Table
To define a special style for a special table, ad d an id attribute to the table:
HTML Lists
HTML lists allow web developers to group a set of related items in lists.
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
The CSS list-style-type property is used to define the style of the list item marker. It can
have one of the following values:
Example:
Ordered HTML List
The HTML <ol> tag defines an ordered list.
An ordered list can be numerical or alphabetical.
The list items will be marked with numbers by default:
HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server
for processing.
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on the type attribute.
Text Fields
The <input type="text"> defines a single-line input field for
text input.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Radio Button Input
<input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of
choices:
Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
The Submit Button
<input type="submit"> defines a button for submitting the form data to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Jo
hn"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Do
e"><br><br>
<input type="submit" value="Submit"></form>
HTML Form Elements
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation
Visible Values:
Use the size attribute to specify the number of visible values:
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
The list Attribute
The list attribute refers to a <datalist> element that contains pre-defined options for an
<input> element.
The <datalist> Element
The <datalist> element specifies a list of pre-defined options for an <input> element.
HTML Iframes
An HTML iframe is used to display a web page within a web page.
Syntax
<iframe src="url" title="description"></iframe>
Iframe - Target for a Link
An iframe can be used as the target frame for
a link.
The target attribute of the link must refer to
the name attribute of the iframe:
<!DOCTYPE html>
<html>
<body>
<h2>Iframe - Target for a Link</h2>
<iframe src="demo_iframe.htm"
name="iframe_a" height="300px"
width="100%" title="Iframe
Example"></iframe>
<p><a href="[Link]
target="iframe_a">[Link]</a></p>
<p>When the target attribute of a link matches the name of an iframe, the link will
open in the iframe.</p>
</body>
</html>
HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or
HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
ex:
Text Color
You can set the color of text:
Border Color
You can set the color of borders:
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA
values, and HSLA values:
Same as color name "Tomato":
The following two <div> elements have their background color set with RGBA and HSLA
values, which add an Alpha channel to the color (here we have 50% transparency):
HTML <!DOCTYPE>
Definition and Usage
The <!DOCTYPE> declaration must be the very first thing in your HTML document,
before the <html> tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an
instruction to the web browser about what version of
HTML the page is written in.
In HTML 4.01, the <!DOCTYPE> declaration refers to a
DTD, because HTML 4.01 was based on SGML. The DTD
specifies the rules for the markup language, so that the
browsers render the content correctly.
HTML5 is not based on SGML, and therefore does not
require a reference to a DTD.
Tip: Always add the <!DOCTYPE> declaration to your
HTML documents, so that the browser knows what type
of document to expect.
HTML Layout Elements
Websites often display content in multiple columns (like a magazine or newspaper).
HTML5 offers new semantic elements that define the different parts of a web page:
▰ <header> - Defines a header for a document or a section
▰ <nav> - Defines a container for navigation links
▰ <section> - Defines a section in a document
▰ <article> - Defines an independent self-contained article
▰ <aside> - Defines content aside from the content (like a sidebar)
▰ <footer> - Defines a footer for a document or a section
▰ <details> - Defines additional details
▰ <summary> - Defines a heading for the <details> element
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
body {
font-family: Arial, Helvetica, sans-serif;
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
/* Clear floats after the columns */
section::after {
content: "";
display: table;
clear: both;
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
/* Responsive layout - makes the two columns/boxes stack on top of each other instead
of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
</style>
</head>
<body>
<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On
smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about
this in our next chapter - HTML Responsive.)</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two
millennia, its history going back to its founding by the Romans, who named it
Londinium.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
HTML HEAD
The HTML <head> Element
The <head> element is a container for metadata (data about data) and is placed
between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, links, scripts, and
other meta information.
The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and
<base>.
The HTML <title> Element
The <title> element defines the title of the document, and is required in all
HTML/XHTML documents.
The HTML <style> Element
The <style> element is used to define style information for a single HTML page:
Example
The HTML <meta> Element
The <meta> element is used to specify which character set is used, page description,
keywords, author, and other metadata.
Metadata is used by browsers (how to display content), by search engines (keywords),
and other web services.
Setting The Viewport
HTML5 introduced a method to let web designers take control over the viewport,
through the <meta> tag.
The viewport is the user's visible area of a web page. It varies with the device, and will
be smaller on a mobile phone than on a computer screen.
You should include the following <meta> viewport element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how to control the page's
dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of
the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the
browser.
The HTML <script> Element
The <script> element is used to define client-side JavaScripts.
This JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function myFunction() {
[Link]("demo").innerHTML = "Hello JavaScript!";
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button"
onclick="myFunction()">Try it</button>
</body>
</html>
HTML Entities
Reserved characters in HTML must be replaced with character entities.
Characters that are not present on your keyboard can also be replaced by entities.
HTML Entities
Some characters are reserved in HTML.
If you use the less than (<) or greater than (>) signs in your text, the browser might mix
them with tags.
Character entities are used to display reserved characters in HTML.
To display a less than sign (<) we must write: < or <
HTML URLs
A URL is another word for a web address.
A URL can be composed of words ([Link]), or an Internet Protocol (IP)
address ([Link]).
Most people enter the name when surfing, because names are easier to remember than
numbers.
URL - Uniform Resource Locator
Web browsers request pages from web servers by using a URL.
A Uniform Resource Locator (URL) is used to address a document (or other data) on the
web.
Common URL Schemes
The table below lists some common schemes:
URL Encoding
URLs can only be sent over the Internet using the ASCII character-set. If a URL contains
characters outside the ASCII set, the URL has to be converted.
URL encoding converts non-ASCII characters into a format that can be transmitted over
the Internet.
URL encoding replaces non-ASCII characters with a "%" followed by hexadecimal digits.
URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+)
sign, or %20.
HTML Media
Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.
The most common way to discover the type of a file, is to look at the file extension.
Multimedia files have formats and different extensions
like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
HTML Audio
Audio on the Web
Before HTML5, audio files could only be played in a browser with a plug-in (like flash).
The HTML5 <audio> element specifies a standard way to embed audio in a web page.
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser
may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers
that do not support the <audio> element.
HTML Video
How it Works
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are
not set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser
may choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers
that do not support the <video> element.
The HTML <video> Element
To show a video in HTML, use the <video> element:
HTML <video> Autoplay
To start a video automatically use the autoplay attribute:
Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
HTML Plug-ins
The purpose of a plug-in is to extend the
functionality of a web browser.
HTML Helpers (Plug-ins)
Helper applications (plug-ins) are computer
programs that extend the standard functionality
of a web browser.
Examples of well-known plug-ins are Java
applets.
Plug-ins can be added to web pages with the <object> tag or the <embed> tag.
Plug-ins can be used for many purposes: display maps, scan for viruses, verify your
bank id, etc.
The <object> Element
The <object> element is supported by all browsers.
The <object> element defines an embedded object within an HTML document.
It is used to embed plug-ins (like Java applets, PDF readers, Flash Players) in web pages.
The <object> element can also be used to include HTML i n HTML or images
HTML YouTube
The easiest way to play videos in HTML, is to use YouTube.
To play your video on a web page, do the following:
Upload the video to 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 any other parameters to the URL (see below)
HTML5 Elements
The most interesting new HTML5 elements are:
New semantic elements like <header>, <footer>, <article>, and <section>.
New attributes of form elements like number, date, time, calendar, and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.
New Semantic/Structural Elements
HTML5 offers new elements for better document structure:
<article> Defines an article in a document
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other
text outside it
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption>Defines a caption for a <figure> element
<figure> Defines self-contained content
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<main> Defines the main content of a document
<mark> Defines marked/highlighted text
<menuitem> Defines a command/menu item that the user can invoke from a popup
menu
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break
HTML Drag and Drop API
Drag and Drop
Drag and drop is a very common feature. It is when you "grab" an object and drag it to
a different location.
In HTML5, drag and drop is part of the standard: Any element can be draggable.
Make an Element Draggable
First of all: To make an element draggable,
set the draggable attribute to true:
<img draggable="true">
Where to Drop - ondragover
The ondragover event specifies where the
dragged data can be dropped.
By default, data/elements cannot be
dropped in other elements. To allow a drop,
we must prevent the default handling of
the element.
This is done by calling the [Link]() method for the ondragover event:
Do the Drop - ondrop
When the dragged data is dropped, a drop event occurs.
In the example above, the ondrop attribute calls a function, drop(event):
function drop(ev) {
[Link]();
var data = [Link]("text");
[Link]([Link](data));
Example:
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function dragstartHandler(ev) {
[Link]("text", [Link]);
function dragoverHandler(ev) {
[Link]();
function dropHandler(ev) {
[Link]();
const data = [Link]("text");
[Link]([Link](data));
</script>
</head>
<body>
<h1>Drag and Drop API</h1>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="dropHandler(event)"
ondragover="dragoverHandler(event)"></div>
<br>
<img id="img1" src="img_logo.gif" draggable="true"
ondragstart="dragstartHandler(event)" width="336" height="69">
</body>
</html>
HTML Canvas Graphics
HTML Canvas
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
The <canvas> element is only a container for graphics. You must use JavaScript to
actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
Draw a Line
Example
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link](0,0);
[Link](200,100);
[Link]();
</script>
In HTML, a <canvas> element looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>
The <canvas> element must have an id attribute so it can be referred to by JavaScript.
The width and height attribute is necessary to define the size of the canvas.
You can have multiple <canvas> elements on one HTML page.
By default, the <canvas> element has no border and no content.
To add a border, use a style attribute:
Example
<canvas id="myCanvas" width="200" height="100“ style="border:1px solid
#000000;">
</canvas>
HTML SVG Graphics
What is SVG?
▰ SVG stands for Scalable Vector Graphics
▰ SVG is used to define graphics for the Web
▰ SVG is a W3C recommendation
The HTML <svg> Element
▻ The HTML <svg> element is a container for SVG graphics.
▻ SVG has several methods for drawing paths, boxes, circles, text, and
graphic images.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Differences Between SVG and Canvas
SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
SVG is XML based, which means that every element is available within the SVG DOM.
You can attach JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object
are changed, the browser can automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten
by the browser. If its position should be changed, the entire scene needs to be redrawn,
including any objects that might have been covered by the graphic.
Comparison of Canvas and SVG
The table below shows some important differences between Canvas and SVG:
HTML API’s
HTML Geolocation API
The HTML Geolocation API is used to get the geographical position of a user.
Since this can compromise privacy, the position is not available unless the user
approves it.
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
const x = [Link]("demo");
function getLocation() {
if ([Link]) {
[Link](success, error);
} else {
[Link] = "Geolocation is not supported by this browser.";
function success(position) {
[Link] = "Latitude: " + [Link] +
"<br>Longitude: " + [Link];
}
function error() {
alert("Sorry, no position available.");
</script>
HTML Web Storage API
What is HTML Web Storage?
With web storage, web applications can store data locally within the user's browser.
Before HTML5, application data had to be stored in cookies, included in every server
request. Web storage is more secure, and large amounts of data can be stored locally,
without affecting website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never
transferred to the server.
Web storage is per origin (per domain and protocol). All pages, from one origin, can
store and access the same data.
HTML Web Storage Objects
HTML web storage provides two objects for storing data on the client:
[Link] - stores data with no expiration date
[Link] - stores data for one session (data is lost when the browser
tab is closed)
The localStorage Object
The localStorage object stores the data with no expiration date. The data will not be
deleted when the browser is closed, and will be available the next day, week, or year.
The sessionStorage Object
The sessionStorage object is equal to the localStorage object, except that it stores the
data for only one session. The data is deleted when the user closes the specific browser
tab.
The following example counts the number of times a user has clicked a button, in the
current session:
HTML Web Workers API
What is a Web Worker?
When executing scripts in an HTML page, the page becomes unresponsive until the
script is finished.
A web worker is a JavaScript that runs in the background, independently of other scripts,
without affecting the performance of the page. You can continue to do whatever you
want: clicking, selecting things, etc., while the web worker runs in the background.
ex:
HTML Server-Sent Events (SSE) API:
Server-Sent Events - One Way Messaging
A server-sent event is when a web page automatically gets updates from a server.
This was also possible before, but the web page would have to ask if any updates were
available. With server-sent events, the updates come automatically.
Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results,
etc.
`
`````````````````````````````````````````````````````````````````````````````````````````
`````0……..
`
