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

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

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

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

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

5 Структура Web- страницы Название Web- страницы На этой странице можно разместить любую интересную информацию в Интернете. Назад

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

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

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

9 Теги и атрибуты форматирования текста на Web- странице … до … тег размера шрифта заголовков … тег форматирования шрифта FACE=Arial атрибут задания гарнитуры шрифта SIZE=4 атрибут задания размера шрифта COLOR=Red атрибут задания цвета шрифта ALIGN=left атрибут задания выравнивания текста тег для создания горизонтальной линии … контейнер для разделения текста на абзацы

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

11 Теги и атрибуты гиперссылки на Web- странице гиперссылки Указатель тег с атрибутом для создания гиперссылки … контейнер для создания гиперссылки на адрес электронной почты

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

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

14 Теги и атрибуты для создания интерактивных форм на Web- странице … контейнер для создания формы Тег со значением атрибута TYPE=text создают текстовое поле Тег со значением атрибута TYPE=radio создают группу переключателей Тег со значением атрибута TYPE=checkbox создают флажки … контейнер для реализации раскрывающего списка тег элемента списка Пример

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

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

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

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