Работаем с текстом на html странице. Как разместить текст, заголовки, параграфы на странице сайта. Смотреть примеры работы с текстом на веб странице.


В этом уроке будем работать c элементами.


<h1> </h1> Заголовок.

<p> </p> Параграф.    

<br> Перенос текста.  




<h1> </h1> Как разместить заголовок на странице html.

На этом уроке мы начнём изучать, как создавать красивые правильные тексты на html странице сайта. Мы уже знаем, что размешенный текст между тегами <body> </body> станет доступно пользователю перешедшим на ваш сайт. Если страница сайта состояла бы из нескольких предложений или целиком сплошного однотонного текста, то можно было обойтись и без этого изучения. Если мы хотим создавать хорошие сайты с красивым текстом, то нам надо знать, как правильно размещать текст на странице, указывать заголовки, разбить текст на параграфы, где то нужно выделить текст жирным или другим цветом, чтоб пользователю было легче и комфортней читать и ориентироваться на сайте. Начнём обзор с заголовков, ведь всем известно, что лучше один раз увидеть, чем 100 раз услышать.


<h1>Первый заголовок </h1>
<h2>Второй заголовок </h2>
<h3>Третий заголовок </h3>
<h4>Четвёртый заголовок </h4>
<h5>Пятый заголовок </h5>
<h6>Шестой заголовок </h6>
 

Заголовки на странице сайта бывают до 6 уровней и имеют открывающие и закрывающие теги. Текст, расположенный между ними отобразится крупнее обычного в зависимости уровня. Теперь скопируйте код, который находится выше и вставьте в html документ, который мы создавали в предыдущих уроках между <body> </body> и откройте в браузере. Мы увидим, что заголовки имеют разные размеры в зависимости от уровня как показано на рисунке.

так обозначаются заголовки



<p> </p> Параграф html странице сайта.

Далее посмотрим как разделять текст на параграфы. Параграфы на сайте выделяются с помощью открывающими и закрывающими <p> </p>тегами достаточно поместить текст между ними. Теперь рассмотрим варианты размещения текста в различных частях веб страницы. Будем выравнивать текст параграфа по горизонтали, здесь мы добавляем атрибут ALIGN указывающую выравнивание по горизонтали. Посмотрим ниже пример.


<p> По умолчанию параграф слева </p>
<p> align="left"> Этот текст параграфа тоже слева </p>
<p> align="center"> Здесь по центру </p>
<p> align="right"> А этот справа </p>
<p> align="justify"> Этот же текст параграфа будет расположена по всей ширине нашей html страницы. </p>
 

Смотрим что получилось в Internet Explorer, как видите все параграфы на странице разместились так как мы и указали им.

так пишутся параграфы



<br> </br> Как перенести текст на странице .

Давайте посмотрим как перенести строку на html странице с помощью <br> он не имеет закрывающего тега и работает один. Смотрим на примере.


Мы начали писать новую строку <br>
и хотим, чтоб этот кусок видно было на второй строке <br>
этот же текст на третьей. <br> Хоть мы и продолжили писать, эта строка будет уже четвёртой, <br>а эта пятой.
 

А теперь смотрим что у нас получилось в браузере. Не обязательно переносить каждую строку текста при создании страницы надо просто добавлять этот <br> тег в нужном месте и она сама перенесёт продолжение текста на новую строку.

так переносится строка

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



Рейтинг@Mail.ru   Яндекс.Метрика