|
|
Учебнометодическое пособие к лабораторнопрактическим занятиям по дисциплине Введение в информационные технологии для студентов направления подготовки 44. 03. 04 Профессиональное обучение всех форм обучения
…
| …
… |
… |
Полужирный шрифт
Курсив
Более крупный шрифт
Более мелкий шрифт
Нижний индекс
Верхний индекс
Самый крупный размер заголовка
Промежуточные размеры заголовков
Самый мелкий размер заголовка
Переход на новую строку
Новый абзац
Горизонтальная линия
Компоновка текста, как в коде
Нумерованный список
Маркированный список
Элемент списка
Таблица
Заголовок таблицы
Строка таблицы
Ячейка заголовка
Ячейка данных
|
Таблица 2. Теги внесения ссылок на дополнительную информацию
Теги
|
Действие
|
…
…
|
Ссылка на текстовый файл или рисунок
Установка метки внутри файла
Вставка изображений
|
Таблица 3. Основные атрибуты тегов
Атрибут
|
Возможные значения
|
Действие атрибута
|
В каких тегах используется
|
COLOR=
|
GRAY (серый), AQUA (аквамарин), BLACK (черный), BLUE (синий), FUCHSIA (яркий пурпурно-красный), GREEN (зеленый), LIME (зеленоватый), MAROON (темно-бордовый), NAVY (темно-синий), OLIVE (оливковый), PURPLE (пурпурный), RED (красный), SILVER (серебристый), TEAL, YELLOW (желтый), WHITE (белый). Возможны также те же слова с приставками LIGHT и DARK, например LIGHTGREEN (светло-зеленый), DARKBLUE (темно-голубой)
|
Задает цвет линий и шрифта в тексте или таблице
|
,
|
BGCOLOR=
|
Задает цвет фона
|
, , ,
|
BORDERCOLOR=
|
Задает цвет внешнего контура таблицы
|
TEXT=
|
Задает цвет шрифта в документе в целом
|
|
LINK=, VLINK=, ALINK=
|
Цвета соответственно непосещенных, посещенных и активных ссылок
|
|
BACKGROUND=
|
"URL" файла с изображением для фона
|
Создает фон-картинку
|
, | , | ,
|
BORDER=
|
Целое число без размерности
|
Задает толщину окантовки для изображения или таблицы
|
![]() ,
ALIGN=
|
LEFT, CENTER, RIGHT
|
Горизонтальное выравнивание текстового фрагмента или таблицы в целом
|
, , , …, , ,
, , |
|
ALIGN=
|
BOTTOM, ТОP
|
Размещение заголовка над или под таблицей
|
|
ALIGN=
|
BOTTOM, LEFT, RIGHT, ТОP, MIDDLE
|
Размещение текстового пояснения к картинке
|
![]()
|
VALIGN=
|
MIDDLE, TOP, BOTTOM
|
Вертикальное выравнивание фрагмента
|
, | , |
|
WIDTH=
|
Целое число без размерности или со знаком %
|
Длина/высота фрагмента в пикселах или в процентах от ширины/высоты окна. Для всех ячеек, находящихся в строке/столбце, используется максимальное значение из заданных в ее/его ячейках
|
,
, , | , ![]()
|
HEIGHT=
|
SIZE=
|
Целое число без размерности (по умолчанию 1)
|
Толщина линии, размер шрифта
|
,
|
TYPE=
|
1, A, a, i, I
|
Тип нумерации элементов упорядоченного списка
|
|
START=
|
Номер первого элемента в выбранном типе нумерации
|
Примечание. Первое из перечисленных значений атрибутов тегов – значение по умолчанию.
3. &-последовательности, комментарии
Иногда в документе приходится использовать такие знаки, которые имеют в языке HTML специальный смысл. Например, двойные кавычки " " выделяют значение атрибута, и если их использовать вне тега, браузер не поймет конструкцию и пропустит ее. Чтобы этого не произошло, для отображения служебных символов используют специальные последовательности знаков, начинающиеся с символа & и заканчивающиеся знаком; (точка с запятой) – так называемые &-последовательности. Основные из них:
последовательность < (от английского "less than") – вместо символа < (меньше);
последовательность > (от "greater than") – вместо символа > (больше);
последовательность " (от "quotations mark") – вместо символа " (двойные кавычки);
последовательность & (от "ampersand") – вместо символа &;
последовательность (от nonbreaking space – неразрывный пробел) – вместо пробела, который не следует игнорировать при выдаче документа в окно браузера. Эта &-последовательность как бы вставляет в текст невидимую глазу букву, которую браузер воспринимает как реальную и оставляет для нее место на экране. Она используется для заполнения пустых ячеек таблицы, пустых абзацев, для склеивания слов (если набрать TOP 100, то у вас никогда не получится, что TOP останется в одной строке, а 100 перенесется на следующую, например, при изменении шрифта или размера окна браузера).
Внимание: &-последовательности должны набираться только в нижнем регистре, точка с запятой в конце последовательности обязательна. Пример: чтобы пользователь увидел на экране слова крейсер "Аврора", в HTML-документе должен быть следующий код:
крейсер "Аврора"
Чтобы код HTML было легче понимать и править, полезно вводить в него комментарии, которые были бы видны только при работе с кодом, но не отражались бы в окне браузера при просмотре документа. Для этой цели используют специальный контейнер, написанный не по стандартным правилам. Он выглядит так:
Примеры:
Внимание: в текст комментария не допускается вставлять два и более дефисов подряд: -- или ----- (разные браузеры по-разному реагируют на это).
4. Структура документа HTML
Каждый HTML-документ состоит из трех главных частей.
Объявление HTML-кода – контейнер …
Заголовок документа – контейнер
Тело документа – контейнер …
…..........
задают следующие свойства:
TEXT – цвет текста там, где он не указан специальными средствами. По умолчанию черный.
BGCOLOR – цвет фона. По умолчанию белый.
BACKGROUND – фоновое изображение (аналогично рисунку на Рабочем столе). Значением является URL файла–изображения.
LINK,VLINK, ALINK – соответственно цвета непосещенных, посещенных и активных в данный момент гиперссылок.
Примеры:
Первый тег задает для базового оформления документа светло-серый шрифт на темно-синем фоне. Все отступления от этого стандарта в дальнейшем надо будет оговаривать дополнительными тегами внутри документа. Второй в качестве фона использует изображение, находящееся в файле море.jpg, расположенном в том же каталоге, что и вызывающий его документ (подробнее см. п. 8). Цвет шрифта так же, как и в первом примере, – светло-серый.
Основные теги, определяющие вид документа в окне браузера, рассмотрены ниже и приведены в виде справочника в табл. 1, 2, 3.
5. Теги форматирования шрифта
В HTML существуют два подхода к шрифтовому оформлению текста – так называемые физические и логические стили. Здесь рассматриваются только физические стили. Под ними подразумевают прямое указание браузеру на изменение текущего шрифта. Теги физических стилей – контейнерные. Например, между тегами и будет жирный шрифт (Bold), а между и – курсив (наклонный – Italic). Основные контейнеры физических стилей:
… – жирный шрифт;
… – курсив;
… – подчеркнутый текст;
… ,
… – перечеркнутый шрифт;
… – шрифт большего размера;
… – шрифт меньшего размера;
… – подстрочный индекс;
… – надстрочный индекс;
… – изменение типа, цвета и размера шрифта.
В теге допускаются атрибуты:
SIZE – размер букв, возможные значения: 1, 2, 3, …, 7. По умолчанию 3;
COLOR – цвет шрифта. Можно указывать шестнадцатеричными кодами или английскими словами. По умолчанию BLACK;
FACE – изменение типа шрифта, возможные значения: ARIAL, COURIER и т. д. По умолчанию VERDANA.
Теги могут комбинироваться, но при этом надо следить, чтобы контейнеры имели вложенную структуру (контейнер, открытый позже, должен быть закрыт до того, как будет закрыт внешний). Например, для комбинации жирного и наклонного шрифтов можно использовать такой код:
пример
В окне браузера мы получим:
Пример:
Помимо перечисленных выше тегов существуют шесть контейнерных тегов, удобных для оформления заголовков: | | |
| |
| |
|
|
Скачать 1.6 Mb.