HTML

Hyper Text Markup Language

 

One of the three main languages of web pages:

  • HTML --- content
  • CSS --- presentation
  • Javascript --- behaviour

 

  • Developed in 1990 by Tim Berners-Lee
  • HTML is a markup language used by web browsers to render text, images and other media into web pages
  • Nov 1995 HTML 2
  • Jan 1997 HTML 3.2
  • Dec 1999 HTML 4.01
  • Jan 2008 HTML 5, first draft
  • HTML 5 considered an ongoing work in progress
  • Markup language consists of a set of markup tags that describe the HTML document content
  • A document (aka web page) consists of these markup tags and plain text content

 

HTML5 Logo

Elements

Elements are the individual components that make up a web page.

 

They generally consist of a start and an end tag, containing content in between, e.g.

 

<p>the content</p>

 

Some elements, known as void elements, do not require an end tag and are sometimes closed within the opening tag by the use of a forward slash before the right hand greater than / angle bracket, e.g. <br />

 

Attributes can be assigned for most elements within the opening tag, such as: <p id=”myPara”>

 

Elements can also be nested within one another, e.g.

 

<head>

<title>My Page Title</title>

</head>

Attributes

  • Define characteristics for an element
  • Placed within the opening tag
  • Consist of name=”value” pairs
  • Value is assigned by use of equals sign =
  • Value is always within doubles quotes

 

Four core attributes:

  • id -- uniquely identifies the element
  • class -- associates an element to a style sheet
  • style -- enables inline styling of the element
  • title -- provides a title for the element, displayed as a tooltip

 

Other attributes may be specific to a particular element, e.g.

 

<a href=”http://www.google.com”>Google Link</a>

 

 

A few other generic attributes, now generally becoming deprecated due to the use of CSS:

 

Attribute Description Value
align Horizontal alignment right, left, center
valign Vertical alignment top, middle, bottom
bgcolor Background colour Numeric, hex, RGB value
background Background image URL
width Specifies width Numeric value
height Specifies height Numeric value

Tags

Tags are keywords surrounded by angle brackets.

 

Syntax:

<tagName>

 

Usually consisting of opening and closing tag pairs, whereby the closing tag is preceded with a forward slash, like so:

 

<p>Hello, World!</p>

 

Some tags do not have the closing variant, and sometimes are seen to include a closing forward slash, like so:

 

<img src=”myImage.png” />

 

Tags also often include attributes within the opening tag to provide more information or instructions that are interpreted by the browser, such as the src attribute above which is then assigned an image file name to define that specific image tag. Similarly tags can be given an id or a class name or some inline styling, or any and all of the above, like so:

 

<h1 id=”myID” class=”frontHeading” style=”color:#FF00FF”>Hello, World!</h1>

Structure

The very basic structure of an HTML page consists of:

  • <!DOCTYPE html> DTD -- Document Type Definition
  • <html> </html> Opening and closing html tags
  • <head> </head> Opening and closing head tags, nested within the above
  • <title> </title> Opening and closing title tags, nested within the above
  • <body> </body> Opening and closing body tags, following after the above closing </head> tag
  • followed by general html tags and content within the above <body> tags

 

Visual representation:

 

Code representation:

Save & refresh browser:

 

Browser representation:

My first heading

Hello, World!

Document Type Definition

The DTD tells the browser what version of the document type the page is adhering to.

 

Does not have a closing tag.

 

HTML5 version:

<!DOCTYPE html>

 

HTML 4.01

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

 

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

<head> Element

The <head> element provides information about the document.

 

  • Contains all the page header elements
  • Immediately follows the opening <html> tag
  • Should contain the <title> for the document

 

Can also contain the following tags:

  • <meta>
    • information about the document
    • e.g: keywords, description
    • useful for search engines
  • <link>
    • provides a link to an external file, such as a css stylesheet, or JavaScript file
  • <style>
    • provides css rules for the document
  • <script>
    • provides a container for JavaScript
  • <base>
    • provides a base URL for any relative links within the document
  • <object>
    • used to embed multimedia within the document

 

Example showing <head> element containing some of the above example tags:

Save & refresh browser:

Hello, World

<title> Element

The <title> element is used to define the title of the document and is visible in the browser title bar:

 

<meta> Element

  • Provides information about the document
  • Does not have a closing tag, therefore requires a closing forward slash
  • Name/Value pairs, used to specify page description, keywords, author of the document, last modified, and other metadata
  • <meta> elements always go inside the <head> element

 

Examples:

 

Define keywords for search engines:

<meta name=”keywords” content=”C, MySQL, C++, PHP, HTML, CSS, JavaScript, Tutorials” />

 

Refresh document every 17 seconds:

<meta http-equiv=”refresh” content=”17″ />

 

Define a description of your web page:

<meta name=”description” content=”Technical Tutorials: Free. Good Quality. To the point!” />

 

Define the author of a page:

<meta name=”author” content=”Derrick Robinson” />

 

Define the revision (last update) date of a page:

<meta name=”revised” content=”Tech-Academy, 06/08/2013″ />

 

Specify page redirection to another page. If no duration is set then it will be redirected immediately:

<meta http-equiv=”refresh” content=”5; url=http://www.tech-academy.com” />

 

Store a cookie on the client, for future tracking by the web server. If no expiration date/time is included it is considered a session cookie and will be deleted when the browser exits:

<meta http-equiv=”cookie” content=”user=myUser; expires=Tuesday, 13-Aug-2013 23:59:59 GMT; />

<link> Element

  • Defines a link to an external document
  • Does not have a closing tag, therefore requires a closing forward slash
  • Generally used to link to style sheets

 

The rel attribute is used to define the relationship between the document and the target URL, as defined in the href attribute:

<style> Element

  • Defines style for the document
  • Used within the <head> tags of the document

 

Some hideous styling applied:

Save & refresh browser:

My Heading

My paragaph text

<script> Element

  • Used to define JavaScript within the document
  • Can contain script statements, or
  • Can refer to an external script file via the src attribute

 

Save & refresh browser:

Hello, World!

 

*note: if defining an external src file the script element must be empty.

<base> Element

  • Used to define a base URL for relative links within the document
  • Can only be one base element
  • Must be contained within the <head> element
  • Does not have a closing tag, therefore requires a closing forward slash

 

Example showing the relative path being used with the src attribute:

Save & refresh browser:

<object> Element

  • used to embed multimedia in an HTML document
  • <param> tag is also used to define various parameters
  • must be within the <body> tags

 

This example embeds a flash .flv video object into the html page:

Block Elements

The two main types of elements are block and inline.

 

Block elements:

  • Only appear within the <body> element
  • Formatted with a line break before and after the element
    • Start and end on a new line
    • Thus creating a block of content
  • May contain inline and other block level elements

 

Example showing one heading and three paragraph block level elements:

Save & refresh browser:

 

*note: the above diagram is representational of the four blocks. A browser rendered view would not have the block outlines or blue shaded body.

Inline Elements

Inline elements:

  • Do not start with a new line
  • Generally contain data and other inline level elements

 

Example showing inline elements being applied:

Save & refresh browser:

My first Heading

Paragraph one

Paragraph two

Paragraph three

<div> Element

The document division element is a block level element that acts as a container, encapsulating content and dividing the document into sections.

 

CSS is generally applied to provide styling to a <div>, enabling all elements contained with the div to be styled at the same time.

 

Divs can be nested, and also as an example styled with CSS to say perform width adjustments or apply a specific font.

 

Save & refresh browser:

My first Heading

Paragraph one

Paragraph two

Paragraph three

Box Model

All pages are made up of HTML elements that are contained within the box model.

 

It consists of:

  • margins, outside the border
  • borders
  • padding, inside the border
  • content, at the centre of the box

 

 

Values can be set using px, em or ex.

 

margin: Npx; border: Npx; or padding: Npx; on their own, will give equal values to all four sides.

 

 

Or to set individual values, use:

  • padding-top: Npx;
  • padding-right: Npx;
  • padding-bottom: Npx;
  • padding-left: Npx;
  • border-top: Npx;
  • border-right: Npx;
  • border-bottom: Npx;
  • border-left: Npx;
  • margin-top: Npx;
  • margin-right: Npx;
  • margin-bottom: Npx;
  • margin-left: Npx;

 

Shorthand examples:

  • 2 pairs (top/bottom same, left/right same): margin: 1ex 0.5em;
  • 3 values set top, left/right pair, bottom in order: padding: 2ex 1em 4ex;
  • 4 values Individually, in order TRBL: padding: 4ex 0.5em 5ex 3em;

 

Negative margins can be used to offset or move/extend margin or padding or content outside it’s box container

 

Width and Height of an Element
When setting the width and height properties of an element with CSS, you just set the width and height of the content area.

 

To calculate the full size of an element, you must also add the padding, borders and margins.

 

Given the following CSS for an element, the total width equates to 640px:

width:500px;
padding:20px;
border:30px solid red;
margin:20px;

 

This is calculated as follows:

500px (width)
+ 40px (left + right padding)
+ 60px (left + right border)
+ 40px (left + right margin)
= 640px

Save & refresh browser:

My first Heading

Paragraph one

Paragraph two

Paragraph three

<span> Element

The <span> element is an inline element that acts as a container for encapsulating content.

 

CSS is generally applied to provide styling to a <span>, enabling the content contained with the span to be styled individually.

 

A span can only contain other inline elements, and cannot contain block-level children.

 

<span> only works on inline content and should not be used for setting the width.

 

Save & refresh browser:

My first Heading

Paragraph one

Paragraph two

Paragraph three

Whitespace

Browsers treat consecutive multiple spaces and new lines as a single white space.

 

If multiple spaces or new lines are added the browser will ignore them and simply treat as a single space.

 

This is known as whitespace collapsing.

 

If more than one space is required between two words a non-breaking space should be used &nbsp;

 

Similarly, if further new lines are required between content, a <br> element should be used.

 

Save & refresh browser:

My first Heading

My            second heading

 

 

 

 

Paragraph one

Paragraph two

Paragraph three

Comments

Syntax:

<!-- Comment text goes here -->

 

There can be no spaces between the opening <!-- characters or closing --> characters.

 

Multiline comments appear between the opening and closing characters:

 

<!--

Comment

text goes

here

-->

 

 

Conditional Comments

 

Only works in IE and are ignored by other browsers!

 

<!--[if IE 6]>

Special instructions for IE 6 here

<![endif]-->

 

The following tests can also be incorporated

  • lt = less than
  • lte = less than equal
  • gt = greater than
  • gte = greater than equal
  • ! = not

Example:

<!--[if lte IE 6]>

<link rel=”stylesheet” type=”text/css” href=”ie6.css” />

<![endif]-->

 


 

You may also find comments used in scripts and stylesheets for older browsers:

 

<br> Line break Element

The <br> element is used to create a new line.

 

  • Has no end tag
  • Sometimes seen with a closing forward slash <br />

 

Save & refresh browser:

Paragraph one 

 

 

 

 

Paragraph two

Paragraph three

<p> Paragraph Element

HTML Paragraphs are defined with the <p> element.

 

Browsers automatically add an empty line (line break) before and after a paragraph.

 

All paragraphs must include the closing tag, although browsers will allow not including it, future versions will be more strict and can produce unexpected results / errors.

 

Save & refresh browser:

Paragraph one 

Paragraph two

Paragraph three

Headings

Defined with the <h1> to <h6> tags.

 

<h1> defines the most important heading. <h6> defines the least important heading.

 

Browsers automatically add some empty space (a margin) before and after each heading.

 

Example:

Save & refresh browser:

This is a h1 heading

This is a h2 heading

This is a h3 heading

This is a h4 heading

This is a h5 heading
This is a h6 heading

 

 

Headings Are Important
Use HTML headings for headings only. Don’t use headings to make text BIG or bold.

Search engines use your headings to index the structure and content of your web pages.

Since users may skim your pages by its headings, it is important to use headings to show the document structure.

H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.

Text Formatting

Text formatting tags used to format text are now more commonly being superceded by CSS.

 

Text formatting

Save & refresh browser:

Here’s an example of bold text 

Here’s an example of emphasized text

Here’s an example of italicised text

Here’s an example of small text

Here’s an example of strong text

Here’s an example of subscripted text

Here’s an example of superscripted text

Here’s an example of inserted text

Here’s an example of deleted text

Here’s an example of marked text

Here’s an example of underlined text

Here’s an example of striked text

 

 

Computer Output

This is computer code text 

This is keyboard text

This is sample computer code text

This is a variable text

This is

 

 

Abbreviations, Addresses, Citations and Quotations

Save & refresh browser:

An example of AoA text, using the title attribute for the tooltip. 

An example of an address text

Flat 4
Tower Heights
Kings Road
Camden
London.

This is Bi-Directional Override making text go from right to left.

 

The blockquote specifies a section quoted from another source:

Tim Berners-Lee is a British computer scientist, best known as the inventor of the World Wide Web.

Browsers usually indent blockquotes

 

This is short quote example: The World Wide Web is a system of interlinked hypertext documents accessed via the Internet. Browsers normally insert quotation marks around the quotation.

<marquee> Element

Renders as scrolling text, either horizontally or vertically.

 

Attribute Description Value
width How wide the marquee is 10, 20%
height How high the marquee is 10, 20%
direction Which direction it should scroll up, down, left, right
behaviour Type of scrolling scroll, slide, alternate
scrolldelay Delay between each scroll frame 10, 20, etc in milliseconds
scrollamount Sets the speed of scrolling 10, 20, etc in milliseconds
loop How many times to loop default is infinite
bgcolor background colour colour name or hex value
hspace Horizontal space around the marquee 10, 20%
vspace Vertical space around the marquee 10, 20%

 

 


 

An image can also be placed within a marquee to provide some basic animation, this example increases the speed of the scrolling to give a slightly smoother scroll:

 

<marquee scrollamount=”50″><img src=”HTML5_logo.png”></marquee>

<a> Links

The <a> anchor tag is used to create hyperlinks.

 

Syntax:

<a href=”http://www.tech-academy.co.uk”>Tech-Academy</a>

 

The text between the tags is displayed as the link.

 

Default colours for links, will be applied by the browser unless styled separately:

  • Unvisited link = underlined, blue
  • Visited link = underlined, purple
  • Active link = underlined, red

 

Attribute Description Value
href Hypertext reference; Target URL “http://www.site.com” or relative URL “/images/logo.png”
target Where to display contents “_blank” new page

“_top” same window

“_parent” same window

“_self” default; new page, current window

name Creates a label on the page user defined
id Creates a label on the page user defined
event Script trigger onmouseover, etc
title Tooltip user defined
accesskey Keyboard shortcut Alt, or Ctrl key plus user defined key

 

 

Images can be used as links between the tags:

 

<a href=”http://www.tech-academy.co.uk”><img src=”logo.png”></a>

 

 

Email links can also be created using mailto: followed by the target email address in the href attribute. Optionally, a subject can be included by following the email address with a question mark ? and assigning your chosen subject value to the subject keyword. Also, a message can be included by assigning your chosen message text to the body keyword.

 

Images

Images are defined with the <img> tag. This is an empty tag, closed using a forward slash at the end.

 

The actual image is applied by assigning the location of the image to the src attribute.

 

Syntax:

 

<img src=”logo.png” />

 

Attribute Description Value
src Specifies URL for image “http://www.site.com/logo.png” or relative URL “/images/logo.png”
id id of the image user defined
style Enables inline CSS styling CSS user defined styling
width How wide the image is 600px, 40%
height How high the image is 480px, 60%
border Sets a border around the image 1, 2, etc
title Tooltip user defined
alt Alternate text if image is missing user defined
hspace Horizontal space around the image 10px, 20px
vspace Vertical space around the image 10px, 20px
name Sets the name of the image user defined

 

Save & refresh browser:

Tables

Tables are created using the <table> element and contain table rows defined with the <tr> element that contain table cells defined by the <td> (table data) element.

 

Table column headings are defined using the <th> element, which will provide bold headings for each column.

 

A separate table heading can be defined using the <thead> element.

Table body is defined using the <tbody> element.

Table footer is defined using the <tfoot> element.

 

Attribute Description Value
border Specifies URL for image 0, 1, 2, etc
bordercolor Specifies a colour for the border User defined colour
bgcolor Specifies a colour for the background User defined colour
background Specifies URL for background image “http://www.site.com/background.png” or relative URL “/images/background.png”
width Specifies the width User defined number of pixels, e.g. 400px, or % screen e.g. 50%
height Specifies the height User defined number of pixels, e.g. 400px, or % screen e.g. 50%
cellpadding Specifies padding within cells from content to border User defined number of pixels, e.g. 10px
cellspacing Specifies distance between cells User defined number of pixels, e.g. 20px
colspan Specifies the number of columns a cell should span User defined column number, e.g. 3
rowspan Specifies the number of rows a cell should span User defined row number, e.g. 5

 

Lists

Three types of lists:

  • Ordered defined by the <ol> element
  • Unordered defined by the <ul> element
  • Definition, defined by the <dl> element

 

Ordered and unordered lists contain list items, defined by the <li> element.

 

Definition lists contain terms defined by the <dt> element and definitions defined by the <dd> element.

 

Use of the type attribute in an ordered list allows the bullet point to be set as:

 

<ol type=”I”> -- Upper-Case Numerals.
<ol type=”i”> -- Lower-Case Numerals.
<ol type=”a”> -- Lower-Case Letters.
<ol type=”A”> -- Upper-Case Letters.

 

 

The type attribute allows the bullet point for unordered lists to be defined as “square”, “disc” or “circle”:

 

<ul type=”square”>
<ul type=”disc”>
<ul type=”circle”>

 

 

The start attribute can also be used to define the start of a list, e.g.:

 

<ol start=”17″>

 

Save & refresh browser:

  1. My first list item
  2. My second list item
  3. My third list item
  4. My fourth list item
  • Example using square bullets
  • Here’s some more interesting information
  • Appropriate data
  • Perhaps you include other elements, like images!
Term
Term Definition
HTML
Hyper Text Markup Language

Forms

Forms are defined using the <form> element and contain a number of form controls to collect data from the user.

 

Some of the most frequently used form attributes are:

  • name: Unique name of the form
  • action: Name of the script URL to receive the collected data
  • method: Define the method to be used to upload the collected data, generally GET or POST

Syntax:

 

<form name=”userDefiend” action=”formAction.php” method=”POST”  >

…input elements…

</form>

 

 

IMPORTANT! Forms method GET Vs POST

 

The forms method attribute defines how to send data to the resource defined in the action attribute.

 

GET

  • Appends data into the URL as name/value pairs, and is therefore visible!
  • Should NEVER be used with sensitive data
  • The length of the URL is limited to ~2048 characters
  • Can be bookmarked
  • Remains in browser history

 

POST

  • Appends data inside body of HTTP request
  • No size limitations
  • Cannot be bookmarked
  • Do not remain in browser history

 

 

<input /> 

 

The most important form element is the <input /> element, which is used to collect user information.

 

<input /> element attributes:

  • type: Specifies the type of input control
  • name: Specifies the name part of the name/value pair sent to the server, representing each form control and the value the user entered
  • value: Specifies an initial value for the text input control that the user will see when the form loads
  • size: Specifies the width of the text-input control in terms of characters. Default is 20
  • maxlength: Specifies the maximum number of characters a user can enter into the text box

 

The <input /> element has many types:

  • Button, Submit, Reset
  • Text
  • Password (characters are masked by being shown as asterisks)
  • Radio buttons
  • Checkboxes
  • Select boxes
  • Hidden controls
  • File select boxes

 

Button, Submit, Reset

 

The input element is also used to create buttons, which are specified using the type attribute:

  • button. Specifies a button to trigger a script
  • submit. Specifies a button to submit the form
  • reset. Specifies a button to reset the form controls to their initial values

 

 

Text Input

 

<input type=”text” />

 

The <textarea> form element allows multi-line text to be entered.

Attributes:

  • name: Specifies the name part of the name/value pair sent to the server
  • rows: Specifies the number of rows
  • cols: Specifies the number of columns

 

 

Radio buttons

 

<input type=”radio” />

 

Radio buttons allows the user to select ONLY ONE of a limited number of choices, and therefore the name attribute should be set to the same value for each input choice. The optional checked attribute provides a default selection:

 

 

Check Boxes

 

<input type=”checkbox” />

 

Check boxes allow more than one selection to be made. The optional checked attribute provides a default selection:

 

 

Select Boxes

 

<select name=”dropdown”>

 

The <select> box is used to provide a drop down selection of choices, which are defined by its <option> elements.

 

Select attributes:

  • name: Specifies the name for the control
  • size: This Used to present a scrolling list box
  • multiple: Allows a user to select multiple items from the dropdown

Option attributes:

  • value: Value sent to the server if this option is selected
  • selected: Specifies this option should be initially selected when the page loads
  • label: An alternative way of labeling options

 

Important: remember to provide a name/value pair to the <select> element so that the value can be sent to the server!

 

 

 

Hidden Controls

 

<input type=”hidden” />

 

Allows values to be passed to a form without being seen in browser. Useful to pass temporary or session data between forms, or perhaps as a temporary store for information already entered by the user.

 

 

 

File Select Boxes

 

<input type=”file”>

 

Allows the user to select a file from their local machine and upload it to the server.

 

<iframe> Element

Allows the browser to display another web page document within the current document.

 

<iframe src=”URL”></iframe>

 

Attribute Description Value
src Specifies URL for image “http://www.site.com” or relative URL “/nextpage.php
name Specifies the name of the iframe User defined text
width Specifies the width User defined number of pixels, e.g. 400px, or % screen e.g. 50%
height Specifies the height User defined number of pixels, e.g. 400px
frameborder Specifies to display a border around the iframe 0 or 1
class Specifies the class name to be used for CSS styling User defined class name
id Specifies the unique id for CSS or Scripts User defined unique text id
longdesc Specifies a separate page that contains a long description “http://www.site.com/description.php” or relative URL “/description.php”
scrolling Specifies whether scrollbars should be used yes, no, auto

 

 

An iframe can be used as the target frame for a link by setting the target attribute of the link to the name attribute of the iframe:

Entities

Since the browser parses some special character symbols, such as < and >, as having special meaning (in this case to be used with element tags), character entities (/symbols) are used.

 

  • Entities begin with an ampersand &
  • Followed by the entities name, or code, e.g. copy or 169
  • Finished with a semicolon  ;

 

Example:

&copy;  or  &169; will produce ©

 

ISO 885901 character set

 

Character Description Entity Name Number Code
quotation mark &quot; &#34;
apostrophe &apos; &#39;
& ampersand &amp; &#38;
< less-than &lt; &#60;
> greater-than &gt; &#62;

 

ISO 8859-1 Symbol Entities

Character Description Entity Name Number Code
non-breaking space &nbsp; &#160;
¡ inverted exclamation mark &iexcl; &#161;
¤ currency &curren; &#164;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
¦ broken vertical bar &brvbar; &#166;
§ section &sect; &#167;
¨ spacing diaeresis &uml; &#168;
© copyright &copy; &#169;
ª feminine ordinal indicator &ordf; &#170;
« angle quotation mark (left) &laquo; &#171;
¬ negation &not; &#172;
soft hyphen &shy; &#173;
® registered trademark &reg; &#174;
trademark &trade; &#8482;
¯ spacing macron &macr; &#175;
° degree &deg; &#176;
± plus-or-minus &plusmn; &#177;
² superscript 2 &sup2; &#178;
³ superscript 3 &sup3; &#179;
´ spacing acute &acute; &#180;
µ micro &micro; &#181;
paragraph &para; &#182;
· middle dot &middot; &#183;
¸ spacing cedilla &cedil; &#184;
¹ superscript 1 &sup1; &#185;
º masculine ordinal indicator &ordm; &#186;
» angle quotation mark (right) &raquo; &#187;
¼ fraction 1/4 &frac14; &#188;
½ fraction 1/2 &frac12; &#189;
¾ fraction 3/4 &frac34; &#190;
¿ inverted question mark &iquest; &#191;
× multiplication &times; &#215;
÷ division &divide; &#247;

ISO 8859-1 Character Entities

Character Description Entity Name Number Code
À capital a, grave accent &Agrave; &#192;
Á capital a, acute accent &Aacute; &#193;
 capital a, circumflex accent &Acirc; &#194;
à capital a, tilde &Atilde; &#195;
Ä capital a, umlaut mark &Auml; &#196;
Å capital a, ring &Aring; &#197;
Æ capital ae &AElig; &#198;
Ç capital c, cedilla &Ccedil; &#199;
È capital e, grave accent &Egrave; &#200;
É capital e, acute accent &Eacute; &#201;
Ê capital e, circumflex accent &Ecirc; &#202;
Ë capital e, umlaut mark &Euml; &#203;
Ì capital i, grave accent &Igrave; &#204;
Í capital i, acute accent &Iacute; &#205;
Î capital i, circumflex accent &Icirc; &#206;
Ï capital i, umlaut mark &Iuml; &#207;
Ð capital eth, Icelandic &ETH; &#208;
Ñ capital n, tilde &Ntilde; &#209;
Ò capital o, grave accent &Ograve; &#210;
Ó capital o, acute accent &Oacute; &#211;
Ô capital o, circumflex accent &Ocirc; &#212;
Õ capital o, tilde &Otilde; &#213;
Ö capital o, umlaut mark &Ouml; &#214;
Ø capital o, slash &Oslash; &#216;
Ù capital u, grave accent &Ugrave; &#217;
Ú capital u, acute accent &Uacute; &#218;
Û capital u, circumflex accent &Ucirc; &#219;
Ü capital u, umlaut mark &Uuml; &#220;
Ý capital y, acute accent &Yacute; &#221;
Þ capital THORN, Icelandic &THORN; &#222;
ß small sharp s, German &szlig; &#223;
à small a, grave accent &agrave; &#224;
á small a, acute accent &aacute; &#225;
â small a, circumflex accent &acirc; &#226;
ã small a, tilde &atilde; &#227;
ä small a, umlaut mark &auml; &#228;
å small a, ring &aring; &#229;
æ small ae &aelig; &#230;
ç small c, cedilla &ccedil; &#231;
è small e, grave accent &egrave; &#232;
é small e, acute accent &eacute; &#233;
ê small e, circumflex accent &ecirc; &#234;
ë small e, umlaut mark &euml; &#235;
ì small i, grave accent &igrave; &#236;
í small i, acute accent &iacute; &#237;
î small i, circumflex accent &icirc; &#238;
ï small i, umlaut mark &iuml; &#239;
ð small eth, Icelandic &eth; &#240;
ñ small n, tilde &ntilde; &#241;
ò small o, grave accent &ograve; &#242;
ó small o, acute accent &oacute; &#243;
ô small o, circumflex accent &ocirc; &#244;
õ small o, tilde &otilde; &#245;
ö small o, umlaut mark &ouml; &#246;
ø small o, slash &oslash; &#248;
ù small u, grave accent &ugrave; &#249;
ú small u, acute accent &uacute; &#250;
û small u, circumflex accent &ucirc; &#251;
ü small u, umlaut mark &uuml; &#252;
ý small y, acute accent &yacute; &#253;
þ small thorn, Icelandic &thorn; &#254;
ÿ small y, umlaut mark &yuml; &#255;

Other Entities:

Character Description Entity Name Number Code
Πcapital ligature OE &OElig; &#338;
œ small ligature oe &oelig; &#339;
Š capital S with caron &Scaron; &#352;
š small S with caron &scaron; &#353;
Ÿ capital Y with diaeres &Yuml; &#376;
ˆ modifier letter circumflex accent &circ; &#710;
˜ small tilde &tilde; &#732;
en space &ensp; &#8194;
em space &emsp; &#8195;
thin space &thinsp; &#8201;
zero width non-joiner &zwnj; &#8204;
zero width joiner &zwj; &#8205;
left-to-right mark &lrm; &#8206;
right-to-left mark &rlm; &#8207;
en dash &ndash; &#8211;
em dash &mdash; &#8212;
left single quotation mark &lsquo; &#8216;
right single quotation mark &rsquo; &#8217;
single low-9 quotation mark &sbquo; &#8218;
left double quotation mark &ldquo; &#8220;
right double quotation mark &rdquo; &#8221;
double low-9 quotation mark &bdquo; &#8222;
dagger &dagger; &#8224;
double dagger &Dagger; &#8225;
horizontal ellipsis &hellip; &#8230;
per mille &permil; &#8240;
single left-pointing angle quotation &lsaquo; &#8249;
single right-pointing angle quotation &rsaquo; &#8250;
euro &euro; &#8364;

URL Encoding

Since URLs can only be sent over the internet using ASCII characters it is often necessary to convert characters outside the ASCII set into a valid format.

 

URL encoding replaces non ASCII characters with a % followed by two hexadecimal digits, e.g. %20 would replace a space.
Example:

http://www.site.com/new%20page.php

 

Which would retrieve the “new page.php” from http://www.site.com

 

 

URL Encoding Reference

 

Character URL-encoding
space %20
! %21
%22
# %23
$ %24
% %25
& %26
%27
( %28
) %29
* %2A
+ %2B
, %2C
-- %2D
. %2E
/ %2F
0 %30
1 %31
2 %32
3 %33
4 %34
5 %35
6 %36
7 %37
8 %38
9 %39
: %3A
; %3B
< %3C
= %3D
> %3E
? %3F
@ %40
A %41
B %42
C %43
D %44
E %45
F %46
G %47
H %48
I %49
J %4A
K %4B
L %4C
M %4D
N %4E
O %4F
P %50
Q %51
R %52
S %53
T %54
U %55
V %56
W %57
X %58
Y %59
Z %5A
[ %5B
\ %5C
] %5D
^ %5E
_ %5F
` %60
a %61
b %62
c %63
d %64
e %65
f %66
g %67
h %68
i %69
j %6A
k %6B
l %6C
m %6D
n %6E
o %6F
p %70
q %71
r %72
s %73
t %74
u %75
v %76
w %77
x %78
y %79
z %7A
{ %7B
| %7C
} %7D
~ %7E
%7F
` %80
 %81
%82
ƒ %83
%84
%85
%86
%87
ˆ %88
%89
Š %8A
%8B
Π%8C
 %8D
Ž %8E
 %8F
 %90
%91
%92
%93
%94
%95
%96
%97
˜ %98
%99
š %9A
%9B
œ %9C
 %9D
ž %9E
Ÿ %9F
%A0
¡ %A1
¢ %A2
£ %A3
¤ %A4
¥ %A5
¦ %A6
§ %A7
¨ %A8
© %A9
ª %AA
« %AB
¬ %AC
%AD
® %AE
¯ %AF
° %B0
± %B1
² %B2
³ %B3
´ %B4
µ %B5
%B6
· %B7
¸ %B8
¹ %B9
º %BA
» %BB
¼ %BC
½ %BD
¾ %BE
¿ %BF
À %C0
Á %C1
 %C2
à %C3
Ä %C4
Å %C5
Æ %C6
Ç %C7
È %C8
É %C9
Ê %CA
Ë %CB
Ì %CC
Í %CD
Î %CE
Ï %CF
Ð %D0
Ñ %D1
Ò %D2
Ó %D3
Ô %D4
Õ %D5
Ö %D6
× %D7
Ø %D8
Ù %D9
Ú %DA
Û %DB
Ü %DC
Ý %DD
Þ %DE
ß %DF
à %E0
á %E1
â %E2
ã %E3
ä %E4
å %E5
æ %E6
ç %E7
è %E8
é %E9
ê %EA
ë %EB
ì %EC
í %ED
î %EE
ï %EF
ð %F0
ñ %F1
ò %F2
ó %F3
ô %F4
õ %F5
ö %F6
÷ %F7
ø %F8
ù %F9
ú %FA
û %FB
ü %FC
ý %FD
þ %FE
ÿ %FF

<hr> Element

The <hr /> element provides a horizontal rule across the document.

 

An example of two horizontal rules



Use the width attribute to set the width, e.g. <hr width=”60%” />

 


Style

Styling can be applied by using:

  • External CSS style sheet . Preferred method!
  • Internal CSS style sheet, using the <style> element in the head section of the document
  • Inline style attribute
  • Scripting

 

 

External Style Sheet

 

Using a <link> tag in the head section of the document:

 

 

Internal Style Sheet

 

Defined in the <head> section of the document, using the <style> element:

 

 

Inline styling

 

Defined by applying the style attribute within an element, e.g.

 

<p style=”color: blue; font-size: 2em;”>My text goes here.</p>

 

Will render as My text goes here.

 

Scripts

To use JavaScript in a web page, the <script> element tags are used.

 

Strictly speaking, the TYPE attribute should be set to ‘application/javascript’, but since that doesn’t work in IE it is more common to either find ‘text/javascript’ or nothing.

 

It is recommended to hide the script content from older browsers that do not support javascript to stop them simply displaying the code. This is achieved by commenting out just before the script content, causing older browsers to ignore the script whilst newer browsers will run it.

 

Also, you may sometimes find // <! [CDATA[ just after the opening <script> tag and its associated // ]]> just before the closing </script> tag. These commented out lines inform XHTML supporting browsers that the content of the script is character data and should not be interpreted as XHTML markup, and are generally not bothered with but is good to know just in case.

 

Save & refresh browser:

Javascript goes here!

 

 

If JavaScript is not enabled or the browser does not support JavaScript, a message can be displayed to the user using the <noscript> element, and is generally placed after the <script> tags, like so:

Save & refresh browser:

Please enable JavaScript, or try a JavaScript enabled browser.

 

 

JavaScript is executed by the browser at the first statement and moves down continuing to execute each statement as it comes to it.

 

Placement

 

Scripts can be placed in:

  • <head> </head>
  • <body> </body>
  • <head> </head> and <body> </body>
  • External file, often append .js

 

Recommended to place at the end of the html just before the closing </body> tag, since this allows the browser to render the html in the page, and not be slowed up by a potentially long waiting bottleneck for a piece of JavaScript to finish before it renders the rest of the page.

 

General rule of thumb css at the top, JavaScript at the bottom.

 

 

<head>

This example, contained within<head> tags, will show that the browser pauses execution waiting for the OK button to be clicked until it continues rendering the rest of the page:

 

 

<body>

Whereas, this example will show the rendered page in the background and then executes the JavaScript pausing the browser wisitng for the OK button to be clicked:

 

 

Full Javascript code written within the html is referred to being inline (i.e. within the rest of the html code). Whilst this might be fine for small snippets, functions or testing purposes it is recommended for larger JavaScripts to use an external file. This also has the added benefit of allowing code reuse as other file might require access to it.

 

External file

Since the length and complexity of the JavaScript may be unwieldy, and potentially used by other pages, it is recommended to use an external files for your JavaScript.  To use an external file, the file’s source name is specified within the opening <script> tag’s src attribute

e.g.

<script src=”fileName.js”></script>

 

The preferred convention is to use a .js extension for JavaScript files.

 

Given this simple external javascript file:

This can now be called into the html file as follows:

*note: path is relative to calling file