Элементы Ресурсы
:
x
0
 

Интернет-проекты

ПРАНДИТ
Инфонетекс
Автоспорт
Кулинарния
Эзотерика
Урлинки
Все проекты
Обратная связь Игры Настройки
  Партнёры Каталог
 

Партнёры

Золотой Гуру   Мазаяки Проджект   Регистратор доменов Webnames.ru
 

Содержание

Реклама и PR
IT-системы
Веб-дизайн
Домены
Хостинг
HTML
HTML-теги
Спецсимволы
CSS
CSS-параметры
Термины
Приёмная
Регламент
Настройки
Онлайн-игры
Вебмастерская
Партнёры Карта сайта
Все проекты
 

HTML-дескрипторы

Примеры использования HTML-тегов

Теги (или Дескрипторы) – специальные служебные слова, заключенные в угловые скобки "<" и ">". При помощи тегов браузер "понимает", каким именно образом следует размещать элементы на веб-странице. Ниже приводятся наиболее часто употребляемые теги HTML-документа.

<HTML>...</HTML> – пара тегов, обозначающая начало и конец HTML-документа.
<HEAD>...</HEAD> – заголовок документа.
<TITLE>...</TITLE> – название веб-страницы.
<META> – специальный тег для описания свойств документа. Подробнее... +/-

x<!-- Листинг 1.1 -->

<HTML lang="ru">
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META http-equiv="Content-language" content="ru">
<META name="keywords" content="список ключевых слов, поисковые фразы, теги">
<META name="description" content="Описание содержимого веб-страницы...">
<META name="robots" content="all">
<META property="og:title" content="Альтернативный Заголовок веб-страницы">
<META property="og:description" content="Альтернативное описание веб-страницы">
<META property="og:type" content="article">
<META property="og:image" content="http://i.prundit.ru/p/pr.gif">
<META property="og:url" content="http://prundit.ru/html/tags/">
<META property="og:locale" content="ru_RU">
<META property="og:site_name" content="Название веб-сайта">
</HEAD>
<BODY>
<P>Основной текст...</P>
</BODY>
</HTML>
<LINK> – специальный тег для подключения к документу внешних источников. Подробнее... +/-

x<!-- Листинг 1.2 -->

<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
<LINK rel="stylesheet" type="text/css" href="/css/style.css">
</HEAD>
<BODY>
<P>Основной текст...</P>
</BODY>
</HTML>
<SCRIPT>...</SCRIPT> – специальный контейнер для написания собственных либо подключения к документу внешних скриптов. Подробнее... +/-

x<!-- Листинг 1.3 -->

<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
<SCRIPT src="/js/script.js" language="JavaScript" type="text/javascript" charset="UTF-8" async=""></SCRIPT>
</HEAD>
<BODY>
<P>Основной текст...</P>
</BODY>
</HTML>
<BODY>...</BODY> – тело документа.

+ Пример

<!DOCTYPE HTML>
<HTML lang="ru">
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
<META charset="UTF-8">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-language" content="ru">
<META name="keywords" content="список ключевых слов, поисковые фразы, теги">
<META name="description" content="Описание содержимого веб-страницы...">
<META name="robots" content="all">
<META name="viewport" content="width=1024">
<META name="twitter:card" content="summary">
<META name="twitter:site" content="@Prundit">
<META name="twitter:title" content="Альтернативный Заголовок веб-страницы для передачи данных об аккаунте в Твиттере">
<META name="twitter:description" content="Альтернативное описание веб-страницы для передачи данных об аккаунте в Твиттере">
<META name="twitter:image" content="http://i.prundit.ru/p/pr.gif">
<META name="twitter:image:alt" content="@Prundit">
<META property="og:title" content="Альтернативный Заголовок веб-страницы для передачи и отображения превью в соцсетях">
<META property="og:description" content="Альтернативное описание веб-страницы для передачи и отображения превью в соцсетях">
<META property="og:type" content="article">
<META property="og:image" content="http://i.prundit.ru/p/pr.gif">
<META property="og:image:width" content="100">
<META property="og:image:height" content="100">
<META property="og:image:type" content="image/gif">
<META property="og:url" content="http://prundit.ru/html/tags/">
<META property="og:locale" content="ru_RU">
<META property="og:site_name" content="Название веб-сайта">
<LINK rel="stylesheet" type="text/css" href="/css/style.css">
<SCRIPT src="/js/script.js" type="text/javascript" language="JavaScript" charset="UTF-8" async="async"></SCRIPT>
</HEAD>
<BODY>
<P>Основной текст...</P>
</BODY>
</HTML>
off x
<P>...</P> – контейнер для разделения текста на абзацы.
<A>...</A> – гиперссылка. Подробнее... +/-

x<!-- Листинг 2.1 -->

<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<P>
<A href="http://prundit.ru/" title="Перейти на сайт">Prundit.ru</A>
Основной текст...
</P>
</BODY>
</HTML>
<B>...</B> – полужирное начертание текста (bold).
<I>...</I> – курсивное начертание текста (italic).
<U>...</U> – подчеркивание снизу (underline).
<IMG> – рисунок. Подробнее... +/-

x<!-- Листинг 2.2 -->

<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<P>
<IMG src="http://i.prundit.ru/p/pr.gif" width="100" height="100" alt="Логотип" title="Наш логотип">
Основной текст...
</P>
</BODY>
</HTML>
<BR> – перевод строки.
<NOBR>...</NOBR> – запрет переноса содержимого.
<UL>...</UL> – маркированный список.
<OL>...</OL> – нумерованный список.
<LI> – строка списка. Подробнее... +/-

x<!-- Листинг 2.3 -->

<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<P>
<UL type="circle">
<LI>Первая строка маркированного списка;
<LI>Вторая строка маркированного списка;
...
<LI>N-ая строка маркированного списка.
</UL>
<OL type="I" start="5">
<LI>Первая строка нумерованного списка;
...
<LI>K-ая строка нумерованного списка.
</OL>
Основной текст...
</P>
</BODY>
</HTML>
<DIV>...</DIV> – блок.

+ Пример

<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<P>Текстовый контент внутри первого абзаца может быть оформлен, например, <B>полужирным</B> начертанием, <I>курсивом</I> или даже с помощью <U>подчеркивания</U>...</P>
<P>Во втором абзаце могут содержаться <NOBR><A href="http://prundit.ru/" title="Prundit.ru">текстовые ссылки</A>...</NOBR></P>
<OL type="a" start="1">
<LI>Первая строка нумерованного списка;
<LI>Вторая строка нумерованного списка:
<UL>
<li type="circle">Первая строка маркированного списка;
<li type="disc">Вторая строка маркированного списка;
...
<li type="square">N-ая строка маркированного списка.
</UL>
...
<LI>K-ая строка нумерованного списка.
</OL>
<!-- Пример комбинации нумерованного и маркированного списков:
  1. Первая строка нумерованного списка;
  2. Вторая строка нумерованного списка:
    • Первая строка маркированного списка;
    • Вторая строка маркированного списка;
      ...
    • N-ая строка маркированного списка.
    ...
  3. K-ая строка нумерованного списка.
//-->
<DIV>И, наконец, на веб-странице можно разместить несколько рисунков...<BR>
<IMG src="http://i.prundit.ru/b/pr.gif" width="88" height="31" align="center" alt="Баннер-1" title="Наш баннер"><BR>
<IMG src="http://i.prundit.ru/b/gua.gif" width="88" height="31" align="center" alt="Баннер-2" title="Наш баннер">
...
<DIV>
</BODY>
</HTML>
off x
<TABLE>...</TABLE> – таблица.
<TBODY>...</TBODY> – тело таблицы.
<TR>...</TR> – строка таблицы.
<TD>...</TD> – ячейка в строке таблицы.

+ Пример

<HTML>
<HEAD><TITLE>Заголовок веб-страницы</TITLE></HEAD>
<BODY>
<TABLE align="center" border="1">
<TBODY>
<TR>
<TD width="50%">1-ая ячейка 1-ой строки (11)</TD>
<TD width="50%">2-ая ячейка 1-ой строки (12)</TD>
</TR>
<TR>
<TD width="50%">1-ая ячейка 2-ой строки (21)</TD>
<TD width="50%">2-ая ячейка 2-ой строки (22)</TD>
</TR>
</TBODY>
</TABLE>
<!-- Пример таблицы 2x2:
1-ая ячейка 1-ой строки (11) 2-ая ячейка 1-ой строки (12)
1-ая ячейка 2-ой строки (21) 2-ая ячейка 2-ой строки (22)
//-->
</BODY></HTML>
off x
<FORM>...</FORM> – тег начала и конца формы в документе.
<INPUT>...</INPUT> – многофункциональный элемент ввода. Подробнее... +/-

x<!-- Листинг 4.1 -->

<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<FORM action="http://prundit.ru/" method="POST" enctype="multipart/form-data" name="frm_nam">
Введите ваше имя: <INPUT type="text" name="inp_nam">
и фамилию: <INPUT type="text" name="inp_fam"><BR>
<INPUT type="submit" value="Отправить">
</FORM>
</BODY></HTML>
<SELECT>...</SELECT> – выпадающий список.
<OPTION> – элемент списка <SELECT>. Подробнее... +/-

x<!-- Листинг 4.2 -->

<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<FORM action="http://prundit.ru/" method="GET" enctype="multipart/form-data">
Здравствуйте! Пожалуйста, выберите интересующую информацию:
<SELECT name="sel_dat">
<OPTION value="1" selected>1-ая строка выпадающего списка
<OPTION value="2">2-ая строка выпадающего списка
...
<OPTION value="N">N-ая строка выпадающего списка
</SELECT>
<INPUT type="submit" value="Далее">
</FORM>
</BODY></HTML>
<LABEL>...</LABEL> – метка, часто применяемая на формах вместе с тегом <INPUT>. Подробнее... +/-

x<!-- Листинг 4.3 -->

<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<FORM action="" method="POST">
Укажите Ваши данные:<BR>
<LABEL for="lbl_r1"><INPUT type="radio" value="1" id="lbl_r1" name="inp_rad" checked>
Вариант 1</LABEL><BR>
<LABEL for="lbl_r2"><INPUT type="radio" value="2" id="lbl_r2" name="inp_rad">
Вариант 2</LABEL><BR>
...
<LABEL for="lbl_rN"><INPUT type="radio" value="N" id="lbl_rN" name="inp_rad">
Вариант N</LABEL><BR>
<LABEL for="lbl_c1"><INPUT type="checkbox" id="lbl_c1" name="chk_01" checked="checked">
Флажок 1</LABEL><BR>
<LABEL for="lbl_c2"><INPUT type="checkbox" id="lbl_c2" name="chk_02">
Флажок 2</LABEL><BR>
...
<LABEL for="lbl_cM"><INPUT type="checkbox" id="lbl_cM" name="chk_0M">
Флажок M</LABEL><BR>
<INPUT type="submit" value="Сохранить">
</FORM>
</BODY></HTML>
<TEXTAREA>...</TEXTAREA> – многостроковое текстовое поле ввода. Подробнее... +/-

x<!-- Листинг 4.4 -->

<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<FORM method="GET" name="frm_nam">
Чтобы задать свой вопрос, заполните форму обратной связи:<BR>
<INPUT value="Имя" name="inp_nam">
<INPUT value="E-mail" name="inp_mail"><BR>
<TEXTAREA name="txt_q">Ваше сообщение</TEXTAREA><BR>
<INPUT type="reset" value="Стереть">
<INPUT type="submit" value="Сообщить">
</FORM>
</BODY></HTML>

+ Пример

<HTML>
<HEAD><TITLE>Заголовок веб-страницы</TITLE></HEAD>
<BODY>
<FORM action="http://prundit.ru/" method="POST" enctype="multipart/form-data" name="frm_eg">
Доброго времени суток! Пожалуйста, расскажите немного о себе.<BR>
E-mail: <INPUT type="text" name="inp_mail" title="Электронная почта">
Ф.И.О.: <INPUT type="text" name="inp_fio" title="Фамилия И.О."><BR>
Дата рождения: <SELECT name="sel_dd" title="День рождения">
<OPTION value="0" selected>день
<OPTION value="1">1
<OPTION value="2">2
<OPTION value="3">3
<OPTION value="4">4
<OPTION value="5">5
<OPTION value="6">6
<OPTION value="7">7
<OPTION value="8">8
<OPTION value="9">9
<OPTION value="10">10
<OPTION value="11">11
<OPTION value="12">12
<OPTION value="13">13
<OPTION value="14">14
<OPTION value="15">15
<OPTION value="16">16
<OPTION value="17">17
<OPTION value="18">18
<OPTION value="19">19
<OPTION value="20">20
<OPTION value="21">21
<OPTION value="22">22
<OPTION value="23">23
<OPTION value="24">24
<OPTION value="25">25
<OPTION value="26">26
<OPTION value="27">27
<OPTION value="28">28
<OPTION value="29">29
<OPTION value="30">30
<OPTION value="31">31
</SELECT>
<SELECT name="sel_mm" title="Месяц рождения">
<OPTION value="0" selected>месяц
<OPTION value="1">январь
<OPTION value="2">февраль
<OPTION value="3">март
<OPTION value="4">апрель
<OPTION value="5">май
<OPTION value="6">июнь
<OPTION value="7">июль
<OPTION value="8">август
<OPTION value="9">сентябрь
<OPTION value="10">октябрь
<OPTION value="11">ноябрь
<OPTION value="12">декабрь
</SELECT>
<INPUT value="год" name="inp_yy" title="Год рождения" maxLength="4"><BR>
Пол: <LABEL for="lbl_m"><INPUT type="radio" value="1" id="lbl_m" name="inp_sx" checked>Муж.</LABEL>
<LABEL for="lbl_w"><INPUT type="radio" value="2" id="lbl_w" name="inp_sx">Жен.</LABEL><BR>
Образование:<BR>
<INPUT type="checkbox" name="chk_ed1" checked="checked" disabled>
Среднее<BR>
<INPUT type="checkbox" name="chk_ed2">
Средне-специальное<BR>
<LABEL for="lbl_ed"><INPUT type="checkbox" id="lbl_ed" name="chk_ed3">
Высшее</LABEL><BR>
Ваш пароль доступа:
<INPUT type="password" name="inp_pw0" title="Ваш пароль" maxLength="10"><BR>
Подтвердите пароль:
<INPUT type="password" name="inp_pw1" title="Подтверждение пароля" maxLength="10"><BR>
Дополнительная информация<BR>
<TEXTAREA cols="35" rows="5" name="txt_inf" title="Дополнительная информация">Дополнительно</TEXTAREA><BR>
<INPUT type="reset" value="Очистить" title="Отменить изменения">
<INPUT type="submit" value="Отправить" title="Внести изменения">
</FORM>
<!-- Пример формы с различными элементами:
Доброго времени суток! Пожалуйста, расскажите немного о себе.
E-mail: Ф.И.О.:
Дата рождения:
Пол:
Образование:
Среднее
Средне-специальное

Ваш пароль доступа:
Подтвердите пароль:
Дополнительная информация

//-->
</BODY></HTML>
off x
<HN>...</HN> – контейнер для подзаголовка в теле текста веб-страницы (1≤N≤6). Подробнее... +/-

x<!-- Листинг 5.1 -->

<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<H1>Подзаголовок-1</H1>
<P>Текстовое описание в рамках Подзаголовка-1...</P>
<H2>Подзаголовок-2</H2>
<P>Текстовое описание в рамках Подзаголовка-2...</P>
...
<H6>Подзаголовок-6</H6>
<P>Текстовое описание в рамках Подзаголовка-6...</P>
</BODY></HTML>
<SUP>...</SUP> – верхний индекс.
<SUB>...</SUB> – нижний индекс.
<CODE>...</CODE> – контейнер для отображения программного кода.
<SPAN>...</SPAN> – контейнер для выделения определенного участка (секции) текста.
<CENTER>...</CENTER> – контейнер для отцентровки текста.
<STRONG>...</STRONG> – аналог тега <B>, дающий полужирное начертание шрифта.
<MARQUEE>...</MARQUEE> – бегущая строка. Подробнее... +/-

x<!-- Листинг 5.2 -->

<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
...
<MARQUEE width="80%" behavior="scroll">Текст бегущей строки...</MARQUEE>
...
</BODY></HTML>

+ Пример

<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы</TITLE>
</HEAD>
<BODY>
<H1>Проверка дополнительных элементов</H1>
<P>Содержимое веб-страницы может включать в себя различные переменные, например, X<SUB>1</SUB>, X<SUB>2</SUB>; а также числительные, возведенные в степень, к примеру, 3<SUP>2</SUP> или <SPAN title="А в кубе">a<SUP>3</SUP></SPAN>.</P>
<MARQUEE width="100%" behavior="slide" scrolldelay="70" loop="3">Кроме того, веб-страница может содержать и устаревшие теги...</MARQUEE>
<H2>Примеры устаревших дескрипторов</H2>
<DIV>При форматировании (оформлении) текста для придания <STRONG>полужирного начертания можно использовать и контейнер <CODE>&lt;STRONG&gt;</CODE></STRONG>. Но также существует возможность <B>применения контейнера &lt;B&gt;</B>.</DIV>
<CENTER>Успехов в Ваших экспериментах!</CENTER>
<!-- Пример реализации различных дополнительных тегов

Проверка дополнительных элементов

Содержимое веб-страницы может включать в себя различные переменные, например, X1, X2; а также числительные, возведенные в степень, к примеру, 32 или a3.

Кроме того, веб-страница может содержать и устаревшие теги...

Примеры устаревших дескрипторов

При форматировании (оформлении) текста для придания полужирного начертания можно использовать и контейнер <STRONG>. Но также существует возможность применения контейнера <B>.
Успехов в Ваших экспериментах!
//-->
</BODY></HTML>
off x
A
 

Социальные Медиа

Мы в соцсетях:
Поделиться с друзьями: