- •Красноярск
- •Введение
- •1 Введение в html
- •1.1 Основные понятия
- •1.2 Пример html-документа
- •2 Теги текста
- •2.1 Основные теги текста
- •2.2 Теги форматирования текста
- •2.3 Пример использования тегов текста
- •2.4 Лабораторная работа
- •2.5 Контрольные вопросы
- •3 Стилевое оформление
- •3.1 Основные сведения и примеры стилевого оформления
- •3.2 Лабораторная работа
- •3.3 Контрольные вопросы
- •4 Таблицы
- •4.1 Основные теги таблиц
- •4.2 Пример использования тегов таблиц
- •4.3 Лабораторная работа
- •4.4 Контрольные вопросы
- •5 Списки
- •5.1 Основные теги списков
- •5.2 Пример использования тегов списков
- •5.3 Лабораторная работа
- •5.4 Контрольные вопросы
- •6 Изображения
- •6.1 Основные теги изображений
- •Примечание:
- •6.2 Примеры использования тегов изображения
- •6.3 Лабораторная работа
- •6.4 Контрольные вопросы
- •7 Гиперссылки
- •7.1 Основные теги гиперссылок
- •7.2 Навигационные карты
- •7.3 Пример использования гиперссылок
- •7.3 Лабораторная работа
- •7.4 Контрольные вопросы
- •8 Фреймы
- •8.1 Основные теги фреймов
- •8.2 Пример использования фреймов
- •8.3 Лабораторная работа
- •8.4 Контрольные вопросы
- •9 Формы
- •9.1 Основные теги форм
- •9.2 Пример использования формы
- •9.3 Лабораторная работа
- •9.4 Контрольные вопросы
- •10.1 Назначение JavaScript
- •10.2 История создания языка
- •10.3 Возможности языка
- •11 Задание для самостоятельной работы
- •Библиографический список
- •Содержание
3.2 Лабораторная работа
-
Запустите текстовый редактор Блокнот. Создайте HTML файл, содержащий в заголовке окна наименование темы лабораторной работы. Задайте файлу имя 2.htm.
-
Создайте стиль для тега <BODY>. Задайте цвет фона – темно синий.
-
Введите абзац текста. Измените цвет и размер букв в веденном абзаце, используя тег <FONT>.
-
Создайте стиль для тега <P> с именем Paragraph1. Задав цвет и размер букв, стиль шрифта.
-
Введите еще один абзац текста. Примените к нему созданный вами стиль Paragraph.
-
Установите синий цвет для трех типов заголовков, используя возможность присвоения свойства нескольким тегам.
-
Наберите строку текста, задав размер шрифта 250 пикселей, цвет букв - белый.
-
Наберите строку текста, задав размер шрифта 65 пикселей, цвет букв – красный. Отобразите текст этой строки таким образом, чтобы он накладывался на текст первой строки, а не располагался ниже.
-
Создайте стиль:
.second {color: #FF00FF}
-
Примените созданный в пункте 9 стиль к двум заголовкам:
<H3 class= second> Стильный заголовок </H3>
<H3> Простой заголовок </H3>
Проанализируете, какой вид имеет текст заголовков.
-
Создайте CSS – файл для хранения таблицы стилей. Перенесите все стили в этот файл. Подключите этот файл к вашей странице используя тег <LINK>. Примените созданные вами стили на странице.
3.3 Контрольные вопросы
-
Какими способами можно изменить размер шрифта? Перечислите эти способы.
-
Назначение раздела <STYLE>?
-
Назначение тега <FONT>?
-
Перечислите атрибуты и их назначение для тега <FONT>.
-
Как задать одинаковые свойства сразу нескольким тегам?
-
Назначение символов “{“, ”}”?
-
Для какого тега и какие параметры заданы в примере: H3 {color : #000000; font-size: 14 px; font-family : Arial}.
-
Назначение тега <DIV>.
4 Таблицы
4.1 Основные теги таблиц
Таблицы в HTML формируются нетрадиционным способом - построчно. Сначала с помощью элемента TR необходимо создать ряд таблицы, в который затем элементом TD помещаются ячейки.
TABLE. Элемент для создания таблицы. Обязательно должен иметь начальный и конечный тэги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR, TD, TH и CAPTION.
Атрибуты:
ALIGN - определяет способ горизонтального выравнивания таблицы. Возможные значения: left, center, right. Значение по умолчанию - left.
VALIGN - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.
BORDER - определяет ширину внешней рамки таблицы (в пикселях). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.
CELLPADDING - определяет расстояние (в пикселях) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
CELLSPACING - определяет расстояние (в пикселях) между границами соседних ячеек.
WIDTH - определяет ширину таблицы. Ширина задается либо в пикселях, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
HEIGHT - определяет высоту таблицы. Высота задается либо в пикселях, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
BGCOLOR - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
BACKGROUND - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
Примечания:
-
Если параметр HEIGHT указать равным 100%, то старые версии Internet Explorer будут создавать таблицу высотой чуть превышающей высоту окна браузера. Чтобы этого избежать, можно пожертвовать рамкой таблицы, указав BORDER="0".
-
Старые версии Netscape работают некорректно, если ширина и высота таблицы равны 100%. В этом случае вокруг таблицы остается свободное пространство.
-
Параметр VALIGN работает очень загадочно. Скорее, вообще не работает.
-
Параметр ALIGN не работает в старых версиях браузера Internet Explorer. Чтобы осуществить желаемое выравнивание таблицы, нужно поместить ее между тэгами элемента DIV
CAPTION. Задает заголовок таблицы. Содержание заголовка должно состоять только из текста. Использование блочных элементов в этом случае недопустимо.
Атрибуты:
ALIGN - определяет способ вертикального выравнивания заголовка таблицы. Возможные значения:
-
top - помещает заголовок над таблицей (значение по умолчанию);
-
bottom - помещает заголовок под таблицей.
TR (Table Row). Создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH
Атрибуты:
ALIGN - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right.
VALIGN - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle.
BGCOLOR - определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
TD и TH (Table Data & Table Head). Элемент TD создает ячейку с данными в текущей строке. Элемент TH также создает ячейку, но определяет ее как ячейку-заголовок.
Такое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами. Кроме того, улучшается работа браузеров, использующих речевой интерфейс. В качестве содержимого ячейки можно использовать другие таблицы.
Атрибуты:
ALIGN - определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование.
VALIGN - определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого параметра не было задано ранее в элементе TR.
WIDTH - определяет ширину ячейки. Ширина задается в пикселях или в процентном отношении к ширине таблицы.
HEIGHT - определяет высоту ячейки. Высота задается в пикселях или в процентном отношении к ширине таблицы.
COLSPAN - определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
ROWSPAN - определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
NOWRAP - блокирует автоматический перенос слов в пределах текущей ячейки.
BGCOLOR - определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
BACKGROUND - заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка. Данный параметр не работает в старых версиях браузера Netscape (до 3.X включительно).
Примечания:
-
Границы ячейки отображаются только в том случае, когда она имеет некое содержание. Чтобы получить пустую ячейку с границами, достаточно поместить в нее специальный символ
-
Параметр HEIGHT , указанный в процентном отношении, работает нормально лишь в том случае, когда явно задана высота всей таблицы.
-
Один из наиболее распространенных приемов web-дизайнера - создание "таблицы в таблице". Для этого достаточно расположить одну таблицу внутри ячейки другой.