 |
Порядок выполнения задания №1
|
|
|
|
Практическое задание № 42
Тема: Вставка гиперссылок и таблиц на Web-страницу
Цель: изучение информационной технологии вставки гиперссылок и таблиц на Web-страницу.
Оборудование и материалы: компьютер, программа Блокнот, браузер Internet Explorer, практическое задание.
Теоретические сведения к практическому заданию
Таблицу формируют несколько различных тэгов. Таблица задается контейнером <TABLE></TABLE>, внутри которого содержится описание структуры таблицы и ее содержания.
Любая таблица состоит из строк, которые задаются контейнером <TR></TR> (Table Row), в который помещается описание ячеек.
Формат ячеек и их содержание помещается в контейнер <TD></TD> (Table Data), а заголовки ячеек в контейнер <TH></TH> (Table Header).
Толщина разделительных линий в таблице задается с помощью атрибута BORDER, а для выравнивания информации внутри ячейки по горизонтали применяют атрибут ALIGN.
Первая титульная страница должна предоставлять посетителю Web-сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы сайта.
Для создания гиперсвязей между титульной страницей и другими страницами сайта, создают заготовки Web-страниц. Такие «пустые» страницы должны иметь заголовок, и впоследствии наполнены содержанием. Все создаваемые страницы необходимо сохранить в виде файлов в папке сайта.
Каждая страница будет содержать следующий HTML-код:
<HTML>
<HEAD>
<Т1ТLЕ> Заголовок страницы </ТIТLЕ>
</HEAD>
<BODY>
........(основное содержание)
</BODY>
</HTML>
Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки — это то, что мы видим на Web-странице (текст или рисунок), обычно выделенный синим цветом и подчеркиванием. Активизация гиперссылки вызывает переход на другую страницу.
|
|
|
Адресная часть гиперссылки представляет собой URL-адрес документа, на который указывает ссылка. URL-адрес может быть абсолютным и относительным. Абсолютный URL-адрес документа полностью определяет компьютер, каталог и файл, в котором располагается документ.
Абсолютный адрес документа, находящегося на локальном компьютере, будет включать в себя путь к файлу и имя файла, например:
С: /Web-caйт/filename. htm
Абсолютный адрес документа, находящегося на удаленном компьютере в Интернете, будет включать имя сервера Интернета, путь к файлу и имя файла, например:
http: //www. host. ru/Web-caйт/filename. htm
Относительный URL-адрес указывает на местоположение документа относительно того, в котором находится указатель ссылки. При разработке сайта рекомендуется входящие в него Web-страницы связывать относительными ссылками. Это позволит не изменять адресную часть ссылок при перемещении Web-сайта в другой каталог локального компьютера или при его публикации в Интернете.
Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает переход на Web-страницу, указанную в адресной части ссылки.
На титульной странице размещают тексты гиперссылок на каждую страницу сайта. Для представления гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.
Принято размещать гиперссылки в нижней части страницы, и размещать их под введенным текстом в новом абзаце в одну строку разделенными несколькими пробелами. Такое размещение гиперссылок часто называют панелью навигации.
Панель навигации можно представить, как абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами (§nbsp):
<Р ALIGH= "center">
[Программы] §nbsp [Словарь] §nbsp
|
|
|
[Комплектующие] §nbsp [Анкета]
Для каждой гиперссылки определяют адрес перехода. Для этого используется контейнер гиперссылки <А></А> с атрибутом HREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете. Контейнер должен содержать указатель гиперссылки:
<А НRЕF="URL">Указатель гиперссылки</А>
Полезно на титульной странице сайта создать ссылку на адрес электронной почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить URL-адрес электронной почты и вставить ее в контейнер <ADDRESS></ADDRESS>, который задает стиль абзаца, принятый для указания адреса.
По щелчку мыши по ссылке на адрес электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке «Кому» будет указан заданный в ссылке адрес.
A HREF="mailto:your_name@freemail.ru">Создать письмо</A>
В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае указатель ссылки задается с помощью тэга <IMG>.
Для снижения времени загрузки страницы на страницу помещают маленький рисунок, а при щелчке мышью на ней вызывается ее крупная фотография. Посетитель увидит уменьшенные копии рисунков, а при желании, сможет загрузить полномасштабное изображение.
Если создаваемая страница очень большая, то в ее тексте можно расставить якоря (иначе их еще называют метки или закладки). Они помечают смысловые разделы и помогают быстро перемещаться по документу.
Содержание задания
Задание 1
Создать таблицу и внести в нее данные о башнях Кремля:
Порядок выполнения задания №1
1. Запустите браузер и откройте файл index.htm [Файл - Открыть].
2. Активизируйте Блокнот с открытой в нем редактируемой Web-страницей[Вид – Просмотр HTMLкода]..
3. В контейнер <BODY> </BODY> введите
<TABLE border="1">
<TR>
<TH>Башня</TH
<TH>Год сооружения</TH>
<TH>Архитектор</TH>
<TH>Высота</TH>
</TR>
<TR>
<TD>Спасская</TD>
<TD align="center">1491</TD>
<TD align="center">П.Соларио</TD>
<TD align="center">71</TD>
</TR>
……
<TR>
<TD>Беклемишевская</TD>
<TD align="center">1487</TD>
<TD align="center">М.Руффо</TD>
<TD align="center">46</TD>
|
|
|
</TR>
</TABLE>
4. Сохраните новый вариант страницы, выполнив команду меню [Файл - Сохранить].
5. Активизируйте браузер с открытым в нем предыдущим вариантом страницы. Щелкните по кнопке Обновить. В окне браузера отобразится обновленная Wed-страница.
6. Проверьте правильность создания таблицы.
Задание №2
Выполните вставку гиперссылки, которая вызывает крупную фотографию при щелчке мышью по маленькому рисунку.
|
|
|
