 |
Практическое занятие №2 посвящено изучению структуры внутри документа
|
|
|
|
Это занятие посвящено рассмотрению структуры внутри элемента BODY. Внутри этого раздела документа информация должна иметь чёткое разграничение и взаимосвязь между отдельными частями. В таблице 2 представлены элементы группировки и форматирования документа и теги их создающие. В таблице 3 описаны атрибуты форматирования содержимого элементов, влияющие на его отображение. В таблице 4 представлены атрибуты вспомогательного характера, которые могут использоваться в любом элементе HTML, в стилевых таблицах и сценариях.
Таблица 2. Элементы группировки и разделения
| Тег | Пояснение |
| <P> текст абзаца </P> | Абзац |
| <BR> | Разрыв текста с переходом на новую строку |
| <NOBR> текст </NOBR > | Отменяет разрыв текста, помещённого в этот тэг. Применяется в случае, если разрыв строки не желателен, например в заголовке. |
| <H1> заголовок </H1> <H2> заголовок </H2> <H3> заголовок </H3> <H4> заголовок </H4> <H5> заголовок </H5> <H6> заголовок </H6> | Шесть уровней заголовков, причём самый большой и жирный, с наибольшим интервалом между абзацами задаётся цифрой один (1), а самый мелкий – цифрой шесть (6), размеры остальных в промежутке между ними и расположены в порядке убывания. |
| <HR> | Горизонтальная линия. Толщина в пикселях может быть задана атрибутом Size = число. По умолчанию толщина равна 5. Ширина может быть задана атрибутом Width, а выравнивание – атрибутом Align (смотри табл. 3). Атрибут Noshade пытается избавиться от псевдотрёхмерности линии (тени). |
| <!- - комментарии - - > | Используются для того, чтобы скрыть от пользователя комментарии к исходному коду и текст сценария на языке Javascript от браузера, который его не поддерживает. Между значками, определяющими начало или конец комментария, не должно быть пробелов. Сам текст комментария может состоять из одной или многих строк. |
| <BLOCKQUOTE> </BLOCKQUOTE> | Используется для выделения большой цитаты в тексте. Текст цитаты смещается вправо (отступ слева). |
| <DIV> </DIV> | Используется для выделения некоторых элементов документа в отдельный блок для того, чтобы присвоить этим элементам, например, одинаковый стиль отображения. |
| <PRE> </PRE> | Используются для того, чтобы текст отобразился так, как он выглядит. Обычно помещается текст, созданный другими редакторами, например: MS Word и т.д. |
| <SPAN> </SPAN > | Используются для изменения стиля нескольких слов или даже нескольких символов. |
| <ADDRESS> </ADDRESS> | Используется для размещения контактной информации: адрес электронной почты, телефон и т.д. Физически текст отображается курсивом. |
|
|
|
Таблица 3. Элементы логического форматирования.
| Тег | Пояснение |
| <CITE> </CITE> | Используется для выделения обозначения источника цитат (названий книг и статей). Текст, заключённый в этот тэг, отображается курсивом. |
| <CODE> </CODE> | Применяется для вывода небольшого куска программного кода шрифтом фиксированной ширины. |
| <EM> </EM> | Используется для вывода важного фрагмента текста, отображается курсивом. |
| <KBD> </KBD> | Используется для выделения текста, вводимого с клавиатуры, шрифтом фиксированной ширины. |
| <SAMP> </SAMP> | Используется для выделения сообщения, выдаваемого программой, отображается шрифтом фиксированной ширины. |
| <STRONG> </STRONG> | Используется для вывода важного фрагмента текста, отображается полужирным шрифтом. |
| <VAR> </VAR> | Используется для отметки имён переменных, отображается курсивом. |
| <BLOCKQUOTE> </BLOCKQUOTE> | Используется для размещения цитаты в тексте. Текст цитаты смещается вправо. |
Таблица 4. Теги физического форматирования.
|
|
|
| Тэг | Пояснение |
| <B> </B>* | Отображает текст полужирным шрифтом. |
| <I> </I>* | Отображает текст курсивом. |
| <U> </U>* | Подчёркивает текст. |
| <STRIKE> </STRIKE>* | Отображается текст, зачёркнутый горизонтальной линией. |
| <BIG> </BIG> | Выводит текст шрифтом большего размера. |
| <TT> </TT> | Выводит текст шрифтом фиксированной ширины (телетайпным). |
| <SMALL> </SMALL> | Выводит текст шрифтом меньшего размера. |
| <SUB> </SUB> | Сдвигает текст ниже уровня строки и выводит шрифтом меньшего размера. |
| <SUP> </SUP> | Сдвигает текст выше уровня строки и выводит шрифтом меньшего размера. |
* Не рекомендуется употреблять эти тэги, а соответствующее форматирование определять в стилевых таблицах.
Таблица 5.Тэги и атрибуты задания шрифта (должны определяться в стилевых таблицах).
| Тэг | Атрибут и значение атрибута | Пояснение |
| <FONT> </FONT> | Fase=”Arial”, “Century” | Задаётся тип шрифта (один или список). |
| Size=1 | 2 | 3 | 4 | 5 | 6 | 7| +1|-1 | Размер шрифта по умолчанию принят равный трём (3). Самый большой равен семи (7), самый маленький – одному (1). Размер можно задавать абсолютным значением в диапазоне от 1 до 7 и относительным, прибавляя или отнимая от трёх. | |
| Color = #00FF00 | green | Цвет текста. Может задаваться в шестнадцатеричном виде (#00FF00) или английским названием цвета (green). | |
| <BASEFONT> | Служит для указания стандартных значений типа, размера и цвета шрифта для документа. Атрибуты такие же, как и для тэга FONT. |
Таблица 6. Атрибуты форматирования.
| Атрибут | Значение атрибута | Пояснение |
| Align * | left | right | center | justify | Выравнивание содержимого элемента относительно границ страницы: слева, или справа, или по центру, или по ширине. |
| Width * | число | Ширина содержимого элемента. Может быть задана в следующих единицах измерения: % (проценты), px (пиксели), pt (типографские пункты) (1pt=1/72 дюйма), in (дюймы), mm (миллиметры), cm (сантиметры), pc (пика) (1pc=12 пунктов) |
| Height * | число | Высота содержимого элемента. Может задаваться в тех же единицах, что и ширина. |
* Не рекомендуется употреблять эти атрибуты в элементах, а соответствующее форматирование определять в стилевых таблицах.
Таблица 7.Атрибуты, используемые всеми элементами.
| Атрибут | Пояснение |
| Id | Идентификатор известный в пределах документа присваивается элементу с помощью атрибута Id с целью ссылки на него в скрипте. |
| Class | Класс может быть определён либо как свойство, либо как дополнение к уже заданному определению. С помощью атрибута Class свойства класса могут быть присвоены элементу HTML. |
| Lang | Информация о языке, используемом для написания, например, сценария. |
| Direction | Направление текста |
| Title | Заголовок элемента |
| Style | Встроенная информация о стиле |
| Onclick | Событие, возникающее при нажатии кнопки. |
| Ondblclick | Событие, возникающее при двойном нажатии кнопки. |
| Onmousedown | Событие, возникающее при перемещении мыши. |
| Onmouseup | Событие, возникающее при перемещении мыши. |
| Onmouseover | Событие, возникающее при перемещении мыши. |
| Onmousemove | Событие, возникающее при перемещении мыши. |
| Onmouseout | Событие, возникающее при перемещении мыши. |
| Onkeypress | Событие, возникающее при нажатии на любую клавишу клавиатуры. |
| Onkeydown | Событие, возникающее при нажатии на клавишу клавиатуры «стрелка вниз». |
| Onkeyup | Событие, возникающее при нажатии на клавишу клавиатуры «стрелка вверх». |
|
|
|
Пример использования тегов из таблиц в теле документа.
<BODY>
<!--Практическое занятие №2 посвящено изучению структуры внутри документа. à
<H3>Управление и информация</H3>
<P> В сложных системах поддержание нужных режимов функционирования обеспечивается за счет <EM>управления </EM> отдельными элементами системы и системой в целом. В связи с этим из совокупности элементов системы наряду с другими могут быть выделены две особые группы элементов: <EM> управляющие </EM> устройства и управляемые объекты. Имеются примеры, когда такое выделение представляется искусственным, и функции управляющих и управляемых элементов тесно переплетаются. Тем не менее, будем в дальнейшем придерживаться упомянутого деления, так как оно оказывается удобным для исследования систем.
</P>
<HR>
<DIV Class=base>
<P> Управление является процессом <STRONG> переработки информации. </STRONG>От управляемых элементов системы поступает информация, характеризующая их <SAMP> состояние <SAMP> и режимы работы.
|
|
|
</P>
</DIV>
<ADRESS> my_name@mail.com </ADRESS>
</BODY>
Упражнение 2.1. Напишите тело раздела 1 Web-документа по выбранной вами теме.
|
|
|
