Тема
урока:
Цели:
·
Образовательные:
o Сформировать представление о работе с абзацами, параграфами в
html.
·
Развивающие:
o ответственность за результаты своей работы;
o навыки работы с учебными пособиями и дополнительными источниками
информации.
·
Воспитательные:
o ответственность и требовательность к себе;
o трудолюбие, дисциплинированность, чувство собственного
достоинства.
Ход урока:
·
Организационный момент.
·
Проверка д/з: тест на
компьютере «Гиперссылки»
·
Объяснение нового материала.
·
HTML параграф определяется тегами <p> </p>.
·
HTML параграфы обыкновенно содержат текст, форматирующие теги,
изображения.
·
HTML параграф не может содержать внутри себя блочные элементы, такие как
заголовки
<h1> – </h6>, блок <div> </div> и другие параграфы.
·
HTML блок определяется тегами <div> </div>.
·
HTML блок может вмещать в себя любые элементы web-страницы, в любом
количестве.
·
HTML блоки прекрасно подходят для верстки интернет-страниц, ими легко манипулировать.
Рассмотрим расположенный ниже код:
|
<html>
<head>
<title>HTML параграфы и блоки</title>
</head>
<body>
<p>Первая строка</p>
<p>Вторая строка</p>
<div>Третья строка</div>
<div>Четвертая строка</div>
<div style="color:#ff0000"><p>Пятая строка</p></div>
<div>Шестая строка</div>
</body>
</html>
|
Нам видно, что HTML параграфы имеют отступы по
вертикали – такова особенность тегов <p> </p>. HTML
блоки <div> </div> такие пространства не создают,
потому что они не несут никакой нагрузки, а просто являются контейнерами.
Tеги <p> </p> не могут содержать
другие <p> </p> или <div> </div>.
Внутри <p> </p>могут быть размещены линейные элементы, такие
как <span> </span> или, например, теги, отвечающие за форматирование
текста.
Теги <p> </p> и <P> </P>,
в принципе, одно и то же, но W3C консорциумом рекомендовано
использовать маленькие буквы. В новой версии HTML как и в современном XHTML использование больших букв при написании тегов запрещено.
Блок <div> </div> может содержать внутри
себя сколько угодно <div> </div> и <p>
</p>и других элементов HTML документа. Он идеально
подходит для верстки, но об этом позже – в уроках CSS самоучителя.
HTML пробел из таблицы специальных
символов
HTML пробел позволяет увеличить расстояние между словами и символами.
Что касается пробелов между словами, то сколько бы не было их в
Блокноте, то есть в исходном коде, на web-странице отобразится только один.
Если вам понадобится увеличить растояние – используйте символ
пробела из таблицы
символов. Вы спросите: Зачем
нужны эти закодированные значения обычных символов? – Я отвечу: Они нужны,
чтобы отображать, например, такие скобки < >. Другими словами, для
вывода на экран тегов <p> </p>, в своем редакторе я
пишу: <code><p> </p></code>.
Теги <code> </code>, как мы помним, преобразуют текст в
моноширинный (машинописный).
Способы отображения
HTML абзаца
Примеры вывода абзаца:
|
<html>
<title>Абзац в HTML</title>
</head>
<body style="background-color:#ffee77">
<p><blockquote>Отступ слева с использованием
тегов.</blockquote></p>
<p style="text-indent:100px">Отступ слева с использованием
CSS атрибута.</p>
</body>
|
В первом случае абзац выводится
тегами <blockquote> </blockquote>, а во втором случае — с
помощью CSS атрибута text-indent и его значения,
которое устанавливается в пикселях и может иметь любую величину, что бывает
очень удобно.
Теги списков
|
Тег
|
Описание
|
|
<ol>
|
Определяет упорядоченный список
|
|
<ul>
|
Определяет неупорядоченный список
|
|
<li>
|
Определяет элемент списка
|
|
<dl>
|
Определяет список определений
|
|
<dt>
|
Определяет термин определения
|
|
<dd>
|
Определяет описание определения
|
|
<dir>
|
Не рекомендуется. Используйте вместо этого <ul>
|
|
<menu>
|
Не рекомендуется. Используйте вместо этого <ul>
|
Актуализация опорных знаний.
·
Показываем сайт с
использованием табличного дизайна, что бы указать где именно нам пригодятся
умения работать с таблицами и тем самым заинтересовать учащихся.
·
Показываем как решается
проблема навигации с помощью фреймов и говорим что их нежелательно
использовать.
·
Говорим, что это лучше сделать
используя таблицы. Все подкреплаем конкретными примерами. Но для того что
бы это реализовать это нужно уметь работать с таблицами.
·
Разбираем основные теги
таблиц.
·
Рассказываем об основных
атрибутах табличных тегов и показываем их использование на примерах.
·
Закрепление изученного
материала.
·
Дом.задание
Изучить материал в тетради
наизусть
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.