Примеры HTML/Примеры HTML- школа XHTML

Примеры HTML

Объяснение примеров HTML

Примеры Введение в HTML

Первый пример HTML

Объяснение примеров Введение в HTML

Примеры Рамки HTML

Этот пример демонстрирует, как использовать тег noframes HTML
Этот пример демонстрирует, как сделать фрейм содержащий три документа, и как разделить их на строки и столбцы HTML
Фреймы с noresize = 'noresize' HTML
Навигационный фрейм HTML
Этот пример демонстрирует, как создать встроенный фрейм (фрейм внутри HTML-страницы).
Перейти к нужному разделу в пределах фрейма HTML
Перейти к указанному разделу с окном навигации HTML
Этот пример демонстрирует, как делать вертикальные фреймы с тремя различными документами.
Этот пример демонстрирует, как делать горизонтальные фреймы с тремя различными документами.

Объяснение примеров Рамки HTML

Примеры

комментарии HTML

Объяснение примеров

Примеры <a>

Используйте атрибуты shape и coords в элементе, чтобы создать карту изображения:
Атрибут hreflang определяет язык документа в линке:
Ссылка с атрибутом rel:

Объяснение примеров <a>

Примеры <area>

Пример CSS: предварительно отформатированный текст фиксированной ширины

Объяснение примеров <area>

Примеры <b>

Форматированный текст в документе:

Объяснение примеров <b>

Примеры <base>

Указывает базовый URL для всех относительных URL-адресов на странице
Указывает цели по умолчанию для всех ссылок на странице

Объяснение примеров <base>

Примеры <basefont>

Указывает по умолчанию размер шрифта и цвет шрифта для текста на странице
Определяет цвет текста по умолчанию в документе
Определяет цвет текста по умолчанию в документе
Определяет шрифт текста по умолчанию в документе
Определяет шрифт текста по умолчанию в документе

Объяснение примеров <basefont>

Примеры <bdo>

Использование атрибута title в документе HTML:

Объяснение примеров <bdo>

Примеры <body>

Простая страница HTML с минимум тегов
Назначает цвет активного линка
Устанавливает цвет фона документа
Устанавливает цвет непосещенной ссылки в документе

Объяснение примеров <body>

Примеры <button>

Кнопка обозначается следующим образом:

Объяснение примеров <button>

Примеры <caption>

Таблица с элементом заголовка:

Объяснение примеров <caption>

Примеры <center>

Отцентрованный текст в документе HTML:

Объяснение примеров <center>

Примеры <cite>

Форматирорвание текста в документе:

Объяснение примеров <cite>

Примеры <col>

Элементы col определяют различное выравнивание для трех колонок таблицы:
В приведенном ниже примере, содержимое второго столбца должно быть выравненно по символу ".":
В примере ниже, содержание второго столбца выравненно два символа вправо от символа ".":
В этом примере, все три колонки отцентрованны, так как элемент col включает три колонки:
Таблица HTML с различными вертикально выравненными колонками:
Два элемента col с установленной шириной:

Объяснение примеров <col>

Примеры <colgroup>

Два элемента colgroup, которые определяют различное выравнивание и стиль для трех столбцов в таблице ( обратите внимание, что первый элемент colgroup включает два столбца ):
В следующем примере, два элемента colgroup определяют различное выравнивание для трех колонок таблицы ( обратите внимание, что первый элемент colgroup включает два столбца):
В приведенном ниже примере, содержимое второго столбца должно быть выравненно по символу ".":
В примере ниже, содержание второго столбца выравненно два символа вправо от символа ".":
Два элемента colgroup, которые определяют различное выравнивание для трех столбцов в таблице (обратите внимание, что первый элемент colgroup включает два столбца):
Таблица HTML с различными вертикально выравненными колонками:
Группа столбцов, которая указывает, что два столбца дожны иметь предопределенную ширину в 100 точек:

Объяснение примеров <colgroup>

Примеры <dd>

Описание элементов в списке определений:

Объяснение примеров <dd>

Примеры <del>

Текст с удаленной частью и новой внесенной частью:
Форма с радио-кнопками: Форма с двумя радио-кнопками, и кнопкой отправки.

Объяснение примеров <del>

Примеры <dir>

Список каталогов:
Использование атрибута compact в списке каталогов:
Пример CSS: уменьшает высоту строчки

Объяснение примеров <dir>

Примеры <div>

Раздел в документе, который будет отображаться зеленым цветом:
Часть в документе, которая отцентрованна:
Пример CSS: Выравнивание текста в элементе div

Объяснение примеров <div>

Примеры <dl>

Список определений:

Объяснение примеров <dl>

Примеры <fieldset>

Группа связанных элементов в форме:

Объяснение примеров <fieldset>

Примеры <font>

Определяет цвет текста:
Определяет шрифт текста:
Определяет размер текста:
Пример CSS: определяет цвет текста
Пример CSS: определяет шрифт текста
Пример CSS: определяет размер текста

Объяснение примеров <font>

Примеры <form>

Простая форма HTML с двумя полями ввода и кнопкой Отправить:
Форма с флажками: Форма с двумя флажками и кнопкой Отправить.
Отправка имейля из формы
Использование атрибута accept в форме (позволяет загрузить два вида файлов - gif и jpeg):
Использование атрибута accept-charset в форме:
В следующем примере, данные формы не кодируются перед отправкой:
В следующем примере, данные формы будут добавленны к URL через метод "get":
Форма HTML с атрибутом name:
В следующем примере, страница указанная в атрибуте action будет открыта в новом окне:

Объяснение примеров <form>

Примеры <frame>

Простая страница с тремя фреймами:
Как сделать набор горизонтальных фреймов с тремя различными документами.
Как создать набор фреймов с тремя документами, и как перемешать их в строках и колонках.
Как использовать тег <noframes>.
Как использовать атрибут "noresize". Нельзя изменить размеры фреймов. Проведите мышкой над границами между фреймами и обратите внимание, что вы не можете передвинуть границы.
Как создать фрейм навигации. Фрейм навигации включает список ссылок с целью на второй фрейм. Файл, называемый "tryhtml_contents.htm" включает три линка.
Пример демонстрирует два фрейма. Один фрейм имеет источник на указанную секцию в файле. Указанная секция имеет <a name="C10"> в файле "link.html".
Этот пример показывает два фрейма. Навигационный фрейм (content.htm) слева содержит список ссылок со второго фрейма (link.htm) в качестве цели. Второй фрейм показывает, связанный документ. Одна из ссылок в навигационном фрейме связанна с указанной частью файла цели.
Страница с двумя фреймами, без рамок:
Атрибут longdesc указывает на страницу с расширенным объяснением содержания фрейма:
Первый фрейм имеет отступ сверху и снизу 50 точек, а второй фрейм имеет верхний и нижний отступ в 0 точек:
Первый фрейм с правым и левым отступом в 50 точек, а второй фрейм с левым и правым отступом в 0 точек:
Именованный фрейм:
Размер фрейма A не может быть изменен:
Фрейм A всегда включает прокрутку:
Атрибут src определяет местоположение документа, чтобы показать во фрейме:
Пример CSS: рамки фреймов

Объяснение примеров <frame>

Примеры <head>

Простой документ HTML с минимальным набором тегов
Как использовать тег <link> , чтобы прикрепить внешний список стилей.
Как использовать теги <meta> для описания документа.

Объяснение примеров <head>

Примеры <h1>-<h6>

Шесть различных заголовков HTML:
Выравненные заголовоки HTML:
Пример CSS: Устанавливает выравнивание заголовков

Объяснение примеров <h1>-<h6>

Примеры <hr>

Два параграфа разделенные горизонтальной линией:
Горизонтальная линия выравненная влево:
Пример CSS: выравнивание элемента hr
Незатененная горизонтальная линия:
Пример CSS: Незатененный hr
Горизонтальная линия высотой в 30 пикселей:
Пример CSS: Устанавливает высоту элемента hr
Горизонтальная линия шириной 350 пикселей:
Пример CSS: Устанавливает ширину элемента hr

Объяснение примеров <hr>

Примеры <html>

Простой документ XHTML, с минимальным набором необходимых тегов:

Объяснение примеров <html>

Примеры <iframe>

Встроенный фрейм отмечается следующим образом:
Выравненный вправо iframe:
Пример CSS: Выравнивание элемента iframe вправо
iframe без рамки:
Пример CSS: рамка iframe
iframe с указанными высотой и шириной:
Атрибут longdesc указывает на страницу с подробным описанием содержания iframe:
iframe с верхним и нижним полями в 50 пикселей:
iframe с полем слева и справа в 50 пикселей:
iframe, который действует в качестве мишени для ссылки:
iframe с прокруткой:
iframe в простом использовании:

Объяснение примеров <iframe>

Примеры <img>

Объяснение примеров <img>

Примеры <input>

Как определить поле пароля.
Как определить кнопку с вашим собственным текстом.
Форма HTML с двумя полями ввода и одним изображением как кнопка посылки:
Пример CSS: выравнивание изображения-ввода
Форма HTML с недоступным полем ввода:
Форма HTML с двумя полями ввода с максимальной длинной в 75 и 35 символов:
Форма HTML с двумя полями ввода и кнопкой Отправить:
Форма HTML с двумя полями ввода (один только для чтения) и кнопкой Отправки:
Форма HTML с двумя полями ввода с шириной 35 и 4 символа:
Пример CSS: Определяет ширину поля ввода:
Форма HTML с двумя полями ввода и одним изображением как кнопка Отправить:
Тип button обычно используется для активации JavaScript, когда пользователь нажимает на кнопку
<input type="file" /> используется для загрузки файлов.
Скрытые поля обычно содержат значения по умолчанию, или имеют значение изменяемое с помощью JavaScript.
Символы в поле пароля замаскированны (показаны как звездочки или кружки).
Радио кнопки позволяют пользователю сделать только один выбор из ограниченого числа опций.
A reset button clears all data in a form.

Объяснение примеров <input>

Примеры <ins>

Использование атрибута cite в элементе ins:
Использование атрибута datetime в элементе ins:

Объяснение примеров <ins>

Примеры <label>

Простая форма HTML с двумя полями ввода и связанными этикетками:

Объяснение примеров <label>

Примеры <legend>

Выравнивание заголовка набора полей вправо:

Объяснение примеров <legend>

Примеры <li>

Один упорядоченный и один неупорядоченный список HTML:
Список внутри списка.
Более сложный вложенный список.
Использование атрибута type в упорядоченном и неупорядоченном списке HTML:
Пример CSS: стиль списка стилей
Использование атрибута value в упорядоченном списке HTML:

Объяснение примеров <li>

Примеры <link>

Ссылка на внешний лист стилей:
Два различных списка стилей для двух различных типов медиа (экран компьютера и печать):

Объяснение примеров <link>

Примеры <menu>

Список меню:
Использование атрибута compact в списке меню:

Объяснение примеров <menu>

Примеры <meta>

Описывает мета данные внутри документа HTML:
Использование атрибута scheme для определения форматов для атрибута содержания:

Объяснение примеров <meta>

Примеры <noframes>

Простая страница с тремя фреймами, с тегом <noframes>:

Объяснение примеров <noframes>

Примеры <noscript>

Использование тега <noscript>:

Объяснение примеров <noscript>

Примеры <object>

Добавление объекта на страницу HTML:

Объяснение примеров <object>

Примеры <ol>

Упорядоченный список HTML:
Использование атрибута compact в упорядоченном списке HTML:
Пример CSS: уменьшение высоты линии в списке
Указывает начальную точку отсчета в "4" в упорядоченном списке:
Устанавливает счетчик в латинские цифры в упорядоченном списке:
Пример CSS: Устанавливает список типов стилей

Объяснение примеров <ol>

Примеры <optgroup>

Группирует вместе связанные опции с тегом <optgroup>:
Выключенные группы параметров:

Объяснение примеров <optgroup>

Примеры <option>

Раскрывающийся список с четырьмя опциями:
Список выбора с четырьмя вариантами - один выключенный:
Использование атрибута label в элементах выбора:
Раскрывающийся список с заранее выбранной опцией:
Раскрывающийся список со значениями для отправки на сервер:
В следующей таблице HTML содержимое внутри элемента tfoot выравнено по центру:

Объяснение примеров <option>

Примеры <p>

Параграф обозначается следующим образом:
Выравненный вправо параграф:
Пример CSS: Выравнивание текста в параграфе

Объяснение примеров <p>

Примеры <pre>

Предварительно отформатированный текст:
Предварительно отформатированный текст шириной в 30 символов:

Объяснение примеров <pre>

Примеры <q>

Короткая цитата отмечается в следующем порядке:
Цитата с атрибутом cite, который определяет источник цитаты

Объяснение примеров <q>

Примеры <s>

Зачеркнутый текст может быть отмечен следующим образом:

Объяснение примеров <s>

Примеры <script>

Добавление JavaScript на страницу HTML:
Указывает кодировку символов используемую в связанном файле сценария:
Использование атрибута defer:
Ссылка на внешний файл сценария:

Объяснение примеров <script>

Примеры <select>

Недоступный раскрывающийся список:
Разрешает множественный выбор в раскрывающемся списке:
Раскрывающийся список с атрибутом name:
Атрибут size показывает две опции в раскрывающемся списке:

Объяснение примеров <select>

Примеры <span>

Текст с элементом span, который может быть форматирован с CSS:

Объяснение примеров <span>

Примеры <style>

Использование элемента style в документе HTML:

Объяснение примеров <style>

Примеры <sub>

Подстрочный и надстрочный текст:

Объяснение примеров <sub>

Примеры <table>

Простая таблица HTML, содержащая два столбца и две колонки:
Таблицы HTML с различными рамками.
Как создавать заголовки таблицы.
Как использовать 'nbsp' для обработки клеток, которые не имеют содержания.
Таблица HTML с заголовком.
Как отобразить элементы внутри других элементов.
Как определить ячейки таблицы, которые охватывают более одной строки или одного столбца.
Как использовать cellpadding, чтобы создать больше пустого пространства между содержимым клетки и ее границами.
Как использовать cellspacing, чтобы увеличить расстояние между клетками.
Как добавить фон к таблице.
Как использовать атрибут "frame" для отображения границ вокруг таблицы.
Выравненная вправо таблица HTML:
Пример CSS: выравнивание таблицы
Таблица HTML с цветным фоном:
Пример CSS: цвет фона таблицы
В следующем примере устанавливается ширина рамки вокруг таблицы в 5 пикселей:
Следующий пример устанавливает расстояние между стенкой клетки и ее содержимым, в 10 пикселей:
Следующий пример устанавливает пространство между клетками в 10 пикселей:
Следующий пример указывает, что только рамки между рядами будут видны:
В следующей таблице HTML определяется краткое содержание таблицы:
Таблица HTML с шириной 400 пикселей:

Объяснение примеров <table>

Примеры <tbody>

Таблица HTML с элементами thead, tfoot, и tbody:
Следующая таблица HTML выравнивает содержимое внутри элемента tbody вправо:
В приведенном ниже примере, содержимое второго столбца должно быть выравненно по символу ".":
В примере ниже, содержание второго столбца выравненно два символа вправо от символа ".":
В следующей таблице HTML вертикально выравненно содержимое внутри элемента tbody вниз

Объяснение примеров <tbody>

Примеры <td>

Использование атрибута abbr в таблице HTML:
Таблица HTML с выравненной вправо клеткой:
Таблица HTML с классифицируемыми клетками:
Ячейки с цветом фона:
Пример CSS: данные таблицы с цветом фона
В приведенном ниже примере, содержание ячейки "Сбережения" должно быть выравненно по символу ".":
В приведенном ниже примере, содержание ячейки "Сбережения" выравнивается 2 символа вправо от знака ".":
Таблица HTML с клетками, которые охватывают две колонки:
Ниже приведен пример заголовка таблицы, связанный с каждой ячейкой:
Две ячейки таблицы с установленной высотой:
Пример CSS: Устанавливает высоту ячейки таблицы
Таблица с атрибутом nowrap:
Пример CSS: без переносов в td
Таблица HTML с ячейкой, которая охватывает две строчки:
Использование rowspan="0"
В следующем примере два элемента th определяются, как заголовки столбцов, а два элемента td, как заголовки строк:
Таблица HTML с различно выравненными вертикально ячейками:
Таблица с ячейками установленной ширины:
Пример CSS: Установление ширины ячейки таблицы

Объяснение примеров <td>

Примеры <textarea>

Простой текстовый блок:
Недоступное текстовое поле:
Текстовое поле с атрибутом name:
Текстовое поле только для чтения:
Текстовое поле с 3 строчками и шириной 25 символов:

Объяснение примеров <textarea>

Примеры <tfoot>

В следующей таблице HTML содержимое внутри элемента tfoot выравнивается по символу ".":
В приведенном ниже примере, содержимое внутри элемента tfoot выравнивается 2 символов вправо от знака ".":
В следующей таблице HTML содержание элемента tfoot выравненно вертикально вниз:

Объяснение примеров <tfoot>

Примеры <th>

Использование атрибута abbr в таблице HTML:
Таблица HTML с выравненной влево ячейкой заголовка:
Таблица HTML с классифицируемыми клетками заголовков:
Ячейки заголовка таблицы с цветом фона:
Пример CSS: заголовок таблицы с цветом фона
В приведенном ниже примере, содержимое первой ячейки заголовка должно быть выравненно по символу "M":
В приведенном ниже примере, содержимое первой ячейки заголовка выравнивается 2 символов вправо от символа "M":
Таблица HTML с ячейкой заголовка, которая охватывает две колонки:
Ячейка заголовка таблицы с предварительно установленной высотой:
Пример CSS: Устанавливает высоту ячейки заголовка таблицы
Ячейка заголовка таблицы с атрибутом nowrap:
Пример CSS: без переносов в th
Таблица HTML с ячейкой заголовка, которая охватывает три строчки:
Таблица HTML с различно выравненными вертикально ячейками заголовка:
Таблица с ячейками заголовка установленной ширины:
Пример CSS: Установление ширины ячейки заголовка таблицы

Объяснение примеров <th>

Примеры <thead>

В следующей таблице HTML содержимое внутри элемента thead выравнивается влево:
В следующей таблице HTML содержимое внутри элемента thead выравнивается по символу "M":
В приведенном ниже примере, содержимое внутри элемента thead выравнивается 2 символов вправо от символа "M":
В следующей таблице HTML содержимое внутри элемента thead выравненно вертикально посередине:

Объяснение примеров <thead>

Примеры <title>

Простой документ HTML, с минимальным количеством необходимых тегов:

Объяснение примеров <title>

Примеры <tr>

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

Объяснение примеров <tr>

Примеры <u>

Подчеркнутый текст с тегом <u>:

Объяснение примеров <u>

Примеры <ul>

Неупорядоченный список HTML:
Использование атрибута compact в неупорядоченном списке HTML:
Пример CSS: уменьшение высоты линии в списке
Список внутри другого списка.
Более сложный вложенный список.
Использование атрибута type в неупорядоченном списке HTML:
Пример CSS: список типа стиля

Объяснение примеров <ul>

Примеры HTML Атрибут <body> alink

Установливает активную ссылку в "зеленый" цвет в документе HTML:

Объяснение примеров HTML Атрибут <body> alink

Примеры HTML Атрибут <body> background

Устанавливает фоновое изображение для документа HTML

Объяснение примеров HTML Атрибут <body> background

Примеры HTML Атрибут <body> bgcolor

Определяет цвет фона для документа HTML

Объяснение примеров HTML Атрибут <body> bgcolor

Примеры HTML Атрибут <body> link

Установите цвет по умолчанию ссылки в "синий" в документе HTML

Объяснение примеров HTML Атрибут <body> link

Примеры HTML Атрибут <body> text

Назначает цвет текста в документе HTML
Определяет цвет текста в документе HTML:

Объяснение примеров HTML Атрибут <body> text

Примеры HTML Атрибут <body> vlink

Задает цвет посещенных ссылок в документе.
Назначает посещенным ссылкам красный цвет в документе HTML:

Объяснение примеров HTML Атрибут <body> vlink

Примеры HTML Атрибут <button> disabled

Выключенная кнопка обозначается следующим образом:

Объяснение примеров HTML Атрибут <button> disabled

Примеры HTML Атрибут <button> name

Две кнопки с одинаковыми именами, которые представляют различные значения при нажатии:

Объяснение примеров HTML Атрибут <button> name

Примеры HTML Атрибут <button> type

Две кнопки, одна кнопка "отправить", и одна кнопка сброса (в форме):

Объяснение примеров HTML Атрибут <button> type

Примеры HTML Атрибут <caption> align

Пример CSS: выравнивание заголовка в таблице
Таблица с расположенным элементом заголовка:

Объяснение примеров HTML Атрибут <caption> align

Примеры HTML Атрибут <del> cite

Использование атрибута cite в элементе del:

Объяснение примеров HTML Атрибут <del> cite

Примеры HTML Атрибут <del> datetime

Использование атрибута datetime в элементе del:

Объяснение примеров HTML Атрибут <del> datetime

Примеры HTML Атрибут <style> media

Два различных списка стилей для двух различных типов медиа (экран компьютера и печать):