И так, в прошлой статье Мы разобрались с чего начинать изучение WEB-программирования, а в этом уроке уже будем работать с видимой частью страницы, а именно будем работать с тегами которые будут находится внутри тега <body> </body>. И речь пойдет, наверно, о самом часто используемом теге в HTML, это тег <p> - paragraph, который многократно используются при написании любого текста. В переводе с английского языка paragraph - переводится как абзац. Тег <p> является парным тегом и должен иметь обязательно закрывающийся тег </p>, так же стоит помнить, что данный тег является блочным элементом и следующий за ним элемент всегда начнется со следующей строки.
Давайте все по порядку, возьмем вышеупомянутый тег, помогающий создать абзац, <p> </p>. Если не использовать тег параграфа то любой текст отображаемый браузером будет сбит в кучу и текст станет совсем не читабельным, т.е. получится полная каша. Давайте проверим. Берем шаблон из прошлого урока и между тегами <body> вставляем любой текст, скопированный из этой статьи.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
ТЕКСТ, СКОПИРОВАННЫЙ С ЭТОЙ СТАТЬИ. МНОГО ТЕКСТА!
</body>
</html>
Сохраняем наш отредактированный файл index.html и запускаем его из, ранее созданной, папки HTML. И что мы видим? Ту кашу, о которой я и говорил, все в одну строку друг под другом. Не смотря на то, что скопированный текст имел параграфы и выглядел совсем по-другому.
Для того что бы придать нормальный вид нашему тексту и применяется тег <p> параграф, а нужный текст заключается в теги <p> </p>. Давайте теперь на Ваш выбор заключим любые участки текста в тег <p> и сохраним наш файл, а затем обновим страницу в браузере.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
ТЕКСТ, СКОПИРОВАННЫЙ С ЭТОЙ СТАТЬИ. МНОГО ТЕКСТА!
ТЕКСТ, СКОПИРОВАННЫЙ С ЭТОЙ СТАТЬИ. МНОГО ТЕКСТА!
ТЕКСТ, СКОПИРОВАННЫЙ С ЭТОЙ СТАТЬИ. МНОГО ТЕКСТА!
</body>
</html>
В результате у нас должен получится такой же результат, как и на картинке ниже.
Мы видим, что те участки текста, которые заключены в тег <p> </p> приобрели совсем иной вид и превратились в параграфы, создав отступ между абзацами, каждый новый абзац начинается уже со следующей строки. Таким образом, используемый тег <p> </p> указывает браузеру, где начинается наш параграф и где он заканчивается. Если не указать закрывающий тег </p>, то считается, что закрывающий тег совпадает с началом следующего блочного элемента. Рекомендую все же всегда использовать закрывающий тег после каждого открытого тега.
На демо можно просмотреть что и как должно было у Вас получится, а мы на этом с параграфами завершим. В следующей статье рассмотрим, как создаются заголовки к тексту, а те, кто все еще не знает с чего начать WEB-программирование, рекомендую вернуться на шаг назад.
CSS