HTML File Format: Difference between revisions

Revision as of 01:02, 11 March 2020

⚠

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 ''. 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 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 '<' (lessthan).
For '>' use '>' (greaterthan).
For '&' use '&'.

@@ Line 1: / Line 1: @@
-== Introduction ==
+{{SideTOC}}
-This article contains information about creating and using HTML-Files for the [[Arma: GUI Configuration#HTML | HTML-Control]] and <u>'''not''' for the briefing.</u>
+{{Important | This article contains information about creating and using HTML files for the [[Arma: GUI Configuration#HTML | HTML Control]] and '''not''' for the briefing.}}
-If you want to write a [[Briefing.html]] use [[Briefing.html | this link]].
+If you want to write a (de)briefing, see [[Briefing.html]].
-== The diffrent Parts ==
-Each HTML-File contains diffrent parts.
-=== The file body ===
+== File Structure ==
-Each HTML-File has values to build a 'body'. For our purpose a valid body look like this:
-<code><nowiki><html>
+Each HTML file contains different parts.
-<head>
-<meta http-equiv="Content-Type"
+=== Body ===
-content="text/html; charset=windows-1250">
-<meta name="GENERATOR" content="ofp">
-<title>PageTitle</title>
+Each HTML file has values to build a 'body'. For our purpose a valid body look like this:
+: <syntaxhighlight lang="html">
+<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 --->
+<!-- This is a comment line -->
+<!-- between <body> and </body> you will have to insert your sections -->
 </body>
 </html>
-</nowiki></code>
+</syntaxhighlight>
+{{Important |
+Be sure to use the proper charset depending on the file encoding:
+{{{!}} class{{=}}"wikitable"
+! charset !! <tt>meta</tt> field
+{{!}}-
+{{!}} ANSI {{!}}{{!}} <syntaxhighlight lang="html"><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></syntaxhighlight>
+{{!}}-
+{{!}} ISO 8859-1 {{!}}{{!}} <syntaxhighlight lang="html"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></syntaxhighlight>
+{{!}}-
+{{!}} ISO 8859-15<br><small>adds &euro; and &oelig;</small> {{!}}{{!}} <syntaxhighlight lang="html"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15"></syntaxhighlight>
+{{!}}-
+{{!}} UTF-8 {{!}}{{!}} <syntaxhighlight lang="html"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></syntaxhighlight>
+{{!}}}
+}}
 === Sections ===
-For the [[Arma: GUI Configuration#HTML | HTML-Control]] you have to define at least one section but you can have multiple.
-; Section start: &lt;a name="Sectionname"&gt;&lt;/a&gt;
+For the [[Arma: GUI Configuration#HTML | HTML Control]] you have to define at least one section and can have multiple ones.
-; Section ends: &lt;hr&gt;
+; Section start
-The first section will be shown in the [[Arma: GUI Configuration#HTML | HTML-Control]] at startup or if you load a HTML-File with the [[htmlLoad]] script command. So a valid section will look like this:
+: <syntaxhighlight lang="html"><a name="Sectionname"></a></syntaxhighlight>
-<code><nowiki><p><a name="FirstOne">First Section</a></p>
+; Section ends
+: <syntaxhighlight lang="html"><hr></syntaxhighlight>
+The first section will be shown in the [[Arma: GUI Configuration#HTML | HTML Control]] at startup or if you load an HTML file with the [[htmlLoad]] script command.
+; Example
+: <syntaxhighlight lang="html">
+<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>
-</nowiki></code>
+</syntaxhighlight>
 === 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'.
+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.
-;Start Tag: &lt;p&gt;
+There are some different tags you can use. The default one is 'p'.
-;End Tag: &lt;/p&gt;
-The other ones are:
+: {| class="wikitable"
-* &lt;h1&gt; &lt;/h1&gt;
+! Description !! Start Tag !! End Tag
-* &lt;h2&gt; &lt;/h2&gt;
+|-
-* &lt;h3&gt; &lt;/h3&gt;
+| Paragraph || <syntaxhighlight lang="html"><p></syntaxhighlight> || <syntaxhighlight lang="html"></p></syntaxhighlight>
-* &lt;h4&gt; &lt;/h4&gt;
+|-
-* &lt;h5&gt; &lt;/h5&gt;
+| Title lv 1 || <syntaxhighlight lang="html"><h1></syntaxhighlight> || <syntaxhighlight lang="html"></h1></syntaxhighlight>
-* &lt;h6&gt; &lt;/h6&gt;
+|-
-You can define a diffrent font and size to each of this paragraph types. This is done in the definition of the [[Arma: GUI Configuration#HTML | HTML-Control]].
+| Title lv 2 || <syntaxhighlight lang="html"><h2></syntaxhighlight> || <syntaxhighlight lang="html"></h2></syntaxhighlight>
+|-
+| Title lv 3 || <syntaxhighlight lang="html"><h3></syntaxhighlight> || <syntaxhighlight lang="html"></h3></syntaxhighlight>
+|-
+| Title lv 4 || <syntaxhighlight lang="html">h4></syntaxhighlight> || <syntaxhighlight lang="html"></h4></syntaxhighlight>
+|-
+| Title lv 5 || <syntaxhighlight lang="html"><h5></syntaxhighlight> || <syntaxhighlight lang="html"></h5></syntaxhighlight>
+|-
+| Title lv 6 || <syntaxhighlight lang="html"><h6></syntaxhighlight> || <syntaxhighlight lang="html"></h6></syntaxhighlight>
+|}
+You can define a different font and size to each of this paragraph types. This is done in the definition of the [[Arma: GUI Configuration#HTML | HTML Control]].
 ==== Paragraphs Attributes ====
-&lt;p align="center"&gt;&lt;/p&gt;
+: <syntaxhighlight lang="html"><p align="center">Paragraph content</p></syntaxhighlight>
 === Comments ===
-Comments will not be displayed. You should use comments to make your file more readable. A comment line starts with '&lt;!' and ends with '&gt;'. You must use both tags within the same line. You should not use comments within paragraphs.
-* Example:
+Comments will not be displayed. You should use comments to make your file more readable. A comment line starts with '&lt;!--' and ends with '--&gt;'. You must use both tags within the same line. You should not use comments within paragraphs.
-<code><nowiki><! --- This is a comment line --->
+; Example
-</nowiki></code>
+: <syntaxhighlight lang="html"><!-- This is a comment line --></syntaxhighlight>
 == 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 '&lt;br&gt;' (break) tag, to tell the parser you want to continue the following text on a new line. This tag is a standalone tag. <br> It doesn't have a start and end tag.
-;NewLine Tag :&lt;br&gt;
+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 '&lt;br&gt;' (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.
-* Example:
+; NewLine Tag
-<code><nowiki><p>All this text is displayed
+: <syntaxhighlight lang="html"><br></syntaxhighlight>
-on one line. Even there is a linebreak in the Html-File</p>
+; Example
+: <syntaxhighlight lang="html">
+<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>
-</nowiki></code>
+</syntaxhighlight>
 === 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 <u>font</u>! The font to use with this tag is defined in the [[Arma: GUI Configuration#HTML | HTML-Control]].
-;Start Tag: &lt;b&gt;
+You can highlight some text passages with the bold tag. All text between the start and end tag will be shown in an other <u>font</u>! The font to use with this tag is defined in the [[Arma: GUI Configuration#HTML | HTML Control]].
-;End Tag: &lt;/b&gt;
+; Start Tag
+: <syntaxhighlight lang="html"><b></syntaxhighlight>
+; End Tag
+: <syntaxhighlight lang="html"></b></syntaxhighlight>
+; Example
+: <syntaxhighlight lang="html"><b>Bold text</b></syntaxhighlight>
 === 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 [[Arma: GUI Configuration#HTML | HTML-Control]] will show the linked section.<br>
-You need to add an "#" to the section name in tag attribute ''href''.
+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 [[Arma: GUI Configuration#HTML | HTML Control]] will show the linked section.<br>
-;Start Tag: &lt;a href="#''Sectionname''"&gt;
+You need to add an "#" to the section name in tag attribute <tt>href</tt>.
-;End Tag: &lt;/a&gt;
+; Start Tag
-*Example:
+:<syntaxhighlight lang="html"><a href="#Sectionname"></syntaxhighlight>
-<code><nowiki><a name="FirstSec">This is the first section!</a>
+; End Tag
+: <syntaxhighlight lang="html"></a></syntaxhighlight>
+; Example
+: <syntaxhighlight lang="html">
+<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></nowiki></code>
+<hr>
+</syntaxhighlight>
 === 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:&lt;img src="Image.paa" height="100" width="150"&gt;
+; Image tag
+: <syntaxhighlight lang="html"><img src="Image.paa" height="100" width="150"></syntaxhighlight>
 == Special Chars ==
 * For '&lt;' use '&amp;lt;' ('''l'''ess'''t'''han).
 * For '&gt;' use '&amp;gt;' ('''g'''reater'''t'''han).
 * For '&amp;' use '&amp;amp;'.
+[[Category:ArmA: File Formats]]

HTML File Format: Difference between revisions

Revision as of 01:02, 11 March 2020

Contents

File Structure

Body

Sections

Paragraphs

Paragraphs Attributes

Comments

Tags

LineBreak

Bold Text

Links

Images

Special Chars

Navigation menu

HTML File Format: Difference between revisions

Revision as of 01:02, 11 March 2020

File Structure

Body

Sections

Paragraphs

Paragraphs Attributes

Comments

Tags

LineBreak

Bold Text

Links

Images

Special Chars

Navigation menu

Search