Инфоурок / Информатика / Презентации / Конспект урока и презентация по информатике на тему «Основы языка разметки гипертекста HTML». (10 класс)
Обращаем Ваше внимание, что в соответствии с Федеральным законом N 273-ФЗ «Об образовании в Российской Федерации» в организациях, осуществляющих образовательную деятельность, организовывается обучение и воспитание обучающихся с ОВЗ как совместно с другими обучающимися, так и в отдельных классах или группах.

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

Только сейчас Вы можете пройти дистанционное обучение прямо на сайте "Инфоурок" со скидкой 40% по курсу повышения квалификации "Организация работы с обучающимися с ограниченными возможностями здоровья (ОВЗ)" (72 часа). По окончании курса Вы получите печатное удостоверение о повышении квалификации установленного образца (доставка удостоверения бесплатна).

Автор курса: Логинова Наталья Геннадьевна, кандидат педагогических наук, учитель высшей категории. Начало обучения новой группы: 27 сентября.

Подать заявку на этот курс    Смотреть список всех 203 курсов со скидкой 40%

Конспект урока и презентация по информатике на тему «Основы языка разметки гипертекста HTML». (10 класс)

Выбранный для просмотра документ Конспект Основы языка разметки гипертекста.docx

библиотека
материалов

Конспект урока по информатике и ИКТ 10 класс

Тема урока: «Основы языка разметки гипертекста HTML».

Планируемые образовательные результаты:

Предметные:

- объяснить назначение языка разметки гипертекста HTML, основных тегов и их атрибутов;

- научить обучающихся создавать Web-страницу.

Метапредметные:

- способствовать развитию информационной культуры; развивать эмоциональную сферу: формировать положительные эмоции к процессу обучения.

Личностные:

- алгоритмическое мышление, необходимое для профессиональной деятельности в современном обществе;

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

План урока:

Организационный момент - 2 мин.

Повторение изученного материала – 6 мин.

Изложение нового материала - 10 мин.

Практическая работа на компьютере - 20 мин.

Подведение итогов урока - 2 мин.

Ход урока:

Учитель:

Ученик:

  1. Организационный момент

Здравствуйте, ребята! Мы живём в современном информационном мире, в котором Интернет – это мир общения, познания, увлечения. Тема нашего урока связана с Интернетом: Основы языка разметки гипертекста HTML.

  1. Повторение изученного материала

Предлагаю вспомнить некоторые понятия (беседа с обучающимися).

Web-страница — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера (Википедия).

Всеми́рная паути́на — распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету.

Веб-обозрева́тель, обозрева́тель, бра́узер— программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц.

  1. Изложение нового материала.

Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов.

Web-страницы можно создать с помощью языка HTML.

3.1. Понятие тега.

В обычный документ вставляются управляющие символы - HTML-теги, которые определяют вид Web-страницы при её просмотре в браузере.

Теги заключаются в угловые скобки <> и могут быть одиночными или парными.

Парные теги содержат открывающий и закрывающий теги (контейнер).

Например, код Web-страницы помещается внутрь контейнера

<HTML>… HTML>

Теги могут записываться как прописными, так и строчными буквами.

3.2. Понятие атрибута.

Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы.

Например,

Моё имяМарина

FONT>

3.3. Структура Web-страницы.

Название Web-страницы

На этой странице можно разместить любую интересную информацию в Интернете.

3.4. Создание Web-страницы.

  1. Создать личную папку.

  2. Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы.

  3. Сохранить файл под именем Шаблон.txt в личной папке.

  4. Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты.

  5. Сохранить файл под именем index.htm в личной папке.

Для редактирования файла index.htm необходимо открыть его в Блокноте.

  1. Практическая работа на компьютере.

Практическая работа «Интерактивные формы»: Создание Web-страницы с использованием знаний языка разметки гипертекста HTML.

  1. Подведение итогов урока.

Домашнее задание: § 2.13, стр. 201-205.


Подготовка к уроку.



Устная работа.


















Запись в тетради.









































Работа за компьютерами.


Запись домашнего задания в дневник. Выставление оценок за урок в дневник.


Выбранный для просмотра документ Основы разметки языка гипертекста.ppt

библиотека
материалов
Основы языка разметки гипертекста HTML
Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов....
Теги заключаются в угловые скобки  и могут быть одиночными или парными. Парн...
Некоторые теги имеют атрибуты, которые являются именами свойств и могут прин...
Название Web-страницы    На этой странице можно разместить любую интересну...
Создать личную папку. Создать в блокноте шаблон HTML-документа, набрав HTML-к...
Для редактирования файла index.htm необходимо выполнить следующие действия:
Атрибуты фона Web-страницы Атрибут цвета Web-страницы  Атрибут вставки фоново...
Теги и атрибуты форматирования текста на Web-странице … до … тег размера шриф...
Тег и атрибут вставки изображений на Web-странице
Теги и атрибуты гиперссылки на Web-странице Указатель тег с атрибутом для соз...
Теги и атрибуты для создания списков на Web-странице … контейнер для создания...
Теги и атрибуты для создания интерактивных форм на Web-странице … контейнер д...
Учебник 10 класса Н. Д. Угринович (базовый уровень), П. 2.13, стр. 201-205.
14 1

Описание презентации по отдельным слайдам:

№ слайда 1 Основы языка разметки гипертекста HTML
Описание слайда:

Основы языка разметки гипертекста HTML

№ слайда 2 Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов.
Описание слайда:

Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов. Web-страницы можно создать с помощью языка HTML В обычный документ вставляются управляющие символы - HTML-теги, которые определяют вид Web-страницы при её просмотре в браузере.

№ слайда 3 Теги заключаются в угловые скобки  и могут быть одиночными или парными. Парн
Описание слайда:

Теги заключаются в угловые скобки <> и могут быть одиночными или парными. Парные теги содержат открывающий и закрывающий теги (контейнер). Например, код Web-страницы помещается внутрь контейнера <HTML>… </HTML> Теги могут записываться как прописными, так и строчными буквами.

№ слайда 4 Некоторые теги имеют атрибуты, которые являются именами свойств и могут прин
Описание слайда:

Некоторые теги имеют атрибуты, которые являются именами свойств и могут принимать определённые значения и влияют на внешний вид Web-страницы. Например, <FONT COLOR=“blue”> <H1 ALIGN=“center”> Моё имя – Марина </H1> </FONT>

№ слайда 5 Название Web-страницы    На этой странице можно разместить любую интересну
Описание слайда:

<HTML> <HEAD> <TITLE> Название Web-страницы </TITLE> </HEAD> <BODY атрибуты> На этой странице можно разместить любую интересную информацию в Интернете. </BODY> </HTML>

№ слайда 6 Создать личную папку. Создать в блокноте шаблон HTML-документа, набрав HTML-к
Описание слайда:

Создать личную папку. Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы. Сохранить файл под именем Шаблон.txt в личной папке. Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты. Сохранить файл под именем index.htm в личной папке.

№ слайда 7 Для редактирования файла index.htm необходимо выполнить следующие действия:
Описание слайда:

Для редактирования файла index.htm необходимо выполнить следующие действия:

№ слайда 8 Атрибуты фона Web-страницы Атрибут цвета Web-страницы  Атрибут вставки фоново
Описание слайда:

Атрибуты фона Web-страницы Атрибут цвета Web-страницы <BODY bgcolor=#FFF8DC> Атрибут вставки фонового рисунка Web-страницы <BODY background="Nature_02.jpg”>

№ слайда 9 Теги и атрибуты форматирования текста на Web-странице … до … тег размера шриф
Описание слайда:

Теги и атрибуты форматирования текста на Web-странице <H1>…</H1> до <H6>…</Y6> тег размера шрифта заголовков <FONT>…</FONT> тег форматирования шрифта FACE=“Arial” атрибут задания гарнитуры шрифта SIZE=4 атрибут задания размера шрифта COLOR=“Red” атрибут задания цвета шрифта ALIGN=“left” атрибут задания выравнивания текста <HR> тег для создания горизонтальной линии <P>…</P> контейнер для разделения текста на абзацы

№ слайда 10 Тег и атрибут вставки изображений на Web-странице
Описание слайда:

Тег и атрибут вставки изображений на Web-странице <IMG SRC=“computer.gif”> <IMG SRC=“C:\COMPUTER\computer.gif”> <IMG SRC=“http://www.server.ru/computer.gif”>

№ слайда 11 Теги и атрибуты гиперссылки на Web-странице Указатель тег с атрибутом для соз
Описание слайда:

Теги и атрибуты гиперссылки на Web-странице <A HREF=“Адрес”>Указатель</A> тег с атрибутом для создания гиперссылки <ADDRESS>…</ADDRESS> контейнер для создания гиперссылки на адрес электронной почты

№ слайда 12 Теги и атрибуты для создания списков на Web-странице … контейнер для создания
Описание слайда:

Теги и атрибуты для создания списков на Web-странице <OL>…</OL> контейнер для создания нумерованных списков <LI> тег элемента списка <UL>…</UL> контейнер для создания маркированного списка <LI> тег элемента списка <DL>…</Dl> контейнер для создания списка терминов <DT> тег для создания термина <DD> тег для создания определения

№ слайда 13 Теги и атрибуты для создания интерактивных форм на Web-странице … контейнер д
Описание слайда:

Теги и атрибуты для создания интерактивных форм на Web-странице <FORM>…</FORM> контейнер для создания формы Тег <INPUT> со значением атрибута TYPE=“text” создают текстовое поле Тег <INPUT> со значением атрибута TYPE=“radio” создают группу переключателей Тег <INPUT> со значением атрибута TYPE=“checkbox” создают флажки <SELECT> …</SELECT> контейнер для реализации раскрывающего списка <OPTION> тег элемента списка

№ слайда 14 Учебник 10 класса Н. Д. Угринович (базовый уровень), П. 2.13, стр. 201-205.
Описание слайда:

Учебник 10 класса Н. Д. Угринович (базовый уровень), П. 2.13, стр. 201-205.



Самые низкие цены на курсы переподготовки

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

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

Обучение проходит заочно прямо на сайте проекта "Инфоурок", но в дипломе форма обучения не указывается.

Начало обучения ближайшей группы: 27 сентября. Оплата возможна в беспроцентную рассрочку (10% в начале обучения и 90% в конце обучения)!

Подайте заявку на интересующий Вас курс сейчас: https://infourok.ru

Общая информация

Номер материала: ДБ-370537

Похожие материалы

2017 год объявлен годом экологии и особо охраняемых природных территорий в Российской Федерации. Министерство образования и науки рекомендует в 2017/2018 учебном году включать в программы воспитания и социализации образовательные события, приуроченные к году экологии.

Учителям 1-11 классов и воспитателям дошкольных ОУ вместе с ребятами рекомендуем принять участие в международном конкурсе «Законы экологии», приуроченном к году экологии. Участники конкурса проверят свои знания правил поведения на природе, узнают интересные факты о животных и растениях, занесённых в Красную книгу России. Все ученики будут награждены красочными наградными материалами, а учителя получат бесплатные свидетельства о подготовке участников и призёров международного конкурса.

Конкурс "Законы экологии"