Создание сайта с использованием языка гипертекстовой разметки документов
план-конспект урока по информатике и икт (8 класс)

Тема занятия: «Создание сайта с использованием языка гипертекстовой разметки документов».

 

Цель занятия: Ученики создадут Web-сайт, содержащий пять Web-страниц, знакомящий с основными тегами языка гипертекстовой разметки документов HTML.

 

Учащиеся должны знать:

  • определение следующих понятий: «Web-страница», «Web-сайт», «гипертекст», «гиперссылка», «браузер», «HTML», «тег»;
  • основные характеристики Web-ресурса;
  • структуру Web-документа;
  • назначение и атрибуты основных тегов.

 

Учащиеся должны уметь:

  • создавать HTML-файлы;
  • оформлять заголовки;
  • управлять размером, гарнитурой и цветом шрифта;
  • выделять и выравнивать абзацы;
  • размещать графику на Web-странице;
  • создавать гиперсвязи между страницами сайта.

 

 

Скачать:

Предварительный просмотр:


Подписи к слайдам:

Слайд 1

Открытый урок информатики в 8 классе в рамках заседания муниципального МО учителей математики, физики и информатики по теме « Совершенствование технологии в образовательной деятельности» Выполнил: Семёнов А.О., учитель информатики Муниципальное бюджетное общеобразовательное учреждение " Арборская основная общеобразовательная школа "

Слайд 3

Интерне́т (англ. Internet , МФА: [ˈɪn.tə.net]) — всемирная система объединённых компьютерных сетей для хранения, обработки и передачи информации. Упоминается как Всемирная сеть и Глобальная сеть, а также просто Сеть.

Слайд 8

1. Это глобальная компьютерная сеть, в которой локальные, региональные и корпоративные сети соединены между собой? И Н ТЕРНЕТ 2. Как называется путь разбиение файлов на Интернет–пакеты ? Т ранспортировка данных 3. Интернет–пакетов обеспечивает доставку информации от компьютера–отправителя к компьютеру–получателю ? М аршрутизация 4. Первая поисковая система русскоязычного сегмента сети Интернет? RAMB L ER

Слайд 10

Тема урока: «Разработка сайта с помощью языка разметки гипертекстового документа HTML »

Слайд 11

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

Слайд 12

HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML ).

Слайд 13

Описательный язык разметки HTML имеет свои команды, которые называются тэгами. Тэг – это команда языка HTML , которую выполняет браузер. Тэги заключаются в угловые скобки. </ title> <hr></p><p class='slide-number'>Слайд 15</p><p>Размер шрифта для имеющихся в тексте заголовков задается тэгами от <Н 1 > (самый крупный) до <Н6> (самый мелкий) < Н1> Привет! </ Н1> Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN Выравнивание по правой границе ALIGN =" right " а по центру — ALIGN =" center « < Н1 ALIGN = " right "> Мы создаём сайт </ Н1></p><p class='slide-number'>Слайд 16</p><p>С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста атрибут COLOR — цвет шрифта (например, COLOR =" red " ) < FONT COLOR =" red "><Н1 ALIGN =“ left "> Мы создаём сайт </ Н1></ FONT > <Р></Р> тег «параграф», отделяет абзацы друг от друга. В соответствии с международным стандартом абзацы разделяются пустыми строками и не начинаются с красной строки</p><p class='slide-number'>Слайд 17</p><p>< em ></ em > используется для выделения из текста курсивом < strong ></ strong > используется для выделения жирным шрифтом < br ></ br > Следующее за этим тегом содержание HTML -файла будет просто начинаться с новой строки</p><p class='slide-number'>Слайд 18</p><p>Вставка изображений Для вставки изображения используется тэг < IMG > с атрибутом SRC <IMG SRC = «мяч .jpg"> мяч .jpg</p><p class='slide-number'>Слайд 19</p><p>Чтобы создать web -страницу, необходимо: создать текстовый файл с помощью языка HTML , например, в Блокноте; сохранить с расширением . html Просмотреть документ с помощью браузера</p><p class='slide-number'>Слайд 20</p><p>Практическая работа Победа Мы помним, мы гордимся 9 мая страна отмечает 7 5 -летие Победы над фашисткими захватчиками в Великой Отечественной войне. Изображение Поклонимся великим тем годам, Тем славным командирам и бойцам И маршалам страны и рядовым. Поклонимся и мёртвым и живым. Всем тем которых забывать нельзя Поклонимся поклонимся друзья <html> <head> <title>

< img src =“vo.gif">

< br > < br > < br >

Слайд 21

1. HTML это … А. язык разметки гипертекста; Б. протокол передачи Web -страниц; В. протокол передачи файлов по сети Интернет; Г. программа - браузер; Д. разметочный знак гипертекста. ТЕСТ «Основы языка HTML »

Слайд 22

2.Для того, чтобы отличить разметочный знак (тег) от обычного текста, он обрамляется символами … А. !…!; Б.@…@; В. #…#; Г. ^…^; Д. <…>. ТЕСТ «Основы языка HTML »

Слайд 23

ТЕСТ «Основы языка HTML » 3. Для задания области действия разметочного знака используются парные знаки. Закрывающий тег отличается от открывающегося тем, что … А. код тега записывается прописными буквами; Б. код тега записывается строчными буквами; В. перед кодом ставится символ / - косая черта; Г. перед кодом ставится символ * - звездочка; Д. ничем не отличается.

Слайд 24

ТЕСТ «Основы языка HTML » 4. Заголовочная часть HTML -документа выделяется тегом … А. HTML ; Б. HEAD ; В. BODY ; Д. TITLE ; Е. STRONG .

Слайд 25

ТЕСТ «Основы языка HTML » 5.Основной текст документа выделяется тегом … А. HTML ; Б. HEAD ; В. BODY ; Г. TITLE ; Д. STRONG .

Слайд 26

ТЕСТ «Основы языка HTML » 6.Для обозначения абзаца служит тег … А. BR ; Б. H 1; В. P ; Г. HR ; Д. A .

Слайд 27

Ответы А Д В Б В В

Слайд 28

Кроссворд на тему: Язык разметки гипертекста HTML

Слайд 29

Я научился… Мне было интересно… Мне было трудно… Я понял, что … Я могу… Закончи фразу

Слайд 30

СПАСИБО ЗА УРОК! МОЛОДЦЫ!



Предварительный просмотр:

Урок информатики в 8 классе

МБОУ «Арборская ООШ»

Семёнов Александр Олегович

Тема занятия: «Создание сайта с использованием языка гипертекстовой разметки документов».

Цель занятия: Ученики создадут Web-сайт, содержащий пять Web-страниц, знакомящий с основными тегами языка гипертекстовой разметки документов HTML.

Учащиеся должны знать:

  • определение следующих понятий: «Web-страница», «Web-сайт», «гипертекст», «гиперссылка», «браузер», «HTML», «тег»;
  • основные характеристики Web-ресурса;
  • структуру Web-документа;
  • назначение и атрибуты основных тегов.

Учащиеся должны уметь:

  • создавать HTML-файлы;
  • оформлять заголовки;
  • управлять размером, гарнитурой и цветом шрифта;
  • выделять и выравнивать абзацы;
  • размещать графику на Web-странице;
  • создавать гиперсвязи между страницами сайта.

Аппаратное и программное обеспечение: Компьютеры, мультимедийный проектор с экраном, текстовый редактор, программа браузер, мультимедийная презентация «Создание Web-сайта. Язык разметки гипертекстовых документов HTML».

Ход урока.

Слайд 1:

Здравствуйте, ребята!

Слайд 2: Ребята, какой значок изображен на слайде?

Да. Это значок информации. Надеюсь, мы сегодня взаимно получим полезную информацию друг от друга.

Ребята, наверняка у вас у всех есть компьютеры, возможно ноутбуки. Планшеты…И каждый из вас каждый день совершает путешествие через компьютер куда? В Интернет. И точно таких же, как Вы миллионы людей в это же время тоже путешествуют по интернету. А Что такое Интернет?

Слайд 3: Правильно – это глобальная компьютерная сеть. Благодаря этой сети каждый из миллионов людей имеет доступ к информации, хранящейся в компьютере, находящемся в любой точке земного шара. Это так называемая Всемирная паутина.

Ребята, как мы  попадаем в Интернет?

Через браузер. Какие браузеры вы знаете? Слайд 4.

Слайд 5: Каждый из нас выходит в Интернет для поиска нужной информации. Ища эту информацию, мы посещаем различные сайты. На какие виды делятся сайты? Слайд 6

Я думаю что, вы согласитесь с тем что, каждый человек по-своему интересный и, наверное, каждый заслуживает иметь собственную страничку в сети или даже целый сайт. Но не все умеют создавать Web-странички, в частности мы с вами. Ну а если мы знаем, как здорово иметь собственный сайт, возможно, даже и не один но, к сожалению, не умеем пока его создать, то какая потребность у нас возникает?

Ожидаемый ответ: Научиться создавать собственные Web-сайты.

- А может ли умение создавать сайты, пригодиться вам в будущем, если да то как?

Ожидаемый ответ: Создать сайт своей фирмы, рассказать о своих успехах, увлечениях и т.д., зарабатывать, создавая сайты по заказу.

Слайд 7: Как же создать сайт? Что для этого нужно знать?

Слайд 8:

- Посмотрите на экран и скажите какое слово получилось из букв правильных ответов: HTML

Слайд 9: Значит мы сегодня будем учиться создавать веб-сайты с помощью…

Web-страницы. Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере.

Слайд 14:

HTML-код страницы помещается внутрь контейнера . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и отображаемое в браузере содержание.

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

Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называется контейнером).

Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.

Название страницы помещается в контейнер и при просмотре отображается в верхней строке окна браузера.

Выполнение практической работы №2

Цель работы:

  • Научиться создавать, просматривать и редактировать HTML-документы;
  • Оформлять заголовки;
  • Управлять размером, гарнитурой и цветом шрифта;
  • Выделять и выравнивать абзацы;
  • Размещать графику на Web-странице.
  • Создавать гиперсвязи между страницами сайта.

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

Итог урока

Фронтальная беседа: что сегодня узнали на уроке, чему научились?

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

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


По теме: методические разработки, презентации и конспекты

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

В презентации отражена история создания Интернета, приведены схемы организации Web-страниц. Подробно разобраны самые основные дескрипторы языка HTML....

Открытый урок по информатике на тему "Разработка Web-сайтов с использованием языка разметки гипертекста HTML"

Открытый урок по информатике на тему "Разработка Web-сайтов с использованием языка разметки гипертекста HTML" Цели урока: Повторение основных принципов построения сайтов, структуры HTML-документа...

Создание сайта с помощью языка гипертекстовой разметки HTML

обучающая презентация по созданию сайта при помощи языка гипертекстовой разметки HTML...

Контрольный тест по теме "Язык гипертекстовой разметки документов", 9 класс

Данный тест может быть использован для контроля знаний по теме "Язык гипертекстовой разметки документов" в 9 классе, так и в качестве проверочной работы в начале урока....

Конспект занятия по теме: «Создание Web-сайтов с использованием языка гипертекстовой разметки документов HTML».

Цель занятия: воспитанники создадут Web-сайт, содержащий пять Web-страниц, знакомящий с основными тегами языка гипертекстовой разметки документов HTML. Учащиеся должны знать:определение следующих...

Создание Web-сайта с помощью языка гипертекстовой разметки HTML

Создание Web-сайта с помощью языка гипертекстовой разметки HTML...