Web development layers

A web page is built in three web development layers. Each layer has its own job.

The content layer enters the content and creates the structure. The presentation layer displays and formats the elements. The behaviour layer uses a scripting language to control the elements.

Name the layer, then describe what it does. A name is not a description.

The content layer is used to enter the content and create the structure of a web page. The content is the text and images of the page. HTML is used in this layer.

Saying only that it lets you enter content repeats the name of the layer. Say what is entered, and say that the layer creates the structure.

The presentation layer is used to display and format elements within a web page.

A stylesheet is used in this layer. It sets the style of the elements.

The name is misleading. This layer is not 'what the audience sees'. It is the layer that formats the elements.

The behaviour layer is for a scripting language to control elements within a web page.

The content layer holds the elements and the presentation layer formats them. The behaviour layer is the one that controls them.

Do not give the behaviour layer for anything typed into a web page. It is the answer only where a script controls an element.

A style can be set in two places in the presentation layer. An attached stylesheet is a separate file, linked in the header of the web page. An inline style attribute is written in the web page, at the position where it is needed.

An attached stylesheet applies to the whole page and is easier to reuse on many pages. An inline style has to be entered each time it is used. If the two disagree, the inline style has the higher priority.

A web page has two sections. The head section holds the page title, links to external stylesheets, metatags and the default target window. The body section holds the content the user sees.

The page title is shown in the browser. Metatags describe the page. `charset` defines the character set. `description`, `keywords` and `author` give the summary, the search words and the writer. `viewport` makes the page display on all devices.

``` <head> <title>Skirting by Sam</title> <meta charset="utf-8"> <meta name="keywords" content="skirting,architrave,joinery"> <meta name="viewport" content="width=device-width, initial-scale=1"> <base target="_blank"> <link rel="stylesheet" href="style.css"> </head> ```

A table is built from rows `<tr>`, header cells `<th>` and data cells `<td>`. Tables structure the web page. They keep the display constant and make the output independent of the browser. A table can also combine different text alignments on the page.

Sizes are set in pixels or in per cent, for the table and for a cell. `colspan` makes a cell span more than one column. `rowspan` makes it span more than one row. Both go in the `<td>` or `<th>` tag, not in `<tr>`. A border value of 0 hides the borders.

``` <table width="85%" border="0"> <tr><td colspan="2">A</td></tr> <tr><td rowspan="2">B</td><td>C</td></tr> <tr><td>D</td></tr> </table> ```

Objects placed in a web page include text, images, sound clips and video. Every image needs alternate text that describes it. Alternate text is used if the image does not display and by users who cannot see it.

Set an image's size with an inline style such as `style="width:100%"`. For video, use the `<video>` tag with a separate `<source>` tag that holds `src` and `type`. Add `controls` to display the controls, `autoplay` to start it and `loop` to repeat it. Put the error message between `<video>` and `</video>`. It tells the user why the video does not play.

``` <img src="banner.jpg" alt="Pocket doors fitted in a kitchen" style="width:100%"> <video height="640" controls autoplay loop> <source src="tour.mp4" type="video/mp4"> Your browser does not support this video. </video> ```

Set only the height, here 640 pixels, and the aspect ratio is maintained.

Text is tagged to give it a pre-defined style: `<h1>`, `<h2>` and `<h3>` for headings, `<p>` for a paragraph and `<li>` for a list item. Text set in style h2 sits between `<h2>` and `</h2>`. `<br>` puts the text after it on a new line.

List items sit inside `<ol>` for an ordered list or `<ul>` for an unordered list. `<div>` groups elements so a style or a class can be applied to all of them. A class is named in the page, `<div class="offer">`, and its style is set once in the stylesheet.

``` <h2>Web page created by<br>A Student 1234 5678</h2> <ul> <li>Oak</li> <li>Glass</li> </ul> ```

A bookmark in a browser is a place holder for a web page. It stores the URL so the user can reach the page again quickly. It saves a link to the page, not the page itself.

A bookmark inside a web page is made with an `id` attribute on the element to jump to. A hyperlink then points to it with `#` and the same id.

``` <h1 id="Top">Fitter Flooring</h1> <a href="#Top">Return to top</a> ```

Copy the name exactly, capitals included.

A hyperlink is text or an image that connects to another resource when it is clicked. It can be attached to text, an image or a video.

An anchor is the tag `<a>` that makes the link. It links to a location on the same page or on a different web page. It lets users jump to a specific part of the page without scrolling. A long page can use one to link the bottom back to the top.

Set the anchor around the text or image that is the link: `<a>` before it and `</a>` after it. The `href` attribute holds the destination.

``` <a href="#Top">Return to top</a> <a href="skirting.htm" target="_new">Skirting</a> <a href="https://www.example.org">Our website</a> <a href="mailto:sbs@example.org?subject=Enquiry"><img src="contact.jpg" alt="Contact us"></a> ```

A link can go to a bookmark, a locally stored page, a website URL or an email address. A `mailto:` link uses `:` after mailto and `?subject=` before the subject. The `target` attribute opens the page in the same window, a new window or a named window. In a name such as `_blank` or `_new`, the underscore is part of the name.

A relative file path gives the place of a file from the page that uses it, such as `images/logo.jpg`. An absolute file path gives the full location of a file on one computer, such as `C:\Users\Sam\site\images\logo.jpg`.

An absolute path works on the author's computer only. It fails on a web server, so never use one for a link to a locally saved page or object.

Attach an external stylesheet in the head with a relative path. The order in which stylesheets are attached matters.

``` <link rel="stylesheet" href="css/style.css"> ```

A web page is built in layers. HTML is used in the content layer, which holds the structure of the page. A cascading stylesheet (CSS) is used in the presentation layer, which holds the style.

Styles are saved in cascading stylesheet format: a text file whose name ends `.css`. Do not confuse `.css` with `.csv`, a spreadsheet data file.

A stylesheet is attached to a web page in the head section of the HTML. The line names the file: `<link rel="stylesheet" href="styles.css">`.

Use a relative file path: only the file name, when the stylesheet is in the same folder as the page. A path that names drives and folders on your own computer works there only. It fails on another computer, or on a web server, where the file / folder structure is different.

The stylesheet holds CSS only. No HTML goes in it. Each rule gives a selector such as `h1`, `h2`, `h3`, `p` or `li`, then the settings in braces. A setting is a property, a colon, a value and a semicolon.

A comment starts with `/*` and ends with `*/`. Put your details in a comment where the question says, usually at the start of the file.

``` /* Name, centre number, candidate number */ p { color: #000099; } ```

`font-family` lists the fonts in the order the question gives, so the browser can choose from the list. Put speech marks round a font name of several words, such as `"Trebuchet MS"`. Do not put them round the generic `sans-serif` or `serif`. Capitalise font names: `Arial`, `Verdana`.

Set the size in points: `font-size: 20pt;`. Set colours as a hexadecimal code with a `#`. Alignment is `text-align: center;`, spelt `center`. Bold and italic are `font-weight: bold;` and `font-style: italic;`.

When styles share settings, use one combined selector:

``` h1, h2 { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 20pt; color: #000099; text-align: center; } ```

Set the page background in the `body` selector: `background-color: #...;`. A colour code is red, green, blue in that order. Swap the pairs and the colour changes.

Table settings go in the `table` selector: width, `border-spacing`, `border-collapse` and the margins. Cell settings go in the `td` selector: padding and borders. To centre the table in the window use `margin-left: auto;` and `margin-right: auto;`. `text-align` would move the text inside the cells instead.

To hide the borders, set `border: 0;` in both `table` and `td`.

An attached stylesheet is a separate file, applied to the whole web page and easy to reuse on many pages. An inline style attribute is written in the web page, at the position where it is needed: `<img src="logo.png" style="width:100%">`. It has to be entered each time it is used.

When the two disagree, the inline style has the higher priority. With several attached stylesheets, the one attached later has the higher priority. Extra styles in the head or inline, or styles an editor adds itself, can overwrite the attached stylesheet.

A style is a rule for an HTML tag, such as `h2` or `p`. It applies to every such tag in the page.

A class is a rule with a name of your own, written `.name` in the stylesheet. It applies only to the tags that are given that class: `<h2 class="name">`. Use a class when only some of the tags must look different.