Практическая работа 6.3 Разработка сайта с использованием языка разметки текста НТМL

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

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

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

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

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

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

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

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

В документе выделяют корневой элемент html, внутри него — служебную часть head и видимую часть body. В head помещают сведения, которые нужны браузеру, но обычно не показываются в самой странице. Название документа задают с помощью title, чтобы оно появлялось во вкладке и помогало ориентироваться среди открытых страниц.

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

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

Основные элементы HTML-страницы

Таблицу удобно использовать как памятку при составлении документа. Сначала определяют, к какой части страницы относится элемент, а затем проверяют его назначение и способ записи. Особенно полезно отдельно контролировать служебную часть head и видимое содержимое body.

Разбор задач

Задача 1. Минимальная HTML-страница

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

Решение: сначала строим обязательную оболочку, затем помещаем название в head, а текст — в body. После сохранения открываем файл браузером, потому что именно браузер показывает результат интерпретации разметки.

1. Создать текстовый файл и сохранить его с расширением .html.
2. Записать элементы html, head и body в правильной вложенности.
3. В head добавить title, а в body — заголовок и один абзац.
4. Сохранить файл и открыть его браузером, проверив вкладку и текст страницы.

Ответ: получится простая веб-страница с названием во вкладке и абзацем в основной области браузера.

Задача 2. Страница о школьном мероприятии

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

Решение: сначала выделяем крупные смысловые части, затем для каждой выбираем элемент HTML. Нумерованный список подходит программе, потому что её пункты выполняются по порядку.

1. Задать в title короткое название мероприятия.
2. Разместить в body главный заголовок и подзаголовки разделов.
3. Описать событие отдельными абзацами, не соединяя разные мысли в один текст.
4. Записать пункты программы в нумерованный список и проверить порядок.

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

Задача 3. Многостраничный сайт о школьном проекте

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

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

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

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

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

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

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

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

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

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

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

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

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

• HTML описывает структуру содержимого веб-страницы.
• Теги записывают в угловых скобках.
• В head размещают служебную информацию, а в body — видимое содержимое страницы.
• Атрибуты дополняют тег сведениями об элементе или его настройках.
• Ссылки и изображения требуют правильного указания адреса или пути к файлу.
• Готовую страницу нужно проверить в браузере.