- •Южно-Уральский государственный университет
- •И дизайн сайтов
- •Лабораторная работа № 1 Создание Web-страниц. Работа с текстом
- •1.1. Введение в язык html
- •Минимальный html-код
- •1.2. Основные теги языка html
- •1.2.2. Заголовок внутри документа
- •1.2.3. Теги для форматирования отдельных символов или групп символов
- •1.2.4. Физические теги форматирования
- •1.2.5. Размер, гарнитура и цвет шрифта
- •1.2.6. Теги абзаца и перевода строки
- •1.2.7. Выравнивание текста
- •1.2.8. Комментарии
- •1.2.9. Форматирование с использованием каскадных таблиц стилей (css)
- •1.2.9.1. Назначение стилей отдельным элементам страницы
- •1.2.9.2. Назначение стилей нескольким элементам одной страницы – создание внедренной таблицы стилей
- •1.2.9.3. В следующем примере в качестве селекторов используются непосредственно теги html
- •1.2.9.4. Селектор class
- •1.2.9.5. Идентификаторы селекторов
- •1.2.9.6. Контекстные селекторы
- •1.2.9.7. Назначение стилей для нескольких страниц сайта
- •1.2.9.8. Импортирование таблиц каскадных стилей
- •1.2.10.2. Свойства тега, определенные в .Block1 и .Block2 и другие часто применяемые свойства блоковых структур:
- •1.3. Задание к лабораторной работе №1
- •2.1.2. Теги абзаца и перевода строки для графики
- •2.1.3. Дополнительные элементы оформления
- •2.1.3.1. Разделительные полосы
- •2.1.3.3. Фоновый звук
- •2.1.4. Добавление внедренных объектов мультимедиа
- •2.1.5. Добавление элементов управления ActiveX
- •2.2. Задание к лабораторной работе №2
- •Лабораторная работа №3 Организация гипертекстовых связей
- •3.1. Методические рекомендации
- •3.1.1. Ссылки на фрагмент документа
- •3.1.2. Графические ссылки
- •3.1.3. Цвета гиперссылок
- •3.1.4.1. Настройка эффектов перехода Web-страницы
- •3.2. Задание к лабораторной работе №3
- •4.1.2. Текст заранее заданного формата (преформатированный текст)
- •Смещение текста
- •4.1.4. Воспроизведение видео в Internet Explorer
- •4.1.5. Бегущая строка
- •4.1.6. Организация возвратов
- •4.1.7. Списки определений (словарные списки)
- •4.2. Задание к лабораторной работе №4
- •Определение структуры и цветовое оформление таблиц
- •5.1.2. Выравнивание в таблицах
- •5.1.3. Составные ячейки
- •6.1.2. Плавающие фреймы
- •6.1.2. Изображения-карты
- •6.1.3. Интерактивные элементы – Roll Over (обработчик событий MouseOver)
- •6.2. Задание к лабораторной работе №6
- •7.1.2. Элементы управления формы
- •7.1.2.1 Поля ввода
- •7.1.2.2. Текстовые области
- •7.1.2.3. Переключатели
- •7.1.2.4. Флажки
- •7.1.2.5. Раскрывающиеся списки
- •7.1.3. Встроенные фильтры ie
- •Фильтр glow()
- •Расширенный язык разметки гипертекста
- •Библиографический список
- •Оглавление
1.2.7. Выравнивание текста
Теги <LEFT>, <RIGHT>, <CENTER> выравнивают текст по левому, правому краю, в центре.
Более современные браузеры для выравнивания текста используют атрибут ALIGN в тегах <P>, <Div>, <Hn> и др. который может принимать значения left, right, center, justify.
Пример.
<P ALIGN=”left”> Это называется выключкой по левому краю.
<P ALIGN=”right”> Это называется выключкой по правому краю.
<P ALIGN=”center”> Это называется центрированием.
<P ALIGN=”justify”> Это называется выровненный текст.
1.2.8. Комментарии
Для того, чтобы поместить в текст документа комментарий – пояснительный текст, который не отображается на экране, следует использовать следующий тег: < !-- …. -- >. Текст комментария располагается вместо точек.
В таблицах каскадных стилей (см. ниже) комментарии записываются иначе.
1.2.9. Форматирование с использованием каскадных таблиц стилей (css)
Одним из недостатков рассмотренной выше технологии форматирования HTML-документов является то, что в этом случае приходится многократно прописывать теги и значения их атрибутов для каждого нового абзаца, раздела (см. ниже), заголовка и т.д. Учитывая, что таких объектов только на одной страничке сайта может быть весьма много, размер файла и время его загрузки получаются неоправданно большими, текст программы плохо читается, ее логическая структура практически не просматривается. Обычно сайты содержат значительное количество страниц, что, естественно, многократно усиливает отмеченные проблемы. Трудоемкость разработки таких сайтов огромна.
В противовес такому форматированию в новых спецификациях HTML во главу угла поставлено логическое форматирование, при котором структура документа и его оформление, описываемое, в частности, значениями множества аргументов используемых тегов, четко разделены между собой. Решается эта задача при помощи каскадных таблиц стилей – CSS (англ. Cascading Style Sheets), представляющих собой формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Рассмотрим, как с помощью CSS сделать страничку, которая будет выглядеть лучше, чем страницы, созданные посредством “классического” HTML, при этом страничка будет иметь меньший размер, будет более структурированной и понятной, и быстрее загружаться в память компьютера. Основным понятием CSS является стиль, представляющий собой набор правил оформления и форматирования, который может быть применен к различным элементам страницы HTML.
1.2.9.1. Назначение стилей отдельным элементам страницы
CSS позволяют назначить собственный стиль визуального представления любому тегу HTML, в том числе тегу <body>. Если стиль задан для тега <body>, он наследуется всеми элементами (абзацами, разделами, заголовками и т. д.), помещенными внутри тела документа, если только для этих элементов не заданы собственные стили. Таким образом, нам уже не нужно прописывать теги <font> и атрибуты color, size и т. п. для каждого абзаца на странице – достаточно задать некий стиль для тега <body>, и все абзацы на странице будут отображены в соответствии с этим стилем. Данное свойство называется наследованием стилей и широко используется при разработке HTML-документов.
Допустим, мы хотим, чтобы все абзацы отображались шрифтом Times New Roman размером 12 пунктов темно-зеленого цвета. Для этого следует прописать атрибут style тега <body>, присвоив ему соответствующее значение.
В этом случае синтаксис тега <body> будет иметь следующий вид:
<body style = "font-family: 'Times New Roman, serif; font-size:12pt; color:darkgreen;">
При этом все абзацы на странице будут отображаться так, как это предусмотрено в теге <body>. Обратите внимание – когда мы задавали начертание шрифта, после названия Times New Roman мы указали начертание serif, что обозначает любой шрифт с засечками. Если на компьютере конечного пользователя не установлен шрифт Times New Roman, браузер подставит вместо него любой из имеющихся шрифтов с засечками.
Если отдельные абзацы или заголовки необходимо выделить оригинальными стилями, их можно определить обычным образом при помощи тега Font, или опять-таки при помощи атрибута style.
В следующем примере при помощи атрибута style в теге <p> определяется абзац, имеющий следующие атрибуты: высота шрифта – 16 пунктов (font-size:16pt); фон абзаца выделен цветом (background-color:#aaaacc); цвет символов текста (color:#0000ff). Абзац выровнен по правому краю (align = "right").
<p align="right" style="font-size:16pt; background:#aaaacc; color:#0000ff;">
Аналогичным образом на странице может быть описан заголовок (тег Н), текстовый блок (тег Div), ячейка таблицы и др.
В приведенных примерах используется встраивание стиля непосредственно в тег документа – это, так называемый, inline-стиль. Такой способ связывания CSS с HTML-документом рекомендуется в единичных случаях – если данный стиль планируется применить только к одному или незначительному количеству элементов только на одной странице сайта. Если же стиль должен быть применен ко многим элементам на одной странице или к нескольким страницам сразу, рекомендуются другие способы связывания CSS и HTML.