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

Как вставить в HTML ссылку и картинку — теги IMG для вставки изображения и html теги гиперссылки A

Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. В этой очередной статье из рубрики «HTML для чайников» мы продолжим рассматривать html теги. Раннее мы узнали что такое язык Html и тэги по версии валидатора W3C, поговорили об оформлении комментариев в Html и Doctype, а так же затронули тему символов пробела в Html коде и спецсимволов (мнемоник). Да, еще мы обсудили возможности задания цвета в Html.

Сегодня я хочу подробнее остановится на тех html тегах и их атрибутах, с которыми вы будете чаще всего сталкиваться в работе над своим веб-проектом. Это html тег изображений (картинок) Img и html тег ссылки A. Без знания html тегов, позволяющих вставить картинку или ссылку в HTML документ (вебстраницу), очень трудно будет продуктивно работать над дизайном сайта. Эти теги картинок и ссылок активно используются как при написании и оформлении статей, так и в оформлении шаблона, используемого на сайте.

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

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

С другой стороны, в оформлении используемого вами шаблона также активно применяются те же самые основные html теги — вставки ссылок, картинок, контейнеры, списки (UL, OL, LI, DL), различные формы html (Form, Input, Button, Checked, Value) и таблицы (Tr, Th, Td, Table). И следовательно, для того, что бы понимать структуру шаблона (шаблоны Joomla, темы WordPress) и при необходимости вносить в него изменения, опять же необходимо знание хотя бы небольшого количества html тегов и атрибутов. Поверьте, потраченное на это время с лихвой окупится в дальнейшем. Ну, будем считать, что я вас убедил в необходимости знакомства с языком html и пора переходить непосредственно к самим html тегам.

Как вставить картинку — html теги Img

Для вставки картинок на страницу служит html тег Img. Представленная ниже картинка вставлена с помощью следующего кода тега 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 задается с помощью определения относительного пути от исходной папки, в которой лежит файл самого HTML документа, из которой вы пытаетесь открыть изображение, до файла картинки. Если файл картинки находится на сервере в той же папке, что и HTML документ, из которого к нему обращаются, то путь к нему указывать не нужно — требуется указать только имя файла с картинкой (сохраняя регистр букв).

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

Html тег Img — задаем ширину и высоту изображения с помощью атрибутов Width и Height для ускорения загрузки сайта

Html атрибуты Width и Height позволяют задать размер области (ширину и высоту соответственно), которая будет отводиться на странице под данное изображение. Эти атрибуты вставляются внутри тега Img, например, так:

<Img src="http://ktonanovenkogo.ru/image/finik.jpg" Width="200" Height="150">

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

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

Используйте при сохранении рисунков компактные форматы типа GIF (для вставки схематических картинок) или JPG (для вставки фотографий). Html атрибуты Width и Height, в отличии от атрибута Srс (единственный обязательный атрибут тега Img), являются необязательными. Многие их просто не указывают, но они, тем не менее, позволяют незначительно ускорить загрузку документа с изображениями. Т.к. в комментариях появился вопрос от уважаемого Максима о том, как это происходит и с чем это связано, то я поясню.

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

Если изображения, выводимые на данную страницу очень тяжелые и их очень много, то вставка в html тег Img всех этих картинок атрибутов Height и Width позволит пользователям приступить к чтению текста сайта, в то время как изображения еще будут загружаться.

Также, если вы не укажете атрибуты Width и Height внутри html тега Img, то может возникнуть ситуация, когда при маленькой картинке и очень длинном альтернативном тексте (задается атрибутом Alt в теге Img, об этом речь пойдет ниже), до того как загрузится изображение, временно произойдет сдвиг дизайна сайта, т.к. длинный альтернативный текст из атрибута Alt будет занимать столько места, сколько ему понадобится.

В случае же использования атрибутов Width и Height внутри html тега Img, место для выведение альтернативного текста будет ограничено размерами, заданными в атрибутах размера изображения Width и Height. По большей части, именно из-за этого я стараюсь прописывать атрибуты Width и Height в теге Img.

Атрибуты 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 тега ссылки А. Обязательным атрибутом 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 документов. В этом случае посетителю вашего сайта было бы удобнее, чтобы ваша страница оставалась всегда открытой.

Это атрибут 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 можно использовать и в случае использования обычного текстового анкора для Html тега ссылки. В этом случае, информация прописанная в атрибуте Title тега ссылки A будет видна, если подвести курсор мыши к гиперссылке.

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

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

Создание якорей (атрибут NAME) и хеш-ссылок с помощью Html тега ссылки A

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

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

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

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

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

Итак, после того, как мы расставили в тексте статьи все необходимые якоря гиперссылок, можно приступать к созданию хеш-ссылок, которые будут ссылаться на места в тексте статьи, заранее помеченные якорями ссылки. Гиперссылка создается стандартным для Html образом, за исключением того, что в конце 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">Лучший FTP клиент FileZilla</a>

Лучший FTP клиент FileZilla

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

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

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

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

У Евгения Попова имеется видекурс по PHP+MySQL, который стоит того, чтобы с ним ознакомиться.

Можете посмотреть бесплатные видеоуроки по Html и CSS, а так же можете ознакомиться с другими статьями:

• Верстка сайта
  • Html для чайников
  • Что такое язык Html, валидатор W3C и Html тэги
  • Зачем нужен Doctype и комментарии в html
  • Спецсимволы (мнемоники) в Html, символ неразрывного пробела
  • Как использовать цвета в Html коде
  • Как в Html код вставить картинку и html ссылку
  • Как сделать в Html список с помощью тегов UL, OL, DL и LI
  • Html таблица и теги Tr, Th, Td, Table
  • Html формы - теги Form и Input
  • Div верстка сайта в Html и CSS ч.1
  • Html и CSS верстка сайта на DIV ч.2
  • Блочная верстка

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

• Img — вставка картинки в Html (Img Src), обтекание изображения текстом, картинка как фон для сайта (Html background), размер и выравнивание изображений
• Что такое гиперссылка и Html якорь (anchor), как создать ссылку на сайте (Html тег А, href, target blank), как сделать картинку ссылкой и открыть ее в новом окне
• Графика для сайта — как подготовить изображение в Photoshop и вставить картинку на сайт
• Html формы для сайта, теги Form и Input (Button, Checked, Value, Checkbox, Radio, Checkbox, Submit) — чекбоксы, Html кнопки и радиокнопки
• Html теги H1-H6 (заголовки), Hr (линия), P (абзац), Br (перенос строки) и атрибуты Html тегов (align, width)
• Теги UL, OL, LI, DL — Html списки
• Таблицы в Html (Table, Tr, Th, Td ), табличная верстка и теги Col, Tbody, Caption