History of the Web

Technologies:

HTML

CSS
2.1

JavaScript
1.5

Tutorials

HTML 4.0:

New Tags:

Tag	Description	Example	Result
<abbr>	To create an abbreviation	`The <abbr title="History of the Web">HOTW</abbr>`	The HOTW
<acronym>	To create an acronym	`The <acronym title="History of the Web">HOTW</acronym>`	The HOTW
<applet>	To insert an applet	-	-
<bdo>	To specify the direction of text display	`<bdo dir="rtl">bdo</bdo>`	bdo
<button>	To create a button	`<button type="button" onclick="alert('Hello world!')">Button</button>`
<del>	To specify deleted text	`<del>delete</del> <ins>insert</ins>`	~~delete~~ insert
<fieldset>	To create a fieldset	`<form> <fieldset> <legend>Fieldset:</legend> 1: <input type="text"><br/> 2: <input type="text"><br/> </fieldset> </form>`	Fieldset: 1: 2:
<frame>	To create a frame	-	-
<frameset>	To create a set of frames	-	-
<iframe>	To create a set of frames	`<iframe src="http://54.213.200.197/"></iframe>`
<ins>	To specify inserted text	`<del>delete</del> <ins>insert</ins>`	~~delete~~ insert
<label>	To create a label for an <input> element	`<form> <label for="example">Label</label> <input type="radio" name="example" id="example" value="example"> </form>`	Label
<legend>	To specify a legend in a fieldset	`<form> <fieldset> <legend>Fieldset:</legend> 1: <input type="text"><br/> 2: <input type="text"><br/> </fieldset> </form>`	Fieldset: 1: 2:
<noframes>	To specify a no frame section	-	-
<noscript>	To define alternative content for users that have disables scripts in their browser	`<noscript>Your browser does not support JavaScript!</noscript>`
<object>	To define an embedded object	-	-
<optgroup>	To group related options in a dropdown list	`<select> <optgroup label="Group 1"> <option value="volvo">1</option> </optgroup> <optgroup label="Group 2"> <option value="mercedes">2</option> </optgroup> </select>`
<param>	To transfer a parameter to an applet	-	-
<q>	To define a short quotation	`Here is a <q>quotation</q>`	Here is a quotation
<s>	To specify strikethrough text	`<s>strikethrough</s>`	~~strikethrough~~
<span>	To specify a section in a document	`<span>span</span>`	span

HTML 3.2:

New Tags:

Tag	Description	Example	Result
<basefont>	To change the default font size throughout the entire page	-	-
<big>	To make text bigger than the surrounding area	`<big>big</big>`	big
<center>	To centre text, images and other elements	`<center>center</center>`	center
<div>	To divide a page into logical sections	`<div>div</div>`	div
<font>	To change the size, face and colour of individual letters or words	`<font size="3" color="red">font</font>`	font
<script>	To create an in-line script	`<p id="script"></p> <script> document.getElementById("script").innerHTML = "script"; </script>`
<small>	To make text smaller than the surrounding text	`<small>small</small>`	small
<style>	To set up style information	-	-
<sub>	To create a subscript	`<sub>subscript</sub>`	_subscript
<sup>	To create a superscript	`<sup>superscript</sup>`	^superscript

HTML 2.0:

New Tags:

Tag Description Example Result

<area> To specify the coordinates of an image map <map name="planets"> <area shape="circle" coords="0,0,82,126" href="sun.htm" alt="Sun"> </map>

<b> To display text in boldface <b>bold</b> bold

To indicate that a block of text is a quotation

<blockquote>blockquote</blockquote>

blockquote

<body> To enclosed the main section of a web page - -

<br> To create a line break <br>

To create a caption for a table

<table>

          <caption>caption</caption>

          <tr>

            <th>TH1</th>

            <th>TH2</th>

          </tr>

          <tr>

            <td>TD1</td>

            <td>TD2</td>

          </tr>

        </table>

caption
TH1	TH2
TD1	TD2

<cite> To indicate that the text is a short citation <cite>cite</cite> cite

<code> To indicate text is a computer code <code>Code</code> Code

<col>

To create a column in a table

<table>

          <colgroup>

            <col span="2" style="background-color:red">

            <col style="background-color:yellow">

          </colgroup>

          <tr>

            <th>1</th>

            <th>2</th>

            <th>3</th>

          </tr>

          <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

          </tr>

        </table>

1	2	3
1	2	3

To create a group of columns in a table

<table>

          <colgroup>

            <col span="2" style="background-color:red">

            <col style="background-color:yellow">

          </colgroup>

          <tr>

            <th>1</th>

            <th>2</th>

            <th>3</th>

          </tr>

          <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

          </tr>

        </table>

1	2	3
1	2	3

<dfn> To represent the defining instance of a term This is a <dfn>dfn</dfn> This is a dfn

<em> To emphasize text, usually in italics <em>em</em> em

<form>

To create an input form

<form>

          Form: <input type="text" name="Form" value="Form"><br>

          <input type="submit" value="Submit">

        </form>

<head> To create the head section of the web page - -

<hr>

To create a horizontal line

<hr>

<html> To identify the document as an HTML document - -

<i> To display text in italics <i>i</i> i

<img> To place an image on the web page <img src='/img/logo-standard.png' alt='img'/>

<input>

To create a form element such as an input field, button, etc.

<form>

          Form: <input type="text" name="Form" value="Form"><br>

          <input type="submit" value="Submit">

        </form>

<kbd> To indicate text from a keyboard <kbd>kbd</kbd> kbd

<map> To create a client-side image map <map name="planets"> <area shape="circle" coords="0,0,82,126" alt="Sun"> </map>

<ol>

To create an ordered list

<ol>

          <li>1</li>

          <li>2</li>

          <li>3</li>

        </ol>

<option> To create individual options in a form menu <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>

<pre>

To create preformatted text

<pre>Text remains    formatted

        in a pre tag</pre>

Text remains    formatted
        in a pre tag

<samp> To display sample text that should be used literally <samp>samp</samp> samp

<select> To create a menu in a form <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>

<strong> To strongly emphasize text, usually in boldface <strong>strong</strong> strong

<strike> To display text with a line through it (same as <S>) <strike>strike</strike> ~~strike~~

<table>

To create a table

<table>

          <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

          </tr>

        </table>

<td>

To create a regular cell in a table

<table>

          <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

          </tr>

        </table>

<th>

To create a header cell in a table

<table>

          <tr>

            <th>1</th>

            <th>2</th>

            <th>3</th>

          </tr>

          <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

          </tr>

        </table>

1	2	3
1	2	3

<tr>

To create a new row in a table

<table>

          <tr>

            <th>1</th>

            <th>2</th>

            <th>3</th>

          </tr>

          <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

          </tr>

        </table>

<tbody>

To create a table body

<table>

          <thead>

            <tr>

              <th>THEAD1</th>

              <th>THEAD2</th>

            </tr>

          </thead>

          <tfoot>

            <tr>

              <td>TFOOT1</td>

              <td>TFOOT2</td>

            </tr>

          </tfoot>

          <tbody>

            <tr>

              <td>TBODY1</td>

              <td>TBODY2</td>

            </tr>

          </tbody>

        </table>

THEAD1	THEAD2
TFOOT1	TFOOT2
TBODY1	TBODY2

<tfoot>

To create a table footer

THEAD1	THEAD2
TFOOT1	TFOOT2
TBODY1	TBODY2

<thead>

To create a table header

<table>

          <thead>

            <tr>

              <th>THEAD1</th>

              <th>THEAD2</th>

            </tr>

          </thead>

          <tfoot>

            <tr>

              <td>TFOOT1</td>

              <td>TFOOT2</td>

            </tr>

          </tfoot>

          <tbody>

            <tr>

              <td>TBODY1</td>

              <td>TBODY2</td>

            </tr>

          </tbody>

        </table>

THEAD1	THEAD2
TFOOT1	TFOOT2
TBODY1	TBODY2

<textarea> To create a block area for text input in a form <textarea></textarea>

<tt> To display text in a monospaced teletype font <tt>tt</tt> tt

<var> To indicate that the text is a variable <var>var</var> var

<u> To place a line underneath text <u>u</u> u

Deprecated Tags:

Tag	Description	Example	Result
<listing>	To display preformatted text 132 characters	-	-
<plaintext>	To render everything following the start tag as raw text	-	-

HTML 1.0:

Tags:

Tag	Description	Example	Result
<a>	To create a link or anchor	`<a href='http://info.cern.ch'>info</a>`	info
<address>	To indicate address information	`<address> Newcastle upon Tyne,<br> Tyne and Wear<br> NE1 7RU </address>`	Newcastle upon Tyne, Tyne and Wear, NE1 7RU
<base>	To specify the URL of the document used to generate any relative URLs	-	-
<dd>	To indicate a definition description in a definition list	`<dl> <dt>Term</dt> <dd>Description</dd> <dt>Term</dt> <dd>Description</dd> </dl>`	Term Description Term Description
<dir>	To create a directory list	`<dir> <li>html</li> <li>css</li> </dir>`	html css
<dl>	To create a definition list	`<dl> <dt>Term</dt> <dd>Description</dd> <dt>Term</dt> <dd>Description</dd> </dl>`	Term Description Term Description
<dt>	To indicate a term to be defined in the definition list	`<dl> <dt>Term</dt> <dd>Description</dd> <dt>Term</dt> <dd>Description</dd> </dl>`	Term Description Term Description
<h1>	To create a level 1 header	`<h1>Header 1</h1>`	Header 1
<h2>	To create a level 2 header	`<h2>Header 2</h2>`	Header 2
<h3>	To create a level 3 header	`<h3>Header 3</h3>`	Header 3
<h4>	To create a level 4 header	`<h4>Header 4</h4>`	Header 4
<h5>	To create a level 5 header	`<h5>Header 5</h5>`	Header 5
<h6>	To create a level 6 header	`<h6>Header 6</h6>`	Header 6
<isindex>	To create a primitive search	-	-
<li>	To create a list item	`<ul> <li>li</li> </ul>`	li
<listing>	To display preformatted text 132 characters	-	-
<menu>	To create a menu item list	`<menu type="context" id="menu"> </menu>`
<p>	To create a new paragraph	`<p>p</p>`	p
<plaintext>	To render everything following the start tag as raw text	-	-
<title>	To create the document title	-	-
<ul>	To create an unordered list	`<ul> <li>li</li> </ul>`	li

CSS2.1:

New Properties:

Print Properties:

Property	Description	Example	Result
orphans	To specify the minimum number of lines to be displayed at the bottom of the page	`p { orphans: 3 }`	orphans
widows	To specify the number of lines to be displayed at the top of the page	`p { widows: 3 }`	widows

@ Properties:

Property	Description	Example	Result
@media	To specify how a document is to be presented on different media: screen, print etc	`@media print { /* style sheet for print goes here */ }`
@import	To import style rules from other style sheets	`@media print { /* style sheet for print goes here */ }`

Selectors:

Property	Description	Example
*	To match with any element	`* { color: #fff }`
x > y	To select any y element that is a child of an x element	`li > ul { list-style-type: none }`
x + y	To select any y element that immediately follows an x element	`p + p { font-size: smaller }`

Pseudo:

Property	Description	Example
x:first-child	To select every x that is the first child of its parent	`p:first-child { background-color: blue }`
x:link	To select unvisited links	`a:link { color: blue }`
x:visited	To select visited links	`a:visited { color: blue }`
x:hover	To style when mouse over element	`a:hover { color: #FF00FF }`
x:active	To select selected links	`a:active { color: #0000FF }`
x:focus	To style when field is focused	`input:focus { background-color: yellow }`
x:lang(y)	To select the x element that uses the language y	`p:lang(en) { font-weight: bold }`
x:before	To place generated content before an element used with the content property	`#test:before { content: "before" }`
x:after	To place genereated content after an element used with the content property	`#test:after { content: "after" }`
x:first-line	To select the first line of text in the x element	`h2+p:first-line { color: red }`
x:first-letter	To select the first letter in the x element	`h1:first-letter { text-transform: lowercase }`

CSS2:

New Properties:

Font Properties:

Property	Description	Example	Result
font-size-adjust	To adjust the size of a font	`p { font-size-adjust: 0.2 }`	font-size-adjust
font-stretch	To specify the stretch of a font	`p { font-stretch: wider }`	font-stretch
text-shadow	To specify the shadow of text	`p { text-shadow: 1px 1px #4285F4 }`	text-shadow

Visual Effects:

Property	Description	Example	Result
outline	To specify the outline of an element	`p { outline: #4285F4 dotted thick }`	outline
overflow	To specify the overflow property of an element	`p { overflow: hidden; height: 20px; }`	overflow
visibility	To specify the visibility of an element	`div { visibility: hidden }`	visibility

Visual Formatting:

Property	Description	Example	Result
direction	To specify the direction of text	`p { direction: rtl }`	direction
max-height	To specify the max-height of an element	`p { max-height: 5px }`	max-height
min-height	To specify the min-height of an element	`p { min-height: 50px }`	min-height
max-width	To specify the max-width of an element	`p { max-width: 20px }`	max-width
min-width	To specify the min-width of an element	`p { min-width: 20px }`	min-width
position	To specify the position of text	`p { position: absolute; }`	position
unicode-bidi	To override text	`p { direction: rtl; unicode-bidi: bidi-override; }`	unicode-bidi
z-index	To specify the stack order of an element	`img { position: absolute; z-index: 0; }`	z-index

Tables:

Property Description Example Result

border-collapse

To specify whether the table borders are collapsed into a single border or detached

table { border-collapse: collapse; }
 table, td { border 1px solid #333 }

border

collapse

border-spacing

To specify the spacing between the borders

table { border-collapse: separate; border-spacing: 10px; }
 table, td { border 1px solid #333 }

border

spacing

caption-side

To specify the placement of the table caption

caption { caption-side: bottom; }

caption
caption	side

empty-cells

To specify whether or not to display borders or background on empty cells in a table

table { border-collapse: separate; empty-cells: hide; }

empty	cells
empty

CSS1:

Properties:

Font Properties:

Property	Description	Example	Result
font-family	To assign a font	`p { font-family: "Times New Roman", Times, serif }`	font-family
font-style	To define how the font is displayed	`p { font-style: italic }`	font-style
font-variant	To determine if the font is in normal or small-caps	`p { font-variant: small-caps }`	font-variant
font-weight	To specify the weight of the font	`p { font-weight: 800 }`	font-weight
font-size	To specify the size of the font	`p { font-size: large }`	font-size

Color & Background:

Property	Description	Example	Result
color	To specify the color of an element	`p { color: blue }`	color
background-color	To set the background color of an element	`p { background-color: #FFF }`	background-color
background-image	To specify the background image of an element	`p { background-image: url('/img/background.png') }`	background-image
background-repeat	To determine how a specified background image is repeated	`p { background-image: url('/img/background.png'); background-repeat: repeat-y; }`	background-repeat

Box Properties:

Property	Description	Example	Result
word-spacing	To define an additional amount of space between words	`p { word-spacing: 0.4em }`	word - spacing
letter-spacing	To define an additional amount of space between characters	`p { letter-spacing: 0.1em }`	letter-spacing
text-decoration	To specify the decoration for text	`p { text-decoration: underline }`	text-decoration
vertical-align	To alter the vertical positioning of an element	`p { vertical-align: top }`	vertical-align
text-transform	To specify the transformation of text	`p { text-transform: uppercase }`	text-transformation
text-align	To specify alignment of text	`p { text-align: center }`	text-align
text-indent	To specify the indentation of text	`p { text-indent: 5em }`	text-indent
line-height	To control the spacing between baselines of text	`p { line-height: 200% }`	line-height

Border/Margin/Padding Properties:

Property	Description	Example	Result
margin-top	To specify the top margin	`p { margin-top: 5px }`	margin-top
margin-bottom	To specify the bottom margin	`p { margin-bottom: 5px }`	margin-bottom
margin-left	To specify the left margin	`p { margin-left: 5px }`	margin-left
margin-right	To specify the right margin	`p { margin-right: 5px }`	margin-right
margin	To specify the margin	`p { margin: 5px }`	margin
padding-top	To specify the top padding	`p { padding-top: 5px }`	padding-top
padding-bottom	To specify the bottom padding	`p { padding-bottom: 5px }`	padding-bottom
padding-left	To specify the left padding	`p { padding-left: 5px }`	padding-left
padding-left	To specify the right padding	`p { padding-right: 5px }`	padding-right
padding	To specify the padding	`p { padding: 5px }`	padding
border-top	To specify the top border	`p { border-top: 1px solid #333 }`	border-top
border-bottom	To specify the bottom border	`p { border-bottom: 1px solid #333 }`	border-bottom
border-left	To specify the left border	`p { border-left: 1px solid #333 }`	border-left
border-right	To specify the right border	`p { border-right: 1px solid #333 }`	border-right
border	To specify the border	`p { border: 1px solid #333 }`	border
width	To specify the width	`p { width: 100% }`	width
height	To specify the height	`p { height: 50% }`	height
float	To wrap text around an element	`p { float: right }`	float
clear	To specify if an element allows floating elements to its sides	`p { clear: right }`	clear

Property	Description	Example	Result
display	To define the display of an element	`p { display: none }`	display
white-space	To determine how spaces within the element are treated	`p { white-space: pre }`	white-space
list-style-type	To specify the type of list-item marker	`ul { list-style-type: none }`	list style type
list-style-image	To specify the image of list-item marker	`ul { list-style-image: url('/img/list-image.png') }`	list style type

Tutorials:

HTML:

Basic Tutorial:

HTML is the markup of a web page.

Below is a basic example of what you can do with HTML. It shows you what is required to build a basic page. The HTML text editor on the other tab automatically includes the DOCTYPE, html, head and body.

Example

  
    <!DOCTYPE html>

    <html>

    <head>

    <title>Page Title</title>

    </head>

    <body>

    <h1>This is a heading</h1>

    <p>This is a paragraph</p>

    </body>

    </html>

Result

Other Resources:

CSS:

Basic Tutorial:

CSS controls the styling of a web page.

Below is a basic example of what you can do with CSS.

Example

  
    <!DOCTYPE html>

    <html>

    <head>

    <style>

    body {

      background-color: #d0e4fe;

    }

    h1 {

      color: red;

      text-align: center;

    }

    p {

      font-family: "Verdana";

      font-size: 30px;

    }

    </style>

    </head>

    <body>

    <h1>CSS Example</h1>

    <p>This is a paragraph</p>

    </body>

    </html>

Result

Other Resources:

JavaScript:

Basic Tutorial:

JavaScript controls the behaviour of a web page.

Below is a basic example of what you can do with JavaScript. It finds the HTML element with an id="change" and changes the content to "This is a JavaScript example".

Example

  
    <!DOCTYPE html>

    <html>

    <body>

    <h1>JavaScript Example</h1>

    <p id="example"></p>

    <button type="button"

    onclick="document.getElementById("example").innerHTML = 'This is a JavaScript example'";>

    Click Me!</button>

    </body>

    </html>

2000 - 2004

AJAX

SVG

Web Fonts

HTML 4.0:

New Tags:

HTML 3.2:

New Tags:

HTML 2.0:

New Tags:

Deprecated Tags:

HTML 1.0:

Tags:

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

CSS2.1:

New Properties:

Print Properties:

@ Properties:

Selectors:

Pseudo:

CSS2:

New Properties:

Font Properties:

Visual Effects:

Visual Formatting:

Tables:

CSS1:

Properties:

Font Properties:

Color & Background:

Box Properties:

Border/Margin/Padding Properties:

Tutorials:

HTML:

Basic Tutorial:

Example

Result

Other Resources:

CSS:

Basic Tutorial:

Example

Result

Other Resources:

JavaScript:

Basic Tutorial:

Example

Result

Other Resources:

Default

Man Utd