Battlereports.com your home for Starcraft Home Forum Starcraft Tournaments

"this is so fucking bad I want to kill myself and then in my will leave a request to have you banned from the internet."
-Fox^1




Phiber Optik's Guide to using HTML in reports



This guide is designed to teach the three most used techniques in report writing. To effectively use this guide, you need to have a basic knowledge of HTML. If you do not have this knowledge, please visit this site to learn HTML from the very beginning.

This guide will teach you:

  • How to colorize and align text
  • How to link images and align them within the text
  • How to use FTP to upload images to your website; and free websites that allow you to link images

    After you read this guide, be sure to check out Mark4's, CB's, and YRM's Guides to report writing and image editing. These guides will help you out alot with the creation of your reports!



    Section 1



    Text with color



    Ever wonder how writers sometimes use colored text in their reports to highlight names, for example? This makes it much easier to see who is attacking whom in a complex game, and also adds enjoyment to the report itself. This first part will teach you the font tag and its best use. Note: I have put all HTML tags in red to make it easier to read.

    The font tag, when used in context, changes the color of the text between the opening and closing tags. You would normally type the text to be affected by the font tag as follows:

    <font>This text is affected by the font tag</font>

    To make the text a certain color, you would add inside that first font tag the attribute color="". This is easier to understand if you look at the following example. You want the word "Bob" to come out blue in your report, so you type:

    <font color="blue">Bob</font>

    Inside the font tag you place color="", with the name of a color in between the quotes. The name of the color is called the value of the attribute. The attribute color="" tells the <font> tag that you want to specify the color of the text. The value (the color you want) tells the attribute what color to make the text. You can pick only a basic color if you are typing an actual name of a color between the quotes- otherwise you must pick a hexadecimal triplet (such as #000000) to be placed in the quotes. Basic colors are: blue, green, red, yellow, white, black, limegreen, orange, etc. Do you understand it now? All you have to do to create colored text is use the color="" attribute within the first font tag, such as

    <font color="color">Text to be colored</font>

    See? Now you know how to change the color of text! (Don't forget to close off the font tag with </font> or all of your text will end up as the same color!)



    Text alignment



    Text alignment is a neat little thing you can do to create headings, wrap text next to images, or make your text line up straight. There are a few ways to align text, but the most common is to use the align="" attribute in your heading, paragraph, or other less used tags. The heading and paragraph tags are very common alignment tags in battle reports.

    As you know, the <p> tag creates a paragraph of text. The <p> tag has the attribute align="" with the values left | right | center | justify that allow you to align your text left or right, center it, or have it justified across the screen. To use this attribute, all you have to do is place the code align="" within the paragraph tag, and then specify the value for the attribute (which tells the attribute what to do. For example, in <p align="left"> the value left tells the attribute align to align the text to the left). This is just like when you placed the attribute color within the <font> tag. Say you wanted the words: "Bob died a painless death from overdosing on stimpacks" aligned to the right of the screen. You would put:

    <p align="right">Bob died a painless death from overdosing on stimpacks</p>

    This same method can be used with the heading tags h1-h6, which are used to create a heading for a page with varying sizes, from h1 (the largest heading tag) to h6 (the smallest heading tag). Use headings on the top of your report, or somewhere within your report where you want attention to be drawn to. The heading tags have the attribute align="", and the values left | right | center | justify, the same as the paragraph tag. Use this attribute in the same way. For example, say you want the title "WAR" at the top-center of your report. You would type the following code (using a 1st heading):

    <h1 align="center">WAR</h1>

    The value center tells the attribute align="" that the heading is to be centered.
    It's that easy!

    One final tag, the <center> tag, does just what it says- it centers everything between the opening (<center>) and closing (</center>) tags. Use it to center images, text, or whatever else you want. See the example below.

    <center>This text will be centered</center>

    You can use the <center> tag for just about anything you want centered, but its most common uses are for centering text and images. Got all this? Great!



    Section 2


    Linking Images to your report


    When you normally write a battle report, you have the option of also adding pictures to the report through use of an image uploading program. Your images appear at the bottom of the report, and so cannot appear within the text itself. This is fine if it doesn't matter to you where your images are, but if you would like to have your images actually inside the text, you will have to learn about:

    <img src="">

    The image tag is used to link an image, which is kept on your website somewhere else, to your report. The image tag has two parts that are necessary for it to work. The first part is the <img part of the tag. This part just tells your browser that an image will be linked to your report. The second part of the tag is the src=""> part of the tag. This is crucial for the link to work, for inside the quotes you would specify the URL address to your image. This is an easier concept to grasp if you look at the following example (assume that your image is located on your website at http://www.geocities.com/greatname/ and is called pic1.gif

    <img src="http://www.geocities.com/greatname/pic1.gif">

    The above link would call from your website the image pic1.gif. Every time you link an image, use this method. Got it? Great! Now you can link images right into your report! Note: you need to have a website in order to be able to do this, and your website must have the images you want to link. For more information about getting a website and uploading images, see section 3.



    Image alignment


    Image alignment is a hot topic today when writing reports. Having wide images that fit the whole screen is ok, but why do that when you can have your text and images on the same line! Since you already know how to link images to your report, I will now teach you how to align those images in ways that allow both your story, and your pictures to rest on the same line. First off, you have to crop your images so that they are smaller than the standard width for a battle report (which is 500 pixels). Read YourRoleModel's Guide to Graphics for image editing info. It helps alot if your images are around, say, 100 pixels wide. This allows text to wrap around the images nicely, and give you more space to fit your text in. As I always say, seeing makes it easier to understand what is happening. Here is an example:
    See this image to the right? I am able to align this image with the text to produce a neato effect. I did this through use of, you guessed it, the align="" attribute, which goes inside the <img src=""> tag. The code for this example is:

    <img src="battletest.jpg" align="right">

    When you want your text to be next to your images, simply align the images left or right. When you then type text, it will fill the extra space next to the images (either to the left, for right aligned images; or to the right, for left aligned images).
    Now you know how to wrap text next to images!

    What happens though if you want to stop wrapping text next to an image? A normal line break (<br>) just won't do it- it will only break the current line and start wrapping text next to the image on the next line down. What you have to do in this case is use the clear="" attribute of the <br> tag with the value of all. The value all tells the attribute clear to stop wrapping the text next to your image.
    This text is now starting below the image because I put <br clear="all"> to stop text wrapping! Got it? All right!



    Section 3


    FTP- what it is, where to get it, and how to use it


    FTP stands for file transfer protocol. The FTP system is the primary method of data transfer over the internet- you use FTP to upload your files and images to your website. This can be a complex process, so this guide is here to help you out.

    First off, you need FTP software to use FTP. You can download a great FTP software program from my website at this location. This software comes as a zip file so you are going to have to unzip it to install it. You can get a free version of Winzip at http://www.winzip.com. Once you get the software (WS_FTPLE), install it by double clicking the INSTALL.EXE file and you will be guided through the setup. This software has been scanned for viruses (which it of course doesn't contain). After you have installed WS_FTPLE, all you have to do is customize it for your own needs. Here is how to do that.

    Start up the program from your START>Program>WS_FTPLE menu and you will see a window about the size of 1/3 of your screen that has 2 boxes separated by a divider. If a smaller window does not automatically pop up click the Connect button in the lower left corner of the current window. A smaller window will pop up, asking for a number of specifications. Don't fret, I am going to go over each option so that you know what to do in the future. Here is a list of each blank and what is does. Note that you should be on the first tab of the smaller window (called General).

    • Profile name-
    • This fill in can be whatever you want. It is just a measure for you to know where you are connecting, but not the FTP. I like to typically fill in the completely URL of the website that will be connected to (ie, http://www.geocities.com/phiberoptik98/). This way I know that I am about to connect to my geocities site, and not somewhere else.
    • Host name-
    • This blank is where you should fill in the host which you wish to connect to. Lost? Don't worry, this is a confusing concept to grasp. It took me a while to figure out what to put in here, but I did, so here goes. By Host Name, the software is asking you for the owner (typically) of your webservice. This can be geocities, tripod, angelfire, xoom, or whatever your service is. What you need to fill in here is the FTP address of your webservice, not YOUR site address, but the host address. Usually it is easy to find the host address. You don't even need to look for it necessarily, because ftp host addresses are stereotypical. They always start with ftp. and end with (no commas) .com, .net, .org, etc. The middle name is usually the name of the company that owns the websites. For example, here are a few common ftp host addresses:
      • For Xoom, the ftp host address is ftp.xoom.com
      • For Geocities, the ftp host address is ftp.geocities.com
      • For Tripod, the ftp host address is ftp.tripod.com
      • For Angelfire, the ftp host address is ftp.angelfire.com
      • For [whateverisp], the ftp host address is ftp.whateverisp.com
      See a pattern? The Ftp Host address is usually ftp.[company].com! Easy as that. Sometimes however, the FTP host address isn't so blatant, and you will have to find it out from a message board, or the FAQ for your webservice, or if you just can't find it, feel free to send to me the company's website URL and I will find your ftp host name for you. Got it? Good!
    • Host Type-
    • This is simply the type of host your webservice is using to run their webpages (ie Unix, windows, dos, etc). This field is best left as Automatic Detect unless you are 100% sure what your host is running. When in doubt, leave it on auto. Auto works 99.99% of the time.
    • Member name-
    • This is the name you created when you signed up for your webpage. Type it exactly as you would when logging on to edit your member profile on your webservice. Also uncheck the Anonymous checkbox to the right of the member name field
    • Password-
    • This field requires you to enter the password you chose when you signed up for your website. Type carefully when you enter this because you cannot get FTP access without it. You may want to also check the Save Password box so you do not have to type it in again.
    • That's it
    • on the General Tab!
    On the next tab over, the Startup Tab, you can make your ftp.ing easier.
    • Local Host Directory-
    • Leave the remote host directory alone, and in fact, leave everything else alone unless you know what you are doing. The startup tab allows you to customize what folders are selected when you run the software. Under Local directory specify the path name where you want the local files to be kept. That's it! Make sure you have done all the steps correctly by checking out the image below (there are two screens).

      Now that you are hooked up, you can actually move files around! Yay! A few tips before you go on...........

    • The left side of the window is for files on your hard drive, the right side of the window is for files on your remote website.

    • To transfer files between systems, double click the file of interest or click the file and then the or buttons to send the file!
    • Leave the transfer type as Binary, not ASCII
    • That's it! You can FTP files! =)


    Free websites that allow image linking



    To link images to your report, you need to have a website. Fortunately, many services now offer free websites for you to enjoy. Some of these services, however, do not allow you to link images. Here is a list of free webservices and what they offer:

    • Geocities- My favorite service. Geocities gives you a whopping 15 MB of space. They have small, unobtrusive banners and let you link images to your reports. Highly recommended *****
    • Tripod- Also one of my favorite services, Tripod lets you utilize forms by giving members a free cgi-bin directory. Tripod offers a good (10 MB) amount of space, and you can avoid all banners by minimizing the first one that pops up. As far as my tests have shown, Tripod does let you link images to reports. YourRoleModel mentioned to me the other day that this was not possible, so I'm not 100% positive about this fact. So far, however, I have been able to link my images with Tripod. Give it a try, and if it doesn't work for you, go to geocities. Well-recommended ****
    • Angelfire- Angelfire gives you 10 MB of space and they allow you to link images to your reports. They have a semi-annoying banner and not as much space as geocities. Angelfire is much better than Xoom, in my opinion. Recommended ***
    • Xoom- Promises unlimited space, the one good aspect of this webservice. Unfortunately, Xoom does not allow you to link images anywhere, and they have an annoying banner that is pretty detracting from a page. Not recommended **


    Well I hope this guide has helped you learn the basics of using HTML in your reports. Should you have any other questions, please e-mail me and I will be happy to help. Good luck and have fun writing reports!