Рейтинг:  4 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна
 

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

Рассмотрим теги

  • H

    позволяет изменять размер заголовка.

  • P

    нужен для разбиения текста на абзацы.

  • BR

    перенос текста на новую строку.

  • DIV и SPAN

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

  • HR

    создаёт горизонтальную линию.

 

Тэг H (контейнер)

Теперь давайте сделаем чтобы первая строчка была написана крупным шрифтом, для этого используется тэг <h..>... </h..>.
Он имеет значение от 1 до 6. Где 1 - самый крупный, 2 - немного поменьше, 3 - ещё меньше и т.д.
Сделаем нашу строчку самым крупным шрифтом, заключим его в тэги <h1>...</h1>.
Почему назвал его контейнером? Потому что он имеет открывающий и закрывающий тег. Между ними помещается текст, как будто в контейнер.

<html>
<head>
<title>Сайт про аквариумы и их содержание</title>
</head>
<body>
<h1>Всё об аквариумных рыбках и растениях</h1>
<br>
Добро пожаловать!
</body>
</html>

Сохраним его и откроем браузером. Должно получится так:

форматирование текста в HTML

Тэг P (контейнер)

Для разбивки текста на абзацы используются тэги <p>...</p>.

Добавим контейнер с текстом в наш файл index.html:

<html>
<head>
<title>Сайт про аквариумы и их содержание</title>
</head>
<body>
<h1>Всё об аквариумных рыбках и растениях</h1><br>
Добро пожаловать!
<p>На нашем сайте Вы узнаете о содержании и разведении
аквариумных рыбок,о часто встречающихся болезнях
и методах лечения.</p

</body>
</html>

Скопируйте и сохраните, незабудте обновить браузер.

Тэг BR (одиночный)

Как видите текст в контейнере <p>...</p> отображается на всю ширину страницы. Как помните из прошлого урока для переноса на следующую строку используется одиночный тэг <br>. Попробуем.

<html>
<head>
<title>Сайт про аквариумы и их содержание</title>
</head>
<body>
<h1>Всё об аквариумных рыбках и растениях</h1>
<br>
Добро пожаловать!

<p>На нашем сайте Вы узнаете о содержании и разведении аквариумных рыбок,<br>
о часто встречающихся болезнях и методах лечения.</p>
</body>
</html>

Теперь уже лучше.

Атрибуты

Также для тэгов (контейнеров) существуют атрибуты, дополняющие их.

Атрибут align позволяет выравнивать текст на странице, имеет значения
align="center" - выравнивание посередине
align="right" - выравнивание по правому краю
align="justify" - выравнивает по левому и правому краям.
По умолчанию текст выравнивается по левому краю. Давайте выравняем наш текст по середине страницы:

<html>
<head>
<title>Сайт про аквариумы и их содержание</title>
</head>
<body>
<h1 align="center"> Всё об аквариумных рыбках и растениях</h1>
<br>
<p align="center">Добро Пожаловать!<br>
На нашем сайте Вы узнаете о содержании и разведении аквариумных рыбок,<br>
о часто встречающихся болезнях и методах лечения.</p>
</body>
</html>

Всё, теперь текст посередине страницы. НО как вы наверное уже заметили строчку - Добро Пожаловать - мы заключили в контейнер <p>...</p>.

Мы это сделали потому что строчка была вне контейнера, и вообще безо всяких атрибутов, а по умолчанию текст выравнивается по левому краю. То есть если бы мы эту строчку оставили без изменений, она осталась бы слева, а всё остальное было бы посередине.

Тэг SPAN (контейнер)

Ещё существует очень полезный контейнер <span>...</span>. С его помощью можно задать параметры любого фрагмента текста, даже для текста уже помещённого в другие контейнеры. В основном применяется совместно с CSS.

К примеру <span style="color: #0000ff;"> текст документа</span>
задаёт цвет текста в контейнере.

Цвет текста задаётся в шестнацатиричном или формате или ключевыми словами (red, black и т.д.).
Узнать значение можно из палитры Paint. ПУСК - Все Программы -Стандартные - Paint. Открываете программу, нажимаете F8. Появится окно с палитрой, выбираете цвет на окружности, щёлкаете мышкой и напротив надписи Hex будет значение:

Контейнер <span style="font-family: Arial;">...</span> задаёт вид шрифта. В нашем случае шрифт называется Arial. Существует много различных шрифтов : Georgia, Tahoma, Verdana и т.д.

Можно проставить несколько шрифтов,например: <span style="font-family: Arial, Tahoma;"> это если вдруг одного из шрифтов нет на компьютере, будет использоваться другой. Но это уже немного из CSS.

Тэг DIV (контейнер)

Используется для форматирования, перемещения блоков текста.
Атрибут align - определяет способ горизонтального выравнивания блока текста.
Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине. По умолчанию имеет значение left.
Например:

<div align="left">Сомы  очень скрытные рыбы, их можно увидеть<br>
только вечером когда свет в аквариуме выключен,<br>
и туда попадает только свет из комнаты<div>

Тэг HR (одиночный)

Для визуального эффекта используется одиночный тэг <hr>. С его помощью можно сделать горизонтальную линию.

Атрибуты:

  • width – определяет длину линии в пикселях или процентах от ширины окна браузера.
  • size – толщина линии в пикселях.
  • align – выравнивание линии, может принимать следующие значения:
    left – выравнивание по левому краю документа.
    right – выравнивание по правому краю документа.
    center – выравнивание по центру документа (используется по умолчанию).
  • color - определяет цвет линии, задаётся как в шестнадцатиричном формате, так и ключевыми словами.
    Например:
    <hr width="55%" align="right" color="red">
    Линия будет составлять 55% от длины экрана, выравнивается по правому краю, цвет линии - красный.

Вот наш получившийся код:

<html>
<head>
<title>Сайт про аквариумы и их содержание</title>
</head>

<body>
<h1 align="center"> Всё об аквариумных рыбках и растениях</h1>
<br><hr width="55%" align="right" color="red">
<p align="center">Добро Пожаловать!<br>
На нашем сайте Вы узнаете о содержании и разведении аквариумных рыбок,<br>
о часто встречающихся болезнях и методах лечения.</p>
<div align="left"><span style="color: #0000ff">
Сомы очень скрытные рыбы,их можно увидеть<br>
только вечером когда свет в аквариуме выключен,<br>
и туда попадает только свет из комнаты</span><div>
</body>

</html>

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

<html>
<head>
<title>Сайт про аквариумы и их содержание</title>
</head>
<!--Тело документа!-->

<body>
<!--Здесь будет горизонтальная линия!-->

<h1 align="center"> Всё об аквариумных рыбках и растениях</h1>
<br><hr width="55%" align="right" color="red">

<!-- Тут выравнивание текста посередине!-->
<p align="center">Добро Пожаловать!<br>
На нашем сайте Вы узнаете о содержании и разведении аквариумных рыбок,<br>
о часто встречающихся болезнях и методах лечения.</p>

<!--Блок текста слева синим цветом!-->
<div align="left"><span style="color: #0000ff">
Сомы очень скрытные рыбы,их можно увидеть<br>
только вечером когда свет в аквариуме выключен,<br>
и туда попадает только свет из комнаты</span><div>
</body>

<!--Конец тела документа!-->
</html>

Вот теперь уже ясно что, где и как!

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

<p><span><h2>текст</span></h2></p> будет неправильно, а

<p><span><h2>текст</h2></span></p> Будет правильно.  

Теперь немного потренируйтесь, поэкспериментируйте. Будте внимательны и не торопитесь.

Перейти к следующему уроку.

Оформление текста в HTML

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!