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

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

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

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

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

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

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

Выбранный для просмотра документ Плаксо В.А., Колледж связи №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...

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

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

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

Номер материала: ДВ-552307

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

Курс повышения квалификации «Информационные технологии в деятельности учителя физики»
Курс повышения квалификации «Основы создания интерактивного урока: от презентации до видеоурока»
Курс повышения квалификации «Облачные технологии в образовании»
Курс «Фирменный стиль» (Corel Draw, Photoshop)
Курс «Оператор персонального компьютера»
Курс «3D Studio MAX»
Курс повышения квалификации «Сетевые и дистанционные (электронные) формы обучения в условиях реализации ФГОС по ТОП-50»
Курс повышения квалификации «Развитие информационно-коммуникационных компетенций учителя в процессе внедрения ФГОС: работа в Московской электронной школе»
Курс повышения квалификации «Использование компьютерных технологий в процессе обучения в условиях реализации ФГОС»
Курс повышения квалификации «Специфика преподавания информатики в начальных классах с учетом ФГОС НОО»
Курс повышения квалификации «Применение MS Word, Excel в финансовых расчетах»
Курс профессиональной переподготовки «Управление в сфере информационных технологий в образовательной организации»
Курс повышения квалификации «Современные тенденции цифровизации образования»
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»
Курс повышение квалификации «Применение интерактивных образовательных платформ на примере платформы Moodle»

Благодарность за вклад в развитие крупнейшей онлайн-библиотеки методических разработок для учителей

Опубликуйте минимум 3 материала, чтобы БЕСПЛАТНО получить и скачать данную благодарность

Сертификат о создании сайта

Добавьте минимум пять материалов, чтобы получить сертификат о создании сайта

Грамота за использование ИКТ в работе педагога

Опубликуйте минимум 10 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Свидетельство о представлении обобщённого педагогического опыта на Всероссийском уровне

Опубликуйте минимум 15 материалов, чтобы БЕСПЛАТНО получить и скачать данное cвидетельство

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

Опубликуйте минимум 20 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Грамота за активное участие в работе над повышением качества образования совместно с проектом "Инфоурок"

Опубликуйте минимум 25 материалов, чтобы БЕСПЛАТНО получить и скачать данную грамоту

Почётная грамота за научно-просветительскую и образовательную деятельность в рамках проекта "Инфоурок"

Опубликуйте минимум 40 материалов, чтобы БЕСПЛАТНО получить и скачать данную почётную грамоту

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