Центр справки и поддержки rps.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Основные теги HTML.

Сообщений 1 страница 7 из 7

1

В этой теме будут рассмотрены основные теги языка HTML, которые помогут Вам при работе с форумом.

Следует запоснить, что язык HTML использует теги. Они выглядят вот так: <ТЕГ> или так </ТЕГ>. Возникает вопрос, в чём же разница между первым и вторым тегом. Дело в том, что тег <ТЕГ> называют открывающим (то есть он должен стоять в самом начале), а тег </ТЕГ> называется закрывающим, то есть он должен стоять самым последним. Вы наверное заметили, что закрывающий и открывающий теги различаются лишь косой чёрточкой.
Обратите внимание! У некотрых тегов НЕТ закрывающего! Например тег вставки изображения <img src="АДРЕС" > имеет только начальный.

Теперь о том, как использовать эти самые теги.
Допустим, мы хотим сделать текст жирным. Для этого нам потребуется тег жирности текста <b>. Далее делаем вот что: ставим открывающий тег ( в данном случае <b>), затем пишем тот текст, который должен быть жирным, и закрываем всё это закрывающим тегом, то есть к начальному просто добавьте косую чёрточку ( в нашем случае это </b>). В результате, у нас должен получиться такой код:

Код:
<b>ваш текст</b>

Как результат, получится то, что вы хотели, текст станет жирным:

ваш текст

Запомните общее правило построения кода в языке HTML:

<ТЕГ> содержимое</ТЕГ>


В качестве содержимого может выступать текст, картинка и т. п.

Можно использовать несколько разных тегов вместе. Главное, соблюдать их последовательность:

<ТЕГ1> <ТЕГ2> содержимое</ТЕГ2></ТЕГ1>


Обратите внимание на нумерацию тегов. Это их правильное расположение, в противном случае Ваш код работать не будет.

Некоторые теги могут содержать дополнительные пераметры, которые дают им дополнительные возможности. Схема установки параметров в теги такова:

<ТЕГ ТУТ ПАРАМЕТР> содержимое</ТЕГ>


Например, если при создании таблицы мы хотим сделать  её фон заданного цвета, та в открвающий тег <table> мы вводим дополнительный параметр, как указанно выше:

Код:
<table bordercolor="цвет">...</table>

Количество параметров, которые вы можете указать, не ограничено.

Ниже приведены теги, которые необходимы для форума, а так же дополнительные параметы к ним. Я намеренно не стану приводить тут все существующие теги и параметры, так как воспользуетесь ими вы врятли.

0

2

Теги для работы с текстом:

<b>....</b> - определяет жирный текст;

<i>....</i> - определяет наклонный текст;

<u>....</u> - определяет подчёркнутый текст;

<s>....</s> - определяет зачёркнутый текст;

<font color="цвет"> ....</font> - определяет цвет текста(старый вариант);
<span style="color: цвет">....</span> - определяет цвет текста (новый вариант);

<pre>....</pre> -определяет  предварительно форматированный текст http://forumupload.ru/uploads/0002/90/00/196-1.jpg( моноширинный текст);

<sub>....</sub> - определяет текст нижнего регистра http://forumupload.ru/uploads/0002/90/00/199-1.jpg;

<sup>....</sup> - определяет текст верхнего регистра http://forumupload.ru/uploads/0002/90/00/198-1.jpg;

<blockquote>....</blockquote> - определяет цитату http://forumupload.ru/uploads/0002/90/00/202-1.jpg;

<q>....</q> - определяет текст "В кавычках". (цитата в тексте);

<p> - определяет разделение текста на параграфы  http://forumupload.ru/uploads/0002/90/00/203-1.jpg;

<code>....</code> - определяет блок для кода http://forumupload.ru/uploads/0002/90/00/207-1.jpg;

<font size="число">....</font> - определяет размер шрифта(старый вариант);
<SPAN style="font-size:число от 1  до 7">....</span> - определяет размер шрифта (новый вариант);

<font face="шрифт1">....</font> - определяет вид шрифта (старый вариант);
<SPAN style="font-style: italic">....</span> - определяет вид шрифта(новый вариант);

<abbr>АББРЕВИАТУРА</abbr> - определяет аббревиатуры  http://forumupload.ru/uploads/0002/90/00/208-1.jpg;
Параметры:
    -title="...." - определяет подсказку при наведении на аббревиатуру.
Возможные значения: любой текст;

<nobr>....</nobr> - определяет отображение текста в одну строку без переносов (с полосой прокрутки);

<small>....</small>- определяет шрифт, меньше на единицу от стандатного  http://forumupload.ru/uploads/0002/90/00/209-1.jpg;

<big>....</big> - определяет шрифт, больший на единицу от стандартного  http://forumupload.ru/uploads/0002/90/00/210-1.jpg;
<bdo>...</bdo> - определяет направление чтения шрифтов.
Параметры:
    -dir="...." - определяет направление чтения текста.
Возможные значения:
      - ltr - слева направо http://forumupload.ru/uploads/0002/90/00/212-1.jpg;
   
      - rtl - справа налево http://forumupload.ru/uploads/0002/90/00/211-1.jpg.

0

3

Теги для работы с изображениями:

<img src="АДРЕС"> - определяет вставку изображения. Адрес картинки можно получить, залив её на специализированный сервис хранения изображении.
Параметры:
    - align="...." - определяет положение изображения относительно остальных объектов на странице.
Возможные значения:
          -absmiddle
          -baseline
          -bottom
          -left
          -middle
          -right
          -texttop
          -top

Подробнее смотри в таблице:
http://s46.radikal.ru/i114/0808/96/2b63c1f711c9t.jpg;
    - alt="...." - определяет подсказку при наведении на изображение: http://forumupload.ru/uploads/0002/90/00/215-1-f.jpg;
    - border="2" - определяет толщину границ вокруг изображения.
Возможные значения: любое целое число, начиная с 0;

    - height="...." - определяет высоту изображения. Допустимо указывать в процентах или пикселах.
Возможные значения: любое целое число, начиная с 0;

    - width="...." - определяет ширину изображения. Допустимо указывать в пикселах или процентах.
Возможные значения: любое целое число, начиная с 0;

    - hspace="...." - определяет отступ от изображения до соседнего объекта по горизонтали. Допустимо указывать в пикселах.
Возможное значение: любое целое число, начиная с 0;

    - vspace="...." - определяет отступы от изображения до соседнегообъекта по вертикали. Допустимо указывать в пикселах.
Возможное значение: любое целое число, начиная с 0.

0

4

Теги для работы с сылками:

<a>....</a> - определяет ссылку.
Параметры:
     - href="...." - определяет адрес документа, по которому необходимо перейти.
Возможные значения: полный адрес;

     - title="...." -  определяет всплывающую подсказку, при наведении на ссылку.
Возможные значения: любой текст.

0

5

Теги для работы с таблицами:
<table>....</table> - определяет таблицу на форуме.
Параметры:
        - align="...." - определяет выравнивание содержимого ячеек таблицы.
Возможные значения:
       - left - определяет выравнивание содержимого по левому краю;
       - center - определяет выравнивание содержимого по центру;
       - right - определяет выравнивание содержимого по правому краю;

    - background="...." - определяет картинку, которая будет фоном таблицы.
Возможные значения: Адрес на картинку;

    - bgcolor="...." - определяет цвет фона таблицы.
Возможные значения: код цвета или его название;

    - border="...." - определяет толщину границ таблицы.
Возможные значения: любое целое число, начиная с 0;

    - bordercolor="...." - определяет цвет границ таблицы.
Возможные значения: код цвета или его название;

    - cellpadding="...." - определяет расстояние от границы ячеек таблицы до её содержимого.
Возможные значения: любое целое число, начиная с 0;

    - width="...." - определяет ширину таблицы.
Возможные значения: любое целое число, начиная с 0. Указывается в процентах или пикселах;

    - height="...." - определяет высоту таблицы.
Возможные значения: любое целое число, начиная с 0. Указывается в процентах или пикселах;

<tr>....</tr> - определяет строку таблицы.
Параметры:
    - align="...." - определяет выравнивание содержимого ячеек таблицы.
Возможные значения:
       - left - определяет выравнивание содержимого по левому краю;
       - center - определяет выравнивание содержимого по центру;
       - right - определяет выравнивание содержимого по правому краю;

    - bgcolor="...." - определяет цвет фона таблицы.
Возможные значения: код цвета или его название;

    - bordercolor="...." - определяет цвет границ таблицы.
Возможные значения: код цвета или его название;

    - valign="...." - определяет выравнивание содержимого ячеек по вертикали.
Возможные значения:
      - top - определяет выравнивание содержимого по верхнему краю;
      - middle - определяет выравнивание содержимого по середине;
      - bottom - определяет выравнивание содержимого по нижнему краю;

<td>....</td> - определяет ячейки таблицы.
Параметры:
    - align="...." - определяет выравнивание содержимого ячеек таблицы.
Возможные значения:
       - left - определяет выравнивание содержимого по левому краю;
       - center - определяет выравнивание содержимого по центру;
       - right - определяет выравнивание содержимого по правому краю;

    - background="...." - определяет картинку, которая будет фоном таблицы.
Возможные значения: Адрес на картинку;

    - bgcolor="...." - определяет цвет фона таблицы.
Возможные значения: код цвета или его название;

    - bordercolor="...." - определяет цвет границ таблицы.
Возможные значения: код цвета или его название;

    - width="...." - определяет ширину таблицы.
Возможные значения: любое целое число, начиная с 0. Указывается в процентах или пикселах;

    - height="...." - определяет высоту таблицы.
Возможные значения: любое целое число, начиная с 0. Указывается в процентах или пикселах;

    - valign="...." - определяет выравнивание содержимого ячеек по вертикали.
Возможные значения:
      - top - определяет выравнивание содержимого по верхнему краю;
      - middle - определяет выравнивание содержимого по середине;
      - bottom - определяет выравнивание содержимого по нижнему краю;

    - colspan="...." - определяет объединение в одну указанного числа ячеек по горизонтали.
Возможные значения: любое целое число, начиная с 0;

    - rowspan="...." - определяет объединение указанного числа ячеек по горизонтали.
Возможные значения: любое целое число, начиная с 0;

    - nowrap - определяет запрет переноса текста внутри ячейки (в одну строку с добавлением полосы прокрутки).
Возможные значения: без значений;

<th>....</th> - определяет ячейку, которая будет заголовком в таблице.Должен располагаться в теге <tr>....</tr>
!!!

Параметры:
    - align="...." - определяет выравнивание содержимого ячеек таблицы.
Возможные значения:
       - left - определяет выравнивание содержимого по левому краю;
       - center - определяет выравнивание содержимого по центру;
       - right - определяет выравнивание содержимого по правому краю;

    - background="...." - определяет картинку, которая будет фоном таблицы.
Возможные значения: Адрес на картинку;

    - bgcolor="...." - определяет цвет фона таблицы.
Возможные значения: код цвета или его название;

    - bordercolor="...." - определяет цвет границ таблицы.
Возможные значения: код цвета или его название;

    - width="...." - определяет ширину таблицы.
Возможные значения: любое целое число, начиная с 0. Указывается в процентах или пикселах;

    - height="...." - определяет высоту таблицы.
Возможные значения: любое целое число, начиная с 0. Указывается в процентах или пикселах;

    - valign="...." - определяет выравнивание содержимого ячеек по вертикали.
Возможные значения:
      - top - определяет выравнивание содержимого по верхнему краю;
      - middle - определяет выравнивание содержимого по середине;
      - bottom - определяет выравнивание содержимого по нижнему краю;

    - colspan="...." - определяет объединение в одну указанного числа ячеек по горизонтали.
Возможные значения: любое целое число, начиная с 0;

    - rowspan="...." - определяет объединение указанного числа ячеек по горизонтали.
Возможные значения: любое целое число, начиная с 0;

    - nowrap - определяет запрет переноса текста внутри ячейки (в одну строку с добавлением полосы прокрутки).
Возможные значения: без значений;

0

6

Особые теги:

<marquee>....</marquee> - определяет бегущуу строку на форуме.
Параметры:
    - Aling="...." - определяет выравнивание текста.
Возможные значения:
      - LEFT - определяет выравнивание по левому краю;
      - RIGHT - определяет выравнивание по правому;
      - MIDDLE - по центру;
      - BOTTOM - по нижнему;

    - Behavior="...." - определяет поведение текста (способ движения).
Возможные значения:
      - SCROLL - определяет движение  в одном направлении, постепенно исчезая из поля зрения;
      - SLIDE - определяет движение до края и остановку;
      - ALTERNATE - определяет движение от края к краю;

    - Scrolldelay="...." - определяет задержку смещения (интервал в миллисекундах между показами текста на разных позициях, создающими эффект анимации)
Возможные значения: любое  целое число начиная с 0;

    - Loop="...."  - определяет число проигрываний.
Возможные значения: любое  целое число начиная с 0;

    - INFINITE - определяет бесконечное проигрывание.
Возможные значения: без значений;

    - Widht="...." - определяет ширину поля для бегушей строки.
Возможные значения: любое положительное число, начиная с 0. Указывается в пикселах или процентах;

    - Height="...." - определяет высоту поля для бегущей строки.
Возможные значения: любое положительное число, начиная с 0. Указывается в пикселах или процентах;

    - Direction="...." - определяет направление движения бегущей строки.
Возможные значения:
      - LEFT - определяет движение справа налево;
      - RIGHT - определяет движение слева направо;
      - UP - определяет движение снизу вверх;
      - DOWN - определяет движение сверху вниз;

    - Bgcolor="...." - определяет  фон поля бегущей строки.
Возможные значения: кад цвета или его название;

    - Vspace - определяет отступ сверху и снизу от поля.
Возможные значения: любое целое число, начиная с 0;

    - Hspace - определяет отступ слева и справа от поля.
Возможные значения: любое число;

    - onMouseOver="this.stop()" onMouseOut="this.start()" - определяет остановку бегущей строки при наведении мыши.
Возможные значения: без значений;

<center>....</center> - определяет выравнивание объекта посередине страницы или по центру ячейки таблицы.
Параметры: нет параметров;

<br> - определяет переход на новую строку.
Параметры: нет параметров;

<hr> - определяет горизонтальную разделительную линию http://forumupload.ru/uploads/0002/90/00/205-1.jpg.
Параметры: нет параметров.

0

7

Советем прочитать (ссылки на темы со схожей тематикой данного форума):

0



Создать форум © iboard.ws Видеочат kdovolalmi.cz