[Гайд] Основы html для разработки в сфере l2 кода.

Что нам будет нужно для изучения данного урока?
- NotePad ++
или же любой текстовый редактор. NotePad - удобней, так как можно делать подсветку синтаксиса.
Для начала, что же такое HTML.
HTML (от англ. HyperText Markup Language) - язык гипертекстовой разметки текста.
Многие думают - что знание ХТМЛ (на уровне ява серверов l2) - это пустяк, и там нечего особого нету. Но - это не так. Я думаю, прочитав этот урок вы в этом убедитесь.
Для начала, чтобы вы могли ориентироваться в том что мы будем пытаться делать, укажем где же используется "HTML" в ява сервере.
1. Самое большее (примерно 97%) - это датапак, data/html .
2. В небольшом количестве в ядре (пока нам это не нужно) .
3. В небольших количествах в python scripts ( /scripts/python ).
Основное предназначение наших файлов html в датапаке ява сервера - это диалоги NPC.
Пример : подойдя к любому НПЦ в мире Lineage2, и клацнув на него 2 раза мышкой - мы видем выскочивший диалог(неважно какой) - именно это и есть html часть датапака и именно её мы будем с вами изучать.

Раздел 1. Где какие диалоги хранятся.

Этот раздел я опишу вам для того, чтобы вы немного поняли структуру расположения ХТМЛ файлов в вашем датапаке ява сервера.
Как мы уже выше с вами выяснили, все важные нам файлы (за исключением ядра и питон скриптов) находятся в /data/html (у l2jserver - gameserver/data/html).
Зайдя в эту папку, мы видим большое кол-во папок, находящихся в ней. Для того, чтобы вам немного помочь ориентироваться в этой папке, где хранятся наши диалоги, приведу несколько примеров с характеристикой что в них хранится.


Теперь, я думаю вы будите иметь представление где хранятся наши файлы.

Раздел 2. Как найти файл который мы будем редактировать.

В основном, наши попытки отредактировать тот или иной файл вызваны тем, что мы хотим что то поправить (чей то диалог, какого либо нпс в мире lineage2).
И вот мы сталкиваемся с проблемой - как же найти диалог того или иного NPC?
Раскажу вам 1 из самых простых методов как же это сделать.
Для начала, определим ID того NPC, чей диалог мы собираемся редактировать. Сделать это очень просто. Можно - щелкнуть на NPC в игре shift + click мышки - и получить табличку с его данными, где и будет указан его ID, можно - попробовать найти его ID в базе данных, по таблице npc.sql, можно найти любой пак "Id всего" и найти его ID там. Тут выбирайте что вам более по душе.
Итак, мы определили ID нашего NPC. Запомните, html файлы с диалогами того или иного npc чаше всего (в 99% случаев) совпадает с названием html файла.
Файл, будет иметь вид : id_npc.html.
Для яркого примера, я попытаюсь найти диалог NPC с id 31228. Как я поступаю? Я иду в папку /data/html и выполняю поиск по файлу "31228.htm"
Вот я и нашел тот файл, который мне хочется изменить. Это уже хорошо. Приступим дальше.

Раздел 3. Основные теги используемые в HTML файле диалога NPC.

Итак, сейчас мы уже приступим к пониманию основ, с которыми мы будем работать. Понять основную структуру - важно. Если этот раздел вами будет не усвоен - дальнейшее продвижение будет бессмысленным.
Как основу, обьясню вам каким же может быть тег html.
Контейнерным, это означает что полный тег будет состоять из открытого и закрытого тега. Имеет вид :


Или же :

Одиночным, такой тег как правило с тексте HTML документа стоит один, без закрывающего тега. Чаше всего они осушествляют какую либо разметку или синтаксис.
Пример одиночного тега :



Этот контейнерный тег, "говорит" исполняющей его машине (компьютеру, коду, неважно чему) что начался HTML документ.
Этот тег является обязательным к любому HTML документу.
Тег ставится - в начале документа и в конце документа.
Пример использования тега :


2. Второй по важности тег :


Данный контейнерный тег характеризует начало "основного тела" того или иного диалога. Его наличие - обязательно. Внутри этого тега - идет основное содержимое html диалога, тоесть то, что будет отображено нам.
Пример использования тега :


3. Один из немаловажных тегов :


Данный контейнерный тег отвечает за "заголовок" того или иного документа. Его наличие - не обязательно. Яркий пример - открыв диалог с НПС мы видем в шапке этого диалога его заголовок.
4. Один из широко широко используемых тегов для разметки :



Этот одиночный тег, используется для создания "абзаца". Его использование в тексте, приведет к тому, что следующий за ним текст будет отображен с новой строки.
На примере, это выглядит так :


В диалоге это отобразится вот так :



Как мы видем - текст после
пошол на новую строку, с абзаца.
5. Маловажный, но часто употребляемый тег :


Этот контейнерный тег, отвечает за окраску текста того или иного диалога HTML. При его использовании текст "мой текст" окраситься в желтый цвет.
После преобразования, в игре оно будет выглядить вот так :



6. Еще один тег, используемый для разметки текста :



Этот контейнерный тег, дает исполняемой его машине понять, что текст "наш текст" нужно выделить жирным шрифтом.
После преобразования, будет выглядеть так :



7. Немало важный тег :



Данный хтмл тег - называется "коментарием". То, что находится внутри тега - не считывается исполняющей машиной. Зачастую, данный тег используется для описания "для себя" того или иного участка кода. Это удобно.
Наглядный пример :



Преобразуется в диалоге в такой вид :



Итак, с основными тегами мы завершили. Приведем простой пример использования в диалоге NPC их всех :



В диалоге, оно преобразуется в такой вид :



Вот мы уже научились использовать основные разметочные теги HTML. Это уже хорошо.



Нередко, мы встречаем "табличный" вид расположения в диалогах NPC либо текста, либо кнопок, либо ссылок. Сейчас, мы с вами рассмотрим основные табличные теги.
В HTML, начало и конец таблицы принято отмечать контейнерным тегом :



Как вам известно, любая таблица может содержать - столбцы и строки. Так же и в html - таблица, может содержать как строки, так и столбцы (ячейки).
Для обозначения начала и конца строки, в html принят тег :



Для обозначения ячейки(образовывают столбцы) - принято использовать тег :



А сейчас, включаем все ваше внимание. Важно уловить себе в уме, как же формируется таблица. Так как видя код - нужно "графически" для себя представлять, как же это будет выглядеть. Если этого вам не удастся - редактировать таблицы вы некогда не сможете (грамотно).
Итак, строки и ячейки - образуют общую сетку, или иными словами - саму таблицу.
Для примера, я возьму очень простую таблицу, нам важно понять как же они строятся.




Теперь, покажу вам это наглядно. Очень важно уметь представлять визуально тот или иной код.




Очень важно чтобы вы поняли куда и что попало. Опишу вам словесно этот момент. То, что находится между первым тегом - формирует первую строку, в которой есть две ячейки. Они выстраиваются в этой строке одна за одной (аналогично если их больше). После же второго открытия тега - идет уже вторая строка, которая тоже содержит две ячейки. Они так же в ней выстраиваются одна за одной.
Если вы это осмыслили - значит вы сможете работать с таблицами.
Примеров в html документов - вы найдете уйму.


Данному разделу нужно уделить особое внимание, так как он является одним из сложнейших, и его понимание - даст вам возможность работать и выгибать HTML файлы под себя, как нужно это ВАМ, а не наоборот.
Для прелюдии - мы возьмем обычный HTML тег :



После преобразования этого тега, получим ссылку. Вот её вид :



Это были азы ХТМЛ. Данный тег служит для создания "гиперсылок". Думаю их роль вам известна.
Я их привел здесь не случайно. Данный пример поможет нам ниже понять нечто посложней.
Возьмем типичный тег, образования "гипрссылки" которая будет выполнятся в нашей игре, а мы её должны прописать в нашем хтмл файле. Вот он собственно :



Данный запрос будет принимать значение из бипасса (ядро, кеш) какое то значение, с каким то типом. Для того чтобы это понять, объясню вам каждую букву этого запроса(так как это очень важно). Итак,
action=" .... " - это действие, а точней - ссылка на тот или иной обьект которая будет выполняться при "клике мышкой" по ней.
Теперь, рассмотрим то что стоит в значении запроса "byppas -h npc_%objectid%_тип значение".
byppas -h здесь, дает понять машине, что запрос будет выполнен в кеш, или взят оттуда. byppas - это часть анализатора ядра, останавливаться здесь мы пока не будем.
npc_%objectId% - получает данные об этом npc, и дает понять ява машине от кого выполняется этот запрос, и может ли он быть выполненым.
значение здесь - это либо номер html документа(который выполнится при определенном типе), либо мультиселл файл, либо же sql запрос.
текст ссылки - это то, что будет отображено в диалоге нпс. Она будет подсвечена синим цветом(как ссылка любая) и при клике по ниму - выполнится значение "byppas -h npc_%obiectID%_тип значение".
А вот тип здесь может быть различным. Приведу вам основные типы и методики их обработки.
а) тип = Chat. Это означает, что наш запрос будет направлен на другой html файл. Основной характеристикой использования - является специфика "значения". Так же, значение при этом типе - несет свою специфику. В значении, указываю за частую число какое либо, которое будет "приставлено" к основному HTML файлу.
Возьмем наглядный пример. У нас есть файл html с названием "31228.htm". В этом документе, мы используем запрос(ссылку) :



Так вот, в игре оно отобразится как ссылка, при клике по которой пользователь должен попасть на другой html файл (выше разобрались уже).
На какой же файл он должен попасть? А всё очень просто. В запросе, мы видим значение, которое равно "1". Следуя выше указанному, при клике на этой ссылке - откроется новый файл, с именем 31228-1.htm. Как я и говорил - добавляется "-значение" к имени файла.
б) тип = byu, teleport и другие. При использовании данных типов - значения берутся из наших баз данных. Нам известно, что наши базы данных несут некоторую информацию, к которой может обращаться наш сервер. Глубоко я лезть здесь не хочу, поэтому расскажу поверхностно. Здесь, для понятия этого типа сервером, используется как ява-код сервера так и значения в базе данных(получение и обработка, получение - из базы, обработка - ява код).
Возьмем типичный пример :



Здесь, все аналогично выше изложенному пункту, action и byppas -h, так же и npc_%objectID%.
А вот тип goto - новое для нас. Откуда он получится? Ну здесь доволи непростой механизм для полного объяснения, скажу вам что при обработке ява-кодом типа _goto - получится вот такой механизм : ява машина, обработав нашу ссылку, после объяснения нашего значения в ядре сервера поймет, что она была послана в базу данных, на выборку значений для телепорта. Зачастую - это таблица teleport. В ней, имеются такие значения как "id", "locx", "locy", "locz", "price". Так вот, наше значение - это и есть тот "id" который ява машина выберет из баз данных. В нашем случае, значение = 70, ява машина выберет из баз данных строку, в которой ID будет равен "70". Вот такой не сложный механизм на примере телепорта.
Аналогично, работает и запрос "byu" и другие.
в) тип = multisell. При использовании данного типа в ссылке в хтмл диалоге - будет означать, что при её использовании мы откроем файл, из папки /multisell/ (это произойдет при обработке кода ява машиной). Да, именно этим типом многие реализуют "гм шопы" и прочую дрян.
Рассмотрим принцип работы с типом = multisell.



Здесь - всё аналогично выше указаному(action, byppas -h, npc_%objectid% ). Так же я уже упомянул, что при использовании _multisell = тип будет обработано "значение" = 1111 из папки /data/multisell. В данном случае, значение "1111" при обработке ява-машиной будет приобразовано в получении файла "/data/multisell/1111.xml". Тоесть, значение = 1111, преобразовалось при обработке в ссылку на файл "1111.xml".
Вот мы и рассмотрели механику данного действия.
Заключение этого раздела : типов - много. Они могут быть разных параметров : некоторые обрабатываются только ява машиной, некоторые - ява машиной + запросы в базы данных, некоторые - ява машиной + запрос на гомолог-файл html(одноименный-значение).


Начнем с человечности кода. Это один из важных факторов. Человечный код - это написание кода "наглядным методом", "понятным для человека".
Но, увы, зачастую все пишут(точней копируют, так как нет мозга) при этом делая код - ужасным.
Вот няглядный пример такого извращения :



Вот вам удобно читать такой код? Я думаю - несовсем. При чтении кода - очень важно понимать его структуру, чего не получается сделать выше изложенным методом. Советую вам писать код так, чтобы при :
a) Каждой новой визуальной строке - был абзац в хтмл файле (оно не читается ява машиной).
Пример как делать ненужно :



Как нужно писать :



б) Основные теги (html и body) писать с новых строк.
Пример как нужно делать :



Теперь, переделаем выше изложенное извращение до человеческого вида :



Вот так - в разы удобней и приятней работать с любым HTML файлом.
Удачи тебе начинающий датапакер.
Авторская статья написана для пользователей сайта l2maxi.ru.