Тег <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="10" - Вертикальный невидимый отступ сверху и снизу от рисунка до окружающего контента (в пикселах).
  • 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%).

 

ВНИМАНИЕ!
На нашем сайте, сделанном на CMS Drupal, чтобы картинки показывались, нужно сделать еще одно действие:
Ниже окна редактирования раскрыть пункт "Формат ввода" и выбрать режим "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-теги
 

Комментарии


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


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

E-mail:
  Ваш адрес в соцсети или сайт:

Прошу ОПОВЕЩАТЬ меня на указанный выше e-mail - ТОЛЬКО при ответах в ветке ЭТОГО коммента!

 

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


Тег <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-теги
 

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

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

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

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

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