This is down to changes that were made for new versions of ZPE.
The previous article describes the simple elements of HTML. This article describes the more 'complex' structures of HTML, particularly those that involve nesting such as tables and lists. To start with, let's look at tables.
Tables are a crucial part of HTML. Not only are tables a way of representing data, back in the day, websites were formed using tables. The design of my site where the page is in the middle could be made with tables (when I was naive as a web developer, back in 2012, I was accustomed to the use of table designed websites as I had not touched HTML since about 2004 properly).
Table designs can look something like this below:
|This is where the main content will go.|
With the advent of CSS, this is no longer the case and tables have become a tool simply for tabular data.
Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!
Back in the early 21st century all websites were designed this way. But with CSS getting more and more advanced year after year, it is now possibly to build better layouts without needing tables.
Table layouts are not useless. In some cases where CSS is not permitted, for instance in some software programs HTML is used for the help files, and the browser built-in is highly limited (as some environments provide limited browsers) and so CSS may be very limited. In such a case, table layouts can be useful.
Tables are one of the more complex elements to construct parts of HTML. A table consists of a table, row and a column, ordered as that. A table can be constructed as with the following sample:
<table> <tr> <td> First column, first row </td> <td> Second column, first row </td> </tr> <tr> <td> First column, second row </td> <td> Second column, second row </td> </tr> </table>
The result is displayed below:
|First column, first row||Second column, first row|
|First column, second row||Second column, second row|
Tables need not follow a table structure where the number of columns per row is the same for each row. They can be displayed without this.
The following table shows how to construct a table in summary:
|HTML tags||Name and definition|
||Table. Constructs a new table.|
||Table row. This represents a new table row containing columns.|
||Table data. This represents a table column.|
||Table heading. This is a column of significance.|
Tables can also contain divisions to represent the body and head
of the table and some JQuery table sorting algorithms require this,
although these have since been deprecated as of HTML5. These were
In general, a list is a very structured way of displaying information.
In HTML, it is also considered the same. So much so that the HTML
specification deprecated the
<menu> element in favour
of the list element for creating menus. Most of today's menus are
formed using the list pattern, implementing an unordered list.
<menu> tag has disappeared from the
HTML specification, it has been replaced by the
<ul> tags as a combination. A
should be encapsulated in the
<nav> element to
inform search engines and the like that it is indeed reading
a menu. This allows the search engine to crawl pages using the
navigation of the site.
There are three types of list; unordered lists, ordered lists and description lists. All of these lists are fully customisable to the degree that bulleting etc can be defined. This is done with CSS and will be covered in the later part of this tutorial.
Lists themselves are defined as a list of elements. Each element is a leaf (that is the last element of the document tree) or another list. This means that lists can have lists nested within them, thus creating a structure tree of lists.
The three types of lists can be represented using the following tags:
|HTML tags||Name and definition|
||Unordered list. As the name suggests, a list intended for elements where order or count is not important|
||Ordered list. A list where ordering or count is important.|
||Description list. Also known as a definition list because it defines information about an item.|
Both of these lists follow exactly the same structure. These
lists contain a sub item called a list item, represented by
<li>. Below is an example of each in action:
<ul> <li>First item in the list</li> <li>Second item in the list</li> </ul>
The bullets can be customised for an unordered list so that Roman Numerals can be used for instance. This is covered in the CSS tutorial.
An ordered list differs from the unordered list because of it's structure. The code is identical for both, but the purpose of an ordered list is to show a list with numbers.
It is important to note that an ordered list does not represent one where the elements are ordered automatically, it is simply a list with numbers instead of bullets.
<ol> <li>First item in the list</li> <li>Second item in the list</li> </ol>
The formatting of the numbers can be changed for an ordered list.
A description or definition list defines an item and information about the item that is specified. It works much like a dictionary or a hash dictionary.
As such, it is started with the
<dl> tag and terminated
</dl> tag. It is different to the other two
lists because it defines information about the item as another element.
|HTML tags||Name and definition|
||Description list. Starts a new description list.|
||Description term. Contains the term.|
||Description definition. Defines the term before.|
The coupling of both the
<dd> elements permits them
to display as a relation.
<dl> <dt>USB 1.1</dt> <dd>12Mbps</dd> <dt>USB 2.0</dt> <dd>480Mbps</dd> <dt>USB 3.0</dt> <dd>5Gbps</dd> <dt>FireWire 400</dt> <dd>400Mbps</dd> <dt>Thunderbolt</dt> <dd>10Gbps</dd> <dt>Thunderbolt 2</dt> <dd>20Gbps</dd> <dt>Thunderbolt 3</dt> <dd>40Gbps</dd> </dl>
It might be a good idea to split each term and definition combination with a space preceding or succeeding it, this way terms will not get as confusing when reading back the HTML or when adding more terms.
Divisions or dividers are used to show seperate sections of HTML.
They contain further HTML as a group of HTML elements. Divisions
can be used to represent different things, for instance, this website
has one central division called
#container that contains the content
of the website, on the desktop this looks like a central page, on
tablet and smartphone it is 100% of the screen and print it is also
100% of the page width.
Divisions can be styled in so many ways that it is one of the most useful elements available.
The division element is the opposite of the span element in that a division displays as a block whereas span is an inline element.
Divisions are represented by the
<div> element in
<html> <head> <title>Website</title> </head> <body> <div id="maincontent"> <p>This is a piece of text inside the maincontent div.</p> </div> <div id="secondcontent"> <p>This is a piece of text inside the secondcontent div.</p> </div> </body> </html>
This is a piece of text inside the maincontent div.
This is a piece of text inside the secondcontent div.
Notice that divisions have a space between them by default.
Divisions have no borders or appearance until styled. CSS is used to do this. This tutorial will cover styling elements to make divisions look more attractive.
As mentioned, a span is the opposite of a division in that it is displayed inline rather than as a block. Spans can be used inside paragraphs for this reason such that they can style text.
As mentioned in this tutorial a few sections back, HTML font faces were covered so that bold and italic can be applied to text. The span element can do the same. If we define a span element that makes text green when it is applied to the text.
The span element is represented in HTML as
For the following sample, assume we have defined a class of span
ourSpan'. This class defines that the contents will go blue
<p>This is the text <span class="ourSpan">here</span>is blue and italic.</p>
This will place the word here under the effect of our span. Notice that it has been inlined, meaning it follows the natural structure of the paragraph element. Below is a preview of this.
This is the text here is blue and italic.
Sometimes parts of websites can be presented other web pages contained within them, for instance, dynamic parts of a website. As such, the HTML specification defines inline frames for this purpose. Inline frames can be made to look a part of the page so that they look like they are just divisions on the page. For this HTML provides a reasonably powerful set of attributes for the inline frame.
Inline frames are particularly useful in certain areas of the web where requesting data from a website cannot be hotlinked, such as a YouTube video or a Facebook Like Button.
In HTML, an inline frame is represented using the
tag. Just like an image, an inline frame has a
attribute. Below is a sample inline frame.
<html> <head> <title>Inline frame sample</title> </head> <body> <iframe src="sample.html"></iframe> </body> </html>
Inline frames can also be given other attributes as specified
by the W3. Such attributes include the
seamless attribute specifies how the
inline frame integrates into the page. If the
attribute is applied to the inline frame, it appears to be part
of the page. Both the HTML and XHTML syntaxes are shown below:
<html> <head> <title>Inline frame sample</title> </head> <body> <iframe src="sample.html" seamless></iframe> </body> </html>
<html> <head> <title>Inline frame sample</title> </head> <body> <iframe src="sample.html" seamless="true"/> </body> </html>
Notice that in XHTML the attributes need a value. This was mentioned in the earlier part of this tutorial.
srcdoc attribute specifies the HTML of the inline
view for instance for creating a page that is generated from HTML
pages in a sandboxed manner such that the page cannot interfere
with the main page.
srcdoc is not supported in any version of Internet
Explorer up to version 11.
The following sample shows how this achieved and a preview of it in action.
<html> <head> <title>Inline frame sample</title> </head> <body> <iframe srcdoc="<html><head><title>Sample page</title></head><body><p>This is a <code>srcdoc</code> page</p></body></html>"></iframe> </body> </html>
The final attribute mentioned in this article is that of
sandbox. The sandbox attribute on the inline frame
element allows sandboxing to be applied.
Inline frames apply this using the
with a value from the table below:
||Applies all restrictions|
||Allows the iframe content to be treated as being from the same origin as the containing document|
||Allows the iframe content to navigate (load) content from the containing document|
||Allows form submission|
||Allows script execution|
The following sample demonstrates how to use this:
<html> <head> <title>Inline frame sample sandboxed</title> </head> <body> <iframe sandbox="allow-same-origin"></iframe> </body> </html>
S1s and S2s really enjoyed the lesson on cybercrime using the lesson on How to Rob A Bank on… https://t.co/MxjDYE2JFu
9 months ago
S2s doing really well in hardware test! Also really enjoying doing tests electronically rather than on paper.… https://t.co/ritdfcW6Mw
9 months ago
S1 and S2 pupils listing input and output devices and giving answers such as keyboard and mouse but there were also… https://t.co/dGxDkYqFxo
9 months ago