ПРАКТИЧЕСКАЯ РАБОТА № 12
Редактирование Web- документов
Цель: Понять структуру HTML-документа, научиться создавать связанные между собой отформатированные HTML-документы, содержащие таблицы и рисунки при помощи программы «Блокнот», входящей в состав Microsoft Windows.
Приобретаемые навыки и умения: Освоить приемы работы со связкой программ «Блокнот» и Microsoft Internet Explorer
Время выполнения: 2 часа.
Форма организации работы: практическая работа.
Правила по технике безопасности:
Категорически запрещается:
- Трогать разъемы соединительных кабелей;
- Прикасаться к питающим проводам и устройствам заземления; включать и выключать аппаратуру без разрешения преподавателя.
- При самопроизвольном отключении аппаратуры или появлении необычного звука немедленно сообщите об этом преподавателю.
- Недопустимо размещать на системном блоке, мониторе и периферийных устройствах посторонние предметы: книги, листы бумаги и т. п. Это приводит к постоянному или временному перекрытию вентиляционных отверстий.
- Запрещается внедрять посторонние предметы в эксплуатационные или вентиляционные отверстия компонентов компьютерной системы.
- Запрещается производить какие- либо операции, связанные с подключением или перемещением компонентов компьютерной системы без предварительного отключения питания.
Оборудование рабочего места:
- ПК.
- Методические рекомендации по выполнению практической работы.
3. Программы Блокнот и Microsoft Internet Explorer.
4. Электронный учебник по HTML.
5. Индивидуальные задания.
Краткие теоретические сведения:
Гиперссылка на другую страницу
Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (https://www.site.com/page.html). Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.
Для создания гиперссылки служит дескриптор <A>
Пример:
| HTML-код: <a href="https://on-line-teaching.com/index.html">Ссылка на главную страницу сайта</a> <a href="index.html">Ссылка на начало учебника</a> | Отображение в браузере: Ссылка на главную страницу сайта Ссылка на начало учебника |
Гиперссылка в пределах страницы
Иногда необходимо сделать гиперссылку в пределах одной страницы. Например, на этой странице это гиперссылки в начале занятия, позволяющие перейти к просмотру конкретного вопроса, и в самом низу страницы - позволяющей перейти в начало страницы.
Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга <A>. Имя должно содержать только буквы и цифры.
Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта.
Пример:
| HTML-код: <a href="#Начало страницы">Наверх страницы</a> В то место, куда надо сделать переход надо вставить: <a name="Начало страницы"></a> | Отображение в браузере: Наверх страницы |
Почтовая гиперссылка
Создавая ссылку на адрес электронной почты, вы должны указать адрес e-mail. Следует позаботиться о том, чтобы пользователю было ясно, кому он собирается отослать сообщение.
При создании почтовой гиперссылки можно указывать дополнительный адрес, по которому будет отправлена копия сообщения. Также в такой гиперссылке можно указывать тему отправляемого сообщения.
Пример:
| HTML-код: <a href="mailto:admin@on-line-teaching.com?subject=Письмо автору" title="Письмо автору с сайта www.on-line-teaching.com">admin@on-line-teaching.com</a> | Отображение в браузере: admin@on-line-teaching.com |
Открытие страниц в новом окне
При помощи атрибута TARGET можно загрузить страницу в новом окне браузера. Этот атрибут предназначен для задания наименования окна. Имя окна используется в служебных целях. Чтобы открыть страницу в новом окне надо использовать константу _blank.
Пример:
| HTML-код: <a href="index.html" target="_blank"">Ссылка на первую страницу учебника</a> | Отображение в браузере: Ссылка на первую страницу учебника |
Цвет текста гиперссылок
Атрибуты LINK, ALINK, VLINK задают цвет шрифта гиперссылок.
Атрибут LINK служит для выделения гиперссылок, которые еще не посещались пользователем.
Атрибут VLINK - уже посещенные ссылки.
Атрибут ALINK - выделяет активную гиперссылку.
Порядок перехода по гиперссылкам
Некоторые браузеры могут поддерживать функцию перехода по гиперссылкам с помощью клавиши Tab. При этом браузер по умолчанию подсвечивает гиперссылки в порядке их следования в тексте страницы. Изменить порядок перехода можно с помощью атрибута TABINDEX тэга <A>. Чтобы включить гиперссылку в перечень, описывающий новый порядок перехода, надо присвоить атрибуту TABINDEX некоторое целое положительное число в диапазоне от 1 до 32767. Чтобы исключить гиперссылку из перечня, надо присвоить атрибуту любое отрицательное число. Когда пользователь нажимает клавишу TAB, курсор перемещается к гиперссылке с наименьшим положительным значением индекса. Если нескольким гиперссылкам присвоено одинаковое значение
Задание якорей и ссылок
Хотя некоторые элементы и атрибуты языка HTML создают ссылки на другие ресурсы (например, элемент IMG, элемент FORM и т.д.), в этой главе обсуждаются ссылки и якоря, создаваемые элементами LINK и A. Элемент LINK может присутствовать только в заголовке документа. Элемент A может присутствовать только в теле документа.
Если для элемента A установлен атрибут href, этот элемент определяет исходный якорь для ссылки, которая может активизироваться пользователем для загрузки ресурса Web. Исходный якорь - это местоположение экземпляра элемента A и целевой якорь ресурса Web.
Загруженный ресурс может обрабатываться агентом пользователя различными способами: открытием нового документа HTML в том же окне агента, открытием нового документа HTML в другом окне, запуском новой программы для обработки ресурса и т.д. Поскольку элемент A имеет содержание (текст, изображения и т.д.), агенты пользователей могут генерировать это содержимое так, чтобы показать наличие ссылки (например, подчеркивая содержимое).
Порядок выполнения работы:
Задание1
1. На языке разметки текста HTML создайте страницу (см. образец). Текст для страницы скопируйте из Интернета (например, задайте в строке поиска «Как выбрать материнскую плату»). Текст статьи про выбор каждого устройства должен включать хотя бы два абзаца.
Образец:
