Использование основных тегов
Теги, включённые в базовую библиотеку тегов JavaServer Faces, используются для выполнения основных действий, которые не выполняются тегами HTML.
Таблица 10-8 перечисляет основные теги обработки событий.
Таблица 10-8 Основные теги обработки событий
Тег | Функция |
| Добавляет слушатель действия в родительский компонент |
| Добавляет |
| Регистрирует слушателя специальных действий, единственная цель которого — передать значение в Managed-бин при отправке формы |
| Добавляет слушатель изменения значения в родительский компонент |
Таблица 10-9 перечисляет основные теги преобразования данных.
Таблица 10-9 Основные теги конвертации данных
Тег | Функция |
| Добавляет произвольный конвертер в родительский компонент |
| Добавляет объект |
| Добавляет объект |
Таблица 10-10 перечисляет основные теги фасетов.
Таблица 10-10 Основные теги фасетов
Тег | Функция |
| Добавляет вложенный компонент, имеющий особое отношение к тегу включения |
| Регистрирует |
Таблица 10-11 перечисляет основные теги, которые представляют элементы в списке.
Таблица 10-11 Основные теги, которые представляют элементы в списке
Тег | Функция |
| Представляет один элемент в списке элементов |
| Представляет набор элементов |
Таблица 10-12 перечисляет основные теги валидаторов.
Таблица 10-12 Основные теги валидаторов
Тег | Функция |
| Добавляет |
| Добавляет |
| Добавляет |
| Добавляет кастомный валидатор к компоненту |
| Добавляет |
| Делегирует валидацию локального значения |
| Обеспечивает наличие значения в компоненте |
Таблица 10-13 перечисляет основные теги, которые попадают в другие категории.
Таблица 10-13 Остальные основные теги
Категория тегов | Тег | Функция |
Конфигурация атрибута |
| Добавляет настраиваемые атрибуты в родительский компонент |
Локализация |
| Задаёт |
Подстановка параметров |
| Подставляет параметры в объект |
Ajax |
| Связывает действие Ajax с одним компонентом или группой компонентов в зависимости от размещения тега |
Событие |
| Позволяет установить |
Веб-сокеты |
| Позволяет передавать серверные сообщения всем сокетам, содержащим то же имя канала. |
Эти теги используются совместно с тегами компонентов и описаны в других разделах данного учебника.
Таблица 10-14 перечисляет разделы, в которых разъясняется, как использовать некоторые из тегов.
Таблица 10-14. Где разъясняются теги
Теги | Где объясняется |
Теги обработки событий | Регистрация слушателей в компонентах |
Теги конвертации данных | Использование стандартных конвертеров |
| Использование таблицы Data-Bound и Управление расположением компонентов с помощью тегов h:panelGrid и h:panelGroup |
| Настройка bundle-ресурса |
| Использование параметров представления для настройки URL для закладок |
| Отображение форматированного сообщения тегом h:outputFormat |
| Использование тегов f:selectItem и f:selectItems |
Теги валидаторов | Использование стандартных валидаторов |
| Глава 13 «Использование Ajax с JavaServer Faces» |
| Глава 17 «Использование веб-сокетов с JavaServer Faces» |
1.
1.2 Структура html-документаЛабораторные работу по курсу Веб-технологии
Часть 1. HTML и CSS
Лабораторная работа 1. Введение в HTML. Структура HTML-документа. Форматирование текста
Цель: Научиться применять теги HTML для структурирования страницы и форматирования текста.
1.1 Теоретические сведения
1.1.1 Программы для редактирования html-страниц
Для создания html-страниц необходим редактор. Для выполнения лабораторных работ предлагаются текстовые редакторы PSPad или Notepad++. По сравнению с блокнотом в программах имеется подсветка синтаксиса, автоматическое дополнение когда, панель свойств и т.д. Для выполнения некоторых лабораторных работ могут потребоваться дополнительные материалы, которые обычно расположены в папке рядом с методическими указаниями.
Составление страниц для сайта базируется
на языке HTML (от англ. Hypertext Markup Language –
язык разметки гипертекста).
Все страницы
сайта имеют расширение .htm или .html.
Основной структурной единицей языка является тег с его атрибутами. Тег представляет собой заключенные в треугольные скобки инструкции языка, которые сообщают, какими свойствами должен обладать тот или иной фрагмент текста на странице. Большинство тегов являются парными: содержат как открывающийся, так и закрывающийся тег (см. рисунок 1.1):
Рисунок 1.1 – Структура тега
Следует отметить что написание значений атрибутов следует писать в двойных кавычках.
Описание документа строится на основании тегов. Весь документ должен быть заключен в главный тег (см. рисунок 1.2).
Рисунок 1.2 – Структура html-документа
Все теги можно условно разделить на группы по их функциональному назначению: теги уровня документа, теги форматирования, теги структурных элементов и т.д.
1.1.3 Теги уровня документа
<html>.
..</html> парный
тег-контейнер, который заключает в себе
все содержимое веб-страницы. Открывающий
и закрывающий теги в документе обязательны,
для того, чтобы указать границы документа.
<head>…</head> тег предназначен для хранения элементов, которые используются для хранения служебной информации предназначенной для браузеров и поисковых систем. Содержимое тега не отображается на странице, за исключением тега .
<title>…</title> содержит текст заголовка, который отображается в строке заголовка окна браузера.
<body>…</body> предназначен для хранения содержимого веб-страницы (контента), отображаемого в окне браузера (форматированный текст, изображения, таблицы и т.д.). Тег может содержать множество атрибутов, которые влияют на отображения всего документа в целом.
Таблица 1.1 Основные атрибуты тега
Название атрибута | Назначение атрибута |
alink | цвет активной ссылки (цвет задается шестнадцатеричным числом или константой, например красные: red или #ff0000) |
background | фоновый рисунок на веб-странице |
bgcolor | цвет фона веб-страницы |
topmargin (leftmargin, bottommargin) | отступ от верхнего (левого, нижнего) края окна браузера до контента |
link | цвет ссылок на веб-странице |
text | цвет текста в документе |
vlink | цвет посещенных ссылок |
Например, следующий фрагмент html-кода
задает для всего документа цвет текста
зеленый, цвет ссылок черный, цвет фона
желтый.
Листинг 1.1.
Листинг 1.1 — Пример использования атрибутов тега
1.1.4 Основные теги форматирования текста
Таблица 1.2 — Теги форматирования текста
Название тега | Назначение тега, атрибуты |
<b>..</b> или <strong>…<strong> | устанавливает жирное начертание шрифта |
<i>…</i> | устанавливает курсивное начертание шрифта |
<u>…</u> | устанавливает подчеркнутое начертание шрифта |
<strike>…</strike> | устанавливает зачеркнутое начертание шрифта |
<cite>. | помечает текст как цитату, обычно отображается курсивом |
<code>…</code> | предназначен для отображения текста, который представляет собой программный код, обычно отображается моноширинным шрифтом |
<del>…</del> | используется для выделения текста, который был удален в новой версии документа |
< ins>…</ins> | используется для выделения текста, который был добавлен в новую версию документа |
<dfn>…</dfn> | применяется для выделения терминов при их первом появлении в тексте |
<sup>…</sup> | отображает шрифт в виде верхнего индекса |
<sub>…</sub> | отображает шрифт в виде нижнего индекса |
<pre>. | определяет блок текста, в котором сохраняется количество пробелов между словами, заданное на этапе создания документа |
< nobr>…</nobr> | уведомляет браузер отображать текст в одну строку без переноса |
<h2>…</h2> … <h6></h6> | устанавливает заголовки различного уровня значимости от самого крупного h2 до самого мелкого h6 |
<font>…</font> | предназначен для установки характеристик шрифта, которые задаются в атрибуте тега. Тег имеет следующие атрибуты:
color=… задает цвет шрифта (в шестнадцатеричной форме, например, #ff0000) face=… задает гарнитуру шрифта (Arial, Tahoma) size=… задает размер шрифта в условных единицах (целое число от 1 до 7 или изменения числа +1 или -2) самый крупный шрифт 7 |
<p>. | определяет границы абзаца. Тег имеет атрибут align, который отвечает за выравнивание текста и может принимать значения: left, right, center и justify |
<br> | устанавливает принудительный перенос строк |
< hr> | рисует горизонтальную линию. Параметры горизонтальной линии можно задать с использованием атрибутов тега: align=… определяет выравнивание линии color=… цвет линии noshade=… рисует линию без трехмерных эффектов size=… толщина линии в пикселях width=… ширина линии в пикселях |
..</cite>
..</pre>
..</p>HTML-тег table — Computer Notes
Таблица — это упорядоченное расположение данных, распределенных по сетке строк и столбцов, подобно электронной таблице. В печатных документах таблицы обычно выполняют подчиненную функцию, иллюстрируя какой-либо момент, описываемый сопроводительным текстом.
Таблицы по-прежнему выполняют эту иллюстративную функцию в документах HTML.
Однако, поскольку HTML сам по себе не предлагает тех возможностей компоновки, которые доступны дизайнерам полиграфии, таблицы веб-страниц также обычно используются для структурирования страницы для компоновки. Но в отличие от печатных таблиц HTML-таблицы могут содержать динамическую или даже интерактивную информацию, например результаты запроса к базе данных.
Таблицы используются на веб-сайтах для двух основных целей:
Очевидная цель размещения информации в таблице
Менее очевидная, но более широко используемая цель создания макета страницы с использованием скрытых таблиц.
Использование таблиц для разделения страницы на разные разделы — чрезвычайно мощный инструмент. Почти все крупные веб-сайты используют невидимые таблицы для компоновки страниц.
Наиболее важные аспекты компоновки, которые можно реализовать с помощью таблиц:
Разделение страницы на отдельные разделы.
Невидимый стол отлично подходит для этой цели.
Создание меню. Обычно с одним цветом для заголовка и другим цветом для ссылок, следующих в следующих строках.
Добавление полей интерактивной формы. Обычно серая область, содержащая параметр поиска.
Создание заголовков быстрой загрузки для страницы. Цветная таблица с текстом загружается как пуля по сравнению даже с небольшим баннером.
Простое выравнивание изображений, разрезанных на более мелкие части.
Простой способ, позволяющий писать текст в двух или более столбцах рядом друг с другом.
В этом руководстве мы рассмотрим следующие темы:
Основные теги таблиц
Чтобы создать таблицу на веб-странице, сначала необходимо определить структуру таблицы с помощью тега TABLE в HTML. Начало и конец таблицы отмечаются тегами
При отсутствии закрывающего тега отладка кода может вызвать затруднения. Вместо того, чтобы снова и снова писать заголовок HTML, тело и т. д., теги, создание таблицы объясняется только с использованием тегов таблицы. Теперь наша таблица имеет одну строку, и она выглядит ниже 9.0003<таблица>....... .......
Была создана пустая строка, и теперь нам нужно иметь несколько ячеек таблицы, чтобы мы могли что-то поместить в эти ячейки. В таблице используются два типа тегов ячеек.
1.
2.
Строки кода иллюстрируют эту концепцию:
теги таблицы
<тело>
<таблица>
название книг
авторы
dhtml
Д Такур
грустно
авад
Установка границ таблицы
Таблицы с рамками намного легче читать и они более привлекательны. Вы можете указать границу таблицы, используя атрибут «border = number» в открывающем теге таблицы. Число указывает ширину границы вокруг таблицы в пикселях. Значение по умолчанию обычно равно нулю. Большинство браузеров отображают границы таблиц с 3D-эффектом. В следующем коде показано использование атрибута границы в таблице.
теги таблицы
<тело>
<граница таблицы=7>
название книг
авторы
dhtml Дес Радж
грустно
авад
Также цвет границы можно задать с помощью атрибута «цвет границы» в теге
.
Он принимает либо номер RGB, либо принятое название цвета. Следующий код показывает использование атрибута цвета границы в таблице как:
теги таблицы
<тело>
название книг
авторы
dhtml
Томас Пауэлл
<тр>
грустно
авад
Включая цвет фона
Вы даже можете установить цвет фона для всей таблицы, строки или ячейки таблицы (данные или заголовок). Цвет фона можно задать для всей таблицы с помощью атрибута bgcolor = color в теге
. Чтобы установить разные цвета фона для конкретной ячейки или строки, вы можете использовать атрибут bgcolor с тегами и. Следующий код устанавливает розовый цвет для первой строки и синий цвет для ячейки, содержащей текст «AWAD».
теги таблицы
<тело>
<граница таблицы=5 bordercolor="розовый">
название книг
авторы
стоимость
dhtml
Томас Пауэлл
200 рупий
грустно
bgcolor="blue">авад
150 рупий
анси с
баладжи
250 рупий
Удаление строк и столбцов
Чтобы удалить строку, просто удалите соответствующие теги
и , окружающие эту строку. Вместо удаления связанных строк кода; Вы также можете сделать их комментариями. Любой текст или код, заключенный между <- и ->, будет действовать как комментарий. Комментарий можно разместить в любом месте документа, и браузер проигнорирует все, что находится в квадратных скобках. Вы можете вставлять скрытые сообщения, заметки для себя, писать полезные сообщения или даже добавлять теги HTML в комментарии, и они будут проигнорированы. На аналогичном основании столбцы можно удалять из таблицы.
теги таблицы <тело> <граница таблицы=5 bordercolor="розовый">название книг
Он принимает либо номер RGB, либо принятое название цвета. Следующий код показывает использование атрибута цвета границы в таблице как:
