Лабораторные работы. Краева / Web-технологии. Отчет №1
.pdfМинистерство цифрового развития, связи и массовых коммуникаций Российской Федерации
Федеральное государственное бюджетное образовательное учреждение Высшего образования «Санкт-Петербургский государственный университет телекоммуникаций им. Проф. М. А. Бонч-Бруевича» (СПбГУТ)
Факультет Информационных технологий и программной инженерии
Кафедра Программной инженерии и вычислительной техники
Лабораторная работа №1
По дисциплине «Web-технологии»
На тему «Создание и редактирование простейшего HTML-файла»
Выполнил: Студент 3-го курса Дневного отделения Группы ИКПИ-32 Яковлев М. А. Преподаватель: Краева Е. В.
Санкт-Петербург 2025
Цель работы
Цель работы — познакомиться со структурой файла HTML, основными тэгами.
Ход выполнения
Упражнение №1 Задание начального кода:
Рисунок 1. Начальный код
Результат работы:
Рисунок 2. Получившееся окно
Упражнение №2 Код программы:
Рисунок 3. Добавление цвета фона
Результат работы:
Рисунок 4. Получившееся окно
Далее “blue” был изменён на “f2f5d0”
Рисунок 5. Изменение цвета
Результат работы:
Рисунок 6. Изменение цвета на бежевый
Упражнение №3
Была оформлена верхняя часть веб-страницы. Логотип был добавлен в область между тегами <body> и </body>.
Рисунок 7. Добавление логотипа
Результат работы:
Рисунок 8. Отображение логотипа
Для отделения заголовка от основного содержимого вставлена горизонтальная линия с заданными параметрами ширины, толщины и цвета.
Рисунок 9. Добавление полосы
Результат работы:
Рисунок 10. Перемещение изображения
В соответствии с заданием внесены изменения в разделительную линию.
Рисунок 11. Изменение разделительной линии
Результат работы:
Рисунок 12. Новая линия
Упражнение №4
Отобразим на странице следующий текст:
Рисунок 13. Текст на странице
Изменение значения параметра align на “left” и на ”right” делает текст лево- и правоориентированным.
Установим теперь атрибуты текста (цвет, размер, гарнитуру). Для этого воспользуемся тегом <font>. Также был добавлен новый абрац и проведено форматирование текста с помощью тегов <b> и </b> (жирный), <i> и</i> (курсив),
Рисунок 14. Форматирование текста
<u> и</u> (подчеркнутый).
Результат работы:
Рисунок 15. Форматирование текста
Далее создали маркированный список чудес:
Рисунок 16. Маркированный список
Результат работы:
Рисунок 17. Получившийся список
Далее реализована таблицы с достопримечательностями.
Рисунок 18. Добавление таблицы
Результат работы:
Рисунок 19. Результат