Что значит отформатировать текст на web-странице? Под форматированием текста в HTML понимается придание текстовому содержимому web-страницы красивого и опрятного вида. Это может быть:
быть выравнивание элементов (по левому, правому краю, середине или центру).
придание тексту определённого цвета, размера шрифта, "жирности", наклона.
Итак, приступаем к форматированию текста. А для этого нам естественно необходимо добавить на web-страницу сам текст.
Как мы с Вами уже определились ранее – наш сайт будет на автомобильную тематику (а Вы можете выбрать другую тему, которая интереснее лично Вам). Хочу заметить - это не реклама какой-то марки автомобилей, просто в данный момент мне попался в руки неплохой журнальчик.
Открываем web-страницу в программе Блокнот (а лучше в Notepad++) и между тегами <body> </body> (после первой ранее добавленной строчки) добавляем текст (можно добавить просто отвлеченный текст) как в Листинге 3.1:
Листинг 3.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Автомобили со всего мира</title>
<meta name="keywords" content="автомобили, легковые, гараж, автопутешествия">
<meta name="description" content="Все, что вы хотите знать про автомобили">
</head>
<body> Наш сайт посвящен автомобилям и все что с ними связано. Здесь Вы найдете много полезной и интересной информации.
Нынешний год - пора обновления модельного ряда. Оно продолжится по меньшей мере до осени, когда на рынок выйдет Mercedes-Benz GLK, новый компактный SUV. Первая жертва: из прайс-листов вычеркнута - модель Sportcoupe 2000 года рождения, с весны его заменит прямой наследник - CLC.
Компактный «спорткар» помимо нового имени получил обновленную внешность и усовершенствованную механику. Он, как и Sportcoupe, создан на базе седана С-класса прошлого поколения. Производиться CLC будет на том же бразильском заводе, и цена, как у предшественника, будет довольно привлекательной - порядка 28 000 евро.
Переходя от Sportcoupe к CLC, мерседесовские инженеры усовершенствовали и заменили более 1100 элементов. Из значимых изменений, которыми может похвастать CLC, отметим более «короткий» руль, значительно облегчающий управление, современную информационную систему, спутниковый навигатор с картами на DVD и на жестком диске. Внешне CLC можно узнать по новому дизайну передней части, который роднит новинку с новым С-классом. Сзади изменился дизайн крышки багажника, обновилась форма фонарей.
Из двигателей CLC предлагает четыре четырехцилиндровых (три бензиновых и дизель) мощностью от 122 до 184 л.с. и две V-образных бензиновых «шестерки» - 204 и 272 л.с. Сильнее других изменился 1,8-литровый мотор, который устанавливается на версию CLC 200 Kompressor: его мощность поднялась на 20 сил (до 184 л.с), а расход на 100 км по сравнению с предыдущей модификацией сократился почти на 1 л. Серийно все двигатели агрегатируются с шестиступенчатой «механикой», но на версиях с четырехцилиндровым двигателем можно заказать и пятидиапазонный «автомат». Семидиапазонный 7G-Tronic будет доступен с моторами V6. Оборудование салона достойно великой марки, причем все - от навигатора до систем безопасности - основано исключительно на проверенных решениях. В салонах российских дилеров автомобиль появится во втором полугодии.
</body>
</html>
Обязательно сохраняем (Ctrl+S) то что добавили, обновляем (F5) web-страничку в браузер и видим вот что...
Рисунок 3.1
видим полную ерунду... Что это? - спросите Вы. Не пугаетесь, ничего страшного не случилось, просто мы добавили голый текст без тегов форматирования. А теперь необходимо "рассказать" браузеру, что и как нужно отображать на экране монитора. Ведь компьютер - это просто машина. Этот процесс и называется гипертекстовой разметкой текста или форматированием текста. И для этого применяются теги форматирования.
В HTML, текст абзаца принято заключать в парные теги <p> </p>. Открываем Блокнот и каждый абзац всего текста заключаем в парные теги <p> </p> , т.е. каждый абзац должен выглядеть вот так:
Листинг 3.2
<p>Нынешний год - пора обновления модельного ряда. Оно продолжится по меньшей мере до осени, когда на рынок выйдет Mercedes-Benz GLK, новый компактный SUV. Первая жертва: из прайс-листов вычеркнута - модель Sportcoupe 2000 года рождения, с весны его заменит прямой наследник - CLC. </p>
Я не буду показывать здесь код всей web-страницы, это Вы уж сделайте сами. Сохраняем набранный код, обновляем нашу web-страницу в браузере и получаем вот такой вид:
Рисунок 3.2
Ну вот, уже лучше. Т.е. для создания каждого нового абзаца используется парные тэги <p> </p>.
Для перехода на новую строчку без создания нового абзаца в HTML используется тэг <br>. Тэги <br> закрывать не нужно, такие теги называются одиночными.
Кроме того, теги имеют атрибуты, которые могут иметь разное значение и придают определенный (разный) вид тексту отображаемому браузером. Вы наверное уже обратили внимание, что наш набранный текст выравнен по левому краю. Это значение (выравнивание по левому краю) принято по умолчанию, а полностью Выравнивание прописывается с помощью атрибута align вот так:
Листинг 3.3
<p align=left>Выравнивание текста по левому краю</p>
<p align=right>Выравнивание текста по правому краю</p>
<p align=center>Выравнивание текста по центру</p>
<p align=justify>Текст, находящийся между этими элементами выравнивается по ширине</p>
<p align=justify>Выравнивается по ширине</p>
Как Вы поняли атрибут align может принимать значения: left, right, center, justify. В коде web-страницы нужное выравнивание прописывается как указано в Листинге 3.3 (см.выше).
По эксперементируйте с разными вариантами выравнивания текста и остановитесь на том, который Вам больше нравится, я же выровняю весь тест по ширине используя последний элемент:
<p align=justify>Выравнивается по ширине </p>
На мой взгляд, когда тест выровнен и слева и справа он смотрится намного эстетичнее. Но имейте ввиду, что тогда между словами могут появиться большие пробелы. Ну а Вы уж решайте сами что Вам больше нравится. Бывают случаи когда необходимо применить определённый тип выравнивания. Например цитаты принято всегда выравнивать по правому краю.
В следующем уроке мы научимся вставлять Заголовоки web-страниц, нового текста или просто отдельных абзацев.
Замечательно, мне нравятся Ваши уроки. Просто и понятно!!! :)
Комментарии добавил(а): Виктор Дата: 2009-01-27
А как изменить цвет текста
Комментарии добавил(а): Pasik Дата: 2009-06-28
To Виктор <font color="КОД ЦВЕТА">
Комментарии добавил(а): georgiy Дата: 2010-03-10
дайте кто-нибудь коды цветов
Комментарии добавил(а): Андрей_К Дата: 2010-03-11
Коды цветов находятся здесь: http://www.luksweb.ru/view_post.php?id=15
Комментарии добавил(а): Дима Дата: 2010-12-15
Почему в ващих Листингах я не вижу ни одного тега только текст самого содержания ((((
Комментарии добавил(а): АндрейК Дата: 2010-12-16
Всё исправил, видимо был какой то глюк. Удачи.
Комментарии добавил(а): Лариса Дата: 2011-05-27
Спасибо. Замечательные уроки!!!!!!!!!!!! Как только записать условный оператор?
Заранее спасибо. Может быть, у Вас появится такой урок?
Комментарии добавил(а): Алла Дата: 2011-10-13
Как поступить, я в дримвивере сделала сайт установила его, а когда зашла на него, то текст написанный посередине оказался не видимым, причем когда открывается страница виден, буквально секунда и его нет, подскажите что не так?
Комментарии добавил(а): Анюта Дата: 2012-08-03
почему у меня не пишется в блокноте русский язык...вообще клавиши какой то непонятный язык выдают...а английский пишет..
Комментарии добавил(а): Макcим Дата: 2012-09-21
Cпаcибо за ypок
Комментарии добавил(а): Александр Дата: 2013-01-07