HTML Window Guide

AzukaChan · Jan 12, 2024

The Basics of HTML
This section covers basic HTML formatting.

HTML:

<html>
   <head>
   <title>Text</title>
   </head>
   <body>
     Content of the page
   </body>
</html>

Adding <html noscrollbar> to your html will remove the scroll bar.
This is only available for HighFive (H5) Client and beyond.

HTML:

<html noscrollbar>
   <head>
   <title>Text</title>
   </head>
   <body>
     Content of the page
   </body>
</html>

With Scroll Bar:

Without Scroll Bar:

You can add a background image by using the 'imgsrc' string in your html tag.

HTML:

<html imgsrc="l2ui_ch3.tutorial_img10">
   <head>
   <title>Text</title>
   </head>
   <body>
     Content of the page
   </body>
</html>

You can change the title of the window by editing the <title> tag within the html.

HTML:

<html>
   <head>
   <title>Text</title>
   </head>
   <body>
     Content of the page
   </body>
</html>

You can use <br> & <br1> tags to perform "Line Breaks".

HTML:

<html>
   <head>
   <title>This is my title</title>
   </head>
   <body>
     Text Line 1 <br1>
     Text Line 2 <br>
     Text Line 3
   </body>
</html>

You can change the color and size of your text by using the <font> tags.
It is also possible to change the font you are using, however this only works for the HighFive (H5) Client and higher.

HTML:

<font name="hs16">Big Text</font>
<font color="000000">White Text</font>

Buttons and Bypasses
This section covers how to create buttons and use bypasses.

There are 3 types of prefixes for the <a action=""> tag:

HTML:

<a action="bypass -h npc_%objectId%_Chat 1">

Used for NPC dialogue windows and closes the current page upon click. It can also be used in Community Board, but NOT IN INTERLUDE!

HTML:

<a action="bypass npc_%objectId%_Chat 1">

Can be used in the same instance as "bypass -h", however this will not close the window after the bypass is clicked.

HTML:

<a action="bypass link data/html/merchant/50001.htm">

- Used to open a specific html, regardless of npc_%objectId%.

Code:

      <a action="bypass -h npc_%objectId%_Chat 1">Normal</a>
      <font color="b31a1a"><a action="bypass -h npc_%objectId%_Chat 1">Colored</a></font>

HTML:

<html>
   <head>
      <title>Text</title>
   </head>
   <body>
      <a action="bypass -h npc_%objectId%_Chat 1">Normal</a>
      <font color="b31a1a"><a action="bypass -h npc_%objectId%_Chat 1">Colored</a></font>
   </body>
</html>

L2UI_CT1
- Represents a file within your server patch.

Button_DF_Down
- Represents an image (in this case, an image of a button) within said file.

fore
- Image of the button that shows up when mouse cursor is away

back
- Image that shows when player clicks on the button

What about when cursor is on image, but it's not clicked? The game client takes the content of fore and adds "_over" at the end.
For example "L2UI_CT1.Button_DF_Over". It's NOT possible to change that path.

Code:

<button value="Button Name" action="bypass -h npc_%objectId%_Chat 1" width="100" height="30" back="L2UI_CT1.Button_DF_Down" fore="L2UI_CT1.Button_DF">

HTML:

<html>
   <head>
      <title>Text</title>
   </head>
   <body>
      <button value="Button Name" action="bypass -h npc_%objectId%_Chat 1" width="100" height="30" back="L2UI_CT1.Button_DF_Down" fore="L2UI_CT1.Button_DF">
   </body>
</html>

This method uses sysstring-e.dat and handled by the Client.
Only ID's 2265, 2266 and 2267 are available.
Not available in Interlude

Code:

<a action="url !2265">Website</a>
<button value="Button Name" action="url !2265" width="100" height="30" back="L2UI_CT1.Button_DF_Down" fore="L2UI_CT1.Button_DF">

HTML:

<html>
   <head>
      <title>Text</title>
   </head>
   <body>
      <button value="Button Name" action="url !2265" width="100" height="30" back="L2UI_CT1.Button_DF_Down" fore="L2UI_CT1.Button_DF">
   </body>
</html>

Table Formatting
This section covers basic table formatting.

Useful Information
<tr> - New Line
<td> - New Column
Width - The Width of the Table
Fixwidth - Simple text will not resize the table in width.
Height - The Height of the Table

HTML:

<table width="300">
    <tr>
        <td width="100">
            Text 1
        </td>
        <td width="100">
            Text 2
        </td>
        <td width="100">
            Text 3
        </td>
    </tr>
    <tr>
        <td width="100">
            Text 4
        </td>
        <td width="100">
            Text 5
        </td>
        <td width="100">
            Text 6
        </td>
    </tr>
</table>

Useful Features
This section covers useful features you can utilize.

Code:

<combobox width=80 var="comboList" list="Choice 1;Choice 2;Choice 3">
<edit width=80 var="editName">
<edit width=80 var="editName2" type="password">
<edit width=80 var="editName3" type="number">

HTML:

<html>
   <head>
     <title>This is my title</title>
   </head>
   <body>
      <combobox width=80 var="comboList" list="Choice 1;Choice 2;Choice 3">
      <edit width=80 var="editName">
      <edit width=80 var="editName2" type="password">
      <edit width=80 var="editName3" type="number">
   </body>
</html>

Guide is not yet finished. This message will be removed once its completed.
Tabs > Spaces

splicho · Jan 12, 2024

Sick guide! This is definitely useful :catKISS:

HTML Window Guide

AzukaChan

splicho

3,161

1,194

9,322