Учебная практика: Методические указания для студентов специальностей ''Прикладная информатика (в экономике)'', ''Информационные системы и технологии'', ''Антикризисное управление''. Ч. 2
This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
МИНИСТЕРСТВО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ ТВЕРСКОЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ __________________________________________________________________
КАФЕДРА «ИНФОРМАЦИОННЫЕ СИСТЕМЫ»
УЧЕБНАЯ ПРАКТИКА
МЕТОДИЧЕСКИЕ УКАЗАНИЯ
ЧАСТЬ 2
ТВЕРЬ 2003
2 УДК 378.3-421.41(075.8) ББК 74.58.я7 В методических указаниях по учебной практике рассматриваются вопросы изучения и практического применения возможностей современных средств работы в сети Internet, подготовки и создания HTML—страниц, приводятся алгоритмы и примеры решения основных типовых задач в данной области. Предназначены для студентов специальностей «Прикладная информатика (в экономике)», «Информационные системы и технологии», «Антикризисное управление». Методические указания обсуждены и рекомендованы к печати на заседании кафедры «Информационные системы» (протокол № 12 от 6 июня 2003 г).
УЧЕБНАЯ ПРАКТИКА Методические указания Часть 2 Редактор В.А. Румянцева Технический редактор Г.В. Комарова ______________________________________________ Подписано в печать Формат 60x84/16 Физ. печ. л. 2,0 Тираж 100 экз.
Бумага писчая Усл. печ. л. 1,86 Уч.-изд. л. 0,87 Заказ №
3 СОДЕРЖАНИЕ СТР 1. ОБЩИЕ СВЕДЕНИЯ ОБ ИНТЕРНЕТ ........................................................................... 4 2. ЗАДАНИЯ И РЕКОМЕНДАЦИИ ПО ВЫПОЛНЕНИЮ РАБОТ.............................................. 6 ЗАДАНИЕ 1. РАБОТА С БРАУЗЕРОМ ....................................................................... 6 ЗАДАНИЕ 2. ОСНОВЫ РАЗРАБОТКИ HTML-СТРАНИЦ ............................................ 10 ЗАДАНИЕ 3. ИСПОЛЬЗОВАНИЕ ГРАФИЧЕСКИХ ИЗОБРАЖЕНИЙ В HTML-СТРАНИЦАХ 12 ЗАДАНИЕ 4. ОФОРМЛЕНИЕ ТЕКСТОВОЙ ИНФОРМАЦИИ .......................................... 13 ЗАДАНИЕ 5. РАБОТА СО СПИСКАМИ ..................................................................... 14 ЗАДАНИЕ 6. СОЗДАНИЕ ТАБЛИЦ .......................................................................... 17 ЗАДАНИЕ 7. ПОСТРОЕНИЕ WEB-ФОРМ ................................................................ 21 ЗАДАНИЕ 8. РАБОТА С ФРЕЙМАМИ ...................................................................... 25 ЗАДАНИЕ 9. ИСПОЛЬЗОВАНИЕ ЭЛЕМЕНТОВ META ............................................... 28 ЗАДАНИЕ 10. НЕКОТОРЫЕ РЕКОМЕНДАЦИИ ......................................................... 30 3. ФОРМА ОТЧЕТНОСТИ ........................................................................................... 32 СПИСОК РЕКОМЕНДУЕМОЙ ЛИТЕРАТУРЫ ................................................................... 32
4
1. Общие сведения об Интернет Принципы и организация сети Интернет IP-адресация Каждый компьютер в сети Интернет имеет свой собственный уникальный номер, который называется IP-адресом. IP-адрес имеет длину 32 бита и записывается обычно как четыре десятичных числа (от 0 до 255), - например, 48.34.129.108. Интернет представляет собой объединение десятков тысяч отдельных сетей, которые используют единый протокол и единое пространство IP-адресов. Интернет использует протокол TCP/IP. Этот протокол регламентирует, как следует разбивать длинное сообщение на пакеты, как должны быть устроены пакеты, как контролировать прибытие пакетов к месту назначения, что делать в случае ошибок передачи данных, и другие детали. Доменная система имен и указатели ресурсов У большинства компьютеров в Интернете есть собственное имя, а не только IP-адрес. Служба, которая обеспечивает перевод имен компьютеров в их IPадреса, называется Доменной Службой Имен (DNS). Она представляет собой гигантскую распределенную базу данных. Имя компьютера записывается как несколько слов, разделенных точками, например: tstu.tver.ru. Это отражает иерархическую, или доменную, структуру службы DNS. В примере “tstu” - это имя компьютера в домене второго уровня “tver”, который принадлежит домену первого уровня “ru”. Администратор, который отвечает за домен первого уровня “ru” (Россия), зарегистрировал домен второго уровня “tver.ru” (сервер города Тверь) и передал туда все полномочия на регистрацию новых имен в пределах этого домена. В свою очередь администратор домена “tver.ru” зарегистрировал имя “tstu.tver.ru” за определенным IP-адресом. Такая структура службы DNS обеспечивает, с одной стороны, уникальность имен компьютеров в пределах всего Интернета, а с другой стороны, четкое разделение административной ответственности. Хотя не существует особых правил, как следует называть домены, в применении к доменам первого, самого верхнего уровня сложилась определенная практика. Международные организации и США используют домены первого уровня com - для коммерческих, org и net - для некоммерческих организаций. В большинстве стран существует один домен первого уровня: ru - для России, de - для Германии, uk - для Великобритании и т.д. Так же, как каждый компьютер имеет свое уникальное имя, уникальное имя имеет и каждый документ в Интернете. Это уникальное имя называется URL Универсальный Указатель Ресурса (Universal Resource Locator). URL имеет следующую форму: служба://имя_компьютера/директория/поддиректория/.../имя_ файла Служба обозначается соответствующим протоколом, чаще всего можно встретить http:// для веб-страниц и ftp:// для файловых архивов.
5 Службы Интернета Наиболее широко используются следующие службы Интернета: «Всемирная паутина» (World Wide Web, или WWW, или просто «веб») служба, которая совмещает в Интернете функции электронного издательства и библиотеки. Особенность публикаций в Интернете - это наличие ссылок на другие страницы внутри документа и на другие документы, где бы они ни хранились. Электронная почта (e-mail) - в соответствии с названием, это служба для адресной доставки информации. Новости (news, USENET) - это тематические конференции, доски объявлений или газеты, где каждый подписчик одновременно может быть автором. Эта служба, так же как и веб-форумы или списки рассылки (похожие по функциям, но отличающиеся техническими деталями), предназначена для обмена сообщениями в пределах группы людей, связанных общими интересами. FTP - используется для копирования файлов с компьютера на компьютер. В ftp-архивах Интернета можно найти много различных программ. Всемирная Паутина Публикация в Интернете, как и обычная публикация на бумажном носителе (журнал, газета, книга), состоит из упорядоченных страниц, на которых представлен форматированный текст и иллюстрации в виде картинок. Однако, в отличие от бумажной публикации, страницы в Интернете электронные – так называемые веб-страницы, в которые можно включить и звуковое сопровождение, и видеоролик, что значительно повышает восприятие информации пользователем. Кроме того, веб-страница может включать в себя так называемые гипертекстовые ссылки (гиперссылки), соединяющие контекст, в котором они находятся, с другим контекстом в рамках того же или другого текста, находящегося на произвольном сервере Сети. Как и большинство других служб Интернета, Всемирная Паутина работает в рамках модели клиент-сервер. В качестве сервера, как правило, выступает постоянно подключенный к Сети компьютер, на котором работает специальная программа. Именно эту программу чаще всего и называют веб-сервером. Клиентом является любой компьютер, подключенный в данный момент к Интернету, на котором запущена программа просмотра веб-страниц браузер. Работа браузера заключается в обмене информацией с веб-сервером, получении необходимых пользователю документов, обработке полученной гипертекстовой информации и отображении документа на экране. Обмен информацией между веб-сервером и браузером осуществляется с использованием протокола HTTP.
6
2. Задания и рекомендации по выполнению работ Задание 1. Работа с браузером Цель работы: получить основные навыки работы с браузером Internet Explorer. Сегодня существует множество программ-браузеров, созданных различными компаниями. Наибольшее распространение и признание получили такие браузеры, как Netscape Navigator и Internet Explorer. 1. Навигация Работа с браузером начинается с того, что пользователь набирает в адресной строке (Адрес) URL того ресурса, к которому он хочет получить доступ, и нажимает клавишу Enter: 1. Введите в поле адрес браузера: www.aport.ru 2. Нажмите Enter. Браузер посылает запрос на указанный сервер Сети. По мере того, как с сервера приходят элементы указанной пользователем веб-страницы, она постепенно появляется в рабочем окне браузера. Процесс получения элементов страницы с сервера отображается в нижней "статусной" строке браузера. Содержащиеся в полученной веб-странице текстовые гиперссылки, как правило, выделяются цветом, отличным от цвета остального текста документа, и подчеркиваются. Ссылки, указывающие на ресурсы, которые пользователь еще не просматривал, и ссылки на уже посещенные ресурсы обычно имеют разный цвет. Изображения также могут функционировать как гиперссылки. Независимо от того, текстовая ссылка или графическая, если навести на нее курсор мыши, его форма изменится. Одновременно в статусной строке браузера появится адрес, на который указывает ссылка. При нажатии на гиперссылку браузер открывает в рабочем окне ресурс, на который она указывает, при этом предыдущий ресурс из него выгружается. Браузер ведет список просматриваемых страниц и пользователь при необходимости может вернутся назад по цепочке просмотренных страниц. Для этого нужно щелкнуть мышкой на кнопке "Назад" в меню браузера, - и он вернется к странице, которую вы просматривали до того, как открыли текущий документ. Каждый раз, когда вы будете нажимать на эту кнопку, браузер будет возвращаться на один документ назад в списке посещенных документов. Если вдруг вы вернулись слишком далеко назад, воспользуйтесь кнопкой "Вперед" меню браузера. Она поможет вам переместиться вперед по списку документов. Кнопка "Остановить" остановит загрузку документа. Кнопка "Обновить" дает возможность перезагрузить текущий документ с сервера.
7 Браузер в своем окне может показать лишь один документ: для показа другого документа он выгружает предыдущий. Гораздо удобнее одновременно работать в нескольких окнах браузера. Открытие нового окна осуществляется с помощью меню: Файл – Создать – Окно (или комбинацией клавиш Ctrl+N). 2. Работа с документом Браузер позволяет производить над документом набор стандартных операций. Загруженную в него веб-страницу можно распечатать (это делается с помощью кнопки «Печать» или из меню: Файл – Печать…), сохранить на диск (меню: Файл – Сохранить как…). Можно найти интересующий фрагмент текста в загруженной странице. Для этого используйте меню: Правка – Найти на этой странице…. А если интересует, как выглядит данный документ в исходном гипертексте, которых обработал браузер, то необходимо выбрать в меню: Вид – В виде HTML. Когда в процессе работы в Интернете пользователь находит особенно интересную для него страницу, он использует предусмотренную в браузерах возможность устанавливать закладки. Это делается через меню: Избранное – Добавить в избранное. После этого новая закладка появляется в списке закладок, который можно просмотреть, нажав кнопку «Избранное» на панели браузера или через меню Избранное. Существующие закладки можно удалять, изменять, организовывать в папки с помощью меню: Избранное – Упорядочить избранное. 3. Поиск информации в Интернете Для решения проблемы поиска нужной информации в Интернете существует отдельный вид сетевого сервиса. Речь идет о поисковых серверах, или поисковых машинах. Поисковые серверы достаточно многочисленны и разнообразны. Принято различать поисковые индексы и каталоги. Серверы-индексы работают следующим образом: регулярно прочитывают содержание большинства веб-страниц Сети ("индексируют" их), и помещают их полностью или частично в общую базу данных. Пользователи поискового сервера имеют возможность осуществлять поиск по этой базе данных, используя ключевые слова, относящиеся к интересующей их теме. Выдача результатов поиска обычно состоит из выдержек рекомендуемых вниманию пользователя страниц и их адресов (URL), оформленных в виде гиперссылок. Работать с поисковыми серверами этого типа удобно в том случае, если имеется четкое представление о предмете поиска. Серверы-каталоги по сути дела представляют собой многоуровневую классификацию ссылок, построенную по принципу "от общего к частному". Иногда ссылки сопровождаются кратким описанием ресурса. Как правило, возможен поиск в названиях рубрик (категориях) и описаниях ресурсов по ключевым словам. Каталогами пользуются тогда, когда не вполне четко знают, что именно ищут. Переходя от самых общих категорий к более частным, можно определить, с каким именно ресурсом Сети следует ознакомиться.
8 4. Работа с поисковыми серверами Работа с поисковыми серверами состоит в следующем. В адресной строке браузера набираете его адрес, в строке запроса набираете на нужном языке ключевые слова или фразу, соответствующие ресурсу или ресурсам Сети, которые вы хотите найти. Затем нажимаете мышью на кнопку "Поиск" и в рабочее окно браузера загружается первая страница с результатами поиска. Обычно поисковый сервер выдает результаты поиска небольшими порциями, например, по 10 на одну страницу выдачи. Поэтому часто они занимают больше одной страницы. Тогда под списком рекомендуемых ссылок будет находиться ссылка, предлагающая перейти к следующей "порции" результатов поиска. Часто приходится просмотреть несколько ресурсов, прежде чем обнаруживается подходящий. Как правило, пользователь просматривает их в новых окнах браузера, не закрывая окно браузера с результатами поиска. Иногда поиск и просмотр найденных ресурсов ведется в одном и том же окне браузера. 5. Формирование запросов С первого раза удачно задать вопрос поисковому серверу получается не всегда. Если запрос короткий и в нем присутствуют только часто употребляемые слова, может быть найдено очень много документов, сотни тысяч и миллионы. Наоборот, если запрос окажется слишком детализированным или в нем будут использованы очень редкие слова, вы увидите сообщение о том, что ресурсов, отвечающих вашему запросу, в базе сервера не найдено. 1. Введите в поле ключевых слов поисковой машины Апорт: Технический университет 2. Законспектируйте количество найденных страниц. Постепенное сужение или расширение фокуса поиска через увеличение или уменьшение списка ключевых слов, замена неудачных поисковых терминов на более удачные помогут улучшить результаты поиска. Ключевые слова, составляющие поисковый запрос, обычно просто разделяются пробелами. Необходимо помнить, что различные поисковые сервера по-разному интерпретируют это. Некоторые из них отбирают по такому запросу только документы, содержащие все ключевые слова, то есть воспринимают пробел в запросе как логическую связку "и". Некоторые интерпретируют пробел как логическое "или" и ищут документы, содержащие хотя бы одно из ключевых слов. При формировании поискового запроса большинство серверов позволяют в явном виде указать логические связки, объединяющие ключевые слова, и задать некоторые другие параметры поиска. Логические связки обычно обозначаются с помощью английских слов "AND", "OR", "NOT". На разных поисковых серверах при формировании расширенного поискового запроса используется разный синтаксис – так называемый язык запросов. С помощью
9 языка запроса вы можете указать, какие слова обязательно должны встретиться в документе, каких быть не должно, какие желательны. 3. Сформируйте более точный исчерпывающую информацию техническом университете.
запрос, позволяющий найти о Тверском государственном
Как правило, современные поисковые машины используют при поиске все возможные словоформы использованных слов. То есть, независимо от того, в какой форме вы употребили слово в запросе, поиск учитывает все его формы по правилам русского языка: например, если задан запрос 'идти', то в результате поиска будут найдены ссылки на документы, содержащие слова 'идти', 'идет', 'шел', 'шла' и т.д. Обычно на титульной странице поискового сервера присутствует ссылка "Помощь" (англ. "Help"), обратившись по которой пользователь может ознакомится с правилами поиска и языком запросов, используемых на данном сервере. Еще один очень важный момент - это выбор подходящего для ваших задач поискового сервера. Если вы ищете какой-либо определенный файл, то лучше воспользоваться специализированным поисковым сервером, который индексирует не веб-страницы, а файловые архивы в Интернете. Примимером таких поисковых серверов может служить FTP Search (http://ftpsearch.lycos.com), а для поиска файлов по российским архивам лучше воспользоваться российским аналогом - http://www.filesearch.ru. Для поиска программного обеспечения используют архивы программного обеспечения, такие как http://www.tucows.com/, http://www.freeware.ru. Если веб-страница, которую вы ищете, расположена в русской части Сети, возможно, стоит воспользоваться русскими поисковыми серверами. Они лучше работают с русскоязычными поисковыми запросами, снабжены интерфейсом на русском языке. В табл. приведен список некоторых наиболее известных поисковых серверов общего назначения. Все эти сервера в настоящее время предлагают и полнотекстовый поиск, и поиск по категориям, сочетая в себе, таким образом, достоинства индексирующего сервера и сервера-каталога. Ниже приведен список наиболее популярных поисковых серверов общего назначения. Русскоязычные http://www.aport.ru http://www.google.com http://www.list.ru http://www.rambler.ru http://www.ru http://www.yandex.ru
Англоязычные http://www.altavista. com http://www.yahoo.com
Задание: используя различные поисковые машины найти информацию о праздниках, отмечаемых в данный день.
10
Задание 2. Основы разработки HTML-страниц Цель работы: Усвоить, что из себя представляет разработка HTML-страниц. Научиться создавать простую HTML-страницу. HTML (HyperText Markup Language) – это язык, который используется для построения страниц. При этом используется система так называемых "тэгов" (tags), с помощью которых производится форматирование текста страницы, организация ссылок, работа с графикой и т.д. Тэг представляет собой специальное слово или букву, заключенные в угловые скобки "<" и ">". Вот несколько примеров тэгов: Тэг
Назначение Делает текст жирным Делает текст курсивом Определяет абзац Помещает изображение на Web-страницу
Большое количество элементов HTML имеют два тэга: открывающий и закрывающий. Последний выглядит также, как и открывающий, но имеет косую черту (/) после скобки "<". Например, строка HTML: Это жирный текст. Будет отображаться как Это жирный текст. Все HTML-страницы должны иметь заголовок и тело, которые маркируются тегами
и , соответственно. И, наконец, вся страница должна быть обрамлена открывающим и закрывающим тегами . Поэтому общая структура страницы будет выглядеть так: (Внутренние тэги заголовка) (Тело страницы: текст и графика) HTML-страницы представляют собой обычные текстовые файлы с расширением имени .htm или .html. Для их создания, может быть использован любой текстовый редактор, например, notepad.exe (Блокнот) или write.exe. Используя его, создадим нашу первую страницу.
11 1. Подготовьте следующий текст и сохраните его в текстовом файле с именем, например, MyHTMLPage.htm: Моя первая страница 2. Загрузите страницу в браузер и убедитесь, что Ваш заголовок появился в верхней части окна браузера. 3. Поместите на страницу произвольный текст так, как показано в примере ниже: Моя первая страница
Мой текст первого абзаца.
Мой текст второго абзаца.
4. Загрузите страницу в браузер и убедитесь, что Ваш текст появился в окне браузера. 5. Сделайте часть текста жирным шрифтом. Например, так:
Мой текст первого абзаца.
6. Отцентрируйте абзац следующим образом:
Мой текст первого абзаца.
7. Измените цвет фона Вашей страницы на черный, а цвет текста – на белый: 8. Ваша страница должна принять следующий вид: Моя первая страница
Мой текст первого абзаца.
Мой текст второго абзаца.
9. Загрузите страницу в браузер и посмотрите, что получилось.
12
Задание 3. Использование графических изображений в HTML-страницах Цель работы: Научиться размещать графические изображения в HTMLстранице. Для размещения на HTML-странице изображения используется тэг img который имеет следующий вид: где imagepath – полное имя к файлу изображения (путь и имя). Предположим, у Вас есть файл изображения mypicture.gif, который является, например, Вашей фотографией. 1. Включите в HTML-страницу изображение: Заметим, что в этом случае файл mypicture.gif должен находиться в том же самом каталоге(папке), где находится Ваша страница MyHTMLPage.htm. 2. Загрузите страницу в браузер и посмотрите, что получилось. 3. Включите в HTML-страницу изображение, которая находится в специальном каталоге (папке) для файлов изображений. Обычно, такой каталог называется images и он является подкаталогом основного каталога, где находятся файлы страниц. Создайте такой каталог и включите в Вашу страницу следующий тэг: 4. Загрузите страницу в браузер и посмотрите, что получилось. 5. Создайте каталог images2, который находится на том же уровне, что и каталог с Вашей страницей. Включите в Вашу страницу следующий тэг: 6. Загрузите страницу в браузер и посмотрите, что получилось. 7. Измените размеры изображения, включенного в Вашу HTML-страницу: где x – ширина изображения в пикселях, а y – высота изображения (также в пикселях). 8. Сделайте рамку вокруг изображения: Заметьте, что значение атрибута border есть толщина рамки. 9. Загрузите страницу в браузер и посмотрите, что получилось.
13 10. Запомните типичные ошибки, которые совершаются при использовании изображений в HTML-страницах: a. Неверное указание пути к файлу изображения b. Отсутствие файла изображения в правильно заданном каталоге. c. Использование имен в неправильном регистре (MyPicture.GIF вместо mypicture.gif).
Задание 4. Оформление текстовой информации Цель работы: Получить основные навыки использования различных шрифтов на HTML-странице. Здесь мы рассмотрим использование тэга FONT, предложим некоторые способы для выбора шрифтов, покажем, как поступать, если компьютер, на котором Вы работаете, не имеет нужного шрифта, а также дадим ряд других советов. Тэг FONT говорит браузеру, какой шрифт следует использовать для показа текста, включая цвет текста и размер шрифта. Базисный синтаксис тэга FONT следующий: После этого тэга помещается текст, к которому должны быть применены характеристики шрифта. Текст должен завершиться закрывающим тэгом . Атрибут size имеет значение в диапазоне от 1 до 7 (значение по умолчанию - 3). Атрибут face дает возможность специфицировать название шрифта, например "Times New Roman" или "Helvetica". Вы можете специфицировать здесь альтернативные шрифты, разделяя их запятыми. Это делается для случая, когда некоторые шрифты отсутствуют на компьютере. Вы также можете предложить браузеру использовать шрифты типа serif (такой, как Times) или типа nonserif (такой, как Arial), в случае, если невозможно использовать ни один из специфицированных Вами шрифтов. Для этого используются ключевые слова serif и nonserif. Атрибут color позволяет установить цвет текста. Например, color="0000FF" определяет синий цвет текста. 1. Поместите на HTML-страницу следующий код: Это пример № 1 Это пример № 1 Это пример № 1
14 2. Загрузите страницу в браузер и посмотрите, что получилось. 3. Как правило, шрифты типа serif используются для текстов, а шрифты типа nonserif используются для заголовков. Однако, если размер шрифта небольшой тексты serif могут оказаться неразборчивыми. Поэтому старайтесь не использовать минимальные размеры шрифтов. Для упражнения поместите на страницу текст с разными размерами шрифта serif и оцените возможность их легкого прочтения. 4. Иногда для заглавных букв используют размер шрифта, отличный от размера шрифта для остального текста. Поместите на страницу следующую конструкцию и посмотрите в браузере, что получилось: Добро пожаловать на мою страницу! 5. Для заголовков часто используют специальные тэги заголовков:
,
, …
. Используйте следующие примеры для отображения заголовков:
Заголовок 1
Заголовок 2
Заголовок 6
Задание 5. Работа со списками Цель работы: Изучить основные приемы работы с различными видами списков. Имеется три основных типа списков, которые можно использовать на HTMLстранице: Неупорядоченный список имеет следующий вид: • • •
Яблоки зеленые Бананы желтые Апельсины оранжевые
Упорядоченный список выглядит так: 1. Запустите программу. 2. Введите имя файла. 3. Нажмите кнопку ОК. А в списке определений каждый элемент имеет детальное описание. Например: Париж, Франция Столица Франции. Наиболее известные достопримечательности – Эйфелева башня и Собор Парижской богоматери.
15 Москва, Россия Столица России. Наиболее известные достопримечательности – Кремль, Большой театр и Останкинская телебашня. Лондон, Англия Столица Англии. Наиболее известные достопримечательности – Тауэр и Биг Бен. 1. Создайте неупорядоченный список. Для того, чтобы сделать это, используйте тэги
для списка в целом и тэги
для элементов списка. Например,
Яблоки зеленые
Бананы желтые
Апельсины оранжевые
2. Загрузите страницу в браузер и посмотрите, что получилось. 3. Создайте упорядоченный список. Он создается почти также, как и неупорядоченный, только для списка в целом используются тэги , а для элементов списка -
. Например:
Запустите программу.
Введите имя файла.
Нажмите кнопку ОК.
4. Загрузите страницу в браузер и посмотрите, что получилось. 5. Создайте список определений. Список сам по себе создается тэгами
. Каждый элемент списка включает в себя терм (создается тэгами ) и определение терма (создается тэгами . Список определений может быть закодирован следующим образом:
<strong>Париж, Франция
Столица Франции. Наиболее известные достопримечательности – Эйфелева башня и Собор Парижской богоматери.
<strong>Москва, Россия
Столица России. Наиболее известные достопримечательности – Кремль, Большой театр и Останкинская телебашня.
<strong>Лондон, Англия
Столица Англии. Наиболее известные достопримечательности – Тауэр и Биг Бен.
16 6. Загрузите страницу в браузер и посмотрите, что получилось. 7. Создайте вложенные списки. Например, список, который представляет собой содержание книги, может выглядеть следуюшим образом: Глава 1 Раздел Раздел Глава 2 Раздел Раздел Раздел
1.1 1.2 2.1 2.2 2.3
А это код HTML, который создает подобный список:
Глава 1
Раздел
Раздел
Глава 2
Раздел
Раздел
Раздел
1.1 1.2
2.1 2.2 2.3
8. Загрузите страницу в браузер и посмотрите, что получилось. 9. Создайте список, который объединяет списки различных типов. В следующем примере упорядоченный и неупорядоченный списки включены в список определений. Например, так: Цвета фруктов • Яблоки зеленые • Бананы желтые • Апельсины оранжевые Инструкция 1. Запустите программу. 2. Введите имя файла. 3. Нажмите кнопку ОК.
17 А это код HTML, который создает подобный список:
<strong>Types of Fruit
Яблоки зеленые
Бананы желтые
Апельсины оранжевые
<strong>Firework Instructions
Запустите программу.
Введите имя файла.
Нажмите кнопку ОК.
10. Загрузите страницу в браузер и посмотрите, что получилось.
Задание 6. Создание таблиц Цель работы: Научиться создавать таблицы в HTML. Овладеть навыками работы с различными элементами таблицы. Таблицы на HTML-страницах обычно используются для представления данных и/или для позиционирования на странице других элементов. Основные элементы таблицы следующие:
Важно, что каждая ячейка может объединять более одну строку или более, чем один столбец. Рассмотрим пример: Ячейка А Ячейка C Ячейка D
Ячейка B Ячейка E Ячейка F
18 Эта таблица имеет 2 столбца, 4 строки и 6 ячеек. При этом, Ячейка C включает в себя два столбца одной строки, а Ячейка D включает в себя две строки одного столбца. Остальные ячейки занимают один столбец одной строки. Основные тэги таблицы – это
и
. Они используются для определения начала и конца таблицы. Синтаксис этих тэгов следующий:
...
Атрибут border определяет ширину рамки таблицы в пикселях, рамка обрамляет каждую ячейку. Если рамка не нужна, то поставьте border="0". Атрибут cellpadding определяет расстояние (в пикселях) между содержимым ячейки и границей ячейки.. Атрибут cellspacing определяет расстояние (в пикселях) между соседними ячейками. Атрибут width может определять горизонтальный размер таблицы (в пикселях) при ее размещении на странице. Однако, для динамического изменения ширины таблицы в зависимости от изменения ширины окна браузера, можно указывать ширину таблицы в процентах от ширины окна браузера. Например, width="50%". Каждая строка таблицы должна быть определена тэгами
и
, которые размешенвы между
и
. А внутри
и
должны быть помещены тэги
и
для определения ячеек в строке. Синтаксис тэга
следующий:
<содержимое ячейки>
Если ячейка объединяет несколько строк, то следует использовать
, где n - это количество объединяемых строк. Если ячейка объединяет несколько столбцов, то следует использовать
, где n - это количество объединяемых столбцов. Заметим, что объединение ячеек происходит вниз и вправо от той ячейки, для которой мы указали атрибуты rowspan и colspan. Для каждой ячейки можно специфицировать ширину width в пикселях или процентах (аналогично ширине таблицы). Только проценты будут определять часть ширины таблицы, а не окна браузера. Атрибуты align и valign определяют правила горизонтального и вертикального позиционирования содержимого ячейки. По умолчанию, позиция текста или изображения внутри ячейки принимается: по
19 горизонтали – левая сторона, по вертикали - середина. Поэтому, если Вы хотите, чтобы Ваш текст был размещен, выравненным по правой стороне ячейки, укажите align="right". А если Вы хотите, чтобы текст был прижат к верхней стороне ячейки, укажите valign="bottom". Атрибут bgcolor позволяет определить цвет фона ячейки. 1. Постройте на своей HTML-странице следующую таблицу:
A
B
C
D
E
F
2. Загрузите страницу в браузер. Вы должны увидеть приблизительно следующую таблицу: А
B
С D
Е F
3. Измените ширину таблицы, указав значение атрибута width в пикселях в тэге
. 4. Измените ширину ячейки А, указав значение атрибута width в пикселях в соответствующем тэге
. 5. Измените ширину ячейки А, указав значение атрибута width в процентах в соответствующем тэге
. 6. Измените значение атрибута border, указав border="3". 7. Измените значение атрибута cellpadding, указав cellpadding ="3". 8. Измените значение атрибута cellspacing, указав cellspacing ="20". 9. После каждого изменения загружайте страницу в браузер и обращайте внимание на изменения.
20 10. Поместите в ячейку C еще одну таблицу. Например, так: ...
С1
С2
С3
С4
... 11. Загрузите страницу в браузер и посмотрите, что получилось. 12. Создайте на своей отображения данных:
HTML-странице
следующую
таблицу
для
Объем продаж товаров (млн.руб.) 2000 1.6
2001 2.3
2002 3.2
2003 4.6
13. Позиционируйте с помощью таблицы на своей странице текст и изображение следующим образом: <текст над изображением> <текст слева от изображения>
<изображение>
<текст справа от изображения>
<текст под изображением> 14. Создайте таблицу и раскрасьте некоторые ячейки следующими образом: <синий текст, желтый фон> <белый текст, синий фон>
<черный текст, голубой фон>
21
Задание 7. Построение Web-форм Цель работы: Научиться конструировать и обрабатывать Web-формы, а также применять различные типы элементов форм: поля для ввода данных, кнопки и т.п. Формы позволяют сделать сайт интерактивным – организовать Ваше взаимодействие с пользователями (отсылку электронной почты, голосование, навигацию между страницами и т.п.). Все формы в HTML создаются с помощью тэгов Атрибут method указывает каким образом информацию из полей формы посылать на сервер. Значения этого атрибута следующие: Get
Посылает данные формы, как часть URL (например, [email protected]). Такой тип пересылки эффективен для небольших объемов данных.
Post
Посылает данные формы, как поток данных HTTP. Рекомендуется для большинства типов форм. Позволяет переслать большие объемы данных.
Атрибут action указывает на обработчик формы на сервере. Например, http://www.yoursite.ru/cgi-bin/feedback.cgi or http://www.yoursite.ru/poll.asp. Поля формы представляют собой такие элементы, как текстовые поля для водда данный, кнопки, выпадающие списки и т.п. Каждое поле имеет имя (атрибут name) и значение (атрибут value). Имя используется для идентификации поля, а значение вводится пользователем. 1. Поля для ввода текстовых данный создаются с помощью следующего тэга: Атрибут size указывает ширину поля в символах. Атрибут maxlength позволяет ограницить количество вводимых символов. Создайте текстовае поле: Адрес e-mail:
22 2. Поля-"флажки" имеют только два значения (включен и выключен). Формат тэга для создания такого поля следующий: Атрибут checked (если указан) определяет, что поле-"флажок" включено. Создайте такое поле: Хотите ли Вы быть включенным в список рассылки? Да 3. Поля-переключатели похожи на предыдущий тип поля формы. Однако, переключатели всегда используется в группе и включен может быть только один переключатель из группы. Для создания переключателя используется следующий тэг: Значение атрибута name для всех переключателей в группе должно быть одинаковым. Создайте группу полей-переключателей: Какой Ваш любимый цвет? Красный Оранжевый Зелёный 4. Поля-списки позволяют выбирать один или более элементов. Они имеют следующий формат: <select name="xxxx" size="xxxx" multiple> ... Тэги <select> определяют список. Атрибут size определяет количество видимых элементов в списке. Если это значение равно 1, то список будет создан, как выпадающий. Атрибут multiple позволяет выбирать более, чем одно значение из списка. Внутри тэгов <select> размещается один или более тэгов может быть размещен текст, который буде отображен на странице.
23 4.1. Создайте выпадающий список: Какой Ваш любимый вид спорта? <select name="favourite_sport" size="1"> 4.2. Создайте список из трех видимых строк: Какой Ваш любимый вид спорта? <select name="favourite_sport" size="3"> 5. Область для ввода и просмотра большого объема текста создается следующим образом: Атрибут rows определяет высоту области в строках, а атрибут cols определяет ширину области в символах. Атрибут wrap предназначен для определения, каким образом должен обрабатываться текст на правой границе области. Его значения следующие: off
Текст не будет переноситься на следующую строку и будет послан на сервер так, как введен.
soft
Текст будет переноситься на следующую строку, но будет послан на сервер так, как введен.
hard
Текст будет переноситься на следующую строку и будет послан на сервер с символами-разделителями строк.
Создайте область для ввода текстовых данных: Введите Ваши комментарии:
24 6. Скрытые поля невидимы на странице для пользователя и создаются для того, чтобы передать на сервер какую-либо информацию. Создайте такое поле: 7. Если на странице необходимол ввести пароль, то для этого используется поле типа password. Это поле аналогично полю для ввода текстовы данных, однако вводимый текст отображается звездочками. Создайте на старнице такое поле: Пароль: 8. Поля типа file используются для пересылки файла на сервер вместе с HTML-формой. Это поле включает поле для ввода имени файла и кнопку для тог, чтобы пользователь мог сам найти нужный файл для пересылки. Создайте такое поле: Пошлите нам свою фотографию: 9. Кнопки типа submit используются для пересылки данных формы на сервер. Эти данные должны быть обработаны: компонентом сайта, указанным как значение атрибута action тэга form. Создайте на вашей странице кнопку типа submit: 10. Кнопки типа image также используются для пересылки данных формы на сервер. Однако они имеют вид не стандартных кнопок, а представляются как изображение (файл с изображением должен быть подготовлен Вами). Другое отличие заключается в том, что на сервер пересылаются координаты точки, куда пользователь "кликнул" мышью (эти координаты формируются как значения полей name.x и name.y). Тэг для данного типа кнопки имеет следующий формат: Атрибуnы src, width, height, border, align, hspace, vspace и alt имеют тот же смысл, как и соответствующие атрибуты тэга . Создайте на Вашей странице кнопку типа image, использовав доступный Вам файл с изображением:
25 11. Кнопка типа reset используется для установки первоначальных значений полей формы (то есть тех значений, которые были установлены при загрузке страницы). Создайте такую кнопку: 12. Имеется возможность создать кнопку, которая не будет делать ничего до тех пор, пока Вы не напишете какого либо кода (например, обработчик событий onClick на языке JavaScript). Создайте такую кнопку: <script language="JavaScript"> function onClick() { alert("Кнопка нажата! "); } 13. После создания каждого поля формы загружайте страницу в браузер и смотрите, что получилось.
Задание 8. Работа с фреймами Цель работы: Научиться основам построения HTML-страниц с фреймами, в том числе созданию фреймов и наборов фреймов, организации связи между фреймами. Фреймы – это области окна браузера, в которые одновременно могут быть загружены разные страницы. Например, можно создать один фрейм для меню сайта, а другой фрейм будет использоваться для отображения информации, соответствующей каждому из пунктов меню. Два вида тэгов используются для создания фреймов: Текст, размещенный внутри указанных браузерами, поддерживающими фреймы.
тэгов,
будет
игнорироваться
1. Создайте набор фреймов, состоящий из меню в левой части экрана и фрейма для показа содержательных страниц – в правой. Например, так: Пример набора из двух фреймов
2. Загрузите страницу в браузер и посмотрите, что получилось. 3. Измените значения атрибутов тэгов
Заметим, что в этом случае файл mypicture.gif должен находиться в том же самом каталоге(папке), где находится Ваша страница MyHTMLPage.htm. 2. Загрузите страницу в браузер и посмотрите, что получилось. 3. Включите в HTML-страницу изображение, которая находится в специальном каталоге (папке) для файлов изображений. Обычно, такой каталог называется images и он является подкаталогом основного каталога, где находятся файлы страниц. Создайте такой каталог и включите в Вашу страницу следующий тэг: 
4. Загрузите страницу в браузер и посмотрите, что получилось. 5. Создайте каталог images2, который находится на том же уровне, что и каталог с Вашей страницей. Включите в Вашу страницу следующий тэг: 
6. Загрузите страницу в браузер и посмотрите, что получилось. 7. Измените размеры изображения, включенного в Вашу HTML-страницу: