Главная
Блог разработчиков 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
При перепечатке ссылка на источник обязательна
Оставить комментарий
БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB