Область вывода результатов вычислений

⇐ ПредыдущаяСтр 9 из 36Следующая ⇒

Тег < output> определяет область, в которую выводится результат вычислений, которые обычно выполняются с помощью скриптов. Он может принадлежать форме, располагаясь внутри нее, в качестве дочернего элемента, или ссылаться на элемент < form> с помощью атрибута form.

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

Пример.

< p> Введите 2 значения, чтобы посчитать их сумму.< /p>

< form oninput=" x.value=parseInt(a.value)+parseInt(b.value)" >

< input type=" number " name=" a" value=" 60" > +

< input type=" number" name=" b" value=" 40" >

=< output name=" x" for=" a b" > < /output>

< /form>

Результат данного примера в окне браузера виден на рисунке 25.

Рисунок 25 – Область выводов результатов вычислений

Индикатор выполнения

Тег < progress> используется для представления " индикатора выполнения", отображающего, какой процент задачи уже выполнен. Изменения в индикаторе прогресса производятся с помощью скриптов.

Пример.

< progress value=" 38" max=" 100" > < /progress>

Итак, рассмотрены все теги, составляющие структурный уровень web-документа, в том числе появившиеся в спецификации HTML5. В таблице 4 перечислены все теги HTML.

Таблица 4 - Полный список тегов HTML

HTML тег	Функция
<! DOCTYPE>	Объявление типа создаваемого документа.
< html>	Определяет границы html-документа. Весь код страницы размещается внутри данного тега.
< hеаd>	Определяет область заголовка, используется для указания браузеру, как следует обрабатывать веб-страницу. Не имеет собственного контента, служит контейнером для элементов, имеющих служебные функции.
< titlе>	В этом теге содержится название страницы, отображаемое на ярлыке страницы в окне браузера.
< meta>	Используется для предоставления информации внешнему окружению, а также для хранения дополнительной информации о документе, которая может использоваться браузерами для обработки страницы, а поисковыми системами - для индексации.
< base>	Задает базовый URL – адрес. Относительно него будут вычисляться все относительные адреса, присутствующие в документе.
< body>	Служит для размещения тела документа, которое будет отображаться в окне браузера.
< div>	Абстрактный блоковый тег. Слежит для выделения фрагментов текста для позиионирования и форматирования с помощью стилей CSS.
< hеаdеr>	Определяет заголовочную часть раздела или страницы.
< footer>	Определяет финальную часть раздела или страницы.
< p>	Определяет содержимое абзаца.
< pre>	Сохраняет внутри себя исходное форматирование, т.е. сохраняет пробельные символы и переносы строк.
<! –…–>	Добавление комментария.
< h1>, < h2>, < h3>, < h4>, < h5>, < h6>	Добавляет шесть уровней заголовков.
< address>	Служит для размещения контактов автора или владельца документа.
< article>	Служит для указания логически завершенного независимого блока документа: комментариев, новостей, сообщений и т.д.
< blockquote>	Используется для размещения больших цитат.
< aside>	Служит для размещения второстепенног или связанного контента.
< details>	Служит для размещения дополнительных сведений, которые по желанию пользователя могут быть просмотрены или скрыты.
< dialog>	Применяется для создания на странице диалоговых окон.
< figure>	Применяется для группировки элементов медийного контента, например, изображения и подписи к нему.
< figcaption>	Задает подпись для содержимого тега < figure>.
< main>	Служит для размещения основного содержимого документа, которое не должно содержать контента, повторяющегося в других частях текущего документа.
< menu>	Служит при создании списка команд меню для контекстных меню, панелей инструментов и т.д.
< menuitem>	Служит для создания пункта меню или команды, которую пользователь может выбрать в всплывающем меню.
< section>	Служит для определния логической области, раздела страницы.
< iframe>	Служит для создания в текущем html-документе встроенного фрейма, в который может быть загружен другой документ.
< a>	Тег для создания гиперссылок.
< br>	Перенос строки.
< hr>	Служит для создания горизонтальной линии на веб-странице.
< bdi>	Служит для изоляции части текста, которая можетт быть отформатирована в направлении, отличающемся отнаправления текста за его пределами.
< bdo>	Служит для задания направления вывода текста, например, для языков, в которых текст размещается происходит справа налево.
< abbr>	Служит для размещения аббревиатуры. Полное наименование можно указать как значение атрибута title.
< cite>	Служит для размещения маленькой цитаты или сноски.
< code>	Служит для размещения фрагмента программного кода.
< del>	Служит для размещения текста, помечаемого как удаленный.
< dfn>	Служит для размещения определения.
< em>	Служит для выделения важного фрагмента текста.
< q>	Служит для указания краткой цитаты.
< rp>	Если браузер не поддерживает тег < ruby>, то для вывода текста используется данный тег.
< rt>	Для типографики Восточной Азии снизу или сверху от символов, заключенных в элементе < ruby>, добавляет краткую характеристику.
< ruby>	Используется для показа пояснения Восточно-Азиатских символов.
< wbr>	Может указывать браузеру возможное размещение места разрыва в длинных строках.
< sup>	Задает надстрочный индекс.
< sub>	Задает подстрочный индекс.
< samp>	Предназначен для вывода текста, являющегося результатом выполнения или скрипта или программного кода, обычно отображается в моноширинном шрифте.
< small>	Текст, заключенный в данный тег, отображается шрифтом размера меньшего, чем текущий.
< span>	Абстрактный внутристрочный тег. Позволяет отделить часть строки и форматировать текст внутри другого элемента.
< strong>	Обозначает важный текст, выводится по умолчанию полужирным шрифтом.
< var>	Позволяет выделять имена переменных в тексте программы.
< summary>	Служит для размещения видимого заголовка для тега < details>. На странице виден как закрашенный треугольник, щелкнув по которому пользователь может просмотреть допольнительную информацию.
< ins>	Служит для определения вставленного (добавленного) в документ текста.
< kbd>	Текст, введенный с клавиатуры.
< mark>	Выделенный текст.
< nav>	Область основных навигационных ссылок сайта.
< b>	Обозначает полужирный шрифт.
< i>	Обозначает курсив.
< s>	Текст отображается перечеркнутым.
< u>	Текст отображается подчеркнутым.
< ol>	Задает упорядоченный, или нумерованный, список.
< ul>	Создает неупорядоченный, или маркированный, список.
< li>	Определяет пункт нумерованного или маркированного списка.
< dl>	Задает список определений, служит контейнером для пар терминов и их определений.
< dt>	Тег для размещения термина.
< dd>	Тег для текста описания термина, размещенного в < dt>.
< table>	Тег служит для создания таблицы.
< caption>	Заголовок таблицы. Располагается сразу после < table>.
< tr>	Строка таблицы.
< th>	Определяет заголовочную ячейку таблицы.
< td>	Определяет обычную ячейку таблицы.
< thead>	Определяет группу строк заголовочной части таблицы.
< tbody>	Определяет группу строк тела таблицы.
< tfoot>	Определяет группу строк нижней части таблицы.
< col>	Определяет столбцы таблицы.
< colgroup>	Определяет группу столбцов.
< form>	Создает форму.
< input>	Служит для создания элементов формы.
< datalist>	Позволяет задать содержимое выпадающего списка для элемента < input>.
< textarea>	Создает многострочные текстовые для ввода.
< select>	Поле со списком для формы.
< option>	Создает пункт раскрывающегося списка.
< optgroup>	Создает контейнер для пунктов < option> раскрывающегося списка.
< button>	Служит для создания кнопки. Внутрь тега можно помещать как текст, так и изображение.
< label>	Используется для добавления текстовой метки для элемента < input>.
< fieldset>	Позволяет визуально отделить группу элементов в форме, рисуя вокруг них рамку.
< legend>	Позволяет создать заголовок для группы элементов формы, размещенных внутри элемента < fieldset>.
< progress>	Задает элемент для определения хода выполнения задачи.
< meter>	Позволяет задать величину значения в заданном диапазоне.
< output>	Поле для вывода результата вычисления, обычно выполняемого с помощью скриптов.
< time>	Поле для вывода даты/времени.
< keygen>	Служит для генерации пары ключей – закрытого и открытого внутри тега < form>. При отправке формы закрытый ключ хранится локально, а открытый ключ отсылается на сервер.
< img>	Позволяет встраивать изображения на web-страницу.
< area>	Позволяет задать внутри изображения-карты активную область. Данный тег всегда располагается внутри < map>.
< map>	Позволяет определить изображения-карты с активной областью.
< object>	Используется для встраивания элементов мультимедиа в веб-страниицу: видео, аудио, элементов ActiveX, Java-апплетов, PDF, Flash).Для передачи дополнительных параметров можно поместить в < object> тег < param>.
< param>	Служит для передачи дополнительных параметров объекта.
< embed>	Служит для встраивания внешнего интерактивного контента или плагина.
< audio>	Позволяет добавить звук на web-страницу.
< video>	Позволяет добавить видео на web-страницу.
< source>	Позволяет указать источник файлов для элементов < video> и < audio>.
< track>	Позволяет задать субтитры для элементов < video> и < audio>.
< canvas>	Добавляет на страницу контейнер для отрисовки графики с помощью скриптов, обычно используется JavaScript.

Подведем итоги

Мы рассмотрели вопросы, связанные с созданием структуры веб-документа. Ознакомившись с основными сведениями о языках разметки, рассмотрели элементы HTML, в том числе входящие в спецификацию HTML5, их атрибуты и особенности использования.

Практика

1. Создать web-страницу, используя нужные теги, со следующим текстом:

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

Теги физического форматирования:

" Мороз и солнце - день чудесный
Еще ты дремлешь, друг прелестный
Пора, красавица, проснись! " А.С.Пушкин

Пример изменения регистра

2⁴=16

H₂O

N=2³²= 2 294 967 296

Цитата короткая

" Зри в корень". Козьма Прутков

Адрес

г.Саратов, ул.Политехническая, 116, кв.32

⇐ Предыдущая 4 5 6 7 8910 11 12 13 Следующая ⇒