Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Другие методич. материалы / Урок по информатике на тему "Язык разметки гипертеста HTML"

Урок по информатике на тему "Язык разметки гипертеста HTML"

Международный конкурс по математике «Поверь в себя»

для учеников 1-11 классов и дошкольников с ЛЮБЫМ уровнем знаний

Задания конкурса по математике «Поверь в себя» разработаны таким образом, чтобы каждый ученик вне зависимости от уровня подготовки смог проявить себя.

К ОПЛАТЕ ЗА ОДНОГО УЧЕНИКА: ВСЕГО 28 РУБ.

Конкурс проходит полностью дистанционно. Это значит, что ребенок сам решает задания, сидя за своим домашним компьютером (по желанию учителя дети могут решать задания и организованно в компьютерном классе).

Подробнее о конкурсе - https://urokimatematiki.ru/


Идёт приём заявок на самые массовые международные олимпиады проекта "Инфоурок"

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

1. Бесплатные наградные документы с указанием данных образовательной Лицензии и Свидeтельства СМИ;
2. Призовой фонд 1.500.000 рублей для самых активных учителей;
3. До 100 рублей за одного ученика остаётся у учителя (при орг.взносе 150 рублей);
4. Бесплатные путёвки в Турцию (на двоих, всё включено) - розыгрыш среди активных учителей;
5. Бесплатная подписка на месяц на видеоуроки от "Инфоурок" - активным учителям;
6. Благодарность учителю будет выслана на адрес руководителя школы.

Подайте заявку на олимпиаду сейчас - https://infourok.ru/konkurs

  • Информатика

Документы в архиве:

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

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

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

Название документа pril4.doc

Поделитесь материалом с коллегами:

Язык разметки гипертекста HTML (HyperText Markup Language)

Тег – инструкция браузеру, указывающая способ отображения текста.


Основные теги HTML

Начало и конец страницы

абзац

Описание страницы


Имя окна заголовка



Содержание страницы




Переход на новую строку



Укрупнение текста



Бегущая строка



src>

Вставка изображения




Основные цвета

Имя

Описание

Имя

Описание

Имя

Описание

Имя

Описание

black

чёрный

red

красный

magenta

малиновый

teal

петроль

lime

ярко-зелёный

pink

розовый

blue

синий

lightyellow

светло-жёлтый

green

зелёный

maroon

коричневый

lightblue

небесно-синий

yellow

жёлтый

lightgreen

светло-зелёный

brown

коричневый

aqua

голубой

navy

тёмно-синий

olive

оливковый

fuchsia

сиреневый

cyan

циан

gray

серый

white

белый

purple

фиолетовый

lightcyan

светло-синий

silver

серебряный

---------------------------------------------------------------------------------------------------------------------------------------------

Язык разметки гипертекста HTML (HyperText Markup Language)

Тег – инструкция браузеру, указывающая способ отображения текста.


Основные теги HTML

Начало и конец страницы

абзац

Описание страницы


Имя окна заголовка



Содержание страницы




Переход на новую строку



Укрупнение текста



Бегущая строка



Вставка изображения




Основные цвета

Имя

Описание

Имя

Описание

Имя

Описание

Имя

Описание

black

чёрный

red

красный

magenta

малиновый

teal

петроль

lime

ярко-зелёный

pink

розовый

blue

синий

lightyellow

светло-жёлтый

green

зелёный

maroon

коричневый

lightblue

небесно-синий

yellow

жёлтый

lightgreen

светло-зелёный

brown

коричневый

aqua

голубой

navy

тёмно-синий

olive

оливковый

fuchsia

сиреневый

cyan

циан

gray

серый

white

белый

purple

фиолетовый

lightcyan

светло-синий

silver

серебряный

---------------------------------------------------------------------------------------------------------------------------------------------

Язык разметки гипертекста HTML (HyperText Markup Language)

Тег – инструкция браузеру, указывающая способ отображения текста.


Основные теги HTML

Начало и конец страницы

абзац

Описание страницы


Имя окна заголовка



Содержание страницы




Переход на новую строку



Укрупнение текста



Бегущая строка



Вставка изображения




Основные цвета

Имя

Описание

Имя

Описание

Имя

Описание

Имя

Описание

black

чёрный

red

красный

magenta

малиновый

teal

петроль

lime

ярко-зелёный

pink

розовый

blue

синий

lightyellow

светло-жёлтый

green

зелёный

maroon

коричневый

lightblue

небесно-синий

yellow

жёлтый

lightgreen

светло-зелёный

brown

коричневый

aqua

голубой

navy

тёмно-синий

olive

оливковый

fuchsia

сиреневый

cyan

циан

gray

серый

white

белый

purple

фиолетовый

lightcyan

светло-синий

silver

серебряный

---------------------------------------------------------------------------------------------------------------------------------------------

Название документа Язык разметки гипертекста HTML.doc

Поделитесь материалом с коллегами:

Тема урока "Язык разметки гипертекста HTML"

Цели: Образовательные:

  1. Знакомство с языком разметки гипертекста HTML.

  2. Совершенствование работы с операционной системой Windows.

Воспитательная:

  1. Воспитание культуры сайтостроения.

Развивающая:

  1. Расширение кругозора.

  2. Развитие навыков применения компьютерных технологий при создании web-сайтов.

  3. Развитие активности и самостоятельности.

  4. Формирование умения работать фронтально и индивидуально.

  5. Развитие творческих способностей.

Место и база знаний:

  1. Участники мастер-класса имеют навыки работы в операционной системе Windows.

  2. Участники мастер-класса знакомы с различными форматами графических файлов.

Общедидактические принципы, используемые на мастер-классе:

Принцип сознательности и активности участников мастер-класса:

Понимание участников мастер-класса целей предстоящей работы, плана действий и методики работы.

Принцип наглядности:

Демонстрация ведущего мастер-класса всех действий, выполняемых участниками мастер-класса.

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

Опора на имеющиеся у участников мастер-класса знания и умения.

Предварительная подготовка:

  1. Создана презентация.

  2. Подобраны стихи и картинки дл самостоятельной работы участников мастер-класса.

  3. подготовлен и распечатан раздаточный материал.

Оборудование и материалы, необходимые для проведения мастер-класса:

  1. Компьютерный класс с установленной на все компьютеры операционной системой Windows (не ниже 98).

  2. Мультимедийный проектор с экраном.

  3. Раздаточный материал.

Материалы для проведения:

  1. Презентация (приложение_1).

  2. Задание для фронтальной работы (приложение_2).

  3. Задание для самостоятельной работы (приложение_3).

  4. Раздаточный материал (приложение_4).

Самые низкие цены на курсы профессиональной переподготовки и повышения квалификации!

Предлагаем учителям воспользоваться 50% скидкой при обучении по программам профессиональной переподготовки.

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца (признаётся при прохождении аттестации по всей России).

Обучение проходит заочно прямо на сайте проекта "Инфоурок".

Начало обучения ближайших групп: 18 января и 25 января. Оплата возможна в беспроцентную рассрочку (20% в начале обучения и 80% в конце обучения)!

Подайте заявку на интересующий Вас курс сейчас: https://infourok.ru/kursy



Автор
Дата добавления 09.11.2015
Раздел Информатика
Подраздел Другие методич. материалы
Просмотров200
Номер материала ДВ-137004
Получить свидетельство о публикации

УЖЕ ЧЕРЕЗ 10 МИНУТ ВЫ МОЖЕТЕ ПОЛУЧИТЬ ДИПЛОМ

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

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

Список всех тестов можно посмотреть тут - https://infourok.ru/tests


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