Would you like to make this site your homepage? It's fast and easy...
Yes, Please make this my home page!
I'm going to assume you've followed Part One and used the text I suggested.
You should, therefore, have something that looks like this
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>AceHTML 4 tester page</title>
</head>
<body [with any of your own chosen attributes here]>
AceHTML 4 Test Page
This a test page to test out AceHTML 4 and this is some body text. This is, for some bizarre reason, a graphic of a frog <IMG SRC="FROG1.GIF" ALIGN="MIDDLE">. This line is some text that is 2 sizes larger than the default text and is centre aligned. On this line there is a link to another page and one to Adam's HTML Planet Site</body>
</html>
So, let's bring it to life a little.
- First, select the text 'AceHTML 4 Test Page'.
Now, you should have a toolbar near the top of your screen that has several tabs on it headed 'Common', 'Specialized', 'Tables, Frames and Lists', 'Forms', 'CSS', 'Java', 'Javascript', 'DHTML' and 'Custom'.
If you can't see it click View, Toolbars, and make sure that Tabs bar is ticked.
While you're there make also that Standard and Edition are also ticked. The desktop toolbar enables you to customise how your windows are arranged and is not necessary for these tutorials.
Anyways, on the Custom tab, the second entry should be 'Heading Styles'. Click on it and choose Heading Style 1. The correct coding will appear around your selected text - and this is the beauty of HTML Editing programs. You don't have to hand-code it all, but being familiar with, and able to use, HTML means that you know what attributes the different tags can have and what is possible with them.
- Let's put the text on seperate lines. You don't need to do anything to the Heading [<H1>] text because headings are rendered on their own line anyway.
Make sure the cursor is at the end of the next line - 'This a test page to test ... etc.' - and then click the Paragraph button on the 'Common' tab of the Tabs toolbar. This will insert the <P> tag, which doesn't need a closing tag, i.e. one with a forward slash,, and inserts an empty line between this text and the next.
- Now for the image - it's a frog for no other reason than that I like frogs :) - right-click on this image and save it to the folder that your HTML files are in, with the name FROG1.GIF. The attribute align="middle" means that any text surrounding it will wrap to the centre of the image.
- At the end of that line we'll stick a plain line-break tag <BR> - like the paragraph tag it doesn't need a closing tag
- Now we're going to deal with the formatting of the line that starts 'This line is some text that is 2 sizes larger ... etc.'
First select the text and then, on the 'Common' tab of the Tab toolbar, click the 'Center' button [or press Ctrl+E] which will put <div align="center"> </div> tags around your text.
With the text still selected, click the drop-down arrow next to the first button -'Font'- to define the relative size of the font i.e. how much larger or smaller it is than the default [which is usually '3']. If you click the 'Font' button itself [or press Ctrl+D] you can get access to more font options - but not the one we actually want! Anyway, choose the option '+2' and then save your file before moving on to the next bit.
- This leaves us with the hyperlinks to deal with. They are a link to one of your own files - or 'relative' link - the one to a page 2 file and a link to someone else's website - or 'absolute' link.
For a fuller explanation of these terms, and any other that you're not familiar with, see my tutorials for text editors.
How to insert the links will be dealt with in tutorial 3
Go up to the top of the page to choose where you go next