Форматирование текста на html

В этой главе рассмотрим способы форматирования текста на странице html. Форматирование текста необходимо для правильного и аккуратного показа текста и графических материалов на странице html.

Небольшое отступление

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

В некоторых случаях Вы можете посмотреть примеры выполнения написанного - у Вас должно получиться также. Если что-то не так - внимательно просмотрите написанный вами код и найдите ошибку. Чтобы легче было искать ошибки, вставляйте перед абзацем или группой кода свои комментарии. Комментарии вставляются между символами

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

Итак, приступим, помолясь...

Создайте текстовый документ в любом текстовом редакторе, например в текстовом редакторе Notepad Windows. В этом редакторе Вы и будете создавать ваш сайт. После написания документа, сохраните его под именем index с расширением .htm или .html. Это будет стартовая или главная страница вашего сайта.

В дальнейшем страницу удобно редактировать в самом браузере, если Вы работаете в браузере Opera. Щелкните правой кнопкой мыши по страничке и в контекстном меню выберите Исходный код. После редактирования текста щелкните Применить изменения для обновления странички. Если Вы используете другие браузеры, то редактировать текст придется в Блокноте.

Разметка гипертекстового документа производится, так называемыми тэгами. Тэги - это набор символов или типичное сокращение английских слов, заключенные в угловые скобки без пробелов (<тэг>). Тэги бывают парными и непарными. Парные тэги должны закрываться с применением слэша (</тэг>). Парные тэги ко всему прочему, являются еще и контейнерами. Это значит, что внутри этих тэгов могут располагаться другие тэги, как парные, так и непарные. При закрытии тэгов будьте внимательны, последний открытый тэг должен быть закрыт первым.

Первой строкой всегда вставляется тэг DOCTYPE. Что это такое и зачем он нужен смотри в отдельной статье.

Любой гипертекстовый документ открывается тэгом <html>. Регистр значения не имеет, но лучше приучиться писать тэги в нижнем регистре, т.к. некоторые браузеры интерпретируют их по своему. Этот тэг парный и документ должен заканчиваться этим же тэгом со слэшем. Затем идет парный тэг <head>, что означает ”голова“ документа. Между тегами <head> вставляется служебная информация в виде МЕТА-тэгов. Затем идет парный тэг <body>, что означает ”тело” документа. Собственно между тэгами <body> и располагается все видимое наполнение вашего сайта.

Пример:

<html>
<head>
Служебная информация в виде МЕТА тэгов
</head>;
<body>
Содержимое вашего сайта
</body>
</html>

МЕТА-тэги более подробно мы рассмотрим ниже. Но один из них <title> мы вставим между тэгами <head>. Это заголовок нашей странички. Теперь пришла пора написать нашу первую страничку. Это будет выглядеть так:

<html>
<head>
<title>Это заголовок странички моего СУПЕР-ПУПЕР сайта</title>
</head>
<body>
Это моя первая страничка, написана лично мною и по-моему очень хороша.
</body>
</html>

Чтобы посмотреть, что у вас должно получиться, щелкните здесь. Обратите внимание на заголовок браузера. Там написан ваш текст заголовка, заключенный в тэги <title> тэга <head>. Сохраните эту страничку на память.

Посмотрев на то, что у нас получилось, мы понимаем, что получилось все скучно - как в Word-е и даже хуже. Но это не беда. Главное то, что мы поняли КУДА можно писать тексты. А сейчас мы будем учиться КАК писать эти самые тексты.

Начнем с тэга параграфа или абзаца <p>. Этот тэг имеет атрибут align, что значит выравнивание, а значения этого атрибута будут следующие:

"center" - выравнивание по центру;
"left" - выравнивание по левому краю;
"right" - выравнивание по правому краю;
"justify" - выравнивание по ширине;

Для выравнивания по центру существует парный тэг <center>. Его можно применять перед абзацами, картинками, таблицами и т.д.

Теперь отредактируем текст в нашей заготовке следующим образом:

<p align="center">Это моя первая страничка, написанная мною.</p>

Что должно получиться, смотрим здесь. Поэкспериментируйте с разными значениями атрибута align. Напишите какой-либо длинный текст, чтобы увидеть, как происходит выравнивание многострочного текста. Вставьте еще раз тэг <p> в свой код. Ну например так:

<p align="center">Это моя первая страничка, написанная мною.</p>
<p align="right">Здесь какой-нибудь другой текст.</p>

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

А что делать если необходимо начать новую строку внутри абзаца? Для этого существует непарный тэг <br>. Тэг <br> переводит строку, но не вставляет после себя пустую. Сотрите в предыдущем примере тэг </p> между двумя абзацами и вставьте тэг <br> в конце первого абзаца. Этот тэг непарный и закрывать его не нужно. Код будет выглядеть так:

<p align="center">Это моя первая страничка, написанная мною.<br>
Здесь какой-нибудь другой текст.</p>

Далее рассмотрим еще один способ выравнивания.

Существует еще такой парный тэг как <div>. Этот тэг может управлять различными блоками. Подробнее о применении тэга <div> будет рассказано в отдельной статье. Он работает также как и тэг <p> с теми же атрибутами align="left", "right", "center" и "justify". Но тэг абзаца <p> не может содержать внутри себя другие тэги абзаца и тэги <div>. Также тэг абзаца <p> не может быть пустым. Например, <p><p>. Иначе браузеры пропустят его. И Вы не получите того, что ожидали.

<p align="left">Это моя первая страничка, написанная мною.</p>
<p align="left">Футбол - это коллективная игра с мячом, целью которой является забить на один мяч больше в ворота соперника любой частью тела, кроме рук. Игра руками считается фолом и наказывается штрафным ударом, а преднамеренная игра рукой приводит и к наказанию желтой или даже красной карточкой.</p>
<div align="left">Это моя первая страничка, написанная мною.</div>
<div align="left">Футбол - это коллективная игра с мячом, целью которой является забить на один мяч больше в ворота соперника любой частью тела, кроме рук. Игра руками считается фолом и наказывается штрафным ударом, а преднамеренная игра рукой приводит и к наказанию желтой или даже красной карточкой.</div>.

    Однако тэг <div> может содержать в себе тэги абзаца <p>. Например, нам необходимо сгруппировать абзацы по правой стороне. Тогда это должно выглядеть так:

<div align="right">
    <p>текст вашего первого абзаца</p>
    <p>текст вашего второго абзаца</p>
</div>

В первом случае текст был написан с применением тэга <p>, а во втором - с применением тэга <div>. В третьем - с применением тэгов <div> и <р>. Смотрим здесь, что должно получиться.

Ниже мы рассмотрим использование специальных символов, но сейчас мне бы хотелось выделить один из них, т.к. он может часто использоваться при форматировании текста. Этот спецсимвол   обозначает неразрывный пробел. HTML документ не понимает больше одного пробела, а если нам необходимо вставить "красную" строку? Вот здесь и выручит этот самый спецсимвол. Его необходимо прописать несколько раз подряд и у нас получится отступ. Точка с запятой в конце спецсимволов ОБЯЗАТЕЛЬНА. Но имейте в виду, что это неразрывный символ, и перенести его на другую строку не получится. Учитывайте это.

Далее мы продолжим изучение форматирования текста. Рассмотрим выделение текста и заголовков.

Форматирование текста на html

Реклама