Доброго всем времени суток, мои дорогие друзья, читатели и гости моего блога. Вроде отпуск, а времени ни на что не хватает. Всё как-то впопыхах. Но это явление временное, скоро всё устаканится. А с вами мы сегодня продолжим постигать азы html. Друзья, как вы думаете, без чего любая интернет страница будет безликой, серой и скучной? Правильно, без графического наполнения, будь то фотографии, логотипы или фон.
Так вот, вставка картинки в html — это также одна из самых важный составляющих, поэтому ее непременно должен знать любой, кто собирается делать сайты самостоятельно. Вот именно этим мы сегодня и займемся всей этой вакханалией)))
Ну что ж, давайте приступим. Как вы уже поняли из заголовка, за вставку изображения отвечает тег , но у него есть два нюансы:
- Тег является одиночным, поэтому закрывать его не нужно
- Тег всегда работает в связке с атрибутом , в котором указывается путь к картинке.
В общем давайте смотреть на примере, чтобы закрепить всё это действие. Правильно я говорю? Загрузите материалы для урока и откройте html файл в блокноте. И теперь перед основным текстом напишите следующее:
Всё. Вот такая коротенькая запись обеспечит нас картинкой на нашем сайте. Попробуйте напишите ее в документе.
А теперь сохраните файл и запустите его в вашем браузере. Посмотрим, что у нас получится. У меня получилось так.
Атрибуты
Как я уже говорил выше, тег img сразу идет в комплекте с атрибутом src. Ну я думаю, что вы уже поняли это, поэтому будем изучать остальные. Здесь есть где развернуться. Атрибутов здесь просто дофигища. Простите за мой французский).
Alt
Если вдруг картинка по какой-либо причине не прогрузилась или недоступна, что вы увидите текст, который был написан в значении атрибута Alt . Обычно здесь пишется то, что изображено на картинке, т.е. если изображено что-то про национальности, то и в alt лучше всего так и написать «Мужчины и женщины разных национальностей». На примере это выглядит так:
В итоге, если картинка по какой-то причине не сможет отображаться, то вылезет наша надпись.
В принципе вы вообще можете ничего не прописывать в качестве альтернативного текста, но сам атрибут лучше оставить, пусть даже и пустым.
Width и Height
Для тех, кто знает английский язык нетрудно догадаться, что данные два атрибута отвечают за ширину и высоту изображения. Я решил объединить две этих штуковины в один пункт, так как они выполняют похожие функции, можно сказать — братья (ну или сестры).
Width отвечает за ширину изображения, а в его значениях ставится сам размер. В общем если у вас есть картинка, например, 640*480 пикселей, а вам нужно отобразить ее на сайте 320*240, то вам просто нужно будет сделать следующее:
Всё. Теперь, когда вы сохраните документ и откроете его с помощью браузера, то вы увидите уменьшенную кртинку. Причем заметьте, мы изменили только параметр ширины, а картинка уменьшилась пропорционально, т.е. высота уменьшилась автоматически.
Height , как уже нетрудно догадаться, отвечает за высоту изображения. Тут всё работает точно также, но по вертикали. Возьмем ту же самую картинку, только не будем ставить ширину, а поставим только высоту.
Сохраняем и заходим в документ. Как видим, картинка уменьшилась до того же размера, что и в предыдущем примере, хотя мы задали на сей раз только высоту. Вы уже поняли, что тут все действует в рамках пропорций, поэтому оба параметра смысла ставить в принципе нет никакого.
Давайте ради интереса попробуем поставить атрибуты и ширины, и высоты одновременно, только зададим им непропорциональные параметры. Ну а потом посмотрим, что у нас получится.
Сохраняем, и теперь смотрим, что нам выдало. Мда, это что-то непропорциональное). В общем я думаю, что суть вы всю уловили. Попрактикуйтесь сами немного, чтобы закрепить работу с размерами, ну а потом перейдем к следующему атрибуту.
Align
Ну с этим атрибутом вы уже знакомы еще с той статьи, когда мы вообще проходили, . И вы уже наверное догадались, что отвечает он за расположение изображения.
Всего для align существует пять параметров:
- left — выравнивание по левому краю
- right — выравнивание по правому краю
- middle — выравнивание изображения по базовой линии строки (на примере увидите, что это значит)
- top — верхняя граница данного изображения выравнивается по высоте с самым высоким элементом в данной строке
- bottom — выравнивание нижней границы картинки по тексту
Ну давайте не буду тут перечислять, а по традиции покажу всё на примере. Скачайте отсюда готовый html документ и откройте его. Там вы увидите 5 одинаковых абзаца. Вставьте туда картинки с описанными атрибутами:
Ну а теперь сохраняем как обычно наш документ и смотрим, что у нас получилось. Ну что? Видите разницу? Теперь вы знаете, чем отличаются данные параметры).
Border
Атрибут border ставится, для толщины рамки на изображении. И чем он больше, тем соответственно и рамка толще. Попробуйте добавить этот атрибут в картинку, но постоянно меняйте его значение и вы сами увидите, насколько толще становится рамка.
Hspace и Vspace
Ну и рассмотрим последние на сегодня атрибуты тега img. Space (англ.) переводится как пространство, космос, пробел (клавиша) и т.д. Приставки H и V означают горизонтальность и вертикальность. Тут вопросов не должно быть.
Ну а что же эти атрибуты делают? Они задают вертикальный и горизонтальный отступы от картинки до окружающего текста (или другого контента). То есть, если вам не нравится, что картинка слишком близко находится к тексту, то вы можете увеличить расстояние между ними. Давайте посмотрим как это выглядит на примере.
Видите? Отступы увеличились как по вертикали, так и по горизонтали. Этого мы и добивались.
Кстати, вы также сможете вставлять эти картинки как шапку для сайтов, делать картинки в виде ссылок и т.д. Обо всём этом я рассказал в .
Ну а в целом у меня вроде бы всё. Основы вставки изображений я вам рассказал, но если вы хотите изучить HTML и CSS на уровне профи, то очень рекомендую вам скачать потрясающий курс на эту тему, где благодаря этому языку разметки и каскадным таблицам стилей вы запросто сможете сверстать три вида сайтов: визитки, блоги, интернет-магазины. Всё рассказано простым и понятным языком. Это просто бомба!
Ну а я с вами на сегодня прощаюсь. Уже буквально через пару занятий планирую вам дать последний урок по основам HTML, после чего мы с вами закрепим все полученные знания на практике и создадим уже простенький трехстраничный сайт. В общем все будет круто)
Ну а чтобы не пропустить всё самое интересное на моем блоге, то обязательно подпишитесь на обновления статей. Ну и конечно же посмотрите другие статьи. Я уверен, что вы найдете для себя много полезной информации. Удачи вам. Увидимся в других статьях. Пока-пока!
С уважением, Дмитрий Костин
Здравствуйте, уважаемые читатели блога сайт. В очередной статье из этой рубрики мы продолжим рассматривать тэги. Раннее мы узнали ), поговорили об оформлении комментариев и ), а так же затронули тему символов пробела в 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 коде
Вставка изображения
Для вставки изображения в html-документ используется непарный тег
, который помещается в то место документа, где должно быть вставлено изображение. У этого тега есть обязательный параметр src , значение которого указывает путь к нужному изображению в каталоге вашего сайта.
Например, чтобы поместить на страничку изображение:
в нужном месте документа помещается строчка:
Это дает браузеру понять, что в корневом каталоге сайта www.mysite.com есть подкаталог img 1.png
Здесь мы указали полный путь (или абсолютный адрес ) до изображения. А можно указать относительный адрес изображения:
Такую строчку браузер интерпретирует так: в каталоге, где лежит данный html-документ, есть подкаталог img , в нем лежит изображение с именем 1.png , которое и нужно поместить на страничке.
А вот пример указания относительного адреса изображения, если у вашего сайта более сложная структура и предыдущий пример не подходит:
Такую строчку браузер интерпретирует так: сочетание символов ../ означает, что из каталога, где лежит данный html-документ, нужно выйти на уровень вверх; а далее как в предыдущем примере: в том каталоге, где мы оказались есть подкаталог img , в нем лежит изображение с именем 1.png , которое и нужно поместить на страничке.
В целях безопасности предпочтительнее указывать относительный адрес изображения, кроме тех случаев, когда Вы на своей страничке помещаете изображение, расположенное на другом сайте.
Размеры изображения
Размер каждого изображения задается двумя параметрами: ширина и высота. У тега
есть соответствующие параметры: width и height . Эти параметры принимают значения в пикселах (px).
Вы можете задать истинные размеры изображения:
Это делать необязательно, но полезно, т.к. немного ускоряет процесс загрузки странички браузером (браузеру не приходится самостоятельно вычислять эти величины). Если размеры изображения сразу заданы в параметрах тега
, то под данное изображение будет выделено место на страничке, и структура странички при загрузке уже не будет меняться - текст прыгать, например.
А можете увеличить или уменьшить изображение, присвоив параметрам width и height другие значения. Причем, если вы хотите пропорционально изменить оба параметра, достаточно указать новое значение только одному из них, а второй - просто опустить. Браузер вычислит его автоматически.
Например, чтобы увеличить наше изображение в 1,5 раза, можно написать:
или
Результат будет один:
Еще параметры width и height могут принимать значения в процентах. Но! Следует учесть, что это проценты от размера окна браузера. В таком случае тоже можно указать только один параметр, а второй - опустить.
Например, если мы хотим, чтобы изображение по ширине занимало ровно половину нашей странички, надо написать следующее:
И мы получим:
Рамка вокруг изображения
У тега
есть еще один необязательный параметр border . С его помощью можно задать толщину рамки вокруг изображения. По умолчанию толщина рамки изображения нулевая, т.е. рамки нет.
Например, так можно добавить к нашей картинке рамку толщиной 3 пиксела:
Вот что покажет нам браузер:
Цвет рамки совпадает с цветом текста на странице, заданным с помощью параметра text тега (См. Урок 6. Свойства страницы - параметры тега body), по умолчанию это черный цвет.
И если Вы не хотите видеть рамку, принудительно присвойте параметру border нулевое значение:
Альтернативный текст
Альтернативный текст отображается браузером на месте картинки, пока та не загрузится. Или вместо картинки, если она по какой-либо причине не отобразилась.
Когда и если картинка загрузилась, альтернативный текст будет показываться при наведении курсора мыши на эту самую картинку.
Чтобы добавить альтернативный текст, используется параметр alt тега
, которому присваивается строковое значение, обязательно заключенное в кавычки.
Можно создать многострочный альтернативный текст.
Для этого достаточно вставить перенос строки в html-документе.
Выравнивание изображения
Для изображения, как и для параграфа, существует понятие выравнивания относительно текста и других изображений на странице. Задать тип выравнивания можно также с помощью параметра align тега
.
Ниже приведена таблица возможных значений параметра align :
Параметры texttop , top , middle , absmiddle , baseline , bottom задают выравнивание изображения по вертикали. А параметры left и right дают браузеру понять, с какой стороны текст должен обтекать изображение.
Отступы вокруг изображения
Чтобы при обтекании текст не прилегал близко к изображению, можно задать отступы вокруг изображения. Сделать это можно с помощью параметров hspace (отступы слева и справа) и vspace (отступы сверху и снизу) тега
.
В следующем примере продемонстрирован случай, когда текст обтекает изображение, при этом изображение выровнено по левому краю и имеет отступы вокруг, равные 5 пикселам:
Вот результат в браузере:
В городе Стокгольме, на самой обыкновенной улице, в самом обыкновенном доме живет самая обыкновенная шведская семья по фамилии Свантесон. Семья эта состоит из самого обыкновенного папы, самой обыкновенной мамы и трех самых обыкновенных ребят -Боссе, Бетан и Малыша.Разбиение изображения на части
Бывают случаи, когда на странице необходимо поместить большое изображение. Но тогда страница будет долго грузиться. Что же делать?
Один из возможных
вариантов выхода из положения - разрезать изображение на части и разместить его на странице с помощью таблицы. A чтобы изображение выглядело как целое, необходимо у таблицы удалить границу и все отступы внутри и между ячейками. Т.е. присвоить соответствующим параметрам теганулевые значения: border="0" , cellspacing="0" , cellpadding="0" .
В следующем примере мы разбили изображение на 4 части. Вот как будет выглядеть таблица:
А вот результат:
За вставку картинок в HTML-документ отвечает тег
и его атрибуты, главным из которых можно считать src , задающий адрес изображения. Он является обязательным, так как если не указать, где взять рисунок, браузер не сможет узнать, что именно добавлять на страницу.
Простейший случай вставки картинки будет выглядеть так (изображение называется image.png и находится в той же папке, что и HTML-документ):
Раньше у тега
был ещё один обязательный атрибут - alt , но с приходом HTML 5 он был переведён в разряд желательных. alt устанавливает текст, который пользователь увидит вместо картинки, если она вдруг не загрузится. Этот атрибут рекомендуют добавлять и некоторые оптимизаторы, потому как считается, что это положительно сказывается на продвижении в поисковиках.
Если не указывать изображению никаких дополнительных атрибутов, то оно будет выведено в полный размер, а нужно это бывает далеко не всегда. К счастью, желаемый размер рисунку можно задать при помощи атрибутов width (указывает ширину) и height (определяет высоту). Размеры можно записывать либо в пикселях, либо в процентах. Во втором случае процент обозреватель будет высчитывать от родительского элемента (например, абзаца, в который вставлена картинка).
Допустим, нам требуется добавить на страницу изображение image.png с альтернативным текстом «Просто картинка», шириной 420 и длиной 280 пикселей. Код в таком случае будет следующим:
Навигационная карта
О том, как сделать картинку ссылкой, мы говорили в предыдущей статье. Однако HTML позволяет задавать на одном изображении не одну ссылку, а сразу несколько. В результате пользователь, щёлкая на разные места одной картинки, будет переходить по разным интернет-адресам. Эту возможность можно использовать, например, для создания эффектного меню, интерактивных тестов или наглядных графических моделей.
Для создания карты изображения (именно так называется описанная возможность) понадобятся следующие теги и атрибуты:
- - контейнер, внутри которого описывается карта изображения.
- - тег внутри , описывающий одну область картинки. На сколько активных областей планируется разделить изображение, столько элементов и придётся поставить. Связка - работает точно так же, как связки
-
- и
-
- , создающие списки.
- shape - атрибут тега , задающий форму ссылки. Активная область может иметь форму прямоугольника, многоугольника или круга.
- cords - определяющий координаты области атрибут. Также принадлежит тегу . Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, для многоугольника - координаты вершин, определяя круг, необходимо задать координаты его центра и радиус.
- usemap - атрибут тега img , который связывает изображение с картой. Благодаря ему браузер понимает, что в контейнере описана карта именно этого рисунка.
Пример карты изображения
Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg . Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.
1. Вставляем изображение на страницу и привязываем его к будущей карте (она будет называться social), для чего пишем следующий код:
2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).
3. Начинаем создавать карту: открываем тег и прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:
4. С помощью тегов area определяем активные области:
5. Закрываем карту:
Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:
Навигационная карта 
