- •Южно-Уральский государственный университет
- •И дизайн сайтов
- •Лабораторная работа № 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()
- •Расширенный язык разметки гипертекста
- •Библиографический список
- •Оглавление
4.1.2. Текст заранее заданного формата (преформатированный текст)
<PRE> - парный тег предварительного форматирования. При выводе информации на экран тег сохраняет все дополнительные пробелы, символы табуляции и символы концов строк. При этом текст на экране выглядит точно так, как вы его создали в редакторе HTML.
Пример.
<font size=”5” color=”#55ff00”>
<PRE>
<b>Количество продаж
___________________________________________________
Апрель Май Июнь Июль Август </b>
Карандаши 300 1000 300 200 100
Блокноты 400 2000 400 300 200
Ластики 500 3000 500 400 300
Стрелки 600 4000 600 500 400
</PRE>.
С помощью тега <PRE> часто форматируют информацию табличного характера. Здесь это делается несколько проще и нагляднее. Однако существенно ограничены возможности организации рамок, общего оформления и размещения графики.
4.1.3. Выделение цитат. Тег <BLOCKQUOTE>
Тег позволяет напечатать текст с отступом от левого и правого края. Повторяя этот тег, можно увеличить величину отступа. Внутри тега можно использовать теги <P>, <Div>, <H>, <Span> и тег разрыва строки <BR>.
Пример (использование в документе тега BLOCKQUOTE ).
<BLOCKQUOTE>
Это замечательное средство выделения цитат, определений и других структурных элементов документа. Он широко применяется наряду с другими инструментами форматирования. Тег является парным. Внутри тега можно использовать теги параграфа и разрыва строки.
<p> Вот и все. До свидания. </p>
</blockquote>
Смещение текста
Атрибут <LEFTMARGIN=…> тега <BODY> задает смещение (отступы) текста и графики для всего HTML-документа по горизонтали.
Атрибут <TOPMARGIN=…> задает смещение (отступы) текста и графики для всего HTML-документа по высоте.
4.1.4. Воспроизведение видео в Internet Explorer
Файлы видео встраивают в Web-страницы при помощи атрибута DYNSRC=… тега <IMG>. Тег загружает некоторое встроенное в операционную систему программное обеспечение, предназначенное для воспроизведения видеоклипов. Обычно это OuickTime.
Атрибут START=… определяет каким образом задается начало воспроизведения. Значение openfile обеспечивает запуск видео автоматически при загрузке файла. Значение mouseover инициирует воспроизведение видео при наведении курсора на изображении-ссылке.
Атрибут LOOP=…задает количество повторов видеоклипов. Если нужно задать количество повторений бесконечным, надо ввести ключевое слово infinite.
Примеры.
1. <IMG DYNSRC=”file.avi” START= "mouseover” LOOP= “infinite”>.
2. <A href="pr1_21.htm"> <img dynsrc="pr1_21.mpg"
alt="pr1_21.mpg" width=”215” height=”160” align=”left”
hspace=”10” vspace=”5” start=”mouseover”>
Рис.1.1 (анимационный) </a>.
Здесь анимационный файл используется в качестве графической ссылки для демонстрации файла pr1_21.htm, содержащего ту же анимационную сцену, на полном экране. При наведении курсора мыши на ссылку она начинает анимироваться.
4.1.5. Бегущая строка
Ниже представлен пример встраивания бегущей строки в Web-страницы при помощи тега <marquee…>.
<marquee height=”25” width=”50%” hspace=”5” vspace=”5”
bgcolor=”#ffffcc” direction=”left” loop=”infinite”
scrollamount=”3” behavior=”alternate”>
Ниже приводится краткая инструкця для начинающих пользователей персонального компьютера. Прочтите ее "на всякий случай" !
</marquee>.
Атрибуты:
– Height, Width – высота и ширина окна;
– Hspace, Vspace – ширина и высота пустых полей вокруг окна;
– Bgcolor – цвет фона окна;
– Direction – направление движения бегущей строки: Left, Right, Up, Down;
– Loop – количество циклов повторения (значение infinite – непрерывный цикл);
– Scrollamount – длина в пикселах, на которую текст перемещается за один такт процессора (скорость движения);
– Behavior – задает характер движения бегущей строки: Alternate – переменное направление перемещения; Slide – строка вытягивается из одного края и останавливается у другого.