HTML5 Elements continued

Tables

A table represents information in a grid format. Tables are common in documents, for example, displaying schedules and financial reports.

 Tables are made of cells, where each cell is a single entry in the table.

A vertical collection of cells is called a column and a horizontal collection of cells is a row. 

When a table is defined in HTML the table is described row by row.

Tables in HTML are defined using three HTML elements; table,tr and td. 

The table element is the container for a collection of row. 

The tr element defines a table row which is a horizontal collection of cells. 

The tr element is in turn a collection of td elements. Each of the td elements defines an individual cell in the table.

Without headings a table is not complete.

 The th element stands for table head and provides a means of defining headings in a table. These headings might be at the top of a column or might be at the start of a row. The default display for a table heading is to display the text enclosed in the th element as bold. This default behaviour can be overridden in CSS.

Sometimes it is required to sketch a cell over multiple columns or multiple rows. 

This can be achieved through the colspan and rowspan attributes of the td and th. The attribute should have the value of the number of columns or rows that the cell should span.

There are three elements that help to distinguish the different between the main content of a table and its head and foot. These elements are tbody,thead and tfoot. These elements can be styled using CSS.

Flash, Video and Audio

Flash is a dated technology which is currently still used, however it is 'on the way out'. The technology is now not supported by a variety of popular browsers. This problem is alleviated by the introduction in HTML5 of the video and the audio elements. Between the two new elements they cover most of the common use cases of Flash. For the other use cases JavaScript has developed to take its place. When Flash is displayed in a browser, the actual display of the Flash content is delegated to a Flash player. This is one of the downsides to Flash, it requires an addition piece of software. This downside is overcome by JavaScript Flash Players.

<html>
    <head>
        <title>Adding a Flash Video</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
        <script type="text/javascript">
            var flashvars = {};
            var params = {
            movie:"cute_kitten.flv" };
            swfobject.embedSWF("flash/osplayer.swf", "kitten", "400", "345", "8.0.0", flashvars, params);
            </script>
    </head>
    <body>
        <div id="kitten">
            <p>A video of cute kittens</p>
        </div>
    </body>
</html>

An alternative method of displaying videos on a website is to use a hosted video service (such as YouTube and Vimeo). Typically these videos embed using the iframe element.

In HTML5 a set of new elements have been introduced. 

The video and audio elements provide the ability to embed video and audio into a web page. These element have native support in most modern browsers that means no addition software must be installed nor do extra libraries ave to be loaded. To configure how the video and audio element types make extensive use of attributes. A complete list of the available attributes can be found in the HTML Reference section. The src attribute is a URL of the video to play, this can either be relative or an absolute URL.

<video src="kittens.mp4"
    preload
    controls
    loop>
    <p> A video of kittens</p>
</video>

Including audio on a web page is similar to including a video. The audio element is used. Again attributes are used to configure the playback of the audio.

<audio src="meow.ogg"
    controls
    autoplay>
    <p>This browser does not support ogg format.</p>
</audio>

Other HTML Elements

The are some HTML elements that do not fit into any of the previous categories. These elements are contains or implement useful features.

Document type

As there are many different versions of HTML it is important to ensure that the browser is aware of which version of HTML it is about to read.

 This is provided by the DOCTYPE element. Each version of HTML has a different doctype. 

Below are a list of example doctypes. In this module HTML5 is used and therefore the HTML5 doctype should be used.

<!-- HTML5 -->
<!DOCTYPE html>

<!-- HTML4.01 strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">

<!-- HTML4.01 transitional -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">

<!-- HTML4.01 frameset -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "//www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML1.0 strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- XHTML1.0 transitional -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML1.0 frameset -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!-- XHTML1.1 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Comments

It is sometimes a good idea to provide a comment in the source code for an HTML document to help the next developer who has to work on the website. The comments often describe what the following set of elements do or explain a design decision. Comments are common in most languages (including programming languages). Comments in HTML are provided by a strange looking element. The element does not have a name - instead it is a sequence of punctuation. The !-- element facilities comments. Comments are not displayed on the web pages but they are visible in the source code for a web page.

<!-- This is a comment in HTML, the browser does not render it in the web page -->

Global attributes

Some HTML elements have attributes which provide addition configuration for that specific element but all HTML elements have a set of attributes which can be configured on them. These attributes are called global attributes.

Attribute	Description	Possible values
id	Identifies a unique element. The value of id can be used by CSS or JavaScript to reference that element. Links can also point directly to an element with a specific id.	Text, excluding spaces. The value of the id attribute must be unique.
class	Used to reference elements, by CSS, for example. Any number of elements can have the same value (unlike id).	Text. Multiple classes can be applied by separating them with spaces.
title	Adds additional advisory information to an element.	Text.
style	Applies inline CSS.	CSS declarations.

Block elements

Some of the elements that have been covered have different behaviours when they are displayed. Some elements always appear at the start of a new line. These types of elements are called block level elements.

 Examples of such elements are h1, p, ul and li.

Each of the HTML elements in the example above are block elements and therefore they start a new line. In the example above each of the blocks elements has been coloured to illustrate that each element starts a new line.

Inline elements

In a similar manner to block level elements, there are elements in HTML that do not start a new line when they are displayed. These elements are called inline elements. These elements are displayed inline where they appear in the HTML source code.

 Examples of such elements are a, b, em,strong,del,ins and img.

Each of the HTML elements in the example above are inline elements and therefore they do not start a new line, instead they are displayed inline with the text. In the example above each of the blocks elements has been coloured to illustrate that each element does not starts a new line.

Grouping elements together

The next HTML elements are perhaps the most important elements in HTML. They allow groups of HTML elements to be grouped together and treated like a single large element. This is useful when trying to layout a web page in a particular way.

 These elements are called div and span.

 The div element is a block level HTML element and allows elements to be nested within it, all of the nested elements can then be formatted and styled in a similar way.

The other element is the span element. The span element is similar to div except it is an inline element.

iframes

An iframe is like a miniature window embedded within a web page. The window may be any other website located either on the same server or elsewhere on the internet. The iframe element uses attributes to configure the page to be loaded and the size of the 'miniature window'.

Meta information

The meta element always resides inside the head element at the top of the HTML document and contains information about the HTML document. The content of the meta does not display to the user. The meta element is one of the HTML elements that is self closing, as such no elements or text should be nested inside a meta element. There are many different uses of meta elements but usually it is used to define the purpose of the web page, whether the web page should be cache and which character set the web page will use.

<head lang="en">
    <meta charset="utf-8">
    <meta name="description" content="Introduction to web technologies content">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="Dr Samuel Wilson">
</head>

For a complete list of attributes for the meta element see the HTML reference section.

CSS3 continued

In the previous section we introduced a set CSS selectors. We introduce some more CSS selectors, the new selectors allow the selection of elements based on their attribute values.

Selector	Example	Example description
Existence selector	p[class] { }	Applies to all elements in the HTML document with a specific attribute. In the example any p element with a class attribute set will have the CSS rule applied.
Equality selector	p[class="someclass"] { }	Applies to all elements in the HTML document with a specific attribute set to a specific value. In the example any p element with a class attribute set to the value someclass will have the CSS rule applied.
Space selector	p[class~="someclass"] { }	Applies to all elements in the HTML document where a specific value appears in a space separated list of a specified attribute. In the example any p element with a class attribute have the value someclass will have the CSS rule applied.
Prefix selector	p[attr^="d"]{ }	Applies to all elements in the HTML document where an attribute value starts with a specified value. In the example any p element with an attribute value statring with d.
Substring selector	p[attr*="d"]{ }	Applies to all elements in the HTML document where an attribute value contains a specified value. In the example any p element with an attribute value contain d.
Suffix selector	p[attr$="d"]{ }	Applies to all elements in the HTML document where an attribute value ends with a specified value. In the example any p element with an attribute value ending with d.

Boxes

As CSS treats all HTML elements as boxes there are a number of ways that those boxes can be styled. In this section we will look at the styling options for boxes.

Width & Height

The width and height properties are used to specify the width and height of a box. The value of this property is a dimension, either in pixels, as a percentage of the parents size or relative to some fixed value.

Minimum/Maximum width

The min-width and max-width properties are used to specify the minimum width and the maximum width respectively. These properties are used to ensure that a box does not stretch or shrink past a suitable size, these properties are particularly useful when ensure users with small screens are not disadvantages by their hardware. The value of of these properties is a dimension.

Minimum/Maximum height

The min-height and max-height properties are used to specify the minimum height and the maximum height respectively. These properties are used to ensure that a box does not stretch or shrink past a suitable size, these properties are particularly useful when ensure users with small screens are not disadvantages by their hardware. The value of of these properties is a dimension.

Overflow

The overflow property is used determine the behaviour if the content contained in the element is too much to be displayed in the given area. The value for this property is either hidden or scroll. If the property is set to hidden then the extra content is hidden from the user. If the property is set to scroll then a scrool bar is added to the container.

Borders, Padding & Margins

Every box has three available properties that can be used to specify the appearance. 

They are the border, margin and padding. 

The border separated the edge of one box from the edge of another box. 

The margin is the area outside of the border, changing this property creates a gap between boxes. 

The padding is the gap inside of the border between the border and the content on the box.

The border-width property is used to specify the width of the border. The value of this property can either be a dimension or can be one of the following predefined value; thin,medium or thick. This property will change all four borders of a box. There are properties that allow the specification of individual borders. They are border-top-width,border-bottom-width,border-right-width and border-left-width which change the top, bottom, right and left border width respectively.

The border-style property is used to specify the style of the order. The value of this property is one of either solid, dotted, dashed, double, groove, ridge, inset, outset, hidden or none. There are properties that allow the specification of individual borders. They are border-top-style,border-bottom-style,border-right-style and border-left-style which change the top, bottom, right and left border style respectively.

The border-color property is used to specify the colour of the border. The value of this property is a color. This property will change all four borders of a box. There are properties that allow the specification of individual borders. They are border-top-color,border-bottom-color,border-right-color and border-left-color which change the top, bottom, right and left border colours respectively.

The padding property is used to specify the gap between a box's border and its content. The value of this property is a dimension. This property will change all four paddings of a box. There are properties that allow the specification of individual paddings. They are padding-top,padding-bottom,padding-right and padding-left which change the top, bottom, right and left paddings respectively.

The margin property is used to specify the gap between boxes. The value of this property is a dimension. This property will change all four margins of a box. There are properties that allow the specification of individual margins. They are margin-top,margin-bottom,margin-right and margin-left which change the top, bottom, right and left margins respectively.

In order to center a box on the page or in its parent element the auto value is used. The margin-left and margin-right properties should be set to auto. In order for this to have the desired effect the width property of the box should be set to some value.

The display property is used to specify if the element should be displayed inline or as a block. The value of this property is either inline, block,inline-block or none. The inline value causes the element to be displayed as an inline element. The block value cases the element to be displayed as an block levele element. The inline-bock value causes the element yo flow like an inline element but retain other features of a block level element. The none value hides the element from the display.

The visibility property is used to set the visibility of an element. The value of this property is either hidden or visible (these values require no explanation). When hidden is used space is left where the element would have been.

The border-image property is used to specify an image to be used as the border. The value of the property requires three pieces of information. The URL of the image to use. Where to slice the image and what should happen along the straight edge.

The border-radius property is used to specify the radius of the corners of a box. This property allows for rounded corners on boxes. The value of the property should be a dimension.This property will change all four corners of a box. There are properties that allow the specification of individual corners. They are border-top-right-radius,border-top-left-radius,border-bottom-right-radius and border-bottom-left-radius which change the top right, top left, bottom right and bottom left corners respectively.

Images

The width and height properties of an image control the width and height of the image. The value of these properties should be dimensions.

The float property is used to specify if the element should float. Simply the property is used to make text wrap around elements. The value of the property is one of; none,left,right, inherit, initial or unset. The float property on an img element can used to position the image on the page.

To center an img element the img element must be set to be a block level then the margin-left and margin-right properties of the img element should be set to auto.

The background-image property is used to specify a background image of the element. The value of the property should be a URL to the background image.

The background-repeat property is used to specify if the background image should repeat. The value of the property should be one of the follow; repeat,repeat-x,repeat-y or no-repeat.

The background-attachment property is used to specify if the background image should scroll or not as the user scrolls down the page. The value of this property is either fixed or scroll.

The background-position property is used to specify where in the browser the background image should be placed. The value of this property is one of the following: left top, left center, left bottom, center top, center center, center bottom, right top, right center or right bottom.

Tables & Lists

Lists

The list-style-type property is used to specify the bullet type. For unordered lists the value of this property is either none, disc, circle or square. For ordered lists the value of this property is either decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman or upper-roman.

Alternative it is possible to specify an images that should be used as a bullet point. The list-style-image provides this feature. The value of this property should be a URL to the image.

The list-style-position is used to specify if the list marker (either the number or bullet point) should be inside or outside the indentation. The value of this property is either inside or outside.

Tables

Tables have a number of CSS properties that can be set. Below is a table indicating the property, a description of the property and an explanation of the value the property can have.

Name	Description	Value
width	The width of the table.	A dimension.
padding	Sets the gap between the border of a cell and the content inside it.	A dimension.
text-transform	Specifies a text transformation on the text contained within the table.	uppercase, lowercase or capitalize
letter-spacing	Specifies the spacing between letters.	A dimension.
font-size	Specifies the font size.	A dimension.
border-top, border-bottom	Specifies the top and bottom border.	A dimension.
text-align	Specified the text alignment.	left, right, center or justify
background-color	Specifies the background colour.	A colour.
:hover	To highlightg a row when a user hovers over it.	N/A

The empty-cells property specifies if the borders of empty cells should be shown. The value of this property should be either show,hide or inherit.

The border-spacing property specifies the distance between adjacent cells. The value of this property should be a distance.