Теги <OL>,<UL>,<DL> - Как вставлять СПИСКИ в свой блог с помощью HTML тэгов


Как работать со списками в своем блоге


Тег <IMG>       Тег <A>       Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD>       Прочие HTML-теги
 
На афонской тропе (рука дрогнула)
 

Чтобы ваши тексты выглядели структурно, прозрачно и понятно следует знать и применять специальные средства HTML для представления списков. Всего в HTML предусмотрено три вида списков:
  • нумерованный (включая и буквенную нумерацию, и также римскими цифрами);
  • ненумерованный, но с маркерами (обычно кружочками);
  • и двухуровневый список, названный "списком определений".

Их можно вкладывать друг в друга и даже независимо использовать отдельные их части. Это мощные средства HTML-разметки, существенно улучшающие внешний вид страниц.

 


 

Нумерованный список (Ordered List), тег <ol> с тэгами <li> для элементов

 

Нумерованный список начинается HTML-тэгом <ol> (Ordered List) и завершается тэгом </ol>. Список автоматически отделяется от окружаещего контента отступами сверху и снизу. Допускается вложенность нумерованного (или иного) списка в другой список (любого вида). При этом появляются дополнительные отступы слева.
Каждый пункт нумерованного списка может занимать несколько строчек (просто переноситься без Enter-а). Начинается он тэгом <li> и завершается тэгом </li>. Все пункты автоматически сдвигаются вправо (появляются отступы слева).

<ol type="i" title="Всплывающая подсказка"> Заголовок списка
    <li> Первый пункт списка </li>
    ...
    <li> Последний пункт списка </li>
    </ol>

    Атрибуты (параметры) тега <ol>:
  1. type="A" - Заменяет числовую нумерацию на Заглавные латинские буквы
  2. type="a" - Заменяет числовую нумерацию на Строчные латинские буквы
  3. type="I" - Заменяет арабскую числовую нумерацию на Римскую (в верхнем регистре)
  4. type="i" - Заменяет арабскую числовую нумерацию на Римскую (в нижнем регистре)
  5. type="1" - Числовая нумерация арабскими цифрами (По умолчанию)
  6. start="21" - Начальное значение для любой числовой нумерации
  7. title="Всплывающий текст (подсказка)" - Появляется при наведении курсора мыши на любую часть списка. Используют редко.

 


 

Ненумерованный (но маркированный) список (Unordered List), тег <ul> с тэгами <li> для элементов

 

Ненумерованный список начинается HTML-тэгом <ul> (Unordered List) и завершается тэгом </ul>. Список автоматически отделяется от окружаещего контента отступами сверху и снизу. Допускается вложенность ненумерованного (или иного) списка в другой список (любого вида). При этом появляются дополнительные отступы слева.
Каждый пункт ненумерованного списка может занимать несколько строчек (просто переноситься без Enter-а). Начинается он тэгом <li> и завершается тэгом </li>. Все пункты автоматически сдвигаются вправо (появляются отступы слева).

<ul title="Всплывающая подсказка"> Заголовок списка
    <li> Первый пункт списка </li>
    ...
    <li> Последний пункт списка </li>
    </ul>

    Атрибуты (параметры) тега <ul>:
  • type="disc" - Список маркируется черными кружочками
  • type="circle" - Список маркируется малозаметными окружностями
  • type="square" - Список маркируется черными квадратиками
  • title="Всплывающий текст (подсказка)" - Появляется при наведении курсора мыши на любую часть списка. Используют редко.

Примечание: У меня в Опере (на Linux), какой тип не ставь, показываются только окружности! А вот если не использовать тэги <ul> и </ul> (убрать их совсем, а теги <li> и </li> оставить), то список успешно выдается - маркированным черными кружочками (как и должен бы по умолчанию), но без отступа слева...

 


 

Список определений (Definition List), тег <dl> с тэгами <dt>(Definition Term) для терминов и с тэгами <dd> (Definition Description) для описаний

 

Начинается HTML-тэгом <dl> (Definition List) и завершается тэгом </dl>. Внутри следуют такие пары пар: название термина (Definition Term) между тэгами <dt> и </dt> и описание термина (Definition Description) между тэгами <dd> и </dd>. Каждое определение-блок может занимать несколько строчек (причем могут вставляться теги переноса строки <br /> (а для CMS Drupal - просто одиночный Enter)).

Единственный атрибут (параметр) тега <dl>:
title="Всплывающий текст (подсказка)" - Появляется при наведении курсора мыши на любую часть списка. Используют редко.

 
<dl title="Всплывающая подсказка"> Заголовок списка
  <dt> Первый ТЕРМИН </dt>
    <dd> Определение первого термина </dd>
  ...
  <dt> Последний ТЕРМИН </dt>
    <dd> Определение последнего термина </dd>
</dl>

Это уровень DL - общее обрамление списка определений
ТЕРМИН-1 - Это уровень DT - наименование термина
Определение термина-1" - Это уровень DD - развернутое описание термина.
ТЕРМИН-2 - Это уровень DT - наименование термина
Определение термина-2" - Это уровень DD - развернутое описание термина.
ТЕРМИН-3 - Это уровень DT - наименование термина
Определение термина-3" - Это уровень DD - развернутое описание термина.

 

Не читайте про это: Эксперементируя (у меня Опера под Linux, но вроде это везде так), выяснил следующее:
  • тег <dd> не зависит от наличия своей вложенности в теги <dl> и <dt> и проявляется в большом отступе слева для всего заключенного в пару <dd> и </dd> текста. Причем можно прерывать текст (Enter-ом в Друпале или тегом переноса строки <br />), а чтобы сделать, не теряя отступа, новый абзац (параграф <p> - </p>), то жму два Enter-а и вставляю в пустую строку &nbsp; (так в Друпале) - и все путем;
  • тег <dl> сдвигает вправо все, что в него вложено, - на половинный отступ. А т.к. все, что заключено в пару <dd> и </dd> уже имеет большой отступ, независящий от тега <dl>, то получается "лесенка": сначала <dl> делает шажок, потом <dd> как-бы добавляет еще столько-же - и все путем;
  • тег <dt> ничего не сдвигает, но равняется на сдвиг <dl> (если он есть), или на начало строки, если мы намеренно не используем <dl>. И еще назначение тега <dt> - держаться на оптимальном расстоянии от последующего списка, так что лучше выглядит OL-список или UL-список с заголовком в <dt> (вот такой гибрид), нежели в "родной" нотации, где заголовок следует за тегами <ol> или <ul> !

 


 

Используем специальные кнопки BUEditor для облегчение ввода тегов

Если на сайте используется Drupal-модуль "редактор BUEditor":

 

Для преобразований выбранных строчек текста в списке в редакторе BUEditor предусмотрены соответствующие кнопки "Ordered list. Converts selected lines to a numbered list.", "Unordered list. Converts selected lines to a bulleted list." (с изображениями списков на значках), облегчающие первичное наложение структуры списков на набор линий текста. Если вы разобрались с применяемыми в списках тегами, то вам не составит труда подправить заготовку, дополнить новыми пунктами и т.д. Дерзайте!

 


Тег <IMG>       Тег <A>       Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD>       Прочие HTML-теги
 

Комментарии


Задайте ВОПРОС или выскажите своё скромное мнение:


Имя или заголовок:
Можете оставить здесь свои координаты, чтобы при необходимости мы могли бы с Вами связаться (они НЕ ПУБЛИКУЮТСЯ и это НЕ ОБЯЗАТЕЛЬНО):

E-mail:
  Ваш адрес в соцсети или сайт:
Прошу при появлении ответов ОПОВЕЩАТЬ меня на указанный выше e-mail

Тег <IMG> - Как вставлять картинки в свой блог с помощью HTML-тэга <img>


Как вставлять картинки в свой блог


Тег <IMG>       Тег <A>       Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD>       Прочие HTML-теги
 

Афонское деревоЧтобы размещать рисунки в ваших постах, можно обходиться по-простому - "ручной" вставкой тега <img>, без накрученных функций специальных модулей, - так вы всегда "будете при оружии", ведь HTML-тэги - это внутренний "язык" страниц любого сайта, и если вы будете понимать тег <img>, то всегда сможете увидеть и проконтролировать, как вставляются картинки в тело вашей страницы, и с какими атрибутами. Всего-то нужно чуть-чуть освоить азы внутренней кухни HTML-разметки. Это легко. Понадобится минимум времени.

 

[A] Подготавливаем СВОИ картинки для использования в интернете

 

HTML тег <IMG> служит для внедрения рисунков в посты вашего блога (или на web-страницы сайта, что примерно тоже самое, - разная терминология).

Предварительно надо подготовить вставляемые картинки в любой из программ просмотра/редактирования рисунков или фотографий. Дело в том, что цифровые фотоаппараты обычно выдают снимки в виде JPG-файлов размером 1-2 Мегабайт или более.

    Такие картинки, как правило, не годятся для публикации в интернете по 3 причинам:
  1. не принято в web-е и не удобно смотреть рисунок, не влезающий на компьютерный экран. А фотки сейчас такие, что в естественном, не уменьшенном размере, экран монитора, наложенный на фотоснимок, будет занимать лишь 10-15% общей площади рисунка (или еще меньше);
  2. если динамически ужимать фотографии до приемлимого размера (так и поступают все программы просмотра изображений), то мы достигнем цели очень дорогой ценой: файл рисунка на сервере будет занимать в 10-20 раз больше места, чем нужно, а там этот ресурс ограничен для каждого сайта, и за аренду дискового пространства сервера надо каждый месяц платить. Так зачем без всякой нужды платить скажем в 5 раз больше?
  3. ну и следствием больших размеров файлов с цифровыми фотографиями - является излишний сетевой трафик и медленная скорость загрузки и показа изображений при интернет серфинге. Даже если у всех будет безлимитный доступ в интернет и скорость соединения 5-10 Мегабит в секунду (в Москве это уже вполне доступно для многих жителей (но далеко не всех, конечно), то и тогда - зачем загружать линии связи передачей информации, 90% которой никогда не будет востребована?

* * *
 
Нужна практически любая программа редактирования изображений (крутой Photoshop или, например, стандартная для MS Windows простенькая программа Paint):

    Обычно вполне достаточно уметь делать следующее:
  1. обрезать ненужные края рисунков (что называется "кадрированием")
  2. и сжимать откадрированное изображение до нужных оптимальных размеров.
    – Для широко распростаненного в настоящее время "стандартного" разрешения экранов компьютеров 1024×768 пикселей (соотношение сторон экрана 4:3) - нет смысла хранить в интернете картинки с лучшим разрешением, чем 800×600 (или даже 400×300 с динамической растяжкой при показе прямо на вашем компе, что несколько убыстряет загрузку при некоторой потере качества). Это для горизонтальных фотографий типа "ландшафт".
    – Для фоток с вертикальным расположением ("портрет") разрешение можно еще уменьшить - до 640×480 (или меньше). Тут по высоте - примерно те же 600 пикселей (640 - заметим, что для вертикальных фоток принято сначала указывать высоту, а потом ширину).
    – Для "широкоформатных" соотношений сторон экрана 16:10 и 16:9 наиболее распространены сейчас разрешения 1280×768 или 1366×768 (15.6´ ноутбуки).
    Так как разрешение по вертикали при этом то же, что и для соотношения 4:3, то рекомендации аналогичные (высота изображений 600 пикселей).
    Но можно не углубляться глубоко в цифры, а все это делать "на глазок".
    Критерий прост:
    После сжатия, рисунок или фото в своем естественном виде (масштаб показа 100%) не должен вылезать за границы экрана.
    Часто пропорциональное уменьшение ширины и высоты до 40% от исходных величин изображения дает вполне подходящий результат.
  3. давать файлам информативные имена в транслитерации (латиницей). Вместо пробелов ставим минусы, все остальные знаки препинания удаляем или заменяем минусами. Например: Greciya-Halkidiki-Sitonia-dom-Kostasa-Vid-na-more-2010-foto12.jpg.Такие имена ускоряют продвижение сайта в поисковиках (SEO) и дают дополнительные переходы из Яндекса или Google. Для автоматической транлитерации очень удобен онлайн-сервис на сайте translit.ru.
    Итак, в именах файлов изображений: только большие и маленькие латинские буквы, цифры и знак минуса!
    Если вы привыкли к Windows от Microsoft, то имейте в виду, что, как правило, в интернете большие и маленькие буквы различаются, ибо большинство WEB-серверов работают на Линуксе (операционной системе LINUX). Поэтому соблюдайте четко регистр букв в названиях файлов. Ну и уж конечно не путайте сходные по начертанию буквы из разных языков - используйте только английскую латиницу!

* * *
 
Как правило, для одной и той-же картинки надо готовить не один, а два или три файла. Сначала делаем большое изображение, потом его "эскиз" для предварительного просмотра - показа содержимого папки (галереи) с картинками. Если в предпросмотре 2 варианта: большие эскизы или маленькие значки, то тогда готовим еще и 3-ий файл. Эскизы - это замена английского термина "thumbnail", обозначающего миниатюру, сильно уменьшенную, но все же дающую понятие об оригинале.

Большие рисунки показываются по-одиночке, и поэтому можно не стандартизировать их размеры в пикселах (и лишь следовать рекомендациям, изложенным выше).

Для эскизов и значков следует продумать свой стандарт и готовить все файлы мсходя из него. Обычно прежде всего надо продумать, какую высоту (в пикселах) будет занимать каждый ряд (возможно разную для разных целей).

А вот ширина уже не так критична. Как минимум надо "застолбить" основные значения ширины для горизонтальных и вертикальных рисунков. Но можно разрешить и произвольную ширину.

Если же требуется чтобы галерея выглядела как правильная таблица (где не только ряды-строки выровнены, но и столбцы четко идут сверху-вниз), то придется зафиксировать в пикселах (точках экрана) и ширину каждого мини-изображения.

* * *
 
1) Основной формат хранения изображений в интернете - JPG (или JPEG, что тоже самое). Этот формат позволяет иметь яркие и полноцветные фотографии с сохранением всех оттенков цветов. Прозрачность фориат JPG не поддерживает. Формат JPEG хорошо сжимает картинки, но с небольшими потерями. Поэтому мелкие детали могут еле заметно искажаться. Также с четкими краями - могут чуть размыться.
При сохранении картинок можно менять качество сжатия JPG-файлов (обычно это 75-85%). Чем выше качество, тем больше файл. Рекомендуем для обычных фоток - 75%, для маленьких файлов (скажем 150 х 150 пикселов) - 95%, а для крошечных - 100% или PNG. После сжатия картинок, JPG-файлы рисунков занимают обычно 5 -150 Килобайт - это оптимальный размер для интернета.

2) Для хранения очень маленьких значков, логотипов, микро-эскизов лучше подходит формат PNG. В отличие от JPG, он сжимает исходные точки цифровой фотографии без потери точности, что для крошечных значков немаловажно. Также хорош для изображений, содержащих текст, для графических рисунков и иллюстраций, схем, чертежей. Формат PNG поддерживает многоуровневую прозрачность, что позволяет хранить градиентный плавный переход между прозрачной и цветной областями картинок.
Можно использовать этот формат для мелких рисунков, предназначенных для предпросмотра, например как "эскизы" всех изображений данной папки с рисунками. Хотя неточности формата JPG на таких изображениях уже мало заметны и лучше хранить эскизы картинок также в JPEG. А тем паче не годится формат PNG для больших картинок во весь экран (это не экономно и замедляет загрузку страниц).

3)Можно еще использовать 3-ий формат GIF, но лучше не надо. И никаких других!

 

[B] Загружаем файлы изображений на сервер

На сайте, сделанном на CMS Drupal, это осуществляется так:
    Раскрываем пункт "Вложенные файлы" ниже окон редактирования текстов
  • Справа от поля "Прикрепить новый файл" нажимаем кнопку "Выбрать"
  • Выбираем загружаемый файл, где он лежит на своем компьютере - и жмем "Открыть" (или "ОК") в окошке выбора файла
  • Нажимаем кнопку "Прикрепить" и ждем пока файл загрузится на сервер
  • Когда файл загрузится, то в списке вложенных файлов появится новая строчка. В колонке "Описание", ниже поля с именем только-что загруженного файла мелким шрифтом показывается полный путь к этому файлу на сервере. Берем (копируем) этот адрес и вставляем в тег <IMG> (Короткий адрес (без http://...) в самом поле не годиться для Друпала 6.16 (может быть в следующих релизах CMS Druppal этого бага уже нет?)) Читайте о различии абсолютной и относительной адресации.
  • Завершаем очередную итерацию редактирования поста (нажимаем кнопку "Сохранить") и смотрим, что получилось.
  • Опять нажимаем "Редактировать" и загружаем следующую картинку. И т.д....

Все загруженные картинки могут вызываться и из других постов. Не надо повторно загружать файлы рисунков, а просто берите адрес из старого поста и вставляйте в тег <IMG> нового!

 

[C] Вставляем РИСУНКИ на страницу, используя ТЕГ <IMG>

 

Сами картинки не вставляются непосредственно в ваши посты, там размещаются лишь ссылки на них. А сами файлы изображений отдельно хранятся обычно на том же сервере, где лежит и вся прочая информация ("контент") сайта. Можно вставлять ссылки и на картинки, лежащие на других сайтах, но это хуже для продвижения сайта в поисковиках.

Так вот, тег <IMG> и нужен для того, чтобы указать браузеру - откуда взять изображение и как его разместить (показать) на экране. Части тега <IMG> (далее: атрибуты, параметры) и делают все это. Все значения атрибутов лучше всегда заключать в кавычки: Атрибут="значение". Правда, в некоторых случаях, простые значения атрибутов распознаются и без кавычек, - но надежнее и безопаснее следовать стандарту и их (кавычки) "не забывать".
Мы не будем загружать вас всем разнообразием деталей кодирования параметров тэга <IMG>, а дадим здесь лишь самое необходимое и достаточное для успешной работы с ним!

    Атрибуты (параметры) тега <IMG>:
  • src="адрес" - задает адрес (URL) картинки (http-ссылку на нее). Пример пути к графическому файлу: src="/files/jpg/Halkidiki-Sitonia-dom-Kostasa-Vid-na-more-12.jpg". Делайте имена осмысленные - в транслитерации с минусами между словами. Эти имена также используются при поиске картинок!
  • alt="текст" - Альтернативный текст (метка) для изображения. Появляется вместо картинки, если браузер не может ее загрузить (это бывает когда указан неверный адрес в src="URL", или когда картинки там нет - забыли подгрузить, или удалили. Еще это так бывает, если в браузере отключен показ картинок на момент просмотра)
  • title="текст" - Всплывающая подпись изображения. Появляется при наведении на картинку курсора мыши. Можно (и именно так и лучше) присваивать атрибутам alt и title одно и тоже значение, но нужно обязательно задать хотя бы один из них, - при индексации картинок поисковые роботы возьмут отсюда название рисунка!
  • align="left" - вызывает "обтекание" рисунка окружающим контентом (текстом или другими рисунками) и при этом данный рисунок прижимается к левому краю окна браузера;
  • align="right" - также вызывает "обтекание" рисунка окружающим контентом (текстом или другими рисунками) и при этом этот рисунок прижимается уже к правому краю экрана;
  • vspace="4em" - Вертикальный невидимый отступ сверху и снизу от рисунка до окружающего контента (в пикселах).
  • hspace="10" - Горизонтальный невидимый отступ слева и справа от рисунка. Обычно всегда нужен в режимах обтекания, - чтобы ничего не слипалось!
  • width="100%" - Ширина картинки в процентах от ширины экрана (точнее от общей предоставленной ширины на web-странице в браузере).

Процент 34-48 (width="40%") позволит размещать фотки парами по ширине: (например width="45%"), а 26-31% - тройками, и 21-23% - по четыре в ряд. Экспериментируйте! И не забывайте о необходимости пустых промежутков, например: hspace="2".

Не надо без нужды использовать атрибут (параметр) align. Например, если картинка (или группа картинок) занимает всю или почти всю ширину окна браузера (например width="100%"), то align="left"/"right" не имеет никакого положительного смысла, но в некоторых вариантах браузеров-операционок может дать неожиданные эффекты (наложение картинок друг на друга например). Безопаснее чередовать теги <IMG>: один с атрибутом align, следующий - без него, и т.д..

Если параметр align не задан, то рисунок распологается как-бы на правах очень большого слова в потоке текста. Он высится как колокольня в деревне. Текст прижат к низу (как хижины крестьян). Но если указать align="middle", то текст будет выравниваться на середину этой "колокольни". Это может в редких случаях пригодиться, если текстовки коротки (например, короткие названия рисунков справа от них). Никакого обтекания при этом нет (то есть только одна строчка текста может быть в ряду с картинкой-"колокрльней").

Если нужно выложить несколько картинок вместе, то лучше всего соответствующие теги <IMG> располагать один за другим вплотную, даже без пробела между ними. Если оставите пробелы между тэгами и в них присутствует параметр vspace, то при показе картинок может иметь место небольшая вертикальная "лесенка", а без пробелов - рисунки будут идеально равняться друг на друга. Итак, когда в ряду много картинок (как в примере ниже), то просто размещайте подряд несколько тегов <img> через пробел (если нет атрибута vspace) - и без атрибута обтекания align!
Чтобы при этом начать новый ряд рисунков, то откройте новую строку или абзац (вместо пробела между <img>-тегами - нажмите Enter, один или два раза. Это для нашего сайта, сделанном на Друпале. Иначе, для иных CMS, вставляются теги переноса строки <br />, или начала параграфа <p> и конца его </p>).

Всегда внимательно проверяйте как отображается пост с тегами <img>! Если их несколько в посте, то обязательно задавайте уникальные alt="текст.метка" в каждом из них. При каких-либо ошибках, вместо соответствующей картинки вы увидите прямоугольник, содержащий ее текстовую метку, заданную в атрибуте alt="текст". Так вы легко поймете, какой именно тег следует исправить. (Ну и для индексации и продвижения атрибут alt очень нужен, - об этом ниже).
 
И еще. Проверяйте как (хорошо ли) масштабируется пост (крутя колесико мыши при нажатой кнопке Ctrl). И конечно, при 100% масштабе все должно быть красиво и правильно располагаться (многие пользователи интернета не умеют масштабировать и все смотрят только в варианте 100%).

 

ВНИМАНИЕ! Чтобы картинки показывались, нужно сделать еще одно действие:
Ниже окна редактирования раскрыть пункт "Формат ввода" и выбрать режим "Full HTML"

 

 

[C+] Используем специальные кнопки для облегчение ввода/правки тегов

Если на сайте используется Drupal-модуль "редактор BUEditor":
 
Для размещения или правки тэга <IMG> в редакторе предусмотрена кнопка "Insert/edit image" (с пейзажем-Зарей на значке), облегчающая работу с этим тегом (хотя часто путь копирования старого тега и вставка его в новое место, с последующей ручной правкой - вполне приемлем и несложен).
 
Если вы скопировали существующий тэг <IMG> в новое место, то выделите (засините) его и нажмите ту же кнопку "Insert/edit image". Откроется окошко, где все можно будет исправить - для многих это удобнее, чем прямо редактировать текст тега вручную.
 
В диалоговом окне размещения/правки тэга <IMG> всего 6 полей (это в варианте нашего сайта, в исходном же варианте Друпала 6.16 было 4 поля, и не совсем таких). Смысл их очевиден. Можно заполнить не все поля (но поле "Image URL", конечно, обязательно), нажать "ОК" и посмотреть, что получилось, какой вставился тэг.
Потом, если что не так, опять нажать ту же кнопку "Insert/edit image" (не снимая выделения с тега), - и продолжить заполнение (или исправление, очистку) полей. И так до победы!

Робастно, вообщем с кнопкой, да и с самим Друпалом нормалек.

 

[!] Примеры использования тега <img>

 

1° В самом начале статьи вы видите рисунок, который обтекается текстом, но новый раздел уже начинается на свободном пространстве и уже не обтекается. Чтобы этого достичь понадобилось вставить в конец обтекаемого текста такой тег: <br clear="all"/> - пользуйтесь, бывает очень полезно и существенно улучшает внешний вид поста!
 

2° Этот тег покажет вам картинку, что вы видите ниже, растянутую на всю ширину:
<img width="100%" src="/files/jpg/1225988665.jpg" alt="Святая Гора Афон. Икона преподобного Серафима в трапезной (на игуменском месте) афонского монастыря Григориат" title="Святая Гора Афон. Икона преподобного Серафима в трапезной (на игуменском месте) афонского монастыря Григориат" />

Святая Гора Афон. Икона преподобного Серафима в трапезной (на игуменском месте) афонского монастыря Григориат Святая Гора Афон. Икона преподобного Серафима Саровского в трапезной (на игуменском месте) афонского монастыря Григориат

 

Примеры выстраивания картинок в ряды по горизонтали.
Во всех нижеприведенных тегах <img> стоит промежуток hspace="1", а width="49%" (для 2-х картинок в ряду) и т.д., приводим теги (не все, а по одному на ряд) и результаты их работы (для простоты мы опустили параметры alt и title, чего делать в реальной жизни конечно не надо):

2х <img width="49%" hspace="1" src="/files/jpg/1225988665.jpg"/>
3х <img width="32%" hspace="1" src="/files/jpg/1225988665.jpg"/>
4х <img width="23%" hspace="1" src="/files/jpg/1225988665.jpg"/>
5х <img width="18%" hspace="1" src="/files/jpg/1225988665.jpg"/>
6х <img width="15%" hspace="1" src="/files/jpg/1225988665.jpg"/>
7х <img width="12%" hspace="1" src="/files/jpg/1225988665.jpg"/>
8х <img width="11%" hspace="1" src="/files/jpg/1225988665.jpg"/>






Но лучше параметром width вовсе не пользоваться, а для этих же целей (и любых других) использовать предварительно подготовленные картинки с нужным количеством пикселов по горизонтали и по вертикали! Так надежнее.

 
4° Чтобы центрировать изображение по ширине страницы, то заключите весь <img>-тег в пару тегов: <div align="center"> .. </div>. Так можно центрировать не только фотографии, но и текст. И не путайте, не параметр <img>-тэга: <img align="center" (такого и нет), а параметр <div align="center"> контейнера: <DIV>.

Боголюбово: Обычные мальчишки хорошо понимают, что десантый вертолет МИ-8 - одна из лучших связей земного и небесного

 

[D] Об уникальности (оригинальности) изображений на ваших страницах

 

Если вы берете картинки из сети интернет, или даже ваши собственные, но которые уже выкладывались где-то в блогах или интернет-галереях, то скорее всего они уже давно проиндексированы Яндексом и Гуглом.
Новое размещение этой-же картинки уже будет трактоваться как "неуникальное" и даже как "плагиат".

Однако пока за это поисковики не "банят", но могут вас "пессимизировать", то есть увести с 1-ой, скажем, страницы выдачи по запросу (из ТОП 10), - на 15-ую! Это если ваши страницы уже "раскручены". Для мало раскрученных сайтов, такая пессимизация, если и будет иметь место, то почти не отразится на вашем "рейтинге" в поисковиках.

Так что всегда лучше размещать на ваших страницах только новые, еще "не засвеченные" в интернете, картинки!

Алгоритмы распознавания дубликатов изображений (у поисковых систем Yandex, Google и других) весьма могуч и вычисляет уже многие хитрости уникализации, к тому-же постоянно совершенствуются. И обманные методы уникализации чужих картинок все лучше будут распознаваться поисковиками. Поэтому предлагаю особо не углубляться в них (методы), а сразу ориентироваться только на "честные", свои фотки.

И все-же на данный момент основное значение придается не степени уникальности самой картинки, а качественности подписей (параметры alt и title) и окружающего рисунок текста (который также запоминается!). Поэтому старайтесь больше, лучше и подробнее описывать каждое изображение!
Также именуйте сами файлы фоток правильно, информационно-емко и, конечно, по-русски (но латиницей, в транслитерации - так намного безопаснее).

Причем подробные описания требуются хотя бы для одного варианта конкретной картинки (если их у вас несколько, разных размеров). Яндекс берет самое лучшее (как он понимает) описание этого рисунка и связывает его со всеми клонами этого изображения (и не только на вашем сайте!). Гугл, похоже, пока так не может, - отстает по ходу от "собрата" в этом вопросе.

Как ни странно, Гугл имеет довольно оригинальный подход к формированию подписей запоминаемых им картинок - часто он смотрит для этого текст над картинкой. Если прилегающий к фотке абзац мал, то просто берет начало этого текста в качестве подписи. Если же больше 2-3 строчек, то выхватывает какую-либо фразу ближе к концу абзаца (но не в конце). Получаются порой весьма занятные и неожиданные подписи! Если же картинки идут одна за другой без вклинивающегося между ними текста (и нет alt - title атрибутов с короткими подписями), то в качестве названия фоток Гугл обычно использует заголовок поста. Длина подписей - примерно 2-4 слова (около 30 символов), и примерно в 2.5 раза больше при "крупном" просмотре рисунков (до 80 символов).
Параметры же <img>-тега alt и title он также читает и запоминает, но использует эти тексты лишь при отборе релевантных страниц в выдаче текстового (!) поиска и, скорее всего, конечно же, и при выдаче релевантных изображений. Но не для подписей картинок! Круто!

Все вышесказанное (про Google подход) действует не всегда. Порой Гугль честно берет "канонические" подписи фоток из параметров alt и title тегов, а порой делает то так, то эдак. Полгода назад запомненные фотографии имели около 200 символов в подписи при крупном просмотре, а сейчас символов в новых подписях - более чем в 2 раза меньше. То ему не нравятся длинные подписи в тэге <img> (если название изображения в них превышает где-то 57 символов), то все ОК.

Когда Google все-же берет "канонические" подписи картинок из тэга <img>, то он может комбинировать разные методы. Например, если текст в атрибутах alt и title очень короток, то добавляются в конец к нему отрывки из текста над картинкой, как это и было описано выше про интересный алгоритм поисковика Google.

(И не пренебрегайте, конечно, уникальностью)...

 


Тег <IMG>       Тег <A>       Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD>       Прочие HTML-теги
 

Тег <A> - Как управляться с гиперссылками в своем блоге с помощью HTML-тэга <a>. Кнопки BUEditor для сайта на CMS Drupal

 

Как управлять гиперссылками в своем блоге


Тег <IMG>       Тег <A>       Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD>       Прочие HTML-теги
 

Афонский натюрморт. Очень простая еда

Чтобы размещать гиперсылки в ваших постах, можно обходиться по-простому - "ручной" вставкой тега <A>, без использования "автоматики", - так вы всегда "будете при оружии", всегда понимая, что делают HTML-тэги внутри ваших страниц. Тег <A> довольно прост, но на нем стоит и держится весь интернет, в основе которого лежит язык разметки текстов с внедренными гиперссылками (или просто: HTML), а потому тэг <A> - самый главный из всех тегов, это главная "фишка", соль интернета. Интернет-зависимый человек (или пионер этого дела) в ходе сетевого "серфинга" переходит по гиперссылкам несчетное число раз...

 

[A] Вставляем ГИПЕРССЫЛКИ, используя тег <A>. И о якорях

 

Тег <A> имеет всего 3 атрибута (или параметра). Как всегда в HTML, значения атрибутов следует заключать в кавычки: Атрибут="значение". Хотя иногда простые значения параметров правильно работают и без кавычек, - но надежнее и безопаснее следовать стандарту и всегда заключать в кавычки любые значения. Если нужно употребить двойные кавычки внутри текста значения, то замените обрамление этого текста на одинарные кавычки (апострофы). Итак, тэг <a> имеет такую структуру:

<a атрибут="значение" title="Всплывающий текст" > Видимый текст ссылки <a>

 

    • Атрибуты (параметры) тега <A>:
  • href="адрес" - задает адрес-ссылку (URL, link) на объекты-ресурсы (страницы)
  • name="якорь" - размещает якорь ("anchor", "анкор"), метит текущее место на странице
  • title="Всплывающий текст" - Всплывающая подсказка. Появляется при наведении на видимый текст ссылки (или якоря) курсора мыши (при этом сам текст ссылки подчеркивается). При индексации сайта поисковые роботы могут брать отсюда дополнительное описание ссылки!

 

    • Тег <A> используется в следующих вариантах:
    1. Если он содержит атрибут href="адрес", то это ссылка на внешнюю страницу (пост):
    2. расположенную где-то в просторах мировой паутине (WWW, WEB, интернета),
    3. или находящуюся прямо на этом-же сайте,
    4. или для перескока в рамках страницы - на один из якорей, разбросанных внутри нее,
  1. Если он содержит атрибут name ="якорь", то смысл тэга противоположен: это не ссылка куда-то вовне, а наоборот внедрение, установка ЯКОРЯ - отметки текущего места страницы для возможности перейти сразу сюда откуда-то с другого места. Обычно, используя якоря, опускают "Видимый текст ссылки". Но лучше поступать аналогично обычному применению тега <A> и включать видимый текст. Тогда, при наведении мыши на якорь с таким текстом, текст выделяется подчеркиванием, что неплохо - привлекает внимание к якорю.
  2.  

    • Также атрибут href="адрес" позволяет сослаться на любой иной (не HTML) файл, - обычно с целью скачки (download) на локальный комп юзера (причем адрес может начинаться не только с "http://", но и с "ftp://" (доступ к файлам по "file transfer protocol"), например:
    • документ MS Word (с расширением .doc),
    • документ MS Excel (с расширением .xls),
    • архивный файл (обычно с расширениями .rar или .zip),
    • музыку, аудио-запись, подкаст (с расширениями .mp3 и другими),
    • фильм (с расширениями .flv, .avi и другими),
    • картинку, фотку (с расширениями .jpg и другими),
  3. Есть и иные, "экзотические" применения тэга <A>, например можно, используя почтовую прогамму, начать отправку электронного письма: <a href="mailto:user@email.ru" subject="тема письма">Откройте свой блог - там появились новые комменты </a>

 
Адрес (или ссылка) - это URL, http-адрес вида: href="/Danila-monah-blog". Такой вид адресов называется абсолютными ссылками. Недостаток таких ссылок: если захотите перенести свой сайт на другое доменное имя, то придется исправлять все абсолютные ссылки! Но зато просто, не надо думать...

Укороченные (относительные) ссылки уже не имеют префикса: "http://имя-сайта/ (подразумевается, что ссылка внутри-сайтовая) и могут быть разного вида, например: href="Danila-monah-blog".

          Суть относительной адресации такова:
  1. Предполагается, что ссылка (точнее страница, куда направлена ссылка) расположена в том же месте иерархии папок внутри сайта, что и страница, в котором эта ссылка размещена: href="сам-документ.html";
  2. Если же ссылка ведет во вложенную структуру папок (вниз), относительно исходной, то в ссылке перечисляется весь дополнительный путь: href="папка-3/папка-4/папка-5/сам-документ.html";
  3. Если наоборот, ссылка ведет из вложенной исходной структуры папок наверх, то в ссылке добавляется нужное чило переходов назад (вверх): href="../../../сам-документ.html";
  4. Если же сначала наверх, потом вниз, но по другому пути: href="../папка-7/папка-8/сам-документ.html";
  5. Ну и наконец, можно не шагать наверх, а отмерять ссылку прямо от корня сайта: href="/папка-1/сам-документ.html", указывая в самом начале адреса косую черту (слэш). Но учтите, что этот последний вариант не будет работать, если вы решите отлаживать сайт на локальном компе, так что лучше им не пользоваться!

Cсылка на якорь отличаются от других адресов наличием суффикса вида: #Glava2, причем, если мы просто перескакиваем внутри страницы, то можно в адресе все опустить до решетки и оставить голый этот суффикс (href=#Glava2), но саму решетку надо оставить!
Еще ссылки на якоря называют hash-ссылками (хэш-ссылками, хеш-ссылками) ввиду того, что символ решетки ассоциируется в английском языке с словом "hash" - порубкой, нарезкой чего-либо. (Не путайте "хэш" с "кэш" (cash, наличные деньги). И еще символ решетки также называют как: "шарп" (sharp) и "диез" - в нотной записи музыки).

Якоря же состоят из одних этих суффиксов и без решетки (#), например: name="Glava2".

    • "Видимый текст ссылки" (еще его часто называют: "анкор") - тут допустимы разные комбинации:
  • может быть текстом (который можно по-всякому форматировать (зажирнять, курсив и т.д.));
  • рисунком (т.е. тэгом <img>, указывающем на картинку);
  • чередой рисунков;
  • рисунками и текстом за ним и т.д..

Внимание! Анкором обычно называют видимый текст ссылки, но также и якоря, тем более, что "якорь" - это исходное значение слова "anchor" - "анкор"! Первый вариант встречается в рунете много чаще ввиду того, что собственно ЯКОРЯМИ (анкорами) пользуются значительно реже, чем тегами <A>, непременно имеющих АНКОР (видимый текст ссылки).

Внимание! Спамеры внедряют в чужие сайты теги <A>, не имеющие анкоров (видимых текстов ссылок).

 
• "Видимый текст ссылки" (плюс "Всплывающий текст") - это очень важные тексты для seo - продвижения того сайта, куда идет ссылка! По тем ключевым словам, которые вы здесь употребите, интегрально определяется тематика, релевантность, ранг той страницы, куда ссылается данный тег <a>. Лучше всего соотносить эти тексты с объектом ссылки и пытаться выражать суть - зачем переходить на ту страницу (пост). Если заголовок страницы (куда идет ссылка) адекватен ее содержанию, то можно просто отдублировать этот заголовок в один из этих текстов (в значения параметров href или title), но лучше слегка варьировать текстовки, не упуская сути. Так ссылайтесь на сторонние ресурсы (сайты). Но как будут ссылаться на ваш сайт - обычно у вас не спросят (не всегда можно влиять на тексты ссылок, идущие с чужих сайтов).
      Но вот внутренние ссылки (в рамках вашего сайта) старайтесь всегда делать правильно, как нужно, а не абы как. Ведь и они помогают seo - оптимизации и продвижению вашего сайта в поисковых системах.

• Всегда проверяйте как работают ссылки в тегах <A>! Один лишний или пропущенный символ, или буква не в том регистре или не на том языке - и ссылка открываться не будет. А это очень "некрасиво"...

 

[B] Используем специальные кнопки для облегчение ввода/правки тегов

Если на сайте используется Drupal-модуль "редактор BUEditor":

 

Для размещения или правки тэга <A> в редакторе предусмотрена кнопка "Insert/edit link" (с фиолетовым шариком на значке), облегчающая работу с этим тегом (хотя часто путь копирования старого аналогичного тега и вставки его в новое место, с последующей ручной правкой - вполне приемлем и несложен).

Если вы скопировали существующий тэг <A> в новое место, то выделите (засините) его и нажмите ту же кнопку "Insert/edit link". Откроется окошко, где все можно будет исправить - для многих это удобнее, чем прямо редактировать текст тега вручную.

В диалоговом окне размещения/правки тэга <A> всего 3 поля. Смысл их очевиден. Можно заполнить не все поля (но поля "Link URL" и "Link text", конечно, обязательны), нажать "ОК" и посмотреть, что получилось, какой вставился тэг.
Потом, если что не так, опять нажать ту же кнопку "Insert/edit link" (не снимая выделения с тега), - и продолжить заполнение (или исправление, очистку) полей. И так до победы! Все очень просто.

 

[C] Пример использования тегов <a> и <img>, где картинки являются ссылками

Можно кликать и на картинки, и на текст - результат одинаков

<a href="/Afon-palomnichestvo.Pavle-Rak.Pavle-Rak-serbskij-pisatel-i-filosof-Priblizheniya-k-Afonu-1989-vtoroe-izdanie-s-dopolneniyami-201" title="Павле Рак" > <img src="/files/jpg/Elena-Cherkasova-2010-Ierej.jpg" align=left />Павле Рак, сербский писатель и философ. «Приближения к Афону» (1989), второе издание - с дополнениями 2010 года</a>
Эта конструкция тегов дает такой результат:
 

Павле Рак, сербский писатель и философ. «Приближения к Афону» (1989), второе издание - с дополнениями 2010 года - Читайте онлайн!:

Павле Рак, сербский писатель и философ. «Приближения к Афону» (1989), второе издание - с дополнениями 2010 года


 


Тег <IMG>       Тег <A>       Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD>       Прочие HTML-теги
 

Отличный материал.

Материал для статьи подготовлен на высшем уровне. Ознакомился с ним (если можно так сказать) на одном дыхании. Но осмыслев его более подробно закрались пару мыслей с которыми хотелось бы поделиться с автором данного материала. К сожалению не могу найти на сайте контакты для связи с Вами. Прошу сообщить контактные данные в ответном сообщении на данный комментарий.
Заранее спасибо.

Этот "творческий" СПАМ оставил

Этот "творческий" СПАМ оставил в назидание тем, кто не знает, что и такого спама сейчас в Сети довольно много.

Отличный материал.

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

(Это "творческий спам", но оставили для просвещения несведущих)

Отличный материал.

Привет автору. Хотелось бы задать такой вопрос, можно ли размещать материал который вы публикуете у себя на сайте на своем, конечно же со ссылкой на Ваш сайт? Уж очень мне нравятся некоторые статьи ваши

Отличный материал.

Прочитав Ваш пост немного был озадачен темой поднятой Вами. После детального изучения я пришел к мнению, что я полностью согласен с Вашим мнением. У себя в ЖЖ я немного хочу процетировать Ваш пост и поразмышлять на эту тему. Естественно ссылка будет присутствовать на Ваш сайт. Надеюсь Вы не против?

Вот пример СПАМ-КОММЕНТА со скрытыми ссылками. Тут было 8 скрытых спам-ссылок!
Спам-юзер Toorolowl удален.

что случилось с форумом?

Люди что происходило с форумом ?
2 дня не открывался...

============================

Это тоже спам. Такого рода спама сейчас немало приходит из сети.
 
Видимо: спамеры зондируют почву такими безобидными и абстрактно-универсальными (подходящими под почти всякий сайт) сообщениями. Если такой коммент проходит, то значит модерация на сайте "либерально-бездумная" и можно пытаться бомбардировать сайт и настоящим спамом, несущим внешние ссылки.

CMS Drupal и самый минимум по HTML-разметке

 

Пособие для блогеров по структурированию (созданию оглавлений и др.) своих БЛОГов на CMS Drupal (самый минимум из HTML-разметки)


Тег <IMG>       Тег <A>       Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD>       Прочие HTML-теги

 

Кот-афонит. Монах спит - молитва идет. На Святой горе Афон кошек и котов очень много. Это скорее всего бродячий кот
 

Наш сайт построен как блог-портал, набор дружественных блогов (сетевых дневников) в близких темах. Сайт сделан на движке CMS Drupal 6, и будет развиваться и совершенствоваться (пишите пожелания).

Слово БЛОГ означает «WEB-дневник» (weblog, web log, что дословно значит «сетевой журнал»).
Просто начало слова "утерялось"...
Блог - это собрание записей (хронология постов) одного автора (или, редко, небольшого коллектива авторов - таковы обычно "корпоративные блоги"). В этом его отличие от ФОРУМов, где все авторы коллективно обсуждают различные темы, то есть первичны именно ТЕМЫ, а не личностные "потоки сознания" авторов.

Блоги же пишут типа "для себя", ведут "дневник писателя". Но т.к. эти записи публичны, всем доступны для чтения и комментирования, то это, конечно, не так. Главное в желании вести блог - это общение. Принести кому-то пользу, послужить людям (как это обычно бывает - лишь "советом", словом), а в ответ получить поддержку на своем жизненном пути ("вот кому-то помог, не зря значит "небо копчу" и жизнь "прожигаю"). Баланс тут, разумеется, тщеславия и смирения. Если жизнь на этом виртуальном сетевом мире не замыкается, то может и польза от всего этого случиться...

 


 

Поговорим о структуре блогов

Общепринято, что новые посты (записи блога) - добавляются в самый верх блог-ленты или "свитка" блога, причем показываются не целиком, а в виде "анонсов". Перейдя по ссылке можно открыть на отдельной странице соответствующий пост целиком.

    Так что блог (физически) - это:
  1. Куча постов (хранящихся каждый - на отдельной странице)
  2. Авторская лента-свиток с анонсами постов (обычно вся лента "нарезается" на несколько страниц с перетекающими по ним анонсами). Пример такой ленты: /Pavle-Rak-blog
  3. Главная лента-свиток (типа френд-ленты ЖЖ, вместо устаревшего понятия "главной страницы сайта") - здесь собираются почти все посты из всех блогов данного сайта (но можно ограничиваться только своим блогом и не внедрять свои посты на главную ленту). У нас эта лента вызывается просто: /

Что видим? Гибкая, простая и удобная система хранения информации, где совсем нет никакой статической иерархии, невозможно потерять никакой пост (квант информации), заточенность на быстрый доступ к самой свежей информации, и удобство погружения в "замкнутый" мир определенного автора (когда это интересно). Очень мощная и надежная "инфраструктура".

Что касается ТЕМ публикаций и обсуждений, то для удобных выборок по ним всего связанного - есть специальные "навесные" средства в CMS Друпал (великолепная таксономия (taxonomy, от греческого τάξις - порядок, строй и νόμος - закон), поиск (Search), взгляды (Views)), которые можно включить на сайте, в рамках вышеописанной структуры блог-портала. Так что получится даже лучше, чем на форумах, ибо нет жесткой статической классификации тем, которая в силу "человеческого фактора" никогда не может быть совсем удачной и правильной. Обычно всегда там темы дублируются, расщепляются, переплетаются и т.д.. Но сейчас не будем пока говорить обо всем этом...
 
Отметим лишь одно: В отличие от тем, которые всегда имеют зыбкость, многозначность, неуловимость, разделение всей массы постов по авторам имеет совершенно четкий и ясный смысл, впрочем какой имеют и даты постов. Это реальное и часто востребованное "фундаментальное" деление. А вот для тематического деления и классификации более естественны динамические способы индексации или получения выборок. Так что при хороших "навесных" системах тематической и ассоциативнорй классификации, форум на таком блог-портале становится совершенно ненужным.

 
Но иногда статическая структура вполне и даже очень уместна. Например, оглавление книги, уже вышедшей в материальном, бумажном виде, в "реале". Если мы помещаем содержание (тексты) этой книги в структуру блога, то вполне логично навесить в дополнение к ним и жесткую структуру ее оглавления. И вполне статическую.
Решение простое. Не надо портить базовую инфраструктуру блог-портала какими-то исключениями и "заплатками". Просто в отдельном посте разместим это оглавление (состоящее из ссылок на все главы книги), и, во-вторых, закрепим ("заморозим") этот пост-оглавление в верхней части авторского блога.
Если же таких книг наберется много, то введем еще один уровень иерархии: создадим аост "список всех книг автора", в котором дадим ссылки на электронные оглавления всех его книг (на посты-оглавления нижнего уровня). И закрепим в "топе" (вершине) блога только один этот "главный" пост.

Итак, формат блога весьма прост и универсален, и, кроме традиционных блогов-дневников, позволяет создавать, например, каталоги и оглавления, сложные древовидные структуры и другие виды представления контента (материала), не разрушая и не меняя стандартный вид представления блог-ленты ("свитка") анонсов постов.

 


 

Что же для этого нужно? - Совсем немного труда, ведь мы ограничимся самым минимумом средств HTML-разметки

Чтобы вставлять рисунки и ссылки, или выделять фразы и делать отступы - нужно чуть-чуть освоить азы внутренней кухни HTML-разметки. Это легко. Понадобится лишь час-два времени для усвоения теории, и потом, через несколько дней практики - новые навыки вполне закрепятся у вас уже "навечно".

Совсем несложно научиться распознавать среди нормального "человеческого" текста пару основных (и с десяток вспомогательных) HTML-ТЕГов (или просто тэгов), - управляющих последовательностей в угловых скобках, например:

  • <i> некий текст </i>текст в таком обрамлении будет выделен курсивом;
  • &nbsp;так кодируются некоторые спец-символы;
  • <hr>разделяющая горизонтальная линия;
  • <a href="/" title="Щелкайте тут!"> Афонский сайт </a>гиперссылка (ссылка на другой пост).

 
Создаем ОГЛАВЛЕНИЕ
Все очень просто. Создаем специальные посты, где вручную расставляем ссылки на дочернии посты, - так получаем оглавление своих постов. Пост этот закрепляем в самом верху своей блог-ленты (сейчас пока закреплять может (по вашей просьбе) только админисратор сайта, но потом эта возможность будет предоставлена всем).

 
Двухуровневое ДЕРЕВО
Также можно сделать и двухуровневую структуру, когда из главного оглавления попадаем в подчиненные, а уже из них - в листья дерева иерархии (посты, рисунки).

 
Раскрываем РИСУНКИ

Можно делать рисунки-ссылки, так что, например клик на рисунке откроет его увеличенную копию. Тут есть 2 варианта:

1) размещаем рисунок на отдельной странице (отдельным постом в вашем же блоге) вместе с подписью и другим описательным текстом:
Uranupoli-foto-o-Sergiya

2) просто указываем адрес картинки в теге <a> - тогда открывается "голый" рисунок в своем естественном размере. Внимание! Этот 2-ой вариант не индексируется Яндексом! А потому не стоит им пользоваться, если хотите, чтобы не только уменьшенные, но и полные фото были бы в индексе поисковика):
parom-sv-Panteleimon-foto-o-Sergiya

 


 

"Основных" (для нашего дела) тегов всего два: <A> и <IMG>

Читайте о них в отдельных постах и обязательно освойте их, без них - никуда!

 

  • Вставляем РИСУНКИ (вместе с ТЕГом <IMG>) ← включите FULL HTML
  • Тег <A> - вставляет ссылки (гиперссылки) на другие посты или якоря
  •  


     

    "Дополнительных" HTML-тегов (для нашего дела) тоже совсем немного!

    Читайте о них ниже, а об оформлении СПИСКОВ - в отдельном посте.
    Стоит освоить их, они - творят чудеса (в плане внесения ясности в тексты)!

     

    • Пара тегов <b> и </b> - зажирняет вложенный в них текст;
    • Пара тегов <i> и </i> - накладывает курсив на вложенный в них текст;

    • Пара тегов <dd> и </dd> - сдвигает вправо вложенный в них текст;

    Теги <ol>,<ul>,<dl> и связанные с ними - красиво оформляют различные СПИСКИ ;

    • Спецсимвол &nbsp; - вставляет "неразрывный" пробел. Полезен (IMHO) прежде всего для дополнительного "разбеливания" текста. Если помещаем его в пустую линию, то она не "схлопывается" (Друпал отделяет абзацы лишь одной пустой линией, остальные игнорирует)

    • Пара тегов <u> и </u> - подчеркивает вложенный в них текст ← включите FULL HTML;
    • Пара тегов <s> и </s> - зачеркивает вложенный в них текст ← включите FULL HTML;

    • Пара тегов <h3> и </h3> - для заголовков ← включите FULL HTML

    • Пара тегов <center> и </center> - для центрирования← включите FULL HTML

    • Пара тегов <div align=center> и </div> - можно и так центрировать текст← включите FULL HTML
    • Пара тегов <div align=right> и </div> - а так прижимать блок текста вправо← включите FULL HTML

     

    • Тег <hr> проводит горизонтальную черту на всю ширину экрана ← включите FULL HTML


     

    Обычно теги можно вкладывать друг в друга и добиваться таким образом очень многого. Экспериментируйте смело!

    Внимание! Если у тега мы поставили напоминание ← включите FULL HTML, то ниже окна редактирования раскройте пункт "Формат ввода" и выберите там режим "Full HTML".

     


     

    Используем специальные кнопки BUEditor для облегчение ввода тегов

    Если на сайте используется Drupal-модуль "редактор BUEditor":

     

    Для быстрого ввода тегов в редакторе BUEditor предусмотрены соответствующие кнопки:

  • "Headings" (ЗАГОЛОВОК, с изображением жирной буквы H на значке). После нажатия предлагается список вариантов. Выберите громадность заголовка (по-моему наилучший размер № 3: Heading3 ). При этом используйте только один вид (максимум 2) заголовков. Поисковые роботы, если заметят сумятицу в очень важных, по их мнению, заголовках (заключенных в эти теги), могут решить, что это "поисковый спам" и исключить страницу из индексации;
  • "Bold" (ЖИРНО, с изображением жирной буквы B на значке);
  • "Italic" (КУРСИВ, с изображением наклонной буквы I на значке);
  • "Underline" (ПОДЧЕРКИВАНИЕ, с изображением подчеркнутой буквы U на значке);
  • "Strikethrough" (ЗАЧЕРКИВАНИЕ, с изображением зачеркнутой буквы S на значке);
  • "Indent" (ОТСТУП, с изображением здоровой двойной кавычки на значке);
  • Сначала надо выделить (засинить) нужный кусок текста, а потом нажать нужные кнопки...
    Если что не так, то сочетание клавиш Ctrl + Z поможет отказаться от нескольких шагов редактирования...

     


    Тег <IMG>       Тег <A>       Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD>       Прочие HTML-теги
     

    Как сделать чтобы на моем блоге были же такое

    Я никак не смогла вставить рисунок в коментарий. Вставляю ссылку на рисунок а он не показывает его как рисунок. Что мне делатЬ?
    Фотки беру отсюда - images.yandex.ru/yandsearch?text=af0n.ru

    Если на этом сайте, то у анонимов нет такого права

    А где Вы хотите вставить?
    Пришлите полный текст коммента с ссылкой на рисунок.

    Если же на этом сайте, то у анонимов нет такого права.

    Комменты