Сайт, форум, блог
Создание, поддержка, продвижение
Колдовство над текстом
И все-таки больше всего контент-менеджеру приходится заниматься форматированием текста. Возвращаясь к тому, с чего мы начали – чаще всего менеджер, который занимается наполнением сайта информацией, вообще не знает, что такое теги и что с ними делать. Но, бывают случаи, когда знания 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 и применять знания на практике – сделать страничку о себе, своей семье, своем увлечении – немного для того, чтобы вызвать восхищение в глазах любимой половины, но самое главное – просто для собственного удовольствия.
Автор: Катерина Баукина
Отзывов нет на «Колдовство над текстом»
Оставить отзыв
18.09.2010 в 1:22 дп
вполне неплохо, хотя можно было сократить, обычные копирайтеры не хотят вообще заморачиваться с тэгами