Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

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

Автор: Андрей Краснокутский

Дата: 2008-11-27

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

Что значит отформатировать текст на 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-страничку в браузер и видим вот что...

Добавляем текст на 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-страниц, нового текста или просто отдельных абзацев.

Обновлено: 05.10.2014 г.

 

Читайте также:

Смотрите поясняющие Видео Уроки.

Приступаем к форматированию текста.

Вставляем заголовки на web-страницу.

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

Правила написания коррекного кода web-страницы.

 

Просмотров: 19761


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Николай
Дата: 2007-09-02

Замечательно, мне нравятся Ваши уроки. Просто и понятно!!! :)

Комментарии добавил(а): Виктор
Дата: 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

..то Анюта.windows-1251 :)

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Заработает каждый
от Школьника до Пенсионера!
"Как?"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT