Оглавление:

Здравствуйте, уважаемые читатели блога! Сегодня мы поговорим о структурировании текста на web-страницах, об особенностях его отображения и рассмотрим как разбить текст на отдельные логические фрагменты: заголовки, абзацы, списки .

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

Для примера эти строки на web-странице будут отображаться одинаково не смотря на их разное написание:

Добро пожаловать на наш сайт!

Добро
пожаловать на наш сайт!

Добро пожаловать
на наш
сайт!

Исключение составляет тег

, внутри которого все пробелы и переносы отображаются как есть.

Во-вторых, текст занимает ширину окна браузера. Если длинная строка текста шире окна браузера, то в местах пробелов или дефиса автоматически будут вставлены переносы строк. Если в строке нет ни пробелов, ни дефисов, а строка не умещается по ширине окна, то в браузере появится горизонтальная полоса прокрутки.
Теперь перейдем к рассмотрению структурных элементов текста в разметке html.
Абзацы в языке HTML
Обычно, блоки текста разделяют между собой абзацами(параграфами). Это облегчает чтение больших кусков текста. Язык HTML для создания абзаца содержит парный тег 

. Синтаксис создания абзацев следующий:
Это первый абзац.


А это уже второй абзац

Абзацы на html-странице отделяются небольшими отступом от предыдущего и последующего элементов. Тег 
Также является блочным элементом. Что такое блочные элементы я писал в статье « ». Напомню, что блочные элементы
 характеризуются тем, что занимают всю доступную ширину html-страницы, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
Рассмотрим пример применения абзацев на web-странице. Откроем текстовый редактор, наберем HTML-код и сохраним с расширением html:














Сайт об автомобилях.




Классификация автомобилей


Легковой;


Грузовой;


Внедорожник;


Багги;


Пикап;


Спортивный;


Гоночный.





При открытии данного файла будет примерно такая картина:
Пока, что наша страница содержит одни абзацы.
Для выравнивания текста в абзаце тег 
Поддерживает атрибут align.
Он может принимать одно из четырех значений:
left
 — выравнивание текста по левому краю;
center
 — выравнивание текста по центру;
right
 — выравнивание текста по правому краю;
justify
 — выравнивание по ширине, т.е. выравнивание текста одновременно по правому и левому краю. Для этого браузер помещает пробелы между словами.
По умолчанию атрибут align имеет значение left. Пример использования атрибута align:

Этот текст в абзаце на html странице будет выровнен по левому краю!


Этот текст в браузере отобразится по центру страницы!


Этот текст будет выровнен по правому краю!


А этот большой кусок текста браузер выровняет по ширине, т.е. одновременно по правому и левому краю! Для этого web-обозреватель вставит между словами дополнительные пробелы и абзац примет аккуратный вид, удобный для чтения!

И так это отобразится в браузере:

Заголовки в языке HTML
Для выделения разделов текста на web-странице применяются заголовки. В html существует шесть уровней заголовков. Самым верхним уровнем является уровень 1 — тег 
, а самым нижним - уровень 6, тег 
. Теги 
 — 
 являются блочными элементами страницы. Содержимое заголовка первого уровня отображается самым крупным шрифтом жирного начертания, а заголовки последнего шестого уровня - самым мелким.

Синтаксис создания заголовков:














Заголовок первого уровня



Заголовок второго уровня



Заголовок третьего уровня



Заголовок четвертого уровня



Заголовок пятого уровня



Заголовок шестого уровня






Результат:

Также заголовки играют важную роль при раскрутке сайта, так как поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка.
Добавим заголовки в нашу страницу:
Сайт об автомобилях.


Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.


Научным языком автомобиль это:


Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.


Классификация автомобилей


Автомобили бывают следующих типов:


Легковой;


Грузовой;


Внедорожник;


Багги;


Пикап;


Спортивный;


Гоночный.

И видим, что на нашей странице кроме абзацев появились выделенные большим жирным шрифтом заголовки:

Теги 
-
, как и тег 
Используют атрибут align для выравнивания текста. При использовании этого атрибута все аналогично как с тегом
Нумерованные и маркированные списки в HTML
Список применяется для того, чтобы сформировать пронумерованный или непронумерованный перечень каких-либо фраз или значений. Список с пронумерованными пунктами называется нумерованным
, а с непронумерованными пунктами — маркированным
.
В маркированных списках пункты помечаются маркерами, которые ставятся левее пунктов списка. Web-браузер отображает список с отступом слева и самостоятельно расставляет необходимые маркеры или нумерацию. Списки и их пункты относятся к блочным элементам Web-страницы.
Любой список в HTML представляет собой набор элементов, каждый из которых помещается внутрь тега 
. Затем все элементы помещаются внутрь тега 
, если нужен маркированный список, или внутрь тега 
, если нужен нумерованный список.













Маркированный список:



первый пункт.


второй пункт.


третий пункт.
 


Нумерованный список:



первый пункт нумерованного списка.


второй пункт нумерованного списка.


третий пункт нумерованного списка.







И выглядят они примерно так:

В маркированных списках могут применяться различные типы маркеров. Для определения типа маркера в тег 
 добавляется атрибут type,
если мы хотим задать вид маркера для всех элементов списка или добавить это же атрибут в тег 
 если необходимо задать вид маркера для конкретного элемента. Атрибут type может принимать следующие значения:

disc — закрашенная окружность;
circle — окружность;
square — квадрат.
По умолчанию атрибут type равен disc. Пример использования:


Пункт 1


Пункт 2


Пункт 3






Пункт 1


Пункт 2


Пункт 3






Пункт 1


Пункт 2


Пункт 3



Отображение в браузере:

Нумерованный список также поддерживает атрибут type, с помощью которого можно задавать следующие типы маркера:
A — заглавные латинские буквы;
a — строчные латинские буквы;
I — заглавные римские цифры;
i — строчные римские цифры;
1 — арабские цифры.
По умолчанию в нумерованном списке атрибут type устанавливает в качестве маркеров арабские цифры. Кроме атрибута type нумерованный список поддерживает атрибут start
, который задает число с которого будет начинаться список. В спецификации HTML5 для нумерованного списка появился еще атрибут reversed,
который меняет нумерацию на обратный порядок.
Т.е. вместо 1, 2, 3 список будет нумероваться 3, 2, 1. Но атрибут reversed поддерживается еще очень малым количеством браузеров.
Списки можно помещать друг в друга, создавая вложенные списки. Вложенный список
 помещается внутрь элементов 
 внешнего списка:



первый пункт.


второй пункт.



первый пункт вложенного списка.


второй пункт вложенного списка.


третий пункт вложенного списка.






третий пункт.



И в браузере:

В HTML есть еще третий вид списка — , который представляет из себя перечень терминов и их определений. Этот список задается с помощью парного тега 
. Внутри него помещают пары «термин - определение». Термины заключают в парный тег 
, а определения - в парный тег 
:



Термин 1


Определение 1


Термин 2


Определение 2



Отображение в браузере:

На нашей Web-странице есть абзац классификации автомобилей. Сделаем эту классификацию при помощи маркированного списка:


Легковой;


Грузовой;


Внедорожник;


Багги;


Пикап;


Спортивный;


Гоночный.



И посмотрим результат:

Горизонтальные линии

Для разделения или дополнительного выделения блоков текста в HTML есть одинарный тег HR — горизонтальная линя
. Так это выглядит в коде html:
Первый абзац




Второй абзац

И вот как это отображается:

Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web-страницы и имеет один-два пиксела в толщину, в зависимости от используемого браузера.
С помощью атрибутов можно задавать внешний вид горизонтальной линии. Тег 
 поддерживает следующие атрибуты:

align — определяет выравнивание линии;
color — задает цвет линии;
size — устанавливает толщину линии в пикселях;
width — устанавливает ширину линии в пикселях.
Вставим горизонтальную линию на нашу WEB-страницу. Сделаем ее зеленым цветом, толщиной в 1 пиксель и шириной 320 пикселей:
Сайт об автомобилях.


Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.


Научным языком автомобиль это:


Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.




Классификация автомобилей


Автомобили бывают следующих типов:




Легковой;


Грузовой;


Внедорожник;


Багги;


Пикап;


Спортивный;


Гоночный.



Результат будет примерно таким:

списки
изображения
ссылки
таблицы
формы
видео
аудио
Справочник HTML
Справочник CSS
Вёрстка сайта
С заголовком страницы H1 и абзацем P мы частично познакомились в первом уроке о структуре документа html. Теперь рассмотрим теги логической разметки: заголовки, абзацы, списки, видимых элементов элемента Body, и теги физического форматирования подробнее. Для этого слегка изменим нашу страницу-пример или наберем ее заново:
 
В нашей учебной html-странице добавились (отмечены стрелками, однократно): заголовок 2-го уровня - тег H2, два заголовка 3-его уровня - тег H3, еще один абзац - тег P, маркированный список - Ul и несколько тегов физического форматирования. Откроем страницу в браузере:
 

 
Теги H1-H3 обозначают заголовки различного уровня - их всего шесть. Заголовок самого нижнего уровня, соответственно - H6. Использовать заголовки необходимо логически, а заголовок верхнего уровня H1 должен встречаться на странице один раз. Заголовок H1 отображается браузерами крупным шрифтом, а размер шрифта в заголовках следующих уровней - уменьшается соответственно.
 
Поисковые боты придают большое значение содержимому заголовков верхнего уровня. А пользователям легче ориентироваться на странице с логически правильно выстроенными заголовками.
 
Т
еги физического форматирования
 
На странице видно горизонтальную полосу, после второго абзаца - ее создает элемент Hr, не имеющий закрывающего тега. Тег Br означает перевод строки на новую, он тоже не парный - без закрывающего тега. При форматировании текста можно использовать несколько идущих подряд элементов Br - каждый следующий добавит новую пустую строку.
 
Теперь обратим внимание на слово «body» во втором абзаце, заключенное в парный тег B, который задает слову полужирное начертание. А фраза «оформлять текст» отображается курсивом - это достигается с помощью тега I. Тег U задает подчеркивание (его нет в нашем примере).
 

 
Кроме этих тегов, выделяющих фрагменты текста, в HTML существуют еще тег Strong - выделяет важный по значению фрагмент (жирное начертание). И тег Em - чуть менее важный (курсив). Поисковые боты обращают более пристальное внимание на эти два тега, указывающие на важные по логическому смыслу фразы. Целесообразно заключать в них ключевые слова , но перебарщивать с этим не стоит. Это же касается и заголовков.
 
Вот еще несколько тегов физического форматирования текста: Q - выделяет цитату в строке. Блочный элемент Blockquote - в этот тег можно помещать несколько абзацев.
 
Тег Code служит для разметки фрагментов кода, его необходимо использовать с переносами строк Br и неразрывными пробелами: для их обозначения используется спец. символ (первый знак - амперсанд
: клавиша 7 с зажатой Shift в английской раскладке). А вот тег Pre отображает программный код, как есть, с пробелами и столько строк, сколько их в коде.
 
Это наиболее употребимые элементы оформления текста, об остальных тегах форматирования и специальных символах смотрите в Справочнике HTML , расположенного на этом же сайте - в нем удобная навигация по алфавиту.
 
С
оздание списков html
 
Осталось рассмотреть создание списков, у нас он маркированный, и задан парным тегом Ul, а его элементы, или пункты тегом Li (1-ый скриншот). При помощи атрибута type, как для тега Ul, так и для тега Li, мы можем поменять тип маркера. По умолчанию, т.е. если атрибут не указан, его значение равно «disk» - кружок. Можно задать атрибут type со значением «circle» - окружность. Или так: 
 - мы получим список с маркерами-квадратиками.

 
Вообще то, я не буду заостряться на атрибутах тегов, кроме обязательных и парочке примеров для общего понимания. Для задания стилей лучше использовать свойства CSS - дойдем и до них, а атрибуты вы найдете в справочнике.
 
Кроме маркированных, существуют нумерованные списки, которые задаются тегом Ol, а элементы списка, как и у маркированных - тегом Li. Кроме того, для обоих видов списков можно создавать вложенные списки
. Усложним задание и изменим наш список в странице-примере на следующий:
 

 
Откроем страницу в браузере, наглядно видим: нумерованный список с вложенным в него маркированным списком, для которого значение «square» атрибута type задает маркеры-квадратики.

Параграфы и заголовки
Основным способом представления информации в интернете является текст, именно текстовую информацию ищет большинство людей и именно по текстовым словам и фразам осуществляют этот поиск специальные поисковые системы. Поэтому, во многом от того насколько грамотно и удобно структурирован текст на страницах будет зависеть - задержится ли посетитель на сайте или пойдет искать более удобный источник информации. Ведь согласитесь, что читать сплошной текст гораздо труднее, чем разделенный на параграфы и тематические подразделы. В HTML за такое структурирование текста отвечает несколько тегов, о них мы и поговорим в этом уроке.
Тег 
Или разбиваем страницу на параграфы (абзацы)
Если помните, то с тегом 
Вы уже встречались в этом учебнике, ну что ж, теперь пришла пора изучит его полностью. Итак, тег 
Отвечает за создание параграфов на HTML-странице, и он является блочным элементом
. Надеюсь, что вы уже запомнили, что такое теги уровня блока. Да, но кроме того, что он создает перед собой и после себя переносы строк в начало - еще он устанавливает сверху и снизу себя небольшие поля (внешние отступы) пустого пространства, благодаря чему и происходит визуальное разделение текста на абзацы. Высота этих полей равна одной пустой строке.
 
Теперь самое главное - тег 
Может содержать только элементы уровня строки (встроенные) и никакие больше. Поэтому, например, он не может содержать другой параграф, так как сам 
Является блочным элементом. Ну, мы к этому еще не раз вернемся. Кстати, любой текст без тегов тоже считается встроенным элементом.
Пример параграфов в HTML

 






Первый параграф.
Второй параграф.


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

У тега 
Есть один необязательный атрибут align
, который устанавливает положение текста внутри блока. то есть можно сделать так, чтобы каждая строка параграфа располагалась по центру страницы или прижималась к правой стороне, а не к левой, как обычно. Только вот незадача - атрибута align
 нет в строгой версии HTML и, возможно, в скором будущем его перестанут поддерживать современные браузеры. И что же делать? А сделаем мы следующее: в одном из ближайших уроков я вам покажу универсальный способ, с помощью которого можно менять положение содержимого не только внутри параграфов, но и внутри любых блочных элементов HTML-страницы (заголовков, таблиц, списков и т.д.). Но главное его точно понимают и будут понимать все браузеры.
Теги 

 - 

 или заголовки HTML-страницы
Заголовки играют очень важную роль в HTML, используя их можно разделить текст страницы на логические части, подчеркивая степень важности каждой, что позволяет посетителям быстрее находить нужную информацию. К тому же поисковики (Яндекс, Google и т.п.) придают больший «вес» тексту в заголовках. Существует их шесть типов, где 

 самый важный заголовок (первого уровня, верхний), а 

 наименее значимый (шестого уровня, нижний). Например, 

 может быть заголовком страницы, 

 - ее разделов, 

 - подразделов и т.д.

Теги заголовков являются блочными элементами
 и, как и параграфы, могут содержать только теги уровня строки и текст. Браузеры выделяю текст заголовков полужирным шрифтом, разным размером (в зависимости от тега) и добавляют поля пустого пространства сверху и снизу, опять же, как у параграфов.
Синтаксис написания заголовков в HTML

 
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
У заголовочных тегов есть два необязательных атрибута - это уже знакомый вам устаревший align
 и атрибут title
, выводящий «всплывающую» подсказку при наведении курсора мыши на заголовок. Как и в случае с параграфами, мы не будем использовать align
, а скоро выучим другой способ.
Пример использования заголовков в HTML

 






Заголовок первого уровня
Параграф.
Заголовок второго уровня
Параграф.
Параграф.


Результат в браузере
Заголовок первого уровня
Параграф.
Заголовок второго уровня

Параграф.
Параграф.
Домашнее задание.
В этом задании вам надо будет создать страницу имитирующую небольшую статью, текст пишите какой угодно. Можете сразу посмотреть результат примера, чтобы у вас появилось представление о том, что надо сделать.
Откройте в HTML-редакторе страничку из прошлого урока.
При помощи заголовков 

, 

 и 

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

Теги, определяющие абзац, пробел, HTML блок и параграф

 
Рассмотрим в деталях HTML блоки и параграфы
 как элементы интернет-страницы.
 
HTML параграф
 определяется тегами .
 
HTML параграфы
 обыкновенно содержат текст, форматирующие теги, изображения.
 
HTML параграф
 не может содержать внутри себя блочные элементы, такие как заголовки 
 
 - 
 , блок 
 
 и другие параграфы.
 
HTML блок
 определяется тегами 
 
 .
 
HTML блок
 может вмещать в себя любые элементы web-страницы, в любом количестве.
 
HTML блоки
 прекрасно подходят для интернет-страниц, ими легко манипулировать.
Рассмотрим расположенный ниже код:
 
Результат:
 
Нам видно, что HTML параграфы
 имеют отступы по вертикали - такова особенность тегов . HTML блоки

 
 
 такие пространства не создают, потому что они не несут никакой нагрузки,
 а просто являются контейнерами.

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

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

 
HTML пробел из таблицы специальных символов
 
HTML пробел
 позволяет увеличить расстояние между словами и символами.
 
Что касается пробелов между словами, то сколько бы не было их в Блокноте, то есть в исходном коде, на web-странице отобразится только один. Если вам понадобится увеличить растояние -
 используйте символ пробела из таблицы символов . Вы спросите: Зачем нужны эти закодированные значения обычных символов? - Я отвечу:
 Они нужны, чтобы отображать, например, такие скобки < > . Другими словами,
 для вывода на экран тегов , в своем редакторе я пишу:  . Теги   , как мы помним, преобразуют текст в моноширинный (машинописный).
 
Способы отображения HTML абзаца
 
Примеры вывода абзаца.
В прошлом уроке про документа мы рассмотрели шесть уровней заголовков, которые может включать в себя html-страница, узнали правила использования тега «h1-h6». В этом уроке мы рассмотрим, тег абзаца
, который будет придавать нашему тексту правильное оформление на странице.
В следующем посте я расскажу вам, как сделать ваш сайт еще более красивее ( , чтобы его не пропустить). Мы научимся создавать стильный фон. Этот пос я разобью на две части, в первой части мы поработаем с фотошопом, а во второй поиграемся с каскадными таблицами стилей.
Тег абзаца
 или тег параграфа «p» позволяет создать на странице web-документа абзац из текста. Если не использовать тег «p», а просто внести текст без оформления, то получится неструктурированный, оформленный некрасиво текст.
При использовании тега абзаца текст приобретает более или менее читабельный вид, что делает страницу более привлекательной. Давайте рассмотрим документ, в котором не используется тег параграфа:
 
XHTML

 

 
 
 

Сегодня, я проснулся как всегда рано. Утреннее солнце пробивалось сквозь
занавески моего окна. Потянувшись, я пошел на кухню. Заварил себе зеленый чай,
положил две ложки сахара и сел в мягкое кресло перед кухонным окном. На дворе
стояла осень. Мне нравится это время года, потому что я считаю, что осень - самая
романтическая пора года. После того, как допил чай, я взял мобильный и позвонил
своей любимой, пожелать ей доброе утро. Как я и думал, она еще спала. Мы мило
побеседовали и договорились встретиться сегодня днем, пока светит солнце и на
улице тепло. Время пролетело незаметно. И вот мы уже вместе, обедаем в местном
кафе: кушаем, болтаем, флиртуем друг с другом. Нам хорошо вместе. Я люблю свою
девушку и на меня тоже. Думаем о создании семьи...


 


 





Сегодня, я проснулся как всегда рано. Утреннее солнце пробивалось сквозь
занавески моего окна. Потянувшись, я пошел на кухню. Заварил себе зеленый чай,
положил две ложки сахара и сел в мягкое кресло перед кухонным окном. На дворе
стояла осень. Мне нравится это время года, потому что я считаю, что осень - самая
романтическая пора года. После того, как допил чай, я взял мобильный и позвонил
своей любимой, пожелать ей доброе утро. Как я и думал, она еще спала. Мы мило
побеседовали и договорились встретиться сегодня днем, пока светит солнце и на
улице тепло. Время пролетело незаметно. И вот мы уже вместе, обедаем в местном
кафе: кушаем, болтаем, флиртуем друг с другом. Нам хорошо вместе. Я люблю свою
девушку и на меня тоже. Думаем о создании семьи...




Вот в итоге, что у нас получилось:
Текст оформлен некрасиво. Все собрано в кучу, без какой-либо структуры. Следующий пример, показывает применение тега абзаца «p». Этот тег парный, блочный, но внутри себя может содержать только строчные теги. Блочные теги внутри тега «p» недопустимы, включая и сам тег «p»:
 
XHTML

 

 
 
 

 
Абзац первый. Для того, чтобы текст на ваших страницах выглядел читабельно
используется тег абзаца «p». Этот текст обрамлен в парный тег «p», что позволяет
 браузеру распознать текст как абзац.
 
Абзац второй. Это второй абзац, идущий после первого. Этот абзац будет иметь
отступ, от первого абзаца. Пример использования абзацев можете просмотреть на
рисунке ниже.


 


 





Абзац первый. Для того, чтобы текст на ваших страницах выглядел читабельно
используется тег абзаца «p». Этот текст обрамлен в парный тег «p», что позволяет
Браузеру распознать текст как абзац.

Абзац второй. Это второй абзац, идущий после первого. Этот абзац будет иметь
отступ, от первого абзаца. Пример использования абзацев можете просмотреть на
рисунке ниже.





Вот что у нас получилось, кода мы стали использовать абзац:
Появились две составные части страницы – два абзаца, разделенные отступом. И так бед с каждым новым абзацем. Для нашего первого примера, где тег абзаца не используется можно применить следующее форматирование, используя тег «p»:
 
XHTML

 

 
 
 

 
Солнечное утро
 
Сегодня, я проснулся как всегда рано. Утреннее солнце пробивалось сквозь занавески моего окна. Потянувшись, я пошел на кухню. Заварил себе зеленый чай, положил две ложки сахара и сел в мягкое кресло перед кухонным окном. На дворе стояла осень. 
 
Мне нравится это время года, потому что я считаю, что осень - самая романтическая пора года. После того, как допил чай, я взял мобильный и позвонил своей любимой, пожелать ей доброе утро. Как я и думал, она еще спала.
 
Мы мило побеседовали и договорились встретиться сегодня днем, пока светит солнце и на улице тепло. Время пролетело незаметно. И вот мы уже вместе, обедаем в местном кафе: кушаем, болтаем, флиртуем друг с другом. Нам хорошо вместе. Я люблю свою девушку и на меня тоже. Думаем о создании семьи...


 


 






Солнечное утро

Сегодня, я проснулся как всегда рано. Утреннее солнце пробивалось сквозь занавески моего окна. Потянувшись, я пошел на кухню. Заварил себе зеленый чай, положил две ложки сахара и сел в мягкое кресло перед кухонным окном. На дворе стояла осень.

Мне нравится это время года, потому что я считаю, что осень - самая романтическая пора года. После того, как допил чай, я взял мобильный и позвонил своей любимой, пожелать ей доброе утро. Как я и думал, она еще спала.

Мы мило побеседовали и договорились встретиться сегодня днем, пока светит солнце и на улице тепло. Время пролетело незаметно. И вот мы уже вместе, обедаем в местном кафе: кушаем, болтаем, флиртуем друг с другом. Нам хорошо вместе. Я люблю свою девушку и на меня тоже. Думаем о создании семьи...





Как вы уже заметили, я добавил заголовок к тексту. Я использовал всего три параграфа, и этот вариант как всегда оказался лучше, чем тот, что был раньше. Теперь у нас появились смысловые разделения текста (отступы между абзацами). Вообще, правильно будет говорить, не «абзац», а «параграф», так как тег «p» в переводе с английского означает «paragraph». Далее я буду говорить параграф, так что не путайтесь.
Вот примерно то, что должно было у вас получиться после использования тега параграфа
:
Тег параграфа, как и все другие html-теги, имеет атрибуты. Сейчас мы рассмотрим, наиболее важные атрибуты тега «p».
id – определяет универсальный идентификатор, используемый при написании свойств в файле каскадных таблиц стилей (обычно style.css). Имя идентификатора используется только один раз в пределах одного документа
class – то же что и id, но может использоваться несколько раз в пределах одного документа
title – подсказка, выводимая в окне браузера при наведении курсора мыши на текст параграфа
style – определяет набор свойств каскадных таблиц стилей
align – определяет выравнивание текста параграфа относительно окна браузера (лево – left , право – right , по центру – center , по ширине — justify)
и др. (элементы JavaScript)
Пример использования атрибутов:
 
XHTML

 

 
 
 

 
Если навести курсор мыши на этот текст, то вылезет подсказка!!!
 
Этот параграф выровнен по левому краю
 
Этот параграф выровнен по правому краю
 
Этот параграф выровнен по центру
 
Этот параграф имеет универсальный идентификатор, который ссылается на свойства прописанные в файле CSS и может использоваться только один раз на странице
 
Этот параграф имеет класс MAIN-P, может быть назначен несколько раз на странице, в отличие от ID-идентификатора
 
Этот параграф весь подчеркнутый, т.к. использует каскадные стили, прописанные напрямую этому параграфу с помощью атрибута тега STYLE. В значении атрибута STYLE я прописал, чтобы параграф был весь подчеркнутый: UNDERLINE
s


 


 






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

s