- •51 Основы разработки Web-страниц
- •Содержание
- •1.Общие положения 4
- •2. Лабораторные работы 6
- •Основы разработки Web-страниц
- •1.Общие положения
- •Контрольные вопросы.
- •Задания и технология выполнения.
- •3.1. Создайте Web-страницу содержащую следующий текст:
- •Контрольные задания
- •4.4. Приведите текст выше созданной Web-страницы к следующему виду:
- •Просмотрите созданную Web-страницу в виде html - кодов.
- •4.6. Закройте программы Блокнот и Internet_Explorer.
- •Рекомендуемая литература
- •Лабораторная работа № 2 Тема: Создание гиперссылок в html- документах.
- •Краткая справка
- •2. Контрольные вопросы.
- •Задания и технология выполнения.
- •3.3. Просмотрите Web-страницу Ваша_Фамилия.Html из web-страницы Ваше_Имя.Html.
- •3.4. Вернитесь к Web-странице Ваше_Имя.Html.
- •3.5. Создайте ссылку внутри Web-страницы Ваше_Имя.Html.
- •3.6. Проверьте результат создания ссылке внутри Web-страницы Ваше_Имя.Html.
- •3.7. Закройте программы Блокнот и Internet_Explorer.
- •Контрольные задания
- •4.3. Создайте ссылку внутри Web-страницы Ваша_Фамилия.Html.
- •4.4. Закройте программы Блокнот и Internet_Explorer.
- •5. Рекомендуемая литература
- •Лабораторная работа № 3 Тема: Создание изображения и использование его на Web-странице.
- •Краткая справка
- •2. Контрольные вопросы.
- •3. Задания и технология выполнения.
- •3.4. Просмотрите результат вставки рисунка.
- •Измените атрибуты рисунка «Вокзал», сделав их следующими:
- •Контрольные задания.
- •5. Рекомендуемая литература
- •Лабораторная работа № 4 Тема: Форматирование текста в html документах.
- •Краткая справка
- •Контрольные вопросы.
- •3. Задания и технология выполнения.
- •Контрольные задания
- •5. Рекомендуемая литература
- •Лабораторная работа № 5 Тема: Создание списков и таблиц средствами языка html.
- •Краткая справка
- •Контрольные вопросы.
- •3. Задания и технология выполнения.
- •Ненумерованный список
- •Нумерованный список
- •Список определений
- •Просмотрите созданную Web-страницу.
- •3.3. Создайте Web-страницу содержащую таблицу следующего вида:
- •Просмотрите созданную Web-страницу.
- •Приведите созданную Web-страницу к следующему виду:
- •Просмотрите созданную Web-страницу.
- •Приведите созданную Web-страницу к следующему виду:
- •Контрольные задания
- •Пример списка определений
- •Пример ненумерованного списка
- •Пример нумерованного списка
- •5. Рекомендуемая литература
- •Лабораторная работа № 6 Тема: Создание Web-документа с помощью редактора Microsoft Word .
- •Краткая справка
- •Создание гиперссылок
- •Добавление бегущей строки на Web-страницу
- •2. Контрольные вопросы.
- •2.3. Как добавить бегущую строку на Web-страницу?
- •3. Задания и технология выполнения.
- •3.1. Создайте Web-страницу следующего вида:
- •Контрольные задания
- •Имена файлов
- •Гиперссылки
- •5. Рекомендуемая литература
- •Литература
- •5. Internet. Шаг за шагом. (на cd-rom). "Питер Мультимедиа", 1997.
- •6. Энциклопедия пользователя Internet. (на cd-rom). "Демос", 2000.
- •Приложение 1. Общая структура типичного простейшего документа html
- •Приложение 2. Теги форматирования текстового потока.
- •Приложение 3. Теги форматирования абзацев:
- •Приложение 4. Теги списков.
- •Приложение 5. Некоторые важнейшие теги html
- •Приложение 6. Создание бегущей текстовой строки
- •Приложение 7. Список цветов символов html
- •Приложение 8. Создание таблиц в html
Просмотрите созданную Web-страницу в виде html - кодов.
4.6. Закройте программы Блокнот и Internet_Explorer.
Рекомендуемая литература
Браун, Марк, Р., Хоникатт, Джерри, и др. Использование HTML 4, 4-е издание. Специальное издание.: Пер. с англ. – М.; СПб.; К.: Издательский дом «Вильямс», 2000.-784 с.: ил.(стр. 29-46)
Ю. П. Тютюнов, М. П. Кашук. «Основы разработки Web-страниц» (Методические указания и задания) – ОГТЖТ, 2006.
Под редакцией Ю.М. Алексеева. Быстро и легко создаем, программируем, шлифуем и раскручиваем web-сайт. «Лучшие книги» Москва. 2004.-432 с.: ил.
Лабораторная работа № 2 Тема: Создание гиперссылок в html- документах.
Цель: Получение практических навыков создания гиперссылок в HTML- документах. Техническое обеспечение: PENTIUM
Программное обеспечение: WINDOWS, Microsoft Word, Microsoft Internet Explorer.
Место проведения: Лаборатория ПЭВМ.
Продолжительность занятия: 2 часа.
Краткая справка
WEB- страничка может состоять из нескольких документов. Один из них главный (index.html или main.html) - он открывается первым и должен обязательно лежать на вашем сайте в интернете. Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных. Ссылкой на эти другие документы (части нашей страники) может быть текст (фраза,слово), а может быть и картинка. Ссылки – инструмент, позволяющий связывать между собой различные документы. Браузер обычно выделяет ссылку цветом и/или подчеркиванием. Описывается ссылка следующим образом:
<A HREF=”путь/имя файла”>Ссылка на документ</A>
Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст).
Цвет ссылки прописывается следующим образом:
<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">
link - цвет ссылки,
alink - цвет активной ссылки (нажатой),
vlink - цвет уже посещенной ссылки.
В примере цвета одинаковые, но они могут быть разными, если цвет ссылки такой же как цвет текста документа (ссылка же выделяется чертой).
Ссылка может содержать атрибут TITLE, описывающий ссылку. Если пользователь наведет указатель мыши на ссылку, то появится ее описание – содержимое этого атрибута. Ссылки бывают относительные и абсолютные.
Примеры:
относительной ссылки:
<A HREF=”filename.htm”> - на документ “filename.htm”,
находящийся в одном каталоге с текущим документом;
абсолютной ссылки:
В абсолютной ссылке указывается полный путь к файлу:
<A HREF=”http://www.fortunecity.com/business/fax/339/index.htm”>
Относительные ссылки удобнее. Они не привязаны к конкретной структуре каталогов, т.е. вы можете создать свой сайт на компьютере, тестировать и исправлять ошибки не подключаясь к Интернет. И лишь после полной готовности его на сервер, он будет работать так же.
Можно делать ссылки внутри документа. Это удобно для перехода к разным главам одной большой статьи. Для этого необходимо создать некую опорную точку – анкер (anchor –якорь, англ.), на которую и будет происходить переход.
Разберем это на примере. Допустим, нам надо перейти на начало этого урока. Для чего создадим такой анкер:
<A NAME=lesson2>Ссылки</A>
При этом слово «Ссылки» в тексте никак выделяться не будет. Теперь в тексте можно делать ссылку на анкер (и не один раз).
Например, так:
Нажмите<A HREF=”#lesson2”>здесь</A>для возврата к началу урока
И получите:
Нажмите здесь для возврата к началу урока.
К этому анкеру можно перейти и из другого файла (например, чтобы сделать ссылку к конкретному уроку2, а не урокам HTML вообще).
Тогда ссылка будет выглядеть так:
<A HREF=”uroki.htm#lesson2”>
До сих пор мы рассматривали ссылки на HTML- документы. Однако возможны ссылки и на другие виды ресурсов: <A HREF=ftp://servername/directory/file.ext>.
Такая ссылка запустит протокол передачи файлов и произведет выгрузку файла “file.ext” из директории “directory” сервера “servername” на жесткий диск пользователя (download).
Вид сcылки на почтовый ящик выглядит в тексте следующим образом:
Пишите письма <A HREF=mailto:Has5@mail.ru> автору</A>
В окне браузера:
Пишите письма автору
А это то же самое (ссылка на почтовый ящик), но с использованием атрибута TITLE. В тексте:
Пишите письма <A HREF=mailto:Has5@mail.ru>
TITLE=”Ссылка на почтовый ящик Администратора сайта”>автору</A>
В окне браузера:
Пишите письма автору
Внимание! Браузеры чувствительны к регистру ссылок. Если вы вместо http://webs/web.com наберете “http://webs.Web.com” , то получите нерабочую ссылку. Та же ситуация и с расширениями: если у вас ссылка на файл “index.htm”, а там находится “index.html”, то результат тот же – нерабочая ссылка.