ПЛАН-КОНСПЕКТ УРОКА
Основы языка разметки гипертекста
(Структурные теги и теги форматирования)
|
ФИО (полностью)
|
Кузьмичев Илья Александрович
|
|
Место работы
|
МОУ СОШ 80
|
|
Должность
|
Учитель информатики
|
|
Предмет
|
Информатика
|
|
Класс
|
10
|
|
Тема и номер урока в теме
|
Структурные теги и теги форматирования в языке HTML, первый урок – учимся создавать сайт и работать с сайтом школы shkola80.ru (дополнительные уроки могут проводиться за счет резервных часов в рабочей программе)
|
|
Базовый учебник
|
Угринович Н. Д. ИНФОРМАТИКА И ИКТ. 10 класс. 2011. Глава 2. Параграф 2.13. Практическая работа 2.11
|
Цель урока:
9. Задачи:
- изучение языка разметки гипертекста
- создание странички на сервере сайта школы
- правильное и законное размещение Интернете, авторские права
Теория и практика на компьютере
Работа за компьютером в Интернет с сайтом школы shkola80.ru
Необходимое техническое оборудование
Структура и ход урока
Таблица 1.
СТРУКТУРА И ХОД УРОКА
№
|
Этап урока
|
Название используемых ЭОР
(с указанием порядкового номера из Таблицы 2)
|
Деятельность учителя
(с указанием действий с ЭОР, например, демонстрация)
|
Деятельность ученика
|
Время
(в мин.)
|
1
|
2
|
3
|
5
|
6
|
7
|
|
Структурные теги HTML
|
Бином. Лаборатория знаний. №1
|
Использование Интерактивной доски и Интернет
|
Изучение нового материала. Материал объясняет учитель.
|
25
|
|
Теги форматирования текста
|
Бином. Лаборатория знаний. №1
|
Использование Интерактивной доски и Интернет
|
Написание программы в редакторе Блокнот, сохранение в формате HTML и запуск программы в Internet Explorer.
|
15
|
Приложение к плану-конспекту урока
Материалы дистанционного и дополнительного обучения учеников на сайте shkola80.ru
Цель и задачи урока: научить учеников работать в Интернет с сайтом школы shkola80.ru
Тип урока : демонстрация
Формы работы учащихся : работа на компьютере в классе
Необходимое техническое оборудование: компьютер, подключенный к Интернет
Структуру и ход урока:
1. Структурные теги HTML
Ход урока: Голова страницы>>Тело страницы>>Фон страницы>>Текст на странице
1. Теги форматирования текста
Ход урока: Голова>> Теги структурного форматирования>> Теги оформления текста>> Тег и его параметры>> P.S. Почему не стоит создавать заголовки тегами оформления?
Тема урока: “Основные теги HTML”
Язык гипертекстовой разметки HTML состоит из тегов, представляющих собой его основные компоненты. Здесь вы сможете познакомиться с этими компонентами. Не со всеми конечно, а только с самыми основными тегами HTML — теми, без которых не обходится создание ни одной веб-страницы в мире. Речь идет о структурных тегах — именно их здесь и рассмотрим, но вначале классифицируем их. Они делятся на следующие группы:
Структурные теги
Теги форматирования
Структурные теги HTML
С труктурные теги представляют собой такие основные теги HTML, которые определяют структуру любой веб-страницы. Они задают ее начало и конец; показывают, где находятся голова и туловище страницы. Прежде чем знакомиться с дальнейшей информацией, взгляните на изображение справа (кликабельно).
Оно поможет вам лучше понять и визуально представить структуру типовой веб-страницы. А теперь первый структурный тег.
— корневой тег документа HTML —
Тип этого тега – контейнерный. Открывающий тег ставится в самом начале документа, а закрывающий
– в конце.
Внутри контейнера ..... содержатся все остальные теги документа. Именно поэтому тег и называют корневым (вы ведь знаете, что такое корневая папка?).
Контейнерный тег можно сравнить с папкой операционной системы. В каждую такую папку могут быть вложены другие папки, а в них, в свою очередь – еще папки, и.т.д.
У открывающего тега при необходимости могут быть следующие параметры:
lang — определяет язык документа
title — определяет всплывающую подсказку для всей страницы
Голова страницы
— головной тег html-страницы, внутри которого располагаются мета-теги, тег и другие теги, помогающие браузеру в обработке страницы</i><br /><br />Тип тега – контейнерный. Это первый из двух глобальных контейнеров, расположенных внутри конструкции <b><html>.....</html></b><br /><br /><i><b><title></b> — контейнерный тег, позволяющий задать наименование веб-страницы </i> <br /><br />Заглавие, которое создает этот тег, отображается в строке заголовка окна браузера.<br /><br />В первом приближении код веб-страницы выглядит следующим образом:<br /><br /><html> <br /><head> <br /><title>Моя страница
Тег </b> выполняет несколько функций, одна из которых – сообщить посетителю, о чем страница. Благодаря тексту заголовка пользователь может понять, что это за сайт и как называется текущая страница. Если посетитель будет сворачивать окна, то заголовки отобразятся на панели задач – по ним проще сориентироваться, где какая страница.<br /><br />При сохранении веб-страницы, имя сохраненного файла будет совпадать с названием заголовка. При сохранении в закладки ситуация аналогична.<br /><br />Еще одна важная функция тега <b><title></b> – продвижение страницы в поисковиках. Поисковые системы выводят заголовки в поисковую выдачу, а, кроме того, оценивают по ним релевантность.<br /><br />Завершая разговор о контейнере тега <b><head></b>, можно сказать, что название тега соответствует его функциям. Контейнер тега <b><head></b> действительно является своего рода головой для веб страницы.<br /><br />Теперь поговорим про туловище.<br /><h3> <i>Тело страницы</i></h3> <br /><i><b><body></b> — тег, внутри которого пишется весь код, отвечающий за внешний вид страницы</i><br /><br />Тип тега – контейнерный. Это второй из двух глобальных контейнеров, расположенных внутри конструкции <b><html>.....</html></b><br /><br />. <br /><br />Во втором приближении код любой веб-страницы выглядит так:<br /><br /><html> <br /><head> <br /><title>Моя страница
Здесь размещаются все теги, отвечающие за внешний вид страницы. |