Урок-презентация по информатике на тему «Язык разметки гипертекста»

5
0
Материал опубликован 24 January 2016

Пояснительная записка к презентации

Презентация состоит из нескольких слайдов.

 
Первый слайд - заголовок.
 
Второй слайд. Учитель расшифровывает аббревиатуру HTML, говорит о том, что веб-страница - это текст, но текст особый, включающий элементы разметки - теги.
 
Третий слайд. Педагог показывает как выглядит общая структура файла на языке HTML, показывает "голову" и "тело" документа сравнивая с фотографией человека.
 
Четвертый слайд. Рассматриваются теги заголовков, как меняется размер в зависимости от используемого тега.
 
Пятый слайд. Теги вставки картинки. Следует особо подчеркнуть, что вставка картинки как в приведенном примере возможна лишь в случае, когда картинка находится в той же папке, что и файл веб-страницы.
 
Шестой слайд. Тег для вставки ссылки. Обращаем внимание школьников, что ссылка в приведенном примере будет открывать новую страницу в НОВОМ окне, не закрывая уже открытого документа.
 
Седьмой слайд. Справочная информация по нескольким тегам - перевод строки, проведение горизонтальной линии, изменение цвета страницы.
 
Восьмой слайд. Все рассмотренные теги приводят в единый файл, собственно повторение только что изученного. Учитель еще раз проговаривает важные моменты для каждого тега и говорит о том, как этот файл должен быть сохранен. В блокноте имя файла указывается в КАВЫЧКАХ и с РАСШИРЕНИЕМ HTML. Только так Блокнот сохранит файл не как обычный текстовый документ, а как документ HTML (веб-страницу)
 
Девятый слайд. Демонстрирует ту страницу, что была описана слайдом ранее, и предлагает задание в повторении детьми этой работы самостоятельно за рабочими местами.
 

Здесь будет файл: /data/edu/files/g1453625747.pptx (Презентация "Основы языка HTML")

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

Основы языка HTML. Учитель информатики ГБОУ Гимназия №1619 Сычев И.С.

Что такое HTML? Hyper Text Mark-up Language

Как выглядит документ HTML <html> <head> … </head> <body> … … … … … </body> </html>

Основные тэги. Заголовки

Основные тэги. Вставка изображения <img src=‘ имя картинки с расширением‘ /> <img src=‘ first_pic.jpg />

Вставка ссылки. <a href= ‘ second.html‘ target=_blank> текст ссылки </a>

Основные тэги. Еще несколько. <br /> - принудительный перенос строки <hr /> - горизонтальная черта через всю страницу <body bgcolor=#0055ff> - установка фонового цвета страницы

Подытожим. Что получилось. <html> <head> <title> Первая страница </title> </head> <body bgcolor=#FF55FF> <h1> Моя страница </h1> <hr /> <img src=‘picture.jpg’ /> <h5> Это картинка </h5> <a href=‘second.html’> А это ссылка </a> </body> </html>

в формате MS Powerpoint (.ppt / .pptx)
Комментарии
Комментариев пока нет.