The Styles window contains all the basic headline and paragraph tools to create the layout and alignment for your page. However, it goes a little further than just having a slightly misleading name as a hangover from a pervious version of the program; you also get access to the <a href="head.html">Headers</a> and <a href="foot.html">Footers</a> windows, ruleoffs and a few other styles.
<P>
The <a href="head.html">Headers</a> window is covered in detail on another page, but basically this is the starting point of any web page; you can give the page a title, use a handy editor to choose the text, background and link colours for a page, establish how a search engine should reference your page, or jump to another page after a certain amount of time. I highly recommend you spend some time exploring all of this.
<P>
The <a href="foot.html">Footers</a> window is much more inconsequential; it just puts certain information at the bottom of a web page such as the designer's credit, and you don't <i>really</i> need to use it at all. However, it does add a little professionalism to have some form of footer.
<HR><a name="colour"></a>
<H3>Alignment and colour</H3>
At the bottom of the window you will see some alignment and colour controls; these can affect the output from all the other sections above, so it's worth getting to know them first. This approach is also taken in a lot of other windows, so if you're reading these docs in order it'll help you when figuring out the other sections.
<P>
The <tt>Align</tt>(ment) section allows you to set whether the HTML you're about to create will be aligned left, right or centered; <tt>Default</tt> won't bother setting the alignment so it stays as whatever has been previously used in the document. So, you can have a right-aligned headline - like so...
even though the rest of this text is aligned to the left. Obviously this won't be used in all the commands, after all, a right-aligned <tt><font color=#008000><CENTER></font></tt> command would be a bit silly.
<P>
There's also a set of colour controls; get used to these, as they're extensively used throughout HTML³. Underneath the word <tt>Colour:</tt> is a coloured square; this is a special tick box that both allows you to switch colouring on and off, plus shows you what the colour is. You can switch this on, and combine it with the alignement, to do things like <P align="center">
<font color="#FF0000">Centered red text</font></P>
<P>
To select the colour you have a few options; firstly, there's a <tt>Pick</tt> icon that opens the Risc OS colour picker box; this is used in a variety of programs and should be fairly familiar to you by now; you can create colours in the RGB, CYMK and HSV colour models either by moving the sliding bars, inputing numbers to an accuracy of a tenth of a percent, or by clicking on the colour boxes that are provided.
<P>
If you're not familiar with the colour picker, or you prefer to pick from a list of named colours, then there's also a menu icon next to the Pick button, and this will bring up a list of around 140 "Internet colours" - basically a list of colours that have an agreed name so they'll be the same on all platforms (on some browsers these can be used directly, for instance <tt><font color=#008000><font color=</font><font color=#3a00aa>"white"</font>></tt>, but as some browsers don't understand this and for other reasons HTML³ will convert these names into their more usual colour definitions - e.g. <tt><font color=#008000><font color=</font><font color=#3a00aa>"#FFFFFF"</font>></tt>).
<P>
<i><font size="2">Note: at the time of writing (20/09/98) there are also four other colours in the list that shouldn't really be there - <font color="#3300AA">Argo Blue</font>, <font color="#C2CFFF">Argo Light Blue</font>, <font color="#1AFF2B">Argo Green</font> and <font color="#F0D100">Phoebe Yellow</font>. I use them a lot, so I just made them easier to get at. I'll add multiple colour files soon.</font></i>
<P>
The eagle-eyed will have already spotted three other entries above the list of colours, which can be used to modify colours which have already been designed; <tt>Make colour NetSafe</tt> will take your colour and average it out to the nearest 20% of its red, green and blue components. This is because some older browsers/operating systems use what is known as a 216 colour cube, and any colours which don't conform to these 216 can look a bit naff on these older systems. The fact that the Risc OS 256 colours don't match hardly any of these 216 colours (unless you count pure black and white) means that to see any difference after using this function you'll probably have to be in a 24bit mode and looking very closely, but hey, some people are perfectionists. That's probably why I spent so much time getting this function to round up or down to the nearest 20% when I never use this function.
<P>
<tt>Copy to...</tt> and <tt>Grab from...</tt> both open a window showing all the colours currently defined in HTML³; this means that if you've, for instance, designed the perfect blue for your site in the Effects window you can either copy it to the other windows from where you're working, or when you're working on another window you can grab the colour from there. If you can't define your own colours very well, you might try using the <a href="fx.html#palette">pre-defined palettes in the Effects window</a> or the <a href="head.html#colours">colour schemes in the Headers window</a> and then copy them around to where you want them.
<HR>
<H3><H?>eadlines</H3>
After the <a href="head.html">Header</a> and <a href="foot.html">Footer</a> buttons (covered on seperate pages) come the headlines section. On HTML², the predecessor to HTML³, I had just buttons to do everything, and there had to be a button to switch on each headline type and another button to switch each one off. To make it easier here, I've changed this to one button to switch the headline on and one to switch it off, and you select via radio buttons how big the headline is.
<P>
Headline tags will seperate the text enclosed within them with space above and below, so you cannot have a headline and then have text or graphics follow straight on after (at least not without trickery). Generally you should use <font color=#ff0000><tt><H1></tt></font> at the top of the page for the main headline, and then any subheadings should be <font color=#ff0000><tt><H2></tt></font>, with sub-sub-headings <font color=#ff0000><tt><H3></tt></font> and so on.
<HR>
<H3>Other layout commands</H3>
Next comes <tt><font color=#ff0000><P></font>, <font color=#008000><DIV></font>, <font color=#008000><CENTER></font></tt> and <tt><font color=#ff0000><BR></font></tt>. These are commands for breaking your page up into sections;
<ul><li><tt><font color=#ff0000><P></font></tt> is a paragraph break, which gives a double linefeed after a section of text;
<li><tt><font color=#ff0000><BR></font></tt> just does one linefeed, and so is more for doing simple lists, addresses and that sort of thing;
<li><tt><font color=#008000><CENTER></font></tt> centers an area of text, putting linefeeds before and after the text;
<li><tt><font color=#008000><DIV></font></tt> marks out an area of text so you can apply alignment etc. to it. Again linefeeds are added to the start and end.
</ul>
You'll use <tt><font color=#ff0000><P></font></tt> and <tt><font color=#ff0000><BR></font></tt> quite often, so often in fact that it's usually quicker to type them by hand (or, if you have a suitable plain text document, you can do a search and replace for double linefeeds and replace them with <tt><font color=#ff0000><P></font></tt>s and then search for any remaining linefeeds and replace with <tt><font color=#ff0000><BR></font></tt>s).
<P>
However, <tt><font color=#ff0000><P></font></tt> can have alignment attributes added in exactly the same way as the <tt><font color=#008000><DIV></font></tt> command (in fact they seem to do exactly the same job); then you have to switch <tt><font color=#ff0000><P></font></tt> off using <tt><font color=#ff0000></P></font></tt>.
<P>
There's one final extension that needs to be explained; <tt><font color=#ff0000><BR></font></tt> doesn't take alignment attributes (so far as I can tell) and so doesn't need to be switched off with <tt><font color=#ff0000></BR></font></tt>; however, you'll notice that there's a button marked <tt>BR clear</tt>. This is used with <a href="img.html">Images</a> that have been left or right aligned so that text flows around the image. The <tt>clear</tt> attribute tells the browser that it should not print any more text until it has cleared the bottom of the image; hence the <tt>BR clear</tt> buttons outputs <br><tt><font color=#ff0000><BR</font> clear=<font color=#3a00aa>"all"</font>></tt><br> which clears any images (HTML also allows <tt>clear=left</tt> and <tt>clear=right</tt> which only clears left aligned and right aligned images, but <tt>clear=all</tt> is best so it's the one I've gone with).
<HR>
<H3>Styles proper</H3>
HTML has certain codes which are supposed to mark certain areas so that they're instantly recognisable as being, for instance, a piece of computer code, or an address. In practice these codes are implemented so differently in different browsers (or not implemented at all) that I've just included the most useful ones. As with the headlines you simply select which style you want fusign the radio icons, and then use the <tt>Style on</tt> and <tt>Off</tt> buttons.
<tr valign="top"><td align="center" bgcolor="#66EEBB"><tt><b>Pre</b></tt></td><td>Preformatted text. This is a special command as it basically allows you to break some of the rules of HTML; it was for displaying plain text files exactly as-is, so instead of ignoring linefeeds it uses them, instead of trimming multiple spaces it displays them all, instead of word-wrapping your text it will carry on until it find a linefeed, and it changes to a typewriter-style font (courier, or corpus as we know it). That's all she wrote in some browsers, although the more modern ones will allow you to use HTML tags within a preformatted area.
<P>
Because it displays mulltiple spaces and has a fixed with font it's useful for getting things perfectly aligned like right-aligning text labels in front of form boxes or heavily indenting something, but these days tables are much more convenient for such tricks.</td></tr>
<tr valign="top"><td align="center" bgcolor="#66EEBB"><tt><b>TT</b></tt></td><td>Teletype. This just displays an area of text in a fixed with font, but unlike <font color="#00BBFF"><tt><PRE></tt></font> it doesn't make any other changes (nor does it put linefeeds before and after the marked area, so it can be used in the same way as <tt><font color="#00BBFF"><B></font></tt> and <tt><font color="#00BBFF"><I></font></tt> as a simple effect tag)</td></tr>
<tr valign="top"><td align="center" bgcolor="#66EEBB"><tt><b>Code</b></tt></td><td>Supposed to represent computer code, this tag appears exactly the same as <tt><font color="#00BBFF"><TT></font></tt> in Fresco.</td></tr>
<tr valign="top"><td align="center" bgcolor="#66EEBB"><tt><b>BlockQuote</b></tt></td><td>Used originally to show a block of text was quoted, it's now used more to just indent a whole area of code (some people, myself included, prefer to use <tt><font color=#3a00aa><UL></font></tt>; partly because ArcWeb just displayed blockquotes as italic text and didn't allow any other tags inside).</td></tr>
<tr valign="top"><td align="center" bgcolor="#66EEBB"><tt><b>Address</b></tt></td><td>Used to mark out an address (logically enough). I've seen it indented and italicised (ArcWeb?), and just plain text with linefeeds above and below (Fresco); personally I prefer to design my own address layout using <font color=#008000><tt>FONT</tt></font> attributes and plenty of <tt><font color=#ff0000><BR></font></tt>s</td></tr>
</table>
<HR>
<H3>Rules</H3>
A simple <font color=#008000><tt><HR></tt></font> command puts a nice 3D line right across the page (there's one above, although it probably doens't look 3D on a white background, and is restricted by the table that allows me to have the green margin down the side of the page). It's a nice clean way of breaking up a long page into easily managable sections.
<P>
However, it can be extended so that it's not the full width of the available area; using the <tt>WIDTH</tt> attribute you can make it small (or even larger) than the currently available page (set to 100% to switch this function off, as this is the default width). If it's smaller than 100% then you can apply alignment to it (usually it's centered). The <tt>SIZE</tt> attribute can make it taller than the usual three pixels or so (set to 0 for default); and finally there's an option to make it <tt>Solid</tt> instead of 3D although this only works on PCs at the time of writing. The <tt>Colour</tt> can also be changed when viewing on a PC, but as this again doesn't work on Acorns I haven't gone overboard with controls to change the individual light and dark parts.
