Методические указания ППП. 2 часть

Международный институт компьютерных технологий

Кафедра информатики и вычислительной техники

ОСНОВЫ WEB-ДИЗАЙНА

методические рекомендации по выполнению лабораторных работ № 1–6

по дисциплине «Пакеты прикладных программ» для студентов специальности 230101 «Вычислительные машины, комплексы, системы и сети»

очной формы обучения

Воронеж 2008

УДК 681.3.06 (075)

Рецензент канд. техн. наук, доцент кафедры АВС

Воронежского государственного технического университета А.М. Нужный

Составитель: ассистент С. С. Тюрина

Основы Web-дизайна : методические рекомендации по выполнению лабораторных работ № 1-6 по дисциплине «Пакеты прикладных программ» для студентов специальности 230101 «Вычислительные машины, комплексы, системы и сети» очной формы обучения / сост. С. С. Тюрина. – Воронеж : Междунар. ин-т компьют. технологий, 2008. – 51 с.

Методические рекомендации содержат краткие теоретические сведения и задания для получения первичных навыков по практическому применению языка HTML для создания гипертекстовых документов (WEB-страниц).

Предназначаются для студентов второго курса.

Табл. 4. Ил. 14. Библиогр.: 5 назв.

Ответственный за выпуск - зав. кафедрой «Информатика и вычислительная техника», д-р техн. наук В. П. Ирхин

Печатается по решению Редакционно-издательского совета Международного института компьютерных технологий.

©Тюрина С. С., составление, 2008

©Международный институт компьютерных технологий, 2008

ВВЕДЕНИЕ

World Wide Web(WWW) – глобальная компьютерная сеть, содержащая миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере отображается в виде Webстраниц, поддерживающих технологию мультимедиа, объединяющих в себе различные виды информации: текст, графику, звук, анимацию и видео.

Пользователю приятно посещать те Web-страницы, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне Web-браузера.

Процесс создания таких страниц и называется webдизайном.

Итак, Web-страница может содержать форматированный, текста, насыщенный изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы, разбросанные как по всему Web-пространству, так и находящиеся на этом же сервере или являющиеся составной частью этого же Веб-проекта.. Чтобы реализовать все эти возможности, был разработанный специальный язык, называемый HyperText Markup Language (HTML), то есть Язык Разметки Гипертекста.

Документ, написанный на HTML, представляет собой текстовый файл, который содержит собственно текст, несущий информацию читателю, и флаги разметки. Последние представляют собой определенные последовательности символов, которые являются инструкциями для программы просмотра; в соответствии с этими инструкциями программа располагает текст на экране, включает в него рисунки, которые сохраняются в отдельных графических файлах, и формирует

гиперсвязи с другими документами или ресурсами Internet. Таким образом, файл на языке HTML приобретает вид WWWдокумента только тогда, когда он интерпретируется программой просмотра.

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими броузерами Web, как сейчас, так и в будущем

Лабораторная работа N1

Цель работы: получение практических навыков по

–созданию html страниц с помощью программы «Блокнот»;

–способам задания цвета в документе;

–изменению цвета шрифта;

–способам создания списков.

Краткие теоретические сведения

1.1 Язык HTML. Структура документа HTML.

HTML (HyperText Markup Language) документы представляют собой обычные текстовые файлы с расширением *.htm или *.html. Поэтому для создания HTML документа можно использовать обычный текстовый редактор, например Блокнот, сохраняя созданные в нем файлы с расширением

*.html

Исходный код представляет собой текст, отформатированный с помощью тегов. Документы, размеченные при помощи этого языка, просматриваются браузерами, например, Internet Explorer.

Теги бывают начальными (открывающими) и конечными (закрывающими, начинающимися со знака "/").

Большинство тэгов, как правило, используются парами. Т.е. первым идет открывающий тэг, он «объясняет» браузеру, что делать с последующим текстом. Затем следует закрывающий тэг, который указывает область действия первого.

Тэги не чувствительны к регистру. Это означает, что тэги <TITLE>,<title> и <TitLe> для браузера абсолютно одинаковы.

HTML документ ограничивается тэгами <HTML> и </HTML> - браузер должен знать, где страница начинается, и где заканчивается, состоит из заголовка (теги <HEAD> и

</HEAD>), содержащего различную служебную информацию о документе, и, собственно, непосредственного содержания документа (теги <BODY></BODY>), т.е. того, что вы видите в окне браузера. В заголовке находится заглавие (или название) страницы, теги <TITLE> и </TITLE>, рекомендуется не более 64 символов.

Пример:

<HTML > <HEAD>

<TITLE>Название странички </ TITLE> </ HEAD>

<BODY >

Здесь находится текст странички, различные картинки, ссылки

</BODY>

</HTML>

1.2 Способы задания цвета. Изменение цвета текста и фона.

Цвет в HTML документе определяется шестнадцатиричным числом вида #rrggbb, где первая пара символов является значением насыщенности для красного цвета, вторая - для зеленого, и третья пара - для синего цвета. #00 - минимальная насыщенность, #FF - максимальная насыщенность цвета. Можно использовать текстовое определение цвета: BLUE, RED, FUCHSIA. Применимы также значения LIGHTGREEN (светлозеленый), LIGHTYELLOW (светложелтый) и LIGHTBLUE (светлосиний).

Имена цветов и RGB-значения

black = 000000

silver = C0C0C0

gray = 808080

white = FFFFFF

green = 008000

lime = 00FF00

olive = 808000

yellow = FFFF00

maroon = 800000

red = FF0000

purple = 800080

fuchsia = FF00FF

navy = 000080

blue = 0000FF

teal = 008080

aqua = 00FFFF

Для изменения цвета, размера или начертания шрифта используется тэг <FONT ></FONT>.

Например, для того, чтобы сделать какую-ту часть текста на вашей странице красного цвета, нужно написать:

<FONT COLOR=red> ваш текст </FONT> или <FONT COLOR=#FF0000 > ваш текст </FONT>.

Можно задавать цвет для всего текста страницы, изменив открывающий тэг <BODY> на <BODY TEXT =цвет>.

Это означает, что весь текст страницы будет цветом, заданным вами, кроме текста, для которого цвет задается отдельно с помощью тэга <FONT ></FONT>.

Цвет фона устанавливается параметром BGCOLOR в тэге

<BODY >:

<BODY BGCOLOR =black TEXT =blue >. Это значит, что фон в вашем документе будет черным, а цвет текста - синим.

1.3 Создание списков. Виды списков.

Существует три основных вида списков в HTML-документе:

пронуменрованный

непронуменрованный

список описаний Пронумерованные списки.

В пронумерованном списке браузер автоматически вставляет номера элементов по порядку. Это означает, что если вы удалите один или несколько элементов пронумерованного списка, то остальные номера автоматически будут пересчитаны.

Пронумерованный список начинается стартовым тэгом <OL> и завершается тэгом </OL>. Каждый элемент списка начинается с тэга <LI>. Например:

<OL>

<LI> Программирование <LI> Алгоритмизация <LI> Проектирование

</OL>

1.Программирование

2.Алгоритмизация

3.Проектирование

Тэг <OL> может иметь параметры:

<OL TYPE=A|a|I|i|1 START=n>, где:

TYPE

Вид счетчика:

A - большие латинские буквы (A,B,C...)

a - маленькие латинские буквы (a,b,c...)

I - большие римские цифры (I,II,III...)

i - маленькие римские цифры (i,ii,iii...)

1 - обычные цифры (1,2,3...)

START=n

Число, с которого начинается отсчет Например:

<OL TYPE=I START=15>

<LI> Программирование <LI> Алгоритмизация <LI> Проектирование

</OL>

Непронумерованные списки.

Для непронумерованных списков браузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь браузера.

Пронумерованный список начинается стартовым тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>.

Тэг <UL> может иметь параметры:

<UL TYPE=disc|circle|square>

Тип тэга <UL> определяет внешний вид

маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square). Например:

<UL TYPE=square>

<LI> Программирование <LI> Алгоритмизация <LI> Проектирование

</UL>

Список определений.

Список определений начинается с тэга <DL> и завершается тэгом </DL>. Данный список служит для создание списков типа "термин"-"описание". Каждый термин начинается тэгом <DT> , а описание - тэгом <DD>. Например:

<DL>

<DT> Отдел маркетинга

<DD> Данный отдел занимается продвижением продуктов и услуг <DT> Финансовый отдел

<DD> Данный отдел занимается всеми финансовыми операциями <DT> Отдел кадров

<DD> Данный отдел занимается учетом и набором новых сотрудников фирмы, распределением отпусков, отслеживанием больничных листов и т.д.

</DL>

Отдел маркетинга Данный отдел занимается продвижением продуктов и услуг

Финансовый отдел Данный отдел занимается всеми финансовыми операциями

Отдел кадров Данный отдел занимается учетом и набором новых

сотрудников фирмы, распределением отпусков, отслеживанием больничных листов и т.д.

Задание 1.

1. Откройте блокнот -

Пуск/Программы/Стандартные/Блокнот и наберите следующий текст:

<HTML > <HEAD>

<TITLE>Моя первая страничка </ TITLE> </ HEAD>

<BODY>

Добро пожаловать! <BR >

Здравствуйте, это моя первая страница. <BR >

Меня зовут …. , и я хочу рассказать немного о себе…..

</BODY > </HTML >

2.Сохраните этот документ, присвоив ему имя index.html.

3.Откройте Internet Explorer. Выберите меню Файл -

Открыть - кнопка Обзор - Ваш документ (index.html).

4.Посмотрите теперь, что у вас получилось.

5.Если потребуется что-то изменить в HTML – коде, то, не выходя из

окна браузера, в меню Вид выберите команду (опцию) В виде HTML. В результате раскроется окно текстового редактора Блокнот с файлом вашей программы. Внесите нужные изменения и сохраните файл под тем же именем. После этого в окне браузера выполните команду Вид-Обновить или нажмите клавишу F5. В результате загрузится измененный HTML файл.

6. Попробуйте вставить несколько тэгов <BR> после тэга <BODY>- посмотрите, как изменится ваш документ.