Инфоурок Информатика ПрезентацииКонспект урока и презентация по информатике на тему «Основы языка разметки гипертекста HTML». (10 класс)

Конспект урока и презентация по информатике на тему «Основы языка разметки гипертекста HTML». (10 класс)

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

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

Выбранный для просмотра документ Основы разметки языка гипертекста.ppt

Скачать материал "Конспект урока и презентация по информатике на тему «Основы языка разметки гипертекста HTML». (10 класс)"

Получите профессию

Бухгалтер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Методические разработки к Вашему уроку:

Получите новую специальность за 2 месяца

Социальный педагог

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

  • Основы языка разметки гипертекста HTML

    1 слайд

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

  • Hyper Text Markup Language (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>

  • Структура Web-страницы

 
Название Web-страницы 



На этой странице можно...

    5 слайд

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

  • Создание  Web-страницыСоздать личную папку.
Создать в блокноте шаблон HTML-до...

    6 слайд

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

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

    7 слайд

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

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


Атрибут вставки фоно...

    8 слайд

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

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

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



  • Теги и атрибуты форматирования текста на Web-странице… до …  тег размера шриф...

    9 слайд

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

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

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

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

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

    10 слайд

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

    <IMG SRC=“computer.gif”>
    <IMG SRC=“C:\COMPUTER\computer.gif”>
    <IMG SRC=“http://www.server.ru/computer.gif”>

  • Теги и атрибуты гиперссылки  на Web-странице
Указатель  тег с атрибутом для...

    11 слайд

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

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

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

  • Теги и атрибуты для создания списков на Web-странице…  контейнер для создания...

    12 слайд

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

  • Теги и атрибуты для создания интерактивных форм на Web-странице… контейнер д...

    13 слайд

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

  • Домашнее заданиеУчебник  10 класса Н. Д. Угринович (базовый уровень), П. 2.13...

    14 слайд

    Домашнее задание
    Учебник 10 класса Н. Д. Угринович (базовый уровень), П. 2.13, стр. 201-205.

Получите профессию

Методист-разработчик онлайн-курсов

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Выбранный для просмотра документ Конспект Основы языка разметки гипертекста.docx

Конспект урока по информатике и ИКТ 10 класс

Тема урока: «Основы языка разметки гипертекста HTML».

Планируемые образовательные результаты:

Предметные:

- объяснить назначение языка разметки гипертекста HTML, основных тегов и их атрибутов;

- научить обучающихся создавать Web-страницу.

Метапредметные:

- способствовать развитию информационной культуры; развивать эмоциональную сферу: формировать положительные эмоции  к процессу обучения.

Личностные:

- алгоритмическое мышление, необходимое для профессиональной деятельности в современном обществе;

- представление о программировании как сфере возможной профессиональной деятельности.

План урока:

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

Повторение изученного материала – 6 мин.

Изложение нового материала - 10 мин.

Практическая работа на компьютере - 20 мин.

Подведение итогов урока - 2 мин.

Ход урока:

Учитель:

Ученик:

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

Здравствуйте, ребята! Мы живём в современном информационном мире, в котором Интернет – это мир общения, познания, увлечения.  Тема нашего урока связана с Интернетом: Основы языка разметки гипертекста HTML.

2.     Повторение изученного материала

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

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

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

Веб-обозрева́тель, обозрева́тель, бра́узер— программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц.

3.     Изложение нового материала.

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

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

3.1. Понятие тега.

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

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

Парные теги содержат открывающий и закрывающий теги (контейнер).

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

<HTML>… </HTML>

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

3.2. Понятие атрибута.

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

Например,

     <FONT COLOR=“blue”>

    <H1  ALIGN=“center”> Моё имяМарина </H1>

     </FONT>

3.3. Структура Web-страницы.

<HTML>

<HEAD>

<TITLE>

Название Web-страницы

</TITLE>

</HEAD>

<BODY атрибуты>

На этой странице можно разместить любую интересную информацию в Интернете.

</BODY>

</HTML>

3.4. Создание Web-страницы.

1.     Создать личную папку.

2.     Создать в блокноте шаблон HTML-документа, набрав HTML-код страницы.

3.     Сохранить  файл под именем Шаблон.txt  в личной папке.

4.     Открыть файл Шаблон.txt  и внести необходимую информацию, используя теги и их атрибуты.

5.     Сохранить файл под именем index.htm в личной папке.

Для редактирования файла index.htm необходимо открыть его в Блокноте.

4.     Практическая работа на компьютере.

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

5.     Подведение итогов урока.

Домашнее задание: § 2.13, стр. 201-205.

 

Подготовка к уроку.

 

 

Устная работа.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Запись в тетради.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Работа за компьютерами.

 

Запись домашнего задания в дневник. Выставление оценок за урок в дневник.

 

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Конспект урока и презентация по информатике на тему «Основы языка разметки гипертекста HTML». (10 класс)"

Получите профессию

Фитнес-тренер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Получите профессию

Няня

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

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

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 609 957 материалов в базе

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

Другие материалы

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

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 20.11.2016 6158
    • RAR 408 кбайт
    • 226 скачиваний
    • Рейтинг: 5 из 5
    • Оцените материал:
  • Настоящий материал опубликован пользователем Гафурова Зиля Рифовна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

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

    Удалить материал
  • Автор материала

    Гафурова Зиля Рифовна
    Гафурова Зиля Рифовна
    • На сайте: 7 лет и 11 месяцев
    • Подписчики: 0
    • Всего просмотров: 36560
    • Всего материалов: 8

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Технолог-калькулятор общественного питания

Технолог-калькулятор общественного питания

500/1000 ч.

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

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

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

36 ч. — 180 ч.

от 1580 руб. от 940 руб.
Подать заявку О курсе

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

Особенности подготовки к сдаче ЕГЭ по информатике и ИКТ в условиях реализации ФГОС СОО

36 ч. — 180 ч.

от 1700 руб. от 850 руб.
Подать заявку О курсе
  • Сейчас обучается 108 человек из 40 регионов

Курс профессиональной переподготовки

Информатика: теория и методика преподавания с применением дистанционных технологий

Учитель информатики

300 ч. — 1200 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 20 человек из 13 регионов

Мини-курс

Soft-skills современного педагога

3 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 26 человек из 14 регионов

Мини-курс

Эффективное управление проектами

6 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Основы профессиональной деятельности эксперта в области индивидуального консультирования

4 ч.

780 руб. 390 руб.
Подать заявку О курсе