Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

В этой очередной статье из рубрики html, CSS, PHP, MySql – изучение и применение на практике мы продолжим рассматривать html теги. Раннее (html для начинающих: типы верстки, html теги, атрибуты, параметры атрибутов, определение цвета на экране) были рассмотрены основы работы с html тегами, их синтаксис и составные части. Сегодня я хочу подробнее остановится на тех html тегах и их атрибутах, с которыми вы будете чаще всего сталкиваться в работе над своим веб-проектом. Это html тег IMG для вставки изображения в текст и html тег ссылки A. Без знания этих html тегов очень трудно будет продуктивно работать над дизайном сайта. Эти теги активно используются как при написании и оформлении статей, так и в оформлении шаблона, используемого на сайте.

Допустим, что вы используете для написания статей визуальный редактор, позволяющий не задумываться, каким именно образом прописывается все это в html коде. Но дело в том, что не один редактор не является идеальным и зачастую, для исправления очередного бага в оформлении текста статьи, просто необходимо будет перейти в режим редактирования html и внести изменения непосредственно в сами теги. Это может сильно упростить вам жизнь и сэкономить время. Тем более, что изучить десяток самых распространенных тегов и их атрибутов не составит труда.

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

Вставляем изображения в текст с помощью html тега IMG

Для внедрения графики на страницу служит html тег IMG. Представленная ниже картинка вставлена с помощью следующего кода:

 <img src="http://ktonanovenkogo.ru/image/finik.jpg" width="200" height="150">

Относительные и абсолютные пути к графическому файлу

Атрибут SRC html тега IMG позволяет указать имя и место хранения графического файла. При этом может быть указан полный или относительный путь к файлу. Пути задаются с помощью символа '/', который служит разделителем между названиями папок, в которых хранятся файлы. Абсолютный путь в html теге IMG будет начинаться с http://vash_sait.ru (для моего блога - http://ktonanovenkogo.ru). Дальше, используя '/' для разделения имен папок, прописывается полный путь до графического файла, заканчиваясь в конце именем и расширением самого файла. Например, http://ktonanovenkogo.ru/image/finik.jpg

Относительный путь в html теге IMG задается с помощью определения относительного пути от исходной папки, в которой лежит файл самой странички, из которой вы пытаетесь открыть изображение, до файла изображения. Если графический файл находится на сервере в той же папке, что и файл, из которого к нему обращаются, то путь к нему указывать не нужно — требуется указать только имя файла (сохраняя регистр букв). Если файл изображения находится на том же сервере, но в другом каталоге, требуется указать путь к файлу от каталога, где находится документ, из которого к нему обращаются (в примере, показанном выше, используется как раз относительный путь до графического файла -image/finik.jpg).

Задаем ширину и высоту изображения с помощью атрибутов WIDTH и HEIGHT html тега IMG для ускорения загрузки сайта

html атрибуты WIDTH и HEIGHT позволяют задать размер (ширину и высоту соответственно) области, которая будет отводиться на странице под данное изображение. Эти атрибуты вставляются внутри тега IMG, например, так:

<img src="http://ktonanovenkogo.ru/image/finik.jpg" width="200" height="150">

Если эта область будет не соответствовать реальному размеру вставляемого изображения, то рисунок будет соответственно растянут или сужен, до заданного в html теге IMG размера. Тем не менее, не следует использовать это способ, скажем, для уменьшения размера вставляемого рисунка. Ведь вес рисунка по-прежнему останется большой, а это будет замедлять загрузку страницы с этим рисунком.

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

Используйте при сохранении рисунков компактные форматы типа GIF (для вставки схематических изображений) или JPG (для вставки фотографий). Атрибуты WIDTH и HEIGHT, в отличии от атрибута SRС (единственный обязательный атрибут тега IMG), являются необязательными. Многие их просто не указывают, но они, тем не менее, позволяют незначительно ускорить загрузку страницы с изображениями. Т.к. в комментариях появился вопрос от уважаемого Максима о том, как это происходит и с чем это связано, то я поясню.

Дело в том, что если браузер не находит атрибуты WIDTH и HEIGHT внутри html тега IMG, то ему потребуется время на то, чтобы узнать размер изображения, загрузить само изображение и только после этого продолжить загружать веб-страницу. В случае же когда вы прописали атрибуты HEIGHT и WIDTH, браузер автоматически резервирует место под изображение указанных в этих атрибутах размеров и продолжает загружать веб-страницу дальше. Если изображения, выводимые на данную страницу очень тяжелые и их очень много, то добавление в html тег IMG всех этих изображений атрибутов HEIGHT и WIDTH позволит пользователям приступить к чтению текста сайта, в то время как изображения еще будут загружаться.

Также, если вы не укажете атрибуты WIDTH и HEIGHT внутри html тега IMG, то может возникнуть ситуация, когда при маленькой картинке и очень длинном альтернативном тексте (задается атрибутом ALT в теге IMG, об этом речь пойдет ниже), до того как загрузится картинка, временно произойдет сдвиг дизайна сайта, т.к. длинный альтернативный текст будет занимать столько места, сколько ему понадобится. В случае же использования атрибутов WIDTH и HEIGHT внутри html тега IMG, место для выведение альтернативного текста будет ограничено размерами, заданными в этих атрибутах. По большей части, именно из-за этого я стараюсь прописывать атрибуты WIDTH и HEIGHT в теге IMG.

Для участия ваших изображений в поиске по картинкам Яндекса и Google прописываем атрибуты ALT и TITLE в html тег IMG

Очень полезными, с точки зрения внутренней оптимизации вашего сайта, являются атрибуты ALT и TITLE для html тега IMG. Первый из них задает, так называемый, альтернативный текст для изображения. Этот текст вы сможете увидеть, если отключите показ картинок в вашем браузере. Атрибут ALT для тега IMG и предназначен для этого – рассказать о том, что за рисунок здесь должен был бы быть. Атрибут TITLE для тега IMG предназначен для информирования пользователя о содержании изображения.

Содержимое атрибута TITLE для тега IMG показывается во всплывающей строке, если пользователь подведет мышь к рисунку. Оба этих атрибута для html тега IMG (если вы их прописали) позволяют включить изображения вашего веб-проекта в поиск по изображениям таких поисковых систем как Яндекс и Google (а возможно и еще каких-то поисковиков). Поэтому не стоит пренебрегать этой возможность и в обязательном порядке прописывать атрибуты ALT и TITLE для html тега IMG. Оформление ваших изображений должно быть примерно таким:

<img src="http://ktonanovenkogo.ru/image/finik.jpg" width="200" height="150" alt="Здесь нужно прописать ключевые слова, с помощью которых вы хотите привлечь целевых посетителей на ваш сайт с поиска по картинкам" title=" Здесь нужно прописать ключевые слова, с помощью которых вы хотите привлечь целевых посетителей на ваш сайт с поиска по картинкам ">

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

Еще раз напоминаю о правилах написания html тегов. После открывающейся треугольной скобки, обязательно без пробела, пишется название тега, затем, через пробел, пишет название атрибута, допустимого для этого html тега. После названия атрибута, без пробела, ставится знак равно и в кавычках пишется параметр атрибута (например, ширина в пикселях для атрибута WIDTH). Следующий атрибут внутри html тега отделяется от предыдущего атрибута пробелом. В конце html тега ставится закрывающая треугольная скобка. Обращаю ваше внимание, что html тег IMG не является парным, т.е. у него нет закрывающего тега.

В идеале, примерно так должны быть оформлены все изображения, используемые на вашем веб-проекте. Такого вида можно добиться и не правя для каждого изображения html код вручную. Визуальные редакторы различных CMS (Joomla, WordPress и др.) позволяют задать атрибуты для html тега IMG в удобном для пользователя графическом интерфейсе, но после пробной настройки обязательно проверьте html код (в любом визуальном редакторе можно переключиться на показ html кода статьи). Действительно ли все прописывается именно так, как нужно, потому как не всегда сразу понятно, какое именно поле в визуальном редакторе соответствует тому или иному атрибуту html кода.

Создаем веб-ссылки с помощью html тега ссылки A

Ссылка - один из основных элементов организации вебстраницы. Без них вебстраница была бы просто страницей. Ссылки создаются при помощи html тега ссылки А. Обязательным атрибутом html тега ссылки А является атрибут HREF. Он задает URL ресурса, куда должен перейти пользователь, щелкнув по данной ссылке.

Ссылка может вести как на внутреннюю страницу вашего же сайта (очень важный момент внутренней оптимизации сайта связан именно с внутренней перелинковкой страниц), так и на страницу другого проекта. Html тег ссылки A является парным и соответственно имеет закрывающий тег. Текст ссылки (анкор) размещается между открывающим и закрывающим html тегами ссылки A. Пример ссылки:

<a href="http://ktonanovenkogo.ru">Текст ссылки (если ссылка используется для внутренней перелинковки, то этот текст должен содержать ключевые слова, по которым вы хотите продвигать статью, на которую ведет эта ссылка) </a>

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

<a href="http://ktonanovenkogo.ru">Текст ссылки</a> (если ссылка используется для внутренней перелинковки, то этот текст должен содержать ключевые слова, по которым вы хотите продвигать статью, на которую ведет эта ссылка) 

Открываем страницы в новом окне - атрибут TARGET с параметром _blank для html тега ссылки A

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

Это атрибут html тега ссылки TARGET, а параметр этого атрибута, позволяющий открывать страницу в новом окне, называется _BLANK. Если атрибут TARGET не задан в html теге ссылки A, то ссылка будет открываться в этом же окне. Пример использования атрибута TARGET в теге ссылки A:

<a href="http://ktonanovenkogo.ru" target="_blank">Текст ссылки (если ссылка используется для внутренней перелинковки, то этот текст должен содержать ключевые слова, по которым вы хотите продвигать статью, на которую ведет эта ссылка) </a>

Обратите внимание, что порядок следования атрибутов внутри html тегов никак не регламентирован. С таким же успехом можно написать:

<a target="_blank" href="http://ktonanovenkogo.ru">Текст ссылки (если ссылка используется для внутренней перелинковки, то этот текст должен содержать ключевые слова, по которым вы хотите продвигать статью, на которую ведет эта ссылка) </a>

Используем изображение в качестве анкора для html тега ссылки A

В качестве анкора для html тега ссылки, вместо текста, может использоваться изображение. В этом случае html тег IMG заключается в открывающий и закрывающий теги ссылки A:

<a href="http://ktonanovenkogo.ru" target="_blank"><img src="http://ktonanovenkogo.ru/image/finik.jpg" width="200" height="150"> </a>

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

<a href="http://ktonanovenkogo.ru" target="_blank' title="Здесь нужно прописать ключевые слова, по которым вы хотите продвинуть статью, на которую ведет эта ссылка"><img src="http://ktonanovenkogo.ru/image/finik.jpg" width="200" height="150"> </a>

Этот атрибут можно использовать и в случае обычной текстовой ссылки. В этом случае, информация прописанная в атрибуте TITLE тега ссылки A будет видна, если подвести курсор мыши к ссылке.

<a href="http://ktonanovenkogo.ru" target="_blank" title="Здесь можно прописать фразу, которая будет подсказывать пользователям, куда они перейдут, щелкнув по этой ссылке" >Здесь нужно прописать ключевые слова, по которым вы хотите продвинуть статью, на которую ведет эта ссылка </a>

Здесь нужно прописать ключевые слова, по которым вы хотите продвинуть статью, на которую ведет эта ссылка

Создание якорей (атрибут NAME) и хеш-ссылок

Еще один интересный атрибут html тега ссылки A под название атрибут NAME, который довольно широко используется для создания так называемых якорей ссылок, на которые потом можно будет ссылаться с помощью так называемых хеш-ссылок. Немного запутанно, но сейчас попробую внести ясность. Допустим, что вам нужно сослаться на конкретное место в статье, где идет обсуждение определенного вопроса.

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

Для реализации описанного способа создания ссылок, нужно предварительно вставить якорь html ссылки в ту статью, на которую будет вести хеш-ссылка. Якорь представляет из себя конструкцию напоминающую обычную ссылку, но при этом он остается невидимым для посетителя. Выглядит он так:

<a name=”imy_metki”></a>

Т.е. получается, что якорь состоит только из открывающего и закрывающего тега А, при этом он не содержит анкора и имеет один единственный обязательный атрибут NAME html тега ссылки A. Параметром этого атрибута будет служить метка, название которой вы задаете сами. Эта метка будет использоваться при создании хеш-ссылки.

Итак, после того, как мы расставили в статье все необходимые якоря, можно приступать к созданию хеш-ссылок, которые будут ссылаться на места в статье, заранее помеченные якорями ссылки. Ссылка создается стандартным образом, за исключением того, что в конце URL, который прописывается в атрибуте HREF, ставится знак решетки (знак диеза или хеш-символ), а после него имя метки того якоря, который стоит в требуемом месте статьи. Хеш-ссылка будет выглядеть примерно так:

<a target="_blank" href="http://ktonanovenkogo.ru/vokrug-da-okolo/programs/kak-nastroit-dostup-k-sajtu-po-ftp-s-pomoshhyu-programmy-filezilla.html#redfaila">Как открыть файл вашего сайта на редактирование с помощью программы FileZilla</a>

Как открыть файл вашего сайта на редактирование с помощью программы FileZilla

С помощью хеш-ссылки вы перейдете не только на страницу “Как настроить доступ к сайту по FTP с помощью программы FileZilla ”, но также браузер автоматически прокрутит окно до нужного месте (в данном случае до вопроса о редактировании файлов сайта с помощью FileZilla).

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

<a target="_blank" href="#11">Вопросы по верстке, html, CSS, PHP, MySql</a>

Пример использования хеш-ссылок вы можете посмотреть в действии на странице FAQ (Вопросы и Ответы) этого блога. Хеш-ссылки c этой страницы ведут на различные места в статьях, где обсуждаются те или иные вопросы. Без использования хеш-ссылок создать такую страницу было бы невозможно.

Вы так же можете ознакомиться с другими статьями из рубрики HTML для начинающих и материалами рубрики Верстка, HTML, CSS, PHP, MySql.

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

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru