ЛР №6 Работа с каскадными таблицами стилей CSS
.docxФЕДЕРАЛЬНОЕ АГЕНСТВО СВЯЗИ
Федеральное государственное образовательное бюджетное учреждение
высшего профессионального образования
«Санкт-Петербургский государственный университет телекоммуникаций
им. проф. М.А. Бонч-Бруевича»
Кафедра Автоматизации предприятий связи
Дисциплина «Основы интернет технологий»
ОТЧЁТ
по лабораторной работе №6
«Работа с каскадными таблицами стилей CSS»
Выполнил: студент группы ИСТ-931, Гетманченко Полина Алексеевна
«29» ноября 2020г. _________/П.А.Гетманченко/
Принял: к.т.н. доцент. Любимов А.Г.
«29» ноября 2020 г. _________/А.Г.Любимов/
Санкт-Петербург, 2020
Содержание
Цель работы 3
Индивидуальное задание 3
Шаг 1: 3
Шаг 2: 4
Шаг 3: 6
Вывод 9
Электронные источники 9
Цель работы
Изучить средства оформления HTML-документов с использованием каскадных таблиц стилей CSS.
Индивидуальное задание
Шаг 1:
Создать два файла page1s.htm и page2s.htm. со структурой веб-страниц (теги <html>, <head> и <body>).
С помощью заголовочных тегов озаглавить эти страницы.
Установить на странице page1s.htm ссылку на страницу page2s.htm.
Результаты представлены на рис.1-4:
рис.1
– создание файла под названием “page1s”
со структурой веб-страницы, заголовочным
тегом и ссылку на файл под названием
“page2s.htm”
рис.2 – создание файла под названием “page2s” со структурой веб-страницы и заголовочным тегом
рис.3 – страница сайта, созданная кодом рис.1, и имеющая относительную ссылку на файл под названием “page2s.htm”
рис.4 – страница сайта, созданная кодом рис.2
Шаг 2:
Создать абзац текста с помощью тега <p> и отформатировать его с помощью стиля styleA. Задать числовые значения margin и padding этого стиля, равными последней цифре номера зачетной книжки. Если последняя цифра 0, то значение сделать равным 10. Остальные параметры взять из примера в разделе «Теоретическая часть».
Номер зачётной книжки: 1902162. Последняя цифра – 2.
Результаты предоставлены на рис.5-8:
рис.5 – использование тега <style> в файле под названием “ page1s.htm”
рис.6 – использование тега <style> в файле под названием “ page2s.htm”
рис.7 – результат использования тега <style> для “page1s.htm”
рис.8 – результат использования тега <style> для “page2s.htm”
Шаг 3:
В файле page1s.htm создать псевдостили гиперссылок со следующими значениями (в методичке таблицы 1-3).
Результаты предоставлены на рис.9-16:
рис.9 – окончательный вид кода для “page1s.htm”
рис.10 – продолжение окончательного вида кода для “page1s.htm” (рис.9)
рис.11 – окончательный вид кода для “page2s.htm”
рис.12 – продолжение окончательного вида кода для “page2s.htm” (рис.11)
рис.13 – итоговый результат на странице сайта, благодаря коду “page1s.htm”, так выглядит надпись до наведения курсора
рис.14 – итоговый результат на странице сайта, благодаря коду “page1s.htm”, так выглядит надпись после наведения курсора
рис.15 – итоговый результат на странице сайта, благодаря коду “page2s.htm”, так выглядит надпись до наведения курсора
рис.16 – итоговый результат на странице сайта, благодаря коду “page2s.htm”, так выглядит надпись после наведения курсора
Вывод
Удалось изучить средства оформления HTML-документов с использованием каскадных таблиц стилей CSS, понять их алгоритм и использование.
Электронные источники
htmlbook // htmlbook.ru | Для тех, кто делает сайты : 2002-2020. URL: http://htmlbook.ru/ (дата обращения: 29.11.2020).
colorscheme // Цвета HTML : 2009-2020. URL: https://colorscheme.ru/html-colors.html (дата обращения: 29.11.2020).