Guidance for creating and editing website pages

Lesson 5 - HTML Coding Tags

From the previous lesson, Lesson 4, it will have been seen that the viewable script inside a HTML page is carried within 'tags' of various kinds. These tags describe the way that pieces of text (and images etc) are displayed on any given web page.

In almost every instance a tag will have a matching closing tag.

As previously explained, properly formed tags will not display in their native format on a pages such as this one - they will simply carry out their instructions invisibly and render the code back into plain language.

Because of this all the following will use character entities instead of the keyboard rightward and leftward facing (properly called) 'less-than sign' (<) and 'greater-than sign' (>). Character entities are small pieces of code which represent a great many different symbols which do not appear on keyboards. They do not normally affect the display of HTML elements.

Lists of these can be found elsewhere on the internet.

Examples: & l t ; for < and & g t ; for >, although there are to be no spaces between the four characters in the entities - if the spaces were closed up here the entities would simply display as < and >.

(E.G. < for <, > for >)

A list of opening and closing tags as used for the pages of the BRT website:

BOLD
----------------

<strong>YOUR TEXT HERE</strong>

CENTRE (PARAGRAPH or IMAGE WITHIN PARAGRAPH)
----------------

<p align="center">YOUR TEXT OR IMAGE HERE</p>

CHANGE ATTRIBUTES
----------------

Change font: <span style="font-family: Times New Roman;">YOUR TEXT HERE</span>

Change font color: <span style="color: #ff0000;">YOUR TEXT HERE</span>

Change font size: <span style="font-size: 24px;">YOUR TEXT HERE</span>

Multiple Attributes: <span style="font-family: Times New Roman; color: #ff0000; font-size: 24px;">YOUR TEXT HERE</span>

COPYRIGHT
----------------

(N.B. This is a Character Entity - remove spaces between characters!)

& c o p y ;

DIVISION
----------------

<div>CONTENT OF DIVISION IN HERE</div>

E-MAIL ADDRESSES
----------------

<strong><a href="mailto:XYZ@birnbeckregenerationtrust.org.uk">XYZ
@birnbeckregenerationtrust.org.uk</a></strong>

HEADINGS
----------------

<h1>TITLE TEXT</h1> (largest)
<h2>TITLE TEXT</h2>
<h3>TITLE TEXT</h3>
<h4>TITLE TEXT</h4> (smallest)

EMBED IMAGE INTO PAGE
----------------

<img src="images/FOLDER/XYZ.jpg" alt="Birnbeck Image #" />

INDENT
----------------

<div style="text-indent: 2em;">YOUR TEXT</div>

INTERNAL LINK
----------------

<a href="PAGE NAME.html">PAGE NAME</a>

LINE BREAK
----------------

<br /> (No closing tag)

LINK
----------------

<a href="http://www.xxx/">http://www.xxx</a>

LINKED IMAGE
----------------

<a href="http://www.XXX"><img style="border: 0px solid; width: Xpx; height: Xpx;" alt="XXX" src="images/FOLDER/XYZ.jpg"></a>

LIST (Unnumbered)
----------------

<ul>
<li>LIST ITEM 1</li>
<li>LIST ITEM 2</li>
</ul>

PARAGRAPH
----------------

<p>text</p>

SPACE
----------------

(N.B. This is a Character Entity - remove spaces between characters!)

& n b s p ;

UNDERLINE
----------------

<span style="text-decoration: underline;">>TEXT TO BE UNDERLINED</span>

Here endeth the fifth lesson in web page production!

Go to the Lesson 6 page - Web Image Management

Return to the Home page