Основы HTML. Структура документа. Теги

Цели и задачи урока:

Познакомить с новыми понятиями языка HTML;

Сформировать навыки и умения создания простейших WEB-страниц;

Развивать познавательный интерес к предмету и логическое мышление.

Тип урока: комбинированный

Методы обучения: словесный - рассказ с элементами беседы и практики.

Оборудование: мультимедийная установка, программа презентаций Microsoft Office PowerPoint 2010, браузер Internet Explorer 8.0, раздаточный материал.

План урока:

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

Актуализация опорных знаний (3 мин)

Объяснение нового материала (20 мин)

Закрепление нового материала путём выполнения практического задания (10 мин)

Проведение теста (5 мин)

Итоги урока. Проверка теста. Вопросы учеников (5 мин)

Домашнее задание (1 мин.)

Ход урока:

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

Приветствие учащихся. Проверка присутствующих.

Актуализация опорных знаний.

Определите понятие «Интернет»? (Глобальная компьютерная сеть, в которой локальные, региональные и корпоративные сети соединены между собой многочисленными каналами передачи информации.)

Для чего предназначен модем? (Устройство, преобразующее цифровой  сигнал  компьютера в аналоговый телефонный сигнал и обратно)

Какие функции выполняет сетевой адаптер? (Специальное аппаратное средство для эффективного взаимодействия персональных компьютеров в сети)

Что обозначает понятие Домен? (Часть адреса, определяющая адрес компьютера в сети)

Скорость передачи данных – это? (Количество битов информации, передаваемых через модем в единицу времени)

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

Систематизация понятий

WWW –всемирная паутина

WEB-сервер;WEB-страница, WEB-сайт; гипертекст; браузеры

Язык разметки гипертекста HTML;

Команды (теги), определяющие структуру WEB-документа.

Команды (теги) форматирования текста.

Во многом развитие компьютерной сети Интернет связано с развитием популярной службы WWW. (слайд 2) Всеми́рная паути́на (англ. World Wide Web или WWW) — распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютера, подключенных к Интернету.

Для создания Web-страниц используют язык разметки гипертекстов HTML (HyperText Markup Language).(слайд 3) Всемирную паутину образуют сотни миллионов веб-серверов. Web-сервер - компьютер в сети Интернет, хранящий Web- страницы и соответствующее программное обеспечение для работы с ними.

Большинство ресурсов всемирной паутины основаны на технологии гипертекста. (слайд 4)             

Гипертекст – электронный документ, который содержит в себе ссылки на другие документы. Гипертекстовые документы, размещаемые во Всемирной паутине, называются веб-страницами. Несколько веб-страниц, объединённых общей темой, дизайном, а также связанных между собой ссылками и обычно находящихся на одном и том же веб-сервере, называются веб-сайтом. (слайд 5,6) Для загрузки и просмотра веб-страниц используются специальные программы — браузеры (англ. browser). (слайд 7)

Основным понятием языка HTML является тег. ТЕГ- инструкция браузеру, указывающая способ отображения информации. (слайд 8) Атрибут-компонент тега, содержащий указания о том, как браузер должен воспринять и обработать тег.(слайд 9) Теги могут быть парные и одиночные. Парные делятся на открывающие и закрывающие теги. Контейнеры- это парные теги, содержащие открывающий и закрывающий тег. (слайд 10)

Структурные теги HTML

Тег

Этот тег помещают в начало и конец документа, сообщая браузеру, что весь документ составлен на HTML.

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

Теги форматирования текста

- цвет текста

- цвет основного текста

-цвет фона

- цвет основного текста и цвет фона  (слайд 12)

- размер шрифта

текст - гарнитура (тип шрифта) (слайд 13)

- выравнивание текста (center, left, right) (по умолчанию по левому краю)

- выравнивание по ширине

Таблицы

- таблица

- строчка таблицы

- столбец (ячейка) таблицы (слайд 17)

Вставка картинки

- вставка картинки

вставка картинки с указанием пути. (слайд 18)

Гиперссылки

Link - цвет ссылки

Alink - цвет активной ссылки (нажатой)

Vlink - цвет уже посещенной ссылки (слайд 19)

Ссылка на почтовый ящик

Замечание: ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д.)

У каждого учащегося имеется таблица с основными тегами html (приложение 2).

Закрепление нового материала путём выполнения практического задания.

(слайд 20)

Создайте папку SITE. Откройте текстовый редактор Блокнот  и наберите  текст, представленный ниже.

Это моя первая WEB- страница

Введите команду [Файл - Сохранить]. Файлу Web-страницы присвоить имя index.html (Файл сохранить в папке SITE)Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В заголовке окна браузера высветится  название Web-страницы Первое знакомство с тэгами HTML Для переключения между режимом просмотра WEB-страницы в браузере и текстом HTML-файла используйте меню Вид ð Просмотр HTML-кода.

Весь материал - в архиве.