"HTML Help" a Canberra Travel Page by cutestmidget

<center><font color=9900cc>I'm just beginning this page as a HTML help for newbies to VT, and for people who just need that extra bit of advice because they've forgotten how on earth they changed the colour of that font... :) It's going to be going up in the next few days (hopefully not longer than that), when I have the time, so bear with me!

I am actually somewhat qualified to give this sort of advice, having completed a Computer Science degree, specialising in Web Design at University in Australia, and this is also some of what I do for a living here in Paris. If you have any questions, please don't hesistate to ask me! :)

<i>Please note - in my examples, I have placed a space between the first and last word/symbol and the brackets < and >. When you are using HTML, you must remember that you never have a space. In this html help document, I have had to do so, otherwise the computer would read the examples as html! :)</i>
<p>

<b><i>Beginning of a html document </b>

<p>The html tag</i>

<p>All html documents must begin with a standard declaration that they are a html page, and at the end of the document, they must close this declaration. This is in order for such things as Javascript etc. to be enabled. It is important that these tags are used when creating whole pages. You will never need to use the following tags here in VT, however if you are creating an external website, it may be useful. :)
<p>Eg.

< html >
…..
…..
< /html >

<p><i>The head and title tag</i>

<p>This declares the title of the page on the navigatory bar as seen by the user. It is surrounded by the head tag.

<p>Eg.

< head >
< title > Katia's Paris Page < /title >
< /head >

<p><i>The body tag</i>

<p>This is usually placed after necessary variables are declared, and the title is declared. It indicates the beginning of the body of the document. The final body tag is usually placed just before the final html tag at the very end of the document. All site content is within the opening and closing body tag.

<p>Eg.

< body >
< /body >

<b><i>Justifying Text</b></i>

<p>Text in all webpages is automatically justified to the left. In order to change this, you have two options.

<p><i>Centering text - the center tag</i>

<p>This centres all text into the middle of the space available.

<p>Eg.

<p>< center >This centres the text. < /center >

<p>Result

<p><center>This centres the text.</center>

<p><i>Justifying text to the right - the right tag</i>

<p>This justifies all text within these tags to the right of the page.

<p>Eg.

<p>< p align=right >This is example text.< /align=right >

<p>Result

<p><p align=right>This is example text

<p><i>Justifying text to the left - the left tag</i>

<p>This justifies all text within these tags to the left of the page. This is the normal justification. It is rarely used, but it can be good to use for the sake of consistency of tags throughout a page.

<p>Eg.

<p>< left > This is example text.< /left >

<p>Result

<p>This is example text.
<p>

<b><i>Editing Text</b></i>

<p><i>Beginning a new line of text - the br tag</i>

<p>This begins a new line of text. This is a very important feature to use, as browsers do not recognise any justification except for that which is done in code. The br tag, therefore, performs the same function as the Enter keey on the keyboard in a Word document.

<p>Eg.

<p>This is example text < br > This is example text

<p>Result

<p>This is example text.

This is example text.

<p><i>Beginning a new paragraph – the b tag </i>

<p>This begins a new paragraph, with a space between the new one and the previous paragraph. It performs the same function as pressing the Entrée key twice on the keyboard in a Word document.

<p>Eg.

<p>This is example text. This is example text. This is example text. < p > This is example text. This is example text. This is example text.

<p>Result

<p>This is example text. This is example text.
<p>This is example text. This is example text.

<p><i>Making text bold - the b tag</i>

<p>All text within these tags is made bold. It is important to remember with this sort of code, to close this tag.

<p>Eg.

<p>This is example text. < b >This is example text. < /b >This is example text.

<p>Result

<p>This is example text. <b>This is example text.</b> This is example text.

<p><i>Making text italicised – the i tag</i>

<p>All text is made into italics.

<p>Eg.

<p>This is example text. < i >This is example text. < /i >This is example text.
<p>Result

<p>This is example text. <i>This is example text.</i> This is example text.

<p><i>Underlining text – the u tag</i>

<p>All text is underlined. This tag is not utilised very frequently because it makes the user thinks that there is a link attached.

<p>Eg.

<p>This is example text. < u >This is example text. < /u >This is example text.

<p>Result

<p>This is example text. <u>This is example text.</u> This is example text.

<p><i>Changing the colour of text – the font color tag</i>

<p>With this tag, text color is changed from the standard black to the desired color.

The standard names for colours can be used, eg. Red, Blue, Orange, Pink etc.

The numerical codes for the colours can also be used.

When the font color tag is closed, the original color takes over ( black)

<p>Eg.

<p>This is example text. < font color=blue >This is example text. < /font color > < font color=red >This is example text. < /font color > This is example text.

<p>Result

<p>This is example text. <font color=blue>This is example text.</font color> <font color=red>This is example text.</font color> This is example text.

<p><i>Inserting a horizontal line – the hr tag</i>

<p>This tag inserts a horizontal line onto the page. The length of the line can be changed according to the percentage.

You can also change the width of the line by adding size changes.

The alignment can be changed (the default is center).

<p>Eg.

<p>< hr width="60%" align=right size=10 >

<p>Result

<hr width="60%" align=right size=10>
<p>

<i>Creating a link that will take the user to another page</i>

<p>This will create a link, which will take the user to another page when clicked.

The reference to the link is created first, then the text to which the link will be connected (appears on the page in blue and underlined), and then the link is closed.

It is important that this tag is closed, and that you use as few words as possible for the link. For example, words on the page saying ‘Click <u>here</u> for my page about Paris’ is much better than ‘<u>Click here my page about Paris’</u>. This is particuarly important when you have an entire paragraph which needs links all the way through. It is better to have several key words within the sentences with links attached, rather than whole sentences with links attached.

<p>Eg.

<p>Click < a href="http://www.google.com" >here< /a href > to see one of my preferred search engines.

<p>Result

Click <a href="http://www.google.com">here</a href> to see one of my preferred search engines.

<p><i>Creating a link within the page</i>

<p>Sometimes we need to create links that will take the user to other parts of the same page.

For example, we may have a very long page filled with lots of documents, and a list of all these documents at the start of the page. The user must be able to click on the required section of the list, and be taken to the relevant document within the page.
Firstly, an anchor must be created for each document. We then create a link on each of the seperate parts of the list referring to the relevant anchor.

So, link 1 will take the user to document 1 where anchor 1 has been placed, and so forth.

It is an easy and effective way for the user to navigate around a large page.

Often we will place a link in different parts of the page, named ‘Go to top’ or ‘Haut de la Page’ – which enables the user to go to the top of the page without scrolling their mouse. When the user presses on this link, they are taken to the anchor that has been placed at the top of the page. Internal links can also be made for ‘Bottom of the page’ etc.

<p>Eg.

<p>The anchor – this one refers to the top of the page, and is placed at the very top of the html document.
< a name= -TOP - >< /a >

<p>The link – this one will be placed somewhere in the text of the page, where the webmaster wants the user to be able to go to the top of the page if they wish. It is written like an external link, referring to the correct name of the page, however with the additional #TOP referring to the name of the anchor.
< a href=" http://www.virtualtourist.com/cutestmidget#TOP" > Top of the page
< /a href >

<p>Result – you see that just the linked text is displayed.

<a href="http://www.virtualtourist.com/cutestmidget#TOP">Haut de la Page</a href>

<p>Eg.

<p>The anchor – the first one is placed at the very top of the html document, and the second one is placed at the very bottom of the html document.

<p>< a name="TOP" >< /a >
….
….
< a name="BOTTOM" >< /a >

<p>The link

<p>If you would like to go to the top of the page, press < a href="http://www.virtualtourist.com#TOP" >here< /a href >. If you would like to go to the bottom of the page, press < a href="http://www.virtualtourist.com/cutestmidget#BOTTOM" >here< /a href >

<p>Result

<p>If you would like to go to the top of the page, press <a href="http://www.virtualtourist.com/cutestmidget#TOP">here</a href>. If you would like to go to the bottom of the page, press <a href="http://www.virtualtourist.com/cutestmidget#BOTTOM">here</a href>.