==========================================================================================

introduction

    The DOCTYPE declaration defines the document type to be HTML
    The text between <html> and </html> describes an HTML document

    The text between <head> and </head> provides information about the document
    The text between <title> and </title> provides a title for the document

    The text between <body> and </body> describes the visible page content
    The text between <h1> and </h1> describes a heading
    The text between <p> and </p> describes a paragraph

==========================================================================================

editor

Microsoft WebMatrix
Sublime Text

==========================================================================================

--basic

HTML links are defined with the <a> tag:

<a href="http://www.w3schools.com">This is a link</a>

The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), and size (width and height) are provided as attributes:

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

==========================================================================================

--elements

Start tag    Element content    End tag
    <h1>   My First Heading    </h1>
    <p>    My first paragraph.    </p>
    <br>

<br> is an empty element without a closing tag (the <br> tag defines a line break).

<b></b> bold type

==========================================================================================

-- attributes

    All HTML elements can have attributes
    Attributes provide additional information about an element
    Attributes are always specified in the start tag
    Attributes come in name/value pairs like: name="value"

    The HTML title attribute provides additional "tool-tip" information (pop up text upon cursor on it)
    The HTML href attribute provides address information for links
    The HTML width and height attributes provide size information for images
    The HTML alt attribute provides text for screen readers

    At W3Schools we always use lowercase HTML attribute names
    At W3Schools we always quote attributes with double quotes

   Attribute    Description
      --------------------------------------------------------------------
   alt        Specifies an alternative text for an image
   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

The < hr> tag creates a horizontal line in an HTML page.

The HTML < head> element has nothing to do with HTML headings.
The HTML < head> element contains meta data. Meta data are not displayed.
The HTML < head> element is placed between the <html> tag and the <body> tag:

The HTML < title> element is meta data. It defines the HTML document's title.
The title will not be displayed in the document, but might be displayed in the browser tab.

The HTML < meta> element is also meta data.
It can be used to define the character set, and other information about the HTML document.

More Meta Elements:
The HTML <style> element is used to define internal CSS style sheets.
The HTML <link> element is used to define external CSS style sheets.

   Tag        Description
   <html>        Defines an HTML document
   <body>        Defines the document's body
   <head>        Defines the document's head element
   <h1> to <h6>    Defines HTML headings
   <hr>        Defines a horizontal line

==========================================================================================

-- 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:

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

==========================================================================================

--style

Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:

   style="property:value;"       The property is a CSS property. The value is a CSS value.

    Use background-color for background color
    Use color for text colors
    Use font-family for text fonts
    Use font-size for text sizes       50% or 50px
    Use text-align for text alignment

==========================================================================================

--formatting

<b>        Defines bold text
<em>        Defines emphasized text
<i>        Defines italic text
<small>    Defines smaller text
<strong>    Defines important text
<sub>        Defines subscripted text
<sup>        Defines superscripted text
<ins>        Defines inserted text
<del>        Defines deleted text
<mark>        Defines marked/highlighted text

==========================================================================================

-- quotation

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

==========================================================================================

-- computer code

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

==========================================================================================

-- comments

==========================================================================================
-- css

    Inline - using a style attribute in HTML elements

       <h1 style="color:blue;">This is a Blue Heading</h1>

    Internal - using a <style> element in the HTML <head> section

   <head>
   <style>
       body {background-color:lightgrey;}
       h1   {color:blue;}
       p    {color:green;}
   </style>
   </head>

    External - using one or more external CSS files

   body {
           background-color: lightgrey;
   }
   h1 {
       color: blue;
             font-family: verdana;
       font-size: 300%;

   }
   p {
       color:green;
                font-family: courier;
            font-size: 160%;
                border: 2px solid cyan;
                padding: 10px;           <--! inside -->
                margin: 30px;           <--! outside -->
   }

    Use the HTML style attribute for inline styling
    Use the HTML <style> element to define internal CSS
    Use the HTML <link> element to refer to an external CSS file
    Use the HTML <head> element to store <style> and <link> elements
    Use the CSS color property for text colors
    Use the CSS font-family property for text fonts
    Use the CSS font-size property for text sizes
    Use the CSS border property for visible element borders
    Use the CSS padding property for space inside the border
    Use the CSS margin property for space outside the border

>> id attribute

   <style>
   p#p01 {
        color: blue;
   }
   </style>

   <p id="p01">I am different.</p>

>> class attribute

   <style>
   p.error {
        color: red;
   }
   </style>

   <p class="error">I am different.</p>
   <p class="error">I am different too.</p>

Use id to address a single element. Use class to address groups of elements.

==========================================================================================
-- links

In HTML, links are defined with the <a> tag:

   <a href="url">link text</a>

   <a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>

Local Links

    A local link (link to the same web site) is specified with a relative URL (without http://www....).

    <a href="html_images.asp">HTML Images</a>

    <style>
    a:link {color: green;background-color: transparent;text-decoration: none;}
    a:visited {color: blue;background-color: transparent;text-decoration: none;}
    a:hover {color: red;background-color: transparent;text-decoration: underline;}
    a:active {color: yellow;background-color: transparent;text-decoration: underline;}   ???
    </style>

    <a href="html_images.asp" target="_blank">HTML Images</a>

   Target Value    Description
   _blank        Opens the linked document in a new window or tab
   _self        Opens the linked document in the same frame 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

   <a href="w3___.html">
      <img src="smiley.gif" alt="smiley face" style="width:42px;height:42px;border:0">
   </a>

   <a href="#tips">Visit the Useful Tips Section</a>       if in the same file
   <a href="html_tips.html#tips">Visit the Useful Tips Section</a> if in the differnt file

   <h2 id="tips">Useful Tips Section</h2>               bookmark

    Use the HTML <a> element to define a link
    Use the HTML href attribute to define the link address
    Use the HTML target attribute to define where to open the linked document
    Use the HTML <img> element (inside <a>) to use an image as a link
    Use the HTML id attribute (id="value") to define bookmarks in a page
    Use the HTML href attribute (href="#value") to link to the bookmark

==========================================================================================
-- images

    <style>
    img {
        width:100%;
    }
    </style>

   <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> or
   <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">           <= affected by <style>
   <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
   <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

   <img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

   <img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

   <map name="planetmap">
      <area shape="rect"   coords="0,0,82,126" alt="Sun"     href="sun.htm">
      <area shape="circle" coords="90,58,3"    alt="Mercury" href="merglobe.gif">
      <area shape="circle" coords="124,58,8"   alt="Venus"   href="venus.htm">
   </map>

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

==========================================================================================
-- tables

<table            style="width:100%">
<table border="1" style="width:100%">

<style> table, th, td { border: 1px solid black; }                    </style>
<style> table, th, td { border: 1px solid black; border-collapse: collapse;} </style>

<style> table, th, td { border: 1px solid black; border-collapse: collapse;}
        th, td        { padding: 15px;}                       </style>

   th           { text-align: left;}

   table           { border-spacing: 15px;}

<th colspan="2">Telephone</th>
<th rowspan="2">Telephone:</th>

<caption>Monthly savings</caption>   cf) The <caption> tag must be inserted immediately after the <table> tag.

---------------------------------
table#t01 {
    width: 100%;
    background-color: #f1f1c1;       f1,f1,c1
}

<table id="t01">
   <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
   </tr>
   <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
   </tr>
</table>
---------------------------------
table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
   background-color:#fff;
}
table#t01 th   {
    background-color: black;
    color: white;
}

<table id="t01">
<tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
</tr>
<tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
</tr>
</table>
--------------------------------

    Use the HTML <table> element to define a table
    Use the HTML <tr> element to define a table row
    Use the HTML <td> element to define a table data
    Use the HTML <th> element to define a table heading
    Use the HTML <caption> element to define a table caption

    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
    Use the colspan attribute to make a cell span many columns
    Use the rowspan attribute to make a cell span many rows

    Use the id attribute to uniquely define one table

HTML Table Tags

Tag    Description

<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

==========================================================================================
-- lists

<ul style="list-style-type:disc">         -> or simply <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

>> Unordered HTML Lists - The Style Attribute

Style    Description

list-style-type:disc    The list items will be marked with bullets (default)
list-style-type:circle    The list items will be marked with circles
list-style-type:square    The list items will be marked with squares
list-style-type:none    The list items will not be marked
list-style-type:s    The list items will be marked with increasing number (bug ??)

>> Ordered HTML Lists - The Type Attribute

Type    Description

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

    Use the HTML <ul> element to define an unordered list
    Use the HTML <ol> element to define an ordered list
    Use the HTML <li> element to define a list item

    Use the HTML style attribute to define the bullet style
    Use the HTML type attribute to define the numbering type

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

    Use the HTML <dl> element to define a description list
      Use the HTML <dd> element to define the description data
      Use the HTML <dt> element to define the description term

    Lists can be nested inside lists
    List items can contain other HTML elements

    Use the CSS property display:inline to display a list horizontally

-------------------
   <style>
   ul#menu li {
        display:inline;
   }
   </style>

   <ul id="menu">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>PHP</li>
   </ul>
-------------------

>> HTML List Tags

Tag    Description

<ul>    Defines an unordered list
<ol>    Defines an ordered list
<li>    Defines a list item

<dl>    Defines a description list
<dt>    Defines the term in a description list
<dd>    Defines the description in a description list

==========================================================================================
-- blocks

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The <div> element is a block-level element.

Examples of block-level elements:

    <div>
    <h1> - <h6>
    <p>
    <form>

An inline element does not start on a new line and only takes up as much width as necessary.

Examples of inline elements:

    <span>
    <a>
    <img>

The <div> Element

The <div> element is a block-level element that is often used as a container for other HTML elements.
The <div> element has no required attributes, but style and class are common.
When used together with CSS, the <div> element can be used to style blocks of content:

<div style="background-color:black; color:white; padding:20px;">

    <h2>London</h2>
    <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>

</div>

The <span> Element

The <span> element is an inline element that is often used as a container for some text.
The <span> element has no required attributes, but style and class are common.
When used together with CSS, the <span> element can be used to style parts of the text:

   <h1>   My   <span style="color:red"> Important </span>      Heading   </h1>

HTML Grouping Tags
Tag    Description
<div>    Defines a section in a document (block-level)
<span>    Defines a section in a document (inline)

==========================================================================================
-- classes

The HTML class attribute makes it possible to define equal styles for "equal" <div> elements:

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

<body>
     <div class="cities">
         <h2>London</h2> <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>
     </div>

     <div class="cities">
        <h2>Paris</h2>    <p>Paris is the capital and most populous city of France.</p>
     </div>
</body>

The HTML class attribute also makes it possible to define equal styles for "equal" <span> elements:

<head>
    <style>
       span.note {font-size:120%;color:red;}
    </style>
</head>

<body>
      <h1> My <span class="note"> Important </span>   Heading </h1>
      <p>   This is some <span class="note">important</span> text.</p>
</body>

==========================================================================================
-- Layout

<style>
#header {background-color:black; color:white; text-align:center; padding:5px; }
#footer {ackground-color:black; color:white; clear:both; text-align:center; padding:5px;}
#section{          width:350px; float:left; padding:10px; }
#nav    {     line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px;}
</style>

<div id="header">   <h1>City Gallery</h1>       </div>
<div id="nav">       London<br> Paris<br> Tokyo   </div>
<div id="section">   <h1>London</h1>        </div>
<div id="footer">   Copyright © W3Schools.com   </div>

Website Layout Using HTML5 (instead of user defined lables,i.e. #~ )

    <header> - Defines a header for a document or a section
    <footer> - Defines a footer for a document or a section
    <section> - Defines a section in a document
    <aside>   - Defines content aside from the content (like a sidebar)
    <nav>     - Defines a container for navigation links

    <article> - Defines an independent self-contained article

    <details> - Defines additional details
    <summary> - Defines a heading for the <details> element

HTML Layout Using Tables
       Note: The <table> element was not designed to be a layout tool.
             The purpose of the <table> element is to display tabular data.
       Layout can be achieved using the <table> element,
       because table elements can be styled with CSS:

       Warning: Creating layout with tables is not wrong, but it is not recommended! Avoid tables for creating layout.

==========================================================================================
-- Responsive

Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).
Responsive Web Design is about using CSS and HTML
to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:

==========================================================================================
-- Iframes

An iframe is used to display a web page within a web page.

   <iframe src="URL">                                          </iframe>
   <iframe src="demo_iframe.htm" width="200" height="200">     </iframe>
   <iframe src="demo_iframe.htm" style="border:none">          </iframe>
   <iframe src="demo_iframe.htm" style="border:5px dotted red"></iframe>

Use iframe as a Target for a Link

   <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
   <p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

==========================================================================================
-- Color

Color Names Supported by All Browsers

   All modern browsers support the following 140 color names (click on a color name, or a hex value, to view the color as the background-color along with different text colors):

HTML Colors

   Colors in HTML can be specified by the following methods:

    Hexadecimal colors
    RGB colors
    Color names

    Hexadecimal Colors
      Hexadecimal color values are supported in all major browsers.
      A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF.
      For example, the #0000FF value is rendered as blue, because the blue component is set to its highest value (FF) and the others are set to the lowest value (00).

    RGB Colors
      RGB color values are supported in all major browsers.
      An RGB color value is specified with: rgb(red, green, blue). Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255.
      For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.

    Color Names
      All major browsers also support 140 standard color names.

    Example
         Color    Color HEX    Color RGB    Color Name
             #FF0000    rgb(255,0,0)    Red
            #00FF00    rgb(0,255,0)    Green
            #0000FF    rgb(0,0,255)    Blue

Color Names Sorted by Color Groups

Shades of Gray

Web Safe Colors?

==========================================================================================
-- Javascript

The HTML <script> Tag

   The <script> tag is used to define a client-side script, such as a JavaScript.
   The <script> element either contains scripting statements or it points to an external script file through the src attribute.

   Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

     The script below writes Hello JavaScript! into an HTML element with id="demo":

       <p id="demo"></p>

       <script>
         document.getElementById("demo").innerHTML = "Hello JavaScript!";
       </script>

The HTML <noscript> Tag

    The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support client-side scripting.
    The <noscript> element can contain all the elements that you can find inside the <body> element of a normal HTML page.

    NOTE: The content inside the <noscript> element will only be displayed if scripts are not supported, or are disabled in the user's browser:

       <script>
          document.getElementById("demo").innerHTML = "Hello JavaScript!";
       </script>

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

    other EX>

   document.getElementById("demo").innerHTML = "Hello JavaScript!";
   document.getElementById("demo").style.fontSize = "25px";
   document.getElementById("image").src = "picture.gif";

   Tag        Description
       ------------------------------------------------
   <script>    Defines a client-side script
   <noscript>    Defines an alternate content for users that do not support client-side scripts

==========================================================================================

-- Head

   The <head> element is a container for metadata (data about data).
   HTML metadata is data about the HTML document. Metadata is not displayed.
   Metadata typically define document title, 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.
   The <title> element is required in all HTML/XHTML documents.
   The <title> element:
        defines a title in the browser tab
        provides a title for the page when it is added to favorites
        displays a title for the page in search engine results

The HTML <style> Element

   The <style> element is used to define style information for an HTML document.
   Inside the <style> element you specify how HTML elements should render in a browser:

The HTML <link> Element

   The <link> element defines the page relationship to an external resource.
   The <link> element is most often used to link to style sheets:

   <link rel="stylesheet" href="mystyle.css">

The HTML <meta> Element

   The <meta> element is used to specify page description, keywords, author, and other metadata.
   Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.
   Define keywords for search engines:

   Define keywords for search engines:
   <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

   Define a description of your web page:
   <meta name="description" content="Free Web tutorials on HTML and CSS">

   Define the character set used:
   <meta charset="UTF-8">

   Define the author of a page:
   <meta name="author" content="Hege Refsnes">

   Refresh document every 30 seconds:
   <meta http-equiv="refresh" content="30">

   <meta name="description" content="Free Web tutorials">
   <meta name="keywords" content="HTML,CSS,XML,JavaScript">
   <meta name="author" content="Hege Refsnes">
   <meta charset="UTF-8">

The HTML <script> Element

   The <script> element is used to define client-side JavaScripts.
   The script below writes Hello JavaScript! into an HTML element with id="demo":

   <script> function myFunction
          {document.getElementById("demo").innerHTML = "Hello JavaScript!";}
   </script>

The HTML <base> Element

   The <base> element specifies the base URL and base target for all relative URLs in a page:

          <base href="http://www.w3schools.com/images/" target="_blank">

HTML head Elements

   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

==========================================================================================

-- Entities

   Reserved characters in HTML must be replaced with character entities.
   Characters, 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.

   A character entity looks like this:

   &entity_name;      OR
   &#entity_number;

     To display a less than sign we must write: < or <

   Note : The advantage of using an entity name, instead of a number, is that the name is easier to remember.
          The disadvantage is that browsers may not support all entity names, but the support for numbers is good.

Non-breaking Space ( )

    Remember that browsers will always truncate spaces in HTML pages.
    If you write 10 spaces in your text, the browser will remove 9 of them.
    To add real spaces to your text, you can use the   character entity.

Some Other Useful HTML Character Entities

   Result    Description         Entity Name Entity Number
       ---------------------------------------------------------
       non-breaking space          
   <    less than        <    <
   >    greater than        >    >
   &    ampersand        &    &
   ¢    cent            ¢    ¢
   £    pound            £ £
   ¥    yen            ¥    ¥
   €    euro            €    €
   ©    copyright        ©    ©
   ®    registered trademark    ®    ®

    Entity names are case sensitive.

Combining Diacritical Marks

    A diacritical mark is a "glyph" added to a letter.
    Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents.
    Diacritical marks can appear both above and below a letter, inside a letter, and between two letters.
    Diacritical marks can be used in combination with alphanumeric characters, to produce a character that is not present in the character set (encoding) used in the page.

Here are some examples:
   Mark Character    Construct    Result
       -------------------------------------------------
      ̀    a    à    à
      ́    a    á    á
   ̂    a    â    â
      ̃    a    ã    ã
      ̀    O    Ò    Ò
      ́    O    Ó    Ó
   ̂    O    Ô    Ô
      ̃    O    Õ    Õ

==========================================================================================

-- Symbols

Some Mathematical Symbols Supported by HTML

   Char    Number        Entity    Description
       -------------------------------------------------

   ∀    ∀    ∀    FOR ALL
   ∂    ∂    ∂    PARTIAL DIFFERENTIAL
   ∃    ∃    ∃    THERE EXISTS
   ∅    ∅    ∅    EMPTY SETS
   ∇    ∇    ∇    NABLA
   ∈    ∈    ∈    ELEMENT OF
   ∉    ∉    ∉    NOT AN ELEMENT OF
   ∋    ∋    &ni;    CONTAINS AS MEMBER
   ∏    ∏    ∏    N-ARY PRODUCT
   ∑    ∑    ∑    N-ARY SUMMATION

Some Greek Letters Supported by HTML

   Char    Number    Entity    Description
       -----------------------------------------------------------
   Α    Α    Α GREEK CAPITAL LETTER ALPHA
   Β    Β    Β    GREEK CAPITAL LETTER BETA
   Γ    Γ    Γ GREEK CAPITAL LETTER GAMMA
   Δ    Δ    Δ GREEK CAPITAL LETTER DELTA
   Ε    Ε    Ε GREEK CAPITAL LETTER EPSILON
   Ζ    Ζ    Ζ    GREEK CAPITAL LETTER ZETA

Some Other Entities Supported by HTML

   Char    Number    Entity    Description
       -----------------------------------------------------------
   ©    ©    ©    COPYRIGHT SIGN
   ®    ®    ®    REGISTERED SIGN
   €    € €    EURO SIGN
   ™    ™ ™   TRADEMARK
   ←    ← ←    LEFTWARDS ARROW
   ↑    ↑ ↑    UPWARDS ARROW
   →    → →    RIGHTWARDS ARROW
   ↓    ↓ ↓    DOWNWARDS ARROW
   ♠    ♠ &spades;BLACK SPADE SUIT
   ♣    ♣ &clubs; BLACK CLUB SUIT
   ♥    ♥ &hearts;BLACK HEART SUIT
   ♦    ♦ &diams; BLACK DIAMOND SUIT

Full Currency Reference

Full Arrows Reference

Full Symbols Reference

==========================================================================================

-- Charset

What is Character Encoding?

   ASCII was the first character encoding standard (also called character set). It defines 127 different alphanumeric characters that could be used on the internet.
   ASCII supported numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( ) @ < > .
   ANSI (Windows-1252) was the original Windows character set. It supported 256 different character codes.
   ISO-8859-1 was the default character set for HTML 4. It also supported 256 different character codes.
   Because ANSI and ISO were limited, the default character encoding was changed to UTF-8 in HTML5.
   UTF-8 (Unicode) covers almost all of the characters and symbols in the world.

All HTML 4 processors also support UTF-8.

For HTML4:

     <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

For HTML5:
    <meta charset="UTF-8">

   If a browser detects ISO-8859-1 in a web page, it defaults to ANSI, because ANSI is identical to ISO-8859-1 except that ANSI has 32 extra characters.

Differences Between Character Sets

The following table displays the differences between the character sets described above:

Numb    ASCII    ANSI    8859    UTF-8    Description

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.
   For a closer look, study our Complete HTML Character Set Reference.

==========================================================================================

-- URL Encode

URL - Uniform Resource Locator

    scheme://prefix.domain:port/path/filename

    Explanation:

        scheme - defines the type of Internet service (most common is http)
        prefix - defines a domain prefix (default for http is www)
        domain - defines the Internet domain name (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

   Note    Password protected sites might use https and/or a username and password like:
       https://username:password@www.w3schools.com/html/default.asp

Common URL Schemes

   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

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.

    Your browser will encode input, according to the character-set used in your page.
    The default character-set in HTML5 is UTF-8.

    For a complete reference of all URL encodings, visit our URL Encoding Reference.

==========================================================================================

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

    XML is a markup language where documents must be marked up correctly (be "well-formed").
    By combining the strengths of HTML and XML, XHTML was developed.
    XHTML is HTML redesigned as XML.

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
    XHTML elements must always be closed
    XHTML elements must be in lowercase
    XHTML documents must have one root element

XHTML Attributes

    Attribute names must be in lower case
    Attribute values must be quoted
    Attribute minimization is forbidden

How to Convert from HTML to XHTML

    Add an XHTML <!DOCTYPE> to the first line of every page
    Add an xmlns(name space) attribute to the html element of every page
    Change all element names to lowercase
    Close all empty elements
    Change all attribute names to lowercase
    Quote all attribute values