Теги оформления текста

На этой странице мы попытаемся ответить на наиболее часто встречающиеся вопросы у начинающих авторов собственных сайтов. Это типа информационной поддержки по сайтостроению. Здесь надо понимать: красивое и одновременно оригинальное оформление ваших страниц возможно только вручную. Нет в природе таких алгоритмов для оформления гармоничной визуализации как бы хотелось именно вам. Автоматическое оформление можно сделать только стандартно и шаблонно. В ряде вариантов это вполне хорошее решение, но вы ведь хотите быть оригинальны среди сотен тысяч не запоминающихся сайтов.

Вообще самое разумное, если что-то не понятно — почитать техническую литературу (она точно есть бесплатная и в интернете). Обращаться к разработчикам и администраторам сайта по таким элементарным вопросам желательно только в крайних случаях. С большей долей вероятности вам уже показывали примеры как это реализуется. Тренируйтесь, что-то там шибко накосячить, если ваш сайт находится под нашим присмотром, у вас вряд ли получится. Так что экспериментируйте без проблем.

Так вставляем картинки

<img class="right" src="/путь_вашей_картинки" alt="Справа">
<img class="left" src="/путь_вашей_картинки" alt="Итоги">
<img class="top" src="/путь_вашей_картинки" alt="Пример">

Тег "right" — картинка справа, "left" — слева от текста, "top" — сверху

Чтобы вставить такой смайлик Улыбка в режиме "без редактора" пишем
<img class="smile" src="/styles/smile.gif" alt="Улыбка">
Любые другие подобные картинки пристраиваются аналогично. Рисуете их или ищете их в интернете уже самостоятельно — их миллионы в сети и большинство бесплатных.

Так выделяем текст

<strong>Ключевые слова</strong>
<b>выделяем текст</b> Вот что получилось
<i>наклонный текст</i> Вот что получилось
<em>выделяем текст</em> Вот что получилось
<span class="red">выделяем красным цветом</span> Вот что получилось

Цвет текста

<a href="/путь_вашей_страницы">Активная ссылка</a> Вот что получилось
<a class="green" href="/путь_вашей_страницы">Активная ссылка</a> Вот что получилось
Можно реализовать и более сложные и изощеренные конструкции…
комбинируя цветом, типом и размером шрифтов.

Но чаще всего такие варианты только раздражают посетителей ваших сайтов. Улыбка

<hr> — линия. Полезна для переноса и выравнивания следующих элементов.

Кнопки ПОДРОБНЕЕ

<hr id="system-readmore"> эмулятор кнопки ПОДРОБНЕЕ — иногда нужен только для избранных материалов на первой странице когда много текста. Создавать кнопку ПОДРОБНЕЕ именно здесь не имеет смысла. В большинстве наших разработок данная функция генерируется автоматически, а размер предшествующего текста редактируется в окне АНОНС.

Однако, имеет смысл подумать десять раз о уместности подобного оформления

 

 

Если уж очень хочется вставить куда-нибудь:
<p class="readmore"><a href="/путь_вашей_страницы">Подробнее</a></p>

"/путь_вашей_страницы" или картинки можно указывать как абсолютным, так и относительным. Абсолютный путь этого краткого информационного ликбеза "http://website.fbbp.ru/html/tegi-oformleniya.html" Это то, что видно в верхней строке большинства браузеров. Копи-Паст короче.

Тегов, применяемых для оформления обычными пользователями реально мало. Понять принципы их работы и научиться ими манипулировать для визуального оформления — совсем не сложно.