Тема 1.1. Глобальная сеть Интернет
и стратегии безопасного поведения в ней

Урок 3: Учет понятия об информационной безопасности при создании комплексных информационных объектов в виде веб-страниц

Урок по предмету «Информатика» для 9 класса по теме «Практическая работа «Создание комплексных информационных объектов в виде веб-страниц, включающих графические объекты, с использованием конструкторов (шаблонов)»». Комбинированный урок. На уроке предусмотрено использование следующих типов электронных образовательных материалов: «Видеолекция», «Инструкция по выполнению практической работы», «Интерактивный справочник терминов и понятий».

Тип урока: комбинированный урок

Ключевые слова: ИНТЕРНЕТ, СОЗДАНИЕ ВЕБ-СТРАНИЦЫ, СОЗДАНИЕ САЙТА, ВЕБ-РАЗРАБОТКА, ВЕРСТКА, ВЕБ-СТРАНИЦА, CSS, ГИПЕРССЫЛКА, ГИПЕРТЕКСТ, HTML, САЙТ, ВЕБ-САЙТ

Базовые понятия, единые для школьного образования: ДОКУМЕНТ, ЯЗЫК, ЭЛЕМЕНТ, ТЕКСТ, ТАБЛИЦА, СИМВОЛ, ОБЪЕКТ, ОБЩЕСТВО, КОММУНИКАЦИЯ, КОД, КЛАСС, ИНФОРМАЦИЯ, ДАННЫЕ

Освоение нового материала:
- Просмотр обучающего видеоролика "HTML и CSS"
- Просмотр обучающего видеоролика "Веб-сайты"
Применение изученного материала:
- Выполнение практической работы "Создание веб-страницы"
Проверка приобретённых знаний, умений и навыков:
- Работа со справочником "Создание веб-страниц"

Основной материал:

Учебник, §4.4

Презентация "Технологии создания сайта"

Освоение нового материала:

Осуществление учебных действий по освоению нового материала:

Обучающий видеоролик

"Веб-сайты"

Обучающий видеоролик

"HTML и CSS"

Применение изученного материала:

Применение знаний, в том числе в новых ситуациях:

Практическая работа "Создание веб-страницы"

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

Разработка макета сайта.
Описание логической структуры сайта, планирование контента.
Оформление сайта.
Добавление личной информации.

1. Разработка макета сайта

2. Создание рабочей папки

3. Создание веб-страницы

Открой программу Notepad++. Набери следующий код:

<!DOCTYPE html>
<html>
    <head>
        <title>Страница обо мне</title>
    </head>
    <body>
        <div id = "main">
        <div id = "header">Приветствие</div>
        <div id = "photo">Фото</div>
        <div id = "text">Фамилия Имя</div>
        <div id = "footer">Контакты</div>
        </div>
    </body>
</html>

Обрати внимание у нас есть четыре блока с идентификаторами header, photo, text, footer.

4. Сохранение файла с расширением html

5. Проверка сайта в браузере

6. Добавление стилей

Для того чтобы содержание веб-страницы преобразилось, необходимо добавить оформление. После строки <title>Страница обо мне</title> добавь следующий фрагмент.
Обрати внимание на отступы при записи тегов. Сравни свой HTML-код с приведенным на рисунке.

<style>
#main{
width: 710px;
margin: 0px auto;
border: 3px solid #edc7ff;
}
#header{
height: 120px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 3px solid
#fff7c7;
}
#photo{
width: 450px;
height: 500px;
display: flex;
float: left;
border-right: 3px solid
#fff7c7;
}
#text{
width: 255px;
height: 500px;
float: right;
text-indent: 20px;
display: flex;
align-items: flex-end;
}
#footer{
height: 25px;
display: flex;
align-items: center;
justify-content: center;
clear: both;
border-top: 3px solid
#fff7c7;
}
</style>

7. Проверка сайта в браузере

8. Добавление цвета

Перед тегом </style> добавь следующий код:

#text,#photo{background:#c7eaff;}
#header,#footer{background:#ffdbc7;}

Сохрани файл. Обнови страницу в браузере с помощью клавиши F5 на клавиатуре.

9. Вставка фото

10. Корректное отображение фото

Скорее всего, фотография не вписывается в рамки, которые отведены для нее. Добавь после строки
#footer{background: #ffdbc7}
следующий код, точно «вписывающий» фото в отведенную для него область.

img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;}

Сохрани файл и проверь результат в браузере.

11. Вставка текста

12. Добавление ссылок

Чтобы сделать активными свои контакты, нужно добавить адрес электронной почты и ссылку. Для этого замени строку кода
<div id = "footer"><p>Связаться по почте или через социальную сеть </p></div>
на следующую:

<div id = "footer">
    <p>Связаться по <a href="mailto:EMAIL@mail.ru">почте</a>
    или через <a href="https://vk.com/">социальную сеть</a></p>
</div>

13. Проверка сайта в браузере