Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Свидетельство о публикации

Автоматическая выдача свидетельства о публикации в официальном СМИ сразу после добавления материала на сайт - Бесплатно

Добавить свой материал

За каждый опубликованный материал Вы получите бесплатное свидетельство о публикации от проекта «Инфоурок»

(Свидетельство о регистрации СМИ: Эл №ФС77-60625 от 20.01.2015)

Инфоурок / Информатика / Конспекты / Урок «Основы языка HTML»
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

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

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

Урок «Основы языка 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-дизайнерами и создайте свои сайты со стихами Агн...
30 1

Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


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

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

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

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

№ слайда 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
Описание слайда:


Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


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

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

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

Краткое описание документа:

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

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