Урок 3. Форматирование текста
Понедельник, 8 августа 2011 г.Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Метки: html
Просмотров: 492
Подписаться на комментарии по RSS
На этом уроке мы будем рассматривать различные варианты изменения текста для веб-страницы. Попрактикуемся в выравнивании, задании различных свойств и способах отображения текста. Надеемся, Вы усвоили предыдущий, урок и уделили достаточно внимания цвету и размеру текста, потому, что в этом уроке мы будем так же их использовать. Для примера мы возьмём код прошлого урока, но внесём в него некоторые изменения. Просмотрите внимательно код, найдите что в нём изменилось и сделайте эти изменения в своём файле test1.html в блокноте. Приступим.
<html> <head> <meta http-eguiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="keywords" content="Ключевые слова"> <title>Заголовок документа</title> </head> <body> <font fece="Verdana,Sans-serif" color="#FF0000"> <br><center><b><h1>Название раздела</H1></b></center></br> </font> <p>Ваш текст</p> </body> </html>
Как видите, код немного изменился. Добавился новый мета тэг и несколько новых тэгов. Так для чего они нужны? Рассмотрим подробнее:
1, 2, и 3 строки остались неизменны, а вот 4 строка Вам не знакома, не так ли? В эту строку мы добавили новый мета тэг, который определяет список терминов и ключевых слов. Этот мета тэг является самым главным при индексировании Вашего сайта поисковыми машинами!!! Хорошо продумайте слова, которые пользователь может ввести в поисковике для того, чтобы найти ваш сайт! Длинна содержимого “keywords” не должна превышать 1000 символов!
Далее 5, 6 и 7 строки так же остались нетронутыми, но обратите Ваше внимание на эти строки:
<font fece="Verdana,Sans-serif" color="#FF0000"> <br><center><b><h1>Название раздела</h1></b></center></br> </font> <p>Ваш текст</p>
Здесь произошли значительные перемены, так что давайте рассмотрим каждую строку подробней.
В 8 строке можно заметить, что мы убрали параметр size=”2” (дальше Вы поймёте почему) и изменили код цвета.
А вот в строке 9 произошли большие перемены. Здесь появились новые тэги <center></center>, <b></b> и <h1></h1>. Причем, заметьте, что текст не обязательно обрамлять лишь одним тэгом, можно создавать целые группы обрамляющих тэгов, главное, соблюдать порядок их написания т.е. закрывать необходимо сначала тот тэг, который находится ближе всего к тексту, и дальше по порядку и, ни в коем случае, по-другому!
Что же это за теги и как они повлияют на заключенный в них текст?
<br><center><b><h1>Название раздела</h1></b></center></br>
Как Вы уже помните, тэг <br> </br> добавляет пустые строки перед и после текста. Далее мы видим тег <center></center>. Этим тэгом мы говорим браузеру, что хотим видеть наш текст по центру страницы. Этот параметр так же можно заменить выравниванием по левому краю <left></left>, и по правому краю <right></right> в зависимости от ситуации. Следующий тэг <b></b>. Этот тэг использую для задания полужирного шрифта, т.е. мы говорим, что «Название раздела» должно быть выведено полужирным шрифтом. Ну а тэг <h1></h1> - это тэг задания заголовка. Не заголовка всей страницы, как <title></title>, а заголовка текста. Всего существует 6 видов заголовков – от h1, до h6, причем тэгу h1 соответствует самый большой заголовок, а тэгу h6 – самый маленький.
Далее просим Вас обратить внимание на 10 и 11 строку нашего кода:
<font fece="Verdana,Sans-serif" color="#FF0000"> <br><center><b><h1>Название раздела</H1></b></center></br>
Как Вы можете видеть, мы вынесли тэг <p></p> вместе с его содержимым за пределы тэга <font></font>. Зачем мы это сделали? Для того, чтобы заданные нами свойства текста в 8 строке не распространялись на «Ваш текст». Что бы Вам стало понятнее, давайте сохраним наши изменения в документе (Меню -> Сохранить) и откроем документ в браузере.
Как Вы видите, форматирование нашего текста не прошло даром! «Название раздела» Стало значительно выделяться, изменило расположение, размер и цвет, чем уже привлекает к себе внимание, а «Ваш текст» не изменился.
Давайте теперь займемся ним.
<html> <head> <meta http-eguiv="Content-Type" content="text/html; charset=windows-1251"> <meta name="keywords" content="Ключевые слова"> <title>Заголовок документа</title> </head> <body> <font fece="Verdana,Sans-serif" color="#FF0000"> <br><center><b><h1>Название раздела</H1></b></center></br> </font> <left><i><p>Здравствуйте!</p><p>Это мой первый сайт! </p> Я начал изучать HTML совсем недавно, но уже делаю успехи!</p><p>Здравствуйте! Это мой первый сайт! Я начал изучать HTML совсем недавно, но уже делаю успехи!</p></i></left> </body> </html>
Такой код является очень хорошим примером применения тэга абзаца <p></p>. Если весь текст поместить в один тэг, а не разбить на несколько частей то, при большом объёме, Ваш текст будет плохо читаемым и будет выглядеть не очень красиво. Откройте файл в браузере и увидите разницу! Так же Вы заметили, что шрифт стал курсивным – в этом нам помог тэг <i></i> и, с помощью тэга выравнивания по левому краю <left></left>, мы придали тексту красивое расположение на странице. В прочем, Вы можете расположить свой текст так, как Вам больше нравится!
В качестве домашнего задания экспериментируйте с кодом, применяя различные тэги форматирования. Это поможет Вам быстрее запомнить их назначение.
Вот несколько примеров:
<u></u> - выделение подчеркиванием слова или текста.
Ещё тэги, выделяющие текст курсивом:
<cite></cite>
<dfn></dfn>
<em></em>
Моноширинный шрифт:
<kbd></kbd>
<samp></samp>
<tt></tt>
Желаем удачи! До встречи на следующем уроке!
- Урок 1. Знакомство с HTML. Теория.
- Урок 9. Дизайн сайта с использованием CSS стилей. Теория.
- Урок 10. Дизайн сайта с использованием CSS стилей. Теория. Часть 2.
- Урок 11. Дизайн сайта с использованием CSS стилей. Теория. Часть 3.
- Урок 12. Дизайн сайта с использованием CSS стилей. Работа с текстом.
- Урок 13. Дизайн сайта с использованием блочной модели CSS таблиц стилей.
- Урок 14. Создаём кнопку в CSS.
- Урок 3. Форматирование текста
- Урок 2. Создание первой HTML страницы.
- Урок 4. Добавление изображения.
- Урок 5. Работа с таблицами.
- Урок 8. Табличный дизайн сайта.
- Урок 9. Дизайн сайта с использованием CSS стилей. Теория.
У меня два вопросика ,требуется ли разделять пробелами окончание тега и начало следующего?
И еще вопрос каким знаком препинания следует разделять ключевые слова, обычная запятая или точка с запятой?
Ключевые слова разделяются обычной запятой. Совет - после запятой в ключевых словах ставить пробел не обязательно. Так же и в тэгах - окончание одного и начало следующего, скобки тэга и их содержимое, текст между двумя тэгами - всё это не обязательно выделять пробелами!
Отличная статейка, здорово вы буквально на пальцах объяснили с одной стороны простые, а с другой - очень важные моменты, которые будущему вебмастеру пригодятся не только для красивого оформления своего творения, но и для его оптимизации под поисковые машины и успешного продвижения в интернете.
Хороший урок, но еще было бы неплохо составить таблицу или список с назначением различных тегов, а то для человека, который не помнит их наизусть, придется либо каждый раз искать их по тексту либо найти такую табличку на другом сайте
В ближайшее время такой урок будет создан!