- •Южно-Уральский государственный университет
- •И дизайн сайтов
- •Лабораторная работа № 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()
- •Расширенный язык разметки гипертекста
- •Библиографический список
- •Оглавление
Лабораторная работа №3 Организация гипертекстовых связей
3.1. Методические рекомендации
Гиперссылки позволяют щелчком по выделенному слову или изображению перейти к другому документу или части того же документа. Эта возможность называется гипертекстом. Гипертекстовые ссылки выделяются в тексте документа специальным цветом.
Чтобы включить ссылку в ваш документ, необходимо указать в тексте открывающего тега <A> имя файла, на который происходит ссылка, в следующем формате: HREF=”имя файла”. Далее ввести текст ссылки и указать на завершение тега </а>.
Пример простой ссылки.
<A HREF=”glava2.htm”> Глава вторая </a>.
В данном примере фраза «Глава вторая» является ссылкой на HTML-документ, содержащийся в файле GLAVA2.htm, в том же каталоге (папке), что и текущий документ. Если же документ находится в подчиненном каталоге, то необходимо указать имя этого каталога, например:
<A HREF=”BOOK/glava2.htm”> Глава вторая </a>.
Такие ссылки называются относительными. При необходимости можно задать и абсолютные имена файлов в формате UNIX. Последние обычно используются для ссылок на несвязанные между собой документы, например:
<A HREF=”http://www.cpress.ru/BOOK/glava2.htm”> Глава вторая </a>.
Здесь http:/www.cpress.ru – это URL-адрес сайта (Uniform Resource Locator – унифицированный адрес ресурса).
3.1.1. Ссылки на фрагмент документа
Предположим вы хотите создать ссылку из документа docum1.htm на какой-то раздел (абзац) документа, содержащегося в файле docum2.htm. Сначала вы создаете именованную ссылку в документе docum2.htm:
<A NAME=”petja”> Петя Иванов </a>,
а затем ссылку на нее из документа docum1.htm, указывая не только имя файла, но и имя ссылки, разделив их символом #.
<A HREF=”docum2.htm#petja”> Познакомьтесь с Петей </a>.
В этом примере фраза «Познакомьтесь с Петей» является ссылкой на раздел ”petja” документа docum2.htm .
Для организации ссылок на разделы одного и того же документа используется та же технология, но в адресе ссылки не указывается имя файла. Например, чтобы перейти в именованный раздел petja в документе docum2.htm , надо создать следующую ссылку:
<A HREF=”#petja”>.
Для посылки электронной почты необходимо указать URL-адрес в следующем формате:
<A HREF=”mailto:abcd@graph2.susu.ac.ru”> Присылайте Ваши пожелания! </a>
При активизации такой ссылки, открывает специальное окно, в котором можно ввести текст электронного послания по адресу, указанному после mailto: .
3.1.2. Графические ссылки
Такие ссылки позволяют осуществить переход к другой Web- странице с помощью графического изображения.
Для того, чтобы сделать графическую ссылку, надо набрать тот же код, что и для текстовых ссылок. Но в том месте, где стоял текст, выделенный для ссылки, поставьте графическое изображение, на котором будет производиться щелчок.
Пример:
<A HREF=”dog.htm”><IMG SRC=”images/dog1.gif” ALT=”Собака”
WIDTH=”60” HEIGHT=”80”> </a>.
Целесообразно для графических ссылок не уменьшать размер исходного изображения при помощи атрибутов WIDTH и HEIGHT, а создавать отдельные миниатюрные изображения. Это существенно ускорит процесс загрузки документа и улучшит качество изображения графической ссылки.