Большинство информационных ресурсов сети Интернет представлено в виде веб-страниц, которые объединяются в веб-сайты. Благодаря развитию телекоммуникационных технологий размещенная на веб-страницах информация доступна множеству людей. В отличие от бумажных носителей, например, книг, она может оперативно изменяться и практически мгновенно доставляться в любое место по запросу пользователя.
Данная презентация сопровождает лекцию в 9 классе по теме "Основы языка HTML". Урок направлен на формирование понятий и знаний о HTML - документе, о структуре Web траницы, на освоение правил записи тэгов HTML - документа.
Презентация содержит теоретический материал теоретический материал, примеры HTML - документа, практические дадания.
Аудитория 9 класс
Учитель МБОУ СОШ № 55 городского округа Самара Тимакова Татьяна Александровна
Вы уже знаете о суперспособностях современного учителя?
Тратить минимум сил на подготовку и проведение уроков.
Быстро и объективно проверять знания учащихся.
Сделать изучение нового материала максимально понятным.
Избавить себя от подбора заданий и их проверки после уроков.
Просмотр содержимого документа
««Web – технологии. Основы языка HTML »»
Муниципальное бюджетное общеобразовательное учреждение
средняя общеобразовательная школа № 55 городского округа Самара
«Web – технологии.
Основы языка HTML »
Учитель информатики МБОУ СОШ № 55
Тимакова Татьяна Александровна
5 марта 2015 г.
Основы языка HTML
Лекция
Тимакова Т.А.«Web – технологии как инструмент образовательного процесса»1
Понятие гипертекста
Создание Web-сайтов реализуется с использованием специального языка гипертекстовой разметки – HTML (Hyper Text Markup Language).
Термин "гипертекст" впервые был введён
Тедом Нельсоном в 1969 году.
Гипертекст– электронный иерархический документ, содержащий в себе ссылки на другие документы (ресурсы).
Тимакова Т.А. «Web – технологии как инструмент образовательного процесса»2
Главные причины популярности HTML:
HTML текст – это обычный текстовый файл в формате ASCII
Открытый код
Отсутствие необходимости сжатия данных.
Простота.
Переносимость.
Иерархичность (связность) документов (ресурсов)
Наличие гиперссылок –
основа для «плетения паутины»
Интернет.
8. HTML-документ –
это гипертекст.
Тимакова Т.А. «Web – технологии как инструмент образовательного процесса»3
Тимакова Т.А. «Web – технологии как инструмент образовательного процесса»3
World Wide Webи ее место в мировой сети
СетьW orld W ide W eb представляет собой глобальный мировой ресурс информации, доступ к которому открыт для всех пользователей Интернет
Приложения Microsoft Office позволяют сохранять текстовые документы, электронные таблицы, реляционные БД, презентации в формате Web-страницы
Тимакова Т.А. «Web – технологии как инструмент образовательного процесса»3
Браузеры – универсальное клиентское приложение для Web-сервера
Тимакова Т.А. «Web – технологии как инструмент образовательного процесса»4
Единый интерфейс представителей программ одного класса – одна из фундаментальных основ ИТ
Тимакова Т.А.«Web – технологии как инструмент образовательного процесса»5
Понятие «тег»
HTML-документ – это обычный текстовый документ, содержащий специальные разметочные указатели (тэги) .
Тег (иногда тэг , англ. tag — «ярлык, этикетка, бирка; метить») — метка как ключевое слово, в более узком применении идентификатор для категоризации, форматирования, описания, поиска данных и задания внутренней структуры.
HTML - файл имеет расширение.htm или .html
Тимакова Т.А. «Web – технологии как инструмент образовательного процесса»6
ПРАВИЛА ЗАПИСИ ТЭГОВ
Тэги всегда заключаются в угловые скобки (т.е. ВСЕГДА начинается со знака «меньше» и оканчивается знаком «больше» Например: ( новая строка, непарный тег)
Непарный (одиночный)
открывающий
ТЕГ
парный
(контейнер)
закрывающий
Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса»7
Структура HTML - страницы
начало контейнера HTML-документа
начало контейнера заголовка
начало контейнера строки – названия страницы
…
строка названия страницы
конец контейнера строки – названия страницы
конец контейнера заголовка
начало контейнера тела страницы
…
тело (всё содержимое) страницы
конец контейнера тела страницы
конец контейнера HTML-документа
Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса»8
Комментарии
- такой полутэг используется для добавления комментариев на страничке, т. е. для полезных пояснений, которые не «транслируются» браузером.
Пример:
Заголовок
Подзаголовок
Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса»9
ПРИМЕР HTML-ДОКУМЕНТА
Моя первая HTML-страничка!
Это моя первая проба сил в Web-дизайне.
Может быть, страничка пока еще получилась
не очень красивой, но ведь она работает!!!
Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса»10
Создайте свой сайт
Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса»11
Практическая работа
Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса»12
Практическая работа
Упражнения для самостоятельной работы
Задание 1.«Личная папка» . Создать личную папку в доступном разделе локального компьютера
Задание 2.«Структура HTML-страницы». Создать простейшую страницу со значение тега title = « Моя первая страничка» и телом страницы с текстом: «Оказывается, HTML – форматирование не такая уж и сложная вещь! ….».
Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса»13
Домашнее задание
«Работа с таблицами». Создать таблицу по образцу
В этой ячейке можно разместить заголовок сайта
В этой ячейке можно разместить новости
А в этой ячейке можно разместить меню сайта
Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса»14
Спасибо за работу
До новых встреч!
Тимаковы Т.А. «Web – технологии как инструмент образовательного процесса»14
