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

Опубликуйте свой материал в официальном Печатном сборнике методических разработок проекта «Инфоурок»

(с присвоением ISBN)

Выберите любой материал на Вашем учительском сайте или загрузите новый

Оформите заявку на публикацию в сборник(займет не более 3 минут)

+

Получите свой экземпляр сборника и свидетельство о публикации в нем

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

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

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

Методическая разработка занятия "Язык разметки гипер-документов"

Выбранный для просмотра документ Плаксо В.А., Колледж связи №54 г. Москвы,Тема - Язык разметки гипер-документов.docx

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

ПЛАН-КОНСПЕКТ УРОКА
«Язык разметки гипер-документов»


Цели урока:

общеобразовательные цели:

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

  • изучить с учащимися структуру Web-страницы;

  • отработать умение учащихся создаватьWeb-страницу с помощью приложения Блокнот;

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

воспитательные цели:

  • формирование системного мышления;

  • восприятие компьютера как инструмента информационной деятельности человека;

  • формирование эмоционально-целостного отношения к миру и к себе;

  • формирование мировоззренческой позиции при описании объективной действительности.

развивающие цели:

  • формирование социальной направленности любой деятельности;

  • освоение способов эффективного взаимодействия в процессе учебной коммуникации.


Формы организации познавательной деятельности учащихся:

  1. фронтальные;

  2. индивидуальные.

  3. Групповые

Оборудование: проектор, доска, ПК.


Ход занятия:


I.Оргмомент (приветствие учащихся и проверка присутствия)

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

(1 слайд презентации)

- Что такое Интернет?

-Интернет – это глобальная компьютерная сеть, охватывающая весь мир.

- Какие вы знаете службы сети Интернет?

-К службам сети Интернет относятся:

электронная почта,

интернет-магазины,

чаты,

интернет-телефония,

интернет-радио,

интернет-телевидение,

телеконференции,

служба WorldWideWeb (WWW), позволяющая осуществлять поиск информации.

- Чем характеризуются различные службы сети Интернет?

-Разные службы сети Интернет функционируют по разным протоколам.

(2 слайд презентации)

- Какой протокол использует служба WWW?

-Служба WWW использует протокол HTTP – протокол передачи гипертекста.

-Что такое гипертекст?

Гипертекст – это текст, содержащий гиперссылки, т.е. некоторое слово или объект для перехода на другой фрагмент документа или на другую Web-страницу.

-Как называют все документы службы WWW?

-Все документы службы WWW называют Web-документами, Web-страницами, HTML-документами. Каждая Web-страница имеет свой собственный URL-адрес.

- Что такое сайт?

-Сайт – это группа взаимосвязанных Web-страниц, объединённых или единой тематикой, или единым авторством, или единым владельцем.

-А кто знает, как делаются сайты и соответственно все его страницы?

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

- Как можно назвать все эти команды, объединив их одним признаком – назначением?

- Все эти команды предназначены для разметки гипер-страниц сайтов, поэтому можно их назвать не командами разметки, а «языком» разметки гипер-страниц. (если у детей не получается сформулировать сразу ответ на вопрос, необходимо задать наводящие вопросы, чтобы они сами пришли к вышеописанному выводу)

(3 слайд презентации)

- Все верно. Поэтому сегодня мы с вами ознакомимся с некоторыми частями этого «языка разметки документов». Поэтому тема сегодняшнего нашего занятия – «Язык разметки документов»



III. Постановка цели занятия перед учащимися:

- ознакомиться с основными понятиями гипертекстовых технологий

- ознакомиться с основными командами, необходимыми для создания веб-страниц, которые понадобятся для выполнения практической работы на компьютере

- научиться применять эти основные команды для связывания созданных веб-страниц.


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

  1. Изучение основных понятий (4 слайд презентации)

(разбор понятий с приведением примеров самими учащимися)

  1. Изучение структуры тегов (5 слайд презентации)

  2. Рассмотрение общей структуры документов HTML(6 слайд презентации)

(записать структуру в тетради для образца с объяснением назначения каждого тега)

  1. Рассмотрение элементов заголовка html-документа (тэг HEAD) и его параметров(7 слайд презентации)

  2. Рассмотрение элементовстиля и форматирования текста.(8-12 слайд презентации)

  3. Рассмотрение использования тега создания гиперссылок.(13 слайд презентации)

  4. Рассмотрениеиспользования тегов создания и изменения фона и цвета веб-страниц (14 слайд презентации)

  5. Рассмотрение использования тега вставки рисунка (15 слайд презентации)

Примечание:

Все теги записываются детьми в тетради с целью дальнейшего использования при выполнении практической работы. При рассмотрении необходимо преподавателю одновременно демонстрировать действие этих тегов.




V. Закрепление изученного материала

1. Фронтальный опрос по теоретической части изученного материала

2. Практическая работа по созданию элементарной веб-страницы в текстовом редакторе Блокнот, используя ранее изученные теги. (Структура и содержание страниц свободное, работа проводится в группах по 2-3 человека)


VI.Контроль знаний

- проверка выполненных практических работ и выставление оценок

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


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

- повторить материал изученный на занятии

- сделать 3 веб-страницы и используя тег создания гиперссылок связать их между собой.


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

библиотека
материалов
www.google.ru http://www.google.ru
Язык разметки гипер - документов Тема:
Основные понятия Web-браузер – программа поиска и просмотра информации в Web....
Основы языка HTML Основные элементы языка – команды (ТЭГИ) Тэги:	 …  Параметр...
Общая структура документа HTML 	 		  		Содержание заголовка 		  			 			Содерж...
Элементы заголовка html-документа (тэг HEAD)  Название документа Название док...
Элементы стиля и форматирования текста. 	Текст, заключенный между открывающим...
Элемент (тэг) Значение ..... Курсив ... Усиление (полужирный) ... Подчеркиван...
… Абзац Закрывающий тэг необязателен … Принудительный перенос на следующую с...
Списки Элемент Значение Комментарий  .....  Ненумерованный список Дополнител...
…  Список определений Дополнительные тэги: … - Понятие, аббревиатура … - ра...
Гиперссылки. 	 Текст_гиперссылки , где“Имя _URL” – Полный адрес или относител...
Фон и цвета Фоновая картинка:  Цвет фона:  (порядок: красный/зеленый/синий) Ц...
Вставка рисунков  Выравнивание картинки относительно страницы: ALIGN=TOP|BOTT...
15 1

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

№ слайда 1
Описание слайда:

№ слайда 2 www.google.ru http://www.google.ru
Описание слайда:

www.google.ru http://www.google.ru

№ слайда 3 Язык разметки гипер - документов Тема:
Описание слайда:

Язык разметки гипер - документов Тема:

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

Основные понятия Web-браузер – программа поиска и просмотра информации в Web. Гиперссылки – подсвечиваемые фрагменты текста или графические изображения, расположенные на Web-страницах, позволяющие быстро переходить к другим страницам Web. HTML – язык разметки гипертекста (Hypertext Markup Language) Разметка документа - это описание различных фрагментов документа и их взаимного расположения.

№ слайда 5 Основы языка HTML Основные элементы языка – команды (ТЭГИ) Тэги:	 …  Параметр
Описание слайда:

Основы языка HTML Основные элементы языка – команды (ТЭГИ) Тэги: <имя> … </имя> Параметры тэгов – указываются внутри тэга, разделяются пробелами: Имя_параметра = “Значение_параметра”

№ слайда 6 Общая структура документа HTML 	 		  		Содержание заголовка 		  			 			Содерж
Описание слайда:

Общая структура документа HTML <HTML> <HEAD> Содержание заголовка </HEAD> <BODY> Содержание тела документа </BODY> </HTML>

№ слайда 7 Элементы заголовка html-документа (тэг HEAD)  Название документа Название док
Описание слайда:

Элементы заголовка html-документа (тэг HEAD) <TITLE> Название документа <TITLE>Название документа</TITLE> <BASE> Базовый адрес <BASEHREF="http://potor.baikal.ru/> <ISINDEX> Поисковый документ <ISINDEXHREF="http://potor.baikal.ru/" PROMPT="Enter Keywords:"> <LINK> Общая гипертекстовая ссылка <LINKREL="Help"HREF="http://potor.baikal.ru/help.html"> <META> Определение основных способов поиска и ключевых слов в документе для поисковых роботов <METAHTTP-EQUIV="Keywords" CONTENT="java, class">

№ слайда 8 Элементы стиля и форматирования текста. 	Текст, заключенный между открывающим
Описание слайда:

Элементы стиля и форматирования текста. Текст, заключенный между открывающим и закрывающим тэгами, воспроизводится в соответствии со значением тэга и его параметров.

№ слайда 9 Элемент (тэг) Значение ..... Курсив ... Усиление (полужирный) ... Подчеркиван
Описание слайда:

Элемент (тэг) Значение <I>.....</I> Курсив <B>...</B> Усиление (полужирный) <U>...</U> Подчеркивание <S>...</S> Перечеркнутый текст <Hn>…</Hn> Заголовки,n= 1,2, …,6, размеры и шрифт отличаются от обычного текста По мере увеличения важность заголовка снижается, позволяет делать ссылки на фрагменты документа

№ слайда 10 … Абзац Закрывающий тэг необязателен … Принудительный перенос на следующую с
Описание слайда:

<P>…</P> Абзац Закрывающий тэг необязателен <BR>…</BR> Принудительный перенос на следующую строку Закрывающий тэг необязателен <FONT> …</FONT> Определение основного текста документа Параметры: SIZE= “n” FACE= “Имя_шрифта” COLOR= ="#$$$$$$" (Шестнадцатеричное число. Порядок: красный/зеленый/синий) ALIGN= “LEFT|CENTER|RIGHT”– выравнивание текста

№ слайда 11 Списки Элемент Значение Комментарий  .....  Ненумерованный список Дополнител
Описание слайда:

Списки Элемент Значение Комментарий <UL> ..... </UL> Ненумерованный список Дополнительные тэги: <LH>…</LH> - заголовок списка <LI>…</LI> -элемент списка TYPE=DISC|CIRCLE|SQUARE–тип метки у списка <OL> ..... </OL> Нумерованный список Дополнительные тэги: <HL>…</HL> - заголовок списка <LI>…</LI> - элемент списка TYPE=A|a|I|i|1–тип нумерации OL START=?–с какого значения начать

№ слайда 12 …  Список определений Дополнительные тэги: … - Понятие, аббревиатура … - ра
Описание слайда:

<DL> … </DL> Список определений Дополнительные тэги: <DT>…</DT> - Понятие, аббревиатура <DD>…</DD> - расшифровка понятия, аббревиатуры <MENU> … </MENU> Список типа Меню <LI>…</LI> -элемент меню

№ слайда 13 Гиперссылки. 	 Текст_гиперссылки , где“Имя _URL” – Полный адрес или относител
Описание слайда:

Гиперссылки. <A HREF=”Имя_URL”> Текст_гиперссылки </A>, где“Имя _URL” – Полный адрес или относительный путь, определяющий источник для перехода по гиперссылке, Текст_гиперссылки – место в документе, которое будет гиперссылкой.

№ слайда 14 Фон и цвета Фоновая картинка:  Цвет фона:  (порядок: красный/зеленый/синий) Ц
Описание слайда:

Фон и цвета Фоновая картинка: <BODY BACKGROUND="URL"> Цвет фона: <BODY BGCOLOR="#$$$$$$"> (порядок: красный/зеленый/синий) Цвет текста: <BODY TEXT="#$$$$$$"> Цвет ссылки: <BODY LINK="#$$$$$$"> Пройденная ссылка: <BODY VLINK="#$$$$$$"> Активная ссылка: <BODY ALINK="#$$$$$$">

№ слайда 15 Вставка рисунков  Выравнивание картинки относительно страницы: ALIGN=TOP|BOTT
Описание слайда:

Вставка рисунков <IMG SRC="Адрес_или_путь/Имя_файла" ALT="текст_альтернативный" > Выравнивание картинки относительно страницы: ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT Выравнивание картинки относительно основного текста страницы: ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM

Автор
Дата добавления 24.03.2016
Раздел Информатика
Подраздел Конспекты
Просмотров126
Номер материала ДВ-552307
Получить свидетельство о публикации

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

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

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

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

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