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

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

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

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

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

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

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

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

…

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

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

Например,

Моё имя – Марина

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

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

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

Назад

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

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

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

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

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

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

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

Теги и атрибуты форматирования текста на Web -странице

… до … тег размера шрифта заголовков

… тег форматирования шрифта

FACE =“Arial” атрибут задания гарнитуры шрифта

SIZE =4 атрибут задания размера шрифта

COLOR =“Red” атрибут задания цвета шрифта

ALIGN =“left” атрибут задания выравнивания текста

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

…

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

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

Указатель тег с атрибутом для создания гиперссылки

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

Гиперссылки

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

Назад

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

…

тег элемента списка

… контейнер для создания списка терминов

тег для создания термина

тег для создания определения

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

… контейнер для создания формы

Тег со значением атрибута TYPE=“text” создают текстовое поле

Тег со значением атрибута TYPE=“radio” создают группу переключателей

Тег со значением атрибута TYPE=“checkbox” создают флажки

… контейнер для реализации раскрывающего списка

тег элемента списка

Пример

Практическая работа на ПК

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

с использованием знаний

языка разметки гипертекста HTML »

HTML -код страницы

Web -страница

Проверь свои знания

Тест по теме

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

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

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

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

Использованные источники

1. Дробахина, АН. и др. Структурирование содержания профессиональной подготовки учителя информатики средствами современного гипертекста / А.Н. Дробахина, М.С. Можаров. - Новокузнецк, 2003.

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