Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Конспекты / План урока с приложениями по информатике 11 класс по теме Язык гипертекстовой разметки
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 26 апреля.

Подать заявку на курс
  • Информатика

План урока с приложениями по информатике 11 класс по теме Язык гипертекстовой разметки

Выберите документ из архива для просмотра:

700.5 КБ HTML.ppt
6 КБ Thumbs.db
25.83 КБ рис1.jpg
14.42 КБ Станционная средняя школа.htm
44.11 КБ 1.JPG
22.45 КБ 11.JPG
43.94 КБ 12.JPG
41.58 КБ 2.JPG
37.96 КБ 3.JPG
37.83 КБ 4.JPG
37.44 КБ 5.JPG
48.47 КБ 6.JPG
41.44 КБ 7.JPG
39.48 КБ 8.JPG
48.08 КБ 9.JPG
2.39 КБ style.css
25.83 КБ рис1.jpg
26.11 КБ План урока информатики 11 класс.docx
24.75 КБ Приложения.docx

Выбранный для просмотра документ HTML.ppt

библиотека
материалов
Тема урока: «Язык разметки гипертекста HTML» Попов К.Н.
Hyper Text Markup Language – язык гипертекстовой разметки. Описательный язык...
Тег - элемент HTML, представляющий из себя текст, заключенный в угловые скоб...
Атрибут – это компонент тега, содержащий указания о том, как браузер должен...
Гипертекст (hypertext) – текст, содержащий ссылки на другие веб-страницы, се...
Название   Я ученик 11 класса . Мне 17 лет. Это моя первая Web-страница. Т...
Обновление web-страницы меню Вид  Просмотр HTML-кода
Просмотр кода в Google Chrome
Просмотр кода в Mozilla
Тест
выучить конспект; создать собственную страничку с помощью html-языка на свобо...
11 1

"Инфоурок" приглашает всех педагогов и детей к участию в самой массовой интернет-олимпиаде «Весна 2017» с рекордно низкой оплатой за одного ученика - всего 45 рублей

В олимпиадах "Инфоурок" лучшие условия для учителей и учеников:

1. невероятно низкий размер орг.взноса — всего 58 рублей, из которых 13 рублей остаётся учителю на компенсацию расходов;
2. подходящие по сложности для большинства учеников задания;
3. призовой фонд 1.000.000 рублей для самых активных учителей;
4. официальные наградные документы для учителей бесплатно(от организатора - ООО "Инфоурок" - имеющего образовательную лицензию и свидетельство СМИ) - при участии от 10 учеников
5. бесплатный доступ ко всем видеоурокам проекта "Инфоурок";
6. легко подать заявку, не нужно отправлять ответы в бумажном виде;
7. родителям всех учеников - благодарственные письма от «Инфоурок».
и многое другое...

Подайте заявку сейчас - https://infourok.ru/konkurs

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

№ слайда 1 Тема урока: «Язык разметки гипертекста HTML» Попов К.Н.
Описание слайда:

Тема урока: «Язык разметки гипертекста HTML» Попов К.Н.

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

Hyper Text Markup Language – язык гипертекстовой разметки. Описательный язык разметки HTML имеет свои команды, которые называются тегами. !Теги не чувствительны к регистру!

№ слайда 3 Тег - элемент HTML, представляющий из себя текст, заключенный в угловые скоб
Описание слайда:

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

№ слайда 4 Атрибут – это компонент тега, содержащий указания о том, как браузер должен
Описание слайда:

Атрибут – это компонент тега, содержащий указания о том, как браузер должен воспринять и обработать тег. Синтаксис тега с атрибутом: <тег атрибут="значение">

№ слайда 5 Гипертекст (hypertext) – текст, содержащий ссылки на другие веб-страницы, се
Описание слайда:

Гипертекст (hypertext) – текст, содержащий ссылки на другие веб-страницы, серверы или ресурсы с возможностями выполнения переходов.

№ слайда 6 Название   Я ученик 11 класса . Мне 17 лет. Это моя первая Web-страница. Т
Описание слайда:

<HTML> <HEAD> <TITLE> Название</TITLE> </HEAD> <BODY> Я ученик 11 класса . Мне 17 лет. Это моя первая Web-страница. Тут я могу писать любой текст. Я размещу эту страницу в Интернете. </BODY> </HTML>

№ слайда 7 Обновление web-страницы меню Вид  Просмотр HTML-кода
Описание слайда:

Обновление web-страницы меню Вид  Просмотр HTML-кода

№ слайда 8 Просмотр кода в Google Chrome
Описание слайда:

Просмотр кода в Google Chrome

№ слайда 9 Просмотр кода в Mozilla
Описание слайда:

Просмотр кода в Mozilla

№ слайда 10 Тест
Описание слайда:

Тест

№ слайда 11 выучить конспект; создать собственную страничку с помощью html-языка на свобо
Описание слайда:

выучить конспект; создать собственную страничку с помощью html-языка на свободную тему.

Выбранный для просмотра документ План урока информатики 11 класс.docx

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

ГУ «Станционная средняя школа отдела образования акимата Карабалыкского района»

















«Язык гипертекствой разметки HTML»













Попов Константин Николаевич

Учитель высшей категории высшего уровня квалификации







2015-2016 учебный год



Тема урок: Язык гипертекствой разметки HTML.

Цели и задачи урока:

  • Сформулировать основные принципы создания WEB-страниц;

  • Познакомить учеников с основными командами оформления текста;

  • Продемонстрировать использование этих команд на конкретных примерах оформления WEB-страниц;

  • Сформировать навыки и умения создания простейших WEB-страниц;

  • Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль;

  • Воспитывать аккуратность, внимательность, вежливость и дисциплинированность, бережное отношение к своему здоровью.


Тип урока: усвоение новых знаний.


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


Ожидаемые результаты:

В конце урока ученики смогут:

  • Дать определение таким понятиям:

    1. Браузер, гипертекст, тег, атрибут;

    2. WEB-страница, WEB-сайт; WEB-дизайн;

    3. Язык разметки гипертекста HTML;

  • Использовать команды языка HTML для форматирования текста;

План урока:



  1. Организационный момент (2 мин)- (посещение, деление на пары)

  2. Актуализация опорных знаний (2 мин)- (опрос: интернет, страница, гиперссылки …)

  3. Цели изадачи. Изложение нового материала на примерах использования документов в формате WEB и блокнот (2 мин) - (демонстрация материала на ПК по сети)

  4. Исследование файлов на использование тегов (7 мин) – (самостоятельная работа в парах на ПК)

  5. Проверка понимания изученного (2 мин)

  6. Закрепление нового материала путём выполнения практического задания (10 мин)- (создание, путём изменениякода готовой страницы по образцу)

  7. Коррекция (3 мин)

  8. Обобщение, Тест. (15 мин)

  9. Итоги урока. Самоценивание. Рефлексия (5 мин)

  10. Домашнее задание (2 мин.)












Структура урока

Раздаёт листы самопроверки с критериями.

Психологически настраиваются на урок. Изучают листы самопроверки и критерии.

3. Актуализация знаний.

2 минуты

Спрашивает, слушает, комментирует ответы.

Отвечают на вопросы.

5. Постановка целей и задач.

2 минуты

Демонстрация презентации и способа создания web-страницы.

Наблюдают, задают вопросы, ставят задачу на урок.

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

7 минут

1. Организует группы.
2. Руководит, консультирует.


1. Исследуют материал. Участвуют в беседе, делают выводы, формулируют определения, работают с заданием.

8. Проверка понимания изученного материала.

2 минуты

Задаёт вопросы по теме практической работы.

Отвечают на вопросы. Формулируют правильные выводы.

9. Закрепление изученного.

10 минут

Решение задания индивидуально.

Выполнение задания.

10. Коррекция

3 минуты

Проверка задания и ликвидация ошибок (анализ решённой задачей)

Сверяют решение и выполняют коррекцию.

12. Обобщение изученного.

15 минут

Вопросы по основным итогам урока: тема, цель, результат. Решение теста

Ответы учеников на вопросы.

14. Итоги урока (рефлексия)

5 минут

Подводим итог, самооценивание.

Рефлексия

Таблица (плюс, минус, интересно)

Отвечают на вопросы рефлексии.

15. Домашнее задание.

2 минуты

Задание – привести примеры новых тег, кодировка страниц.

Задают вопросы, записываю задание в тетрадь.

















































Ход урока:


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


Приветствие учащихся. Проверка присутствующих. Настрой на урок. Деление на пары. Листы самооценки с критериями. Лист рефлексии.

Приветствие учащихся, проверка по журналу. После этого проводим деление на пары через сбор личной вещи в коробку и разложение их на пары в произвольном порядке. Для этого используем пустую коробку, в которую дети вложат ластик, карандаш, ручку, заколку. После этого вынимая по две вещи формируются пары. Каждый ученик получает лист самооценки (прил1) и карточку рефлексии (прил2) для работы в течении урока.

  1. Актуализация опорных знаний. (2 мин)

  • Как вы можете определить понятие «Интернет»?

  • Что такое браузер?

  • Какие виды браузеров Вы знаете?

  • Как называются документы, которые мы можем просматривать в программе-

  • браузере?

На этом этапе идёт процесс повторения опорных знаний для дальнейшего изучения новой темы методом вопросов и ответов.

  1. Постановка целей и задач через примеры web-страницы и блокнота. (2 мин)

(по сети на экран продемонстрировать два документа в формате WEB и Блокнот (прил3 и прил4) в папке Демонстрация)

  • Систематизация понятий – (проводим через презентацию HTML)

    1. Тег, атрибут, гипертекст;

    2. WEB-страница, WEB-сайт; WEB-дизайн;

    3. Язык разметки гипертекста HTML;

  • Команды (теги), определяющие структуру WEB-документа.

  • Команды (теги) форматирования текста.

Просмотр презентации, ответы на вопросы, комментарии, выписка тег и обсуждение в парах их применения.


  1. Изучение нового материала в парах. Исследование файлов web-страницы и блокнота на теги. (7 мин)

  • Сравнение

  • Анализ

  • Оценка влияния

Самостоятельная работа с раздаточным материалом (прил3 и прил4) в папке Демонстрация. (данная папка Демонстрация раздаётся на ПК перед уроком)

  1. Проверка понимания изученного материала через вопросы: (2 мин)

  • Теги

  • Сохранение страницы

  • Открытие кода

  • Внесение изменений

Опрос учеников, ответы, комментарии.

  1. Закрепление изученного путём выполнения практического задания. (10 мин)

Ученики получают задания на изучение готовой web-страницы с целью её изменения. Папка Задание раздаётся на ПК перед уроком.

  • Исследуем готовую web-страницу

  • В файле даны указания по изменению страницы

  • Сохранить изменения через кодировку и показать результат.


  1. Коррекция (3 мин)

Анализ решения задачи, ликвидация пробелов.

  1. Обобщение изученного

    • Вопросы по уроку

    • Решение теста

Ученики получают готовый тест на решение. После выполнения идёт фронтальная проверка с анализом и самооценкой. (прил5)

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

Учащимися заполняется лист самооценки и выполняется тест на знание кодировки.

Ответы теста.

Оценка выставляется согласно выработанным критериям .

Подводится итог урока и рефлексия.


  1. Итоги урока

    • Подведение итогов

    • Оценивание

    • Рефлексия через заполнение таблицы (плюс, минус, интересно) (прил6)

  2. Домашнее задание: выучить конспект, создать собственную страничку с помощью html-языка на свободную тему.

Выбранный для просмотра документ Приложения.docx

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

Прил1

Лист самооценки

Фамилия Имя ___________________



1 этап : Проверка двух файлов на работу тегов

«5» баллов – овладел навыком открытия кода и сохранением страниц в требуемом формате без каких-либо трудностей.

«4» балла – есть небольшие затруднения при сохранении страницы в нужном формате.

«3» балла – владею навыками просмотра кодировки страниц, но испытываю трудности вносить изменения в страницу.

_________


2 этап: Выполнение задания по изменению страниц

«5» баллов – без ошибок нахожу теги, изменяю код страницы, вставляю объекты без каких-либо трудностей.

«4» балла – есть небольшие затруднения при изменении кода страницы.

«3» балла – владею навыками просмотра кодировки страниц, но мне сложно самостоятельно найти и исправить код.


__________

3 этап: Работа с тестом

«5» баллов – 9-10 правильных ответов.

«4» балла – 7-8 правильных ответов.

«3» балла – 5-6 правильных ответов.


__________








Общий бал _____________


14-15 ----- «5»

10-13 ------ «4»

9 ---------- «3»








прил2



Записывается все,

что понравилось на

уроке, информация

и формы работы.

Записывается все, что не понравилось

на уроке, показалось

скучным, осталось

непонятым, вызвало

неприязнь.

Записываются все

любопытные факты,

О которых узнали на

уроке и что бы еще

хотелось узнать по данной проблеме,

вопросы к учителю.














прил5



Тест на тему «Язык HTML»

1. HTML - это…

  1. Текстовый файл, имеющий расширение .html;

  2. Язык разметки гипертекста;

  3. Инструкция браузеру, указывающая способ отображения гипертекста.

2. Какое расширение имеет HTML – файл?

  1. .jpg

  2. .doc

  3. .html

3. Тег – это …

  1. Инструкция браузеру, указывающая способ отображения гипертекста;

  2. Текстовый файл, имеющий расширение .html;

  3. Язык разметки гипертекста.

4. Выделите лишний структурный тег:

5. Выделите лишний тег форматирования символов:

  1.  

6. Какое действие выполняет следующий тег <h1> h1>?

  1. Создает перевод строки;

  2. Создает новый «параграф»;

  3. Создает самый большой заголовок

7. Найдите лишний тег оформления списков данных.




8. Найдите лишний тег для создания таблицы.

9. Какой тег используется для вставки в веб-страницу гиперссылки?

10. Какой тег описывает графический файл на веб-странице?

  1. SPAN«имя файла»>









Прил6

Основные теги HTML.

В столбце «/» отмечается наличие парного (закрывающего) тега: + (необходим), - (отсутствует), (имеется, но необязателен).


/

Описание и назначение



служебные

+

«голова» html-документа, здесь располагается служебная информация

+

«тело» документа

  • linkцвет гиперссылки

  • alink – цвет активной гиперссылки

  • vlink – цвет посещённой гиперссылки

  • text – цвет основного текста

  • bgcolor – цвет фона страницы

  • background – адрес графического файла, который будет использован в качестве фона страницы

+

заголовок странички



абзац

начало абзаца

  • alignвыравнивание (left, right, center, justify)

+

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


разрыв строки, переход на новую строку

..

+

заголовки (принимает значения в диапазоне 1-6)

  • alignвыравнивание



текст

+

размер и цвет текста

  • color – цвет текста

  • face – имя или список имён шрифтов через запятую

  • size – размер

+

полужирное начертание

+

курсивное начертание

+

подчёркнутый текст

+

зачёркнутый текст

+

верхний индекс

+

нижний индекс

+

бегущая строка

  • behaviorтип движения (alternate, scroll, slide)

  • bgcolor – цвет фона

  • directionнаправление движения (left, right, up, down)

  • height – высота строки при вертикальном движении

  • width – ширина строки при горизонтальном движении

  • scrollamount – скорость в пикселях на движение



таблица

+

вставка таблицы

align – выравнивание таблицы

background – адрес фонового изображения

bgcolor – цвет фона

border – толщина рамки

width и height

+

строка таблицы

+

ячейка таблицы



изображение или видеоклип

вставка изображения

src – адрес графического изображения (файла)

align – выравнивание изображения в окружающем тексте (absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top)

alt – замещающий текст

border – толщина рамки

width и height – ширина и высота изображения

hspace и vspace – горизонтальные и вертикальные поля вокруг изображения



гиперссылка

+

гиперссылка

hrefадрес

target – место загрузки документа:

_blank – новое окно

_parent – родительский фрейм

_self – текущее окно или фрейм

_top – во всё окно браузера



фрейм

+

разбивает окно браузера на фреймы (кадры или подокна)

borderтолщина рамки

cols и rows – количество частей по вертикали и горизонтали

загружает страницы во фрейм (кадр)

src – адрес странички, размещаемой в кадре

scrolling – отображение полос прокрутки (auto, no, yes)










































На стенд

Проверка двух файлов на работу тегов

Выполнение задания по изменению страниц

Работа с тестом

HTML


Язык гипертекстовой разметки

Автор
Дата добавления 01.06.2016
Раздел Информатика
Подраздел Конспекты
Просмотров108
Номер материала ДБ-106236
Получить свидетельство о публикации

"Инфоурок" приглашает всех педагогов и детей к участию в самой массовой интернет-олимпиаде «Весна 2017» с рекордно низкой оплатой за одного ученика - всего 45 рублей

В олимпиадах "Инфоурок" лучшие условия для учителей и учеников:

1. невероятно низкий размер орг.взноса — всего 58 рублей, из которых 13 рублей остаётся учителю на компенсацию расходов;
2. подходящие по сложности для большинства учеников задания;
3. призовой фонд 1.000.000 рублей для самых активных учителей;
4. официальные наградные документы для учителей бесплатно(от организатора - ООО "Инфоурок" - имеющего образовательную лицензию и свидетельство СМИ) - при участии от 10 учеников
5. бесплатный доступ ко всем видеоурокам проекта "Инфоурок";
6. легко подать заявку, не нужно отправлять ответы в бумажном виде;
7. родителям всех учеников - благодарственные письма от «Инфоурок».
и многое другое...

Подайте заявку сейчас - https://infourok.ru/konkurs


Выберите специальность, которую Вы хотите получить:

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

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ


Идёт приём заявок на международный конкурс по математике "Весенний марафон" для учеников 1-11 классов и дошкольников

Уникальность конкурса в преимуществах для учителей и учеников:

1. Задания подходят для учеников с любым уровнем знаний;
2. Бесплатные наградные документы для учителей;
3. Невероятно низкий орг.взнос - всего 38 рублей;
4. Публикация рейтинга классов по итогам конкурса;
и многое другое...

Подайте заявку сейчас - https://urokimatematiki.ru

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

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