Мы подберем для вас хостинг или разместим ваш сайт на одном из наших серверов, и будем следить за тем, чтобы он работал, общаться с техподдержкой и продлевать ваш домен.

Колдовство над текстом

22.02.2008 13:44:17
Автор: Катерина Баукина

И все-таки больше всего контент-менеджеру приходится заниматься форматированием текста. Возвращаясь к тому, с чего мы начали – чаще всего менеджер, который занимается наполнением сайта информацией, вообще не знает, что такое теги и что с ними делать. Но, бывают случаи, когда знания html очень и очень пригождаются.

Из практики: капризный рекламодатель заставил контент-менеджера раз 5 редактировать опубликованную статью – ему не нравились отступы между абзацами, положение картинок в тексте и отступы от картинок, а так же подзаголовки статьи и их выделение в тексте. По умолчанию, все заголовки и подзаголовки на сайте оформлялись в едином стиле и чтобы сделать подзаголовок таким, как хотел рекламодатель, контент-менеджеру пришлось применить все свои знания html, которые у него были.

Очень важно грамотное форматирование текста и веб-копирайтинге: нужное слово, выделенное жирным или курсивом – бросается в глаза, привлекает внимание, дает нужный акцент всему абзацу. В общем, важное это дело – умение форматировать текст.
Давайте рассмотрим основные теги, которые мы используем в работе с текстами.

<br> - это уже известный нам тег перехода на новую строку
<left></left> - форматирование текста по левому краю
<center></center> - центрирование текста
<p></p> - тег создания абзаца
<b></b> - выделение текста жирным
<i></i> - выделение текста курсивом
<u></u> - выделение текста подчеркиванием
<h1></h1> - главный заголовок
<h2></h2> - второстепенный заголовок
<h3></h3> - третье степенный заголовок

Если вы попробуете внести в наш пример до тега <table> следующий код <h1>Главный заголовок</h1> - то, скорее всего, вы увидите нечто ужасное. По умолчанию, теги создания заголовков откровенно страшненькие и с ними точно надо что-то делать.
Та же проблема возникает, если текст надо увеличить в размере или покрасить в какой-то цвет – тоже создание заголовка без использования тегов h1-h3.

Здесь есть два пути  - простой и сложный. Я сразу открою карты и объясню, почему желательно использовать «сложный» путь. Для наиболее корректного отображения документа необходимо, чтобы он был написан грамотным кодом. А грамотный код – код чистый. Первый путь для изменения текста и заголовка по умолчанию – прилично код замусоривает, это не критично – но это не эстетично. Об этом следует помнить.

Простой путь – использование тега <font></font> и его параметров:
face – название шрифта,
size – размер шрифта,
color – цвет шрифта.

Вставим перед таблицей код <font size="4" color="orange" face="Arial">Цветной заголовок</font> - полюбуемся на то, что у нас получилось. Советую, прежде чем идти дальше, поиграть со значением параметров – цвет, размер, шрифт.

Сложный путь – использование, так называемых стилей CSS.
Для каждого из  тегов можно задать параметры шрифта, которые используются внутри него. Задаются эти параметры внутри тега <style type="text/css"></style>, который помещается в head – сразу после title. Разберем на примере заголовка, чтобы было понятней. Заменим исходный код в теге head на следующий:

<head>
<title>Ваша первая страничка</title>
<style type="text/css">
H1 {
 font: 28px arial;
color: green;
}
</style>
</head>

Сохраняем, смотрим, пробуем варианты. В данном примере, мы применили стили к тегу заголовку – сделали его размером 28 пикселей и зеленого цвета.
Стилей есть великое множество и они позволяют творить с текстом, с изображениями, вообще с элементами страницы настоящие чудеса. Но, все-таки, css – отдельная тема разговора, поэтому мы подробно на этом останавливаться не будем. Если контент-менеджер заинтересуется основами верстки и css – в Интернете он найдет множество учебников - мануалов на эту тему. Мне же кажется, что вряд ли контент-менеджеру понадобится знание css при cms  с визуальным редактором.

Идем дальше? У нас осталось последнее и самое, на мой взгляд, важное – оформление ссылок. Ссылка в html задается тегом <a></a>. Очень важно, чтобы ссылка, как и заголовок, была информативна. Нельзя, чтобы заголовок был зазывным, но не в тему самого материала. По-крайней мере, мы от своих контент-менеджеров требуем именно оформления заголовков грамотно. «Долой рабство!»  - не пойдет. «Качественную бытовую технику – на каждую кухню» - вполне допустимо. Что же до ссылок, то не рекомендуется ставить ссылку с текстом «здесь», «ссылка» и прочее. Если вы ссылаетесь на учебник по html (смотри пример), то в качестве ссылки должно быть слово «html» или «учебник по html», «статьи по html» -ссылка должна быть информативна!

У тега <a></a>, конечно, есть параметры. И в первую очередь это параметр href -  в котором задается адрес (урл), на который мы ссылаемся.
Второй важный параметр – target, который говорит браузеру в каком окне следует открыть ссылку – в том же или в новом. Третий – title – добавляет всплывающую подсказку к ссылке.
В нашем примере вы видите ссылку безо всяких параметров, кроме href. Теперь посмотрим, как бы выглядела грамотная ссылка.
<a href="http://htmlbook.ru/" target="_blank" title="учебник по html">html</a>

Если вы замените этим кодом исходный в нашем примере – то при наведении на ссылку вы увидите надпись – всплывающую подсказку, а при клике на ссылку – она откроется в новом окне.

Последнее, о чем мне бы хотелось рассказать в этом цикле статей – это о списках. Списки делать приходится контент-менеджеру часто и это чуть ли не единственное, что действительно удобнее делать вне визуального редактора. Допустим, если список имеет пункты и подпункты – визуальный редактор чаще всего запутывается и результат не очень похож на то, что надо.

Списки бывают нумерованные и ненумерованные. Ненумерованные – это списки с точечками или любыми другими маркерами. Нумерованные – списки с цифрами или буквами.

Ненумерованный список создается тегом <ul></ul> - соответственно, это начало и конец списка. Как только появляется еще один <ul> - браузер понимает, что следует начать НОВЫЙ список внутри старого – это именно то, что нам нужно, когда список мы делаем с подпунктами. Пункты списка выделяются тегами <li></li>
Итак, примерный вид списка вот такой:

<ul>
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
</ul>
А если список многоуровневый, то это лучше будет посмотреть в нашем тестовом файле.

<html>

<head>
<title>Ваша первая страничка</title>
</head>

<body>
<table border="1" cellspacing="10" cellpadding="10">

<tr>
<td>На своей странице вы можете размещать рисунки и фотографии, любые иллюстрации, причем совершенно в разных местах текста. Сейчас мы изучаем, как может располагаться рисунок относительно текста. <br><img src="http://webadvance.ru/img/logo.gif" border="1" hspace="10"  alt="ваш рисунок" align="left">Первый рисунок располагается слева от текста и расстояние по горизонтали от него до текста - 10 пикселей. Параметр, говорящий браузеру, что рисунок надо расположить слева - задан в align как "left", а параметр hspace равен 10, соответственно.
<br><br><br><br>Второй рисунок располагается справа от текста
<img src="http://webadvance.ru/img/logo.gif" border="1" vspace="10" alt="ваш рисунок" align="right"> и теперь задан параметр, указывающий браузеру, что изображение надо расположить справа на расстоянии 10 пикселей от текста по вертикали. Соответственно, это сделано в параметре align как "right" и vspace как 10. Параметры vspace и hspace, как правило, используются одновременно. Также можно по-разному размещать текст на странице используя теги left или center.
<br><br><br><br>
<left>Текст слева<left><br><br>
<center>Центрированный текст</center>

</td><td>Так же вы можете совершенно по-разному выделать текст на страничке. <b>Так</b>, <i>Так</i> и даже <b><i><u>вот так</u></i></b>
</td>
</tr>

<tr>
<td> У ненумерованного и нумерованного списка могут быть совершенно различные маркеры – кружочки, квадратики, овалы, буквы, цифры. Задаются они в параметрах тега ul или ol, в случае нумерованного списка. Параметр называется type, а значения для разных списков смотрим ниже:
<ul>
<li>Ненумерованный список, заданный тегом ul</li>
<ul type="circle">
<li>disc - круг</li>
<li>circle - окружность</li>
<li>square - квадрат</li>
</ul>
<li>Нумерованный список, заданный тегом ol</li>
<ul type="square">
<li>A - заглавные латинские буквы; </li>
<li>a - строчные латинские буквы; </li>
<li>I - заглавные римские цифры; </li>
<li>i - строчные римские цифры; </li>
<li>1 - арабские цифры.</li>
</ul>
</ul>

</td><td>Если же что-то будет не получаться - не переживайте, не все получается с первого раза.
</td>
</tr>

</table>
</body>

</html>

Традиционно дублирую то, что вы уже прочитали на экране.

У ненумерованного и нумерованного списка могут быть совершенно различные маркеры – кружочки, квадратики, овалы, буквы, цифры. Задаются они в параметрах тега ul или ol, в случае нумерованного списка. Параметр называется type, а значения для разных списков смотрим ниже:

  • Ненумерованный список, заданный тегом ul
    • disc - круг
    • circle - окружность
    • square - квадрат
  • Нумерованный список, заданный тегом ol
    • A - заглавные латинские буквы;
    • a - строчные латинские буквы;
    • I - заглавные римские цифры;
    • i - строчные римские цифры;
    • 1 - арабские цифры.

Например, в нашем примере был задан маркер квадрат для последнего списка таким образом: <ul type="square"> Попробуйте самостоятельно модифицировать двухуровневый список в нашем примере в список нумерованный, с разными маркерами. По умолчанию, если параметры тега ul не задается – маркером будет круг, а для тега ol – арабские цифры.

Ура! Теперь можно сказать, что вы изучили язык разметки html в достаточном объеме для того, что бы никакой визуальный редактор не мог заменить вас – грамотного и образованного контент-менеджера. Конечно, визуальный редактор - это подспорье хорошее, но я уверена, что вы чувствовать себя будете гораздо уверенней, обладая всеми этими знаниями. Предлагаю вам не останавливаться на достигнутом и продолжить изучение html и css и применять знания на практике – сделать страничку о себе, своей семье, своем увлечении – немного для того, чтобы вызвать восхищение в глазах любимой половины, но самое главное - просто для собственного удовольствия. 



Назад в раздел

sales@webadvance.ru
(495)784-21-06