УЧЕБНО — МЕТОДИЧЕСКОЕ ПОСОБИЕ Гипертекстовые технологии. Язык HTML.


Учебно - методическое пособие
по теме:
Гипертекстовые технологии. Язык HTML.
по дисциплине: «Программирование HTML»
Автор: преподаватель Владивостокского судостроительного колледжа И.Е.Толок

Данная методическая разработка выполнена для самостоятельного изучения темы «Гипертекстовые технологии. Язык HTML» дисциплины «Программирование HTML» студентами и преподавателями. В ней содержится теоретический материал по темам, вопросы для контроля и тестовый опрос. В лекционном материале подробно описаны необходимые команды, приведены примеры использования команд и результаты, получаемые при использовании команд тем или иным способом. Также приведены контрольные вопросы, ответы на которые можно найти в лекционном материале. Вопросы с вариантами ответов в тесте позволяют проверить свои знания и при необходимости изучить отдельные моменты повторно.

СОДЕРЖАНИЕ
Введение…………………………………………………………………………1
Лекция 1. Назначение и основные понятия. Форматирование символов и абзацев………………………………………………………………………….2
Лекция 2. Создание и использование списков……….…………………….7
Лекция 3. Определение общего вида документа. Элементы <BODY> и <FONT>…………………………………………………………………….…....10
Лекция 4. Графика на Web – странице…………………………………….13
Лекция 5. Гиперссылки…………………………………………..…………...18
Лекция 6. Таблицы…………………………………………………………….24
Лекция 7. Фреймы……………....……………………………………………..32
Лекция 8. Карты-ссылок… …………………………………………………...36
Контрольные вопросы…………………………………………...……..42
Тест – опрос на компьютере на тему: язык HTML………………...43
Список литературы…….……………………………………………….58

Введение
Для чего нужно это пособие?
Это пособие задумано как учебник для тех, кто хочет публиковать документацию любого рода в глобальной компьютерной сети Интернет. Чтобы опубликовать документ в Интернет, достаточно поместить его на сервер, постоянно подключенный к Интернет и способный общаться с другими серверами с помощью протокола передачи гипертекстов (HyperText Transfer Protocol, или http://). Совокупность таких серверов получила название "всемирной паутины" (World Wide Web, или WWW).
Разработку документов, однако, можно проводить и на компьютере, не имеющем выхода в Интернет.
Что такое HTML?
Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными. Известны спецификации 2.0, 3.0, 3.2 и 4.0. Все, о чем написано в пособии, будет гарантированно работать с программным обеспечением, поддерживающим любую известную на сегодня спецификацию HTML. Могу Вас уверить, что Ваши документы будут работоспособными и вполне приличными по внешнему виду.
Что Вам понадобится для освоения HTML?
Для освоения HTML по этому пособию Вам понадобятся две вещи:
Любой броузер, т.е., программа, пригодная для просмотра HTML-файлов (Internet Explorer или Netscape Navigator).
Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на Вашем компьютере установлен Windows, вполне подойдет Notepad.
Будем использовать текстовый редактор для подготовки HTML-файлов, а броузер — как инструмент контроля за сделанным.
Свои первые HTML-файлы Вы будете разрабатывать у себя на локальном диске. Другими словами, компьютер, на котором Вы будете заниматься, может и не иметь подключения к Интернет. При этом один и тот же *.html-файл может быть одновременно открыт и в Notepad, и в Internet Explorer. Сохранив изменения в Notepad, просто нажмите кнопку Обновить в Internet Explorer, чтобы увидеть эти изменения реализованными в HTML-документе.
Когда Вы освоите HTML в минимальной степени, Вы сами сможете подобрать себе редактор по вкусу. Дерзайте! Удачи!

Лекция 1.
Назначение и основные понятия. Форматирование символов и абзацев.
HTML - Hyper Text Markup Language. Web-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в World Wide Web (WWW). WWW - Всемирная Паутина, распределенная система доступа к гипертекстовым документам, существующая в Интернете. Web-страница кроме текста может содержать гипертекстовые ссылки, при помощи которых можно переходить к другим Web-страницам и просматривать их. Web-страница может содержать вставки в виде графики, анимации, видеоклипов и музыки.
Web (Internet) использует 3 технологии:
HTML, который служит для написания Web страниц.
HTTP (протокол передачи гипертекста) для пересылки этих страниц.
Web-броузер – программа для получения данных, отображения результатов.
Для просмотра Web-страниц можно использовать, например, MicroSoft Internet Explorer или NetScape Navigator, или Opera (просмотрщик или броузер).
Язык HTML позволяет:
Создавать и редактировать Web-страницы, в том числе свою домашнюю Web-страницу, которую можно затем разместить в Интернете;
Редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.);
Создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты, благодаря гипертекстовым ссылкам и возможности вставлять в документ HTML рисунки, диаграммы, анимации, видеоклипы, музыкальное и речевое сопровождение, текстовые спецэффекты (например, бегущая строка).
Существуют три основных способа создания Web-страниц (или документов HTML):
Использование текстового редактора Блокнот (NotePad), встроенного в Windows, и просмотр результатов с помощью броузера. Этот самый простой способ рекомендуется начинающим.
Технология этого способа создания Web-страницы такова:
В редакторе Блокнот создается файл Web-страницы, который сохраняется с расширением *.htm. Затем этот файл загружается и просматривается программой Internet Explorer. Для вызова редактора Блокнот с целью редактирования файла Web-страницы во время ее просмотра в Internet Explorer, используется пункт меню Вид, Источник или В виде HTML. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку "Обновить" в панели инструментов Internet Explorer.
Использование специальных редакторов документов HTML, например Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др.
Использование редактора Word-ХХ, где создается текст документа, который затем конвертируется в HTML-формат.
Рассмотрим основные понятия языка HTML.
1. Элемент - это конструкция языка HTML, или контейнер, содержащий данные. Web-страница представляет собой набор элементов.
2. Тег - это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, например: <HTML>. Конечный тег всегда снабжается косой чертой: </HTML>.
3. Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки позволяют переходить от одного документа к другому.
4. Фрейм - область гипертекстового документа со своими полосами прокрутки.
5. Апплет - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
6. Скрипт - программа, включенная в состав Web-страницы для расширения ее возможностей.
7. Загрузка (DownLoad) - копирование документа с Web-сервера на компьютер клиента.
UpLoad - копирование документа c компьютера клиента на Web-сервер - используется при создании собственной Web-страницы (т.е. при ее опубликовании).
Рассмотрим общую структуру типичного простейшего документа HTML:
<COMMENT>Комментарий</COMMENT>
<HTML>
<HEAD>
<TITLE>Название документа</TITLE>
</HEAD>
<BODY>
Здесь расположен текст самого документа HTML.
</BODY>
</HTML>
Дадим пояснения указанным тегам документа HTML.
<COMMENT> или <!-- --> - Комментарий к документу. Он игнорируется броузером. Комментарий не является обязательным и может отсутствовать.
<HTML> - идентификатор всего блока HTML-команд.
<HEAD> - идентификатор заголовка документа HTML.
<TITLE> - идентификатор заголовка окна просмотра.
<META> - этот непарный тег применяется для указания подробной информации о документе.
<BODY> - идентификатор HTML-команд документа для просмотра.
Три основных тега <HTML>, <HEAD> и <BODY> передают броузеру основную информацию для идентификации и организации документа.
Все указанные теги - парные, то есть каждый из них заканчивается конечным тегом с косой чертой.
Все команды можно писать как с маленькой буквы, так и с большой.
…о вышесказанном немного подробнее.
Документ HTML всегда имеет определённые границы.
Основным из всех тегов (дескрипторов), которые используются для создания документа HTML, является тег <HTML>.
Этот тег должен быть первым элементом документа, а соответствующий ему закрывающийся тег </HTML> - последним.
<HTML>
.
.
.
</HTML>
Эти теги указывают на то, что между ними расположен отдельный документ HTML. Без этих тегов броузер не сможет идентифицировать формат документа.
В элементе заголовка могут содержаться следующие сведения:
Название документа
Определение связей между различными документами
Указание броузеру необходимости создания формы поиска
Метод пересылки специальных сообщений определённому броузеру или другой программе.
За исключением элемента TITLE, элементы, расположенные внутри элемента HEAD, не видны читателю документа.
Теги форматирования текстового потока.
<P> - идентификатор конца абзаца.
<BR> - идентификатор перевода строки.
<HR> - идентификатор изображения горизонтальной линии.
Эти теги одиночные, т.е. непарные, они не требуют тегов с косой чертой.
<PRE> - установка равноширинного шрифта. В конце нужен тег </PRE>.
Рассмотрим парные теги форматирования заголовков и подзаголовков
документа: <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. При этом заголовки будут выведены большими буквыми, причем размер букв у тега <H1> будет самый большой, у <H2> меньше, у <H3> еще меньше и т.д. Рассмотрим парные теги форматирования символов текста:
<B> - идентификатор полужирного шрифта.
<strong> - идентификатор выделенного шрифта.
<i> - идентификатор курсива.
<U> - идентификатор подчеркивания.
<s> - идентификатор перечеркивания.
<tt> - идентификатор равноширинного шрифта (телетайпного или курьера).
<big> - задает увеличенный размер шрифта.
<small> - задает уменьшенный размер шрифта.
<CENTER> - задает центрирование текста.
<sub> - задает нижний индекс.
Пример: x<sub>1</sub>+x<sub>2</sub>=x<sub>3</sub>
<sup> - задает верхний индекс.
Пример: Теорема Пифагора a<sup>2</sup>+b<sup>2</sup>=c<sup>2
Пример с тегами форматирования текстового потока.Шрифт H3Шрифт H4Шрифт H5Шрифт H6КурсивПодчеркнутыйПеречеркнутыйТелетайпНижние индексы: x1+x2=x3
Верхние индексы (теорема Пифагора): a2+b2=c2
Теги форматирования абзацев.
align - атрибут выравнивания.
<p align=left> - выравнивание текста в абзаце по левому краю.
<p align=right> - выравнивание текста в абзаце по правому краю.
<p align=center> - выравнивание текста в абзаце по центру.
<p align=justify> - полное выравнивание по обоим краям экрана.
Лекция 2.
Создание и использование списков.
HTML позволяет определять внешний вид целых абзацев текста. Абзацы можно организовывать в списки, выводить их на экран в отформатированном виде. Списки бывают: нумерованные, маркированные, многоуровневые.
Маркированные списки: <UL> ... </UL>
Текст, расположенный между метками <UL> и </UL>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с метки <LI>. Например, чтобы создать вот такой список:
Иван;
Данила;
белая кобыла
необходим вот такой HTML-текст:
<UL>
<LI>Иван;
<LI>Данила;
<LI>белая кобыла
</UL>
Обратите внимание: у метки <LI> нет парной закрывающей метки.
Для изменения маркеров списка используется атрибут TYPE. Он может принимать значения:
Disc (кольцо)
Square (квадрат)
Circle (круг)
Пример:
<UL Type= Square> - это значит, что маркерами списка будут квадратики.
Нумерованные списки: <OL> ... </OL>
Нумерованные списки устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются цифры. Если слегка модифицировать наш предыдущий пример:
<OL>
<LI>Иван;
<LI>Данила;
<LI>белая кобыла
</OL>
получится вот такой список:
Иван;
Данила;
белая кобыла
Ниже приведены пять возможных способов нумерации:
1. TYPE=1 Стандартная цифровая нумерация - 1, 2, 3, ...
2. TYPE=A Прописные буквы - A, B, C, D, ...
3. TYPE=a Строчные буквы - a, b, c, d, ...
4. TYPE=I Римские цифры - I, II, III, IV, V, ...
5. TYPE=i Строчные римские цифры - i, ii, iii, iv, v, ...
Например:
<OL TYPE=A>
Каждый пункт далее написанного списка будет помечаться прописными буквами.
Многоуровневые (вложенные) списки
Элемент любого списка может содержать в себе целый список любого вида. Число уровней вложенности в принципе не ограничено, однако злоупотреблять вложенными списками все же не следует.
Вложенные списки очень удобны при подготовке разного рода планов и оглавлений.
Пример многоуровневого списка (то, что будет написано в HTML коде):
<HTML>
<HEAD>
<TITLE> Пример многоуровневого списка </TITLE>
</HEAD>
<BODY>
<OL>
<LH>Планеты солнечной системы:<BR>
<LI> Меркурий
<OL>
<LI> 57.9 млн.км от Солнца
<LI> Спутники отсутствуют
</OL>
<LI> Марс
<OL>
<LI> 227.9 млн. км от Солнца
<LI> два спутника
<OL>
<LI> Фобос
<LI> Деймос</OL>
</OL>
</OL>
</BODY>
</HTML>
в браузере это будет выглядеть следующим образом:
Планеты солнечной системы:
Меркурий
57.9 млн. км от Солнца
Спутники отсутствуют
2. Марс
1. 227.9 млн. км от Солнца
2. два спутника
1. Фобос
2. ДеймосЛекция 3.
Определение общего вида документа. Элементы <BODY> и <FONT>.
С данного тега начинается содержимое всего HTML кода. Этот тег имеет большое количество атрибутов и все они важны для определения общего вида документа.
Атрибуты элемента <BODY> и их назначение.
ALINK Определяет цвет, которым выделяется активная ссылка
BACKGROUND Указывает пути изображения, которое следует использовать в качестве фона документа.
BGCOLOR Определяет увет фона документа.
BGPROPERTIES Если этот атрибут имеет значение FIXED, то изображение фона не будет прокручиваться.
LEFTMARGIN Определяет ширину левого поля в пилселях.
LINK Определяет цвет ссылки, которая не была посещена.
TEXT Цвет текста.
TOPMARGIN Ширина верхнего поля в пикселях.
VLINK Примеры:
<BODY bgcolor=”teal” text=”aqua” link=”red”>
этот тег означает, что цвет фона документа будет зелёно-голубым, цвет текста – морская волна, цвет гипертекстовой ссылки- красный.
<BODY background=”back.jpg”>
этот тег задаёт фоновый рисунок на Web-странице из файла back.jpg
Использование цветов.
Цвет текста и фона должны быть контрастными. Не используйте близких оттенков.
Цвета в HTML определяются либо названиями (английское слово), либо шестнадцатеричными кодами. Два шестнадцатеричных символа занимают 1 байт. Эта система основана на трёх компонентах: красном, зелёном и синем (отсюда и название RGB-код). Каждый компонент соответствует шестнадцатеричному числу от 00 до FF. Эти 3 значения объединяются в одно значение, которому предшествует знак #.
Стандартные цвета и их значения.
Цвет Значение
Black (чёрный) #000000
Maroon(тёмно-бордовый) #800000
Green (зелёный) #008000
Olove (оливковый) #808000
Navy (тёмно-синий) #000080
Purple (фиолетовый) #800080
Teal (зеленовато-голубой) #008000
Gray (Серый) #808080
Silver (серебристый) #C0C0C0
Red (красный) #FF0000
Lime (лимонный) #00FF00
Yellow (жёлтый) #FFFF00
Blue (синий) #0000FF
Fuchsia (фуксия) #FF00FF
Aqua (морская волна) #00FFFF
White (белый) #FFFFFF
Пример:
<BODY bgcolor=”#FFFFFF”>
<BODY bgcolor=”White”>
Это одинаковые команды. Фон документа-белый.
Элемент <FONT>
Для управления внешним видом текста в HTML служит элемент <FONT>.
<FONT>
.
.
.
</FONT>
если в открывающемся теге не указаны атрибуты, то элемент <font> не будет оказывать никакого воздействия.
Атрибуты:
FACE (гарнитура)
SIZE (размер)
COLOR (цвет)
Пример:
<FONT face=”Arial” size=2 color=”green”>
эта команда означает, что начертание шрифта в документе – Arial, размер шрифта – 2, цвет шрифта – зелёный.
Можно задавать один из атрибутов или не одного.
Советы по оформлению текста:
Используёте в документе не более 2 и 3 различных гарнитур шрифта.
Обычно для основного текста используют шрифт Times New Roman, а для заголовков – Arial.
Курсив выглядит менее назойливым, чем полужирный шрифт, который следует использовать только для выделения особо важных мест.
Не злоупотребляйте подчёркиванием. Если длинные фрагменты текста подчёркнуты, это может запутать пользователя.
Размер заголовков должен уменьшаться по мере их значимости – это позволит легче ориентироваться в документе.
Лекция 4.
Графика на Web – странице.
Графика может быть расположена в любом месте Web-страницы. Следует иметь в виду, что нельзя точно указать ее конкретное положение, но это не проблема.
Ниже описан ряд дополнительных атрибутов, добавляемых к основному тегу графики, которые определяют размещение текста вокруг нее, но не ее положение.
<IMG> Изображение
Тег <IMG> используется для размещения графики на Web - странице. Для указания имени графического элемента к нему надо добавить атрибут SRC=" ".
SRC=" Исходный файл"  Необходимо указать имя файла, содержащего изображение. Обычно достаточно указать только имя файла, но если он расположен не в текущем каталоге, придется привести полный путь.
Совет:
Всегда указывайте имя графического файла в точном соответствии с его видом в файловой системе (в том числе с учетом прописных букв).
ALIGN=" "
Вы уже знакомы с выравниванием текста с помощью атрибута ALIGN=" ". Его можно использовать и для графики. Формально он определяет расположение текста относительно изображения. Если текст в строке отсутствует, оператор можно использовать для размещения изображения на левом или правом крае.
Примеры:
1. <IMG SRC="r1.jpg">
2. <IMG ALIGN="RIGHT" SRC="r1.jpg">
В первом случае в документ вставляется картинка с именем r1.jpg. Во втором случае картинка располагается в правой части окна, текст её обтекает.
Использование файлов нужных типов
Изображение можно сохранять в нескольких форматах. У каждого из них свои преимущества и недостатки. WWW поддерживает два основных формата изображений -GIF и JPEG.
Тип файлов GIF (Graphical Interchange Format - Графический формат обмена) был впервые применен много лет назад CompuServe (онлайновая информационная служба) для предоставления информации в стандартном графическом формате. Он стал первым типом файлов, поддерживаемых WWW.
Недавно был разработан формат JPEG (Joint Photographic Experts Group - Объединенная группа экспертов фотографии). Во многих случаях он оказался существенно эффективнее GIF, особенно для больших изображений. Файлы в формате JPEG занимают меньше места и, соответственно, быстрее загружаются. JPEG использует специальную технику компрессии изображений, что определяет его преимущество для рисунков и фотографий. Кроме того, JPEG сохраняет цвета и детали лучше, чем GIF. 
Оптимальные размеры файлов
При использовании изображений на Web - странице Вам придется обратить внимание на размеры файлов. Когда кто - то посещает Web - страницу, ему обычно необходимо загрузить весь текст и все изображения на свой компьютер. Текст загружается не долго, чего нельзя сказать об изображениях. Вы должны представлять себе, насколько велика ваша Web - страница и сколько времени требуется на ее загрузку. Загрузка должна занимать разумный промежуток времени. Представьте себе, что Вы обратились в компанию за консультацией. Вам пришлось потратить немало сил и времени на то, чтобы соединиться с нужным добавочным номером. А после этого приходится еще ждать, когда освободиться нужный специалист. Вы просто сидите и ждете у телефона, хотя предпочли бы заняться в это время чем - ни будь другим. Если Вы повесите трубку и перезвоните позже, Вас ждет такая же канитель. Примерно то же самое происходит, когда посетитель останавливается на Вашей Web - странице. Она сразу же начинает появляться, но посетителям приходится ждать, пока загрузится весь текст и все рисунки. До этого они не могут продолжить работу. Им приходится сидеть и смотреть, как их компьютер загружает все картинки одну за другой. И чем дольше им приходится ждать, тем больше они теряют терпение.
Поскольку пустое ожидание всегда раздражает, попробуем дать некоторые советы, которые помогут сделать так, чтобы посетители не уходили наливать себе чашку кофе, когда начинает загружаться Ваша Web - страница (иначе после одного-двух посещений они больше у Вас не появиться).
Максимальный размер файла
Лучше любые изображения на странице ограничивать размером 20 Кбайт. Такие изображения достаточно подробны и быстро загружаются. Ограничение в 20 Кбайт очень приблизительно. Если Вы встретили потрясающее изображение занимающее больше 20 Кбайт, спокойно используйте его. Просто помните, что если Вы вставляете слишком много больших изображений, время ожидания посетителей существенно возрастет.
Уменьшение размера и миниатюризация изображений
Если общий размер файлов превышает желаемый, у Вас есть несколько способов поместить изображения на домашнюю страницу, не заставляя каждого посетителя долго загружать их. Вы можете масштабировать изображения, уменьшив их размер на экране и, соответственно, размер файла. После уменьшения размера Ваше изображение становится труднее рассматривать. Некоторые изображения в сжатом виде смотрятся хорошо, другие же практически невозможно разглядеть. Другая возможность, которой можно воспользоваться - создание миниатюрных дубликатов более крупных изображений. Вы создаете на Web - странице миниатюру большого изображения и вставляете ссылку (о ссылках мы поговорим позднее) на изображение-оригинал, чтобы посетители смогли увидеть, если захотят. Миниатюры очень популярны, поскольку дают посетителям возможность выбирать только те изображения, которые они хотят увидеть. 
Задание альтернативного текста
Некоторые броузеры не поддерживают форматы GIF и JPEG, другие вообще не могут выводить изображения. Хотя наиболее распространенные броузеры поддерживают оба формата, Вы наверняка захотите, чтобы Ваша Web - страница была доступна абсолютно любому человеку. Кроме того, иногда загрузка изображений занимает много времени, и не очень приятно, если Ваши посетители будут видеть просто белые пятна на месте изображений.
Торопливые посетители часто командуют броузерам прекратить загрузку изображений с WWW. Поскольку загрузка изображений отнимает львиную долю времени, они предпочитают ускорить процесс, не выводя изображения. Для таких пользователей полезно дать альтернативный текст - тогда они могут прочесть краткое описание того, что представлено на рисунке, и при желании просмотреть его.
В описанных выше случаях полезно использовать атрибут ALT тега <IMG> ALT выводит заданный текст в той части экрана, где должно быть (или будет) изображение.
Ниже рассмотрим пример: изображения автомобилей. Если установить курсор на изображении автомобилей, то появиться альтернативный текст.
Пример:<IMG SRC="masch.gif" ALT="Выставка старых марок автомобилей">

Расположение текста рядом с графикой
Одной графики может оказаться недостаточно для полной передачи ее смысла. Поэтому вместе с графикой используют текст. Есть несколько способов выравнивания изображений на домашней странице по отношению к тексту. Атрибут ALIGN является частью тега <IMG>. С его помощью Вы можете задавать место изображения на экране и вид обтекания его текстом.
Перечислим восемь значений ALIGN.
ЗНАЧЕНИЕ ДЕЙСТВИЕ
LEFT Выравнивает изображение по левому краю страницы, строки текста выводятся справа от изображения
RIGHT Действует так же, как LEFT, но выравнивает изображение по правому краю страницы
TOP Выравнивает изображение по самому высокому элементу в строке
MIDDLE Выравнивает нижнюю границу строки посередине изображения
BOTTOM Выравнивает нижнюю границу строки по нижней границе изображения
Примеры:Текст выровнен по верху:
<IMG  SRC="r1.jpg" ALIGN="TOP">Аквариум.
Текст выровнен по середине:
<IMG  SRC="r1.jpg" ALIGN="MIDDLE">Аквариум.
Текст выровнен по низу:
<IMG  SRC="r1.jpg" ALIGN="BOTTOM">Аквариум.
Задание размера изображения
Вы можете управлять не только способом выравнивания изображения, но и его высотой и шириной. Как правило, изображения выводятся в натуральную величину, но с помощью атрибутов HEIGHT и WIDTH можно сжать или растянуть изображения, не изменяя самой картинки. Кроме того, данные атрибуты позволяют отвести вполне определенное место под изображение и пустить текст вокруг него оборкой. В этом случае, пока загружаются изображения, остальная страница будет уже видна. Многие применяют атрибуты HEIGHT и WIDTH именно по этой причине, даже если нет необходимости менять размер изображения. Значения HEIGHT и WIDTH задаются в пикселях. Тем самым задается доля размеров картинки по отношению к размерам экрана.
Пиксель (элемент рисунка) - это единица измерения, характеризующая разрешение монитора. Чтобы представить себе размер пикселя, вспомните, что стандартный экран монитора VGA (c разрешением 640х480) содержит 640 пикселей по ширине и 480 по высоте. Таким образом, изображение размером 320х240 пикселей займет примерно половину экрана монитора VGA.
Атрибуты HEIGHT и WIDTH используются в теге <IMG> наряду с атрибутами выравнивания и альтернативного текста.
Примеры:1.<IMG SRC="r1.jpg" ALT="Аквариум"  WIDTH="50" HEIGHT="50">
2.<IMG SRC="r1.jpg" ALT="Аквариум"  WIDTH="150" HEIGHT="350">
3.<IMG SRC="r1.jpg" ALT="Аквариум"  WIDTH="350" HEIGHT="200">
Отступы от графического изображения
При выводе графических изображений на экран отступы от них отсутствуют. Это приводит к излишней их "скученности", или, попусту говоря, портит их вид.
В тег <IMG> можно включить два дополнительных атрибута для указания отступа от изображения. Его величина задается в пикселях и обычно составляет 5 - 30.
HSPACE=
Устанавливает отступы от левой и правой сторон изображения.
VSPACE=
Устанавливает отступы от верхней и нижней сторон изображения. 
Фоновые изображения
При создании фона страницы Вы можете задавать не только стандартные цвета, но и фоновые рисунки. При правильном применении эта графика дает интересный эффект. Фоновые узоры состоят из крошечных изображений в формате GIF, покрывающих весь фон (это похоже на наклеивание обоев). Текст и изображения, естественно, располагаются поверх фона.
Фоновые изображения задаются так же, как и цвет фона, только для этого применяется атрибут BACKGROUND.
Примеры:Запись выглядит следующим образом:
<BODY BACKGROUND="fon1.jpg">
Запись выглядит следующим образом:
<BODY BACKGROUND="fon12.gif">
Прежде чем Вы начнете экспериментировать с фоновыми цветами и узорами, обратите внимание на некоторые нюансы.
Часто непродуманное использование фоновых цветов и узоров делает страницу абсолютно нечитаемой. Некоторые создатели выбирают слишком темный цвет или слишком громоздкий фоновый узор, и прочесть текст на таких страницах становится практически невозможно. Старайтесь применять только светлые тона и легкие узоры. Проверьте каждую страницу и убедитесь, что ее можно прочесть. Кроме того, использование фоновых узоров может существенно увеличить время загрузки страницы. Если Вы используете фоновый узор, убедитесь, что он занимает не больше 10 Кбайт. 
Лекция 5.
Гиперссылки.
Понятие гипертекстовой ссылки
Одна из поразительных особенностей World Wide Web заключается в возможности перехода с одной Web - страницы на другую с помощью, так называемой гипертекстовой связи. Web - страница без ссылок - это изолированный остров. Если кто-нибудь ее посетит, он не сможет оттуда попасть на другие острова-страницы. На предыдущих уроках мы научились интегрировать в Web - страницу графические изображения, пиктограммы и фоновую графику. Теперь настало время сделать следующий шаг и научиться ссылаться на другие страницы в WWW. Гиперссылки на Web - страницы - одно из основных свойств WWW. Любой документ может содержать ссылку на другой WWW - документ, заданную с помощью специального тега HTML.
Путешествуя по Web, Вы, наверное, встречали на Web - страницах Гипертекстовые ссылки. Это фрагменты текста, подчеркнутые выделенные чаще всего синим цветом. Отображенный таким образом текст называется текстом ссылки. Если на нем щелкнуть мышью, он автоматически осуществляет ссылку на другую Web - страницу. В каждом URL - адресе есть три части: протокол, узел Интернета и имя файла (включая путь к нему, если необходимо). Протокол - это правила, в соответствии с которыми два компьютера общаются друг с другом. Мы будем говорить в основном о http - стандартом протоколе WWW. Вы должны также указать узел Интернета и имя файла.
Например:
http://www.shafran.com/create
Если перевести это на русский язык, получится, что броузер должен с помощью определенного способа связи (http) связаться по Интернету с указанным адресом shafran.com, затем найти Web - страницу в поддиректории create.
Гипертекстовые ссылки часто используются, поскольку могут легко связать два документа, расположенные на противоположенных концах мира. Каждый документ и файл в Интернете имеют уникальный адрес, называемый универсальным указателем ресурсов (uniform resource locator - URL), Чтобы связать два документа, разработчики домашних страниц помещают на одной из них URL другой. URL напоминают адреса электронной почты. Интернет - компьютеры понимают, как транслировать URL и найти по ним, с кем нужно связаться. Независимо от того, где находятся Web - страницы, на которые Вы хотите сослаться - в Купчино или в Новой Зеландии, - WWW будет работать с ними одинаково. Броузер использует каждый URL для того, чтобы найти документ в Интернете и автоматически доставить Вам. Тому, кто просматривает Web - узлы по всему миру, нет нужды думать ни о URL, ни о том, как найти нужный документ. Обо всем позаботится Ваш компьютер.
Ссылки можно создавать на Web - странице только по отдельности. Вам необходимо определить, что будет служить текстом ссылки и, еще важнее, какую ссылку будет представлять каждый такой текст. Вы можете поместить на Web - странице сколько угодно ссылок и скомпоновать их любым способом.
Анатомия ссылки
Ссылаться на другие Web - страницы достаточно просто, но при этом необходимо понимать, каким образом помещать ссылки на странице, а также знать соответствующий синтаксис HTML. Как любой элемент HTML, ссылка задается парой тегов. Открывающий тег (называемый якорным тегом) - это тег <A>. Затем Вы задаете файл, на который ссылаетесь, а также текст ссылки. Все это завершается закрывающим тегом </A>.
Вот так, например, выглядит HTML - код ссылки нашего первого примера:
< A HREF=http://www.chafran.com/create > Que Publishing </A>
Где:
А - якорный тег;
HREF - ключевое слово гипертекстовой ссылки;
http://www.chafran.com/create - URL-адрес;
Que Publishing - этот текст будет выделен;
</A> - закрывающий якорный тег.
На экране это будет выглядеть следующим образом:
Que Publishing
Ccылки на местные Web – страницы
Вполне вероятно, что в одном месте у Вас окажется несколько HTML - документов. Допустим, у Вас слишком много информации для одного документа, и Вы решили разбить его на несколько HTML - файлов. Так, например, наши уроки состоят из нескольких документов. В таком случае естественно поместить на главной Web - странице ссылки на каждый из этих документов, которые позволяют легко и быстро на них перейти. Возможно даже, Вы выполните свою главную Web - страницу в виде оглавления, ссылающегося на несколько отдельных страниц.
(Необходимо для удобства главному документу присвоить имя: index. htm)
Так, например, в данном уроке мы ссылаемся на главной странице на читаемую Вами в данный момент страницу. Имя файла, содержащего данную страницу, 12у.htm. Текст ссылки: Ссылки на местные Web - страницы.
Чтобы создать данную ссылку мы написали следующее в блокноте:
<A HREF="12y.htm">Ссылки на местные Web - страницы.</A>
Совет:
Имя файла и его расширение необходимо записывать только  малыми буквами. Это позволит любому броузеру распознать файл. Например: dog.htm, kat.jpg, som.gif
Если искомый файл находится в отдельном каталоге, то необходимо прописать путь к нему.
Пример:
<A HREF=6/12y.htm>
Ссылки на местные Web - страницы. </A>
В данном примере файл 12у.htm находится в каталоге: 6.
Цвет ссылки
Вы можете изменить цвет текста ссылки. Для этого используется тег: < BODY>.
Перечислим три новых атрибута:
Атрибут Действие
LINK Атрибут LINK= используется так же, как и слово TEXT=. Когда установлено, что LINK="BLUE" (или задан любой другой цвет), все ссылки, которые не использовались посетителем (на которых он не щелкал мышью), отображаются синим цветом.
<BODY TEXT="RED" LINK="BLUE">
VLINK Возможно, вы заметили, что иногда цвет текста некоторых ссылок слегка отличается от остальных. Это показывает, что данная ссылка уже была активизирована Вами. Изменить цвет ссылки, на которой посетитель уже побывал (Visited Link), можно с помощью ключевого слова VLINK=. Вот как сделать, чтобы цвет такой ссылки менялся на светло-серый.
< BODY TEXT="LIME" LINK="AQUA" VLINK="SILVER">
ALINK Последнее, что Вы можете изменить, это цвет, который приобретает текст ссылки после того, как на ней щелкнули мышью. Цвет активной ссылки (Active Link) задается атрибутом ALINK=. При посещении кем-либо Вашей страницы текст ссылки приобретает цвет, заданный словом LINK=. Но когда на ней щелкают мышью, на короткое время цвет изменяется на заданный словом ALINK=. Продолжая использовать в этом примере ядовитые цвета, изменим текст активной ссылки на ярко-жёлтый< BODY TEXT="LIME" LINK="AQUA" VLINK="SILVER" ALINK="YELLOW">
Использование изображений для ссылок
В качестве средства ссылок на другие WWW - страницы можно использовать не только текст, но и изображения. Это означает, что, когда Вы щелкаете мышью на изображении, на экран выводится другой Web - документ, ссылкой на который и служило это изображение.
Так же, как Вы ссылались на другой HTML - документ с помощью текста, Вы можете сослаться на него с помощью изображения. Нужно только вместо текста ссылки задать изображение. По умолчанию Web - броузеры окружают изображение синей рамкой. Щелкнув мышью на любом месте изображения, посетители переходят на соответствующий документ.
В качестве ссылок на Web - документы Вы можете использовать любые виды изображений, рисунков и пиктограмм (кроме фоновых узоров).
Приведем примеры таких ссылок:
Есть пиктограмма картинки, при нажатии мышки на нее осуществляется переход к Web - документу sput.htm где находится сама картинка.
<A HREF="sput.htm" > <IMG SRC="sput.gif" ALIGN="LEFT" WIDTH=100 HEIGHT=100></A>
В качестве примера можно привести наши стрелочки перехода со страницы на страницу:
<A HREF="14y.htm"><IMG SRC="3.gif"></A>
<A HREF="16y.htm"><IMG SRC="more.gif"></A>
Создание якоряРабота с якорными тегами документа содержит два важных этапа. Во - первых, определите, на какие разделы HTML - документа Вы хотите сослаться. Во - вторых, введите теги <A HREF= >, указывающие эти разделы.
Вы можете вводить именные якоря в любом месте ваших Web - страниц. Каждый тег позволяет непосредственно перейти в нужное место с помощью ссылки.
Именной якорь записывается следующим образом:
<A NAME="именной якорь"> Текст якоря </A>.
Например, сделаем именной якорь для данной страницы:
<A NAME="home">Создание якоря.</A>
то есть при ссылки мы будем возвращаться на начало данной страницы на ее заголовок. После того как Вы установили все необходимые якоря, настала пора составить оглавление, содержащее ссылки на каждый из якорей. Ссылка на якорь очень напоминает стандартную WWW - ссылку. Для этого используется тег <A HREF=>. Отличие только в том, что Вам надо сообщить броузеру, что это ссылка на якорь внутри документа. Это делается с помощью значка #.
В нашем примере это выглядит так:
<A HREF="#home">Вернуться на начало страницы</A>
Символ # указывает броузеру, что следует искать флажок, а не отдельный HTML - документ. Для посетителей текст такой ссылки будет выглядеть так же, как и текст любой другой ссылки. Однако при щелчке на таком тексте Вы перейдете не на другой файл или новый Web - узел, а на якорь в том же файле. Конечно, имя, указанное в теге <A HREF=>, должно соответствовать имени, указанном в теге <A NAME=> при установке якоря.
В нашем примере переход будет осуществляться по следующей ссылке:
Вернуться на начало страницы.
Полезные советы по созданию ссылок
Совет первый: Пусть ссылок будет не слишком много.
Нельзя представить ничего более запутанного, чем Web - страница, содержащая текст из 200 слов, из которых 180 являются ссылками на другие части WWW. Поскольку текст ссылки выводится подчеркнутым шрифтом, слишком большое число ссылок делает страницу абсолютно нечитаемой, и вряд ли это понравиться посетителям.
Посещение Web - страницы во многом напоминает разглядывание витрин магазинов. Если у магазина некрасивая, беспорядочная витрина, Вам вряд ли захочется туда зайти. Помните об этом при использовании ссылок.
Если же Вы все же хотите ввести множество ссылок, подумайте о создании простого (но хорошо организованного) списка в конце страницы. Совет второй: Текст ссылок должен быть понятным.
Постарайтесь сделать так, чтобы смысл ссылок был понятен. Ссылки лучше выделить жирным шрифтом. Ссылки не должны нарушать плавности повествования. Совет третий: Предупреждайте о ссылках на большие документы.
Когда Вы ссылаетесь на большие рисунки, файлы, звуковые файлы или видеоклипы, лучше честно предупредить об этом посетителей, поскольку загрузка больших файлов может занять много времени. Совет четвертый: Поддерживайте ссылки в действующем состоянии.
Когда Вы приобретете опыт в создании домашней страницы, на ней, скорее всего, будет целый ряд ссылок на различные части Web. Эти ссылки со временем устаревают. Web - страницу, на которую Вы ссылаетесь, могут удалить или перенести на другой узел. В среднем раз в несколько месяцев некоторые Ваши ссылки будут терять актуальность. Периодически проверяйте ссылки на своей web - cтранице, чтобы точно знать, что они актуальны. Иначе их лучше не использовать.
Лекция 6.
Таблицы.
Как построить простую таблицу
У списков есть один недостаток - они одномерны. Это означает, что Вы можете располагать информацию только на следующих друг за другом строках. Таблицы же позволяют располагать данные не только по строкам, но и по столбцам. У Вас появляется гибкость двухмерной структуры для вывода информации на Web - страницу.
Важно использовать таблицы так, чтобы они не занимали попусту место на Web - cтранице. Благодаря наличию строк и столбцов таблицы удобны для сравнения и противопоставления информации. Каждые строку и столбец можно озаглавить, чтобы информация выглядела подобно электронной таблице.
Хорошая таблица делает Web - страницу информативной, аккуратной и организованной, неудачная разбивает ее и запутывает то, что Вы хотели сообщить.
Задание таблицы может показаться сложным, поскольку для этого применяется целый ряд тегов. Теги <TABLE> и </TABLE> обрамляют таблицу целиком, а ряд других тегов определяют, каким образом будет выводиться информация.
TЕГИ ОПИСАНИЕ
<TABLE> и </TABLE> Эти теги охватывают таблицу
Тег <TABLE> cообщает броузерам, что далее следует описание таблицы. Если Вы хотите, чтобы была видна сетка, разделяющая строки и столбцы, добавьте ключевое слово BORDER (получится <TABLE BORDER>)
<CAPTION> и </CAPTION> Текст, отмеченный этими тегами, выводится в виде заголовка. Для задания заголовка можно также применять теги <TC> и </TC>
<TH> и </TH> Теги отображают текст заголовка строки или столбца немного более крупным полужирным шрифтом
<TR> и </TR> Теги определяют каждую строку таблицы. Тег </TR> необязателен, но он делает Ваш HTML - код более полным и понятным
<TD> и </TD> Эта пара тегов определяет текст каждой ячейки таблицы
При использовании этих тегов следует быть очень аккуратным, иначе создание таблицы, состоящей из нескольких строк может оказаться сложным делом.
Рассмотрим пример таблицы:
Лучшие бейсбольные подающие 1997 года
Имя Команда Победы/поражения Очки Ауты
Пит ШурекЦинцинната16-2 2,73 194
Гидео Немо Лос-Анджелес 19-8 2,94 399
Грег ЭнгриусАтланта 24-6 2,21 275
Текст вашей Web - страницы в Блокноте имеет следующий вид:
<HTML>
<TITLE>Таблица</TITLE>
...
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN="CENTER">
Лучшие бейсбольные подающие 1997 года
</CAPTION>
<TR>
<TH>Имя</TH>
<TH>Команда</TH>
<TH>Победы/поражения</TH>
<TH>Очки</TH>
<TH>Ауты</TH>
</TR>
<TR>
<TD>Пит Шурек</TD>
<TD>Цинцинната</TD>
<TD>16-2</TD>
<TD>2,73</TD>
<TD>194</TD>
</TR>
<TR>
<TD>Гидео Немо</TD>
<TD>Лос-Анджелес</TD>
<TD>19-8</TD>
<TD>2,94</TD>
<TD>399</TD>
</TR>
<TR>
<TD>Грег Энгриус</TD>
<TD>Атланта</TD>
<TD>24-6</TD>
<TD>2,21</TD>
<TD>275</TD>
</TR>
</TABLE>
</CENTER>
...
</HTML>
И так мы только, что создали с Вами простую табличку.
Чтобы все ячейки таблицы были разделены тонкими линиями, добавьте в тег <TABLE> ключевое слово BORDER=1. Без этого слова ячейки будут автоматически выровнены, но сетки не будет. То есть наша созданная табличка без ключевого слова будет выглядеть следующим образом:
Лучшие бейсбольные подающие 1997 года
Имя Команда Победы/поражения Очки Ауты
Пит ШурекЦинцинната16-2 2,73 194
Гидео Немо Лос-Анджелес 19-8 2,94 399
Грег ЭнгриусАтланта 24-6 2,21 275
Выравнивание текста
Для каждой ячейки таблицы Вы можете задать способ выравнивания текста как по вертикали, так и по горизонтали. Способы выравнивания задаются специальными атрибутами ALIGN и VALIGN. Вы можете задать также способ выравнивания для всей таблицы (в теге <TABLE>), для заданной строки (в теге <TR>) или для одной ячейки (столбец) (в теге <TD>)
Каждый из атрибутов ALIGN и VALIGN имеет три возможных значения.
Атрибуты выравнивания
Значение атрибута Описание
ALIGN=LEFT Выравнивает текст в ячейке по
левому краю(по умолчанию)
ALIGN=CENTER Выравнивает текст в ячейке поцентру
ALIGN=RIGHN Выравнивает текст в ячейке поправому краю
VALIGN=TOP Выводит текст от самого верха
ячейки (полезно, когда информациясостоит из нескольких строк)
VALIGN=MIDDLE Выравнивает текст в ячейке
вертикально по центру (по умолчанию)
VALIGN=BOTTOM Выравнивает текст в ячейке
по нижнему краю
Примеры записи выравнивания:
1. Для всей таблицы: <TABLE ALIGN="LEFT">
2. Для заданной строки: <TR ALIGN="TOP">
3. Для одной ячейки: <TD ALIGN="CENTER">
Расширенные возможности формирования таблиц
Теперь, когда Вы умеете создавать простую таблицу, попробуем ее слегка оживить. Современные броузеры предлагают несколько впечатляющих способов настройки таблиц.
При использовании каждого из этих методов подразумевается, что Вы аккуратно сосчитали количество строк и столбцов. В каждом из разделов Вы увидите измененную версию простой бейсбольной таблицы.
 
Объединение нескольких строк в одну ячейку
Если Вы будете часто применять таблицы, то непременно столкнетесь с ситуацией, когда какая - либо ячейка должна занимать несколько строк таблицы. Здесь Вам пригодится атрибут ROWSPAN, который добавляется в тег <TD> заданной ячейки. Теперь при отображении таблицы ячейка с атрибутом ROWSPAN займет две строки. Так можно изменить бейсбольную таблицу:
...
<TR>
<TD>Пит Шурек</TD>
<TD ROWSPAN=2>Цинциннати</TD>
<TD>16-2</TD>
<TD>2,73</TD>
<TD>194</TD>
</TR>
<TR>
<TD>Хосе Рио</TD>
<TD>28-2</TD>
<TD>199</TD>
</TR>
...
Таблица с изменениями выглядит следующим образом:
Лучшие бейсбольные подающие 1997 года
Имя Команда Победы/поражения Очки Ауты
Пит ШурекЦинцинната16-2 2,73 194
Хосе Рио28-2 1,92 199
Гидео Немо Лос-Анджелес 19-8 2,94 399
Грег ЭнгриусАтланта 24-6 2,21 275
Объединение нескольких столбцов в одну ячейку
Подобно тому, как ROWSPAN распространяет ячейку на несколько строк, COLSPAN "раздвигает" ее на несколько столбцов. С помощью атрибута COLSPAN Вы можете распространить ячейку на любое количество столбцов.
Рассмотрим следующий пример:
...
<TR>
<TH COLSPAN=2>Личная информация</TH>
<TH COLSPAN=3>Статистика</TH>
</TR>
<TR>
<TH>Имя</TH>
<TH>Команда</TH>
<TH>Победы/поражения</TH>
<TH>Очки</TH>
<TH>Ауты</TH>
</TR>
...
Таблица с изменениями выглядит следующим образом:
Лучшие бейсбольные подающие 1997 года
Личная информация Статистика
Имя Команда Победы/поражения Очки Ауты
Пит ШурекЦинцинната16-2 2,73 194
Гидео Немо Лос-Анджелес 19-8 2,94 399
Грег ЭнгриусАтланта 24-6 2,21 275
Цвета в таблице
До недавнего времени не было возможности управлять цветами таблицы на Web - странице. Сетка таблицы была черной, фон совпадал по цвету с фоном остальной страницы. Было очень трудно выделить какую - то ячейку другим цветом или использовать разные цвета.
Теперь существует ряд новых тегов, позволяющих задавать цвета фона и сетки таблицы. В первом случае атрибут BGCOLOR вставляется в тег <TABLE> следующим образом:
<TABLE BORDER BGCOLOR="YELLOW">
...
</TABLE>
Теперь цвет фона всей таблицы будет желтый.
Кроме атрибута BGCOLOR, существуют и другие способы управлять цветом:
BORDERCOLOR - изменяет цвет сетки таблицы;
BORDERCOLORDARK/BORDERCOLORLIGHT - используется для изменения цвета сетки с дополнительным эффектом трехмерности. Если установлены эти атрибуты, Ваша таблица выглядит трехмерной. Поэкспериментируйте с этой установкой, задав широкое обрамление (BORDER=6).
Рассмотрим простой пример использования всех новых ключевых слов сразу:
<TABLE BORDER BGCOLOR="YELLOW"
BORDERCOLOR="RED" BORDERCOLORDARK="BLUE"
BORDERCOLORLIGHT="GREY">
...
</TABLE>
Как видите, эти атрибуты предоставляют много возможностей изменять внешний вид таблицы. Но это еще не все! Вы можете задавать эти атрибуты для каждой строки или ячейки. В приведенном ниже HTML-коде цвет каждой ячейки задается отдельно:
...
<TABLE BORDER=2>
<TR>
<TD BGCOLOR="YELLOW">НЕ КАЖЕТСЯ ЛИ ВАМ,</TD>
<TD BGCOLOR="BLACK"><FONT COLOR="YELLOW">
ЧТО ЭТА ТАБЛИЦА</FONT></TD>
</TR>
<TR>
<TD BGCOLOR="BLACK"><FONT COLOR="YELLOW">
НАПОМИНАЕТ</FONT></TD>
<TD BGCOLOR="YELLOW">ШМЕЛЯ!!!</TD>
</TR>
</TABLE>
...
На экране это выглядит следующим образом:
НЕ КАЖЕТСЯ ЛИ ВАМ, ЧТО ЭТА ТАБЛИЦА
НАПОМИНАЕТ ШМЕЛЯ!!!
Кроме этого можно указать ширину таблицы точно, в пикселях, или в процентном отношении к ширине страницы в окне браузера.
Например:
WIDTH="300"
WIDTH="50%"
В HTML - коде:
...
<TABLE BORDER=2 WIDTH="300">
<TR>
<TD BGCOLOR="YELLOW">НЕ КАЖЕТСЯ ЛИ ВАМ,</TD>
<TD BGCOLOR="BLACK"><FONT COLOR="YELLOW">
ЧТО ЭТА ТАБЛИЦА</FONT></TD>
</TR>
<TR>
<TD BGCOLOR="BLACK"><FONT COLOR="YELLOW">
НАПОМИНАЕТ</FONT></TD>
<TD BGCOLOR="YELLOW">ШМЕЛЯ!!!</TD>
</TR>
</TABLE>
...
На экране это выглядит следующим образом:
НЕ КАЖЕТСЯ ЛИ ВАМ, ЧТО ЭТА ТАБЛИЦА
НАПОМИНАЕТ ШМЕЛЯ!!!
Лекция 7.
Фреймы.
Умелое использование фреймов может придать вашему сайту красивый вид, при помощи фреймов вы можете облегчить посетителю навигацию по вашему сайту.
Разделение страницы на фреймы дело несложное. Сначала мы создаем фрейм-документ, который будет не виден посетителю. Этот фрейм-документ содержит специальные теги <FRAME> и <FRAMESET>, которые указывают броузеру на сколько фреймов делить нашу страницу и как. В каждый фрейм мы можем загрузить отдельный HTML-документ. Т.е. при помощи фреймов мы можем отобразить на одной странице одновременно сразу несколько HTML-документов (файлов).
Для начала нам понадобится создать несколько HTML-документов. Откройте блокнот и скопируйте туда этот код: <Html><Head><Title>Моя страница с Фреймами</Title></Head><Body></Body></Html> В каждом документе напишем женское имя. <Html><Head><Title>Моя страница с Фреймами</Title></Head><Body>Lisa</Body></Html> Создайте у себя на компьютере новую папку, в которой будете сохранять странички с примерами. И сохраните файл, с приведенным выше кодом, как lisa.html (Save as - lisa.html). Теперь создадим второй HTML-документ: <Html><Head><Title>Моя страница с Фреймами</Title></Head><Body>Terri</Body></Html> Сохраните его как terri.html Теперь создадим по тому же принципу еще несколько документов для Kim, Tina, Shannon, и Beth. Сохраним их. В нашей папке теперь содержится 6 отдельных HTML документов. Что ж, приступим к самому интересному- созданию фрейм-документа. <Html><Head><Title>Моя страница с Фреймами - Фрейм-документ</Title></Head><Body></Body></Html> Удалим тег <BODY>. Фрейм-документ не нуждается в нем... <Html><Head><Title>Моя страница с Фреймами - Фрейм-документ</Title></Head></Html> ...во фрейм-документе вместо <BODY> используется тег <FRAMESET> <Html><Head><Title>Моя страница с Фреймами - Фрейм-документ</Title></Head><Frameset></Frameset></Html> Для облегчения своей задачи с этого момента перестанем прописывать в примерах теги <HTML>, <HEAD>, <TITLE>. Но стоит ли говорить, что вы тем не менее, должны сохранять их в вашем документе? Не забывайте об этом. <Frameset></Frameset>Сохраните документ в свою папку как index.html. Если вы сейчас откроете его в броузере, то вы увидите просто пустую страницу. Не расстраивайтесь, скоро результаты труда будут очевиднее. Для этого мы для начала пропишем во фрейм-документе команду, чтобы наш броузер разделил страницу на две колонки, по 50 % каждая от размера окна. <Frameset cols="50%,50%"></Frameset>Результатов все еще не видно, при просмотре в броузере, потому что мы не указали что же должно отображаться в каждом фрейме (какие документы). Что ж, за этим дело не станет, укажем: <Frameset cols="50%,50%">     <Frame src="lisa.html">     <Frame src="terri.html"></Frameset>Посмотрим, что получилось. Вы можете вполне гордится вашим первым функциональным фрейм-документом. Перед тем, как мы продолжим, заметьте, что тег <FRAMESET> - контейнер (т.е. тег который может содержать в себе другие теги и информацию), а тег <FRAME> - нет. Это значит, что для тега <FRAMESET> не следует забывать прописывать всегда закрывающий тег </FRAMESET>, а для тега <FRAME> этого делать не нужно.
Фреймы, содержащие наши документы могут быть разными по размеру. Только не забывайте, если вы делите попроцентно страницу на фреймы, в сумме все должно равняться 100%, а иначе никто не гарантирует, что броузер правильно отобразит вашу страницу. <Frameset cols="10%,20%,30%,15%,25%">     <Frame src="lisa.html">     <Frame src="terri.html">     <Frame src="kim.html">     <Frame src="tina.html">     <Frame src="shannon.html"></Frameset>
Можно прописать 50 пикселов вместо 50%, а также мы можем использовать значок * вместо числа. Значок * обозначает, что документ во фрейме займет все оставшееся пространство. <Frameset cols="50,*">     <Frame src="lisa.html">     <Frame src="terri.html"></Frameset>
Страница, разделенная на слишком много фреймов может потерять свою привлекательность. Поэтому лучше всего не делить страницу больше, чем на три фрейма. Но если у вас будет их больше, то это не преступление.
Мы можем разместить во фрейме картинку, если хотим. Например, возьмем картинку world.gif. <Frameset cols="50%,50%">     <Frame src="world.gif" width="146" height="162">     <Frame src="terri.html"></Frameset>
Никогда не забывайте прописывать для картинки параметры высоты и ширины (width и height).
Для избавления от полос прокрутки:
          <Frame src="world.gif" width="146" height="162" scrolling="no">
Лекция 8.
Карты-ссылок.
Изображение-карта
Теперь давайте рассмотрим более сложный пример. Представим себе, что надо сделать сайт, посвященный описанию старинного компьютера ATARI-800. Уже подготовлены файлы с описанием его монитора, самого компьютера и дисковода: monitor.html, computer.html и diskovod.html (мы для проверки работоспособности примера тоже создали такие файлы, но в них ничего нет, кроме заголовка). Наша задача: создать титульную страницу сайта и поместить на нее изображение компьютера (рис. 3.4).
При этом логично было бы сделать так, чтобы щелчок на изображении монитора переводил читателя на страничку с описанием монитора, щел чок на изображении дисковода — на страничку с описанием дисковода и щелчок на изображении самого компьютера — на страничку с его описанием. Можно, конечно, “разрезать” изображение на три и с каждого дать гиперссылку на соответствующий файл. Но при этом разрушится целостность композиции на фотографии компьютера. Что же делать?
Оказывается, есть возможность установить несколько гиперссылок с одного рисунка, не “разрезая” его! Такое изображение называется кар той графических ссылок (imagemap}. Создание карты графических ссылок — операция довольно кропотливая, но результат обычно довольно эффектен. Делается это так.
Вот, например, наш файл diskovod.html:
<HTML>
<НЕАD>
<ТIТLЕ>ДИСКОВОД</ТIТLЕ>
</НЕАD>
<ВODY>ОПИСАНИЕ ДИСКОВОДА</BODY>
</HTML>

Рис. 3.4. Изображение компьютера, из которого мы будем делать
графическую карту ссылок
1. Сначала рисунок внедряется на веб-страницу обычным образом, с помощью тега <IMG>:
<IMG SRC="Images/computer.gif" WIDTH="451" HEIGHT="310" BORDER="0" ALT="ATARI-800">
2. Затем необходимо установить в этом теге атрибут USEMAP=. Его значение должно содержать имя карты графических ссылок, с предвари тельным знаком #, Если карта еще не создана, как в нашем случае, то ей можно дать любое имя:
<IMG SRC="Images/computer.gif" WIDTH="451" HEIGHT="310" BORDER="0" ALT="ATARI-800" USEMAP="#compmap">
3. Теперь нужно создать собственно карту ссылок. Вообще говоря, эта карта может располагаться где угодно, хоть в другом файле — тогда в атрибуте USEMAP= нужно будет указать, кроме имени карты, имя этого файла, например: “mapfile.html#mymap”). В нашем случае давайте рас положим ее в конце того же файла.
4. Карта графических ссылок начинается с тега < МАР> и завершается зак рывающим тегом </МАР> . В теге <МАР> следует установить (обязательно!) единственный возможный атрибут NAME=. Его значением должно быть имя карты, на которое мы ссылались в теге <МАР> (с помощью атрибута USEMAP=). В данном случае это должно быть имя "compmap":
<МАР NAME="compmap">
5. Между тегами <МАР> и </МАР> должна находиться основная часть карты. Она состоит из нескольких тегов <AREA> , каждый из которых определяет активную область рисунка. (При щелчке мыши на “актив ных областях” может происходить перемещение по гиперссылке, а остальная часть изображения ничем не отличается от обычного рисунка.) В данном случае нам нужно определить три такие “активные области”: изображение монитора, компьютера и дисковода.
6. “Активные области” могут быть либо прямоугольной формы, либо круглой, либо многоугольной. Это определяется установкой значения атрибута SHAPE= в теге <AREA> (он употребляется без закрывающего тега). Если значение этого атрибута — "rect", область будет прямоугольной, если "circle" — круглой, а если "poly" — многоугольной.
7. Дальше начинается самое неприятное в составлении карты графических ссылок: нужно определить координаты каждой из активных областей и записать их как значения атрибута COORDS=.
Если “активная область” прямоугольная, то следует указать координаты левого верхнего ее угла и правого нижнего. Местоположение любой точки на рисунке может быть определено с помощью двух чисел — ее горизонтальной и вертикальной координат. Самая левая верхняя точка на рисунке имеет координаты “0,0”. Чем больше горизонтальная координата, тем правее расположена точка, и, соответственно, чем больше вертикальная координата, тем точка ниже. Например, если рисунок имеет размер 400х300 точек и нам нужно определить прямо угольнуюактивную область, занимающую его левый верхний угол и имеющую половину ширины и высоты рисунка, мы должны будем написать следующее:
<AREA SHAPE="rect" COORDS="0,0,200,150">
В этой записи атрибут COORDS= определяет прямоугольник с помощью двух точек: одна из них имеет координаты “0,0”, то есть левый верх ний угол, а другая — “ 200,150”, то есть это центральная точка рисунка размером 400х300.
Если “активная область” круглая, то задача немного упрощается: нужно определить координаты только одной точки — центра окружности, а также указать ее радиус, например:
<AREA SHAPE="circle" COORDS="200,150, 40">
Такая запись определяет круглую “активную область”, расположенную в центре нашего гипотетического рисунка размером 400х300 (координаты центральной точки— “200,150”). Окружность имеет радиус 40 точек.
И, наконец, самый сложный и наиболее часто встречающийся случай — многоугольная “активная область”. Здесь нужно последовательно
указать координаты всех углов многоугольника. Поскольку таких углов может быть очень много, то и значение атрибута COORDS= при обретает угрожающие размеры... Рассмотрим простой пример. Если на нашем рисунке размером 400х300 мы хотим определить область в форме равнобедренного треугольника, основание которого проходит ровно посередине рисунка, занимая всю его ширину, а вершина нахо дится посередине верхней границы рисунка, то это можно сделать так:
<AREA SHAPE="poly" COORDS="0,150,400,150,200,0">
Как видите, шесть координат определяют три точки — три угла нашего треугольника. В данном случае их последовательность не очень важна (можно было написать, например, "400,150,0,150,200,0"), но когда коли чество углов больше, становится важным порядок соединения точек. Например, записи
<AREA SHAPE="poly" COORDS="0,0,200,0,200,150,100,75,0,150">
И
<AREA SHAPE="poly" COORDS="0,0,200,0,100,75,200,150,0,150">
дадут разные результаты. В первом с случае это прямоугольник с вырезанным треугольником снизу, а во втором случае вырезанный треугольник находится справа.
Отпугивающим моментом в этой технологии является то, что приходится каким-то образом выяснять координаты каждой нужной точки. На реальном рисунке это невозможно сделать “на глаз”, и приходится, к примеру, выяснять все координаты в каком-либо графическом редакторе, а уже потом переносить их в HTML-документ. К счастью, в послед них версиях некоторых HTML-редакторов (например, Allaire Homesite) имеются встроенные средства для установки координат на картах графических ссылок.
8. Однако атрибуты SHAPE= и COORDS= — это еще не все. В теге <AREA> необходимо установить еще самое главное — атрибут HREF=, определяющий гиперссылку, то есть куда же должен попасть пользователь при щелчке мышью на этой “активной области”. Здесь никаких сложностей нет — атрибут HREF= тега <AREA> ведет себя так же, как если бы он был в обычном теге <А> .
9. Кроме того, бывает полезно определить также атрибут ALT=. Его значе ние может содержать поясняющий текст, который будет “всплывать” при наведении мыши на “активную область”.
Итак, теперь мы можем попытаться обвести “активные области” нашего изображения компьютера (см. рис. 3.4). Естественно, что все они должны быть многоугольными, так как ни один из трех объектов не “укладывается” в прямоугольник или круг. Посмотрим, что получится в результате.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
<HTML>
<HEAD>
<TITLE>Описание компьютера</TITLE>
</HEAD>
<BODY BGCOLOR="#FFA940" TEXT="#1A1A1A" LINK="#OOOOAO" VLINK="#OOOOAO" ALINK="#OOOOAO">
<DIV ALIGN-"center"><H1>ATARI-800</Hl></DIV>
<DIV ALIGN="center"><BIG>3necь представлено описание старинного компьютера ATARI-800. Вот как он выглядел :</BIGX/DIV>
<DIV ALIGN="center"><IMG SRC="Images/computer.gif" WIDTH="451" HEIGHT="310" BORDER="0" ALT="ATARI-800" USEMAP="#compmap"></DIV>
<DIV ALIGN="center">Для получения подробной информации о каждом узле щелкните на его изображении.</DIV>
</BODY> <МАР NAME="compmap">
<AREA ALT="МОHИTOР" SHAPE="poly"
COORDS="95,41,289,40,289,180,212,180,211,167,86,168,86,54" HREF="monitor.html">
<AREA ALT="Koмпьютep ATARI-800" SHAPE="poly" COORDS="7,253,57,255,62,265,156,265,158,259,205,259,213,247,210,178, 208,169,30,168,6,245" HREF="computer.html">
<AREA ALT="Диcкoвoд" SHAPE="poly" COORDS="293,197,345,154,438,168,441,196,437,224,400,265,294, 252,292,226" HREF="diskovod.html">
</МАР>
Результат этих трудов представлен на рис. 3.5. Как видите, на первый взгляд рисунок на страничке вполне обычный — наличие “активных областей” ничем не выдается. Поэтому необходима поясняющая подпись под рисунком.
Если поводить мышью над рисунком, то можно заметить, что над “актив ными областями” указатель мыши меняет свой вид, а если приостановить мышь над “активной областью” — появится соответствующая всплыва ющая надпись. И еще интересный момент: в большинстве броузеров можно воочию увидеть границы активных областей. Для этого надо нажать кнопку мыши на “активной области”, и, не отпуская ее, увести мышь за пределы области, и там отпустить кнопку. Тогда граница соответствующей “ актив ной области” останется выделенной.

Рис. 3.5. Страничка с графической картой ссылок

Контрольные вопросы по теме
«Гипертекстовые технологии. Язык HTML»
Что такое Web-страница и какие существуют способы её создания?
Дайте определение следующим терминам языка HTML: тег, гиперссылка, фрейм, скрипт?
Какова общая структура документа HTML?
Какие теги форматирования текстового потока и абзацев вы знаете?
Опишите теги списков.
Как задать цвет текста, цвет фона, цвет гиперссылки?
Как вставить в документ HTML графическое изображение?
Как вставить в документ HTML фоновый рисунок?
Как создать гипертекстовую ссылку в виде текста или картинки в документе HTML?
Что такое фреймы и как их создать?
Как создать таблицы в документе HTML?
Как объединить столбцы и строки в таблице HTML документа?
Использование цветов в таблицах.
Каким образом можно регулировать расстояние вокруг изображения в документе HTML?
Что такое меню во фрейме и как правильно его оформить?
Что такое карта-ссылок?
Какие типы активных областей вы знаете?
С помощью каких атрибутов описываются активные области?

Вопросы с вариантами ответов для тестирования по теме «Гипертекстовые технологии. Язык HTML»
1. Что такое HTML-программа?  
Документ, который показывает браузер.
Интернетовская web-страница.
Текст на языке HTML.
Список тегов.
2. Кто выполняет HTML-программу?
Человек.
Компилятор.
Браузер.
Windows.
3. Записывая на HTML абзац, Вы между двумя словами поставили пять пробелов. Сколько пробелов Вы увидите в браузере?
Пять.
Один.
Ни одного.
Два.
 4. Текст на HTML выглядит следующим образом:
<P>
Пришла
осень.
</P>
Как покажет этот текст браузер?
В две строки.
В одну строку с двумя пробелами.
В одну строку с одним пробелом.
Не покажет вовсе.
5. Какие из трех программ задают вывод текста в две строки?
а) Программа 1
<P>
Пришла <BR>
осень.<BR>
</P>
  б) Прграмма 2
<P>
Пришла <BR>
осень.
</P>
в) Программа 3
<P>
Пришла <BR>осень.
</P>  1
2
3
6. Какой дескриптор определяет начало HTML - документа 
<HTMN>
<TITLE>
<HTML>
<H1>
7. Какой дескриптор определяет название Web - страницы
<HTMN>...</HTMN>
<TITLE>...</TITLE>
<HTML>...</HTML>
<H1>...</H1> 
8. Сколько уровней заголовков существует 
3
6
7
9. По умолчанию текст отображается на экране шрифтом уровня ...
<H1>
<H2>
<H3>
<H6>
10. Какой из перечисленных дескрипторов обозначает начало абзаца
<BR>
<P>
<H1>
11. Какой из перечисленных дескрипторов вводит новую строку
<BR>
<P>
<H1>
12. После каких дескрипторов (из перечисленных ниже) не обязательно использовать закрывающий дескриптор
<TITLE>
<BR>
<B>
<P>
13. Какие из перечисленных дескрипторов задают жирный шрифт
<B>...</B>
<I>... </I>
<U>... </U>
14. Какие из перечисленных дескрипторов задают курсив
<B>...</B>
<I>... </I>
<U>... </U>
15. Какие из перечисленных дескрипторов задают подчеркивание текста
<B>...</B>
<I>... </I>
<U>... </U>
16. Как отобразится текст на экране
<P ALIGN=''JUSTIFY''>На моей страничке Вы можете найти
по центру
по левому краю экрана
по правому краю экрана
по ширине
17. Что обозначает дескриптор <PRE>... </PRE>
вставляет пустую строку
задает самостоятельное форматирование текста
располагает равномерно текст 
18. Какой командой задается размер шрифта
<FONT=3>...</FONT>
<FONT SIZE=3>...</FONT>
<FONT  SIZE=3>...<FONT>
19. Что выполняет данная команда
<FONT FACE="ARIAL">...</FONT>
задает цвет шрифта
задает тип шрифта
задает фон
20. Какая из ниже перечисленных команд увеличивает размер шрифта текста
<BIG>...</BIG>
<SUP>...</SUP>
<SUB>...</SUB>
<SMALL>...</SMALL>
<S>...</S>
21. Какой размер шрифта у данного текста?
<FONT SIZE=+4> Пришла осень.</FONT>
Размер шрифта равен 4.
Размер шрифта равен 8.
Размер шрифта равен 5.
Размер шрифта равен 7.
22. Какая команда уменьшает размер  шрифта текста
<BIG>...</BIG>
<SUP>...</SUP>
<SUB>...</SUB>
<SMALL>...</SMALL>
<S>...</S>
23. Какая  из ниже перечисленных команд выводит текст в виде верхнего индекса
<BIG>...</BIG>
<SUP>...</SUP>
<SUB>...</SUB>
<SMALL>...</SMALL>
<S>...</S>
24. Какая из ниже перечисленных команд выводит текст в виде  нижнего индекса
<BIG>...</BIG>
<SUP>...</SUP>
<SUB>...</SUB>
<SMALL>...</SMALL>
<S>...</S>
25. Какая из ниже перечисленных команд выводит зачеркнутый текст
<BIG>...</BIG>
<SUP>...</SUP>
<SUB>...</SUB>
<SMALL>...</SMALL>
<S>...</S>
26. Какие из перечисленных тегов задают размер шрифта?
<P ALIGN=5>...</P>
<OL TYPE START=5>...</OL>
<H5>...</H5>
<FONT SIZE=5>...</FONT>
27. Какая из ниже перечисленных команд задает цвет текста
<BODY BGCOLOR="RED" TEXT="#FFFFFF">...</BODY>
<FONT TEXT="#FFFFFF">...</FONT>
<FONT COLOR="#FFFFFF">...</FONT>
<BODY BGCOLOR="#FF5678">...</BODY> 
28. Какая из ниже перечисленных команд задает цвет фона
<BODY BGCOLOR="RED" TEXT="#FFFFFF">...</BODY>
<FONT TEXT="#FFFFFF">...</FONT>
<FONT COLOR="#FFFFFF">...</FONT>
<BODY BGCOLOR="#FF5678">...</BODY> 
29. Какая программа, из ниже перечисленных, формирует список?
Все, что может испортиться - портится.
Все, что не может испортиться - портится тоже.
1. Программа 1
 <UL TYPE=DISC> 
<LI>...
<LI>...
</UL> 2. Программа 2
<UL TYPE=CIRCLE>
<LI>...
<LI>...
</UL> 
3. Программа 3
<UL TYPE=SQUARE>
<LI>...
<LI>...
</UL> 30. Какая программа, из ниже перечисленных, формирует список?
Все перемешать.
Подать к столу.
1. Программа 1
<UL TYPE=I START=5> 
<LI>...
<LI>...
</UL>  2. Программа 2
  <OL TYPE=I START=5>
<LI>...
<LI>...
</OL>
3. Программа 3
<OL TYPE=V> 
<LI>...
<LI>... 
</OL>     4. Программа 4
<OL TYPE=I START=V>
<LI>...
<LI>...
</OL>   
31.  Какая программа, из ниже перечисленных, формирует список?
1. Закон избирательного тяготения. Предмет упадет таким образом, чтобы нанести наибольший ущерб.
Следствие Дженнинга. Вероятность того, что бутерброд упадет маслом вниз прямо пропорциональна стоимости ковра.
Следствие Клипштейна. Уронят самую хрупкую деталь.
2. Любой предмет, если его уронят, закатывается в самый недоступный угол.
Следствие. Закатываясь в угол, он ударит Вас по пальцам ноги.
1. Программа 1
<UL TYPE=1 START=1>
<LI>
   <OL TYPE=DISC>
        <LI>...
        <LI>...
   <OL>
<LI>...
   <OL TYPE=DISC>
        <LI>...
    </OL>
</UL> 2. Программа 2
<OL TYPE=1 START=1>
<LI>...
      <UL TYPE=DISC>
           <LI>...
      </UL>
<LI>...
      <UL TYPE=DISC>
           <LI>...
           <LI>...
      </UL>
</OL>
3. Программа 3
<OL TYPE=1 START=1>
<LI>...
    <UL TYPE=DISC>
         <LI>...
         <LI>...
    </UL>
<LI>...
    <UL TYPE=DISC>
        <LI>...
    </UL>
</OL> 4. Программа 4
<OL TYPE=1 START=1>
<LI>...
      <UL TYPE=DISC>
           <LI>...
      </UL>
<LI>...
      <UL TYPE=DISC>
           <LI>...
      </UL>
</OL>
 
32. Какие из перечисленных ниже тегов отображают заголовок таблицы
<TABLE>...</TABLE>
<CAPTION>...</CAPTION>
<TR>...</TR>
<TH>...</TH>
<TD>...</TD>
33. Какие из перечисленных ниже тегов определяют строку таблицы
<TABLE>...</TABLE>
<CAPTION>...</CAPTION>
<TR>...</TR>
<TH>...</TH>
<TD>...</TD>
34. Какие из перечисленных ниже тегов определяют текст каждой ячейки таблицы
<TABLE>...</TABLE>
<CAPTION>...</CAPTION>
<TR>...</TR>
<TH>...</TH>
<TD>...</TD>
35. Что задает ключевое слово BORDER в теге <TABLE>
Количество строк в таблице
Количество столбцов в таблице
Размер толщины линии таблицы
133350048387036. Для объединения нескольких строк в таблице (см. рис. 1)необходимо ключевое слово
рис.1
ROWSPAN
COLSPAN
37. Для объединения нескольких строк в таблице (см. рис. 2)необходимо ключевое слово

рис. 2
ROWSPAN
COLSPAN
38. Какая из ниже перечисленных команд выравнивает текст для всей таблицы
<TR ALIGN="TOP">
<TABLE ALIGN="LEFT">
<TD ALIGN="CENTER">
39. Какая из ниже перечисленных команд выравнивает текст для строки
<TR ALIGN="TOP">
<TABLE ALIGN="LEFT">
<TD ALIGN="CENTER">
40. Какая из ниже перечисленных команд выравнивает текст для ячейки
<TR ALIGN="TOP">
<TABLE ALIGN="LEFT">
<TD ALIGN="CENTER">
41. Какая из ниже перечисленных команд задает линию
<BR>
<HR>
<SR>
<HR NOCHADE>
42. Какая из ниже перечисленных команд задает цвет фона
<BODY BGCOLOR="RED" TEXT="#FFFFFF">...</BODY>
<FONT TEXT="#FFFFFF">...</FONT>
<FONT COLOR="#FFFFFF">...</FONT>
<BODY BGCOLOR="#FF5678">...</BODY> 
43. Какой из ниже перечисленных команд можно разместить графику на странице
<IMG SRC="dog.jpg">...</IMG>
<IMG SRC="dog.gif">...</IMG>
<IMG  SRC="dog.gif">
<IMG SRC="dog.psd">
<IMG  CRS="dog.gif">
44. Какой из ниже перечисленных команд можно задать альтернативный текст к графике
<IMG SRC="dog.gif" ALT="Выставка собак">...</IMG>
<IMG SRC="dog.gif" ALT="Выставка собак">
<IMG CRS="dog.gif" ALIGN="Выставка собак">...</IMG>
<IMG SRC="dog.gif" ALIGN="Выставка собак">
45. Какая из ниже перечисленных команд располагает текст по середине изображения
<IMG  SRC="dog.gif" ALIGN="TOP">Собака
<IMG  SRC="dog.gif" ALIGN="MIDDLE">Собака
<IMG  SRC="dog.gif" ALIGN="BOTTOM">Собака
<IMG  CRS="dog.gif" ALIGN="MIDDLE">Собака</IMG>
<IMG  SRC="dog.gif" ALIGN="BOTTOM">Собака</IMG>
<IMG  SRC="dog.gif" ALT="TOP">Собака
<IMG  CRS="dog.gif" ALT="MIDDLE">Собака</IMG>
46. Какая из ниже перечисленных команд  задает размер изображения
<IMG SRC="dog.jpg" ALT="Собака"  WIDTH=50 HEIGHT=50>...</IMG>
<IMG SRC="dog.jpg" ALIGN="Собака"  WIDT=50 HEIGHT=50>...</IMG>
<IMG CRS="dog.jpg" ALT="Собака"  WIDTH=50 HEIGHT=50>
<IMG SRC="dog.jpg" ALT="Собака"  WIDTH=50 HEIGHT=50>
<IMG CRS="dog.jpg" ALT="Собака"  WIDTH=50 HEIGHT=50>
47. Какая из ниже перечисленных команд задает в качестве фона графическое изображение <BODY BGCOLOR="dog.gif">
<BODY BACKGROUND="dog.gif">
<IMG BACKGROUND="dog.gif">...</IMG>
<IMG BGCOLOR="dog.gif">...</IMG>
<IMG BACKGROUND="dog.gif">
48. Что выполняет данная команда
<IMG  SRC="dog.jpg" ALIGN="TOP">Собака
выравнивает изображение по левому краю страницы, строки текста выводятся справа от изображения
выравнивает нижнюю границу строки посередине изображения
выравнивает изображение по самому высокому элементу в строке
выравнивает нижнюю границу строки по нижней границе изображения
49. Какая из ниже перечисленных команд устанавливает отступы от левой и правой сторон изображения<IMG SRC="dog.gif" VSPACE="8">...</IMG>
<IMG SRC="dog.gif" HSPACE=="8">...</IMG>
<IMG SRC="dog.gif" HSPACE=="40">
<IMG SRC="dog.gif" VSPACE="8">
<IMG SRC="dog.gif" HSPACE=="10">
50. Какая из ниже перечисленных команд размещает пиктограмму на странице
<IMG SRC="new.gif">...</IMG>
<IMG PIC="new.jpg">
<IMG SRC="new.gif">
<IMG PIC="new.jpg">...</IMG>
<IMG CRS="new.gif">
51. Какая из ниже перечисленных команд устанавливает отступы от верхней и нижней сторон изображения<IMG СRS="dog.gif" VSPACE="8">...</IMG>
<IMG SRC="dog.gif" HSPACE=="8">...</IMG>
<IMG SRC="dog.gif" HSPACE=="40">
<IMG SRC="dog.gif" VSPACE="8">
<IMG SRC="dog.gif" HSPACE=="10">
52. Какая из ниже перечисленных команд позволяет включить в web-страницу звук
<a href="muz.ava">...</a>
<a href="muz.avi">...</a>
<a href="muz.wav">...</a>
<a href="muz.vaw">...</a>
<a href="muz.awi">...</a>
53. Какая из ниже перечисленных команд позволяет включить в web-страницу видео
<a href="muz.ava">...</a>
<a href="muz.avi">...</a>
<a href="muz.wav">...</a>
<a href="muz.vaw">...</a>
<a href="muz.awi">...</a>
54. Какая из ниже перечисленных команд верно записана
<a href="Отправьте сообщение по почте">"mailto:[email protected]"</a>
<a href="mailto:"[email protected]@newmail.ru">Отправьте сообщение по почте</a>
<a href="mailto:[email protected]"> Отправьте сообщение по почте</a>
<a href="[email protected]"> Отправьте сообщение по почте</a>
55. Какая из ниже перечисленных команд создает гиперссылку на местную страницу содержащую прогноз погоды
<a href="http://www.pogoda.htm">Прогноз погоды</a>
<a href="pogoda.htm">Прогноз погоды</a>
<a href="http://www.pogoda.ru/pogoda/">Прогноз погоды</a>
<a href="#pogoda.htm">Прогноз погоды</a>
<a href="http://www.pogoda/">Прогноз погоды</a>
56. Какая из ниже перечисленных команд создает гиперссылку на страницу в WWW содержащую прогноз погоды 
<a href="http://www.pogoda.htm">Прогноз погоды</a>
<a href="pogoda.htm">Прогноз погоды</a>
<a href="http://www.pogoda.ru/pogoda/">Прогноз погоды</a>
<a href="#pogoda.htm">Прогноз погоды</a>
<a href="http://www.pogoda/">Прогноз погоды</a>
57. Какая из ниже перечисленных команд создает гиперссылку на страницу по якорю содержащую прогноз погоды <a href="http://www.pogoda.htm">Прогноз погоды</a>
<a href="pogoda.htm">Прогноз погоды</a>
<a href="http://www.pogoda.ru/pogoda/">Прогноз погоды</a>
<a href="#pogoda.htm">Прогноз погоды</a>
<a href="http://www.pogoda/">Прогноз погоды</a>
58. Какое из ниже перечисленных ключевых слов задает цвет текста ссылки в момент щелчка по ней мышью LINK
VLINK
ALINK
59. Какое из ниже перечисленных ключевых слов задает цвет текста ссылки по которой еще не было перемещения
LINK
VLINK
ALINK
60. Какое из ниже перечисленных ключевых слов задает цвет текста ссылки на которой уже побывал посетитель
LINK
VLINK
ALINK
61. Какая команда из ниже перечисленных задает изменение цвета текста ссылки
<TEXT="#ff0055" LINK="red" VLINK="green" ALINK="gold">
<BODY TEXT="#ff0055" LINK="red" VLINK="green" ALINK="gold">
<LINK="red" VLINK="green" ALINK="gold">
62. Какой цвет текста ссылки по умолчанию
фиолетовый 
синий
голубойчерный
сиреневый
63. Какая команда из ниже перечисленных задает в качестве гиперссылки изображение
<a href="index.htm"><img crs="kat.jpg"></a>
<a href="index.htm"><img src="kat.jpg"></img></a>
<a href="index.htm"><img src="kat.jpg"></a>
<a href="index.htm"><img csr="kat.jpg"></a>
<a href="index.htm" img src="kat.jpg"></a>
Список литературы:
Николай ПрохоренокHTML, JavaScript, PHP и MySQL Джентльменский набор Web-мастера, СПб. БХВ – Санкт Петербург, 2008 (Профессиональное программирование)
М. Браун, Д. Хоникатт.
Использование HTML. Специальное издание. Пер. с англ. – М.; СПб.; Издательский дом «Вильямс», 2000.

Практическое задание № 1HTML
Разработка Web -страницы
На диске С в своей папке создайте папку и назовите её Reclaim_Фамилия.
Запустите Internet Explorer .
Войдите в редактор браузера («Вид»-«В виде HTML»).
Наберите в окне редактора текст, который отобразит только структуру Web- страницы:
<html>
<head>
<title> Реклама компьютерных курсов </title>
</head>
<body>
</body>
</html>
Набранный текст сохраните как Page_1.htm в вашей папке. Не забудьте установить тип файла как «Все файлы (*.*)».Загрузите в Web-браузер файл Page_1.htm . Для этого откройте в меню браузера: Файл – Открыть- Обзор – найдите в своей папке файл Page_1.htm – Открыть – ОК. Убедитесь, что название Web- страницы (Реклама компьютерных курсов) отразилось в верхней строке Web-браузера.
Откройте первоисточник Web- страницы (Вид- В виде HTML)и между тегами <body> </body> наберите текст рекламы.
Сохраните дополненный текст.
Перейдите в меню Web-браузера . Выполните команду: Вид – Обновить. Убедитесь, что в окне Internet Explorer отразился весь набранный вами текст.
Отформатируйте текст с помощью тега перехода на новую строку, тегов центровки текста, тега разделительной линии.
Измените цвет фона страницы, например на жёлтый с помощью тега <body bgcolor=”yellow”> вместо тега <body>.Измените тип, размер, цвет текста, используя теги:
<font face= “ “ size= color= > </font> Можно применить такие типы (face) шрифтов, как Arial, Times New Roman и другие. Для заголовка примените теги <h2> </h2> . Размер шрифта (size) для основного текста возьмите равным 3. Не забудьте проставлять закрывающий тег </font>.
Отразите на странице изображение, предварительно поместив графический файл в текущую папку (свою) : <image src= “Имя графического файла”> Файлы должны иметь расширение *.gif или *.jpgЗапрограммируйте изображение так, чтобы при наведении на него указателя мыши, появлялась бы подсказка . В теге Image используйте его атрибут alt= “Текст”. <image src= “Имя графического файла” alt= “Текст”>
Измените код (HTML – текст) так, чтобы щёлкнув по слову Вниз, перейти в самый конец страницы. Для этого сделайте так, чтобы в начале страницы было бы слово Вниз. Затем в коде введите, после тега <body>, необходимую гиперссылку, а перед закрывающим тегом </ body> присвойте атрибуту name (тега <a> ) значение, равное “Конец страницы”.
Пример строк:
<a href=”#конец страницы”> Вниз </a> - гипертекстовая связь в Web- документе.
<a name= “конец страницы”> </a> - определяет место перехода по гиперсвязи в этом же документе.
Осуществите по аналогии с предыдущим пунктом гиперпереход с конца страницы в её начало.
Пример рекламы компьютерных курсов.
Компьютер.
Новая технология обучения.
ВНИМАНИЕ!
Выпускники школ, средних специальных учебных заведений;
Выпускники ВУЗов;
Работники фирм, внедряющих компьютеры;
Просто люди, ищущие работу.
Не упускайте шанс обучиться на лицензированных курсах!
Учебные классы оборудованы:
компьютерами -
операционной системой-
программами-
Срок обучения - один месяц.
Обращаться: Адрес, телефон.
Выдаются свидетельства об окончании сертифицированных курсов.
Практическое задание № 2HTML
Разработка Web – страницы. Гиперсвязь страниц,
построение таблиц
Основные понятия.
Тэг гиперссылки: <a href=’адрес ссылки’>адрес перехода</a>. Например,
<a href=’page2.htm’>Далее</a>
Тэги таблицы:
<table>
<tr>
<th>Заголовок_1</th>
<th>Заголовок_2</th>
</tr>

<tr>
<td>Текст</td>

</tr>

</table>
Отметим, что тэги таблицы часто используются для создания определенного расположения элементов web-страницы (иногда вместо фреймов).
Постановка задачи.
Разработать новую Web- страницу и связать ее с ранее созданной. Построить на второй странице таблицу "Резюме".
План разработки темы.
По аналогии с созданием первой Web – страницы выполните новую, в которой наберите только заголовок: «Резюме». Сохраните ее под именем : page2.htm.
На page1, в конце текста, поместите строку (тэг гиперссылки): <a href =”page2.htm”> Переход </a>
Сохраните, загрузите page1.htm, щелкните по слову “Переход”, убедитесь, что появилась вторая страница.
Аналогично свяжите обе страницы в обратном порядке.
На page2 с помощью табличных тэгов постройте таблицу «Резюме». Смотрите пример в приложении_1.
Все данные в таблице надо занести свои.
Упражнения.
Выполните таблицу без рамок для оформления строки, где написаны ваши Имя и Фамилия.
Подсказка: в тэге <table> примените атрибут border=0.
При этом объедините первую и вторую ячейки по горизонтали.
Подсказка: Примените атрибут Rowspan=”n” , который указывает, что данная ячейка охватывает n соседних строк, и
aтрибут Colspan=”n”, который указывает, что данная ячейка охватывает n соседних столбцов.
Выберите нужный вам атрибут.
В третью ячейку этой же строки вставьте уменьшенное изображение вашей фотографии.
Сделайте таблицу в виде портретной рамки и в нее поместите вашу фотографию.
Подсказка: таблицу сделайте из одной ячейки, а атрибуту border последовательно придайте различные значения. См. пример.
Фон и цвет текста подберите сами.
Приложение_1. Пример резюме. Вам надо занести свои данные.
MACROBUTTON NoMacro [введите адрес] MACROBUTTON NoMacro [телефон, факс и адрес электронной почты]

Сергей Алексеев
Цель MACROBUTTON NoMacro [введите сюда свою цель]
Опыт работы 1990-1994ТОО «Башмачок»Москва
Руководитель планового отдела
Введена новая система планирования.
Увеличены объемы продаж на 13%.
Уменьшены издержки производства на 23%.
1985-1990ТОО «Башмачок»Москва
Заместитель руководителя планового отдела
Увеличены объемы продаж на 7%.
Организована единая компьютерная сеть.
1980-1984Трикотажная фабрика № 3Москва
Старший экономист
Введена новая система расчетов с торговлей.
Улучшена связь с поставщиками.
Стажировка на головном предприятии.
1975-1980Трикотажная фабрика № 3Москва
Экономист
Рост числа продаж на 40%.
С отличием окончены курсы повышения квалификации.
Образование 1971-1975Институт легкой промышленностиМосква
Факультет: Экономика легкой промышленности.
Специальность: Экономист.
Увлечения Компьютеры, автомобили, теннис, чтение.
Практическое задание № 3HTML
Разработка Web – страницы. Фреймы.
Основные понятия.
Frame-тэг, предназначенный для разделенияWeb-страницы на окна.
Тэги фрейма:
<frameset></ frameset >-открытие и закрытие окон Web-страницы.
<frame>-определение свойств фрейма.
Атрибуты тэга frameset и frame:
< frameset rows=’20%,80%’> - деление страницы на верхнее и нижнее окна с
размерами 20% и 80% от высоты страницы.
< frame name=frametop src=’top.htm’> - здесь определены имя верхнего
окна и имя файла, который загрузится в это окно.
Постановка задачи.
Создать страницу, разделенную на верхнее и нижнее окна. В верхнее окно
поместить слова «Вычислительные машины, комплексы, системы и сети». В нижнем окне отобразить картинку.

План разработки темы.
Образуйте, если она у вас еще не образована, новую папку, назвав ее, напр., HTML_Фамилия.
Создание главного файла.
Наберите следующий код:
<html>
<head><title>FRAME ROWS<\title><\head>
< frameset rows =’20%,80%’>
< frame name = ‘frametop’ src = ‘top.htm’>
<frame name = ‘framebuttom’ src = ’buttom.htm’>
</frameset>
<html>
Сoхраните этот файл под именем, например, twowin.htm.
3. Заполнение верхнего окна.
В новом файле наберите следующий код:
<html>
<head><title> Верхнее окно<title.></head>
<body>
<h2> Вычислительные машины, комплексы, системы и сети </h2>
</body>
</html>
Сохраните этот файл обязательно под именем, которое вы указали в главном файле, а именно: top.htm.
4.Заполнение нижнего окна.
Наберите следующий код:
<html>
<head><title>Нижнее окно</title></head>
<body>
<image src = ’Имя.gif’></image>
</body>
</html>
Сохраните обязательно под тем именем, которое вы указали в главном файле, а именно: bottom.htm.
Тестирование. Загрузите в Web-броузер главный файл (twowin.htm) и убедитесь, что заполнены оба окна Web -страницы.

УПРАЖНЕНИЯ.
Разделите новую Web-страницу на левое и правое вертикальные окна
Подсказка : вместо атрибута rows в тэге frameset примените атрибут cols (колонки).
Разделите страницу на три части: пусть верхняя часть будет горизонтальной полосой, а нижняя пусть будет разделена на две вертикальные колонки . Подсказка. Примените так называемый вложенный фрейм (он выделен жирным шрифтом):
<Frameset rows =”20%, 80%”>
<Frame Name=”Frame1” src=”f1.htm” >
<Frameset cols=”40%,60%”>
<Frame name=”Frame2” src=”f2.htm”>
<Frame name=”Frame3” src=”f3.htm”>
</Frameset>
</Frameset>
Закрепите разделительную линию, чтобы пользователь не смог бы ее перемещать.
294132053340 Подсказка. Примените атрибут NORESIZE.
4. Сделайте так, чтобы разделительная линия не была бы видна.
Подсказка: border=0.
5. Заполните окна согласно примеру.
Практическое задание № 4HTML
Создание меню во фрейме.
Основные понятия.
<menu></menu>- Тэг образования меню.
Target – атрибут тэга гиперссылки <а>. Он определяет размещение файла в соответствующем окне Web-страницы. Если применить атрибут гиперссылки Target = _top, то откроется не часть окна (фрейм), а вся страница.
Примечание. Если гиперссылка указывает на картинку, то гиперссылка должна начинаться со слова “file”, т.е. содержать указание на путь доступа:
File://диск:\путь к файлу
или
File:///диск:.путь к файлу
Постановка задачи.
Создать Web-страницу с фреймами и с меню (см. рисунок).

План разработки темы.
1. Образуйте новую папку, назвав ее, например, Menu_Фамилия.
2. Создание главного файла фрейма:
Наберите следующий код.
<html>
<head><title>Main file</title></head>
<FRAMESET rows='10%,70%'>
<frame name="frame1" src="f1.htm">
<FRAMESET cols='30%,70%'>
<frame name="left" src="Menu.htm">
<frame name="right" src="Menu_1.htm">
</frameset>
</html>
Сохраните под именем Mainfr.htm3.Создание меню в левом окне.
Наберите следующий код:
<html>
<head><title>Left Window</title></head>
<body>
<center>ДИСЦИПЛИНЫ:</center>
<font size=3>
<menu>
<li><a href="Page_1.htm" TARGET='right'>Общие</a>
<li><a href="page_2.htm" TARGET='right'>Общепрофессиональные</a>
<li><a href="page_3.htm" TARGET='right'>Специальные</a>
<li><a href="Menu_1.htm" TARGET='right'>Главная страница</a>
</menu>
</font>
</body>
</html>
Сохранените обязательно под именем Menu.htm.
Для слова ДИСЦИПЛИНЫ: задайте размер и цвет шрифта самостоятельно.
Для ссылки Главная страница гарнитуру и размер шрифта задать самостоятельно.
Поместить горизонтальную линию перед ссылкой Главная страница .4.Для заполнения правого окна создайте файл Menu_1.htm
Содержимое файла смотрите на рисунке (первая страница).
Для размещения картинок справа и слева в тексте используйте атрибут align тэга <img> . Значения атрибута: left, right.
Перечисление видов деятельности поместите в таблицу, границы которой не видны.
Цвет текста и заголовков сделайте сочетающимся с картинками и другими фреймами.
Размеры картинок задайте с помощью атрибутов height и width тэга <img>.
Имя файла, вставляемого в правый фрейм, должно совпадать с именем файла, указанного в файле Menu.htm .
5. Заполнение верхнего фрейма.
Верхний фрейм заполняется из файла f1.htm.
Этот файл содержит название специальности, оформленное определённым шрифтом и цветом.
Выполните самостоятельно.
6. Заполнение правого фрейма различной информацией в зависимости от нажатия на разные ссылки в меню.
При нажатии на ссылку Общие в правом фрейме должен открываться документ Page_1.htmПри нажатии на ссылку Общепрофессиональные в правом фрейме должен открываться документ Page_2.htmПри нажатии на ссылку Специальные в правом фрейме должен открываться документ Page_3.htmПри нажатии на ссылку Главная страница в правом фрейме должен открываться документ Menu_1.htmСодержимое документа Page_1.htm
Содержимое документа Page_2.htm
Содержимое документа Page_3.htm
Эти документы оформите самостоятельно.
При оформлении используйте тэги таблиц, форматирования, вставки рисунков.
Цвет, размер, гарнитуру шрифта; размер рисунков и расположение их в тексте задавайте на своё усмотрение.
Практическое задание № 5HTML
Вариант № 1
Самостоятельное задание.
Тема:
Уровни языков программирования
Вам необходимо подготовить сообщение и оформить его в виде Web-сайта.
Примерный план предлагаемой темы:
Низкий уровень
Машинные,
Машинно-ориентированные
Высокий уровень
Машинно-независимые
Процедурные, логические, объектно- ориентированные.
Постановка задачи.
Создать Web-сайт, который должен состоять из нескольких документов (количество документов определяется темой и смыслом). При его создании необходимо использовать ниже перечисленные темы:
Форматирование текста и абзацев
изменение размера, гарнитуры и цвета шрифта;
выравнивание по центру, левому краю, правому краю, по ширине;
использование заголовков, линий, подчёркиваний.
Использование списков
нумерованных, изменение вида номеров;
маркированных, изменение вида маркеров.
Изменение общего вида документа
использование фонового изображения;
цвета фона.
Использование графики
изменение размеров изображения;
обтекание текста справа и слева изображения;
использование подсказки при наведении мыши на изображение;
регулирование свободного пространства вокруг изображения.
Использование таблиц
выравнивание элементов таблицы;
объединение строк и столбцов;
использование цветов в таблицах;
создание таблиц без рамок.
Связывание документов
текстовые, графические привязки;
внутренние, внешние ссылки.
Использование фреймов
горизонтальные, вертикальные фреймы.
План разработки темы.
Всё относящееся к сайту (документы, рисунки и др.) должно находиться в одной папке, названной Фамилия_Тема (кратко).
Рисунки, используемые в документах, должны соответствовать теме (потрудитесь найти!!!)
Тема должна быть раскрыта полностью.

Практическое задание № 5HTML
Вариант № 2
Самостоятельное задание.
Тема:
Виды памяти
Вам необходимо подготовить сообщение и оформить его в виде Web-сайта.
Примерный план предлагаемой темы:
Внутренняя память
Оперативная
Кэш-память
Специальная
Постоянная, Flash Memory, BIOS, CMOS RAM, видеопамять.
Внешняя память
Накопители на жёстких магнитных дисках
Накопители на гибких магнитных дисках
Накопители на компакт-дисках
Накопители на магнитооптических компакт-дисках
Накопители на магнитной ленте
Постановка задачи.
Создать Web-сайт, который должен состоять из нескольких документов (количество документов определяется темой и смыслом). При его создании необходимо использовать ниже перечисленные темы:
Форматирование текста и абзацев
изменение размера, гарнитуры и цвета шрифта;
выравнивание по центру, левому краю, правому краю, по ширине;
использование заголовков, линий, подчёркиваний.
Использование списков
нумерованных, изменение вида номеров;
маркированных, изменение вида маркеров.
Изменение общего вида документа
использование фонового изображения;
цвета фона.
Использование графики
изменение размеров изображения;
обтекание текста справа и слева изображения;
использование подсказки при наведении мыши на изображение;
регулирование свободного пространства вокруг изображения.
Использование таблиц
выравнивание элементов таблицы;
объединение строк и столбцов;
использование цветов в таблицах;
создание таблиц без рамок.
Связывание документов
текстовые, графические привязки;
внутренние, внешние ссылки.
Использование фреймов
горизонтальные, вертикальные фреймы.
План разработки темы.
Всё относящееся к сайту (документы, рисунки и др.) должно находиться в одной папке, названной Фамилия_Тема (кратко).
Рисунки, используемые в документах, должны соответствовать теме (потрудитесь найти!!!)
Тема должна быть раскрыта полностью.

Практическое задание № 5HTML
Вариант № 3
Самостоятельное задание.
Тема:
Устройства ввода-вывода информации
Вам необходимо подготовить сообщение и оформить его в виде Web-сайта.
Примерный план предлагаемой темы:
Устройства ввода информации
Клавиатура
Мышь
Сканеры
Джойстики и др.
Устройства вывода информации
Монитор
Принтер
Плоттер и др.
Постановка задачи.
Создать Web-сайт, который должен состоять из нескольких документов (количество документов определяется темой и смыслом). При его создании необходимо использовать ниже перечисленные темы:
Форматирование текста и абзацев
изменение размера, гарнитуры и цвета шрифта;
выравнивание по центру, левому краю, правому краю, по ширине;
использование заголовков, линий, подчёркиваний.
Использование списков
нумерованных, изменение вида номеров;
маркированных, изменение вида маркеров.
Изменение общего вида документа
использование фонового изображения;
цвета фона.
Использование графики
изменение размеров изображения;
обтекание текста справа и слева изображения;
использование подсказки при наведении мыши на изображение;
регулирование свободного пространства вокруг изображения.
Использование таблиц
выравнивание элементов таблицы;
объединение строк и столбцов;
использование цветов в таблицах;
создание таблиц без рамок.
Связывание документов
текстовые, графические привязки;
внутренние, внешние ссылки.
Использование фреймов
горизонтальные, вертикальные фреймы.
План разработки темы.
Всё относящееся к сайту (документы, рисунки и др.) должно находиться в одной папке, названной Фамилия_Тема (кратко).
Рисунки, используемые в документах, должны соответствовать теме (потрудитесь найти!!!)
Тема должна быть раскрыта полностью.

Практическое задание № 5HTML
Вариант № 4
Самостоятельное задание.
Тема:
Графическая и звуковая информация. Речь.
Вам необходимо подготовить сообщение и оформить его в виде Web-сайта.
Примерный план предлагаемой темы:
Особенности представления в ЭВМ графической и звуковой информации
Устройства ввода-вывода графической, звуковой информации
Ввод и вывод речевой информации в ЭВМ
Постановка задачи.
Создать Web-сайт, который должен состоять из нескольких документов (количество документов определяется темой и смыслом). При его создании необходимо использовать ниже перечисленные темы:
Форматирование текста и абзацев
изменение размера, гарнитуры и цвета шрифта;
выравнивание по центру, левому краю, правому краю, по ширине;
использование заголовков, линий, подчёркиваний.
Использование списков
нумерованных, изменение вида номеров;
маркированных, изменение вида маркеров.
Изменение общего вида документа
использование фонового изображения;
цвета фона.
Использование графики
изменение размеров изображения;
обтекание текста справа и слева изображения;
использование подсказки при наведении мыши на изображение;
регулирование свободного пространства вокруг изображения.
Использование таблиц
выравнивание элементов таблицы;
объединение строк и столбцов;
использование цветов в таблицах;
создание таблиц без рамок.
Связывание документов
текстовые, графические привязки;
внутренние, внешние ссылки.
Использование фреймов
горизонтальные, вертикальные фреймы.
План разработки темы.
Всё относящееся к сайту (документы, рисунки и др.) должно находиться в одной папке, названной Фамилия_Тема (кратко).
Рисунки, используемые в документах, должны соответствовать теме (потрудитесь найти!!!)
Тема должна быть раскрыта полностью.

Приложенные файлы


Добавить комментарий