Методические указания к практическим занятиям по дисциплине «Информатика». часть 4/ Валуйская Е. С. Оруджова А.Н.: учебно-методическое пособие для студ. – Воронеж: ВГППК, 2025. – С.34.

А.Н. Оруджова, Е. С. Валуйская

МЕТОДИЧЕСКИЕ УКАЗАНИЯ
К ПРАКТИЧЕСКИМ ЗАНЯТИЯМ
ПО ДИСЦИПЛИНЕ
ИНФОРМАТИКА

4 часть

Учебно-методическое пособие
для студентов специальности 44.02.01 Дошкольное образование, 44.02.02 Преподавание в начальных классах

Воронеж, 2025 год

УДК 377.5

ББК 74.5

C 62

Рецензенты:

М. В. Дорохова, заведующая отделение информационных технологий ГБПОУ СПО ВО «Воронежский государственный профессионально педагогический колледж».

Методические указания к практическим занятиям по дисциплине «Информатика» (часть 4) /Оруджова А.Н., Валуйская Е. С.: учебно-методическое пособие для студ. – Воронеж: ВГППК, 2025. – с 25с.

Учебно-методическое пособие разработано для студентов первого курса отделения Технологии и педагогических наук, выполняющих практические работы по дисциплине Информатика в соответствии с ФГОС СПО 44.02.01 и ФГОС СПО 44.02.02. Пособие содержит указания для проведения практических занятий по различным изучаемым темам, а также теоретические вопросы, задания различной степени сложности для защиты практических работ и для самоконтроля. Освоение навыков работы в различных текстовых, табличных и графических редакторах поможет будущим специалистам в их профессиональной деятельности.

Учебное пособие может использоваться для студентов первого курса других специальностей ВГППК

Библиограф: 8 назв.

Рассмотрено на заседании цикловой методической комиссии профессионального цикла специальности компьютерные системы и комплексы, математических и естественнонаучных дисциплин/

Протокол № 8 от 07.04. 2026 г.

Печатается по решению совета учебно-методического центра ГБПОУ ВО «Воронежский государственный профессионально-педагогический колледж»

Протокол № 5 от 19.05. 2026 г.

© ГБПОУ ВО «ВГППК», 2025

Пояснительная записка

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

Учебно-методическое пособие разработано для дисциплины Информатика в соответствии с ФГОС 44.02.01 специальности Дошкольное образование и ФГОС 44.02.02 Преподавание в начальных классах.

Цель учебно-методического пособия - оказать помощь студентам в выполнении практических работ по дисциплине, закрепить на практике приобретенные ранее теоретические знания, способствовать формированию следующих компетенций:

ОК 01. Выбирать способы решения задач профессиональной̆ деятельности применительно к различным контекстам;

ОК 02. Использовать современные средства поиска, анализа и интерпретации информации, и информационные технологии для выполнения задач профессиональной̆ деятельности;

ОК 05. Осуществлять устную и письменную коммуникацию на государственном языке Российской̆ Федерации с учетом особенностей̆ социального и культурного контекста;

ПК 2.4. Осуществлять педагогическую деятельность по реализации основных образовательных программ дошкольного образования в соответствии с правилами пожарноӗ безопасности.

ПК 3.1. Планировать и проводить занятия с детьми раннего и дошкольного возраста.

ПК 3.2. Создавать развивающую предметно-пространственную среду, позволяющую организовать обучение детей̆ раннего и дошкольного возраста, в том числе детей̆ с ограниченными возможностями здоровья в соответствии со спецификой̆ образовательноӗ программы.

ПК 4.3. Создавать информационную среду дошкольноӗ образовательноӗ группы с целью развития у детей̆ основ информационной̆ культуры.

В результате выполнения практических работ по дисциплине «Информационные технологии в профессиональной деятельности» студенты должны знать:

·                   правила техники безопасности и гигиенические требования при использовании средств ИКТ в образовательном процессе;

·                   основные технологии создания, редактирования, оформления, сохранения, передачи и поиска информационных объектов различного типа (текстовых, графических, числовых и тому подобных) с помощью современных программных средств;

·                   возможности использования ресурсов сети Интернет для совершенствования профессиональной деятельности, профессионального и личностного развития;

·                   аппаратное и программное обеспечение персонального компьютера, применяемое в профессиональной деятельности;

В результате выполнения практических работ по дисциплине «Информационные технологии в профессиональной деятельности» студенты должны уметь:

·                   соблюдать правила техники безопасности и гигиенические рекомендации при использовании средств информационно-коммуникационных технологий (далее - ИКТ) в профессиональной деятельности;

·                   создавать, редактировать, оформлять, сохранять, передавать информационные объекты различного типа с помощью современных информационных технологий для обеспечения образовательного процесса;

·                   использовать сервисы и информационные ресурсы информационно-телекоммуникационной сети "Интернет" (далее - сеть Интернет) в профессиональной деятельности;

·                   работать с программами по обработке графической информации (вариативная часть);

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

и контрольных вопросов.

Практическая работа № 1

создание структуры сайта и наполнения сайта

Цель работ. Формирование базовых представлений и умений в области создания сайтов, таких как:

·        Понимание того, что первым этапом создания сайта является его проектирование;

·        Понимание того, что современные сайты разрабатываются на основе стандартов HTML и CSS;

·        Умение создавать структуру сайта и наполнение его разделов на HTML;

·        Умение создавать каскадные таблицы стилей для оформления сайта;

·        Умение создавать одностраничный сайт с несколькими разделами и нэп\авиационным меню для быстрого перехода между ними

Используемое программное обеспечение: текстовый редактор Блокнот или один из свободных текстовых редакторов (CoffeCup, Free HTML, Note Tab и т.п.), браузер.

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

Основные содержательные блоки будущего сайта следующие:

Работа по созданию сайта состоит из двух последовательных этапов:

1)    Создание структуры сайта и наполнения его разделов (на HTML);

2)    Оформление сайта с помощью каскадных таблиц стилей (Cascading Style Sheets, CSS)

Задание 1

Создайте сайт, имеющий в своей структуре следующие разделы.

1.     Меню

2.     Раздел Главная

3.     Раздел О нас

4.     Раздел Услуги

5.     Раздел Контакты

6.     Копирайт

1.     Откройте текстовый редактор (например, Notepad++) и наберите в нем HTML-код, приведенный на рис. 7.1.

2.     Сохраните набранный код в файле index.html.

3.     Откройте файл index.html с помощью браузера. У вас должна получиться такая страница, как на рис. 7.2.

Рис 7.2. Вид страницы в браузере

4.     Изучите назначение тегов, которые были использованы в HTML-коде.

5.     Добавьте еще три секции:

section id="about"

section id="service"

section id="contact"

6.     Наполните каждую секцию текстом по образцу, приведенному на рис. 7.3.

7.     Сохранив изменения в файле index.html, откройте его с помощью браузера и убедитесь, что всё сделано в полном соответствии с образцом.

8.     В разделе Услуги и Контакты добавьте маркированные списки, воспользовавшись тегами <ul> и <li> по образцам:

9.     Сохранив изменения в файле index.html, откройте его с помощью браузера. Обратите внимание на то, что межстрочное расстояние в списках разное (рис. 7.4).

Подумайте, почему так получилось.

Рис 7.4. Списки

Задание 2

Создайте навигационные элементы сайта:

1)    меню сайта, позволяющее перемещаться по его разделам;

2)    кнопку-ссылку Присоединяйтесь!, которая будет «перебрасывать» пользователя в раздел Контакты.

1.   Создайте папку images и поместите в неё файл logo.png.

2.   Внесите изменения в код, разместив между тегами <body> и <main> фрагмент, приведенный на рис. 7.5.

3.   Сохраните изменения в файле index.html.

Рис. 5. HTML-код

4.     Откройте файл index.html с помощью браузера. Верхняя часть страницы должна выглядеть так, как на рис. 7.6.

5.     Изучите назначение тегов, которые были использованы в HTML-коде. Вспомните, где вы ранее уже использовали некоторые из этих тегов.

6.     Самостоятельно внесите такие изменения в код, чтобы под изображением появились ссылки, приведённые на рис.7.7.

7.     Добавьте кнопку-сслыку в раздел заголовка секции first.

Для этого измените

<p>Присоединяйся!</p>

На

<a href=“class=buttom”>Присоединяйся!</a>

8.     Сохраните изменения в файле index.html.

9.     Откройте файл index.html с помощью браузера. Часть страницы с кнопкой—ссылкой должна выглядеть так, как на рис. 7.8.

Убедитесь, что ссылка «перебрасывает» вас в раздел Контакты.

 Рис. 8. Фрагмент страницы с кнопкой-ссылкой

Задание 3

Создайте меню, позволяющее перемещаться по разделам сайта.

1.   Создайте гиперссылки для соцсетей, воспросоавашись примером года:

<li><ahref=“https://vk.com/if012345678”>

ВКонтакте</a></li>

2.   Создайте ссылку на ваш почтовый адрес по образцу:

<p>Вы можете написать нам на

<a href=“mailto:имя@mail.ru”>почту</a>.</p>

3.    Сохраните изменения в файле index.html.

4.   Откройте файл index.html с помощью браузера. Часть страницы со ссылками должна выглядеть так, как на рис. 7.9.

Рис. 9. Часть страницы со ссылками.

Задание 4

Создайте таблицу с расписанием групповых занятий, приведенную на рис. 7.10.

Рис.10. Таблица с расписанием групповых занятий.

1.     В разделе Услуги после подзаголовка «Расписание групповых занятий» необходимо поместить информацию о расписании занятий в табличной форме. Для этого воспользуйтесь кодом, приведенном на рис. 7.11.

2.     Сохраните изменения в файле index.html.

Рис. 11. HTML-код

3.   Откройте файл index.html с помощью браузера.

На странице должна почвиться таблица, приведенная на рис. 7.12.

Расписание групповых занятий

Рис. 7.12. Вид таблицы в браузере

4.       Изучите назначение тегов, которые были использованы в HTML-коде.

5.        Видоизмените код так, чтобы таблица на странице приобрела вид, представленный в условии задания.

Обратите внимание! Чтобы закрасить ячейку в светло-серый цвет, используйте для тега <td> атрибут bgcolor=” 1ightgrey” .

Практическая работа № 2

Создание веб—сайта. HTML: Каскадные таблицы

Задание 1

В файле my_style.css создайте стиль, устанавливающий:

•                   

•      отступы, выравнивания и границы для разделов body, section, footer.

Чтобы создать стиль для того или иного тега, используйте фигурные скобки. Например, код

 htm1 { font-fami1y: Trebuchet MS, sans-serif; }

 устанавливает единый шрифт Trebuchet MS с типом sans-serif (без засечек) для всего документа.

1.     Создайте в текстовом редакторе Блокнот новый файл с именем ту style.css по образцу, приведённому на рис. 7.13.

1.      Добавьте в файл index.html после тега     строку:

<link href=“my_style.css” re1=skylesheet”>

З. Сохраните изменения в файле index.html.

4.      Откройте файл index.html с помощью браузера. Обратите внимание, как изменилось форматирование элементов на созданной вами странице.

5.      Изучите правила форматирования тегов HTML, которые были использованы при создании стиля.

6.      По своему усмотрению внесите правку в файл my_style.css так, чтобы на странице изменился шрифт, его размер и цвет. Измените цвет и толщину линий границы.

Задание 2

Создайте и примените стиль для меню основного элемента навигации по сайту.

1.      Создайте стиль для навигационного меню. Добавьте для этого код в файл my_style.css перед стилем разделов (section) (рис. 7.14).

2.      Сохраните изменения в файле my_style.css.

З. Откройте файл index.html с помощью браузера. Область логотипа и меню должны выглядеть так, как на рис. 7.15.

Рис. 14. Стиль для навигационного меню

Рис. 15. Область логотипа и меню

4.       Изучите правила форматирования тегов HTML, которые были использованы в НТМ1,-коде.

5.       Внесите изменения в файл my_style.css так, чтобы изменился цвет фона меню.

6.       Измените расстояние между элементами (пунктами) меню.

Задание 3

Создайте и примените стили для форматирования каждого из разделов сайта.

1. Добавьте стиль для секции с идентификатором first (раздел Главная) по образцу, приведённому на рис. 7.16.

Рис. 7.16. Стиль для секции first

2. Сохраните изменения в файле my_style.css.

З. Откройте файл index.html с помощью браузера. Результат применения стиля к разделу должен быть таким, как на рис. 7.17.

Рис. 7.17. Результат применения стиля

4.       Изучите правила форматирования тегов HTML, которые были использованы в

Окончание таблицы

5.       Внесите изменения в файл my_style.css, добавив стили для остальных секций. Предусмотрите изменение размера шрифта и расположения объектов для каждого из разделов.

Задание 4

Создайте и примените стиль для оформления кнопки Присоединяйся!.

1.     

Рис. 7.18. Стиль для класса button

2.      Сохраните изменения в файле my_style.css.

З. Откройте файл index.html с помощью браузера. Результат применения стиля должен быть таким, как на рис. 7.19.

Рис. 7.19. Результат применения стиля

4. Внесите изменения в параметры форматирования так, чтобы:

1)                изменилась толщина границы кнопки;

2)                были убраны округления на углах кнопки;

З)      изменился радиус закругления углов кнопки;

4)      изменился цвет букв и фона кнопки;

5)      изменился размер кнопки.

Задание 5

Добавьте и отредактируйте фон для каждого раздела. Используйте графические изображения из папки images.

1. Задайте параметры форматирования для фона секции first. Добавьте соответствующий код (рис. 7.20) в стиль для секции с идентификатором first перед строкой кода:

# first h1 {font—size: 5 em;

Рис. 7.20. Параметры форматирования для фона секции first

2. Сохраните изменения в файле my_style.css.

З. Откройте файл index.html с помощью браузера. Результат применения стиля должен быть таким, как на рис. 7.21.

4.      Изучите правила форматирования тегов HTML, которые были использованы при создании стиля.

Рис. 7.21. Результат применения стиля

5.      Добавьте по аналогии фоны для секций #about, #service, #contact, использовав для этого соответственно файлы about.png, service.png, contact.png.

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

7.      Используйте собственные графические изображения в качестве фонов.

Попытайтесь самостоятельно добавить стили для заголовков и таблицы.

Скачано с www.znanio.ru