To get started Cathy, there are a few things that you need to know.
First, HTML is about presenting the words and pictures that you want people to see. It's about layout and highlighting, not about organising information. So, rather like when you start work on a Word document, you need to know what you're aiming for. You could draft your ideas on a piece of paper, so that you get a feel for where you are heading.
You also need to decide which tool you will use for the job. You can:
I use Notepad (which is another reason for keeping the pages simple). Word tends to create huge swathes of HTML for each bit of text that you write, which I find difficult to edit later (obviously editing the text is easy, but changing the HTML itself gets tedious when there's so much unnecessary stuff).
An HTML-based website is made up of a number of HTML files, each containing the words to be displayed, with indicators of how it should look. The HTML file can also specify where to put pictures in the display and which bits of text should link to other HTML files. The HTML itself looks rather like the words that will be displayed, but with code markers, called tags, interspersed where necessary. The clever stuff of understanding this and making it look right is handled by the visitor's browser software (Internet Explorer, Firefox, et al).
Each HTML file has two parts: the head and the body. The head can contain things that the browser needs to know but which are not displayed, and it is also the place where the page title goes. The body contains the stuff that people will see when they visit the page.
HTML works by inserting tags in the text to indicate how it should be displayed. Originally there were relatively few of these but, inevitably, they have grown in number and complexity over the years. Tags go inside < and > symbols (eg <p> to mark the start of a paragraph) and most of them also have an ending tag, which is the same as the opening one but with a / before the code (eg </p> to mark the end of a paragraph).
The first tag that the file must contain is <html> so that the browser knows that this is a HTML page. This is matched by a </html> tag at the end of the file.
Inside that are the tags indicating the two sections: <head> and </head> for the head section; <body> and </body> for the body. It's all looking fairly simple so far, yes? So far we have a file that looks like this:
<html>
<head>
<title>Page title here</title>
</head>
<body>
Some text to display here
</body>
</html>
Ordinary text to display in the body of the page is the simplest bit to deal with, partly because it's very like styles in a word processor (I hope you have come across those). There is a basic paragraph style (like 'normal') which is indicated with <p>; then there is a set of heading styles indicated by <h1>, <h2>, <h3> and so on (there are at least 6 levels) equivalent to 'heading 1', 'heading 2' and so on in Word. So here's what the start of the body section of this page looks like.
<h1>HTML Basics for Cathy</h1>
<h2>First things First</h2>
<p>To get started Cathy, there are a few things that you need to know.</p>
I hope this is all making sense. If you want to see how a page you are looking at is made up, your browser will probably give you the ability to do this. Just right-click on the page and choose an option called 'View Page Source' or something similar (depends which browser you are using). This will open a view of the page with all the tags visible and you should be able to pick out the ones I have listed so far.
On the subject of lists, it is easy to get your text to appear as a list either with numbers or with bullets.
Of course I could do that without numbers, like this:
which is an unordered list, and the only difference is that the <ol> and </ol> tags are replaced with <ul> and </ul>. Here's the HTML behind the first of these.
<ol>
<li>To use numbers, it's called an ordered list</li>
<li>The tag to start the list is <ol></li>
<li>And of course it finishes with </ol></li>
<li>Each item in the list starts with <li> and ends with </li></li>
</ol>
Those funny codes with & and ; are only there to overcome displaying < and > symbols on the page rather than treating them as tags. Don't worry about them here.
I hope we're not going too fast here. Take a break if you want to let that lot settle - and do experiment! Open Notepad, type something along the lines I have been describing and save it as a file with .html as the extension. Then open that file in your browser (either use Explorer to find it and double-click on the file, or open the browser and use the File, Open command to open it). See what it looks like and play around with the tags I have listed.
There are, of course, many more things you can do. If I'm going too slowly or not giving you what you need, you could try a proper HTML tuition site like http://www.w3schools.com/html/default.asp
Oh look - I just put a link in my HTML. This is the real power of HTML, and certainly this was what got it - and the Internet - off the ground. Using a simple tag, part of the text is marked as being a link, and the destination for that link is included so that the browser knows which file to open next.
The tag is the 'anchor' tag, and is simply a letter 'a', <a> with, inevitably, </a> at the end. Inside the first part, we also have to say which file to open when the link is clicked on, and this uses a parameter caller 'href' (I can't remember what that stands for right now). So it looks like this:
<a href="filename.html">Click here for another file</a>
and the browser shows this as:
That's it for links!
Obviously a website is a bit boring if it only has words and no pictures. There is a wide range of ways of doing pictures, particularly if you want animation. For the moment, let's stick with inserting a simple picture. First, obviously, you need to have got hold of a digital picture file and copied it into the same folder as the HTML page that will display it.
Then, in the HTML, we specify whereabouts amongst the text we want the picture to appear. We do this with the <img> tag (short for 'image' - you probably spotted that!). As with the link tag, above, we then have to provide the name of the picture file as a parameter, which is called the source and abbreviated to 'src'. So, for example:
<img src="images/church1.jpg">
shows this.
Notice two things:
The last thing to notice for now is that laying out a simple page can be achieved using tables - as I have done with St John's site. Like all of this stuff, it can get terribly complicated and sometimes fiddly; there are also difficulties over the different ways that different browsers render them on the screen. But as long as it's simple, it does help with presentation.
You have probably guessed, pretty much, what the HTML for a table will look like. Here's an example:
<table>
<tr>
<td>Here is some text in the first cell</td>
<td>Some text in the second cell</td>
</tr>
<tr>
<td>Now we have started the second row</td>
<td>And we'll stop here</td>
</tr>
</table>
which looks like this:
| Here is some text in the first cell | Some text in the second cell |
| Now we have started the second row | And we'll stop here |
The <table> and </table> tags start and end the table. Within that, each row starts with <tr> and ends with </tr> (table row); and within the row each cell is marked out with <td> and </td> (table data). I hope that doesn't need further explanation.
So that's it for first steps in HTML. I hope it's been helpful.