HTML File Format

From Bohemia Interactive Community
Revision as of 10:48, 27 October 2020 by R3vo (talk | contribs) (→‎Images: typo)
Jump to navigation Jump to search

Template:SideTOC

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 (de)briefing, see Briefing.html.


File Structure

Each HTML file contains different parts.

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=utf-8">
	<title>PageTitle</title>
</head>
<body>

<!-- This is a comment line -->
<!-- between <body> and </body> you will have to insert your sections -->

</body>
</html>
Be sure to use the proper charset depending on the file encoding:
charset meta field
ANSI
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
ISO 8859-1
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
ISO 8859-15
adds € and œ
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
UTF-8
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Sections

For the HTML Control you have to define at least one section and can have multiple ones.

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 an HTML file with the htmlLoad script command.

Example
<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 different tags you can use. The default one is 'p'.

Description Start Tag End Tag
Paragraph
<p>
</p>
Title lv 1
<h1>
</h1>
Title lv 2
<h2>
</h2>
Title lv 3
<h3>
</h3>
Title lv 4
<h4>
</h4>
Title lv 5
<h5>
</h5>
Title lv 6
<h6>
</h6>

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

Paragraphs Attributes

<p align="center">Paragraph content</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, meaning 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>
Example
<b>Bold text</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 displayed 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 which 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;'.