Здравствуйте, уважаемые читатели блога сайт. В очередной статье из этой рубрики мы продолжим рассматривать тэги. Раннее мы узнали ), поговорили об оформлении комментариев и ), а так же затронули тему символов пробела в Html коде и . Да, еще мы обсудили возможности .

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

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

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

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

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

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

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

Атрибут Src позволяет указать имя и место хранения файла изображения (другими словами — путь до него). При этом может быть указана на файл с картинкой. Пути задаются с помощью символа "/", который служит разделителем между названиями вложенных каталогов, в которых хранятся файлы рисунков.

Абсолютный путь в Src будет начинаться с http://vash_sait.ru (для моего блога — ). Дальше, используя "/" для разделения имен вложенных папок, прописывается полный путь до файла картинки, заканчиваясь в конце именем и расширением самого файла. Например,

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

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

Задаем ширину и высоту изображения с помощью атрибутов Width и Height

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

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

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

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

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

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

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

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

Alt и Title в html теге Img

Очень полезными, с точки зрения внутренней поисковой оптимизации сайта, являются атрибуты Alt и Title. Читайте и раскрутку сайта самостоятельно или в публикации « » .

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

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

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

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

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

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

Создаем гиперссылки с помощью html тега ссылки «A»

Ссылка — один из основных элементов организации документа в Html. Без них вебстраница была бы просто страницей. Они создаются при помощи тега «А». Обязательным атрибутом является только Href. Он задает URL (путь), куда должен перейти пользователь щелкнув по данной гиперссылке.

Ссылка может вести как на внутреннюю страницу вашего же ресурса (очень важный момент внутренней оптимизации связан именно с ), так и на страницу другого проекта. Html тег A является парным и, соответственно, имеет закрывающий элемент. Текст гиперссылки (анкор — про него подробно написано в плане способствования SEO продвижению) размещается между открывающим и закрывающим тегами «A».

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

Открывание в новом окне и ссылка с картинки (изображения)

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

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

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

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

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

Ru/image/finik.jpg" Width="200" Height="150">

Title можно использовать и в случае обычного текстового анкора. В этом случае информация прописанная в нем будет видна, если подвести курсор мыши к гиперссылке. Собственно, этот атрибут можно использовать практически во всех тегах языка Html, но особого толку от этого не будет.

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

Создание якорей и хеш-ссылок

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

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

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

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

Сейчас такой способ вставки якорей считается устаревшим и валидатором Html кода будет расцениваться, как грубая ошибка . Обратите, пожалуйста, на это внимание. Теперь якоря расставляются с помощью добавления в ближайший тег.

Допустим, что для заголовка в статье это могло бы выглядеть так:

Заголовок

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

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

Анкор

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

Анкор

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

Вам может быть интересно

Списки в Html коде - теги UL, OL, LI и DL
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Html формы для сайта - теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ
Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
Как создать гиперссылку (А, Href, Target blank), как открывать ее в новом окне на сайте, а так же сделать картинку ссылкой в Html коде
Iframe и Frame - что это такое и как лучше использовать фреймы в Html
MailTo - что это и как в Html создать ссылку для отправки Емейла Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)

Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

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

Но и частить ими не стоит, если вы не инстаграм или интернет-магазин. Желательно, чтобы изображения:

• были информативными
• соответствовали цветовой гамме вашего сайта
• были уместны

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

Для тех, кто не любит переплачивать, в конце статьи мы приготовили бонус - список нескольких фотобанков , где можно скачать огромное количество качественных красивых материалов совершенно бесплатно 🙂

Форматы изображений

Во Всемирной паутине в основном используются 3 вида изображений:

gif (Graphics Interchange Format - формат для обмена изображениями )

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

jpeg , он же jpg (Joint Photographic Experts Group - Объединенная группа экспертов по фотографии - так называется организация-разработчик)

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

png (Portable Network Graphics - Портативная сетевая графика . Произносится так же как ping, т.е. )

этот формат изначально разрабатывался для веба, т.е. изображение обычно мало "весит" и не тормозит страницу при загрузке. Этот формат создан на замену устаревшего gif, но в отличие от него, не поддерживает анимацию. Png-8 , как и gif, использует всего 256 цветов. Формат png-24 поддерживает 16 млн цветов, правда и вес уже немаленький. Png-32 содержит столько же цветов, как и png-24, и плюс к этому позволяет получить изображение с прозрачным фоном , причем можно регулировать степень прозрачности. При уменьшении размеров png не происходит потери в качестве цвета.

Подытожим

gif - для анимации

jpeg - для фотографий

png - для иконок, кнопок, фонов, логотипов, скриншотов, чертежей, текстов, фотографий с прозрачным фоном

Вставка изображения в html-файл

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

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

Итак, чтобы подключить изображение к вашей веб-странице, нужно написать такой код:

Атрибут alt (от англ. alternative - альтернатива) указывает текст, который увидит пользователь, если изображение не загрузится. Неправильно указан путь, картинка удалена, плохой интернет - причин может быть много, и желательно, чтобы человек понял, что же кроется за этой ненавистной иконкой.

Поисковики обращают пристальное внимание на то, чтобы этот атрибут был заполнен. А html валидатор (ресурс для проверки кода на правильность) воспримет отсутствие атрибута alt как ошибку. Если же все атрибуты будут заполнены, да еще и содержать по возможности ключевые слова - видимость вашего сайта ощутимо повысится, т.е. его чаще будут показывать на поиске. Это из области SEO, а на данном этапе нам достаточно знать, что есть такой атрибут, и у "живого" сайта он должен быть заполнен. Пока сайт лежит у нас на диске - его вполне можно оставить пустым.

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

Высота и ширина изображений

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

В HTML5 это рекомендуется делать с помощью CSS или атрибута style , вот так:

В данном примере мы взяли 30% от ширины, но не оригинального имиджа, а размера окна браузера. Когда ширина = 100%, то изображение открывается на всю ширину браузера. Запомните эту особенность процентов , как единицы измерения.

Кстати, если бы мы написали только ширину, результат был бы тот же, попробуйте:

< img src = "https://сайт/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "панда на дереве" style = "width:30%;" >

Также ширину и высоту можно задавать в пикселях. В случае с нашей пандой, у которой исходные размеры 1196 х 796 пикселей, чтобы при сжатии животное не пострадало, нам нужно сохранить пропорции, а здесь без калькулятора не обойдешься. Допустим, мы хотим уменьшить размер картинки в 3 раза, тогда нам нужно прописать размеры 399 х 265 пикселей.

Обратите внимание, если мы увеличиваем изображение пропорционально, то достаточно указать только один параметр, напр. ширину. Умный браузер сам вычислит полный размер картинки.

Попробуйте запустить такой код и посмотрите на результат:

< img src = "https://сайт/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "панда на дереве" style = "width:399px;" >

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

Немножко нафталина

Если вам доведется ковыряться в коде сайта, созданного на HTML-4 или еще более ранних, то вы заметите, что размеры изображений устанавливаются с помощью специальных атрибутов width и height . Это устаревший метод, хотя всё еще валидный в HTML5. Тем не менее советуем использовать style, т.к. на атрибуты width и height могут влиять внутренние или внешние стили, которые будут жить в браузере или вашем CSS-файле. Мы остановимся на этом детальней, когда будем рассматривать CSS, а пока просто посмотрите пример, как стили влияют на атрибуты высоты и ширины.

В этом окне 3 вкладки: на первой вы видите html-код, на 2-й код CSS, ну а на последней - как всегда результат. Это работает, как если бы первая вкладка была файлом index.html, вторая - файлом style.css, а третья браузером. Так вот, сейчас в нашем CSS написано, что все элементы с тегом img имеют ширину 100%. Размеры атрибутов width и height по умолчанию в пикселях, поэтому здесь не надо дописывать никаких единиц.

Разница в результате на лицо 🙂

Также в старых версиях html использовались такие атрибуты:

align , с помощью которого выравнивалось изображение по горизонтали или вертикали.

hspace - отступ слева и справа от изображения до окружающего контента (напр. текста или соседней картинки)

vspace - отступ сверху и снизу от картинки до контента вокруг.

border - задавал толщину рамки вокруг изображения (по умолчанию она равна нулю)

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

Размещение картинки в коде

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

Пример №1 - перед параграфом:

Такие элементы как

И

относятся к блочным элементам . Они всегда начинаются с новой строки и занимают всю доступную ширину окна браузера. Если сначала разместить , а после него блочный элемент, например параграф, то он будет перенесен на следующую строку.

Пример №2 - в начале параграфа

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

Подписи к иллюстрациям

Чтобы пометить или подписать фото на странице используется тег

(от английского figure - рисунок). Этот тег указывает на то, что внутри него помещается контент типа иллюстраций, фотографий, диаграмм и т.п.

Тег