CОЗДАНИЕ САЙТОВ С ТАБЛИЦАМИ, ИЗОБРАЖЕНИЯМИ И ССЫЛКАМИ НА HTML Гипертекст – это нелинейный текст, содержащий внутри себя ссылки-переходы. Гипертекстовые ссылки среди других элементов текста выделяются цветом и подчеркиванием; мышиный курсор на ссылке меняет свою форму и превращается в указующий перст; для перехода по ссылке необходимо щелкнуть по ней мышкой; для возврата из ссылки необходимо использовать навигационную кнопку браузера "Назад" ("Back"). Переход внутри одной веб-страницы Для задания гипертекстового перехода внутри документа используют две команды <A>. Первая команда с атрибутом href является источником перехода, вторая с атрибутом name – приемником. Общий вид программы ... <A href=#метка>текст</A> ... ... <A name=метка></A> ... Комментарий Задание перехода по метке (метка должна быть уникальной). На экран выводится ссылка: текст. Метка. Сюда браузер приходит по ссылке. На экране ничего не отображается. Переход к другому документу (сайту) Для того, чтобы браузер загрузил в свое окно новый HTML-документ, нужно записать в программе ссылку при помощи команды <A> с атрибутом href=имя_файла. Чтобы перейти по ссылке на другой сайт необходимо в атрибуте href вставить полный адрес сайта. Общий вид программы ... <A href=имя_файла.расширение>текст</A> ... Комментарий Выполнить файл "имя_файла.расширение". На экран выводится ссылка: текст. При щелчке пользователя на ссылке браузер строит на экране документ по программе, заданной в файле "имя_файла". Создание таблиц Практические задания Задание 1. Внешние и внутренние гиперссылки. Создать несколько веб-страниц (цветовое оформление на свой вкус, ссылки должны быть видны): Страница 1 содержит список с загадками (переход при нажатии к конкретной загадке), сами загадки (3 штуки) и ссылки на ответ (страницы 2-4): Страницы 2-4 содержат ответ на каждую загадку, изображение с объектом загадки. Дополните страницы с ответами возможностью вернуться на главную по ссылке. Задание 2. Создать таблицу – фото-галерею 4х2 с фотографиями Л. Н. Толстого, так чтобы сами уменьшенные фотографии служили ссылками на более крупные изображения. Для того, чтобы создать таблицу, будем использовать следующую разметку (границы у таблицы не видны: Для того, чтобы вставить изображения, в созданную таблицу преобразуйте ее к следующему виду: Для того, чтобы сделать картинку гиперссылкой, используйте следующее преобразование. <td><a href=11.jpg> <img src=11.jpg width="100"> </a> </td> Проделайте подобные преобразования со всеми строками таблицы. Задание 3. Создание таблиц с объединёнными ячейками. Создайте следующую таблицу (граница в 1 пиксель) Сделайте несколько копий таблицы внутри одного html-документа. С помощью команд для объединения ячеек преобразуйте скопированные таблицы по образцу (после добавления каждой команды проверяйте ячейки, которые «выпали» из таблицы). Задание 4. Создайте графическую карту для стихов по временам года с переходом к этой тематике. Сайт 1 Сайт 3 Сайт 2 Сайт 4 Для этого создайте файл с картой, добавляя необходимые ссылки: <area href="имя файла-ссылки" shape="circle" coords="х0,y0,R"> Для того, чтобы узнать необходимые координаты, откройте файл с картинкой в графическом редакторе Paint. Радиус области вычислите по формуле R=x1-x0. Файлы со стихами сделайте самостоятельно или воспользуйтесь существующими сайтами. Задание для самостоятельной работы Создайте графическую карту с изображением компьютера и переходам к тексту по каждому из устройств. Создайте документ-меню, в котором в качестве гиперссылок будут следующие разделы: устройства ввода, устройства вывода, устройства обработки, устройства хранения и передачи информации. От каждой гиперссылки обеспечьте переход к соответствующей фото галерее (таблиц не менее, чем 3х3).
