Инфоурок / Информатика / Конспекты / Открытый урок по теме: "Язык разметки гипер-документов"

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


Выбранный для просмотра документ Фомичева О.Ю., Дубовский зооветеринарный колледж,Тема - Язык разметки гипер-документов.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

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

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

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

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

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

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

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

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

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

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

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

№ слайда 6 Элементы заголовка 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">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Только до конца зимы! Скидка 60% для педагогов на ДИПЛОМЫ от Столичного учебного центра!

Курсы профессиональной переподготовки и повышения квалификации от 1 400 руб.
Для выбора курса воспользуйтесь удобным поиском на сайте KURSY.ORG


Вы получите официальный Диплом или Удостоверение установленного образца в соответствии с требованиями государства (образовательная Лицензия № 038767 выдана ООО "Столичный учебный центр" Департаментом образования города МОСКВЫ).

Московские документы для аттестации: KURSY.ORG


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

Номер материала: ДБ-144323

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