|
|
|
|
Урок 3. Форматируем текст html-страницы. Автор: Андрей Краснокутский Дата: 2008-11-27 Как отформатировать текст web-страницы?Что значит отформатировать текст на web-странице? Под форматированием текста в HTML понимается придание текстовому содержимому web-страницы красивого и опрятного вида. Это может быть:
Итак, приступаем к форматированию текста. А для этого нам естественно необходимо добавить на web-страницу сам текст. Как мы с Вами уже определились ранее – наш сайт будет на автомобильную тематику (а Вы можете выбрать другую тему, которая интереснее лично Вам). Хочу заметить - это не реклама какой-то марки автомобилей, просто в данный момент мне попался в руки неплохой журнальчик. Открываем web-страницу в программе Блокнот (а лучше в Notepad++) и между тегами <body> </body> (после первой ранее добавленной строчки) добавляем текст (можно добавить просто отвлеченный текст) как в Листинге 3.1: Листинг 3.1
Обязательно сохраняем (Ctrl+S) то что добавили, обновляем (F5) web-страничку в браузер и видим вот что...
Рисунок 3.1 видим полную ерунду... Что это? - спросите Вы. Не пугаетесь, ничего страшного не случилось, просто мы добавили голый текст без тегов форматирования. А теперь необходимо "рассказать" браузеру, что и как нужно отображать на экране монитора. Ведь компьютер - это просто машина. Этот процесс и называется гипертекстовой разметкой текста или форматированием текста. И для этого применяются теги форматирования. В HTML, текст абзаца принято заключать в парные теги <p> </p>. Открываем Блокнот и каждый абзац всего текста заключаем в парные теги <p> </p> , т.е. каждый абзац должен выглядеть вот так: Листинг 3.2
Я не буду показывать здесь код всей web-страницы, это Вы уж сделайте сами. Сохраняем набранный код, обновляем нашу web-страницу в браузере и получаем вот такой вид:
Рисунок 3.2 Ну вот, уже лучше. Т.е. для создания каждого нового абзаца используется парные тэги <p> </p>. Для перехода на новую строчку без создания нового абзаца в HTML используется тэг <br>. Тэги <br> закрывать не нужно, такие теги называются одиночными. Кроме того, теги имеют атрибуты, которые могут иметь разное значение и придают определенный (разный) вид тексту отображаемому браузером. Вы наверное уже обратили внимание, что наш набранный текст выравнен по левому краю. Это значение (выравнивание по левому краю) принято по умолчанию, а полностью Выравнивание прописывается с помощью атрибута align вот так: Листинг 3.3
Как Вы поняли атрибут align может принимать значения: left, right, center, justify. В коде web-страницы нужное выравнивание прописывается как указано в Листинге 3.3 (см.выше). По эксперементируйте с разными вариантами выравнивания текста и остановитесь на том, который Вам больше нравится, я же выровняю весь тест по ширине используя последний элемент:
На мой взгляд, когда тест выровнен и слева и справа он смотрится намного эстетичнее. Но имейте ввиду, что тогда между словами могут появиться большие пробелы. Ну а Вы уж решайте сами что Вам больше нравится. Бывают случаи когда необходимо применить определённый тип выравнивания. Например цитаты принято всегда выравнивать по правому краю. В следующем уроке мы научимся вставлять Заголовоки web-страниц, нового текста или просто отдельных абзацев. Обновлено: 05.10.2014 г.
Читайте также: Смотрите поясняющие Видео Уроки. Приступаем к форматированию текста. Вставляем заголовки на web-страницу. Форматируем текст web-страницу. Правила написания коррекного кода web-страницы.
Просмотров: 25625 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Николай Замечательно, мне нравятся Ваши уроки. Просто и понятно!!! :) Комментарии добавил(а): Виктор А как изменить цвет текста Комментарии добавил(а): Pasik To Виктор <font color="КОД ЦВЕТА"> Комментарии добавил(а): georgiy дайте кто-нибудь коды цветов Комментарии добавил(а): Андрей_К Коды цветов находятся здесь: http://www.luksweb.ru/view_post.php?id=15 Комментарии добавил(а): Дима Почему в ващих Листингах я не вижу ни одного тега только текст самого содержания (((( Комментарии добавил(а): АндрейК Всё исправил, видимо был какой то глюк. Удачи. Комментарии добавил(а): Лариса Спасибо. Замечательные уроки!!!!!!!!!!!! Как только записать условный оператор? Заранее спасибо. Может быть, у Вас появится такой урок? Комментарии добавил(а): Алла Как поступить, я в дримвивере сделала сайт установила его, а когда зашла на него, то текст написанный посередине оказался не видимым, причем когда открывается страница виден, буквально секунда и его нет, подскажите что не так? Комментарии добавил(а): Анюта почему у меня не пишется в блокноте русский язык...вообще клавиши какой то непонятный язык выдают...а английский пишет.. Комментарии добавил(а): Макcим Cпаcибо за ypок Комментарии добавил(а): Александр ..то Анюта.windows-1251 :) Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |