Презентация "Основы языка разметки гипертекста HTML" 10 класс

Скачать материал

Из опыта работы
Ермаковой Вероники Викентьевны
учителя информатики
МОУ СОШ...

Скачать материал

Скачать материал "Презентация "Основы языка разметки гипертекста HTML" 10 класс"

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

Скачать материал

- 15.03.2017 116
- PPTX 1.8 мбайт
- Оцените материал:
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Автор материала

Логинова Ольга Аркадьевна
- На сайте: 2 месяца
- Подписчики: 0
- Всего просмотров: 5120
- Всего материалов: 68

«Язык разметки гипертекста HTML. Основы создания веб-страниц». Практическая (лабораторная) работа с элементами лекции. Информатика. 1 курс. СПО

Файл будет скачан в форматах:

pdf
docx

538

04.02.2025

Материал разработан автором:

Мельникова Тамара Леминовна

Преподаватель

Разработок в маркетплейсе: 156

Покупателей: 3 952

Об авторе

Место работы: ГПОУ ТО "ЩПК"

Преподаю в колледже следующие дисциплины: -информатика, -информационные технологии в профессиональной деятельности, -метрология и стандартизация, -технология и организация туроператорской деятельности, -современная оргтехника и организация делопроизводства. Моя цель как преподавателя — не только передать знания, но и помочь студентам овладеть практическими навыками, которые будут полезны в их будущей карьере. Именно поэтому в своей работе я активно использую современные технологии, в том числе искусственный интеллект, чтобы сделать обучение более доступным и интересным. Мои главные принципы: честность, открытость и выполнение обязательств. Считаю это важным в работе со студентами. Для занятий разрабатываю и постоянно совершенствую методические материалы, основанные на практическом опыте и передовых образовательных подходах, которыми с большимудовольствие делюсь здесь. Каждый сценарий, пособие или метод.разработка на моем сайте направлены на то, чтобы облегчить работу преподавателей и помочь студентам усваивать сложные темы.

Подробнее об авторе

Настоящая методическая разработка опубликована пользователем Мельникова Тамара Леминовна. Инфоурок является информационным посредником

«Язык разметки гипертекста HTML. Основы создания веб-страниц». Практическая (лабораторная) работа с элементами лекции. Информатика. 1 курс. СПО Данная методическая разработка предназначена для учителей информатики и преподавателей колледжей, обучающих студентов основам веб-разработки. Урок охватывает базовые принципы работы с HTML, структуру веб-страницы и основные теги, необходимые для создания простых сайтов. Материал подходит для учащихся 8–11 классов, студентов СПО и начинающих веб-разработчиков. Разработка (32 страницы) включает детализированный конспект урока: Пошаговый алгоритм действий для преподавателя с дословными репликами и методическими рекомендациями. Краткий теоретический конспект по HTML для удобства объяснения материала. Пошаговые инструкции для студентов, которые можно использовать как раздаточный материал. Практическое задание в формате мини-игры ("Исправь код"), развивающее навыки работы с HTML. Тест из 10 вопросов с ключом и критериями оценивания, позволяющий проверить знания учащихся. План занятия (90минут): 1. Организационный момент 2. Актуализация знаний 3. Объяснение нового материала 4. Практическая работа 5. Подведение итогов 6. Домашнее задание Содержание практической работы: Задания (игровой формат): «Собери страницу» – студентам даются разрозненные HTML-теги, они должны собрать их в правильном порядке. «Исправь ошибку» – дается код с ошибками, задача студентов – найти и исправить их. «Создай визитку» – сделать HTML-страницу с контактами и краткой информацией о себе. «Техническое описание» – сверстать страницу с таблицей характеристик машины. «Галерея» – добавить изображения в страницу с описанием оборудования. Применяются современные методики обучения: игровые технологии, проблемное обучение, деятельностный подход, что делает занятие интерактивным и интересным. Уровень сложности – базовый, что позволяет использовать разработку как вводный урок в курсе веб-разработки или информатики. Этот материал станет полезным инструментом для педагогов, желающих проводить насыщенные, интерактивные и эффективные занятия по HTML без долгой подготовки. с другими материалами -сценарии мероприятий,-презентации, -методические разработки, -конспекты лекций и практических работ (информатика, информационные технологии в профессиональной деятельности, метрология и стандартизация, туризм), -планеры, -календари для педагога, -оформление для доски и кабинета, -шаблоны и грамоты, -педагогу для планирования,-и многое другое

Краткое описание методической разработки

«Язык разметки гипертекста HTML. Основы создания веб-страниц». Практическая (лабораторная) работа с элементами лекции. Информатика. 1 курс. СПО

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

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

Материал подходит для учащихся 8–11 классов, студентов СПО и начинающих веб-разработчиков.

Разработка (32 страницы) включает детализированный конспект урока:

Пошаговый алгоритм действий для преподавателя с дословными репликами и методическими рекомендациями.
Краткий теоретический конспект по HTML для удобства объяснения материала.
Пошаговые инструкции для студентов, которые можно использовать как раздаточный материал.
Практическое задание в формате мини-игры ("Исправь код"), развивающее навыки работы с HTML.
Тест из 10 вопросов с ключом и критериями оценивания, позволяющий проверить знания учащихся.

План занятия (90минут):

1. Организационный момент

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

3. Объяснение нового материала

4. Практическая работа

5. Подведение итогов

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

Содержание практической работы:

Задания (игровой формат):

«Собери страницу» – студентам даются разрозненные HTML-теги, они должны собрать их в правильном порядке.
«Исправь ошибку» – дается код с ошибками, задача студентов – найти и исправить их.
«Создай визитку» – сделать HTML-страницу с контактами и краткой информацией о себе.
«Техническое описание» – сверстать страницу с таблицей характеристик машины.
«Галерея» – добавить изображения в страницу с описанием оборудования.

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

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

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

с другими материалами

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

-педагогу для планирования,
-и многое другое

Развернуть описание

Файл будет скачан в форматах:

pdf
docx

04.02.2025

538

Материал разработан автором:

Мельникова Тамара Леминовна

Преподаватель

Разработок в маркетплейсе: 156

Покупателей: 3 952

Об авторе

Место работы: ГПОУ ТО "ЩПК"

Подробнее об авторе

Курс повышения квалификации

Event-маркетинг: организация эффективных мероприятий

36 ч. — 180 ч.

699 руб.

Подать заявку О курсе

Этот курс уже прошли 11 человек

Курс повышения квалификации

Использование нейросетей в учебной и научной работе: ChatGPT, DALL-E 3, Midjourney

36/72 ч.

699 руб.

Подать заявку О курсе

Сейчас обучается 1972 человека из 82 регионов
Этот курс уже прошли 2 709 человек

Курс повышения квалификации

Теоретические и методологические основы преподавания информатики с учётом требований ФГОС ООО

72 ч. — 180 ч.

699 руб.

Подать заявку О курсе

Сейчас обучается 298 человек из 60 регионов
Этот курс уже прошли 2 185 человек

Курс повышения квалификации

Компьютерная грамотность для пенсионеров

36 ч. — 180 ч.

699 руб.

Подать заявку О курсе

Этот курс уже прошли 40 человек

Смотреть ещё 5 819 курсов

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

1 слайд

Из опыта работы
Ермаковой Вероники Викентьевны
учителя информатики
МОУ СОШ № 19 г. Белово
Основы языка разметки гипертекста HTML
2 слайд

Hyper Text Markup Language (HTML) – язык гипертекстовой разметки документов.

Web-страницы можно создать с помощью языка HTML

В обычный документ вставляются управляющие символы - HTML-теги, которые определяют вид Web-страницы при её просмотре в браузере.
3 слайд

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

Например, код Web-страницы помещается внутрь контейнера
<HTML>… </HTML>

Теги могут записываться как прописными, так и строчными буквами.
4 слайд

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

Например,
<FONT COLOR=“blue”>
<H1 ALIGN=“center”> Моё имя – Марина </H1>
</FONT>
5 слайд

Структура Web-страницы
<HTML>
<HEAD>
<TITLE>
Название Web-страницы
</TITLE>
</HEAD>
<BODY атрибуты>
На этой странице можно разместить любую интересную информацию в Интернете.
</BODY>
</HTML>
Назад
6 слайд

Создание Web-страницы
Создать личную папку.
Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы.
Сохранить файл под именем Шаблон.txt в личной папке.
Открыть файл Шаблон.txt и внести необходимую информацию, используя теги и их атрибуты.
Сохранить файл под именем index.htm в личной папке.
7 слайд

Создание Web-страницы
Для редактирования файла index.htm необходимо выполнить следующие действия:
8 слайд

Атрибуты фона Web-страницы

Атрибут цвета Web-страницы
<BODY bgcolor=#FFF8DC>

Атрибут вставки фонового рисунка Web-страницы
<BODY background="Nature_02.jpg”>
9 слайд

Теги и атрибуты форматирования текста на Web-странице
<H1>…</H1> до <H6>…</Y6> тег размера шрифта заголовков

<FONT>…</FONT> тег форматирования шрифта
FACE=“Arial” атрибут задания гарнитуры шрифта
SIZE=4 атрибут задания размера шрифта
COLOR=“Red” атрибут задания цвета шрифта
ALIGN=“left” атрибут задания выравнивания текста

<HR> тег для создания горизонтальной линии

<P>…</P> контейнер для разделения текста на абзацы
10 слайд

Тег и атрибут вставки изображений на Web-странице

<IMG SRC=“computer.gif”>
<IMG SRC=“C:\COMPUTER\computer.gif”>
<IMG SRC=“http://www.server.ru/computer.gif”>
11 слайд

Теги и атрибуты гиперссылки
на Web-странице

<A HREF=“Адрес”>Указатель</A> тег с атрибутом для создания гиперссылки

<ADDRESS>…</ADDRESS> контейнер для создания гиперссылки на адрес электронной почты
12 слайд

Гиперссылки
Для связывания Web- страниц используют гиперссылки.
Термин «гипертекст» был введён в обращение Тедом Нельсоном в 1965 году для описания документов, которые выражают нелинейную структуру идей.
Гипертекст - это способ организации текстовой информации, внутри которой установлены смысловые связи между её различными фрагментами. Такие связи называют гиперсвязями, а место в тексте, обеспечивающее гиперсвязь, гиперссылкой.
Назад
13 слайд

Теги и атрибуты для создания списков на Web-странице
<OL>…</OL> контейнер для создания нумерованных списков
<LI> тег элемента списка
<UL>…</UL> контейнер для создания маркированного списка
<LI> тег элемента списка
<DL>…</Dl> контейнер для создания списка терминов
<DT> тег для создания термина
<DD> тег для создания определения
14 слайд

Теги и атрибуты для создания интерактивных форм
на Web-странице
<FORM>…</FORM> контейнер для создания формы
Тег <INPUT> со значением атрибута TYPE=“text” создают текстовое поле
Тег <INPUT> со значением атрибута TYPE=“radio” создают группу переключателей
Тег <INPUT> со значением атрибута TYPE=“checkbox” создают флажки
<SELECT> …</SELECT> контейнер для реализации раскрывающего списка
<OPTION> тег элемента списка

Пример
15 слайд

Практическая работа на ПК
«Создание Web-страницы
с использованием знаний
языка разметки гипертекста HTML»
Web-страница
HTML-код страницы
16 слайд

Тест по теме
«Основы языка разметки гипертекста»
Проверь свои знания
17 слайд

Домашнее задание
1) Учебник 10 класса Н. Д. Угринович (базовый уровень), П. 2.13, стр. 201-205.
2) Творческое задание (по желанию) - создать минисайт с помощью HTML -языка на свободную тему.
18 слайд

Использованные источники
1. Дробахина, АН. и др. Структурирование содержания профессиональной подготовки учителя информатики средствами современного гипертекста / А.Н. Дробахина, М.С. Можаров. - Новокузнецк, 2003.
2. Угринович, Н. Д. Информатика и ИКТ. Базовый уровень. Учебник 10 класса/Н. Д. Угинович. – М.: БИНОМ. Лаборатория знаний, 2008