HTML
A brief guide to HTML (Hyper Text Markup Language)
This guide merely scratches the surface and is just intended to give an idea of the structure and power of the language. There are very many good guides on the net and in paperback but please note that many will be assuming you will be wanting to develop a website from scratch so they will be covering material that will be irrelevant to you on Community Sites hosted software. You will have to be very selective ! Here is a link to a very good worldwide web school.
HTML is the first computer language of the Internet. It was developed originally in the 90s to help researchers share text across a network. The language has developed greatly since and now can handle multimedia and complex text layouts.
The essential notion of HTML is the idea of marking up text which then determines how it will be displayed or treated by an internet browser.
The marking up is done by the use of tags which can be paired or single.
Single tags:
These tags perform an action independent of adjacent text. Rather than the text itself they modify the space around the text. Some of the common ones are:
<hr> <br>
These respectively create a "hard" space, a ruled line across the page and a line feed.
HTML might disconcert you in what it does do and what it doesn't do. Because it originated as a text modifier rather than as a proper computer language it looks very textlike if there are big blocks of text. Beware of this apparent simplicity. HTML gives you one "soft" space automatically per word in a block of text. But it gives you nothing else - if you wan't extra spaces you have to code them in as well as everything else such as line feeds, font sizes etc etc.
Paired tags:
These tags perform an action on surrounded text. They are the most useful and interesting components of HTML. There are a vast number of paired tags among which are:
<p> <table> <b> <i> and so on - although there are a very large number of paired tags all are quite well defined and relatively comprehensible.
The key idea is that the text to be marked is placed between an opening and a closing tag pair with the closing tag having a slash to denote the end of the markup. So, for example:
<i>italic text</i> will produce italic text.
Another key notion is that of nesting. This allows more than one markup to be done to the text. Bold, underlined and italic for example. In this case the tags are applied in a logical nested fashion:
<b><u>bold underlined text</u></b> will do bold underlined text, and:
<u><b><i>underlined, bold and italic text</i></b></u> will do
underlined, bold and italic text
Style Sheets: In the early days of HTML all tags were embedded in the text as shown above. Nowdays there are strong moves towards the use of style sheets which describe how the text is to be treated as an entity, including such subtleties as the size, type and colour of fonts and where the text is to be placed on the page. These things are now usually specified outside the text in a named style sheet. Many such sheets can exist on a site.
Here is an example from a typical Community Sites text. If you examine some of your text with the HTML tab at the bottom of the Wordprocessor you will likely see tags something like the following which are almost self-explanatory:
<p class="footnote">the tags around this paragraph format it as a footnote</p>
This code is rendered as:
Here the simple paragraph opening tag <p> has been opened up to include a reference to a style sheet called "footnote" created by Community Sites. If you look around you will see many more examples: some with h6 inside the first tag, some with div.
Hyperlinks, text: This is the
raison d'être of HTML - to be able to access text in a remote location by means of a simple click on a link in a page of a document. The methodology builds on what we have seen so far. Here is a complete link to the Home Page of RDCA:
<a href="http://www.rochforddistricthistory.org.uk/index.aspx/">Home</a>
This is what you would need to specify if accessing the page from another site.
And here is a simplified version if you merely needed to move around inside the RDCA site:
<a href="index.aspx/">Home</a>
Note the format carefully. The anchor tag holds the web address you will be sent to when you click on the displayed link. The web address is inside inverted commas which should always be there. The link address "Home", between the anchor tags, is displayed as the clickable link. It can be anything you like. If you have the space it may be desirable to make it exactly the same as the target address by editing the site HTML text. How the link displays is determined by a style sheet invisible to you and normally outside your control - such things as the colour of the link, whether it is plain or underlined etc etc. The trailing slash is a refinement - the link will work without it but the slash cuts down browser activity a bit.
Hyperlinks, images and text: The ultimate in hyperlinks is to include images. Here are some examples without much explanation. You will not be able to exploit this without being prepared to embed HTML in the site because the Community Sites code checker will not tolerate image tags being embedded in normal text. All of this HTML page was coded in HTML by hand and embedded in the site using the $rawcontent facility provided just below the wordprocessor. The "word" $rawcontent was typed into the wordprocessor and everything else shown here was typed into the HTML box underneath.
Here is the simplest possible image link. There is little to indicate that it might be clickable. A clue to a link is that the image border is blue but this is merely as a result of the border size option in the image tag being activated. If the border option was omitted or the value was set to 0 there would be no border. The width and height are constraints on the display size: without them the image would be displayed at its native size, in this case 12x12.
<a href="index.aspx"><img src="images/adverts/originals/favicon-red.jpg" width="24" height="24" border="3"></a>
Then you can just add clickable text near the end of the composite tags but the text will be up against the image.
Home
<a href="index.aspx"><img src="images/adverts/originals/favicon-red.jpg" width="24" height="24" border="2">Home</a>
Here is a double link, images and text, with the clickable text beside the clickable image separated by two spaces. Also the "Title" option has been added - hover over the image and text. There is a space limitation on the amount of text but its quite large.
Home
<a href="index.aspx"><img src="images/adverts/originals/favicon-red.jpg" title="Home from pic link ... use Title tag as the use of the Alt tag is no longer supported" width="48" height="48" border="0"></a> <a href="index.aspx" title="Home from text link">Home</a>
Finally here is a little table with clickable image above clickable text and all properly aligned and integrated.
<table border="3" width="100"><tr><td><a href="index.aspx"><img src="images/adverts/originals/favicon-red.jpg" width="100" height="100" border="0"></td><tr><td align="center"><a href="index.aspx">This link and the above clickable image point to the Home page of the RDCA site</a></td></table>
Horizontal ruler. Self explanatory. The colour is in hexadecimal RGB with each colour having options from 00 to ff which gives over 16 million hue variations.
THE
END
<hr size="5" width="75%" color="#ff0000"><center>THE</center><hr size="3" width="45%" color="#00ff00"><center>END</center><hr size="1" width="15%" color="#0000ff">
Now if you wish you can return to where you were last by clicking your browser Back arrow.