Hypertext Markup
Language (HTML5)
About html !!!
• Hypertext Mark-up Language is the standard mark-up language for
documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets and scripting languages such as
JavaScript
• Wikipedia Link: [Link]
• Maintained by: WHATWG
• WHATWG - The Web Hypertext Application Technology Working Group is a
community of people interested in evolving HTML and related technologies.
The WHATWG was founded by individuals from Apple Inc., the Mozilla
Foundation and Opera Software, leading Web browser vendors, in 2004.
• Wikipedia Link: [Link]
HISTORY
• In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed
and prototyped ENQUIRE, a system for CERN researchers to use and
share documents. In 1989, Berners-Lee wrote a memo proposing an
Internet-based hypertext system. Berners-Lee specified HTML and
wrote the browser and server software in late 1990.
• Sample Websites
• CNN’s OJ Simpson Trial Page (1996) - [Link]
• DPGraph - [Link]
• Arngren - [Link]
• Bob Dole/Jack Kemp Presidential Camapign (1996) -
[Link]
Welcome to the nineties
• [Link]
WHAT is html ?
• HTML is the standard mark-up language for creating Web pages.
• HTML stands for Hyper Text Mark-up Language
• 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 are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph", "table",
and so on
• Browsers do not display the HTML tags, but use them to render the content of
the page
TAGS / STYLES / Attributes
TAGS
• TAGS are enclosed angle brackets
• Example: <tagname></tagname>
Elements
• Contains START TAG and END TAG
• <title>This is the Title</title>
• Nested Elements
• Ex: <PRACTICAL>
• Empty HTML elements (<br />
• Try out other scenarios & see the behaviour …!!!!
Headings
• <h1></h1>
• <h2></h2>
• <h3></h3>
• <h4></h4>
• <h5></h5>
• <h6></h6>
Paragraph
• The HTML <p> element defines a paragraph
• HTML DISPLAY:
• You cannot be sure how HTML will be displayed.
• Large or small screens, and resized windows will create different results.
• 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
• TRY IT OUT !!!
attributes
• Attributes provide additional information about HTML elements.
• All HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
• Examples
• href Attribute
• src Attribute
• width and height Attributes
• alt Attribute
Fonts
• It can be achieved using Styling
• SYNTAX:
• <tagname style="property:value;">
• TRY IT OUT changing Background Color, Text Color, etc… !!!!
Formatting
• Using Special HTML elements
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Small text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
Tables
• An HTML table is defined with the <table> tag.
• 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.
• <table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
• Adding a Border
• table, th, td {
border: 1px solid black;
}
• Collapsed Borders
• table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
• Adding Cell Padding
• th, td {
padding: 15px;
}
• Adding a Caption
• <table style="width:100%">
<caption>Monthly savings</caption>
• Left-align Headings
• th {
text-align: left;
}
• Adding Border Spacing
• table {
border-spacing: 5px;
}
• Cells that Span Many Columns
• <th colspan="2">Telephone</th>
• Cells that Span Many Rows
• <th rowspan="2">Telephone:</th>
Lists
• <ul style="list-style-type:disc;">
• disc Sets the list item marker to a bullet (default)
• circle Sets the list item marker to a circle
• square Sets the list item marker to a square
• none The list items will not be marked
• <ol type="1">
• type="1" The list items will be numbered with numbers (default)
• type="A" The list items will be numbered with uppercase letters
• type="a" The list items will be numbered with lowercase letters
• type="I" The list items will be numbered with uppercase roman numbers
• type="i" The list items will be numbered with lowercase roman numbers
Classes
• Define your own Styling class
• It is represented “.” in styles
• In HTML: <div class="classname">
• The class name is case sensitive!
• TRY IT OUT !!!
CLASSES
• Using The class Attribute on Inline Elements
• <h1>Sample <span class=“testClass">Class Text</span> Text</h1>
• Multiple Classes
• Class=“class1 class2”
• Different Tags Can Share Same Class
• <h2 class=“class1” /> <span class=“class2” />
• Using The class Attribute in JavaScript
• getElementsByClassName();
Id
• Define your own ID
• It is represented “#” in styles
• In HTML: <div id=“idName">
• Difference Between Class and ID
• An HTML element can only have one unique id that belongs to that single element, while a class
name can be used by multiple elements
• Bookmarks with ID and Links
• <h2 id=“contentId">Sample Content</h2>
• <a href="#contentId ">Go to Sample Content</a>
• <a href=“sample_html.html#C4"> Go to Sample Content </a>
• Using The id Attribute in JavaScript
• getElementById()
• TRY IT OUT !!!
File paths
• File paths are used when linking to external files like:
• Web pages
• Images
• Style sheets
• JavaScripts
• There are 2 types:
• Absolute File Path
• Relative File Path
• Best Practice:
• It is best practice to use relative file paths (if possible).
• When using relative file paths, your web pages will not be bound to your current base
URL. All links will work on your own computer (localhost) as well as on your current
public domain and your future public domains.
Head
• The following tags describe metadata: <title>, <style>, <meta>, <link>,
<script>, and <base>.
• Link
• <link rel="stylesheet" href="[Link]">
• Base (element specifies the base URL and base target for all relative URLs in a
page)
• <base href="[Link] target="_blank">
• <img src=“[Link]">
• Omitting <html>, <head> and <body>?
• According to the HTML5 standard; the <html>, the <body>, and the <head> tag can be
omitted.
• TRY IT OUT…!!!
META
• 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.
• <meta charset="UTF-8">
• <meta name="description" content=“Description Here">
• <meta name="author" content="John Doe">
• <meta http-equiv="refresh" content="30">
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
Layout
• HTML tables (not recommended)
• CSS float property
• Disadvantages: Floating elements are tied to the document flow, which may
harm the flexibility
• CSS flexbox
• Disadvantages: Does not work in IE10 and earlier.
• CSS framework
• CSS grid (RWD – Responsive Web Design)
• Disadvantages: Does not work in IE nor in Edge 15 and earlier.
Links
• Hyper Link Syntax:
• <a href="url">link text</a>
• The target attribute can have one of the following values:
• _blank - Opens the linked document in a new window or tab
• _self - Opens the linked document in the same window/tab as it was clicked (this is default)
• _parent - Opens the linked document in the parent frame
• _top - Opens the linked document in the full body of the window
• framename - Opens the linked document in a named frame
• Local/External Links
• <a href="html_images.asp">HTML Images</a>
• Image as Link <a><img /></a>
• Link Titles: <a title=“Title”
URL ENCODER
• URL SYNTAX:
• scheme://[Link]:port/path/filename
• scheme - defines the type of Internet service (most common is http or https)
• prefix - defines a domain prefix (default for http is www)
• domain - defines the Internet domain name (like [Link])
• port - defines the port number at the host (default for http is 80)
• path - defines a path at the server (If omitted: the root directory of the site)
• filename - defines the name of a document or resource
• 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.
Images
• <img src="pic_trulli.jpg" alt="Italian Trulli">
• Image Size - Width and Height
• <img style="width:500px;height:600px;“ />
• <img width="500" height="600“ />
• HTML allows animated GIFs:
• Image as a Link
doctypes
• 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 instrucwhat version of HTML the page is
written intion to the web browser about .
• 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.
FORM, HTML Validation &
javascript
FORM
• The HTML <form> element defines a form that is used to collect user input
• Form elements are different types of input elements, like text fields, checkboxes, radio
buttons, submit buttons, and more.
• The Action Attribute
• <form action="/[Link]">
• The Target Attribute
• attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current
window.
• <form action="/[Link]" target="_blank">
• The Method Attribute
• <form action="/action_page.php" method="get"> // (or post)
• The Name Attribute
• <input type="text" name=“testName" value=“Test Value">
• Grouping Form Data with <fieldset>
• <fieldset> <legend>Title:</legend><input type="text" name=“testName" value=“Name
Value"> </fieldset>
FORM ELEMENTS
• If the type attribute is omitted, the input field gets the default type:
"text".
• <input type="text">
• <input type="radio">
• <input type="submit">
FORM ELEMENTS
• SELECT:
• <select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
• <option value="flat" selected>Flat</option>
• Visible Values:
• <select name="cars" size="3">
• Allow Multiple Selections:
• <select name="cars" size="4" multiple>
FORM ELEMENTS
• TextArea
• <textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
• Size of the text area
• <textarea name="message" style="width:200px; height:600px;">
• Button
• <button type="button" onclick="alert('Hello World!')">Click Me!</button>
• Datalist
• <form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
INPUT TYPES
• <input type="button"> • <input type="hidden"> • <input type="range">
• <input • <input type="image"> • <input type="reset">
type="checkbox"> • <input type="month"> • <input type="search">
• <input type="color"> • <input • <input type="submit">
• <input type="date"> type="number"> • <input type="tel">
• <input • <input • <input type="text">
type="datetime- type="password">
local"> • <input type="time">
• <input type="radio">
• <input type="email"> • <input type="url">
• <input type="file"> • <input type="week">
INPUT TYPES ATTRIBUTES
• checked Specifies that an input field should be pre-selected when the page loads (for
type="checkbox" or type="radio")
• disabled Specifies that an input field should be disabled
• max Specifies the maximum value for an input field
• maxlength Specifies the maximum number of character for an input field
• min Specifies the minimum value for an input field
• pattern Specifies a regular expression to check the input value against
• readonly Specifies that an input field is read only (cannot be changed)
• required Specifies that an input field is required (must be filled out)
• size Specifies the width (in characters) of an input field
• step Specifies the legal number intervals for an input field
• value Specifies the default value for an input field
FORM VALIDATION
• has the user filled in all required fields?
• has the user entered a valid date?
• has the user entered text in a numeric field?
• Multiple Ways, Most generic way
• JS Validation
• Automatic HTML Validation
• Eg:
• function validateForm() {
var x = [Link]["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
• <form onsubmit="return validateForm()" />
• [Link]("id1").validity
HTML5
HTML (4 V/s 5)
• The DOCTYPE declaration for HTML5 is very simple
• <!DOCTYPE html>
• The default character encoding in HTML5 is UTF-8.
• New HTML5 Elements
• New semantic elements
• New attributes of form elements like number, date, time, calendar, and range
• New graphic elements
• New multimedia elements
• New HTML5 APIs
• HTML Geolocation
• HTML Drag and Drop
• HTML Local Storage (HTML Local storage is a powerful replacement for cookies)
• HTML Application Cache
• HTML Web Workers
• HTML SSE
HTML5 Browser Support
• HTML5 is supported in all modern browsers.
• In addition, all browsers, old and new, automatically handle
unrecognized elements as inline elements.
• Because of this, you can "teach" older browsers to handle "unknown"
HTML elements.
• Define Semantic Elements as Block Elements
• HTML5 defines eight new semantic elements. All these are block-level elements.
• To secure correct behavior in older browsers, you can set the
CSS display property for these HTML elements to block
• header, section, footer, aside, nav, main, article, figure {
display: block;
}
HTML5 Browser Support
• Add New Elements to HTML
• The JavaScript statement [Link](“newElement") is needed to create a new element in IE 9, and earlier.
• <!DOCTYPE html>
<html>
<head>
<script>[Link]("myHero")</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>A Heading</h1>
<myHero>My Hero Element</myHero>
</body>
</html>
HTML5 Browser Support
• Problem With Internet Explorer 8
• You could use the solution described above for all new HTML5 elements.
• However, IE8 (and earlier) does not allow styling of unknown elements!
• You will require the HTML5Shiv to provide compatibility for IE Browsers older
than IE 9.
• <head>
<!--[if lt IE 9]>
<script src="/js/[Link]"></script>
<![endif]-->
</head>
Tag Description
<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
New Semantic
<mark> Defines marked/highlighted text /Structural
<meter> Defines a scalar measurement within a known range (a gauge) Elements
<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
Type Example
Empty <input type="text" value="John" disabled>
Unquoted <input type="text" value=John>
Double- <input type="text" value="John Doe"> HTML5 - New
quoted
Single- <input type="text" value='John Doe'>
Attribute
quoted Syntax
New Input Types New Input Attributes
•color •autocomplete
•date •autofocus
•datetime •form
•datetime-local •formaction
•email •formenctype
•month •formmethod
NEW INPUT
•number •formnovalidate
•range •formtarget
•search •height and width
•tel
•time
•url
•list
•min and max
•multiple
TYPES
•week •pattern (regexp)
•placeholder
•required
•step
Tag Description
<audio> Defines sound content
<embed> Defines a container for an external (non-HTML) application
<source> Defines multiple media resources for media elements
(<video> and <audio>)
New Media Elements <track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines video or movie
Tag Description
<canvas> Draw graphics, on the fly, via scripting (usually JavaScript)
<svg> Draw scalable vector graphics HTML5 GRAPHICS
New Semantic Elements in HTML5
• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>
EXAMPLE
Typical HTML4 Typical HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div class="article"> <article>
<div id="footer"> <footer>
HTML5 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.
• Example:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#000000;">
</canvas>
HTML5 Canvas
var c =
var c = [Link]("myCanvas");
[Link]("myCanvas");
var ctx = [Link]("2d");
var ctx = [Link]("2d");
[Link]();
[Link](0, 0);
[Link](95, 50, 40, 0, 2 * [Link]);
[Link](200, 100);
[Link]();
[Link]();
var c = [Link]("myCanvas");var c = [Link]("myCanvas");
var ctx = [Link]("2d"); var ctx = [Link]("2d");
[Link] = "30px Arial"; [Link] = "30px Arial";
[Link]("Hello World", 10, 50); [Link]("Hello World", 10, 50);
HTML5 Canvas
var c = var c = [Link]("myCanvas")
[Link]("myCanvas"); var ctx = [Link]("2d");
var ctx = [Link]("2d"); var img = [Link]("scream")
[Link](img, 10, 10);
// Create gradient
var grd =
[Link](75, 50, 5, 90, 60
, 100);
[Link](0, "red");
[Link](1, "white");
// Fill with gradient
[Link] = grd;
[Link](10, 10, 150, 80);
HTML SVG
• 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 is a container for SVG graphics.
• SVG has several methods for drawing paths, boxes, circles, text, and
graphic images
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
STAR
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke- CIRCL
width="4" fill="yellow" />
</svg> E
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-RECTAN
width:10;stroke:rgb(0,0,0)" />
</svg> GLE
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" ROUNDED
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg> RECTANGLE
MULTIMEDIA
• What is Multimedia? • Video Formats • Audio Formats
• Multimedia comes in many • MPEG (.mpg, .mpeg) • MIDI (.mid, .midi)
different formats. It can be • AVI (.avi) • RealAudio (.rm, .ram)
almost anything you can hear • WMV (.wmv)
or see. • WMA (.wma)
• QuickTime (.mov) • AAC (.aac)
• Examples: Images, music, • RealVideo (.rm, .ram)
sound, videos, records, films, • WAV (.wav)
• Flash (.swf, .flv) • Ogg (.ogg)
animations, and more.
• Ogg (.ogg) • MP3 (.mp3)
• Web pages often contain
• WebM (.webm) • MP4 (.mp4)
multimedia elements of
different types and formats. • MPEG-4 or MP4 (.mp4)
• In this chapter you will learn
about the different
multimedia formats.
<video> tag
<video width="320" height="240" controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
Your browser does not support the video tag.
</video>
[Link] – Boolean whether it is paused
[Link](); - Starts playing
[Link](); - Paused Video
<AUDIO>
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
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.
<object width="100%" height="500px" data="[Link]"></
object>
<object data="[Link]"></object>
The <embed> Element
• The <embed> element is supported in all major browsers.
• The <embed> element also defines an embedded object within an HTML
document.
• Web browsers have supported the <embed> element for a long time. However, it
has not been a part of the HTML specification before HTML5.
• Note that the <embed> element does not have a closing tag. It can not contain
alternative text.
<embed width="100%" height="500px" src="[Link]
">
<embed src="[Link]">
The <iframe> element
• An iframe is used to display a web page within a web page.
<iframe src="[Link] height="200" width="300" ></iframe>
<iframe src="[Link] style="border:none;height:200px;width:300px;"></iframe>
<iframe src="#" name="iframeName" ></iframe>
<p><a href="[Link] target="iframeName">[Link]</a></p>
EMBED YOUTube videos
• [Link]
• Params
• autoplay=0/1
• controls=0/1
• playlist=PqUdRLDFfew
• loop=0/1
GEO LOCATION (navigator)
• [Link] – Boolean to check whether the browser support
• [Link](positionCallback,
errorCallback);
• positionCallback(position)
• [Link]
• [Link]
• errorCallback(error)
• [Link]
• error.PERMISSION_DENIED
• error.POSITION_UNAVAILABLE
• [Link]
• error.UNKNOWN_ERROR
Position properties
Property Returns
[Link] The latitude as a decimal number (always returned)
[Link] The longitude as a decimal number (always returned)
[Link] The accuracy of position (always returned)
[Link] The altitude in meters above the mean sea level (returned if available)
[Link] The altitude accuracy of position (returned if available)
[Link] The heading as degrees clockwise from North (returned if available)
[Link] The speed in meters per second (returned if available)
timestamp The date/time of the response (returned if available)
Geolocation Object
• The Geolocation object also has other interesting methods:
• watchPosition() - Returns the current position of the user and continues to
return updated position as the user moves (like the GPS in a car).
• clearWatch() - Stops the watchPosition() method.
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.
Web storage
• localStorage
• 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.
• sessionStorage
• 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.
• Common Methods
• setItem(key, value);
• getItem(key);
• removeItem(key);