Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Форматируем текст html-страницы.

Viktor | 24.02.2014 | нет комментариев

Как отформатировать текст web-страницы.

Что значит отформатировать текст на web-странице? Под форматированием текста в HTML понимается придание текстовому содержимому web-страницы красивого и опрятного вида. Это может быть:

  • быть выравнивание элементов (по левому, правому краю, середине или центру).
  • придание тексту определённого цвета, размера шрифта, “жирности”, наклона.

Итак, приступаем к форматированию текста. А для этого нам естественно необходимо добавить сам текст.

Как мы с Вами уже определились ранее – наш сайт будет на автомобильную тематику (естественно Вы выбирайте то, что Вам интереснее). Это не реклама какой-то марки автомобилей, просто в данный момент мне попался в руки неплохой журнальчик.

Открываем наш код в программе Блокнот и между тегами <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>

Обязательно сохраняем то что добавили, обновляем страничку в браузер и …

Рисунок 3.1

видим полную ерунду??? Что это спросите Вы. Не пугаетесь, ничего страшного не случилось, просто мы добавили голый текст. А теперь необходимо “рассказать” браузеру, что и как отображать на экране. Ведь компьютер – это просто машина. Это и называется гипертекстовой разметкой текста или форматированием текста. И для этого применяются теги форматирования.

В HTML, текст принято заключать в парные теги <p> </p>. Открываем Блокнот и каждый абзац, всего текста заключаем в парные теги <p> </p> , т.е. каждый абзац должен выглядеть вот так:

Листинг 3. 2

<p>НЫнешний год – пора обновления модельного ряда. Оно продолжится по меньшей мере до осени, когда на рынок выйдет Mercedes-Benz GLK, новый компактный SUV. Первая жертва: из прайс-листов вычеркнута – модель Sportcoupe 2000 года рождения, с весны его заменит прямой наследник – CLC. </p>

Я не буду показывать здесь код всей страницы, это Вы уж сделайте сами. Сохраняем набранный код, обновляем нашу страницу в браузере и получаем вот такой вид:

Рисунок 3.2.

Ну вот, уже лучше. Т.е. для создания каждого нового абзаца используется парные тэги <p> </p>.

А для перехода на новую строчку без создания абзаца используется тэг <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 . В коде прописывается как указано в Листинге 3.3 выше.

По эксперементируйте с разными вариантами выравнивания текста и остановитесь на том, который Вам больше нравится, я же выровняю весь тест по ширине используя последний элемент:

<p align=justify>Выравнивается по ширине </p>

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

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

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB