Как в html вставить картинку: Как добавить картинку на веб-страницу? — GnomesMonetiZed.RU — Экономическая онлайн игра Золото лепреконов

Содержание

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

Сегодня любой сайт имеет, как минимум несколько картинок для успешного оформления дизайна. Рассмотрим способ вставки картинок через html код.

Если сразу приступить к решению вопроса, то вам потребуется тег img с атрибутом src, в который вставляется ссылка на картинку. Пример:

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

В этом случае можно использовать тег alt, он покажет текст в том месте где должна была быть картинка, если ее не существует. Например:

Если вы хотите грузить картинки со своего сайта, то сначала загрузите их в директорию на сайте.

Например в /images/ В этом случае картинки можно задавать с относительным путем:

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

Также помните, что любая картинка может иметь полезные css свойства, например:

— задаст ширину картинке в 150px, а высота будет автоподгоняться.

Некторые другие css свойства, которые могут вам пригодиться:

border: 5px solid #0058d9; — синяя рамка в 5px
border-radius: 15px; — скругление углов картинки
float:right; — размещаем картинку справа, например, относительно текста
opacity: 0.7; — прозрачность картинки (сейчас 70%)

Помните, что для установки картинок лучшим вариантом является jpg и png формат. Не грузите картинки слишком большого объема, иначе они будут долго загружаться (не больше 500кБ). Используйте относительные пути в картинках.

Как вставить картинку в HTML

В данной статье рассмотрим, как вставить картинку в HTML.

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

Вначале давайте рассмотрим форматы графических файлов, которые можно использовать для оформления веб-страниц. Это файлы в формате PNG, GIF и JPEG/JPG. Если говорить о преимуществе какого-либо формата для сайта, то конечно, нужно соотносить три критерия – качество, размер, возможности.

Например JPEG картинка меньше весит, чем картинка GIF того же размера, но зато в GIF присутствует поддержка мультипликации и прозрачной графики, чего нет в JPEG. Формат PNG-8 весит гораздо меньше, чем GIF, но при этом тоже поддерживает прозрачность. Вот потому для меня он предпочтительней, чем другие и чаще всего для оформления веб-страниц я использую изображения в формате PNG-8.

Вставляем картинку в HTML

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

1. Для вывода изображения в HTML используется тег <img>. Атрибут <src> данного тега — задает путь к картинке.

2. Обязательный атрибут <alt> тега <img> служит для описания картинки – это альтернативный текст, который выводится в браузере вместо изображения, если картинка не загрузилась или показ изображений в браузере отключен пользователем.

3. Универсальный атрибут <border> определяет стиль, цвет и толщину границы элемента. Для того чтобы вокруг изображения не появилась рамка, сразу установим нулевое значение.

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

Полный URL-адрес указывается, если вы использует картинку с другого сайта.

Пример:

В HTML4, HTML5

В XHTML

Дополнительно можно использовать такие атрибуты как align – выравнивание картинки, width – ширина картинки, height – высота картинки и др.

Однако, для оформления стилей картинок, вставленных в статью, лучше использовать CSS, в частности – стилевые классы.

В CSS, для стилизации изображений, чаще всего используются следующие свойства:

float — выравнивает изображение, прижимая его к левому или правому краю веб-страницы, с обтеканием его другими элементами по свободной стороне;

border – определяет границ изображения: цвета, стиля, толщины линий каждой из сторон изображения;

padding – устанавливает значение полей вокруг содержимого элемента (часто используется для обрамления картинок с целью отделения их друг от друга).

margin – устанавливает величину отступа от каждого края элемента (добавляет отступ картинке от текста).

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

Картинки в HTML|Изучение html и css

Поверьте, это совсем не сложно. Для вставки картинок используется непарный тэг <img> с атрибутом src. Выглядит это так <img src=»my foto.jpg»>. Где «my foto.jpg»> это ваша картинка. Для того чтобы было меньше путаницы, я рекомендую в каталоге, где расположена стартовая страница, создавать папки по назначению. Например, для картинок создайте папку image и складывайте туда все изображения, которые будут использоваться у вас на сайте. Тогда для того, чтобы вставить картинку на страницу, вы должны указать путь к этому изображению. Если у вас оно расположена в папке

image то нужно прописать так: <img src=»image/my foto. jpg»>. Если папка расположена на уровень вверх, то путь к ней будет выглядеть следующим образом: <img src=»../image/my foto.jpg»>. Ну, а сейчас выведем изображение чайника.

<img src=»image/2_buy.jpg»>

Тэг <img> также имеет атрибут выравнивания align со значениями left-слева, right-справа. Это означает, что при использовании значения

left атрибута align картинка будет прижата к левому краю, а текст будет обтекать картинку справа и, наоборот, при использовании значения right.

Существует еще несколько атрибутов, которые располагают текст в определенную позицию относительно картинки.

bottom — располагает текст снизу картинки

middle — располагает текст посередине картинки

top — располагает текст вверху картинки

Одновременно с атрибутом align могут быть вставлены следующие атрибуты:

vspace=»15″ — задает расстояние между текстом и рисунком (по вертикали) в пикселах;

hspace=»40″ — задает расстояние между текстом и рисунком (по горизонтали) в пикселах;

alt=»Продвинутый чайник» — краткое описание картинки.

Если по какой-то причине пользователь отключит загрузку картинок, то при использовании этого атрибута на месте картинки будет выводиться ее краткое описание;

title=»Продвинутый чайник» — описание картинки. То же самое, что и предыдущий пункт, но описание будет выводиться только при наведении курсора на картинку;

width=»100″ — ширина картинки в пикселах;

height=»100″ — высота картинки в пикселах. Если не задать высоту и ширину изображения, картинка будет выводиться с реальными размерами, что не всегда удобно;

border=»3″ — рамка вокруг картинки. Рамка присутствует всегда по умолчанию и если она не нужна, то необходимо значение этого атрибута определять как «0«.

bordercolor=»#xxxxxx» — цвет рамки вокруг картинки.

Теперь поэкспериментируем с картинками. Возьмем предыдущий пример или создадим новый. Если Вы будете создавать новый документ, не забудьте написать «шапку» из обязательных тэгов. Итак:

…
<body bgcolor=»#E6E6FA» text=»Blue»>
<h2 align=»center»>Проба пера</h2>
<hr size=2 width=100% color=»#9400D3″>
<img src=»../../image/d0d6a385.jpg»><!—Здесь указываете путь к вашей картинке—>
 Футбол  — это коллективная игра с мячом, целью которой является забить на один мяч больше в ворота соперника любой частью тела, кроме рук. Игра руками считается фолом и наказывается штрафным ударом, а преднамеренная игра рукой приводит и к наказанию желтой или даже красной карточкой. 
…

<!—Если вы посмотрите на результат, то он вам может не понравиться, потому что текст прижат к рисунку, да и картинка может быть великовата.—>

Теперь добавим в тэг <img> размеры картинки и расстояние от нее до текста.

 
<img src=»../../image/d0d6a385.jpg» hspace=»30″ vspace=»5″<!—Синим цветом указаны изменения—>
 Футбол  — это коллективная игра с мячом, целью которой является забить на один мяч больше в ворота соперника любой частью тела, кроме рук. Игра руками считается фолом и наказывается штрафным ударом, а преднамеренная игра рукой приводит и к наказанию желтой или даже красной карточкой. 

У Вас должно получится так.

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

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

Да, чуть не забыл. Картинку можно сделать фоном странички. Для этого используется атрибут background с указанием пути к картинке в тэге <body>. Выглядеть это будет так:

<body background=»image/fon.jpg»>,

где image/fon.jpg — путь к картинке.

Наряду со вставкой картинки в виде фона используйте атрибут bgcolor=»#хххххх» для задания цвета фона. Если не задавать цвет фона, то по умолчанию фон будет иметь белый цвет. И если Вы используете белый цвет шрифта, а картинку пользователь не захочет загружать, то он не увидит вашего текста. А так, если картинка не будет, по каким-либо причинам, загружена, то текст все равно будет виден.

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

В следующей главе мы рассмотрим использование ссылок в HTML-документе.

Как вставить картинку в HTML | 1

Для вставки изображения на web страницу, необходимо применять тег <img>, котрый не является парным тегом (отсуствует само тело тега), главным его атрибутом служит атрибут src, с помощью которого и определяется источник изображения (url путь к изображению, которое необходимо становить на страницу).

Выглядит его констурукция следующим образом

<img src="URL"/>

Графические файлы, которые мы добавить на нашу страницу, могут иметь формат GIF, PNG, или JPEG.

<img src="Cat. jpg" alt="Танцующий кот"> 
<img src="Cat.png" alt="Гарфилд на прозрачном фоне"> 
<img src="Cat.gif" alt="Бегущий кот">

Альтернативный текст, атрибут alt у изображений

Так-же для тега <img>, необходимо указывать обязательный атрибут alt — он должен содержать в себе альтернативный текст, который мог бы описать содержимое граического файла, он будет отображаться в том случае, если картинка не смогла загрузиться, либо загрузка изображений отключена в браузере (более редкий случай).

<img src="http://brainoteka.com/Content/asp-couse.jpg" alt="Введение в ASP.NET">

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

Размеры изображения

Вы можете регулировать размеры изображения с помощью атрибутов width и height.

<img src="Cat.jpg" alt="Танцующий кот">

Но этого делать не рекомендуется, для этих операций более рационально, использовать стили CSS

Для более детального изучения можно просмотреть уроки из курсов

Введение в HTML

HTML5 и CSS3 с нуля

Изображение на сайт.

Урок 14.

Изображения (картинки) добавляются на сайт при помощи тега &ltimg&gt. Внимание! Данный тег не требует закрытия. Тег &ltimg&gt должен иметь обязательный атрибут src в значении которого указывается путь к картинке. Путь к картинке можно указывать как абсолютный, так и относительный.
Примеры написания тега &ltimg&gt:

Пояснения к коду:
1) Чтобы добавить изображение на страницу сайта, нужно сначала это изображение (картинку) добавить в папку сайта, или как в нашем случае, в папку в которой мы создаем сайт. Как правило, для изображений в основной папке сайта создается отдельная папка. Если ориентироваться на код написанный в примере, то папка с картинками называется image.
2) .jpg — это графический формат нашего файла. Он должен указываться обязательно. Чаще всего используется формат jpg, в html можно так же применять изображения формата png и gif.

Основные атрибуты тега &ltimg&gt.

src — является обязательным атрибутом, он используется для указания пути к изображению. О нем мы уже говорили.
alt — с помощью этого атрибута указывается альтернативный текст для картинки. Например если у посетителя находящегося на вашем сайте будет плохой сигнал, либо вовсе пропадет интернет, то вместо вашего изображения он увидит пустой квадрат, а в этом квадрате будет текст, который вы пропишите в атрибуте alt.
width — атрибут служит для указания ширины картинки в пикселях.
height — атрибут служит для указания высоты картинки в пикселях.

* Атрибуты width и height не являются обязательными. Если их не указывать, то картинка добавится в своем изначальном размере. Например вы загрузили в папку сайта картинку размером 200px в ширину и 100px в высоту. Именно в таком размере она у Вас появится на странице, если не прописать атрибуты width и height.

Можно прописывать только один из этих атрибутов. Например, изначально картинка находящихся в папке нашего сайта имеет размер 200px в ширину и 100px в высоту. Мы указываем только атрибут width (ширину) и даем ему значение 100px (в два раза меньше, чем изначальная ширина картинки). В этом случае и высота картинки автоматически станет в два раза меньше, то есть 50px. Вывод: если задавать только один параметр (высоту или ширину), то второй параметр меняется автоматически, сохраняя при этом пропорции изначального размера картинки.

Еще один важный момент по поводу ширины и высоты. Если изначальные размеры картинки 200px в ширину и 100px в высоту, а Вы прописали атрибуты width=»100px» и height =»100px», то ваша картинка сплющится и станет уродливой. Не забывайте про изначальный размер картинки и сохраняйте пропорции! Самый простой способ сохранить пропорции изначального размера картинки — это указывать только один из параметров, либо width, либо height.

Добавляем картинки на наш сайт.

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

На данный момент у нас в папке «Сайт» находится 4 html файла и одна папка «image» в которой в свою очередь находятся 4 картинки с именами audi.jpg, bmw.jpg, mercedes.jpg, vsemarki.jpg.
Теперь давайте в каждую из наших страниц html мы добавим соответствующее изображение. Я продемонстрирую Вам получившийся код на примере файла audi. html:

Пояснения к коду:
1) Для того, чтобы между нашими ссылками и картинкой было расстояние, я прописал тег &ltbr&gt 2 раза, это значит, что между нашими ссылками и картинкой будет расстояние в две пустых строки.
2) Затем идет тег &ltimg&gt который создает изображение на нашей странице. В значении атрибута src прописан относительный путь к картинке. Наше изображение находится в папке «image», по этому путь к картинке относительно audi.html будет «image/audi.jpg».
3) В атрибуте alt прописано значение «Автомобиль Audi», это значит, что если у посетителя сайта пропадет связь с интернетом и картинка не успеет загрузиться, то вместо изображения будет надпись «Автомобиль Audi».
4) В атрибуте width прописано значение «300px», это значит, что ширина нашей картинки будет 300px. Изначальный размер картинки audi.jpg загруженной в папку «image» составляет 600px в ширину и 400px в высоту. Задав изображению атрибут width (ширину) со значением «300px», мы уменьшаем размер картинки в два раза относительно изначального размера. Размер изображения выводимого на нашей странице будет 300px в ширину и 200px в высоту.

Сейчас предлагаю Вам самостоятельно вставить изображения в другие наши html файлы, а именно в bmw.html, mercedes.html и в index.html. Это конечно логично, но все же поясню, в index.html мы вставляем картинку vsemarki.jpg.

Если Вы все сделали правильно, то у Вас должны получиться четыре страницы, как на рисунке. Кликая на ссылки, будет меняться страница и соответственно будет меняться фотография и заголовок.

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

Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]