§ 2. Создание web-страниц в редакторе Nvu

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

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

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

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

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

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

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

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

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

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

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

Основные действия при создании веб-страницы в Nvu

Таблица показывает последовательность работы: сначала создают документ, затем добавляют содержимое и связанные элементы, а после этого сохраняют страницу. В колонке «Что проверить» собраны вопросы для самопроверки на каждом этапе. Если обнаружена проблема, её исправляют в редакторе и снова открывают сохранённый файл в браузере.

Разбор задач

Задача 1. Создать в Nvu страницу с заголовком и коротким абзацем, сохранить её и открыть в браузере. Здесь нужно пройти весь основной цикл, а не только набрать текст: иначе нельзя проверить, правильно ли получился сохранённый документ.

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

Ответ: страница создана, сохранена и проверена в браузере. Если вид или расположение элементов отличается от ожидаемого, исправь оформление в Nvu, сохрани изменения и проверь снова.

Задача 2. Оформить страницу «Мои увлечения»: добавить заголовки, список и ссылку на выбранный сайт. Смысл задания — представить информацию в удобном порядке и связать её с подходящим внешним ресурсом.

1. Создай страницу и задай основной заголовок «Мои увлечения». Раздели содержание на части, например по видам занятий, и обозначь части заголовками.
2. Перечисли увлечения маркированным или нумерованным списком. Список лучше, чем отдельные строки с пробелами: он явно показывает, что пункты относятся друг к другу.
3. Выбери фразу, которая будет ссылкой, выдели её и введи адрес сайта, связанного с темой. Сохрани страницу и открой её в браузере.
4. Нажми на ссылку и проверь открывшийся ресурс. Если он не соответствует выбранной теме, вернись в редактор и исправь адрес.

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

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

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

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

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

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

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

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

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

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

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

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

• Nvu позволяет создавать веб-страницы с помощью визуального интерфейса.
• Содержимое страницы нужно разделять на осмысленные элементы: заголовки, абзацы и списки.
• Гиперссылка связывает страницу с другим документом или ресурсом.
• Изображение должно быть доступно по указанному в странице пути.
• После редактирования страницу нужно сохранить.
• Готовую страницу следует проверить в браузере.