The best thing to do first is to write the content, use something simple like Notepad or Wordpad. You can use something more powerful like Word if you like and this will give you grammar and spell checking. Whatever you use, it is best not to apply any styles like bold or large text. Do all the formatting afterwards. Either way you should think about what you want to say first.
If you are starting from scratch and want to use Notepad there are two ways to create your web page. You can either open Notepad then chose Save... from the file menu. Then enter "mypage.htm" in the filename box, including the quotes. Or from Windows Explorer, right-click in the location you wat to work in and choose New>Text Document. Then, rename the file to mypage.htm. You will probably get a warning about changing the file extension here but this is okay.
All the text on the Whisky Tango Foxtrot site is done with 3 levels of heading at most so try to organise you page to be consistent with that. Once you have written all the text and headings for your page you can now do one of two things. You can send this in to webmaster@ this site and include any graphic images that you want to go with it, please indicate where you want each image to go and any descriptive text to go with the image.
Alternatively you can try your own hand at formatting the page yourself. This is quite easy if you follow these steps.
Start by getting a few files that you will find useful so you can see how things will look. First obtain the main style sheet /styles.css by right-clicking on the link, then choose "Save Target As..." and save this file to your C:\ (it is important not to put in a folder).
Next, get the files:
bg.jpgSave these file to C:\ too.
Make sure your work is saved somewhere with an extension of .htm and make sure this file is saved as a pure text file and not a word document. Programs like Notepad like to automatically add .txt on the end so to avoid this put quotes around your filename in the save dialog.
Do not use the save as HTML feature of any program, this will be a disaster. You could save as a .txt file and rename it in Windows Explorer.
Add the basic framework of the HTML by putting the following text at the start of your document (put your page title between the title tags).
<html>and the following text at the end.
</body>You will find that using something simple like Notepad is the best way to do this.
You needn't worry about what this does but it's quite standard stuff that you will see in most web pages. The only different line of note here is the one that specifies the stylesheet file (\styles.css) as the one you saved to C:\ earlier. This file contains all the information that the browser needs to set the look and feel of the Whisky Tango Foxtrot site, such as font sizes and colour, background image and colour of links. Because all of this information is stored in this file, you don't need to put any of this in your web page so your job is easier.
HTML tags are the commands in a web page that you need to make it a web page. You have already seen some above like body, title and head. Each tag is named within angle brackets (< >). Each tag usually comes in a pair, one to begin a command and one to end it, they are named the same except that the closing tag has a slash (/) before the tag name. Some tags have extra bits of information in them (like the link tag above) but most are simple.
Each paragraph in your page should begin with <p> and end with </p>
Headings should be enclosed in <h1> and </h1> (or <h2> or <h3> for the different heading levels)
Save your page and see how it looks by double-clicking it. As it has the file extension .htm, your browser will load it. Providing you have placed the stylesheet and background graphics in C:\ then it should look fairly Infidel like. If it doesn't , then check the location of these files and also check that you have typed in the link line correctly as 3 above. If it mostly looks fine but some parts are not looking right it is probably because you have mistyped the paragraph or heading tag for that text or forgot to end that section of tetxt with the corresponding closing tag (</p> or </h1>).
Tip: You should now have both your editor (Notepad) and your browser open, it's useful here to just alt-tab back to your editor, make any changes, save them and then alt-tab back to your browser. Now press F5 to see the effect of your changes.
Browsers remove all spacing from your document, so if you want to indent some text it is no good typing 10 spaces, the browser will just get rid of them. There are a number of ways of achieving this (such as using tables and pre-formatting tags) but generally it is best no have documents that do not require it. If you really want to use a hard space then rather than use a space character, use the special code instead.
If you want to ad vertical space then just a break tag <br> and you will get a blank line.
Place any images you want to include in the same place as your web page. Make sure that you only use gif files or jpg files. GIFs are good for solid blocks of single colour or when you want a transparent background, they have good file compression but you are limited to 256 colours. JPEGs (or jpg) are much better for phographs and more complex images like screenshots. JPGs also have compression but unlike GIFs, when you compress, the image quality degrades. Most programs that will save a jpg allow you to adjust the compression, the more you use, the worse the image gets. I generally find that 20% gives you a reasonable quality image with good compression. Also, if there is an option, use progressive encoding as that gives smaller file sizes usually.
To add your image to the webpage you use the IMG tag (<img>). You can place this anywhere you like in your document. Inside the tag you use the src attibute to specify the filename of your image. It is not neccessary to close the image tag sith a </img> but you can do so if you want. So a complete image tag may look like this:
<img src="mypic.jpg">By default, the image will separate the text where you place it, however, you can get the text to wrap around the image by using the align attiribute to tell the image to be either at the left of the right with text wrapping around it.
<img src="mypic.jpg" align="left" >Finally, you can add some text that will appear as the user hovers the mouse over the image by using the alt attribute
<img src="mypic.jpg" align="left" alt="Your mouse is hovering!">
Place any links you want to include in webpage by using the <a> tag. The source page for the link is specified in the href attribute. Using the <a> tag marks the start of the link, any text that follows will be the clickable part of the link until you close the link with </a> so a complete link might look like this.
<a href="page2.htm">Click here for page 2</a>If you want to link to an email address just use the word mailto: in the href:
<a href="mailto:me@myaddress.com">Click here to email me</a>One final word about links on this site. You may have noticed that the Whisky Tango Foxtrot web site is constucted using frames. This means that any page that you link to will appear in the main frame. This is fine if you have a multi-page article as you still get the Whisky Tango Foxtrot menu and heading. People disagree as to weather using frames is a good or a bad thing, I myself can't make my mind up, there are good and bad features of frames. The best thing you can do is try to design things in such a way that you get all the good things but avoid the bad things. Pretty much the worst thing about frames is that the user can get trapped in your frames. To avoid this, if you ever link to an external site make sure you discard the Infidel frameset. To do this you have to use the target attribute in your link (not needed for mailto links) and send the link to the special target of _top (all lower case)
<a href="http://www.rtsuk.net" target="_top">Click here for RTSUK</a>Okay, this is about as tough as it gets, if you are feeling brave then you can add tables to your web page. As well as telling your browser you want a table, you have to tell your browser when to start a new row, what your column headings are and what each cell (position) of the table contains. Each tag in a table has a closing tag so the <table> is ended with a </table>. This is incredibly important as your page can get very mucked up if you forget to close the table or row tags. (closing a row will close any cells but this is a bad habbit to get into)
You use the following tags to specify a table
<table> and </table> to add a tableSo, within the <table> tags you add any number of <tr> tag pairs and within each of these you add as many <td> tag pairs as you have columns. Use <th> tag pairs just lije <td> but usually you will want this on the first row only
Best show you an example
<table>
<tr>
<th>Heading One</th>
<th>Heading Two</th>
<th>Heading Three</th>
</tr>
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
<td>Row 1 Column 3</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
</tr>
</table>
Now, lets see how that looks
| Heading One | Heading Two | Heading Three |
|---|---|---|
| Row 1 Column 1 | Row 1 Column 2 | Row 1 Column 3 |
| Row 2 Column 1 | Row 2 Column 2 | Row 2 Column 3 |
You can merge table cells by using the colspan and rowspan attributes:
<table>
<tr>
<th>Heading One</th>
<th>Heading Two</th>
<th>Heading Three</th>
</tr>
<tr>
<td rowspan=2>Row 1 and 2, Column 1</td>
<td colspan=2>Row 1, Column 2 and 3</td>
</tr>
<tr>
<td>Row 2 Column 2</td>
<td>Row 2 Column 3</td>
</tr>
</table>
Now, lets see how that looks (I have turned a border on here for clarity)
| Heading One | Heading Two | Heading Three |
|---|---|---|
| Row 1 and 2, Column 1 | Row 1, Column 2 and 3 | |
| Row 2 Column 2 | Row 2 Column 3 | |
You may have noticed that some blocks of text on the Infidel's website appear on a paler background. There is a style defined in the stylesheet called block to enable you do do this. All you have to do to use it is to place a class attribute on any HTML tag you like. This whole paragraph was defined using the tag <p class="block">
If you want to enclose a whole group of paragraphs in a block style you can use the <div> tag and give that the block class like <div class="block"> everything will now be in a block style until you close the tag with a </div>
And here is another paragraph to illustrate the <div> tag. Notice that doing it this way there is no gap between paragraphs like there is after the first paragraph in this section.
Well, that should be pretty much everything you need, it's all the HTML I used to create the entire Whisky Tango Foxtrot site. If you create your pages using this guide you should have great looking HTML and be sure in the knowledge that if ever we redefine the website and change the stylesheet, your page will automatically be part of that new look.
By all means, visit the technical links page on this site to find out more about HTML but be very careful about what you use in creating Infidel web pages. Always try to stick to the guide here or your web page may look totally rubbish if we ever change the styles. In particular do not ever use the FONT html tag, ever! ever! ever! it's totally rubbish and will just clutter up you web page with unmanagable formatting. Your HTML should be for content and layout only. Let the style sheets do the formatting.
Another thing to avoid is the setting of any widths using pixels, when you do this you make big uncompromising assumptions on how bit the user's browser window is. If you have to specify a width then express it as a percentage of the screen. Usually, things like tables are best left to sor tthemselves out. About the only time you may want to use a width is to specify a spacing column, even then, this is probably best done in the style sheets.
It is quite easy to link to several stylesheets (just add another link in the header) and many pages in this site do that, this is a much better solution to overriding any formatting that you don't want or extending the style classes (though I would recommend against that).
gh hf