§ 1. Представление о веб-конструировании

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

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

Веб-сайт — совокупность связанных веб-страниц, объединённых общей тематикой и адресом. Например, сайт школы может включать страницы о расписании, кружках и новостях. Страницы связаны ссылками, поэтому посетитель может переходить между ними. Сайт нужен, чтобы собрать информацию по теме в доступную и упорядоченную систему.

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

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

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

Отдельная веб-страница и сайт — не одно и то же: первая является документом, а второй объединяет несколько документов. Страницы связывают ссылками, поскольку пользователю нужно переходить от общего материала к подробностям и обратно. Например, с главной страницы можно открыть раздел новостей, а из него — конкретную новость. Так возникает структура, в которой посетитель не обязан искать каждый документ отдельно.

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

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

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

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

Основные составляющие веб-сайта

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

Разбор задач

Задача 1. Определите, что является отдельной веб-страницей, а что — сайтом: главная страница школьного ресурса, его разделы и ссылки между ними. Нужно различить один документ и ресурс, который объединяет несколько документов. Для этого сначала посмотрим, что можно открыть отдельно, а затем — какие части связаны общей темой.

1. Главная страница — один документ с основными сведениями и переходами.
2. Разделы, например «Новости» и «Расписание», также являются отдельными страницами, если каждый из них открывается как самостоятельный документ.
3. Главная страница, разделы и ссылки между ними вместе образуют сайт, поскольку составляют связанную систему.

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

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

1. Назначьте главную страницу: на ней разместите название кружка и краткую информацию о его работе.
2. Добавьте раздел «Расписание» и раздел «Проекты», чтобы разнести сведения о занятиях и результатах работы.
3. Запланируйте на главной ссылки на оба раздела, а на каждой странице раздела — ссылку обратно на главную.

Ответ: схема состоит из главной страницы и двух разделов — «Расписание» и «Проекты»; главная ведёт к обоим разделам, а разделы возвращают на главную. Такая структура заранее показывает, какие страницы нужны и как между ними перемещаться.

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

1. Предусмотрите элемент заголовка, чтобы обозначить тему страницы.
2. Добавьте элемент абзаца для основного текста и элемент ссылки для перехода к связанному материалу.
3. Откройте документ в браузере и проверьте, видны ли заголовок и текст, отображается ли ссылка и ведёт ли она по нужному адресу.

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

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

Считать одну страницу сайтом. Так происходит, когда слово «сайт» используют для любого открытого в браузере документа. Но отдельная страница — только один документ, а сайт объединяет связанные страницы. Проверьте себя: есть ли у ресурса несколько страниц и связи между ними? Если перед вами только один документ, называйте его веб-страницей.

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

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

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

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

Для работы с веб-сайтами полезно понимать, как устроен браузер и как переходить по ссылкам в Интернете. Это помогает представить путь от адреса или ссылки до открытого документа и не путать страницу с окном программы.

Тема опирается на представления о файлах, документах и структуре информации. Если материал можно разделить на части и связать переходами, становится проще планировать страницы и их содержание.

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

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

• Веб-страница — отдельный документ, а сайт объединяет связанные страницы.
• Ссылки обеспечивают переходы между страницами.
• HTML описывает структуру и содержание страницы.
• Браузер интерпретирует веб-документ и отображает его.
• Создание сайта начинается с планирования его назначения и структуры.
• Готовую страницу нужно проверить в браузере.