Тема урока:

Цели:

• Образовательные:

  • Сформировать представление о работе с абзацами, параграфами в html.

• Развивающие:

• • ответственность за результаты своей работы;

  • навыки работы с учебными пособиями и дополнительными источниками информации.

• Воспитательные:

• • ответственность и требовательность к себе;

  • трудолюбие, дисциплинированность, чувство собственного достоинства.

Ход урока:

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

• Проверка д/з: тест на компьютере «Гиперссылки»

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

• HTML параграф определяется тегами .

• HTML параграфы обыкновенно содержат текст, форматирующие теги, изображения.

• HTML параграф не может содержать внутри себя блочные элементы, такие как заголовки
  

  - , блок

  и другие параграфы.

• HTML блок определяется тегами .

• HTML блок может вмещать в себя любые элементы web-страницы, в любом количестве.

• HTML блоки прекрасно подходят для верстки интернет-страниц, ими легко манипулировать.

Рассмотрим расположенный ниже код:

HTML параграфы и блоки

Первая строка

Вторая строка
Третья строка
Четвертая строка

Пятая строка
Шестая строка

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

Tеги не могут содержать другие или . Внутри могут быть размещены линейные элементы, такие как или, например, теги, отвечающие за форматирование текста.

Теги и , в принципе, одно и то же, но W3C консорциумом рекомендовано использовать маленькие буквы. В новой версии HTML как и в современном XHTML использование больших букв при написании тегов запрещено.

Блок может содержать внутри себя сколько угодно и и других элементов HTML документа. Он идеально подходит для верстки, но об этом позже - в уроках CSS самоучителя.

HTML пробел из таблицы специальных символов

HTML пробел позволяет увеличить расстояние между словами и символами.

Что касается пробелов между словами, то сколько бы не было их в Блокноте, то есть в исходном коде, на web-странице отобразится только один. Если вам понадобится увеличить растояние - используйте символ пробела из таблицы символов. Вы спросите: Зачем нужны эти закодированные значения обычных символов? - Я отвечу: Они нужны, чтобы отображать, например, такие скобки < >. Другими словами, для вывода на экран тегов , в своем редакторе я пишу: <p> </p>. Теги , как мы помним, преобразуют текст в моноширинный (машинописный).

Способы отображения HTML абзаца

Примеры вывода абзаца:

Абзац в HTML

Отступ слева с использованием тегов.

Отступ слева с использованием CSS атрибута.

В первом случае абзац выводится тегами , а во втором случае - с помощью CSS атрибута text-indent и его значения, которое устанавливается в пикселях и может иметь любую величину, что бывает очень удобно.

Теги списков

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

• Показываем сайт с использованием табличного дизайна, что бы указать где именно нам пригодятся умения работать с таблицами и тем самым заинтересовать учащихся.

• Показываем как решается проблема навигации с помощью фреймов и говорим что их нежелательно использовать.

• Говорим, что это лучше сделать используя таблицы. Все подкреплаем конкретными примерами. Но для того что бы это реализовать это нужно уметь работать с таблицами.

• Разбираем основные теги таблиц.

• Рассказываем об основных атрибутах табличных тегов и показываем их использование на примерах.

• Закрепление изученного материала.

• Дом.задание

Изучить материал в тетради наизусть