- •Введение в язык html
- •1. Понятие о html
- •2. Понятие о гипертексте
- •3. Понятие о html-файле
- •4. Понятие о тегах языка html
- •5. Структурные теги
- •6. Создание шаблона html-документа и первой Web-страницы
- •Тема 2: Основная часть Web-страницы План
- •1. Использование заголовков
- •2. Символы разрыва абзаца и разрыва строк
- •4. Форматирование текста с помощью стилей
- •5. Добавление линий и комментариев
- •Тема 3: Создание таблиц План
- •1. Начальный этап создания кода таблиц
- •2. Создание строк и столбцов таблицы
- •3. Выбор типа таблицы
- •4. Выравнивание данных в ячейках таблицы по горизонтали и вертикали
- •5. Окрашивание таблиц и рамок
- •Тема 4: Создание списков План
- •1. Списки как инструмент структурирования. Типы списков
- •2. Нумерованные списки
- •3. Маркированные списки
- •4. Списки определений
- •5. Вложение и комбинирование списков
- •Тема 5: Использование фреймов План
- •1. Идея использований фреймов
- •2. Создание фреймов
- •3. Загрузка страниц в фреймы
- •4. Настройка фреймов
- •Тема 6: Гипертекстовые ссылки План
- •1. Типы гиперссылок
- •2. Понятие об url и их использование
- •3. Создание гиперссылок на другие Web-страницы
- •4. Создание внутренних ссылок в документе
- •5. Создание ссылок на ресурсы мультимедиа и на адреса электронной почты
- •6. Загрузка страниц в различные фреймы
- •Тема 7: Графика в Web План
- •2. Выравнивания текста относительно изображения
- •3. Плавающие изображения. Поля вокруг изображений
- •4. Определение ширины и высоты изображения
- •5. Обтекание изображений текстом
- •Тема 8: Использование графики, цвета и текста План
- •1. Добавление на Web-страницы цветных фоновых изображений
- •2. Добавление на Web-страницы графических фоновых изображений
- •3. Изменение цвета текста и гиперссылок
- •4. Добавление кнопок перемещения
- •Тема 9: Мультимедиа План
- •1. Понятие о гипермедиа-ссылках
- •2. Создание гипермедиа-ссылок
- •4. Создание бегущей строки
- •5. Воспроизведение видеофайлов в окне Internet Explorer
- •Тема 10: Средства создания html-файлов План
- •1. Стандартные html-редакторы
- •1. Стандартные html-редакторы
- •Определения
- •Проверочная работа
- •Проверочная работа
Тема 8: Использование графики, цвета и текста План
1. Добавление на Web-страницы цветных фоновых изображений
2. Добавление на Web-страницы графических фоновых изображений
3. Изменение цвета текста и гиперссылок
4. Добавление кнопок перемещения
1. Добавление на Web-страницы цветных фоновых изображений
Если вы хотите создать Web-страницу, производящую на зрителя неизгладимое впечатление, то вам не обойтись без цветных фоновых изображений.
Сначала сделаем фоновое изображение цветным. С помощью атрибута BGCOLOR дескриптора <BODY> можно определить цвет фона, указав шестнадцетичное число, состоящее из 6 цифр. Этот атрибут имеет следующий формат:
<BODY BGCOLOR=#rrggbb>
…
</BODY>
2. Добавление на Web-страницы графических фоновых изображений
В HTML для создания графического фона используется атрибут BACKGROUND дескриптора <BODY>, например:
<BODY BACKGROUND="fon.gif">
Для получения эффекта браузер "выкладывает" изображение мозаикой, заполняя пространство фона. Тонкие горизонтальные полоски "спускаются" вниз по странице, воздавая вертикальную цветную полосу.
В том, что касается фоновых графических изображений, существует интересный парадокс. После загрузки в Web-браузер фоновое изображение отображается немного быстрее, если его физический размер больше (например, 60х90 мм, а не 30х40 мм). Все дело в том, что Web-браузер должен "выложить" изображение мозаикой на заднем плане Web-страницы. И, конечно, чем больше размер изображения, тем меньше элементов мозаики понадобится.
3. Изменение цвета текста и гиперссылок
После изменения цвета фона документа или добавления фонового изображения вы должны изменить цвета переднего плана (т.е. текста), чтобы сделать текст читабельным.
Цвет основного текста можно изменить с помощью атрибута TEXT дескриптора <BODY>. При этом используется следующий формат:
<BODY TEXT="#rrggbb">
Изменить цвета гиперссылок можно с помощью следующих атрибутов: LINK, VLINK, ALINK. Эти атрибуты устанавливают цвета для непосещенных, посещенных и активных ссылок соответственно.
Для изменения цвета ссылок используется следующий формат:
<BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
По умолчанию для LINK выбирается голубой цвет, для VLINK – фиолетовый, а для ALINK- красный.
С помощью контейнера <FONT> и его атрибута COLOR можно изменить цвет любого символа или группы символов:
<FONT COLOR=red>Это текст красного цвета.</FONT>.
Дескриптор <FONT> можно использовать также для изменения шрифта, отображаемого браузером. Для этого используется атрибут FACE, за которым следует список имен шрифтов, с помощью которых браузер должен отображать приведенный далее текст:
<FONT FACE="Arial">Как выглядит этот текст?</FONT>
4. Добавление кнопок перемещения
О том, как создать изображения-ссылки мы говорили с вами на прошлом уроке. А теперь настало время поговорить о кнопках перемещения. Использование маленьких пиктограмм-ссылок – это единственный способ помочь пользователям перемещаться по вашей странице.
Предположим, вам нужны пиктограммы, представляющие собой ссылки на определенные страницы, и вы хотите, чтобы каждое изображение располагалось на отдельной строке. Типичный код этой процедуры приведен в следующем листинге:
<A HREF="архивы.html"><IMG SRC="images\ARCHIVES.gif" ALT="Архивы">Архивы</A><BR>
<A HREF="пользователи.html"><IMG SRC="images\AUCTION.gif" ALT="Архивы">Пользователи</A><BR>
<A HREF="поиск.html"><IMG SRC="images\BAZAAR.gif" ALT="Архивы">Поиск</A><BR>.