 |
| ru |
 |
updated 13.07.09 13:46 12-07-09 @ 16:02
Модификатор  
Учимся разговаривать на BB с паладинским акцентом
|
Очень большое количество игроков боится приступить к новостям в первую очередь из-за незнания хтмл, который необходим для того, чтобы не трясти редакторов, а самостоятельно оформлять новость. Что делают в таких случаях? Берут учебник, открывают его... И закрывают по причине «много букв» или «не разжевали». Что же делают в таких случаях? Ищут короткие публикации в интернете или трясут знакомых программеров... Которых нет по причине «lamo». Так что же делают в таких случаях? Открывают сей пост в моём скролле, который, надеюсь поможет разрешить многие вопросы с языками разметки HTML (используется в редакторах  DarkClan и  Mercenaries) и BB-кодами (используются в редакторах  Stalkers,  Paladins,  Tarmans).
Оба языка являются разметочными, то есть используются только для оформления. Несмотря на то, что HTML более развитый и удобный язык, чем BB, последний смертным юзерам должен встречаться намного чаще, чем первый. Используют его в первую очередь по причинам безопасности и удобства пользователей. Действительно, что говорит пользователю тег <a href="">, когда есть понятный [*url=]? Но, в любом случае, BB-код компилируется сервером и выдается пользователю, как чистый HTML, который, в свою очередь, обрабатывает браузер, делая страницу удобочитаемой. Теги же из «запрещённого ХТМЛ'а» перейдут в виде простого текста. Если хтмл везде одинаков, то ббкоды могут различаться в зависимости от сайта. Но основа и там, и там одинакова — это теги.
Что такое теги и с чем его подают
Тегом называют элемент разметки, заключенный в квадратные скобки [] в BB-кодах и угловые <> в HTML. При выводе текста на экран они видны не будут. (В моей матчасти перед bb-тегами будут использоваться звёздочки * во избежание компиляции, а вообще они не нужны). Теги обычно заключают в себе часть текста, которая будет обработана в зависимости от самого тега. Использование происходит двумя путями: либо используют два тега, для открытия и для закрытия, либо только один. При использовании двух тегов существует начальный и конечный теги, между которыми заключён какой-то текст. Конечный отличен от начального тем, что после открывающей скобки расположен слеш /, в остальном тег тот же. Например, между тегами <b>будет заключён полужирный текст</b>. Одиночные же теги не имеют конечного тега, результат выводится на экран один раз, например, как изображения или перенос строки.
Теги можно заключать один в другом. Например, чтобы сделать полужирный курсив, нужно использовать теги один внутри другого. <b><i>полужирный курсив</i></b> и не имеет разницы, в каком порядке размещены теги. Однако есть такое правило (не знаю, как оно влияет на текст, ничего плохого я пока не видел): последний открывающий тег должен быть и первым закрывающим. То есть, варианты <B><I>полужирный курсив</B></I> — исключены. В каком порядке открываются, в таком и закрываются. У некоторых может встать довольно очевидный вопрос: как сделать... например, такой вариант? Полужирный, полужирный курсив, курсив. Впрочем, и ответ напрашивается сам собой: по-тупому. <b>полужирный, <i>полужирный курсив, </i></b><i>курсив</i>. Сие правило имеет место действовать не только в HTML, но и в BB.
У тегов иногда бывают атрибуты. Иногда обязательные, иногда необязательные. При помощи атрибутов задаются какие-либо свойства тега. Для тега ссылки это может быть URL, для изображения — ссылка на изображение и так далее. Атрибуты в HTML выражены более ярко, чем в BB-кодах, с них и начну.
Атрибуты в HTML перечисляются в открывающем теге или единственном теге через пробел. Например, для тега <a> основным атрибутом является href="", в который заключается URL. Например, <a href="http://combats.com/inf.pl?login=Lord of Metal" target=_blank>Повелитель Металла</a> — это ссылка на Повелителя Металла в HTML. Значение атрибута указано после его названия и знака «равно». Если значение атрибута не заключено в кавычки, то считается, что после пробела уже идёт описание следующего атрибута. Можно использовать два вида компьютерных кавычек — " и '. И закрывающая, и открывающая должны быть одного типа. Если вы в значении атрибута хотите использовать тот же вид кавычек, перед ней должно использовать слеш (\" или \').
Использование атрибутов BB зависят от частного случая. В качестве примера возьму BB-коды скроллов, как самые непостоянные.
Тег [*quote] имеет самую похожую на HTML структуру. И пофигу, что его можно использовать без параметров. Атрибут date — это время цитаты, post же содержит ссылку на пост в определённом формате, который я разбирать не стану. В итоге получается что-то вроде [*quote date='11.07.09, 15.09' post='m-12345']текст цитаты[/quote].
В теге [*url] атрибут единственный и название не указывается. Сразу после названия тега ставятся знак «равно» и ссылка. Например, [*url=http://combats.com]текст ссылки[/url]. Без кавычек.
В теге [*hide] атрибута два и никакие знаки «равно» там не нужны. Через пробел — текст ссылки для открытия, текст ссылки для закрытия. Без указания первого, имя для закрытия прописать нельзя, но можно наоборот — указать имя для открытия, а для закрытия стандартное. Например, [*hide "Показать" "Скрыть"]скрытый текст[/hide].
Вот так вот исползуются теги. Эти знания — лишь база, без которой никуда, а не рецепт вселенского счастья. Для WYSIWYG-редакторов (Мерки, Дарки) знание HTML желательно, пусть и не обязательно. Про стилевые таблицы, которые используются только в HTML, расскажу чуть в рамках отдельного поста, а пока — основные теги и рецепт приготовления.
Теги разные, в ассортименте
Теги используются по-разному, например, у Сталкеров нет некоторых BB-кодов, зато редакторы могут использовать HTML. В разных редакторах одинаковый эффект может достигаться разными BB-тегами, об этом подробнее будет сказано.
• Полужирный текст. <b></b> или [*b][/b].
• Курсивный текст. <i></i> или [*i][/i].
• Подчеркнутый текст. <u></u> или [*u][/u].
• Перечеркнутый текст. <strike></strike> (в HTML), [*s][/s] (в скроллах), [*strike][/strike] (у Паладинов).
• Мелкий текст. <small></small> (в HTML), [*s][/s] (у Сталкеров и Паладинов), [*small][/small] (у Тарманов). В скроллах нет.
• Размер текст. <font size=></font> (в HTML). В качестве атрибута указывается размер шрифта в пунктах. Является атрибутом тега font. В большинстве bb-редакторов размера нет, зато есть теги [*big][/big] (у Паладинов и Тарманов) и мелкий текст (см. выше).
• Цветной текст. <font color=></font> (в HTML), [*color=][/color] (в скроллах и у Сталкеров), [*color=#][/color] (у Паладинов), [*font=#][/font] (у Тарманов). Там, где нет октоторпа («решетки» #) можно использовать не только hex-представление цвета, но и название на английском языке (red, yellow, blue и т. д.), как, например, [*color=red]красный[/color] или <font color=red>красный</font>. В редакторе Тарманов обязательно hex-представление с решеткой перед значением, например, [*font=#ff0000]красный[/font]. У Паладинов всё намного хуже: решетку обязательно не ставить, то есть получается кастрация вроде [*color=ff0000]красный[/color]. Вместо этого у них есть теги с самыми популярными цветами — [*red][/red], [*blue][/blue] и так далее. Единственный нормальный тег цвета у Сталкеров и в Скроллах: там можно как ставить решетку перед цветом, так и не ставить; обозначать цвет как английским названием, так и в шестнадцатиричном виде. В HTML является атрибутом тега font. О шестеадцатиричных кодах можно прочитать ниже, выбрать популярные цвета в шестнадцатиричном представлении — у Лебедева.
• Шрифт. <font family=></font> (в HTML), [*font=][/font] (у Сталкеров). Если в HTML даётся полное раздолье типов шрифта, у Сталкеров он ограничен — всего шесть (Arial, Times New Roman, Courier New, Impact, Tahoma, Verdana). В остальных bb-редакторах шрифт менять нельзя.
• Выравнивание по центру. <center></center> (в HTML), [*center][/center] (в Скроллах, в редакторах Сталкеров, Паладинов и Тарманов).
• Выравнивание с правого края. <p align=right></p> (в HTML), [*right][/right] (у Паладинов и Сталкеров), [*rite][/rite] (у Тарманов, бугага). В HTML является атрибутом тега p.
• Цитатная рамка. <blockquote></blockquote> (в HTML), [*quote][/quote] (в большинстве цивилизованных стран). Не знаю, откуда повелась традиция окружать цитату рамкой. У Мерков раньше это был моноширинный шрифт с отступом, но потом они подумали, что это не кошерно и стали использовать просто тег HTML, который вообще кастрированный. Цитатная рамка всюду своя. У Сталкеров коротким аналогом является тег [*q][/q], но использовать можно оба варианта.
• Изображение. <img src=> (в HTML, одиночный тег), [*img][/img] (Скроллы, Сталкеры, Тарманы), [*img=] (Паладины). В HTML и у Паладинов является одиночным тегом, в остальных случаях ссылку на изображение окружают теги.
• Ссылка. <a href=></a> (в HTML), [*url=][/url] (в большинстве стран). В bb-кодах не требуется указывать, что ссылку открывать нужно в отдельном окне — там она открывается по умолчанию. В HTML же для этого нужно дописать атрибут target="_blank".
• Скрытый текст. [*hide "" ""][/hide] (в Скроллах), [*htext=, , ][/htext] (Сталкеры), [*hidden= toshow= tohide=][/hidden] (Тарманы), [*HIDDEN=|][/HIDDEN] (Паладины). Самый кастрированный во всех вариантах тег в HTML достигается при помощи jаvаscript-ов, о которых — ниже. Самый рабочий вариант принадлежит Скроллам, где первый атрибут — текст для открытия, а второй — для закрытия. У Сталкеров в качестве первого атрибута произвольный набор символов (ниже объясню, зачем), в качестве второго — открытие, в качестве третьего — сжатие. Атрибуты разделены запятыми. У Тарманов тот же результат достигается подобной комбинацией, но уже с названиями атрибутов. Первый атрибут (после названия тега непосредственно) — произвольный набор символов, второй — текст для открытия, третий — для закрытия. У Паладинов более-менее приемлимый вариант без рендомной строки, но зато с вертикальной чертой в качестве разделителя. Другой вариант Паладинов с кнопкой вместо ссылки называется HIDDEN2 и используется точно так же.
• Вырезанный текст. [*cut ""][*/cut]. Существует только в скроллах. Суть действия в том, что некоторый кусок поста, заключенный между тегами, появляется только при открытии полной страницы с комментариями. Единственный атрибут влияет лишь на то, какое слово будет использовать как ссылка после слова CUT:. По умолчанию это слово — «Продолжение».
• Информация о персонаже. [*pers][/pers] (в Скроллах и редакторе Сталкеров), [char=] (в редакторе Паладинов). Ссылка на персонажа по форме склонность-клан-ник-уровень-ссылка на инфу. Однако, если последние редакторы Сталкеров и Паладинов загружают только информацию о персонаже на момент публикации, компилируя в BB-коды, тег в Скроллах загружает постоянно актуальную информацию. Минусы тега в скроллах: во-первых, невозможность просклонять никнейм, во-вторых, постоянная перезагрузка информации не позволяет оформлять «архивные» записи. Если же использовать не один тег [*pers], а расписать в BB-кодах, как должно, то мы наткнёмся на лишний пробел после изображения.
• Перевод строки. <br> (в HTML, одиночный тег). В bb-редакторах не представляет никакого интереса, ибо строка переносится автоматически при нажатии enter в редакторе.
Помимо упомянутых выше тегов, многие bb-редакторы БК могут иметь такие теги, как [*city], [*align], [*clan] и другие, которые я рассматривать не стану. Я пользуюсь тегом [*img] и мне хватает.
О многих других тегах и свойствах CSS можно прочесть в HTMLBook.
Шапка-невидимка
Скрытый текст в HTML имеет множество разнообразных вариантов исполнения и подаётся с JS. Довольно изящный вариант Куруфина:
<a href="jаvаscript: void(0);" onclick="if (hidtextid.style.display == '') { this.InnerHTML = 'Показать'; hidtextid.style.display = 'none';} else { this.InnerHTML = 'Скрыть'; hidtextid.style.display = ''; }">Показать</A>
<DIV id='hidtextid' style='display: none;'>Текст</div>
Скрытый текст заключён в теге <div> и имеет свой ID, в данном случае — «hidtextid». Блок скрыт, что отображено через атрибут style="display:none". На самом деле, этот блок можно размещать в любой части страницы, а отнюдь не непосредственно под ссылкой. При нажатии на ссылку происходит проверка div'а: если блок скрыт — то он открывается, а текст ссылки меняется на «Скрыть», в противном случае блок скрывается, а текст ссылки меняется на «Показать». Всё гениальное — просто!
Важно, чтобы во всех четырёх местах использовался одинаковый ID, иначе скрипт возымеет право не сработать или сработать как не стоит. Для различных блоков же требуются различные ID, а на новостной ленте, сами понимаете, одновременно может использовать сто тысяч мульенов таких ID, и если хоть два из них совпадут на одной странице — беда. Поэтому и берутся многосимвольные произвольные строки.
В jQuery есть возможность более изящного использования скрытого текста — а именно toggle(). Об этом прочитать лучше в их личной матчасти.
О ромашках и пионах
Так сложилось, что в Вебе чаще всего применяется шестнадцатиричное представление цвета в модели RGB (red-green-blue), по 256 оттенков на каждый цвет. Так можно представить всего 16 777 216 цветов (16 бит). В данной цветовой модели применяется смешивание трёх основных цветов для получения множества других. Так, 0 красного, 0 зеленого и 0 синего — это чёрный цвет; 255 всех цветов — это белый. Равномерное изменение всех цветов от 0 до 255 представляют собой градиации серого. По подобной цветовой модели работает сетчатка человеческого глаза, поэтому модель стала стандартом на экране. Существуют также цветовые модели CMYK и HSB, но о них лучше почитать в Википедии. В используемом выше hex-представлении представление идёт в виде #RrGgBb, где Rr, Gg и Bb — число от 0 до 255 в шестнадцатиричной системе счисления. Преобразовать числа можно, например... В калькуляторе. Просто меняете режим с Dec на Hex и наоборот.
Tabula rasa
Таблицы — это важно. Таблицы используются не только по назначению, но и как важный элемент интерфейса. Увы, таблиц нет ни в одном BB-редакторе, а только в HTML, но я искренне надеюсь, что  Повелитель Вечности [20] решит эту проблему. А пока что расскажу про таблицы в HTML.
Таблицы имеют достаточно сложную структуру и состоят по крайней мере из трёх тегов. Основной тег — <table> — является описанием таблицы. Чаще всего при описании используются атрибуты cellspacing, cellpadding, border и width. С простого к сложному.
Width — это ширина таблицы. Используют, когда требуется фиксированное значение ширины. Можно присваивать значение как в процентах (width=100%), так и в пикселях (width=100).
Border — это толщина рамки. Рамка получается тупая и убогая, поэтому чаще всего присваивают значение border=0, которое выбирается и по умолчанию. Значение выше 0 отражается только на внешней рамки, об изменении внутри см. ниже.
Cellspacing — это расстояние между ячейками. При значении параметра border>0 увеличение наглядно представлено на толщине рамки между ячейками. Впрочем, ощутимо увеличение оно даже без border'а.
Cellpadding — это расстояние от границ ячейки до его содержимого. Опять же, заметно при наличии border'а, только там увеличивается не толщина рамки, а расстояние от неё до содержимого.
Разумеется, можно использовать и другие атрибуты, как height, style и прочие, но эти являются самыми частыми.
Заполняется таблица «рвами» и «ячейками» по горизонтали. Тег <tr> говорит о начале новой «строки» с несколькими ячейками. Сами теги <td> содержат, простите за каламбур, содержимое. Важно, что ячейки имеют общую границу и нарисовать 3 ячейки в одном «рву» и 4 в другом, сохраняя прежнюю ширину, не удастся... Если не применять один трюк, называемый colspan и rowspan. Эти атрибуты применяются к тегу td и говорят о том, сколько ячеек-колонок объединяет в своей ширине одна эта (colspan, слева направо), либо сколько «рвов» объединяет в своей высоте одна эта (rowspan, сверху вниз). «Стёртые» таким образом ячейки удаляются из других рвов. Наглядный пример:
Ничего особенного в этой конструкции нет. Цветом обозначены «стёртые» ячейки, пунктирной линией — какие были объединены.
А вот и сам код такой таблицы:
<table>
<tr>
<td colspan=2>a1</td>
<td rowspan=2>a2</td>
</tr><tr>
<td rowspan=2>b1</td>
<td>b2</td>
</tr><tr>
<td colspan=2>c2</td>
</tr>
</table>
Впрочем, доступно на пальцах не объяснишь. Гораздо лучше открыть редактор HTML и тренироваться.
Основы рассказал, кажется. Я, конечно, не учитель, но хоть что-то понятно, надеюсь.
Update: Ещё один учебник, который кинула   Sensimiliya [12].
|
Total disscussion threads: 8 Pages: 1
«« « 1 » »»
Disscuss opened for regisered users only.
 | | Choo Joy
12-07-09 @ 16:39
Re: Учимся разговаривать на BB с паладинским акцентом |
 |
|
полезно будет многим :)
спасибо :) |
|
|
|
 | | Man Without Face
20-07-09 @ 17:43
Re: Re: Учимся разговаривать на BB с паладинским акцентом |
|
|
| кому это нужно, того интересует html, бб ограничен, при том везде бб разный. Ссылки на эти учебники в топе яндекса, я бы порекомендовал Intuit 2.0 там вообще много интересного, помимо html. |
|
|
|
 | | Ч_удик
12-07-09 @ 16:42
Re: Учимся разговаривать на BB с паладинским акцентом |
|
|
| Сначало все с этого начинают) а потом внезапный ддос серверов Бк происходит :О |
|
|
|
 |
|
| От числа желающих обучиться? ;_) |
|
|
|
|
|
| Скорее второе ;) |
|
|
|
 | | Элибер
12-07-09 @ 17:09
Re: Учимся разговаривать на BB с паладинским акцентом |
|
|
Рассматриваешь ХТМЛ, так рассматривай его правильно.
Не нужно говорить, что одни и те же буквы, заключённые в разные скобки - это два разных типа написания.
Как пример:
<b>жирный шрифт</b>, в хтмле пишется как - <strong>жирный шрифт</strong>
<i>наклонный шрифт</i> - <em>наклонный шрифт</em>
<s>перечёркнутый шрифт</s> - <strike>перечёркнутый шрифт</strike>
И если уж говорить о чистоте ХТМЛа, то забудь форумные ББ.  |
|
|
|
|
|
Ну, я не писал учебник хтмл, как говорил об этом Дк. И ориентирован этот пост в большей степени на, действительно, бб. :_)
И да. Если в вашем редакторе <b> меняется на <strong>, а <i> на <em> - это не значит, что в чистом ХТМЛ они не работают. :_) Действительно, есть два варианта. А можно написать <span style="font-weight: bold"> :_) |
|
|
|
| | Элибер
12-07-09 @ 17:36
Re: Учимся разговаривать на BB с паладинским акцентом |
|
|
Я не говорила про НАШ редактор.
Я сказала про правильность написания. Ты своим постом пытаешь поднять грамотность у пользователей, но изначально даёшь не корректную информацию.
Писать нужно либо правильно, либо не писать вообще (имхо). |
|
|
|
|
|
| Так в чём некорректность-то? |
|
|
|
 | | Mopo
12-07-09 @ 18:05
Re: Учимся разговаривать на BB с паладинским акцентом |
|
|
| спасибо - приодится мне поздровлять сокланов с покорением пищер ;) |
|
|
|
| | Sensimiliya
12-07-09 @ 21:29
Re: Учимся разговаривать на BB с паладинским акцентом |
|
|
| Когда пришла в клан, то на сайте не было нормального редактора новостей(автоматического) в смысле. Пришлось учить HTML. Язык, к слову, оказался очень интересным. Кстати, мне наверное просто повезло с самоучителем..сейчас уже и не вспомню... Очень замечательно, доступно и легко. Для тех, кто не любит "много букв")) |
|
|
|
| | Sensimiliya
12-07-09 @ 21:33
Re: Учимся разговаривать на BB с паладинским акцентом |
|
|
| нашла ) могу ссылочку дать если надо ) |
|
|
|
|
|
Хорошо бы, вставлю апдейтом. ;_)
А ты новостником в клан шла? ) |
|
|
|
|
|
http://www.postroika.ru/html/
вот он )
Шла новостником ) В клане был кризис.. все новостники покинули клан и новостная просто стояла.. Пришлось спасать положение.. |
|
|
|
|
|
Апнул. :_)
Кризис, по-моему, может быть у топ-кланов, когда новостников нет. На не топовые ленты (может, твоя была в топе, тогда прости за незнание) это не отражается. Или я не прав? |
|
|
|
|
|
В топе мы были очень долго ) правда "в хвосте".
А кризис в клане был не из-за отсутствия новостников )) Скорее отсутствие новостников было следствием кризиса )
На момент моего прихода в клан, казаки не могли себе позволить "забить" на новостную ленту ) |
|
|
|
 |
|
Модя, я не по теме!)
в асю стукнулась, авторизуй |
|
|
|
|
|
| Чво-т не вижу... |
|
|
|
| | Ixia
13-07-09 @ 22:48
Re: |
|
|
| лови телегу) |
|
|
|
|
|
| Я не могу заходить в БК, так бы там и поймал. :-( |
|
|
|
Disscuss opened for regisered users only.
Total disscussion threads: 8 Pages: 1
«« « 1 » »»
|
 |
