Page Markup

[ Skip to content]

Science and Engineering at The University of Edinburgh

School of GeoSciences

Site Documentation

Section Contents

Basics

Routine

Advanced

Page Markup

A single web page is a text file containing a mixture of text and mark-up tags. The tags give the page a well-defined structure that is understood by browsers such as Internet Explorer, Firefox and Mozilla (there are many others). Do not worry! You will need to know just a few simple tags to create or edit pages in the School website!

A very simple web page might look like this:

<html>
<head>
<title>Welcome</title>
</head>
<body>
<h3>Hello world!</h3>
<p>The quick brown fox...</p>
</body>
</html>

Notice that tags occur in pairs, an opening tag such as <h3>, and a related closing tag </h3>, the '/' symbol being required for all closing tags. In this example the <h3>...</h3> pair mark a Heading Level 3 and the <p>...</p> pair mark a paragraph. Tags must nest properly: heading and paragraph tags must occur inside body tags, but paragraph tags must not appear inside heading tags, and vice-versa. That is almost all you have to know! The School site content management system takes care of everything except the text that you want to present to the reader. There is some more on html in the How To: Edit pages.

Images

Images are not part of a page as they are in a word-processor page. The text of a page is displayed first and then any image files are fetched later to plug into rectangles reserved during page rendering. This means that a page may display without images if there is something wrong with either the images themselves or the image tags. Often you may notice images rendering gradually as the image files arrive ... slowly. Tip: images should be no larger in width and height than absolutely necessary! More on images...

Some important tips:

An image tag should have width, height and alt attributes. It may also have a title attribute. Like this:

<img src="image.jpg" width="200" height="150" alt="[Photo of Siccar Point]" title="Student Fieldwork at Siccar Point" >

The alt attribute
: This is used by screen readers and browsers without graphics. Make it meaningful in context but keep it short or it may overflow its image space. Do not just repeat something in immediately adjacent text or it will look or sound silly. Read out loud what the alt text and immediately following text say. Do they make sense as a whole? Put the alt text in square braces [] to distinguish it from ordinary text in text only browsers.
The title attribute: This is used as a pop-up label as the mouse pointer passes over the image. Make it meaningful to someone who can see the graphic. Say what the graphic shows rather than what it does! There is no point in repeating immediately adjacent text.

Note: Single word attribute values do not have to be quoted in HTML but they do XHTML, so you may as well do it: width="200" rather than width=200.

Style Sheets

The appearance of a page is controlled by a series of cascading style rules. For example, if you wish the Heading Level 3 to be rendered in bold, blue large text the style rule would be h3 {color: blue; font-weight: bold; font-size: x-large; }. The appearances of the site (headings, text, links, backgrounds, etc) is set using a site style sheet. The style of any component can be overridden in a folder, or in a page, or even a single element. This is the meaning of cascading in cascading styles. You should almost never apply styles to single elements. Mark up should be for structure NOT appearance. Typically, styles are stored in separate style sheet files that are fetched by the client browser after the html text but before rendering. More on styles...