Как вставить картинку в html в блокноте


За вставку картинок в HTML-документ отвечает тег <img> и его атрибуты, главным из которых можно считать src, задающий адрес изображения. Он является обязательным, так как если не указать, где взять рисунок, браузер не сможет узнать, что именно добавлять на страницу.

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

Раньше у тега <img> был ещё один обязательный атрибут — alt, но с приходом HTML 5 он был переведён в разряд желательных. alt устанавливает текст, который пользователь увидит вместо картинки, если она вдруг не загрузится. Этот атрибут рекомендуют добавлять и некоторые оптимизаторы, потому как считается, что это положительно сказывается на продвижении в поисковиках.

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


Допустим, нам требуется добавить на страницу изображение image.png с альтернативным текстом «Просто картинка», шириной 420 и длиной 280 пикселей. Код в таком случае будет следующим:

Навигационная карта

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

Для создания карты изображения (именно так называется описанная возможность) понадобятся следующие теги и атрибуты:

  • <map> — контейнер, внутри которого описывается карта изображения.
  • <area> — тег внутри <map>, описывающий одну область картинки. На сколько активных областей планируется разделить изображение, столько элементов <area> и придётся поставить. Связка <map><area> работает точно так же, как связки <ol><li> и <ul><li>, создающие списки.

  • shape — атрибут тега <area>, задающий форму ссылки. Активная область может иметь форму прямоугольника, многоугольника или круга.
  • cords — определяющий координаты области атрибут. Также принадлежит тегу <area>. Для прямоугольника указываются координаты левого верхнего и правого нижнего углов, для многоугольника — координаты вершин, определяя круг, необходимо задать координаты его центра и радиус.
  • usemap — атрибут тега img, который связывает изображение с картой. Благодаря ему браузер понимает, что в контейнере <map> описана карта именно этого рисунка.

Пример карты изображения

Чтобы было понятно, как всем вышеперечисленным пользоваться, приведу элементарный пример. Есть рисунок map.jpg. Его нужно разделить на две активные области. Щелчок на верхней части (зелёный цвет) откроет сайт «Одноклассники», нижняя же часть (синий цвет) будет вести на «ВКонтакте». Ссылки должны открываться в новой вкладке. Для создания карты выполняем следующие шаги.

1. Вставляем изображение на страницу и привязываем его к будущей карте (она будет называться social), для чего пишем следующий код:


2. Определяем на картинке будущие активные области и соответствующие им координаты. Это можно сделать в Paint, Photoshop или любом другом графическом редакторе. В нашем случае всё элементарно: прямоугольники равны и по высоте (114 пикселей) и по ширине (384 пикселя).

3. Начинаем создавать карту: открываем тег

и прописываем в атрибуте name её название, которое обязательно должно совпадать со значением свойства usemap самой картинки:

4. С помощью тегов area определяем активные области:

5. Закрываем карту:

Итогом работы стала картинка, щелчок на разных частях которой ведёт к открытию разных социальных сетей, и вот такой HTMLкод:

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

www.seostop.ru

Цитата сообщения Inmira Блокнот (notepad).

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


<?xml version=»1.0″ encoding=»utf-8″ standalone=»yes»?>
<images>
<pic>
<image>ССЫЛКА</image>
</pic>
<pic>
<image>ССЫЛКА</image>
</pic>
<pic>
<image>ССЫЛКА</image>
</pic>
<pic>
<image>ССЫЛКА</image>
</pic>
</images>

Т.е. надо перенести в блокнот верхнюю и нижнюю часть кода (красный маркер), а каждая ссылка должна вписаться в:
<pic><image>ССЫЛКА</image></pic>(синий маркер):
notepad

Где вместо слова «ССЫЛКА» будут стоять ссылки на разные картинки.

Блокнот нам поможет сделать все это максимально быстро.
Итак идем в Пуск > Все программы > Стандартные >Блокнот. P.S. Иногда (если Вы им часто пользуетесь) Блокнот «лежит» сразу в Пуске.
блокнот

Открылся блокнот. Сразу скопируем и вставим в блокнот самую верхнюю часть кода —
<?xml version=»1.0″ encoding=»utf-8″ standalone=»yes»?>
<images>


стандартный блокнот

Теперь копируем и вставляем все наши ссылки:
стандартный блокнот

Под ссылками вставляем завершающую часть кода — </images>:
notepad

Нам осталось каждую ссылку «обрамить» кодом: <pic><image>ССЫЛКА</image></pic>
Все наши ссылки начинаются с http. Это мы и используем Как вставить картинку в html в блокноте.
Идем в Правка > Заменить:
блокнот

В открывшемся окошке вписываем в верхней строке: http , а в нижней строке все, что должно стоять перед http и сам http (а то он у нас исчезнет совсем). Вписываем только теги, стоящие перед каждым словом «ССЫЛКА» — эти: <pic><image> и http. (их надо вписать одной строкой, как у меня <pic><image>http). И жмем кнопку «Заменить все»:


стандартный блокнот

Как видим, у нас все заменилось :-), жмем «ОК» в окошке:
блокнот

По аналогии заменим jpg на jpg</image></pic>:
notepad

Все, плейлист у нас готов. Жмем ОК в окошке, и можем его использовать без всяких доработок 🙂 (середину я вырезала , чтоб скрин поменьше, но все понятно. Все ссылки у нас «обрамились» требуемым кодом:
блокнот

Собственно для плейлистов, надеюсь, нам эта функция блокнота в ближайшем будущем не понадобится, т.к. Как вставить картинку в html в блокнотеLegionary планирует сделать флешку, которая сама будет генерировать код. Но эта функция часто оказывается нужна, для замены, допустим цвета текста в текстарееКак вставить картинку в html в блокноте ) Когда этих текстарей много — замучаешься их выискивать в коде). А так — скопировал код, вставил в блокнот, жмешь заменить.. и все 🙂

www.liveinternet.ru

Как вставить изображения


Поместите любые изображения в ту же папку, где находятся две учебные html-страницы. Саму папку можно назвать, ну скажем Site1. Измените названия файлов изображений на img1, img2, img3, как на скриншоте. Либо измените в нашем коде эти названия на названия ваших изображений, а если нужно, то поменяйте и расширения (формат файлов). У меня это картинки 3D человечков, в формате .jpg:

вставка изображений

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

Если ваши изображения поместить в отдельную папку, например, с названием «papka», то путь к ней (значение обязательного атрибута scr) будет выглядеть так: <img scr="papka/img1.jpg">. Если ваши изображения не отображаются в браузере, то причин всего две: указан неправильный путь к файлу или опечатка. Вы уже заметили, что элемент Img не имеет закрывающего тега. Разберем другие примененные атрибуты тега Img.


Во втором изображении img2.jpg: атрибут alt — в качестве значения используется текст, который виден, если браузер, по каким-либо причинам, не смог отобразить изображение. Рекомендуется использовать атрибут alt, прописывая в нем ключевые слова. Третье изображение помещено в тег P, а его расположение справа от текста абзаца определено значением «right» атрибута align, служащего для выравнивания картинки.

Стоит, еще отметить, что кроме формата jpg в веб-графике применяются форматы gif и png. Желательно научиться оптимизировать изображения для веб и пользоваться программой Photoshop. Оптимизированные, более «легкие по весу» изображения, меньше тормозят загрузку страниц в браузере.

Кстати, вы видите отступы (разное количество пробелов) в начале каждой строки кода — их делать не обязательно. Это делается для зрительного удобства, чтобы вебмастеру было проще редактировать документ в будущем. Но если не делать много пропусков, не оставлять пустых строк — html-страница будет меньше по размеру.

webmastersam.ru

Путь к файлу

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


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

делается это так:

<img src=»foto.jpg»>

Где foto.jpg это название Вашей фотографии в данном случае, так как фото лежит рядом с html документом, путь к ней мы не указываем.

Да, помните, тег <img> не требует закрывающего тега!

Теперь приведу ряд примеров где путь указывается:

<img src=»myfoto/foto.jpg»> — Такая запись подразумевает, что в директории где расположен наш html документ есть папка myfoto в которой расположен файл foto.jpg
<img src=»myfoto/graphics/foto.jpg»> — Значит рядом с документом расположена папка myfoto, в ней еще одна папка с названием graphics, и уже в ней нужная нам фотография foto.jpg которую нужно выложить для всеобщего обозрения.
<img src=»../foto.jpg»> — А это значит, что фото размещено на уровень выше от документа
<img src=»../../foto.jpg»> — Так соответственно на два уровня выше, сколько поставите../ настолько и поднимитесь.

Так же можно указывая место фотографии, ссылаться на тот или иной интернет ресурс
<img src=»http://www.site.ru/foto/foto.jpg»>

Ну что, давайте попробуем выложить фото.

Вот мой пример:

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

Атрибуты тега <img>


Поговорим о расположении изображений относительно текста.

Как и другие теги <img> тоже имеет свои атрибуты.. уже знакомый нам атрибут align «выравнивание» применим и к данному тегу

<img src=»foto.jpg» align=»left»> — фото слева от текста
<img src=»foto.jpg» align=»right»> — фото справа от текста
<img src=»foto.jpg» align=»top»> — текст выше фото
<img src=»foto.jpg» align=»bottom»> — текст ниже фото
<img src=»foto.jpg» align=»middle»> — ну и соответственно текст посередине

Помимо align тег <img> имеет еще ряд атрибутов, но сначала расскажу немного о пикселях. Пиксель (точка), наверное Вы не раз слышали это слово и думаю основная масса народа которая держала мышку в руках знает что это такое, но всё же.. Пиксель -это элементарная неделимая единица изображения. Каждый пиксель имеет свои координаты, например, самый верхний левый пиксель на мониторе имеет координаты x=1, y=1, а самый нижний правый в зависимости от разрешения монитора.. x=800, y=600 — будет соответственно при разрешении 800 на 600 точек. Впрочем, эта информация пригодится нам потом, а сейчас нужно усвоить, что все расстояния в графических изображениях меряются пикселями.. так картинка длинной 800 пикселей и шириной в 600 пикселей при указанном разрешении заполнит весь экран.

Теперь продолжим..

<img src=»foto.jpg» vspace=»15″> — Атрибут vspace задаёт расстояние по вертикали от рисунка до текста, в данном случае мы задали расстояние в 15 пикселей
<img src=»foto.jpg» hspace=»25″> — Расстояние по горизонтали соответственно
<img src=»foto.jpg» width=»180″> — Ширина непосредственно самого изображения
<img src=»foto.jpg» height=»240″> — Высота изображения. Если атрибуты width и height не использовать, то ширина и высота изображения по умолчанию будет равна реальным её размерам, без каких либо искажений.
<img src=»foto.jpg» border=»5″>— Бордюр, рамка вокруг изображения и её толщина в пикселях.
<img src=»foto.jpg» border=»5″ bordercolor=»#008000 «> — bordercolor — это цвет рамки.
<img src=»foto.jpg» alt=»Это моя фотка!!!»> -Атрибут alt — это описание изображения. Если навести курсор на наше фото и подержать его там несколько секунд, выскочит надпись -Это моя фотка!!!
<img src=»foto.jpg» title=»Это моя фотка!!!»> — альтернатива alt в данном случае.

А еще изображение можно сделать фоном страницы.. для этого используем атрибут background «фон» открывающего тега <body>

Вот так:

<body background=»foto.jpg»>

Выравнивание рисунка.

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

Пример:

Советую Вам самостоятельно поупражняется с размещением фотографии на своей странице. Меняйте размеры, положения, используйте различные сочетания с текстом, отступы, рамки.. Тренируйтесь!

Итог главы:

Единственное, что Вам в этом примере не знакомо так это надпись — &nbsp; — это есть так называемый спецсимвол в данном случае — пробел.. о спецсимволах и их назначении я расскажу более подробно в отдельной главе.

Честно говоря, мне мой пример не сильно по вкусу, неряшливо как-то.. Но цель показать, что можно делать с изображениями думаю достигнута..

Полезные советы:

  • Используя графику, будьте осторожны.. не стоит размещать на своей странице большие весом мегабайтные изображения, пожалейте время и деньги посетителей страницы. Большой объём графики при низкой скорости интернета может привести к тому, что посетитель закроет Вашу страницу ещё до того момента как она загрузится.

  • Помните, что есть пользователи, которые умышленно в своём браузере отключают загрузку рисунков, дабы сэкономить на трафике, а по сему рекомендую соблюдать следующие советы:

  • Если рисунки выполняют роль кнопок (см. глава ссылки), обязательно подписывайте их (атрибут alt) к примеру: «Перейти на главную страницу» или «Скачать» дабы человек с отключенной графикой мог хоть как-то ориентироваться на Вашей странице.

  • Используя картинку в качестве фона документа дублируйте ёё заливкой фона каким либо подходящим для фона страницы цветом (атрибут bgcolor тега <body>)

    вот так например:

    <body bgcolor=»#008000″ background=»fon.jpg»>

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

www.webremeslo.ru

Атрибуты тега IMG

Для отображения картинки с помощью тега IMG используются следующие параметры:

  • width/height – указывает ширину/высоту изображения (в процентах или пикселях);
  • align – выравнивание картинки (right, left, center);
  • border – определяет толщину рамки вокруг рисунка (в пикселях). Если атрибут не задан явно, то используется значение по умолчанию (border=0);
  • hspace/vspace – указывает размер горизонтального/вертикального отступа от картинки до окружающего контента.

Рассмотрим теперь, как сделать картинку в html коде:

<img src="http://nubex.ru/img.png" width="640" height="480" align="center" border="3" hspace="10" vspace="10" />

Здесь размеры указаны в пикселях.

Адаптивные размеры картинки при помощи HTML

Если вы верстаете «резиновый» или «адаптивный» дизайн сайта, то в html код картинки стоит указывать размеры в процентах. Попробуйте создать HTML-страницу с указанным ниже кодом (предварительно поместив рядом с html-файлом картинку с именем “img.jpg”) и изменять размер окна браузера. Вы увидите, что размер картинки будет изменяться в зависимости от размера окна.

<html>   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Как вставить картинку на HTML-страницу</title>   </head>   <body>   <p>Абзац 1</p>  <img src="img.jpg" width="30%" align="center" border="3" hspace="10%" vspace="10%" />  <p>Абзац 2</p>   </body>  </html>

В конструкторе сайтов «Нубекс» добавить картинку можно при помощи средств редактора. Более подробно об этом вы сможете узнать из статьи: Как добавить в текст изображение

nubex.ru

Комментарий добавил(а): Денс
Дата: 2011-03-19

Вот этот сайт http://londonisdream.ucoz.ru/.Вот Html код этой страници <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <title>$SITE_NAME$ — $MODULE_NAME$</title> <?$META_DESCRIPTION$?> <link type="text/css" rel="StyleSheet" href="/.s/src/css/823.css" /> </head> <body> $ADMIN_BAR$ <div id="wrap"> <div id="contanier"> <table class="main-table"> <tr> <td class="data-block">$WDAY$<br>$DATE$<br>$TIME$</td> <td class="login-block"><?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><!—<s5200>—>Вы вошли как<!—</s>—> <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> | <!—<s3167>—>Группа<!—</s>—> "<u>$USER_GROUP$</u>"<?else?><!—<s5212>—>Приветствую Вас<!—</s>—> <b>$USERNAME$</b><?endif?><br><?endif?><a href="$HOME_PAGE_LINK$"><!—<s5176>—>Главная<!—</s>—></a><?if($USER_LOGGED_IN$)?> | <a href="$PERSONAL_PAGE_LINK$"><!—<s5214>—>Мой профиль<!—</s>—></a><?else?> | <a href="$REGISTER_LINK$"><!—<s3089>—>Регистрация<!—</s>—></a><?endif?> <?if($USER_LOGGED_IN$)?> | <a href="$LOGOUT_LINK$"><!—<s5164>—>Выход<!—</s>—></a><?else?> | <a href="$LOGIN_LINK$"><!—<s3087>—>Вход<!—</s>—></a><?endif?> <?if($RSS_LINK$)?>| <a href="$RSS_LINK$">RSS</a><?endif?></td> </tr> <tr> <td class="side-block"> <body bgcolor="#000000" background= " http://www.rumb.ru/files/articles/685_london_nochju.jpg"></body> <!— <sblock_menu> —> <?if($SMENU_1$)?> <table class="boxTable"><tr><td class="boxContent"><!— <bc> —>$SMENU_1$<!— </bc> —></td></tr></table> <?endif?> <!— </sblock_menu> —> $GLOBAL_CLEFTER$ </td> <td class="content-block"> <h1 class="logo"><!— <logo> —>Мой сайт<!— </logo> —></h1> <div class="text-block"> <!— <middle> —> <?if($MODULE_NAME$)?><h1 class="module-name">$MODULE_NAME$</h1><?endif?><!— <body> —>$CONTENT$<!— </body> —> <!— </middle> —> </div> </td> </tr> </table> $GLOBAL_BFOOTER$ </div> </div> </body> </html>

www.uzeron.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Используйте при сохранении рисунков компактные форматы растровой графики типа 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 показывается во всплывающей строке, если пользователь подведет мышь к рисунку. Оба этих атрибута (если вы их прописали) позволяют включить изображения вашего веб-проекта в поиск по изображениям Яндекс и Google Images. Поэтому не стоит пренебрегать этой возможностью и в обязательном порядке прописывать хотя бы Alt. Оформление ваших изображений должно быть примерно таким:

<Img src="https://ktonanovenkogo.ru/image/finik.jpg" Width="200" Height="150" Alt="Здесь нужно прописать ключевые слова, с помощью которых вы хотите привлечь целевых посетителей на ваш сайт с поиска по картинкам" Title=" Здесь нужно прописать ключевые слова, с помощью которых вы хотите привлечь целевых посетителей на ваш сайт с поиска по картинкам ">

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

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

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

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

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

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

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

Пример:

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

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

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

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

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

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

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

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

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

<a href="https://ktonanovenkogo.ru" Target="_blank"><Img src="https://ktonanovenkogo.ru/image/finik.jpg" Width="200" Height="150"> </a>

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

<a href="https://ktonanovenkogo.ru" Title="Анкор" Target="_blank"><Img src="https://ktonanovenkogo.ru/image/finik.jpg" Width="200" Height="150"> </a>

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

<a href="https://ktonanovenkogo.ru" title="Анкор " Target="_blank" >Здесь нужно прописать ключевые слова, по которым вы хотите продвинуть статью, на которую ведет эта гиперссылка </a>

Здесь …

ktonanovenkogo.ru

Форматы графических изображений.

Существует множество различных графических форматов, но браузеры поддерживают лишь несколько. Рассмотрим три из них.

1. Формат JPEG (Joint Photographic Experts Group). Довольно популярный формат, применяемый для хранения изображений. Поддерживает 24-битовый цвет и сохраняет все полутона в фотографиях неизменными.  Но jpeg не поддерживает прозрачность и искажает мелкие детали и текст в изображениях. JPEG используется в основном для хранения фотографий. Файлы этого формата имеют расширения jpg, jpe, jpeg.

2. Формат GIF (Graphics Interchange Format). Главное достоинство этого формата возможность хранить сразу несколько изображений в одном файле. Это позволяет создавать целый анимированные ролики. Во-вторых он поддерживает прозрачность. Главный недостаток это поддержка всего лишь 256-цветов, что никуда не годится для хранения фотографий. GIF в основном используется для хранения логотипов, баннеров, изображения с прозрачными участками и содержащих текст. Файлы этого формата имеют расширение gif.

3. Формат PNG (Portable Network Graphics). Это формат был разработан как замена устаревшему GIF, а также, в некоторой степени, JPEG. Поддерживает прозрачность, но не позволяет создавать анимацию. Данный формат имеет расширение png.

При создании сайтов обычно используют изображения в формате JPEG или GIF, но иногда используют PNG. Главное разобраться в каких случаях какой формат лучше использовать. Если кратко, то:

  • GIF используется в основном для анимации;
  • PNG — формат для всего остального (иконки, кнопки и др.).

Вставка картинок в html страницы

Итак, как все таки вставить изображение на веб-страницу? Вставить изображение позволяет одинарный тег <img>. Браузер помещает изображение в том месте веб-страницы, где встретит тег <img>.

Код вставки картинки в html страницу имеет такой вид:

<img src=»image.jpg»>

Данный html-код поместит на веб-страницу изображение, хранящееся в файле image.jpg, который находится в одной и той же папке с веб-страницей. Как вы могли заметить адрес картинки указывается в атрибуте src. Что такое атрибут html-тега я уже рассказывал. Так вот, атрибут src обязательный атрибут, который служит для указания адреса файла с изображением. Без атрибута src тег img не имеет смысла.

Приведу еще несколько примеров указания адреса файла с изображением:

<img src=»/images/image.jpg»> — этот html-код вставит на страницу картинку с названием image.jpg, которая хранится в папке images, расположенной в корне веб-сайта.

В атрибуте src можно указывать не только относительные ссылки на изображения. Так как изображения хранятся в сети вместе с html-страницами, поэтому у каждого файла с изображением есть свой собственный url-адрес. Поэтому в атрибут src можно вставлять url-адрес изображения. Например:

<img src=»http://mysite.ru/images/image.jpg»>

Данный код вставит на страницу изображение с сайта mysite.ru. URL-aдpec обычно применяется, если вы указываете на изображение, находящееся на другом сайте. Для изображений хранящихся на вашем сайте лучше использовать относительные ссылки.

Тег <img> является строчным элементом, поэтому его лучше помещать внутрь блочного элемента, например внутрь тега <p> — абзац:

<p><img src=»/images/image.jpg»></p>

Давайте попрактикуемся и вставим на нашу страницу из предыдущих статей об html изображение. Я создам рядом с html-файлом своей страницы папку «images» и помещу туда файл с картинкой «bmw.jpg», который выглядит так:

автомобиль

Тогда html-код страницы со вставленной картинкой будет таким:

<!doctype html>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Сайт об автомобилях.</title>
</head>
<body>
<h1>Сайт об автомобилях.</h1>
<p><img src=»/images/bmw.jpg»></p>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
<p>Научным языком <strong>автомобиль</strong> это:</p>
<p><em>Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами</em>.</p>
<hr>
<h2>Классификация автомобилей</h2>
<p>Автомобили бывают следующих типов:</p>
<ul>
<li>Легковой;</li>
<li>Грузовой;</li>
<li>Внедорожник;</li>
<li>Багги;</li>
<li>Пикап;</li>
<li>Спортивный;</li>
<li>Гоночный.</li>
</ul>
<p>Все права защищены. &copy; 2010 год.<br>Сайт об автомобилях.</p>
</body>
</html>

И смотрим результат отображения в браузере:

как вставить изображение в html

Как мы видим ничего сложного в размещении изображений на веб-страницах нет. Далее рассмотрим несколько других важных атрибутов тега <img>.

Атрибут alt — как запасной вариант

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

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

<p><img src=»image.gif» alt=»здесь должна быть картинка»></p>

И примерно так это выглядит:

атрибут alt

Задаем размеры изображению

 Осталось еще пару атрибутов тега img, о которых вам следует знать. Это пара атрибутов width и height. Вы можете использовать их, чтобы указать размеры изображения:

<p><img src=»image.jpg» width=»300″ height=»200″></p>

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

На этом о вставке изображений на страницы пока все, далее рассмотрим как вставить аудио или видео на сайт…

Вставляем видео и аудио  с помощью HTML 5

В новой спецификации html5 появилось несколько новых тегов с помощью которых можно очень легко вставлять файлы мультимедиа. Это прежде всего касается видео и аудио.

Для вставки аудио HTML5 предоставляет парный тег <AUDIO>. Адрес файла, в котором хранится аудиоролик, указывается с помощью уже знакомого нам атрибута src:

<audio src=»sound.wav»></audio>

Тег <audio> создает на странице блочный элемент. По умолчанию браузер не будет воспроизводит аудиоролик. Что бы он это сделал, в теге <audio> необходимо указать особый атрибут  autoplay. Особый, потому что он не имеет значения. Достаточно одного присутствия этого атрибута в теге, чтобы он начал действовать.

По умолчанию аудиоролик никак не отображается на web-странице. Но если в теге <audio> поставить атрибут без значения controls, браузер выведет в том месте веб-страницы, где проставлен тег <audio>, элементы управления воспроизведением аудиоролика. Они включают кнопку запуска и приостановки воспроизведения, шкалу воспроизведения и регулятор громкости:

<audio autoplay controls src=»sound.wav»></audio>

Для вставки видеоролика на веб-страницу предназначен парный тег <video>.  С этим тегом все тоже самое, что и с тегом <audio> — адрес видеофайла указывается с помощью атрибута src, а с помощью атрибутов autoplay и controls можно запустить автовоспроизведение ролика и вывести элементы управления воспроизведения видеоролика.

Больше рассказывать о вставке картинок и мультимедиа на html страницы особо нечего. Надеюсь на вопрос «Как вставить изображение в html страницу?» я вам ответил. поэтому просто подведу итоги :

  • с помощью атрибута alt тега <img> можно задавать текст замены на случай если изображение не загрузится;
  • с помощью атрибутов width и height можно задавать размеры изображения на веб-странице;
  • для вставки аудио и видео в html5 есть парные теги <audio> и <video> соответственно.

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

webcodius.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.