Вставляем ссылку и изображение с помощью Html

Здравствуйте уважаемые читатели блога Сам себе Seoшник. В сегодняшней статье я продолжу тему изучения Html и использование различных тегов вместе с атрибутами. Ранее мы с вами уже касались таких тем, как "Html верстка сайта - создаем списки", "Html теги для отображения медиа файлов", "Таблица на сайт с помощью Html" и "Онлайн-редактор документов на движке HTML5". Поэтому если вы еще не читали этих статей, то займитесь этим в ближайшее время. Я уверен, что они принесут вам много пользы.

Как вставить изображение с помощью Html?

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

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

Поэтому если вы знаете, что и как устроено и запомните все теги и атрибуты, которые позволяют вставлять на веб страницу ссылки и картинки, то это значительно упростить вам жизнь и сократит время на работу.

Первое с чего я начну рассмотрение тегов - это IMG. Как я уже писал раньше он служит для вставки изображение на веб страницу. При этом к этому тегу примыкают три атрибута Width (ширина изображения) и Height (высота изображения), а также атрибут Src с помощью, которого указываются путь изображения. На примере все выглядит примерно вот так:

<img alt="" width="200" height="150" >

В исходном виде всё будет выглядет в виде изображение и как вы уже догодались - это "Утро в сосновом бору" известного русского художника Шишкина.

Когда вы прописываете путь до изображение до обязятально указывайте формат изображения, например .jpg. В пути изображения между папками ставится разделительный слеш (/).

Также у тега Img существуют еще два атрибута, которые вроде бы не являются обязательными, но с точки зрения внутренней оптимизации могут сильно продвинуть изображение в поиске. Это атрибуты Alt Title.

Атрибут Alt дает изображению так сказать альтернативный текст, который предназначен для поисковых систем, чтобы они узнали, что за картинку вы предлагаете к индексу. Атрибут Title - это все тоже самое, но уже прописывается исключительно для посетителей.

<img title="Ключевые слова для посетителей" alt="Ключевые слова для поисковых систем" width="200" height="150" >

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

Следующий и заключительный тег, который я бы хотел представить в этой статье это тег A, который означает ссылку. Без него веб страница была бы просто страницей. У тега А есть обязательный атрибут, который указывает ссылку, куда посетитель должен кликнуть, чтобы пройти на желаемую страницу - это атрибут href. Вот как примерно выглядить стандартная ссылка

Текст ссылки либо анкор

Но также существуют и другие атрибуты, которые делают очень важную работу, например атрибут Target. Его задача состоит в том, чтобы открывать ссылку в новой странице.

В атрибуте Target нужно прописывать параметр blank, чтобы ссылка открывалась в новой странице. Если этого параметра не будет в атрибуте, то соответственно ссылка откроется в прежнем окне. Пример ссылки с атрибутом Target

Текст ссылки либо анкор

Обратите внимание на то, что атрибуты могут стоять в разном порядке и от этого смысл тега меняться не будет. Это, как правило в математике - от перестановки слагаемых сумма не меняется.

автор: Ловцов Алексей