HTML File Format: Difference between revisions
m (→LineBreak: typo) |
Lou Montana (talk | contribs) m (Text replacement - "{{SideTOC}}" to "{{TOC|side}}") |
||
| Line 1: | Line 1: | ||
{{ | {{TOC|side}} | ||
{{Important | This article contains information about creating and using HTML files for the [[Arma: GUI Configuration#HTML | HTML Control]] and '''not''' for the briefing.}} | {{Important | This article contains information about creating and using HTML files for the [[Arma: GUI Configuration#HTML | HTML Control]] and '''not''' for the briefing.}} | ||
Revision as of 01:39, 29 December 2020
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>
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 'space'. 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 '<' (lessthan).
- For '>' use '>' (greaterthan).
- For '&' use '&'.