
- •Основы html
- •Инструментарий
- •Теги (дескрипторы) в html
- •Структура html-документа
- •Атрибуты
- •Создание Web-страниц
- •Определение цветов
- •Расположение рисунков на странице.
- •Лабораторная работа №1 Знакомство с таблицами
- •Формирование таблиц
- •Лабораторная работа №2 Форматирование текста в html-документах
- •Заголовки
- •Текстовые абзацы
- •Принудительный разрыв строки
- •Изменение шрифта
- •Начертания шрифтов
- •Нижние и верхние индексы
- •Горизонтальные линии на html – странице
- •Бегущая строка
- •Маркированные и нумерованные списки
- •Лабораторная работа №3 Организация гиперссылок
- •Элементы привязки
- •Адрес гиперссылки
- •Внутренние и внешние гиперссылки
- •Задание цвета гиперссылок
- •Лабораторная работа №4 Создание фреймовой структуры html-страниц
- •Что такое фрейм?
- •Организация фреймов
- •Лабораторная работа №5 Использование иерархических стилевых спецификаций (css)
- •Применение css
- •Внешняя стилевая спецификация
- •Внедренные стилевые таблицы
- •Внутренние стили
- •Классы в стилевых спецификациях
- •Определение стиля для специфического элемента
- •Работа со специальными элементами
- •Лабораторная работа №6 Организация форм
- •Создание формы
- •Описание элементов формы
- •Лабораторная работа №7 Создание клиентских сценариев
- •Размещение сценария
- •Выполнение сценария
- •Функции JavaScript
- •Пример проверки заполнения обязательных текстовых полей
- •Пример обработки кнопок с зависимой фиксацией (radio)
- •Пример для элементов select (option)
Определение цветов
При создании страницы Вам достаточно много придется работать с подбором различных цветов и их сочетаний. Цвет определяется для текста HTML-документа и его различных фрагментов (отдельных абзацев, заголовков, сносок, и т. д.). Цвет используется для задания фона документа и вида гиперссылок. Рассмотрим подробнее, как определяются цвета в Web.
При определении цветов для документа HTML можно использовать либо названия цветов, либо их шестнадцатеричные коды. Система шестнадцатеричного кодирования основана на трех компонентах – красном (Red), зеленом (Green) и синем (Blue), отсюда и ее название RGB, по первым буквам названий этих цветов. Каждый из компонентов соответствует шестнадцатеричному числу от 00 до FF (0 и 255 в десятичной системе счисления). Эти три значения затем объединяются в одно значение, которому предшествует знак #, например #800080, что соответствует фиолетовому цвету.
Следующие строки идентичны:
<body bgcolor=”#ffffff”>
<body bgcolor=”white”>
В качестве фона можно задать и рисунок. Для этого надо в тег <BODY> добавить инструкцию BACKGROUND=«имя_фонового_рисунка»:
<BODY BACKGROUND= "pr2_2.jpeg">.
Пример:
<html>
<head>
<title>пример: изменение фонового рисунка</title>
</head>
<body background="picture/pr2_2.jpg">
добро пожаловать на самую лучшую в мире web-страницу!
</body>
</html>
Расположение рисунков на странице.
Вы уже знаете, каким образом изменить фон страницы. На страницу можно также вставить необходимую Вам картинку.
Чтобы сообщить броузеру, что Вы собираетесь вставить рисунок, используйте тег <IMG>. Обязательным для этого тега является атрибут SRC (от английского SouRCe - источник). Он определяет путь до нашего графического файла, изображение из которого и должно быть выведено на Web-страницу.
Итак, в основной части HTML-документа в нужном Вам месте, необходимо написать: <IMG SRC="имя_файла">. Например: <IMG SRC="picture/pr2_4.gif">.
Пример:
<html>
<head>
<title>пример: вставка рисунка на страницу.</title>
</head>
<body>
добро пожаловать на самую лучшую в мире web-страницу!
<img src="picture/pr2_4.gif">
</body>
</html>
Вид в броузере этого HTML-документа с рисунком приведен на рис. 3.
Рис.3. Пример использования рисунка на Web-странице
Файлы с описаниями Web-страниц могут храниться в корневом каталоге, а графические файлы, используемые при оформлении Web-страниц, – в специально выделенной для этого папке, например, с именем images. В этом случае атрибут SRC будет содержать такую запись для указания пути к графическому файлу: SRC="images/pr2_4.gif".
Примечание: графические файлы должны быть в формате либо jpg либо gif.
Задание
Оформите приведенную статью, которая находится на компакт-диске (имя файла statya.doc) для публикации в Internet, в соответствии с Вашими эстетическими представлениями и на основе полученных выше знаний. На странице расположите картинку и примените фон. Коллекции картинок и фонов имеются на прилагающемся компакт-диске.
Пригласите преподавателя и покажите ему статью, оформленную для публикации в Web.
Контрольные вопросы
Посредством какой технологии можно легко перемещаться в Internet в поисках нужной информации?
Что такое Hyper Text Markup Language?
С помощью какой программы пользователь может просмотреть HTML-файл на компьютере, управляемом любой операционной системой?
Что такое гипертекст?
Какое назначение имеет программа-броузер?
Что такое World Wide Web?
Какой инструментарий необходим для создания HTML-страниц?
Что такое гиперссылка?
Какое расширение имеют HTML-файлы?
Что определяют теги?
Что обозначает слеш (/), предшествующий имени тега?
Между какими тегами заключен HTML-документ?
Какая часть Web-страницы заключается между тегами <head> и </head>?
Какая конструкция используется для присвоения имени документу?
Между какими тегами располагается все тело Web-страницы?
Каким образом можно поменять фон страницы?
Какие способы задания значения цвета используются в Web?
Что определяет каждая из составляющих значения цвета при задании его с помощью шестнадцатеричной системы кодирования?
Какое действие выполняют атрибуты?
Обязательно ли указывать атрибуты и почему?
Учитывается ли регистр букв в идентификаторах тегов и атрибутов?
С помощью какого тега можно расположить рисунок на Web-странице? Какой атрибут является обязательным для этого тега?
Какие графические форматы используются в Web?