Поделиться
Информатика_9.docx
Технологическая карта урока с применением дистанционных образовательных технологий
Учебный предмет: Информатика
Класс: 9Б
Учитель: Галкина И.В., Ялтаева С.О.
Автор УМК: Босова Л.Л.
Формат проведения: offline
Тема урока: Учет понятия об информационной безопасности при создании комплексных информационных объектов в виде веб-страниц
Тип урока: Смешанный
|
Этап |
Содержание |
||||||||||||||||||||||||||||||||||||||||
|
Организационный момент |
Здравствуйте, ребята!
|
||||||||||||||||||||||||||||||||||||||||
|
Задачи урока |
На сегодняшнем уроке мы изучим понятия: веб-страницы, HTML.
|
||||||||||||||||||||||||||||||||||||||||
|
Интерактивный образовательный контент |
|
||||||||||||||||||||||||||||||||||||||||
|
Актуализация опорных знаний |
И первое о чём нам стоит поговорить –что же вообще такое веб-сайт. Все мы заходили с компьютера в ВК, маил почту и тому подобное. Оценивая весь сайт, кто сможет предположить и дать определение – что же такое веб-страница. |
||||||||||||||||||||||||||||||||||||||||
|
Ход урока |
Проработка нового материала |
Давайте запишем точное определение с экрана. Веб-сайт – это группа веб-страниц, которые объединены общей темой и оформлением, связаны гиперссылками и расположена на одном сервере. Кто-нибудь знает что такое гиперссылка? Это ссылка для перехода на другой объект. Наверняка каждый из вас, когда когда-то копировал информацию с сайтов замечал в конце текста такую фразу: «Информация взята с сайта…» с ссылкой на сайт. Причём эта ссылка выделяется синим цветом. Это и есть гиперссылка. А теперь давайте подумаем, все ли сайты одинаковые. Наверняка все вы хоть раз заходили на сайт школа. Там были кнопки на различные страницы того же сайта. Но при нажатии на каждую из них загружается новая страница. Так вот, такие веб-сайты называются статическими. Но только такие сайты существуют? Многие, если не все, хоть раз что-то заказывали с маркетплейсов. Какие вы знаете? Рассмотрим, напримерOzon. Все замечали табличку «Товара осталось 3 штуки». А кто-то когда-то замечал, что эта цифра меняется? Когда-то кто-то заказал этот товар, количество единиц товара на складе уменьшается и на сайте меняется кол-во оставшегося товара. Это говорит о том, что сайт находится в динамике. Поэтому такой тип сайтов называется «Динамически». Зарисуем кратко схему:
Давайте теперь порассуждаем, а почему какие-то сайты нам нравятся, а какие-то нет. Действительно, сайт нас привлекает, если он интуитивно понятен, на странице приятное сочетание цветов и есть несколько постоянных элементов, которые не меняются при переходе со страницы на страницу. Давайте же теперь все вместе посмотрим, как создаётся простейшая веб-страница Первый наш шаг – выбрать среду разработки. Но нам самом деле, можно начать с самого примитивного инструмента любой версии Windows – Блокнот, он же текстовый документ. Для этого выполним следующее действие:
Дадим название – «Сайт.txt». Но встаёт вопрос, а на каком языке писать веб-страницу. Любая страница, которая открывается перед нами написана на HTML. Именно эту HTML страницу мы получаем от сервера, когда в браузере тыкаем на вкладку ВК. Однако HTML не совсем язык программирования. С его помощью не получится написать какую-то функцию или решить уравнение. Однако, это язык размети, и с его помощью написать простейшую веб-страницу. Весь этот язык состоит из тэгов – команд особого типа. Они используются абсолютно везде. Рассмотрим их на примере. Совершенно любая страница начинается и заканчивается тегами <html></html>:
Обращаю особое внимание. Абсолютно все теги в HTML открываются и закрываются. Как показано на примере. Открытие – это <html>. Его закрытие - </html>. Этот тег служит контейнером для всего содержимого сайта. Следующий обязательный тег - <head></head>:
Это служебный тег, который зачастую несет информацию для браузеров. Однако, в данном теге можно указать тег <title></title>. Он указывает название окна браузера веб-страницы. Давайте посмотрим, как это выглядит в браузере. Для этого сохраним содержимое файла нажав «Файл-сохранить». Затем нажмём правой кнопкой мыши на файл, выберем пункт переименовать и в место .txt напишем .html, соглашаемся с всплывающем окном и открывает появившийся файл:
Однако у нас пустая страница, которую необходимо наполнить. Для этого снова откроем файл. Нажмем на него правой кнопкой мыши, «открыть с помощью» и выберем Блокнот или Текстовый документ:
Следующий обязательный тег <body></body>. Он обрамляет все то, что видит пользователь на веб странице:
На этом обязательные теги, без которых не может существовать ни одна страница, закончились. Ну а теперь мы заполним этот тег. Для начала давайте зададим заголовок первого уровня. Это тот самый текст, который находится в начале страницы и говорит о чём на ней рассказывается. Такой заголовок первого уровня задаётся тегом <h1></h1>:
После этого необходимо наполнить оставшуюся часть текстом. Мы все привыкли, что текст задаётся параграфами. Тогда давайте и мы сделаем также. Исползаем тег <p></p>. Нужный текст поместим между ним:
Сохраним наш документ и посмотрим, как это выглядит:
Но и это ещё не все. Дело в том, что большинство тегов могут иметь атрибуты, определяющие их свойства, например, размер, цвет, шрифт и многое другое. Атрибуты указываются в открывающем теге. Например, мы хотим переместить текст один в центр. Пропишем в открывающем теге p следующие: <p align="center">Текст1</p>. Посмотрим что получилось:
Мы перенесли Текст1 в центр. Но и это еще не все. При этом теги могут быть вложены друг в друга, как матрёшки. Например, после открывающего тега p Текста 2 впишем следующий открывающий тег <font>. При этом в этот тег мы впишем атрибут color=”navy”. Данный атрибут покрасит наш Текст2 в тёмно-синий. При этом мы уже знаем, что любой тег в HTML открывается и закрывается. Поэтому допишем пере закрытием p тег </font>. Выглядеть это будет так:
Сохраним и посмотрим, что у нас получилось в итоге:
|
|||||||||||||||||||||||||||||||||||||||
|
Закрепление изученного материала |
Практическая работа по теме: Учет понятия об информационной безопасности при создании комплексных информационных объектов в виде веб-страниц Цель практической работы: сформировать навык создания простейших веб-страниц. Основная задача: создать простейшую веб-страницу, заполнить различными данными. Основные критерии оценивания: 1. Цветовая схема веб-страницы; 2. Наполнение; 3. Ссылка на внешний ресурс. Обязательные теги:
Теги форматирование абзацев:
Теги форматирования текста:
Теги графических элементов:
Гиперссылки:
Пример простейшей веб-страницы:
|
||||||||||||||||||||||||||||||||||||||||
|
Аргументированное выставление оценок на уроке |
Работу принести на следующий урок. |
||||||||||||||||||||||||||||||||||||||||
|
Комментированная подача домашнего задания. |
Выполнить задания, прикрепленные в разделе домашних заданий
|
||||||||||||||||||||||||||||||||||||||||
|
|
Ребята, вы хорошо сегодня поработали, спасибо за занятие. Если у вас появились какие-либо вопросы, пишите в Элжуре. Я обязательно наних отвечу. - До свидания! |
||||||||||||||||||||||||||||||||||||||||
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
