Лабораторные работы. Краева / Web-технологии. Отчет №1
.docxМинистерство цифрового развития, связи и массовых коммуникаций Российской Федерации
Федеральное государственное бюджетное образовательное учреждение Высшего образования «Санкт-Петербургский государственный университет телекоммуникаций им. Проф. М. А. Бонч-Бруевича» (СПбГУТ)
Факультет Информационных технологий и программной инженерии
Кафедра Программной инженерии и вычислительной техники
Лабораторная работа №1
По дисциплине «Web-технологии»
На тему «Создание и редактирование простейшего HTML-файла»
Выполнил:
Студент 3-го курса
Дневного отделения
Группы ИКПИ-32
Яковлев М. А.
Преподаватель:
Краева Е. В.
Санкт-Петербург
2025
Цель работы
Цель работы — познакомиться со структурой файла HTML, основными тэгами.
Ход выполнения
Упражнение №1
Рисунок
1. Начальный код
Рисунок
2. Получившееся окно
Упражнение №2
Рисунок
3. Добавление цвета фона
Рисунок
4. Получившееся окно
Рисунок
5. Изменение цвета
Рисунок
6. Изменение цвета на бежевый
Упражнение №3
Рисунок
7. Добавление логотипа
ыла
оформлена верхняя часть веб-страницы.
Логотип был добавлен в область между
тегами <body> и </body>.
Рисунок
8. Отображение логотипа
Рисунок
9. Добавление полосы
Рисунок
10. Перемещение изображения
Рисунок
11. Изменение разделительной линии
Рисунок
12. Новая линия
Упражнение №4
Рисунок
13. Текст на странице
Изменение значения параметра align на “left” и на ”right” делает текст лево- и право- ориентированным.
Рисунок
14. Форматирование текста
Рисунок
15. Форматирование текста
Рисунок
16. Маркированный список
Рисунок
17. Получившийся список
Рисунок
18. Добавление таблицы
Рисунок
19. Результат
Упражнение №5
Рисунок
20. Открытие
Упражнение №6
Рисунок
21. Добавление ссылок
Рисунок
22. Отображение гиперссылок
Упражнение №7
Рисунок
23. Нерабочие ссылки были заменены на
готовые рабочие страницы
Упражнение №8
Рисунок
24. Добавление аудио
Рисунок
25. Аудиоплеер
Упражнение №9
Рисунок
26. Форма
Рисунок
27. Форма
Заключение
По итогу выполнения данной работы, рассмотрена структура HTML-документа, а также основные теги.
Контрольные вопросы
1. Язык тегов HTML
HTML (HyperText Markup Language) — это язык разметки гипертекста, предназначенный для создания и структурирования веб-страниц.
2. Структура HTML-документов
<!DOCTYPE html> — объявление типа документа.
<html> — корневой тег всего документа.
<head> — заголовочная часть, содержащая метаданные, ссылки на стили и скрипты.
<body> — тело документа, где размещается контент страницы.
3. Характеристика форматирования абзаца и шрифта
Абзацы создаются с помощью тега <p>. Для форматирования текста существуют теги, которые влияют на внешний вид, например: <b> для жирного шрифта, <i> для курсива, <u> для подчёркивания, <font> для изменения размера, шрифта, цвет текста. Переносы строк можно делать с помощью <br>.
4. Цветовая гамма HTML-документа
Набор цветовых атрибутов, задаваемых внутри тега <body>, которые определяют цвета фона, текста на странице.
5. Относительный и абсолютный адреса
Абсолютный адрес — полный URL (например, https://example.com/page.html), указывающий точное расположение ресурса в интернете.
Относительный адрес указывает путь относительно текущего документа (например, images/pic.jpg), используется для ссылок и ресурсов внутри сайта .
6. Основные типы списков в HTML-документах
Списки могут быть трех типов:
Маркированный список <ul> — элементы с буллитами.
Нумерованный список <ol> — элементы с порядковыми номерами.
7. Основные методы создания таблиц
Таблицы создаются с помощью тега <table>. Внутри таблицы размещаются:
<tr> — строка таблицы.
<th> — заголовочная ячейка.
<td> — ячейка данных.
8. Основные теги для создания HTML-форм
Основные теги для создания форм:
<form> — контейнер формы с атрибутами action (адрес обработки), method (метод отправки).
<input> — для различных полей ввода (type может быть text, password, checkbox, radio, submit и др).
<label> — метка для элемента формы, связывает текст с полем.