Создание собственного сайта
Каталог статей
| Главная » Статьи » Мои статьи |
Теги форматирования текста Давайте проанализируем, каким образом посетитель получает информацию со страницы. Вобщем-то, для это существует множество различных элементов, которые вы можете разместить на своем сайте. Это изображения, видео, флэш-анимация и.т.д. Но как бы бурно не развивался Интернет, текст до сих пор остается главным источником распространения и получения информации в сети. В этой статье вы познакомитесь с тегами форматирования текста – одними из важнейших в html, и в то же время – одними из самых простых тегов. Скопируйте любой кусок текста, состоящий из нескольких абзацев, и вставьте его в контейнер тега <body>. Получиться у вас должно примерно так:
<html>
Как вы сможете заметить, форматирование текста теряется — даже абзацы не разделяются, а идут подряд. В тех местах, где была нажата клавиша Enter и должен был произойти перенос строки, ничего подобного не случилось. Для того, чтобы восстановить форматирование или задать его с нуля, нужно применять теги форматирования текста. И первые два из них — это тег новой строки и тег абзаца, которые относятся к тегам так называемого структурного форматирования Теги структурного форматирования<BR> — одиночный тег структурного форматирования, осуществляющий перенос последующего текста на новую строку. Тег ставится в том месте, где требуется осуществить перенос. Это легко увидеть на следующем примере: Пример:
Буря мглою небо кроет,<br> <P> — контейнерный тег структурного форматирования, создающий новый абзац — </P> .При этом абзацем считается текст, ограниченный от последующего содержимого пустой строкой. Основное различие между тегами <br> и <p> как раз и заключается в наличии/отсутствии пустой строки снизу текста. Но есть и еще одно существенное отличие: у тега <br> не бывает никаких параметров, а тег <p>, обладает параметром, позволяющим выровнять текст в абзаце. align — параметр, позволяющий задавать выравнивание текста по ширине, по центру, по левому или правому краю. Возможные значения этого параметра:
Например, если записать: <p align="right">Размещаемый текст</p> то выравниваться текст будет по правому краю. Поэкспериментируйте с этими двумя тегами на своей страничке. Любой текст требует заголовка. Заголовок — это квинтэссенция текста, он объединяет все сказанное в нем воедино, выражая суть написанного. В html существуют теги не только для создания заголовка (заголовка первого уровня), но также и для подзаголовка (заголовка 2-го уровня), под-подзаголовка (заголовка 3-го уровня)...под-под-под-под-подзаголовка (заголовка 6-го уровня). Однако на практике для простых текстов применяются заголовки не выше третьего уровня. Тем не менее, вот все теги для создания заголовка и подзаголовков:
Название каждого из этих тегов состоит из двух частей: h — сокращения от английского слова header (заголовок); и номера уровня заголовка. Каждый последующий уровень имеет меньший размер шрифта по сравнению с предыдущим. Все шесть тегов являются контейнерными, а значит требуют закрытия. Сам текст заголовка (подзаголовка) помещается внутрь контейнера. Для горизонтального выравнивания заголовков на странице используется параметр align. В следующем примере объединено использование заголовков и абзацев Пример:<h1 align="center">Пишущая машинка</h1>
Создайте страничку с таким кодом и посмотрите, что у вас получилось. Результат должен быть абсолютно таким же как и в примере выше. Если у вас большое разрешение экрана, и каждый абзац примера помещается в одну строку, можете немного уменьшить размеры окна браузера для наглядности. Теги оформления текстаВообще, все теги форматирования текста, которых на самом деле не очень много, условно делятся на теги структурного форматирования и теги оформления текста. С первыми из означенных вы только что познакомились. Это теги, которые позволяют создать структуру текста – определить его заголовки, абзацы и.т.д. Теперь перейдем к тегам оформления. К ним относятся те, которые позволяют придать тексту жирность, курсивность, подчеркивание, поменять гарнитуру, цвет и размер шрифта. В любом серьезном текстовом редакторе текст можно сделать и жирным и курсивным и подчеркнутым; также можно комбинировать перечисленные свойства. Все это доступно и в HTML. Для этого в нем существуют следующие теги оформления текста: <B>—контейнерный тег, придающий жирность тексту, заключенному в контейнер — </B> <U> — контейнерный тег, позволяющий подчеркнуть текст, заключенный в контейнер — </U> <I> — контейнерный тег, превращающий в курсив текст, заключенный в контейнер — </I> Теги <b>, <i>, <u> применяются в HTML чаще всего. Чтобы их быстрее запомнить, предлагаю вам чаще писать на форумах...Взгляните на картинку ниже:  Кнопки B, I, U воздействуют на текст точно также, как и одноименные с ними теги... Для тегов <i> и <b>, которые относятся к группе так называемых тегов физического форматирования существуют соответствующие аналоги, относящиеся к тегам логического форматирования. Для тега <i> логическим аналогом является тег <em>. А для тега <b> подобным аналогом выступает тег <strong>. Визуально действие этих пар аналогичных тегов неотличимо. Но разница между логическими и физическими тегами все же есть. Физическими тегами текст обычно выделяют для посетителей. А вот логические теги применяются в тех случаях, когда нужно акцентировать внимание поисковика на том или ином слове (фразе). Такой прием очень сильно помогает при раскрутке. Выделяя тегами логического форматирования ключевые слова, вы даете понять поисковой машине, что перед ней именно "ключевики". И когда пользователь наберет в строке поиска фразу, близкую к вашим "ключам", поисковик предложит вашу страничку, как один из результатов поиска. Но вернемся к тегам физического оформления текста, и рассмотрим неcколько небольших примеров. Начнем с простого. Итак, чтобы создать жирный текст, нужен следующий фрагмент кода: <b>Жирный текст</b> Аналогично создается курсив и подчеркивание. А теперь допустим, вы хотите создать курсивный подчеркнутый текст. Для этого нужно записать такой фрагмент кода: <i><u>Курсивный подчеркнутый текст</u></i> Создавая такие матрешкоподобные конструкции, когда один контейнер вложен в другой, следите за целостностью контейнеров: тег, который был открыт первым, должен закрываться последним; тег, открытый вторым, закрывается предпоследним (вторым с конца) и.т.д. Теперь создадим жирный курсивный текст: <b><i>Жирный курсивный текст</i></b> И, напоследок, соорудим конструкцию из трех вложенных контейнеров — создадим жирный курсивный подчеркнутый текст: <b><i><u>Жирный курсивный подчеркнутый текст</u></i></b> Обязательно проверьте работоспособность всех этих примеров самостоятельно. А затем перейдем к главному из тегов оформления текста: Тег <font> и его параметры<FONT> — контейнерный тег оформления текста, предназначенный для изменения размера, цвета и гарнитуры текста, помещенного в контейнер — </FONT> Тег выполняет свои функции за счет параметров, каждый из которых отвечает за одно из вышеперечисленных свойств текста. При отсутствии параметров тег не производит никакого воздействия на текст. Итак, вот параметры, позволяющие манипулировать свойствами текста с помощью тега <font>: size — параметр, позволяющий поменять размер текста, заключенного в контейнер тега. Может принимать значения от 1 до 7 условных единиц. По умолчанию равен трем. Чем выше значение, тем, соответственно, больше размер шрифта. Это абсолютные значения. Есть еще относительные (от -6 до +6), позволяющие увеличить(+) или уменьшить(-) размер шрифта по сравнению с основным. Изменение размера в этом случае происходит на указанное количество единиц. color — параметр, позволяющий поменять цвет текста, заключенного в контейнер. face — параметр, позволяющий поменять гарнитуру текста, заключенного в контейнер. Например, можно задать гарнитуру Arial или Times New Roman, а также любые другие шрифты, установленные на компьютер пользователя. Именно здесь зарыта собака, не позволяющая выбирать вебмастеру любой шрифт, который взбредет ему в голову. Дело в том, что есть очень малораспространенные шрифты, которые могут отсутствовать на компьютере посетителя сайта. В этом случае заданный шрифт будет заменен на ближайший из списка имеющихся на компьютере шрифтов. Причем, во многих случаях это может привести к нарушению целостного, гармоничного облика страницы. Во избежание таких ситуаций, не выбирайте экзотических шрифтов, используя вместо этого только самые распространенные. Вот они:
Последнее в списке — даже не шрифт, а целое семейство шрифтов без засечек. Шрифтов наподобие Arial, Verdana и Helvetica. Если задать это семейство — браузер посетителя выберет с его компьютера первый попавшийся в списке шрифт без засечек. Т.е. сначала он попробует найти Arial, а если не получится, будет искать следующий шрифт без засечек. А теперь небольшой пример по тегу <font>: <font face="Arial" size="7" color="#ff0000">Самый большой шрифт</font> Загрузите этот код в браузер — в контейнер тега <body>, и посмотрите, что у вас получится. Это самый большой шрифт для html (size="7") типа "Arial" (face="Arial") красного цвета (color="#ff0000"). Еще один пример. Скажем, вам нужен курсивный текст размером в 4 условные единицы, c гарнитурой Times New Roman, зеленого цвета. Первым делом создадим такой шрифт без курсива: <font size="4" color="green" face="Times New Roman">Шрифт-четверка, зеленого цвета, Times New Roman</font> Теперь добавляем к шрифту курсивности, заключив полученный код в контейнер тега <i>: <i><font size="4" color="green" face="Times New Roman">Шрифт-четверка, зеленого цвета, Times New Roman</font></i> Можно было сделать и наоборот: сначала создать курсивность текста, а затем получившийся код заключить в контейнер тега <font> с нужными свойствами. В данном случае порядок, в котором контейнеры вкладываются друг в друга не играет никакой роли. P.S. Почему не стоит создавать заголовки тегами оформления?Вообще говоря, заголовок можно создать и выровнять без использования тегов <h1>...<h6>, применяя вместо этого теги оформления текста. Например, так: <p align="center"><b><font size="6" face="Times New Roman" color="black">Заголовок первого уровня</font></b></p> Сравните это с тем, что получается при использовании тега <h1>. Результат в обоих случаях одинаков. Закономерный вопрос: для чего нужны теги <h1>...<h6>, если заголовки можно создавать без их применения? Дело в том, что теги заголовков относятся к группе структурных. Они не только оформляют текст заголовка нужным образом, но и размечают структуру текста. Правильная структура нужна не только вам для облегчения чтения собственного кода, но и поисковым системам, которые всегда анализируют структуру текста и учитывают ее при построении поисковой выдачи. Текст, размеченный тегами <h1>...<h6> имеет больше шансов на попадание в первую десятку результатов поиска. Кроме того, поисковики придают большое значение ключевым словам, расположенным в этих тегах, и это тоже учитывается при составлении страницы поисковой выдачи. Поэтому, отказавшись от структурных тегов в пользу тегов оформления текста, вы значительно усложните раскрутку страницы. А это лишние проблемы, которые вам не нужны. Вот основная причина, по которой не стоит создавать заголовки так, как это показано в примере выше. | |
| Просмотров: 13066 | Комментарии: 49 | |
| Всего комментариев: 4 | |||||
| |||||
Приветствую Вас Гость
Категории раздела | |
|---|---|
|
Вход на сайт |
|---|
Поиск |
|---|
Наш опрос |
|---|
Мини-чат |
|---|
Статистика |
|---|
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |