HTML-Files

From Bohemia Interactive Community
Jump to: navigation, search

Introduction

This article contains information about creating and using HTML-Files for the HTML-Control and not for the briefing.

If you want to write a Briefing.html use this link.

The diffrent Parts

Each HTML-File contains diffrent parts.

The file body

Each HTML-File has values to build a 'body'. For our purpose a valid body look like this: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <meta name="GENERATOR" content="ofp"> <title>PageTitle</title> </head> <body> <! --- This is a comment line ---> <! --- between <body> and </body> you will have to insert your sections ---> </body> </html>

Sections

For the HTML-Control you have to define at least one section but you can have multiple.

Section start
<a name="Sectionname"></a>
Section ends
<hr>

The first section will be shown in the HTML-Control at startup or if you load a HTML-File with the htmlLoad script command. So a valid section will look like this: <p><a name="FirstOne">First Section</a></p> <p>This is the text to display in this section. You can write a lot of text here. Even more the size of the control can display!</p> <hr>

Paragraphs

Text must be written in paragraphs. A Paragraph holds logical text together and defines the default formating of the text. You have seen the normal paragraph tag in the example of the section above. Like (nearly) all in HTML-Files it has a start and an end tag. There are some diffrent tags you can use. The default one is 'p'.

Start Tag
<p>
End Tag
</p>

The other ones are:

  • <h1> </h1>
  • <h2> </h2>
  • <h3> </h3>
  • <h4> </h4>
  • <h5> </h5>
  • <h6> </h6>

You can define a diffrent font and size to each of this paragraph types. This is done in the definition of the HTML-Control.

Paragraphs Attributes

<p align="center"></p>

Comments

Comments will not be displayed. You should use comments to make your file more readable. A comment line starts with '<!' and ends with '>'. You must use both tags within the same line. You should not use comments within paragraphs.

  • Example:

<! --- This is a comment line --->

Tags

LineBreak

Within paragraphs the control will show your text without any new line you wrote in your HTML-File. A new line is parsed like a 'sapce'. But you can use the '<br>' (break) tag, to tell the parser you want to continue the following text on a new line. This tag is a standalone tag.
It doesn't have a start and end tag.

NewLine Tag 
<br>
  • Example:

<p>All this text is displayed on one line. Even there is a linebreak in the Html-File</p> <p>After a LineBreak Tag <br> there will be a new line.</p>

Bold Text

You can highlight some text passages with the bold tag. All text between the start and end tag will be shown in an other font! The font to use with this tag is defined in the HTML-Control.

Start Tag
<b>
End Tag
</b>

Links

With Links you can link to an other section you defined in you html file. The Text (or image) between the tags will be diplayed as link. If you later click on this link, the HTML-Control will show the linked section.
You need to add an "#" to the section name in tag attribute href.

Start Tag
<a href="#Sectionname">
End Tag
</a>
  • Example:

<a name="FirstSec">This is the first section!</a> <p>If click on this <a href="#SecondSec">Link</a> the control will bring up the second section.</p> <hr> <a name="SecondSec">This is the second section!</a> <p>If click on this <a href="#FirstSec">Link</a> the control will bring you back to the first section.</p> <hr>

Images

You can implement images to your control. The image tag is a standalone tag, so it has no end tag. You can specify the height and the width of your control with the height and width attributes. You also have to add the src attribute witch will point to your image.

Image tag
<img src="Image.paa" height="100" width="150">

Special Chars

  • For '<' use '&lt;' (lessthan).
  • For '>' use '&gt;' (greaterthan).
  • For '&' use '&amp;'.