Введение в web-дизайн
Методические указания
к выполнению лабораторной работы
для студентов
по направлениям 190000, 200000, 260000, 280000
специальностей 140211, 150202, 151001,
190601, 190603, 190702, 200503, 260601, 280101
Курган 2007
Кафедра: Информатики
Дисциплина: «Информатика»
(по направлениям 190000, 200000, 260000, 280000
специальностей 140211, 150202, 151001, 150002
192001, 190601, 190603, 190702, 200503, 260601, 280101)
Составила:
ассистент кафедры
Информатики Соколова Наталья Николаевна
Утверждены на заседании кафедры «24 »__мая____2007 г.
Рекомендованы методическим советом университета
«»_________________2007 г.
ВВЕДЕНИЕ
WWW (World Wide Web) можно перевести с английского как «всемирная паутина». Главная задача WWW – передача между компьютерами документов, сочетающих в себе текст с элементами форматирования, графические иллюстрации, ссылки на другие документы.Документы в системе WWW создаются с помощью языка разметки гипертекста HTML (HyperText Markup Language). Этот язык предназначен для того, чтобы документ имел приблизительно одинаковый вид при просмотре на различных компьютерах, работающих под управлением всевозможных операционных систем.
Гипертекст – информационная структура, позволяющая устанавливать смысловые связи между элементами текста на экране компьютера таким образом, чтобы можно было легко осуществлять переходы от одного элемента к другому. На практике в гипертексте некоторые слова выделяют путем подчеркивания или окрашивания в другой цвет (гиперссылки). Выделение слова говорит о наличии связи этого слова с некоторым документом, в котором тема, связанная с выделенным словом, рассматривается более подробно.
Отдельный документ, выполненный в формате HTML, называется:
– HTML-документом;
– Web-документом;
– Web-страницей.
Такие страницы, как правило имеют расширение htm или html.
Гиперссылка – фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.
Группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом или Web-сайтом.
Каждая HTML-страница имеет свой уникальный URL-адрес в интернете. URL-адрес ресурса образуется объединением доменного имени компьютера, на котором он хранится, и пути поиска (пути доступа), который ведет от корневого каталога жесткого диска этого компьютера через все вложенные каталоги к файлу, представляющему ресурс.
Типичный URL для WWW имеет вид:
https://www.название.домен/имя файла
Здесь название – это часть адреса, который часто употребляется для обозначения владельца сайта, а домен – обозначение крупного "раздела" Интернета: страны (ru), области деятельности (com) и т.д.
1. СТРУКТУРА WEB-СТРАНИЦЫ
Web-страница помещается в контейнер <HTML> </HTML> и состоит из двух частей: заголовка и отображаемого в браузере (обозревателе) содержания. Большая часть тегов образует контейнер, состоящий из открывающего и закрывающего тегов. Теги можно набирать как заглавными, так и строчными буквами.
Заголовок страницы помещается в контейнер <HEAD> </HEAD>. Заголовок содержит название страницы, которое помещается в контейнер <TITLE> </TITLE> и при просмотре отображается в верхней строке окна браузера. Также в заголовок помещаются не отображаемые при просмотре мета-теги, задающие кодировку страницы для её правильного отображения в браузере, а также содержащие описание и ключевые слова страницы, которые в первую очередь просматривают роботы поисковых систем.
Отображаемое в браузере содержание страницы помещается в контейнер <BODY> </BODY>.
2. ОСНОВНЫЕ ТЕГИ HTML
Задание 1. Создайте Web – страницу, знакомящую с основными тегами HTML.
1. Запустите текстовый редактор Блокнот командой [ Пуск-Программы-Стандартные-Блокнот].
2. Введите HTML – код страницы:
| <HTML> <HEAD> <TITLE> Первое знакомство с тегами HTML </TITLE> </HEAD> <BODY> Содержание документа </BODY> </HTML> |
3. Введите команду [Файл-Сохранить как…]. Файлу Web – страницы присвойте имя index.htm, тип файла задайте – Все файлы.
4. Запустите браузер и откройте созданный файл командой [Файл-Открыть]. В заголовке окна браузера высвечивается название Web – страницы Первое знакомство с тегами HTML, в браузере - Содержание документа.
5. Введите в текст страницы теги заголовков различных уровней (размеров):
| <H1> Заголовок первого уровня </H1> <H2> Заголовок второго уровня </H2> <H3> Заголовок третьего уровня </H3> <H4> Заголовок четвёртого уровня </H4> <H5> Заголовок пятого уровня </H5> <H6> Заголовок шестого уровня </H6> |
6. Внесите в текст страницы теги, определяющие начертание шрифта. Отделите этот фрагмент от остального текста с помощью горизонтальных разделительных линий.
| <HR> Обычный текст <B> Жирный </B> <I> Курсив </I> <U> Подчёркнутый </U> <B><I><U> Жирный подчёркнутый курсив </B></I></U> <EM> Выделение </EM> <STRONG> Усиленное выделение </STRONG> <HR> |
7. Введите в текст страницы теги, задающие списки нумерованные и ненумерованные, а также списки определений:
| <OL> <LI> Первый элемент списка </LI> <LI> Второй элемент списка </LI> <LI> Третий элемент списка </LI> </OL> <UL> <LI> Первый элемент списка </LI> <LI> Второй элемент списка </LI> <LI> Третий элемент списка </LI> </UL> |
| <DL> <DT> ТЕРМИН 1</DT> <DD> Пояснение к термину 1 </DD> <DT> ТЕРМИН 2</DT> <DD> Пояснение к термину 2 </DD> <DT> ТЕРМИН 3</DT> <DD> Пояснение к термину 3 </DD> </DL> |
В процессе создания Web – страницы приходится добавлять новые теги и просматривать получаемый результат. Активизируйте блокнот с открытой в нём Web – страницей. Внесите в содержание страницы необходимые изменения и сохраните новый вариант страницы. Затем активизируйте браузер, щёлкнув на кнопку Обновить. В браузере отобразится обновлённая Web – страница.
3. ЦВЕТОВАЯ СХЕМА, ВСТАВКА
ИЗОБРАЖЕНИЙ И ГИПЕРССЫЛОК
Web – сайты обычно являются мультимедийными и интерактивными, то есть содержат изображения и гиперссылки. При форматировании текста, вставке изображений и гиперссылок используются теги с атрибутами. Атрибуты и присвоенные им значения записываются внутри открывающего тега. В одном теге можно использовать несколько атрибутов, разделённых между собой пробелами, а одни и те же атрибуты могут использоваться в различных тегах.
Задание 2. Создайте Web – страницу «Визитная карточка».
Рассмотрим создание Web – страницы на примере создания сайта о себе. Начальная страница должна содержать сведения: Фамилия, имя, отчество, год рождения, место учёбы (факультет, группа), краткий рассказ о себе и о своих увлечениях, иллюстрацию к рассказу. Вторая страница содержит уже подробный рассказ о своём хобби и несколько (2-3) иллюстраций. Страницы связаны между собой гиперссылками.
Создадим начальную Web – страницу, в процессе работы над которой познакомимся с применением атрибутов тегов для вставки изображений, гиперссылок, таблиц.
1. Запустите текстовый редактор Блокнот.
2. Дайте странице название «Визитная карточка», между тегами <BODY> и </BODY> наберите текст, содержащий вышеперечисленные сведения о себе. Сохраните текст в файле Визитка.txt.
3. Отформатируйте текст (разметьте абзацы и расставьте заголовки), сохраните текст в файле Визитка.htm.
4. Просмотрите полученную чёрно-белую страницу в браузере (рис. 1).
Рис. 1. Отображение черно-белой страницы в браузере
5. Атрибуты задания цветовой схемы (цвета фона, текста и гиперссылок).
Цвет на Web – странице задают либо его названием, либо числовым шестиразрядным шестнадцатиричным кодом #RRGGBB (первые два разряда задают интенсивность красного цвета, вторые – зелёного, третьи – синего). Значение яркости может меняться от минимальной 00 до максимальной FF. В таблице приведены примеры некоторых цветов:
| цвет | код | название | цвет | код | название |
| черный | #000000 | black | фиолетовый | #FF00FF | magenta |
| белый | #FFFFFF | white | бирюзовый | #00FFFF | cyan |
| красный | #FF0000 | red | желтый | #FFFF00 | yelloy |
| зеленый | #00FF00 | lime | золотой | #FFD800 | gold |
| синий | #0000FF | blue | оранжевый | #FFA500 | orange |
| серый | #808080 | gray | коричневый | #A82828 | brown |
Основную цветовую схему страницы можно задать в теге <BODY> с помощью атрибутов:
| Цвет фона | BGCOLOR=”#RRGGBB” |
| Текстура фона | BACKGROUND=”file.jpg” |
| Цвет текста | TEXT=”#RRGGBB” |
| Цвет текста ссылки | LINK=”#RRGGBB” |
| Цвет текста активной ссылки | ALINK=”#RRGGBB” |
| Цвет текста просмотренной ссылки | VLINK=”#RRGGBB” |
При использовании текстуры, закрывающей собой всю площадь страницы, применение однотонного фона кажется излишним. Однако рисунки загружаются несколько медленнее, чем текст. Всё это время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для фона указывается цвет, совпадающий с основным тоном фонового рисунка.
Для оформления страницы о себе можно использовать следующую цветовую схему:
<BODY BGCOLOR =”FFFFCC" background="2.jpg" text="993300" link="55FFAA" alink="FF0000" vlink="00FF00">
6. Для размещения на Web – странице изображений используются графические файлы форматов GIF, JPEG, PNG. Изображения помещаются на Web – страницу тегом <IMG> с атрибутом SRC, сообщающим браузеру имя и местоположение графического файла:
<img src="FILE.gif">