Практические работы к главе 6 «Коммуникационные технологии и разработка Web-сайтов»

Определения и обозначения

Веб-страница — отдельный документ в Интернете. Она может состоять из заголовков, обычного текста, списков, изображений, кнопок и гиперссылок. В браузере страницу открывают по веб-адресу или двойным щелчком по сохранённому HTML-файлу.

Веб-сайт — несколько связанных между собой веб-страниц. Главная страница знакомит посетителя с темой и помогает перейти к нужному разделу. Поэтому страницы сайта соединяют меню и другими переходами.

Гиперссылка — текст, изображение или другой элемент, щелчок по которому открывает ресурс, файл или место на той же странице. Чтобы проверить ссылку, нужно перейти по ней и убедиться, что открылась именно нужная страница. Если браузер сообщает об ошибке, проверяют адрес и расположение файла.

HTML-документ — текстовый файл, в котором специальная разметка задаёт структуру веб-страницы. Браузер читает эту разметку и показывает заголовки, абзацы и другие элементы в привычном виде. Изменение HTML-файла меняет отображение страницы после повторного открытия или обновления.

Как это устроено

Сначала определяют цель практической работы: например, создать страницу о школьном проекте или собрать небольшой тематический сайт. От цели зависят содержание, количество страниц и нужные элементы. Затем подготавливают текст, изображения, адреса полезных ресурсов и файлы проекта, чтобы во время создания не тратить время на случайный поиск материалов.

Страницу создают в текстовом или специальном HTML-редакторе. В документе задают основную структуру: служебную часть, заголовок страницы и видимую область с содержанием. Разметка отделяет смысловые элементы друг от друга, поэтому браузер понимает, какой текст является заголовком, а какой — абзацем; оформление при этом можно изменять отдельно.

Изображение добавляют как ссылку на файл картинки, а гиперссылку — как адрес места назначения. Имя файла и его расширение записывают точно: пробел, лишний символ или другая буква могут нарушить обращение к файлу. Перед добавлением материалов удобно собрать их в папке проекта и дать им короткие понятные имена.

Локальная ссылка ведёт к файлу внутри проекта, поэтому в ней указывают относительный путь, например раздел.html или images/photo.jpg. Внешняя ссылка обращается к ресурсу в Интернете и обычно содержит полный веб-адрес. Эти способы различаются потому, что браузер ищет локальный файл среди файлов проекта, а внешний ресурс — через сетевое соединение.

После редактирования проект сохраняют в нужной папке и открывают HTML-документ в браузере. Проверяют заголовки, текст, изображения, переходы на другие страницы и открытие внешнего ресурса. Если обнаружена ошибка, исправляют код или расположение файла, снова сохраняют документ и обновляют страницу.

Элементы веб-страницы и их проверка

Таблица помогает пройти практическую работу по порядку: сначала проверить структуру, затем содержимое и связи между файлами. В последнем столбце указано действие, которое подтверждает правильность результата.

Разбор задач

Задача 1. Создать простую веб-страницу

Условие: нужно создать страницу с заголовком и двумя абзацами текста, сохранить её и открыть в браузере. Важно убедиться, что браузер показывает именно сохранённый документ. При этом содержание должно быть отделено от структуры HTML.

1. Создайте папку проекта и текстовый файл с расширением html.
2. Запишите в документ базовую HTML-структуру, добавьте название страницы, один заголовок и два абзаца.
3. Сохраните файл без изменения расширения и откройте его браузером.
4. Сравните отображённый текст с исходным и при необходимости исправьте разметку.

Ответ: страница готова, если в браузере видны заданный заголовок и два отдельных абзаца. Повторное открытие файла должно показывать сохранённую версию, а не случайный документ из другой папки.

Задача 2. Добавить изображение и ссылку на страницу проекта

Условие: к готовой странице нужно добавить изображение из папки проекта и переход на другую страницу этого же проекта. Изображение и второй HTML-файл должны действительно существовать. Нужно выбрать такие пути, чтобы они работали независимо от случайного расположения окна браузера.

1. Поместите картинку и вторую страницу в заранее выбранные папки проекта.
2. Запишите точное имя изображения с расширением и укажите его относительный путь.
3. Добавьте ссылку на имя второй HTML-страницы, если оба файла лежат рядом, или на путь к ней в подпапке.
4. Сохраните документ, откройте его и отдельно проверьте появление картинки и переход по ссылке.

Ответ: оба элемента работают, если изображение видно, а щелчок по ссылке открывает нужную страницу. Если один элемент не работает, сначала сверяют написание имени и расположение файла.

Задача 3. Собрать мини-сайт

Условие: требуется сделать несколько тематических страниц, главную страницу, переходы между разделами и внешнюю ссылку на источник. Сначала нужно продумать структуру, иначе страницы могут оказаться несвязанными. Главная страница должна давать понятный маршрут просмотра.

1. Определите тему, назовите страницы и решите, какие материалы будут на каждой из них.
2. Создайте главную страницу и разместите на ней ссылки на разделы.
3. На страницах разделов добавьте обратные переходы на главную и при необходимости ссылки на соседние разделы.
4. Добавьте полный адрес внешнего источника, затем проверьте все переходы по очереди.

Ответ: мини-сайт собран, когда из главной страницы можно попасть в каждый раздел, а обратно — вернуться без ручного поиска файла. Внешняя ссылка должна открывать выбранный интернет-ресурс, а не локальный документ.

Типичные ошибки

Файл сохраняют с неверным расширением или не в папке проекта. Это происходит, когда редактор автоматически добавляет расширение либо пользователь путает несколько похожих папок. Проверьте имя файла, его тип и откройте документ именно из папки проекта.

В ссылке или адресе изображения указывают неправильное имя или путь. Ошибку легко допустить из-за одной буквы, регистра, пропущенного расширения или лишней папки. Сверьте запись в HTML с фактическим именем файла и попробуйте открыть его из той же папки.

Забывают закрыть тег или нарушают порядок элементов разметки. Обычно это случается при быстром копировании и изменении фрагментов кода. Проверьте парные теги и снова откройте страницу после исправления.

Проверяют только внешний вид, но не переходы. Страница может выглядеть правильно, хотя ссылка ведёт в никуда или на неверный ресурс. Щёлкните по каждой ссылке и отдельно проверьте отображение каждой картинки.

Связь с другими темами

Для практической работы нужны базовые навыки работы с файлами и папками: создание, переименование, сохранение и запуск программ. Без этого трудно правильно организовать проект и найти нужный документ.

Тема связана с поиском информации в Интернете, оценкой её полезности и пониманием назначения браузера. Адрес веб-ресурса помогает отличить внешний источник от файла, который хранится на компьютере.

Полученные навыки пригодятся при создании сайтов, публикации материалов в сети и проверке интернет-источников. Умение видеть структуру проекта помогает не только писать страницы, но и поддерживать их в порядке.

Что запомнить

• Веб-сайт состоит из связанных веб-страниц.
• HTML-разметка задаёт структуру веб-страницы.
• Файлы проекта и ссылки на них нужно организовывать согласованно.
• Локальные и внешние ссылки требуют разных адресов.
• Страницу следует проверять в браузере после сохранения.
• Проверять нужно не только оформление, но и работу изображений и ссылок.