Forum: Basic Introduction to HTML for Those Who Might Want It

There has been considerable discussion about the need for people to learn HTML code in order to participate at the new Wiki Discussion Forum site. This is not true

However, as you ‘participate’ you may want to use some basic text formatting features to enhance the layout of your message.

The following entries take you through some basic formatting steps - so you can see them here before you go there.

The same material is included in the new site at Simple HTML I and, for those with some familiarity, or have completed HTML 101, there is Simple HTML II

(This will take a wee while to get all the information copied across so please just let me play in here for a bit and I will let you know when I have finished. Thanks)

What Does an HTML Instruction Look Like?

An HTML (html) instruction tells the system that you want to apply some special formatting to your text.

Most HTML instruction-codes consist of a start instruction-code and an end instruction-code. When this occurs, all text between the start and end instruction-codes has the requested formatting applied to it.

Think of the instruction-codes behaving like bookends. This could have your bookshelf look like this:

Some other books bookend Only blue covered books here bookend Some other books

If you do not have the bookends there separating your blue-covered books, they can easily get mixed up with the other books and, before you know it, you have a right “mess”!

So, remember, you need a Start , some text to be formatted, and an End (or stop) to get your formatting request to work.

A Start instruction looks like this: < instruction-code > And an End (stop) instruction looks like this: < /instruction-code > The / symbol in the end instruction basically says “Stop executing this instruction”.

Creating BOLD Text

What we will try now is to get some text in your main comment box to appear as bold text.

The HTML instruction-code for bold text is b

So, your Start instruction will look like this: <b>

And the End (stop) instruction will be: </b>

The entire sequence will look like this:

Some leading text ,<b> the text formatted as bold </b>, some following text ..

And this is how it will appear when it is posted to the page:

Some leading text, the text formatted as bold , some following text ..

Creating text in itlaics

What we will try now is to get some text in your main comment box to appear as italics text. The HTML instruction-code for italics text is i (the letter i)

So, your Start instruction will look like this: <i>

And the End (stop) instruction will be: </i>

The entire sequence will look like this:

Some leading text ,<i> the italics text </i>, some following text ..

And will appear like this:

Some leading text, the italics text , some following text ..

Sorry, that heading should be Creating text in italics (sigh)

(that’s what comes of trying to carry two completely different coding systems around in an old head at the same time - you forget the basics of proof-reading!)

Now, let’s mix the two together - bold and italics in our text

What we will try now is to get some text in your main comment box to appear as bold and italics text – like this bold and italics text. The HTML instruction-code for italics text is i , and for bold is b

To get both to happen at the same time, you need to issue two instruction-codes.

So, your Start instructions will look like this: <i> <b>

And the End (stop) instructions will be: </b> </i>

The entire sequence will look like this:

Some leading text , <i><b> the bold and italics text </b></i>, some following text ..

And will appear like this:

Some leading text, the bold and italics text , some following text ..

Now it is time to introduce some color (colour) to your text

(I have used the american version of the spelling as this aligns with HTML code - the rest of us know it is really colour ..)

What we will try now is to get some color in your main comment box to appear as this is some red text The HTML instruction-code for putting color in is <font color=“colorname”>

Some important things to note here:

• the instruction code has more than one word
• a space MUST BE LEFT IN between the words “font” and “color”
• the color name should be in double-quotes so that it will work in any HTML environment

We will start with getting some red text.

So, your Start instruction will look like this: <font color=”red”>

And the End (stop) instruction will be: </font>

(Note that the End instruction applies only to the first word in your start instruction. As you ‘progress’, you will find there are many different “font” commands.)

The entire sequence will look like this:

Some leading text ,<font color=“red”> the red colored text </font>, some following text ..

And will appear like this:

Some leading text, the red colored text , some following text ..

Here are some color names and the colours you will get:

• “red” gives you red
• “green” gives you green
• “yellow” gives you yellow
• “orange” gives you orange
• “purple” gives you purple
• and “blue” gives you blue

Blue is usually ‘reserved’ as a color on HTML sites to show there is a link, so you might avoid it in your text areas to save some confusion.

There is a full list of the colors available here

Okay, all of the above is repeated at the new site with some ‘talk-thru’ on getting you to try it. Go to this link and follow it through there.

Once you have successfully completed these exercises, you have got HTML 101 mastered ;-)

Now you can go on to the Next steps HTML II

I have posted a summary of that information below …

This is some of ths stuff from the HTML II site …

(forgive me in advance if I do not replicate the code here)

As above, for basic fancy fonts:

  <b> bold text </b>  creates:  bold text 

others:

• <i> </i> italics
• <u> </u> underscored
• <strike> </strike> strikethrough
• <tt> </tt> typewriter text
•  superscript
•  subscript

Blockquotes for quoting people or just for emphasis

<blockquote> </blockquote> (this creates a special box that the text is positioned in - go to the new site to see it)

To change the size of the font:

<font size=3> </font> 3 is the normal. Try other sizes between 1 and 7

(Note: leave the space between “font” and “size.” It shouldn’t be “fontsize”)

To make a hyperlink (Note: leave the space between the “a” and “href” in the first bit.)

<a href=“ put URL between the quotes “> text to identify the link, eg click here </a>

makes: click here

You can also simply post the URL by itself, even a very long one. The software will abbreviate it automatically, so there is no fear of sidescroll:

To insert a horizontal rule (a line across the ‘page’)

put <hr> where you want a line across the screen. For this command, there is no “ending” command with a slash mark.

To align a paragraph Left, Right, or Center

Left is the standard. But with:

<p align=right> in front of your paragraph, it will align right. (Note: leave the space between “p” and “align” and there is no “end alignment” code with a slash mark at the end of the paragraph)

Or <p align=center> will align your text in the center (centre) of the page.

There is lots more so go visit the new site - do I sound like a broken record?

There is also a very good tutorial site at http://www.w3schools.com/html/default.asp

There you go - I hope there is enough here to whet your appetite and lower the ‘fear factor’ with going to something new.

Thank you for your time.

(All finished now ;-D )

awesome AnnieB!

Thanks AnnieB! That’s really helpful!

Every time I do sneak a peek, I’ll probably retain something else, and it will eventually all click.

Ok I don’t promise to try and learn all of it, but maybe about half… I did here, eventually.

bump

bump