Emudevs - MMORPG Development

Immerse yourself in a world of limitless possibilities and open the gateway to mmo emulation.

HTML Window Guide

AzukaChan Japan

Staff
Staff

0

0%

Status

Offline

Posts

48

Likes

89

Rep

4

Bits

2,742

1

Years of Service

LEVEL 23
215 XP
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:
xZRmFNU.png

Without Scroll Bar:
jweUTrL.png
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>
SxDezwm.png
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>
3u0VGtj.png
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>
qQBmNd4.png
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>
ZEtC5GY.png

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>

aMMRtfJ.png
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>

LUnjjIR.png
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>
toBYkll.png

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>
1jeFefb.png

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>
FWt7npv.png
<combobox width=80 var="comboList" list="Choice 1;Choice 2;Choice 3">

2EoAwla.png
<edit width=80 var="editName">

WaI6nVR.png
<edit width=80 var="editName2" type="password">

zIWxK1o.png
<edit width=80 var="editName3" type="number">

Guide is not yet finished. This message will be removed once its completed.
Tabs > Spaces
 
Reactions:
Liked by 2 members:

splicho

キューティー ( ✿ •̀ ‸ •́ ✿ )
Administrator

3

100%

Status

Posts

872

Likes

773

Rep

6

1

Years of Service

LEVEL 58
81 XP
Sick guide! This is definitely useful :catKISS:
 

2,407

1,079

8,786

Top