<HEAD>
<ТIТLЕ>Петербург</ТIТLЕ>
</HEAD>
<BОDY>
Санкт-Петербург
</BODY>
</HTML>
HTML (Hyper Text Markup Language) означает язык разметки гипертекста.
Этот язык был разработан Тимом Бернерсом-Ли в рамках создания проекта распределенной гипертекстовой системы, которую он назвал World Wide Web (WWW) или Всемирная паутина.
HTML предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.
Публикации во Всемирной паутине реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.
Сайт является интерактивным средством представления информации. Интерактивность сайта обеспечивают различные формы, с помощью которых посетитель сайта может зарегистрироваться на сайте, заполнить анкету и так далее.
Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы). Гиперссылки также имеются на других Web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту.
Web-сайты обычно являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую- и видеоинформацию.
Web-страницы сайта могут содержать динамические объекты (исполнимые модули), созданные с использованием сценариев на языках JavaScript и VBScript или элементов управления ActiveX.
Расположенные на сайте управляющие элементы (например, кнопки) позволяют пользователю запускать те или иные динамические объекты.
Web-сайт состоит из Web-страниц, объединенных гиперссылками.
Web-страницы могут быть интерактивными
и могут содержать мультимедийные и динамические объекты.
Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML. Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу.
Браузер при загрузке Web-страницы представляет ее на экране в том виде, который задается тэгами.
Основными достоинствами HTML-документов являются:
• малый информационный объем;
• возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста.
В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
Рассмотрим, как создаются Web-сайты, на примере разработки тематического сайта «Компьютер».
Сначала необходимо разработать проект сайта, то есть определить, сколько Web-страниц будет входить в сайт, какова будет их тематика и как они будут связаны между собой.
Пусть наш сайт кроме титульной страницы «Петербург» будет содержать:
• страницу «Памятник Петру 1», содержащую фото памятника;
• страницу «Эрмитаж»;
• страницу «Русский музей» ;
• страницу «Исаакиевский собор» .
Приступим к созданию титульной Web-страницы сайта.
Для этого используем привычный и достаточно удобный для этих целей текстовый редактор Блокнот.
¦Создание Web-сайта «Петербург»
1. Открыть окно текстового редактора Блокнот.
Вид Web-страницы задается тэгами, которые заключают ся в угловые скобки.
Тэги могут быть одиночными или парными ными, для которых обязательно наличие открывающего и закрывающего тегов (такая пара тэгов называется контейнером).
Закрывающий тэг содержит прямой слэш перед обозначением.
Тэги могут записываться как прописным так и строчными буквами.
HTML-код страницы помещается внутрь контейнера <HTML></HTML>.
Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать.
Web-страница разделяется на две логические части:
заголовок и содержание.
Заголовок Web-страницы заключается в контейнер <HEAD></HEAD> и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отобра жения.
Основное содержание страницы помещается в контейнер <BODY></BODY> и может включать
текст,
таблицы,
бегущие строки,
ссылки на графические изображения и звуковые файлы и так далее.
<HTML>
Название Web-страницы содержится в контейнере <ТITLE></TITLE> и отображается в строке заголовка браузера при просмотре страницы. Назовем нашу Web-cтpaницу «Петербург»:
<HEAD>
<ТIТLЕ>Петербург</ТIТLЕ>
</HEAD>
сохранить изменения.
обновить страницу.
Поместим для начала на страницу текст «Санкт-Петербург»:
Созданную Web-страницу необходимо сохранить в виде файла.
Принято сохранять титульный файл сайта, то есть тот, который первый загружается в браузер, под именем index.html.
В качестве расширения файла Web-страницы можно также использовать htm.
Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Необходимо различать имя файла index.html, то есть имя, под которым Web-страница хранится в файловой системе,
и собственно имя Web-страницы «Петербург», которая высвечивается в верхней строке окна браузера и в первую очередь анализируется поисковыми системами.
Имя Web-страницы должно в максимальной степени соответствовать ее содержанию.
2. В окне приложения Блокнот ввести HTML-код Web-страницы. Сохранить файл под именем index.html в папке сайта. Загрузить этот файл в окно браузера для просмотра.
| <HTML> <HEAD> <ТIТLЕ>Петербург</ТIТLЕ> </HEAD> <BОDY> Санкт-Петербург </BODY> </HTML> |
|
Форматирование текста.
Пока страница выглядит не слишком привлекательно. Мелкий шрифт и черный текст на белом фоне почти не обращают на себя внимания. С помощью HTML-тэгов можно задать различные параметры форматирования текста.
Размер шрифта для имеющихся в тексте заголовков задается тэгами от <Н1> (самый крупный) до <Н6> (самый мелкий). Заголовок страницы целесообразно выделить самым крупным шрифтом:
<Н1>Санкт-Петербург</Н1>
Некоторые тэги имеют атрибуты, которые являются име нами свойств и могут принимать определенные значения.
Так, заголовок по умолчанию выровнен по левому краю страницы, однако принято заголовок размещать по центру.
Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN, которому требуется присвоить определенное значение.
Выравнивание по правой границе окна реализуется с помощью записи ALIGN="right",
а по центру — ALIGN="cеnter":
написать английскими буквами теги вокруг текста «Санкт-Петербург»:
| <Н1 АLIGN="center">Санкт-Петербург</Н1> |  |
С помощью тэга FОNT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста.
Атрибут FAСE позволяет задать гарнитуру шрифта (например, FACE="Arial"),
атрибут SIZE — размер шрифта (например, SIZE=4),
атрибут COLОR — цвет шрифта (например, COLOR="blue").
Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и так далее), либо его шестнадцатеричным значением.
Шестнадцатерич-ное представление цвета использует RGB-формат "#RRGGBB", где две первые щестнадцатеричные цифры задают интенсивность красного (red), две следующие — интенсивность зеленого (green) и две последние — интенсивность синего (blue) цветов.
Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная — FF. Легко догадаться, что синему цвету будет соответствовать значение "#0000FF".
Таким образом, задать синий цвет заголовка можно с помощью тэга FONT с атрибутом COLOR:
| <FONT COLOR="blue"> <Н1 ALIGN="center">Санкт-Петербург</Н1> </FОNT> |
 |
Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга <НR>.
Разделение текста на абзацы производится с помощью контейнера <Р></Р>.
При просмотре в браузере абзацы отделяются друг от друга интервалами.
Для каждого абзаца можно задать определенный тип выравнивания.
На титульной странице обычно размещается текст, кратко описывающий содержание сайта. Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием:
задание: внутри тега написать русскими буквами
<Р ALIGN="left">Санкт-Петербург – город-герой России, административный центр Ленинградской области и Северо-Западного федерального округа.
Он расположен на берегах Финского залива Балтийского моря и реки Невы.
Площадь города составляет 600 кв. км, население – 4 миллиона 600 тысяч человек.</Р>
<Р ALIGN="right">Санкт-Петербург является сокровищницей выдающихся архитектурных памятников, музеев, церквей и соборов. Город на Неве, сыгравший значительную роль в Отечественной истории, на протяжении двух веков являлся главным городом Российской империи, и сегодня его называют Северной столицей. Основанный в 1703 году как «окно в Европу», Санкт-Петербург и развивался как самый европейский город России. Наряду с русскими архитекторами и инженерами он застраивался иностранцами. В результате Санкт-Петербург получил необыкновенный по красоте облик, в котором образцы русской традиционной архитектуры сочетаются с последними тенденциями в западноевропейском искусстве.
</Р>
Таким образом, если вставить в текст определенную последовательность тэгов, то мы получим Web-страницу, содержащую отцентрированный заголовок синего цвета, выводимый крупным шрифтом и отделенный горизонтальной линией от остального текста.
3. В окне приложения Блокнот в контейнер <BОDY> вставить последовательность тэгов и просмотреть результат в браузере:
|
На Web-страницы обычно помещают изображения, чтобы сделать их визуально более привлекательными. На Web-страницах могут размещаться графические файлы трех форматов — GIF, JPG и PNG. Если рисунок сохранен в другом формате, то его необходимо предварительно преобразовать в один из вышеуказанных форматов с помощью графического редактора. Для этих целей можно использовать редактор Photo Editor, который входит в пакет Microsoft Office.
На титульной странице создаваемого сайта уместно разместить изображение того объекта, которому посвящен сайт .
4.
Для вставки изображения используется тэг <IMG> с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете.
Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла:
<IMG SRC="petropavel.jpg">
Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла. Например:
<IMG SRС="C:\Мои документы\_concurs2011 /img src="petropavel.jpg" alt="петро" width="600" height="424" /></p>>
Если файл находится на удаленном сервере в Интернете то должен быть указан URL - адрес этого файла. Например:
<IMG SRC="http://www.photo.russia98.ru/public_card/472044/">
Иллюстрации на Web-страницах стали неотъемлемым элементом дизайна. Однако пользователи иногда в целях экономии времени отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст.
Поясняющий текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
<IMG SRC="petropavel.jpg" АLT="Петропавловская крепость ">
Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN тэга <IMG>, который может принимать пять различных значений:
Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид:
<IMG SRC="petropavel.jpg" ALT="Петропавловская крепость" ALIGN="right">
5 задание: В окне приложения Блокнот в контейнер <BODY> вставить перед абзацами текста тэг вставки изображения, просмотреть результат в браузере.
<IМG SRC="petropavel.jpg"
АLT="Петропавловская крепость"
АLIGN="right">
Вопросы для повторения
1. Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно?
Какова логическая структура Web-страницы?
творческое задание
13.2. Создать титульную страницу вашего сайта .
Поэкспериментируйте с форматированием текста и размещением графики.
Задайте для страницы фон.
В тег введите код (атрибут и переменную) например:
<Bоdy bgcоlor="green"> или bgcolor="00cccс" или другой
Первая титульная страница должна предоставлять посетителю Web-сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы сайта.
Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимо, прежде всего, создать заготовки Web-страниц.
Такие «пустые» страницы должны иметь заголовок, но могут пока не иметь содержания. Все создаваемые страницы необходимо сохранить в виде файлов в папке сайта.
Каждая страница будет содержать следующий HTML-код:
<HTML>
<HЕAD>
<ТIТLЕ>Заголовок страницы</TITLE>
</HEAD>
<BODY>
</BОDY>
</HTML>
6. Создать страницы «Памятник Петру 1»«Эрмитаж», «Русский музей» и «Исакиевский собор» и сохранить их в файлах с именами
peter-prim.html,
hermitage.html,
pushkin.html
isaakiy.html
в каталоге сайта.
Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки.
Указатель ссылки — это то, что мы видим на Web-странице (текст или рисунок), обычно выделенный синим цветом и подчеркиванием.
Активизация гиперссылки вызывает переход на другую страницу.
Адресная часть гиперссылки представляет собой URL - адрес документа, на который указывает ссылка. URL - адрес может быть абсолютным и относительным.
Абсолютный URL - адрес документа полностью определяет компьютер, каталог и файл, в котором располагается документ.
Абсолютный адрес документа, находящегося на локальном компьютере, будет включать в себя путь к файлу и имя файла, например:
С: /Web-сайт/filename.htm
Абсолютный адрес документа, находящегося на удаленном компьютере в Интернете, будет включать имя сервера Интернета, путь к файлу и имя файла, например:
http: //www. host .ru/Web-сайт/filename .htm
Относительный URL-адрес указывает на местоположение документа относительно тогодокумента, в котором находится указатель ссылки.
При разработке сайта рекомендуется входящие в него Web-страницы связывать относительными ссылками.
Это позволит не изменять адресную часть ссылок при перемещении Web-сайта в другой каталог локального компьютера или при его публикации в Интернете.
Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает переход на Web-страницу, указанную в адресной части ссылки.
Прежде всего необходимо разместить на титульной странице ( в документе INDEX) тексты гиперссылок на каждую страницу сайта.
Для представления гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.
Принято размещать гиперссылки в нижней части страницы, поэтому разместим их под введенным текстом в новом абзаце в одну строку разделенными несколькими пробелами.
Такое размещение гиперссылок часто называют панелью навигации.
Панель навигации
вариант1
будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами ( ):
<p ALIGH= "center">
«Памятник Петру 1» «Эрмитаж»,   «Русский музей»   «Исаакиевский собор» </p>
именами ,
peter-prim.html,
hermitage.html
pushkin.html
isaakiy.html
вариант 2: вставить таблицу (см. ниже п. 3a. Вставка таблиц)
Теперь для каждой гиперссылки определим адрес перехода.
Для этого используется контейнер гиперссылки <А></А> с атрибутом HREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете.
Контейнер должен содержать указатель гиперссылки:
<А НREF="URL">Указатель гиперссылки</А>
7. Вставить в титульную страницу код, создающий панель навигации:
<Р ALIGN="center">
[<А HREF="peter-prim.html">Памятник Петру 1</A>]  
[<А HREF=" hermitage.html">Эрмитаж</A>]  
[<А HREF="pushkin.html">Русский музей</A>]  
[<A HREF="isaakiy.html">Исаакиевский собор</A>]
</P>
пояснение:
  - это несминаемый пробел
<P> </P> - это смысловой абзац текста
Панель навигации на титульной странице создана, теперь активизация указателей гиперссылок будет приводить к переходу на другие страницы сайта.
Полезно на титульной странице сайта создать ссылку на адрес электронной почты, по которому посетители могут связаться с администрацией сайта.
Для этого необходимо атрибуту ссылки HREF присвоить URL-адрес электронной почты и вставить ее в контейнер <ADDRESS></ADDRESS>, который задает стиль абзаца, принятый для указания адреса.
8. Вставить в титульную страницу код, создающий ссылку на адрес электронной почты:
| <ADDRESS> <А HREF="mailto:mailbox@provaider.ru">E-mail: mailbox@provaider.ru</A> </ADDRESS> |
По щелчку мыши по ссылке на адрес электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке «Кому» будет указан заданный в ссылке адрес.
9. Созданная титульная страница Web-сайта «Компьютер» содержит заголовок, изображение компьютера, текст, панель навигации и ссылку на адрес электронной почты.
Вопросы для повторения
1. В каких случаях удобнее использовать в гиперссылках абсолютные, а в каких — относительные адреса?
Практические задания
Разместить панель навигации и электронный почтовый адрес на титульной странице разрабатываемого сайта.
3a. Вставка таблиц
<tаble width="100%" bоrder="1" cellspаcing="1" cellpаdding="5">
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
</tr>
</tаble>
Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:
Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного.
Сначала создадим главный нумерованный список категорий программного обеспечения.
Список располагается внутри контейнера <OL></OL>,
а каждый элемент списка определяется тэгом <LI>.
С помощью атрибута TYPE тэга <OL> можно задать тип нумерации:
арабские цифры (по умолчанию),
"I" (римские цифры),
"а" (строчные буквы) и др.
9. Открыть в Блокноте файл hermitage.html, ввести заголовок «Информация» и добавить следующий HTML-код, задающий список:
<ОL>
<LI>Информация для посетителей
<LI>Выставки
<LI>Проекты Эрмитажа
</OL>
Создадим теперь вложенный ненумерованный список для одного из элементов основного списка. Список располагается внутри контейнера <UL></UL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность).
10. Добавить HTML-код, задающий вложенный список для элемента <LI> Временные выставки:
<UL>
<LI TYPE="square">
Прадо в Эрмитаже;
<LI> Произведения Тома де Томона в собрании Эрмитажа;
<LI> Стеклярусный кабинет;
<LI> Судьба одной коллекции.
</UL>
Практические задания
Разместить на Web-странице "Эрмитаж" нумерованный и ненумерованный список.
Контроль:
Демонстрация и обсуждение созданных сайтов.
тест по теме "Язык разметки веб-страниц" .
Примерные фото для включения в страницы.
© Alexeeva, school 509, 2011
