HTML

HYPER TEXT MARKUP LANGUAGE


HTML


HTML 5






HTML

Introduction

HTML is the standard markup language for creating Web pages.

  • HTML stands for Hyper Text Markup Language
  • HTML describes the structure of Web pages using markup
  • HTML elements are the building blocks of HTML pages
  • 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
⟰⬆↑⇧↿↾↑↟⇈

Editors

  • Notepad
  • Notepad++
  • Sublime Text
  • Text Edit ( Mac )
  • Netbeans
  • Adobe Dreamweaver
  • Eclipse
  • Atom
⟰⬆↑⇧↿↾↑↟⇈
Basic

<!DOCTYPE html>
<html>
<body>
...........................................
</body>

</html>

<h1>  to  <h6>
Defines HTML headings

<p></p>
Defines a paragraph
Id, name
<a></a>
Defines a hyperlink
Href, name
<img></img>
Defines an image
Src, alt, width, height
<button></button>
Defines a clickable button
Value, name, type , action

⟰⬆↑⇧↿↾↑↟⇈

Elements
  • <tagname>Content goes here...</tagname>
  • Do Not Forget End Tag
  • <br > , </hr> is the empty HTML Elements
  • Always use Lowercase tag
⟰⬆↑⇧↿↾↑↟⇈


Attributes


  • 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"

Href : <a href=””>Hyperlink</a>
Src:     <img  src="img.jpg">
Width & Height:  <img  src="img.jpg" width=” 400px” height=”500px”>
Alt:   <img  src=””  alt=”” >
Style:   <p style=”color:blue” >Blue</p>
Lang:    <html   lang=”en-US”>
Title:   <p title=”This is title”>Title</p>

Attribute
Description
alt
Specifies an alternative text for an image, when the image cannot be displayed
disabled
Specifies that an input element should be disabled
href
Specifies the URL (web address) for a link
id
Specifies a unique id for an element
src
Specifies the URL (web address) for an image
style
Specifies an inline CSS style for an element
title
Specifies extra information about an element (displayed as a tool tip)
Headings

Tag
Description
<html>
Defines the root of an HTML document
<body>
Defines the document's body
<head>
A container for all the head elements (title, scripts, styles, meta information, and more)
<h1> to <h6>
Defines HTML headings
<hr>
Defines a thematic change in the content
Paragraphs


<p></p>
Defines a paragraph
<br>
Inserts a single line break
<pre></pre>
Defines pre-formatted text


⟰⬆↑⇧↿↾↑↟⇈

Styles


  • Use the style attribute for styling HTML elements
  • Use background-color for background color
  • Use color for text colors
  • Use font-family for text fonts
  • Use font-size for text sizes
  • Use text-align for text alignment
⟰⬆↑⇧↿↾↑↟⇈

Formatting


Formatting elements were designed to display special types of text:

  • <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
⟰⬆↑⇧↿↾↑↟⇈

Quotations


<abbr>
Defines an abbreviation or acronym
<address>
Defines contact information for the author/owner of a document
<bdo>
Defines the text direction
<blockquote>
Defines a section that is quoted from another source
<cite>
Defines the title of a work
<q>
Defines a short inline quotation


⟰⬆↑⇧↿↾↑↟⇈

Comments


You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

⟰⬆↑⇧↿↾↑↟⇈

Colors


  • Color Names: red, blue, green, yellow, orange
  • Background Color: <tagname style=”background-color:color_name;”></tagname>
  • Text Color: <tagname style=” color:color_name;”></tagname>
  • Border Color: <tagname style=” border: ?px solid/?  color_name;”></tagname>
  • Color Values:
    • RGB Value: rgb(red, green, blue)  
    • HEX Value: #rrggbb
    • HSL Value: hsl(huesaturationlightness)
    • RGBA Value: rgba(red, greenblue, alpha)
    • HSLA Value: hsla(hue, saturationlightness, alpha)

⟰⬆↑⇧↿↾↑↟⇈


CSS


Styling HTML with CSS
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:

·         Inline - by using the style attribute in HTML elements
Eg:   <h1 style="color:blue;">This is a Blue Heading</h1>
·         Internal - by using a <style> element in the <head> section
<head>
<style>
body 
{background-color: powderblue;}
h1   
{color: blue;}
p    
{color: red;}
</style>
</head> 
·         External - by using an external CSS file
<head>
  
<link rel="stylesheet" href="styles.css">
</head>


⟰⬆↑⇧↿↾↑↟⇈

Links


  • Use the <a> element to define a link
<a href="url">link text</a>
  • Use the href attribute to define the link address
<a href="html_images.html">HTML Images</a>
  • Use the target attribute to define where to open the linked document
                <a href="url" target="_blank">link text</a>
                <a href="url" target="_top">link text</a>
  • Use the <img> element (inside <a>) to use an image as a link
<a href="default.asp"><img src="smiley.png" alt="HTML tutorial" style="width:42px; height:42px;  border:0;"></a>
  • Use the id attribute (id="value") to define bookmarks in a page
<h2 id="C4">Chapter 4</h2>
  • Use the href attribute (href="#value") to link to the bookmark

<a href="#C4">Jump to Chapter 4</a>

⟰⬆↑⇧↿↾↑↟⇈

Images


  • Use the HTML <img> element to define an image
  • Use the HTML src attribute to define the URL of the image
  • Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
  • Use the HTML width and height attributes to define the size of the image
  • Use the CSS width and height properties to define the size of the image (alternatively)
  • Use the CSS float property to let the image float
  • Use the HTML <map> element to define an image-map
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
  • Use the HTML <area> element to define the clickable areas in the image-map
  • Use the HTML <img>'s element usemap attribute to point to an image-map
  • Use the HTML <picture> element to show different images for different devices
<picture>
  
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>


⟰⬆↑⇧↿↾↑↟⇈

Tables


<table>
Defines a table
<th>
Defines a header cell in a table
<tr>
Defines a row in a table
<td>
Defines a cell in a table
<caption>
Defines a table caption
<colgroup>
Specifies a group of one or more columns in a table for formatting
<col>
Specifies column properties for each column within a <colgroup> element
<thead>
Groups the header content in a table
<tbody>
Groups the body content in a table
<tfoot>
Groups the footer content in a table


  • Use the CSS border property to define a border
  • Use the CSS border-collapse property to collapse cell borders
  • Use the CSS padding property to add padding to cells
  • Use the CSS text-align property to align cell text
  • Use the CSS border-spacing property to set the spacing between cells
Lists


<ul>
Defines an unordered list
<ol>
Defines an ordered list
<li>
Defines a list item
<dl>
Defines a description list
<dt>
Defines a term in a description list
<dd>
Describes the term in a description list
  • Use the CSS list-style-type property to define the list item marker
  • Use the CSS property float:left or display:inline to display a list horizontally
Unordered List Item:
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


Ordered Types:

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


⟰⬆↑⇧↿↾↑↟⇈

Blocks


Block level elements in HTML:

·         <address>
·         <article>
·         <aside>
·         <blockquote>
·         <canvas>
·         <dd>
·         <div>
·         <dl>
·         <dt>
·         <fieldset>
·         <figcaption>
·         <figure>
·         <footer>
·         <form>
·         <h1>-<h6>
·         <header>
·         <hr>
·         <li>
·         <main>
·         <nav>
·         <noscript>
·         <ol>
·         <output>
·         <p>
·         <pre>
·         <section>
·         <table>
·         <tfoot>
·         <ul>
·         <video>

Inline elements in HTML:

  • ·         <a>
  • ·         <abbr>
  • ·         <acronym>
  • ·         <b>
  • ·         <bdo>
  • ·         <big>
  • ·         <br>
  • ·         <button>
  • ·         <cite>
  • ·         <code>
  • ·         <dfn>
  • ·         <em>
  • ·         <i>
  • ·         <img>
  • ·         <input>
  • ·         <kbd>
  • ·         <label>
  • ·         <map>
  • ·         <object>
  • ·         <q>
  • ·         <samp>
  • ·         <script>
  • ·         <select>
  • ·         <small>
  • ·         <span>
  • ·         <strong>
  • ·         <sub>
  • ·         <sup>
  • ·         <textarea>
  • ·         <time>
  • ·         <tt>
  •        <var>

<div>
Defines a section in a document (block-level)
<span>
Defines a section in a document (inline)


⟰⬆↑⇧↿↾↑↟⇈

Classes

<!DOCTYPE html>
<html>
<head>
<style>
.cities 
{
    background-color
: black;
    color
: white;
    margin
: 20px;
    padding
: 20px;
}
</style>
</head>
<body>

<div class="cities">
  
<h2>London</h2>
  
<p>London is the capital of England.</p>
</div>

<div class="cities">
  
<h2>Paris</h2>
  
<p>Paris is the capital of France.</p>
</div>

<div class="cities">
  
<h2>Tokyo</h2>
  
<p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>



When a user clicks on a button, hide all elements with the class name "city":

<script>
function myFunction() {
  
var x = document.getElementsByClassName("city");
  
for (var i = 0; i < x.length; i++) {
    x[i].style.display = 
"none";
  }
}
</script>

⟰⬆↑⇧↿↾↑↟⇈

Id


Use CSS to style an element with the id "myHeader":
<style>
#myHeader 
{
    background-color
: lightblue;
    color
: black;
    padding
: 40px;
    text-align
: center;
}
</style>

<h1 id="myHeader">My Header</h1>
Use the id attribute to manipulate text with JavaScript:
<script>
function displayResult() {
    document.getElementById(
"myHeader").innerHTML = "Have a nice day!";
}
</script>


⟰⬆↑⇧↿↾↑↟⇈

Iframes


<iframe src="URL" name=”” width=”” height=”” style=”border:?px solid/? Color;”></iframe>

⟰⬆↑⇧↿↾↑↟⇈

Javascript


<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
document.getElementById("image").src = "picture.gif";
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>


⟰⬆↑⇧↿↾↑↟⇈

File paths



Path
Description
<img src="picture.jpg">
picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg">
picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg">
picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg">
picture.jpg is located in the folder one level up from the current folder

⟰⬆↑⇧↿↾↑↟⇈
Head


Tag
Description
<head>
Defines information about the document
<title>
Defines the title of a document
<base>
Defines a default address or a default target for all links on a page
<link>
Defines the relationship between a document and an external resource
<meta>
Defines metadata about an HTML document
<script>
Defines a client-side script
<style>
Defines style information for a document


<base href="https://www.w3schools.com/images/" target="_blank">
<link rel="stylesheet" href="mystyle.css">
<meta charset="UTF-8">             : Defines character of set.
<meta name="description" content="Free Web tutorials">: Define a description of  web page
<meta name="keywords" content="HTML, CSS, XML, JavaScript">: Define keywords for search  engines.
<meta name="author" content="John Doe">: Define the author of a page:
<meta http-equiv="refresh" content="30">       :  Refresh document every 30 seconds.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> : Manage Sapacing

Layout


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

⟰⬆↑⇧↿↾↑↟⇈

Responsive


Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones). We can make webpage responsive as:

Setting The Viewport
Responsive Images
Responsive Text Size
Media Queries
W3.CSS
Bootstrap


Computer  Code


<code>
x = 5;
<br>
y = 6;
<br>
z = x + y;
</code>
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
<p>If you input wrong value, the program will return <samp>Error!</samp></p>
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.


Tag
Description
<code>
Defines programming code
<kbd>
Defines keyboard input 
<samp>
Defines computer output
<var>
Defines a variable
<pre>
Defines preformatted text

⟰⬆↑⇧↿↾↑↟⇈

Entities



Useful HTML Character Entities:
Result
Description
Entity Name
Entity Number
non-breaking space
&nbsp;
&#160;
< 
less than
&lt;
&#60;
> 
greater than
&gt;
&#62;
&
ampersand
&amp;
&#38;
"
double quotation mark
&quot;
&#34;
'
single quotation mark (apostrophe)
&apos;
&#39;
¢
cent
&cent;
&#162;
£
pound
&pound;
&#163;
¥
yen
&yen;
&#165;
euro
&euro;
&#8364;
©
copyright
&copy;
&#169;
®
registered trademark
&reg;
&#174;


Combining Diacritical Marks:

Mark
Character
Construct
Result
 ̀
a
a&#768;
 ́
a
a&#769;
̂
a
a&#770;
 ̃
a
a&#771;
 ̀
O
O&#768;
 ́
O
O&#769;
̂
O
O&#770;
 ̃
O
O&#771;

⟰⬆↑⇧↿↾↑↟⇈

Symbols


Mathematical Symbols Supported by HTML:

Char
Number
Entity
Description
&#8704;
&forall;
FOR ALL
&#8706;
&part;
PARTIAL DIFFERENTIAL
&#8707;
&exist;
THERE EXISTS
&#8709;
&empty;
EMPTY SETS
&#8711;
&nabla;
NABLA
&#8712;
&isin;
ELEMENT OF
&#8713;
&notin;
NOT AN ELEMENT OF
&#8715;
&ni;
CONTAINS AS MEMBER
&#8719;
&prod;
N-ARY PRODUCT
&#8721;
&sum;
N-ARY SUMMATION


Greek Letters Supported by HTML:
Char
Number
Entity
Description
Α
&#913;
&Alpha;
GREEK CAPITAL LETTER ALPHA
Î’
&#914;
&Beta;
GREEK CAPITAL LETTER BETA
Γ
&#915;
&Gamma;
GREEK CAPITAL LETTER GAMMA
Δ
&#916;
&Delta;
GREEK CAPITAL LETTER DELTA
Ε
&#917;
&Epsilon;
GREEK CAPITAL LETTER EPSILON
Ζ
&#918;
&Zeta;
GREEK CAPITAL LETTER ZETA

Other Entities Supported by HTML:


Char
Number
Entity
Description
©
&#169;
&copy;
COPYRIGHT SIGN
®
&#174;
&reg;
REGISTERED SIGN
&#8364;
&euro;
EURO SIGN
&#8482;
&trade;
TRADEMARK
&#8592;
&larr;
LEFTWARDS ARROW
&#8593;
&uarr;
UPWARDS ARROW
&#8594;
&rarr;
RIGHTWARDS ARROW
&#8595;
&darr;
DOWNWARDS ARROW
&#9824;
&spades;
BLACK SPADE SUIT
&#9827;
&clubs;
BLACK CLUB SUIT
&#9829;
&hearts;
BLACK HEART SUIT
&#9830;
&diams;
BLACK DIAMOND SUIT

⟰⬆↑⇧↿↾↑↟⇈

Charset


The ASCII Character Set
·         ASCII uses the values from 0 to 31 (and 127) for control characters.
·         ASCII uses the values from 32 to 126 for letters, digits, and symbols.
·         ASCII does not use the values from 128 to 255.

The ANSI Character Set (Windows-1252)
·         ANSI is identical to ASCII for the values from 0 to 127.
·         ANSI has a proprietary set of characters for the values from 128 to 159.
·         ANSI is identical to UTF-8 for the values from 160 to 255.
                                       
The ISO-8859-1 Character Set
·         8859-1 is identical to ASCII for the values from 0 to 127.
·         8859-1 does not use the values from 128 to 159.
·         8859-1 is identical to UTF-8 for the values from 160 to 255.

The UTF-8 Character Set
·         UTF-8 is identical to ASCII for the values from 0 to 127.
·         UTF-8 does not use the values from 128 to 159. 
·         UTF-8 is identical to both ANSI and 8859-1 for the values from 160 to 255.
UTF-8 continues from the value 256 with more than 10 000 different characters.

⟰⬆↑⇧↿↾↑↟⇈

Url encode


URL - Uniform Resource Locator

  • 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 w3schools.com)
  • 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

Scheme
Short for
Used for
http
HyperText Transfer Protocol
Common web pages. Not encrypted
https
Secure HyperText Transfer Protocol
Secure web pages. Encrypted
ftp
File Transfer Protocol
Downloading or uploading files
file

A file on your computer

⟰⬆↑⇧↿↾↑↟⇈

XHTML


What Is XHTML?
  • XHTML stands for EXtensible HyperText Markup Language
  • XHTML is almost identical to HTML
  • XHTML is stricter than HTML
  • XHTML is HTML defined as an XML application
  • XHTML is supported by all major browsers

The Most Important Differences from HTML:

Document Structure

  • XHTML DOCTYPE is mandatory
  • The xmlns attribute in <html> is mandatory
  • <html>, <head>, <title>, and <body> are mandatory

XHTML Elements

  • XHTML elements must be properly nested
<b><i>This text is bold and italic</i></b>
  • XHTML elements must always be closed
<p>This is a paragraph</p>
<img src="happy.gif" alt="Happy face" />
<br />, <hr />
  • XHTML elements must be in lowercase
<body>
<p>This is a paragraph</p>
</body>

  • XHTML documents must have one root element

XHTML Attributes

  • Attribute names must be in lower case
<table width="100%">
  • Attribute values must be quoted
<table width="100%">
  • Attribute minimization is forbidden
<input type="checkbox" name="vehicle" value="car" checked="checked" />
<input type="text" name="lastname" disabled="disabled" />
How to Convert from HTML to XHTML

  1. Add an XHTML <!DOCTYPE> to the first line of every page
  2. Add an xmlns attribute to the html element of every page
  3. Change all element names to lowercase
  4. Close all empty elements
  5. Change all attribute names to lowercase
  6. Quote all attribute values
⟰⬆↑⇧↿↾↑↟⇈

Forms

<form> attributes:


Attribute
Description
accept-charset
Specifies the charset used in the submitted form (default: the page charset).
action
Specifies an address (url) where to submit the form (default: the submitting page).
autocomplete
Specifies if the browser should autocomplete the form (default: on).
enctype
Specifies the encoding of the submitted data (default: is url-encoded).
method
Specifies the HTTP method used when submitting the form (default: GET).
name
Specifies a name used to identify the form (for DOM usage: document.forms.name).
novalidate
Specifies that the browser should not validate the form.
target
Specifies the target of the address in the action attribute (default: _self).

⟰⬆↑⇧↿↾↑↟⇈

Form Elements


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

⟰⬆↑⇧↿↾↑↟⇈

Input types


HTML5 added several new input types:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
<input> Element

Type
Description
<input type="text">
Defines a one-line text input field
<input type="radio">
Defines a radio button (for selecting one of many choices)
<input type="submit">
Defines a submit button (for submitting the form)


⟰⬆↑⇧↿↾↑↟⇈

Input attributes

HTML Input Attributes:
  • ·         value
  • ·         readonly
  • ·         disabled
  • ·         size
  • ·         maxlength

  

HTML5 added the following attributes for <input>:
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step
and the following attributes for <form>:
  • autocomplete
  • novalidate

⟰⬆↑⇧↿↾↑↟⇈

HTML 5
Intro


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
Content of the document......
</body>

</html>

  • 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>.

The most interesting new API's in HTML5 are:
  • HTML Geolocation
  • HTML Drag and Drop
  • HTML Local Storage
  • HTML Application Cache
  • HTML Web Workers
  • HTML SSE

⟰⬆↑⇧↿↾↑↟⇈

Support


  • ·         HTML5 is supported in all modern browsers.
  • ·         HTML5 defines eight new semantic elements {header, section, footer, aside, nav, main, article, figure}
  • ·         You can also add new elements to an HTML page with a browser trick <myHero>My Hero Element</myHero>
  •          IE8 (and earlier) does not allow styling of unknown elements!
  • ·         HTML5Shiv is a javascript file that is referenced in a <script> tag.
  • ·         You should use the HTML5Shiv when you are using the new HTML5 elements such as: <article><section><aside><nav><footer>.
    • · <head>
    • <meta charset="UTF-8">
    • <!--[if lt IE 9]>
    •   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    • <![endif]-->
    • </head>


⟰⬆↑⇧↿↾↑↟⇈

New Elements


HTML5 offers new elements for better document structure:

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
<mark>
Defines marked/highlighted text
<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

⟰⬆↑⇧↿↾↑↟⇈

Semantics


HTML5 offers new semantic elements to define different parts of a web page:  

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

⟰⬆↑⇧↿↾↑↟⇈

Migration


Typical HTML4
Typical HTML5
<div id="header">
<header>
<div id="menu">
<nav>
<div id="content">
<section>
<div class="article">
<article>
<div id="footer">
<footer>

⟰⬆↑⇧↿↾↑↟⇈

Style Guide


Use Correct Document Type
<!doctype html>
Use Lower Case Element Names
  • Mixing uppercase and lowercase names is bad
  • Developers normally use lowercase names (as in XHTML)
  • Lowercase look cleaner
  • Lowercase are easier to write
Close All HTML Elements
<meta charset="utf-8" />
Use Lower Case Attribute Names
  • Mixing uppercase and lowercase names is bad
  • Developers normally use lowercase names (as in XHTML)
  • Lowercase look cleaner
  • Lowercase are easier to write
Quote Attribute Values
  • Mixing uppercase and lowercase values is bad
  • Quoted values are easier to read
  • You MUST use quotes if the value contains spaces
Image Attributes
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Spaces and Equal Signs
<link rel="stylesheet" href="styles.css">
Avoid Long Code Lines
When using an HTML editor, it is inconvenient to scroll right and left to read the HTML code.
Try to avoid code lines longer than 80 characters.
Blank Lines and Indentation
Do not add blank lines without a reason.
For readability, add blank lines to separate large or logical code blocks.
For readability, add two spaces of indentation. Do not use the tab key.
Do not use unnecessary blank lines and indentation. It is not necessary to indent every element:
Omitting <html> and <body>?
In HTML5, the <html> tag and the <body> tag can be omitted.
Meta Data
<meta charset="UTF-8">
Setting The Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">

 HTML Comments
<!-- This is a comment -->
<!-- 
  This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example.
-->
Style Sheets
<link rel="stylesheet" href="styles.css">
p.intro {font-family: Verdana; font-size: 16em;}
Loading JavaScript in HTML
<script src="myscript.js">
Accessing HTML Elements with JavaScript
var obj = getElementById("Demo")
var obj = getElementById("demo")
Use Lower Case File Names

london.jpg, lowercase.ext


⟰⬆↑⇧↿↾↑↟⇈

Canvas


What is 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.
Empty canvas:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
Draw a Line
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(
00);
ctx.lineTo(
200100);
ctx.stroke();

Draw a Circle

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(
95504002 * Math.PI);
ctx.stroke();

Draw a Text

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = 
"30px Arial";
ctx.fillText(
"Hello World"1050);

Stroke Text

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = 
"30px Arial";
ctx.strokeText(
"Hello World"1050);

Draw Linear Gradient

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(002000);
grd.addColorStop(
0"red");
grd.addColorStop(
1"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(
101015080);

Draw Circular Gradient

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(755059060100);
grd.addColorStop(
0"red");
grd.addColorStop(
1"white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(
101015080);

Draw Image


var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 
1010);

⟰⬆↑⇧↿↾↑↟⇈

SVG


What is SVG?
  • SVG stands for Scalable Vector Graphics
  • SVG is used to define graphics for the Web
  • SVG is a W3C recommendation
SVG Circle
 <svg width="100" height="100">
  
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
SVG Rectangle
<svg width="400" height="100">
  
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
SVG Rounded Rectangle
<svg width="400" height="180">
  
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style
="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
SVG Star
<svg width="300" height="200">
  
<polygon points="100,10 40,198 190,78 10,78 160,198"
  style
="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
SVG Logo

<svg height="130" width="500">
  
<defs>
    
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    
</linearGradient>
  
</defs>
  
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
 
</svg>

Canvas
SVG
·         Resolution dependent
·         No support for event handlers
·         Poor text rendering capabilities
·         You can save the resulting image as .png or .jpg
·         Well suited for graphic-intensive games
·         Resolution independent
·         Support for event handlers
·         Best suited for applications with large rendering areas (Google Maps)
·         Slow rendering if complex (anything that uses the DOM a lot will be slow)
·         Not suited for game applications

⟰⬆↑⇧↿↾↑↟⇈

Google Maps


<!DOCTYPE html>
<html>
<body>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

<h1>My First Google Map</h1>

<div id="map" style="width:400px;height:400px">
My map will go here</div>
function myMap() {
   
 var mapOptions = {
        center: 
new google.maps.LatLng(51.5, -0.12),
        zoom: 
10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</body>
<html>


⟰⬆↑⇧↿↾↑↟⇈

Media


What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or see.
Examples: Images, music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
In this chapter you will learn about the different multimedia formats.
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.

⟰⬆↑⇧↿↾↑↟⇈

Video


To show a video in HTML, use the <video> element:

<video width="320" height="240" controls or autoplay>
  
<source src="movie.mp4" type="video/mp4">
  
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>


⟰⬆↑⇧↿↾↑↟⇈

Audio


To play an audio file in HTML, use the <audio> element:

<audio controls>
  
<source src="horse.ogg" type="audio/ogg">
  
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

⟰⬆↑⇧↿↾↑↟⇈

Plugins

Plugins 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
<object width="400" height="50" data="bookmark.swf"></object>
<object width="100%" height="500px" data="snippet.html"></object>
<object data="audi.jpeg"></object>
The <embed> Element
<embed width="400" height="50" src="bookmark.swf">
<embed width="100%" height="500px" src="snippet.html">

<embed src="audi.jpeg">

⟰⬆↑⇧↿↾↑↟⇈

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)
<iframe width="420" height="315"
src
="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
YouTube Autoplay
<iframe width="420" height="315"
src
="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
YouTube Loop
<iframe width="420" height="315"
src
="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
</iframe>
YouTube Controls

<iframe width="420" height="315"
src
="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>

⟰⬆↑⇧↿↾↑↟⇈

Geolocation


<script>
var x = document.getElementById("demo");
function getLocation() {
    
if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } 
else {
        x.innerHTML = 
"Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = 
"Latitude: " + position.coords.latitude +
    
"<br>Longitude: " + position.coords.longitude;
}
</script>

Handling Errors and Rejections
function showError(error) {
    
switch(error.code) {
        
case error.PERMISSION_DENIED:
            x.innerHTML = 
"User denied the request for Geolocation."
            
break;
        
case error.POSITION_UNAVAILABLE:
            x.innerHTML = 
"Location information is unavailable."
            
break;
        
case error.TIMEOUT:
            x.innerHTML = 
"The request to get user location timed out."
            
break;
        
case error.UNKNOWN_ERROR:
            x.innerHTML = 
"An unknown error occurred."
            
break;
    }
}
Displaying the Result in a Map
function showPosition(position) {
    
var latlon = position.coords.latitude + "," + position.coords.longitude;

    
var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
    "
+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_:KEY";

   
 document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
getCurrentPosition() Method - Return Data
Property
Returns
coords.latitude
The latitude as a decimal number (always returned)
coords.longitude
The longitude as a decimal number (always returned)
coords.accuracy
The accuracy of position (always returned)
coords.altitude
The altitude in meters above the mean sea level (returned if available)
coords.altitudeAccuracy
The altitude accuracy of position (returned if available)
coords.heading
The heading as degrees clockwise from North (returned if available)
coords.speed
The speed in meters per second (returned if available)
timestamp
The date/time of the response (returned if available)


Geolocation Object
<script>
var x = document.getElementById("demo");
function getLocation() {
    
if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } 
else {
        x.innerHTML = 
"Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = 
"Latitude: " + position.coords.latitude +
    
"<br>Longitude: " + position.coords.longitude;
}
</script>

⟰⬆↑⇧↿↾↑↟⇈

Drag/Drop


<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
   
 ev.preventDefault();
}

function drag(ev) {
   
 ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
   
 ev.preventDefault();
   
 var data = ev.dataTransfer.getData("text");
   
 ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart
="drag(event)" width="336" height="69">

</body>
</html>

⟰⬆↑⇧↿↾↑↟⇈

Web Storage


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:
  • window.localStorage - stores data with no expiration date
  • window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)
if (typeof(Storage) !== "undefined") {
    
// Code for localStorage/sessionStorage.
} else {
    
// Sorry! No Web Storage support..
}

The localStorage Object
// Store
localStorage.setItem("lastname""Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 
1;
else {
    localStorage.clickcount = 
1;
}
document.getElementById(
"result").innerHTML = "You have clicked the button " +
localStorage.clickcount + 
" time(s).";
The sessionStorage Object
if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 
1;
else {
    sessionStorage.clickcount = 
1;
}
document.getElementById(
"result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + 
" time(s) in this session.";


⟰⬆↑⇧↿↾↑↟⇈

Web Workers


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.

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<script>
var w;

function startWorker() {
    
if(typeof(Worker) !== "undefined") {
        
if(typeof(w) == "undefined") {
            w = 
new Worker("demo_workers.js");
        }
        w.onmessage = 
function(event) {
            document.getElementById(
"result").innerHTML = event.data;
        };
   
 else {
        document.getElementById(
"result").innerHTML = "Sorry! No Web Worker support.";
   
 }
}

function stopWorker() {
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>

⟰⬆↑⇧↿↾↑↟⇈

SSE


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.
Receive Server-Sent Event Notifications
var source = new EventSource("demo_sse.php");
source.onmessage = 
function(event) {
    document.getElementById(
"result").innerHTML += event.data + "<br>";
};
Check Server-Sent Events Support
if(typeof(EventSource) !== "undefined") {
    
// Yes! Server-sent events support!
    // Some code.....
} else {
    
// Sorry! No server-sent events support..
}
Server-Side Code Example
IN PHP
<?php
header(
'Content-Type: text/event-stream');
header(
'Cache-Control: no-cache');

$time = date(
'r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
IN ASP
<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>
The EventSource Object

Events
Description                                                                                   
onopen
When a connection to the server is opened
onmessage
When a message is received
onerror
When an error occurs


⟰⬆↑⇧↿↾↑↟⇈

No comments