- •А. П. Багаева разработка web-страниц
- •Университет имени академика м. Ф. Решетнева, 2012 © Багаева а. П., 2012 оглавление
- •5. Форматирование страницы с использованием
- •6. Использование формы для создания интерактивности
- •Предисловие
- •1. Первые шаги по созданию
- •1.1. Структура документа
- •Правила записи тегов
- •Параметры типа метаопределений name
- •Использование цветовых спецификаций при создании web-страницы
- •Способы задания цвета
- •1.2. Форматирование текста
- •Теги логического форматирования
- •Теги физического форматирования
- •1.3. Структурное форматирование
- •Теги структурного форматирования
- •1.4. Списки
- •Практическое задание создание web-страницы
- •2. Настройка страницы.
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •Исходные данные для создания web-страницы
- •2. Делаем web-страницу интереснее
- •2.1. Гиперссылки
- •2.2. Графика и мультимедиа на web-странице
- •2.2.1. Вставка графики в html-документ
- •2.2.2. Встраивание мультимедийных файлов в html-документ
- •Практическое задание графика и гиперссылки на web-странице
- •1. Включение графики.
- •2. Создание гиперссылок.
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •3. Основы построения таблиц
- •3.1. Создание и форматирование простой таблицы
- •3.2. Создание сложных таблиц
- •3.3. Вложенные таблицы
- •3.4. Разметка web-страницы при помощи таблицы
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •4. Оформление страниц с помощью фреймов
- •4.1. Создание простых фреймов
- •4.2. Создание вложенных фреймов
- •4.3. Взаимодействие фреймов
- •4.4. Плавающие фреймы
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •5. Форматирование страницы с использованием каскадных таблиц стилей
- •5.1. Формирование каскадных таблиц стилей
- •Селектор { Свойство: Значение; }
- •Единицы измерений значений свойств
- •5.2. Варианты использования css
- •5.3. Принцип наследования
- •5.4. Обзор свойств css
- •Свойства форматирования текста в css
- •Свойства структурного форматирования в css
- •5.5. Слои и позиционирование документов
- •Использование css при форматировании
- •1. Задание стиля для одного тега.
- •2. Задание стиля для одной web-страницы.
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •6. Использование формы для создания интерактивности на web-странице
- •6.1. Задание формы
- •6.2. Создание элементов управления
- •Теги и атрибуты для пользовательских форм
- •6.3. Комбинирование форм и таблиц
- •Практическое задание создание формы
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •Послесловие
- •Библиографический список
- •Багаева Анна Прокопьевна разработка web-страниц
- •660014, Г. Красноярск, просп. Им. Газ. «Красноярский рабочий», 31.
Теги физического форматирования
Тег |
Назначение |
Примечание |
<B></B> |
Выделение жирным начертанием |
Начертание шрифта |
<I></I> |
Выделение курсивом | |
<U></U> |
Выделение подчеркиванием | |
<TT></TT> |
Имитация телетайпа или моноширного шрифта | |
<SUB></SUB> |
Создание нижнего индекса |
Нижние и верхние индексы |
<SUP></SUP> |
Создание верхнего индекса | |
<FONT></FONT> |
Определяет свойства шрифта |
Размер – size Цвет – color Гарнитура – face |
<BASEFONT></BASEFONT> |
Определение свойства шрифта для всего документа |
Аналогичен тегу <FONT> |
<BIG> |
Увеличивает размер шрифта на один пункт |
Относительное изменение размера шрифта |
<SMALL> |
Уменьшает размер текста на один пункт |
Еще одним важным параметром шрифта является размер. Под размером шрифта понимают высоту его символов (букв). Для определения высоты шрифта используют типографические единицы – пункты (1 pt = 0,353 мм). Для нормального отображения на экране браузера HTML-документа обычно используют шрифт размером 12 пунктов.
Для изменения вида, размера и цвета шрифта предназначен тег <FONT>текст </FONT> с атрибутами FACE, SIZE, СOLOR.
FACE – название шрифта, например, FACE="arial". Лучше опускать данный атрибут, позволив браузеру представлять при интеграции кода тот шрифт, который используется по умолчанию, во избежание ошибок при отображении текста.
SIZE – размер шрифта. Значение этого атрибута может быть описано абсолютной или относительной величиной. Абсолютное обозначение – целыми числами от 1 до 7, относительная величина – цифра со знаком «+» или «–». Это количество пунктов, которые следует прибавить или отнять от размера шрифта (по умолчанию шрифт имеет размер 3 пункта).
COLOR – представляет собой либо цифровой код нужного цвета, либо обозначающую этот цвет символьную метку.
Например,
<FONT FACE="arial" SIZE="16 "СOLOR="olive">текст</FONT>
задает тип шрифта – arial, размер – 16 пунктов и цвет – оливковый.
<FONT FACE="arial" SIZE="+2" СOLOR="olive">текст</FONT>
В этом написании тега атрибут SIZE="+2" задает размер шрифта на 2 пункта больше, чем стандартный, т. е. 5 пунктов. При определении размера шрифта может оказаться, что вычисляемое значение равно нулю или отрицательно. Тогда шрифту назначается размер 1. Если же вычисляемый размер оказывается больше 7, то размер шрифта все равно считается равным 7. Любой атрибут тега <FONT> может быть опущен.
Чтобы увеличить размер шрифта более чем на один пункт или уменьшить, можно использовать последовательность из нескольких тегов <BIG> или <SMALL>.
Например, <BIG><BIG> текст </BIG></BIG> – увеличивает размер букв текста на 2 пункта; <SMALL> текст </SMALL> – уменьшает размер букв текста на один пункт.
Следует помнить, что смысловое выделение текста лучше всего применять тогда, когда это действительно необходимо, поскольку текст, излишне пестрящий жирным, курсивом или подчеркиваниями слов труден для восприятия, при его чтении сильно устают глаза и рассеивается внимание. Контекстное выделение можно использовать для отображения цитат или ключевых фраз, однако большую часть текста лучше всего выводить стандартным шрифтом нормального размера без выделения.
Для контекстного выделения текста используются теги:
<B>текст</B> – выделение жирным шрифтом;
<I>текст</I> – выделение курсивом.
Например,
<B>Стыд </B>–<I> это страх перед людьми, </I><B>совесть</B> – <I>страх перед Богом</I>
Данные пары можно вкладывать друг в друга, если необходимо сделать начертание букв жирным курсивом (рис. 1.5).
Рис. 1.5. Различие представления текста в двух примерах
<B><I>Стыд</I> </B>–<I> это страх перед людьми, </I><B><I >совесть</I></B> – <I>страх перед Богом</I>