192864
столько раз учителя, ученики и родители
посетили сайт «Инфоурок»
за прошедшие 24 часа
+Добавить материал
и получить бесплатное
свидетельство о публикации
в СМИ №ФС77-60625 от 20.01.2015
Дистанционные курсы профессиональной переподготовки и повышения квалификации для педагогов

Дистанционные курсы для педагогов - курсы профессиональной переподготовки от 6.900 руб.;
- курсы повышения квалификации от 1.500 руб.
Престижные документы для аттестации

ВЫБРАТЬ КУРС СО СКИДКОЙ 50%

ВНИМАНИЕ: Скидка действует ТОЛЬКО сейчас!

(Лицензия на осуществление образовательной деятельности № 5201 выдана ООО "Инфоурок")

ИнфоурокИнформатикаКонспектыУрок «Основы языка HTML»

Урок «Основы языка HTML»

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

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

библиотека
материалов
Скачать материал целиком можно бесплатно по ссылке внизу страницы.

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

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

Методы:

  • объяснительно-иллюстративный;

  • частично-поисковый.

Цель урока: Сформировать представление о структуре HTML-документа.

Задачи урока:

1. Образовательная:

  • Сформировать представление учащихся о понятии «тэг».

  • Ознакомить с типами тэгов.

  • Ввести понятие «статическая Web-страница».

2. Развивающая:

  • развитие способности к анализу и обобщению;

  • развитие навыков по созданию Web-страниц;

  • развитие информационной культуры.

3. Воспитательная:

  • развитие познавательного интереса;

  • воспитание информационной культуры.

Оборудование:

  • мультимедийный проектор;

  • экран;

  • презентация «Основы языка HTML: тэги, атрибуты, комментарии» (Приложение 4);

  • раздаточный материал «Структурные тэги» (Приложение 5).

Межпредметные связи: английский язык.

Этапы урока:

  1. Организационный этап – 2 мин.

  2. Объяснение нового материала – 18 мин.

  3. Самостоятельная работа – 17 мин.

  4. Подведение итогов, домашнее задание – 3 мин.

Информация на экране

Деятельность учителя

Деятельность учащихся

Время

Тема урока

«Основы языка HTML: тэги, атрибуты, комментарии»

Презентация (Приложение 4)

Организационный этап

 

2 мин.

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

Вопросы при необходимости. Запись темы урока в тетрадь

Слайды презентации:

«Основы языка HTML: тэги, атрибуты, комментарии»

(Приложение 4)

Объяснение нового материала

 

18 мин.

Объясняет суть и особенности создания HTML-документа. Дает определение понятию «тэг». Поясняет классификацию тэгов. Объясняет структуру HTML-документа (Приложение 5).

Задают вопросы, отвечают на вопросы, рассуждают по теме, записывают самое главное.

 

Самостоятельная работа

 

17 мин.

 

Раздает задания для выполнения практической работы, объясняет суть задания и способы действия.

Этапы выполнения задания:

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

 

Подведение итогов урока, выставление оценок

 

3 мин.

 

Благодарит учащихся за работу на уроке. Подводит итоги урока, выставляет оценки в журнал и дневники учащихся.

 

 

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

 

 

Задает домашнее задание (читать конспект, составить теги web- страницы тему выбирают сами учащихся)

Записывают домашнее задание в дневник.



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

библиотека
материалов
Язык разметки гипертекста HTML
Сегодня я познакомлю Вас с языком разметки гипертекста HTML (HyperText Markup...
Язык HTML состоит из специальных разметочных указателей, иногда их называют ф...
Браузер – это программа, служащая для просмотра Web-документов (страниц в Int...
Существует много программ-браузеров. Каждая из них предоставляет разные возмо...
Каким бы браузером не отображался Web-документ, всегда можно увидеть описываю...
Прописные и строчные буквы при написании тегов не различаются. = = Тег всегда...
ТЕГИ НЕПАРНЫЕ ПАРНЫЕ      Парный тег влияет на текст с того места, где употре...
Структурные теги 	Указывает браузеру, что далее следует HTML-файл. Тег обрамл...
Структура HTML-файла  	 		заголовок окна 	 	 	… 	… 	…
Задание На Рабочем столе в папке СТИХИ открыть файл КОЗЛЕНОК.txt
Сделаем Web-страницу, содержащую это стихотворение       Стих
Сохраним нашу Web-страницу в текстовом формате Переименуем полученный текстов...
Откроем полученный Web-сайт Браузер Internet Explorer вывел наше стихотворени...
Чтобы внести данный тег в текст HTML-файла нужно в Строке меню выбрать Вид→Пр...
После внесения изменений HTML-файл будет выглядеть следующим образом:
Сохраняем с внесёнными изменениями Закрываем полученный документ
Снова открываем наш Web-сайт. Чтобы увидеть внесённые изменения, страницу нуж...
Теперь наша Web-страница выглядит лучше Добавим на страницу цветной фон. Для...
bgcolor=pink Не забудьте сохранить файл и обновить страницу
Вот наша Web-страница Сделаем текст стихотворения цветным. Для этого в теге...
text=blue Не забудьте сохранить файл и обновить страницу
Наша Web-страница преобразилась Сделаем заголовок стихотворения и имя автора...
Не забудьте сохранить файл и обновить страницу
Теперь наша Web-страница выглядит лучше Добавим на нашу Web-страницу картинку...
Вставьте на созданную нами Web-страницу картинку с изображением козлёнка. Кар...
Создадим на нашей Web-странице бегущую строку. Движущийся элемент должен нахо...
    Не забудьте сохранить файл и обновить страницу
Задание Представьте себя Web-дизайнерами и создайте свои сайты со стихами Агн...

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

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

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

2 слайд Сегодня я познакомлю Вас с языком разметки гипертекста HTML (HyperText Markup
Описание слайда:

Сегодня я познакомлю Вас с языком разметки гипертекста HTML (HyperText Markup Language). Если Вы хотите стать Web - дизайнером, то вы непременно должны знать этот язык.

3 слайд Язык HTML состоит из специальных разметочных указателей, иногда их называют ф
Описание слайда:

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

4 слайд Браузер – это программа, служащая для просмотра Web-документов (страниц в Int
Описание слайда:

Браузер – это программа, служащая для просмотра Web-документов (страниц в Internet). Тег – это инструкция браузеру, указывающая способ отображения текста.

5 слайд Существует много программ-браузеров. Каждая из них предоставляет разные возмо
Описание слайда:

Существует много программ-браузеров. Каждая из них предоставляет разные возможности при работе с Web-документами. Наиболее известные и конкурирующие браузеры – Netscape Navigator и Microsoft Internet Explorer.

6 слайд Каким бы браузером не отображался Web-документ, всегда можно увидеть описываю
Описание слайда:

Каким бы браузером не отображался Web-документ, всегда можно увидеть описывающие его теги. Сделать это очень легко: достаточно открыть любую Web-страницу и в Строке меню выбрать Вид→Просмотр HTML-кода Тогда страница будет выглядеть следующим образом:

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

Прописные и строчные буквы при написании тегов не различаются. <BODY>=<body> <Body>=<BoDy> Тег всегда начинается и заканчивается угловыми скобками “<>”.

8 слайд ТЕГИ НЕПАРНЫЕ ПАРНЫЕ      Парный тег влияет на текст с того места, где употре
Описание слайда:

ТЕГИ НЕПАРНЫЕ ПАРНЫЕ <HTML></HTML> <BODY></BODY> <P></P> <BR> <HR> Парный тег влияет на текст с того места, где употреблён, до того места, где указан признак окончания его действия, а им служит тот же самый тег, только начинающийся с символа слэш «/»

9 слайд Структурные теги 	Указывает браузеру, что далее следует HTML-файл. Тег обрамл
Описание слайда:

Структурные теги <HTML></HTML> Указывает браузеру, что далее следует HTML-файл. Тег обрамляет документ – весь текст должен находиться внутри этого тега. <HEAD></HEAD> Голова HTML-файла, состоящая из нескольких частей, основной из которых является заголовок окна. <TITLE></TITLE> Тег окна заголовка. Пишется внутри тега HEAD. <BODY></BODY> Тело HTML-файла. Внутри тега пишется то, что будет доступно в области просмотра браузера. Тег может иметь несколько параметров, описывающих цвет фона окна просмотра, рисунок в нём, цвет текста и т.п.

10 слайд Структура HTML-файла  	 		заголовок окна 	 	 	… 	… 	…
Описание слайда:

Структура HTML-файла <HTML> <HEAD> <TITLE>заголовок окна</TITLE> </HEAD> <BODY> … … … </BODY> </HTML>

11 слайд Задание На Рабочем столе в папке СТИХИ открыть файл КОЗЛЕНОК.txt
Описание слайда:

Задание На Рабочем столе в папке СТИХИ открыть файл КОЗЛЕНОК.txt

12 слайд Сделаем Web-страницу, содержащую это стихотворение       Стих
Описание слайда:

Сделаем Web-страницу, содержащую это стихотворение <BODY> </BODY> </HEAD> <HEAD> <HTML> <TITLE> Стих </TITLE> </HTML>

13 слайд Сохраним нашу Web-страницу в текстовом формате Переименуем полученный текстов
Описание слайда:

Сохраним нашу Web-страницу в текстовом формате Переименуем полученный текстовой файл, присвоив ему расширение html    Получаем Web-страницу 

14 слайд Откроем полученный Web-сайт Браузер Internet Explorer вывел наше стихотворени
Описание слайда:

Откроем полученный Web-сайт Браузер Internet Explorer вывел наше стихотворение без переходов на новую строку. Хотелось бы показать стихотворение по-человечески. Для указания перехода на новую строку используется непарный тег <BR>. Данный тег ставится в месте перехода на новую строку.

15 слайд Чтобы внести данный тег в текст HTML-файла нужно в Строке меню выбрать Вид→Пр
Описание слайда:

Чтобы внести данный тег в текст HTML-файла нужно в Строке меню выбрать Вид→Просмотр HTML-кода

16 слайд После внесения изменений HTML-файл будет выглядеть следующим образом:
Описание слайда:

После внесения изменений HTML-файл будет выглядеть следующим образом: <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>

17 слайд Сохраняем с внесёнными изменениями Закрываем полученный документ
Описание слайда:

Сохраняем с внесёнными изменениями Закрываем полученный документ

18 слайд Снова открываем наш Web-сайт. Чтобы увидеть внесённые изменения, страницу нуж
Описание слайда:

Снова открываем наш Web-сайт. Чтобы увидеть внесённые изменения, страницу нужно обновить. ОБНОВЛЕНИЕ I способ В Строке меню выбрать Вид→Обновить

19 слайд Теперь наша Web-страница выглядит лучше Добавим на страницу цветной фон. Для
Описание слайда:

Теперь наша Web-страница выглядит лучше Добавим на страницу цветной фон. Для этого в теге <BODY> допишем атрибут bgcolor с указанием цвета. Например: <BODY bgcolor=yellow>

20 слайд bgcolor=pink Не забудьте сохранить файл и обновить страницу
Описание слайда:

bgcolor=pink Не забудьте сохранить файл и обновить страницу

21 слайд Вот наша Web-страница Сделаем текст стихотворения цветным. Для этого в теге
Описание слайда:

Вот наша Web-страница Сделаем текст стихотворения цветным. Для этого в теге <BODY> допишем атрибут text с указанием цвета. Например: <BODY text=cyan>

22 слайд text=blue Не забудьте сохранить файл и обновить страницу
Описание слайда:

text=blue Не забудьте сохранить файл и обновить страницу

23 слайд Наша Web-страница преобразилась Сделаем заголовок стихотворения и имя автора
Описание слайда:

Наша Web-страница преобразилась Сделаем заголовок стихотворения и имя автора крупнее. Для этого воспользуемся парным тегом <BIG></BIG>.

24 слайд Не забудьте сохранить файл и обновить страницу
Описание слайда:

Не забудьте сохранить файл и обновить страницу <BIG> </BIG>

25 слайд Теперь наша Web-страница выглядит лучше Добавим на нашу Web-страницу картинку
Описание слайда:

Теперь наша Web-страница выглядит лучше Добавим на нашу Web-страницу картинку. Нам понадобится непарный тег <IMG> с атрибутом src, после которого указывается полное название картинки. Например: <IMG src=kolobok.jpeg>

26 слайд Вставьте на созданную нами Web-страницу картинку с изображением козлёнка. Кар
Описание слайда:

Вставьте на созданную нами Web-страницу картинку с изображением козлёнка. Картинка с козлёнком называется 248.gif <IMG src=248.gif> Не забудьте сохранить файл и обновить страницу

27 слайд Создадим на нашей Web-странице бегущую строку. Движущийся элемент должен нахо
Описание слайда:

Создадим на нашей Web-странице бегущую строку. Движущийся элемент должен находиться внутри парного тега <MARQUEE></MARQUEE>. Например: <MARQUEE> <IMG src=kolobok.jpeg> </MARQUEE> Задание Сделайте бегущей строкой название стихотворения и изображение козлёнка

28 слайд     Не забудьте сохранить файл и обновить страницу
Описание слайда:

<MARQUEE> </MARQUEE> <MARQUEE> </MARQUEE> Не забудьте сохранить файл и обновить страницу

29 слайд Задание Представьте себя Web-дизайнерами и создайте свои сайты со стихами Агн
Описание слайда:

Задание Представьте себя Web-дизайнерами и создайте свои сайты со стихами Агнии Барто. Тексты стихотворений и картинки вы можете найти в папке ЗАДАНИЕ.

30 слайд
Описание слайда:

Краткое описание документа:
Это урок изучения нового материала, на котором у детей должно сформироваться первое представление о структуре HTML-документа. На уроке учащиеся получат первые навыки создания Web-страниц, сформируют первое понятие «тега» и  познакомятся с типами тегов. В ходе урока ребята просмотрят презентацию к данному уроку, где наглядно смогут увидеть поэтапное создание HTML-документа. Научаться открывать, набирать, просматривать и сохранять Web-страницы. В конце данного урока предусмотрены задания, которые выполняя учащиеся должны применить все полученные знания и навыки работы с HTML- документом.
Общая информация

Номер материала: 77989042150

Вам будут интересны эти курсы:

Курс повышения квалификации «Информационные технологии в деятельности учителя физики»
Курс повышения квалификации «Методика преподавания информатики в начальных классах»
Курс повышения квалификации «Современные информационные технологии и их использование в работе преподавателей. Системы автоматизированного проектирования одежды и организация технологического процесса»
Курс повышения квалификации «Основы создания интерактивного урока: от презентации до видеоурока»
Курс повышения квалификации «Внедрение системы компьютерной математики в процесс обучения математике в старших классах в рамках реализации ФГОС»
Курс профессиональной переподготовки «Информатика: теория и методика преподавания в образовательной организации»
Курс «1С: Предприятие 7.7»
Курс «WEB-ВЕРСТКА (HTML, CSS)»
Курс повышения квалификации «Сетевые и дистанционные (электронные) формы обучения в условиях реализации ФГОС по ТОП-50»
Курс повышения квалификации «Развитие информационно-коммуникационных компетенций учителя в процессе внедрения ФГОС: работа в Московской электронной школе»
Курс профессиональной переподготовки «Информационные технологии в профессиональной деятельности: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Введение в программирование на языке С (СИ)»
Курс профессиональной переподготовки «Управление в сфере информационных технологий в образовательной организации»
Курс профессиональной переподготовки «Теория и методика обучения информатике в начальной школе»
Курс профессиональной переподготовки «Математика и информатика: теория и методика преподавания в образовательной организации»
Оставьте свой комментарий
Для того чтобы задавать вопросы нужно авторизироватся.
Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.