Добавление дополнительного изображения html. Задаем размеры изображению. Создание якорей и хеш-ссылок

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

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

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

на странице Атрибуты тега BODY я уже говорил, что картинки могут быть фоном html-страницы, а сейчас я вам расскажу, как эти же картинки можно использовать на более высоком уровне, нежели фон.

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

Если картинка и html-страница находятся в разных папках или каталогах, то надо написать путь к изображению относительно страницы. Например, наша html-страница находится в папке или каталоге news, в этом же каталоге или папке находится подкаталог (папка) pop, в котором и расположена наша картинка image.jpg, то для ее вставки надо писать так:

Кроме атрибута src у тега есть еще парочка необязательных, но важных атрибутов:

• width — ширина картинки (можно указывать пиксели или проценты);
• height — высота картинки (можно указывать пиксели или проценты).

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

Как я уже написал, размеры картинки можно указывать как в пикселах, так и в процентах. Приведу просто пример:

еще пример html-кода:

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

• left — картинка расположится слева, а текст, который рядом — справа;
• right — картинка расположится справа, а текст, который рядом — слева.

Приведу HTML-код:

Текст, радом с картинкой.

а браузер выведет следующее:

Текст, радом с картинкой.

HTML-код для значения right:

Текст, радом с картинкой.

на html-странице будет так:

Текст, рядом с картинкой.

Для того, чтобы текст не обтекал картинку, можно использовать ранее упомянутый тег BR на странице Форматирование текста в HTML. Кстате, тег BR имеет атрибут clear, со своими значениями значения:

• left — не обтекать текстом, который выровнем по левому краю;
• right — не обтекать текстом, который выровнем по правому краю;
• all — не обтекать текстом, который выровнем по левому и правому краям.

Без атрибута align текст обтекат по умолчанию справа картинки и почти вплотную. Если ты хочешь чтобы текст не обтукал вплотную картинку, можно использовать вот такие атрибуты:

• vspace — делает верхнее и нижнее поля в пикселях;
• hspace — делает боковые поля (слева и справа) в пикселях.

Приведу простой html-код на примере:

Вот такая красивая картинка.

Что получится по данному примеру попробуй посмотреть сам.

Вокруг картинки еще можно сжделать рамку с помощью атрибута border и указывать в пикселях её величину. Чем больше значение, тем больше рамка вокруг изображения. HTML-код будет таким:

на html-странице будет вот так:

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

Дата публикации: 15 мая, 2012

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

Вставка картинки в html с помощью тега

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

Самым главным атрибутом img тега является src (source) – путь до картинки. В нем вы записываете адрес, по которому расположено изображение. Его можно записать как абсолютный (сайт/images/images2/image.jpg ) или как относительный (images/images2/image.jpg ).

Оба эти пути ведут к одному и тому же файлу image.jpg , который лежит в папке image2. Та в свою очередь лежит в директории images, а та – в корневой папке. Если записывать все относительно, то при смене доменного имени у вашего сайта все останется работоспособным. Например, редактор wordpress по умолчанию вставляет абсолютные адреса. Но лично я домен менять не собираюсь и меня это устраивает.

Дополнительные атрибуты и оформление через css

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

• width и height – ширина и высота картинки. Ее можно задать в соответствующих атрибутах в теге img
• align – выравнивание картинки по отношению к тексту. По умолчанию выравнивается слева (left). Также можно поставить справа и по центру (right, center)
• alt – альтернативный текст, который выведется если у пользователя отключен показ картинок в браузере. Полезно его заполнять
• title – практически то же самое. Своего рода описание картинки, которое выведется при наведении курсора на нее
• vspace и hspace – вертикальный и горизонтальный отступ картинки от остального контента. Внимание! Атрибуты уже устарели и лучше эти отступы задавать через таблицу стилей
• class – стилевой класс, который привязывается к картинке и накладывает на нее какие-то стили

Вставляем такую милую картинку. Мне аж петь хочется, когда я на нее смотрю Здесь мы повесили на картинку класс preview и теперь с css через него можем обратиться к картинке.

Preview{ Padding: 20px; Margin: 10px; Border: 5px solid orange; Transform: skewX(10deg); box-shadow: 0 0 15px 10px purple }

Ну? Это явно покруче, чем оформить только средствами html?

Подведу итог

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

И наконец, в идеале все это должно прописываться через CSS. То есть не задавать размеры в атрибутах, а повесить на картинку дополнительный стилевой класс, который и будет определять размеры. То же самое с выравниванием, которое в css можно сделать с помощью свойства text-align , а также плавающих блоков float .

Я думаю, теперь вы имеете представление, как вставить в html картинку и нормально оформить ее. До встречи в следующих статьях.

Инструкция

Выбор формата для анимированного изображения осуществляйте исходя из собственных возможностей. Анимации форматов GIF и SVG можно создавать при помощи бесплатных программ (соответственно, GIMP и Inkscape), в то время, как для получения анимированного апплета формата SWF придется использовать платный программный пакет Adobe Flash (не путать с бесплатным проигрывателем Adobe Flash Player). Также учтите, что просмотр анимаций формата GIF возможен практически во всех браузеров, мобильных, формата SWF - только при установленном Flash Player, а формата SVG - только в современных браузерах, в основном, для настольных компьютеров.

Если вы не желаете создавать анимированную картинку самостоятельно, воспользуйтесь услугами одного из бесплатных банков таких изображений. Анимации формата GIF можно взять, например, на сайте AnimatedGifs, формата SWF - на сайте Free Flash Animations, а формата SVG - на сайте Wikimedia Commons в категории Animated SVG. При доведении изображений до всеобщего сведения соблюдайте условия лицензий.

Для помещения в веб-страницу анимированного изображения формата GIF используйте HTML-код, аналогичный тому, который используется для вставки статических изображений. Если картинка находится в той же папке сервера, что и HTML-файл, используйте такой код: . Если;t она расположена в другой папке того же сервера, или на другом сервере, видоизмените код следующим обрезом: . Файлы формата SVG вставляйте аналогичным образом, с той лишь разницей, что у них другое расширение: не gif, а svg.

Не пытайтесь осуществить вставку файла формата SWF при помощи тега img src. Для этого применяется тег embed, а код становится заметно более громоздким: , где animatedimage.swf - имя SWF-файла (или полный путь к нему), 320 - ширина, 240 - высота (эти числа можно менять по своему усмотрению).

Источники:

• Как поставить анимацию на аватарку вконтакте

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

Начинаем работу

Создавать анимацию можно в CorelDraw любой версии. Запускайте эту программу и открывайте в ней новый файл. Наберите в нем любое , к примеру – love. Для этого необходимо кликнуть по кнопке Text Tool на панели графики и установить курсор мыши непосредственно в поле . После этого нажимайте левую кнопку мыши и набирайте love.

Затем вам нужно преобразовать написанное вами слово в кривые. Для этого необходимо выбрать в меню пункт Convert To Curvers. Далее попробуйте поменять цвет надписи love. Выделите его, щелкните по окну заливки и выберите нужный вам цвет. Сделав это, нажмите на кнопку ОК.

Инструкция как создать GIF анимацию

Выбрав цвет, сделайте семь копий с данной надписи и расположите их горизонтально в одну линию. При этом разверните каждую копию со второй по восьмую с разницей в 45 градусов при помощи поля Angle of Rotation. Это поможет вам создать GIF анимацию с эффектом движения. После этого сохраняйте каждый в самостоятельный GIF- файл. Таким образом, вы получили восемь элементов будущей анимации в виде GIF- . Теперь вам останется соединить их воедино, в целостный анимированный объект.

Чтобы сделать GIF анимацию, используйте GIFCon32

Для продолжения разработки GIF-анимации запустите программу GIFCon32. Создайте в ней новый и добавьте в него модуль Image с помощью команды Insert-Image. После этого в появившемся окне выбирайте самый первый GIF-файл из восьми и кликните ОК. Затем устанавливайте переключатель на Use a local palette for this image. Точно таким способом добавляйте остальные 7 GIF- .

Чтобы сделать GIF анимацию, осталось совсем чуть-чуть. Перед модулем Image1 вставляйте модуль Control, выделив модуль Loop и выполнив команду Insert-Control. Затем таким же способом вставляйте 7 оставшихся модулей Control.

Приступив к редактированию свойств всех модулей Control, выделите один из них и выполните команду Blok-Edit. В новом окне нажмите на пункт Transparent color и кликните по цвету, который станет . Затем установите Background в строке Remove by, а в поле Delay поставьте величину 20. Нажимайте на ОК и повторите всю процедуру для всех оставшихся модулей Control.

Видео по теме

Вам понадобится

• - программа SwishMAX.

Инструкция

Запустите программу SwishMAX, чтобы сделать swf-анимацию . Например, вы можете сделать баннер с анимационным эффектом. В данном приложении содержится библиотека шаблонов, на их основе вы можете сделать баннер стандартных размеров. Для этого выберите меню File, щелкните по команде New From Template, из списка выберите шаблон Full Banner (468x60). Далее перейдите в окно Scene, во вкладку Movie, установите цвет фона – белый.

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

Впишите необходимый текст, подберите размер, цвет и тип шрифта, а также начертание. Щелкните на нем правой кнопкой мыши, чтобы выбрать эффект для баннера. Выберите эффект Surfin-Pass The Bucket из группы Looping Countinuously, он отобразится на шкале анимации.

Щелкните дважды по эффекту на шкале анимации, чтобы выполнить его настройку: измените скорость протекания, амплитуду движения эффекта, направление. В этом же окне можно просмотреть результат изменения настроек. Щелкните по кнопке More Options, чтобы получить доступ к детальным настройкам выбранного эффекта. Сохраните полученный файл, для этого перейдите в меню File, выберите команду Export, формат файла – Swf.

Выполните создание кнопки в формате Swf. Для этого новый документ, с помощью инструментов Rectangle, AutoShape либо Ellipse нарисуйте форму для кнопки. Далее добавьте поверх формы необходимый текст. Установите нужные настройки в окне Scene. Далее в окне Layout перейдите на вкладку Script, щелкните по кнопке Add Script, выберите команду Browser/Network, далее щелкните getURL(...).

В данном поле введите ссылку, которая будет открыта после того, как пользователь нажмет кнопку. Нажмите Enter. Для проверки ссылки щелкните по кнопке Play Movie, попробуйте нажать кнопку. Если открылся браузер и произошел переход по нужной ссылке, значит осталось сохранить кнопку в формате SWF.

Видео по теме

Источники:

• как создать баннер swf

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

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

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

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

1. Поскольку веб-страница загружается по сети, существенным фактором выступает размер ("вес") графического файла , встроенного в web-документ. Чем он меньше, тем быстрее отобразится изображение.

2. Довольно часто физические размеры изображения (ширину и высоту) необходимо ограничить (уменьшить) по ширине и высоте. Например, установить по ширине не более 700-800 пикселов. Иначе изображение целиком не поместится в окне браузера, и появятся полосы прокрутки.

Форматы графики для web-сайтов

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

Есть еще формат: PNG , который также поддерживается браузерами при добавлении изображений и существует в двух вариантах: PNG-8 и PNG-24 . Однако популярность формата PNG сильно уступает по признанию форматам GIF и JPEG .

Обычно для изображений (картинок) создают отдельную папку в корневом каталоге и в неё складывают все изображения для сайта. Иногда таких папок бывает несколько (если того требует структура сайта или Вам так проще ориентироваться). Эту папку чаще всего называют: img или images (изображения ). В коде web-страницы прописывают полный путь до графического файла (где лежит изображение), а также имя данного файла (картинки), который Вы хотите вставить в html-документ.

Пишем код для вставки картинки на web-страницу

Для вставки изображений в HTML документ используется конструкция, указанная в Листинг 8.1. Данный код вставляется в нужное место web-страницы (туда, где Вы хотите видеть картинку).

На нашей we-странице, посвященной автомобилям, я подготовил и вставил два изображения. Код вставки первого изображения Вы видите в Листинге 8.1.

Листинг 8.1.

Вот так будет выглядеть первое вставленное изображение на web-странице сайта:

А теперь прокоментирую подробнее то, что написано в Листинге 8.1.

Само изображение "вставляется" с помощью тега: img src . Полностью запись выглядит вот так: img src="img/mers1.jpg" , где "img/mers1.jpg" – указывает, что наша картинка лежит в папке: img , а имя графического файла (картинки): mers1.jpg .

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

Давайте рассмотрим дополнительные параметры:

border="0" – указывает, что рамки вокруг изображения нет, попробуйте поменять 0 на другое число, например на 1 , - соответствует толщине рамки вокруг изображения в 1 пиксель, 2 – соответствует толщине рамки вокруг изображения в два пикселя и т.д.

Важно! Если Вы планируете сделать изображение ссылкой, обязательно указывайте значение: border="0" .

width="400" – указывает, что ширина изображения составляет: 400 пикселей (ставьте реальную цифру ширины ваших изображений).

height="209" - указывает, что высота изображения составляет: 209 пикселей (ставьте реальную цифру высоты ваших изображений).

Если не указать параметры: width и height , то изображение может получить геометрические искажения.

hspace="20" – указывает на отступ текста вокруг изображения в 20 пикселей.

align="left" – это уже знакомый Вам тег….. Правильно, обозначает выравнивание по левому краю, также может принимать, значение: right - выравнивание по правому краю.

alt="Вид машины спереди" – здесь прописывается альтернативный текст, который высвечивается при наведении мышки на изображение.

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

Комментарии к этой статье (уроку):

Скажите пожалуйста, где именно надо создать папку img?

Папка img - это просто условное название, можете обозвать её как угодно, лишь бы сами потом поняли. Создавать её можно где угодно, для простоты создайте её в корневом каталоге и сложите туда все изображения.

Дело в том, что картинка не отображается, только надпись. В чем может быть дело? Спасибо.

Посмотрите внимательно Листинг 8.1 выше. Возьмите его целиком к себе. В корневом каталоге (там где лежат все HTML-файлы вашего сайта) сделайте папку img . Поместите в эту папку все ваши изображения. В листинге измените mers1.jpg на название фашего файла. Значения width и height так же поменяйте на реальные размеры вашего файла. Удачи.

Спасибо большое, все получилось.

Здравствуйте.У меня таже ситуация,что и предыдущего оратора:прописываю код как у вас,меняю только название файла:вместо mers.1/jpeg вставляю связку мерседес/jpeg.На странице появляется только окно с надписью сверху"Вид автомобиля спереди",а изображения нет.По моему,браузер не может найти путь до фото или он не правильно прописан.ВОТ МОЙ КОД: б

Посмотрите внимательно на свой код img/мерседес/jpeg. Вы правильно поняли браузер не находит путь до графического файла. 2. Неправильно указано имя файла, смотрите как у меня mers1.jpg

Ну вот я скопировал код вставил у меня овал без картинки в овале в верху написана сылка!

Здравствуйте!Проблема такая же, создала папку с названием img там же где и документы сайта, в этой папке сохранены изображения с названием 1.jpg, прописываю все как на вашем примере.

Если Вы заметили у меня картинка лежит в папке img

Очень полезная статья для начинающих "web-мастеров". Единственное замечание к атрибуту "alt". Применительно к рисунку в статье даётся такое его толкование: "alt="Вид машины спереди" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.

вот мой код ТАК ПОЧЕМУ ЖЕ КАРТИНКА СТАВИТСЯ СБОКУ, КОГДА ЗАДАЧА ДЛЯ НЕЕ CENTER?

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

Объясните, почему при выкладке HTML документа на сервер на месте изображений пустые места в рамке. Хотя до выкладки, изображения были, как надо.

Дмитрий, чудес не бывает, Вы где-то допустили ошибку, проверьте все пути до картинок, т.е. как прописаны картинки в коде.

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

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

Эльвира, Ваше письмо я прочитал, как впрочем и все остальные комментарии и письма. Но отвечать то куда... на деревню дедушке???

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

Скопировал Ваш листинг,вставил свои значения-картинка есть.Далее вбиваю ниже то же самое(вручную)картинки нет-что за чудо?

АндрейК пожалуйста скажите где ошибка? сколко пробывал не получается((

Андрей, подскажите, почему не получается увидеть картинку. Мой код: Надпись есть, картинки нет. Мой адрес: [email protected] Спасибо.

Тоже долго мучилась, но получилось! Действительно папку imj надо открыть в HTML-документе.

Обязательно попробую,Спасибо

ииииииииууууууу крррррроши мои

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

Андрей я вставляю:

Андрей я вставляю: и у меня нет картинки в документе только надпись!!!Мой адрес:[email protected]

мой код...тоже нет картинки. Папка img находится в тойже папке что и index... помогите,пожалуйста. [email protected] Спасибо!

Ну не знаю. Прочитала все комментарии. Перепробовала все. Копировала, вставляла свои данные. Ничего не получается. Папка с картинками (img) лежит там же,где index.html. Но картинки нет. Вместо нее крестик красный и надпись.Работаю в браузере IE. Вот, что я ввела:

Посмотрела HTMLкод страницы на месте фото в уроке: Код на странице отличается от того, что в листинге. Почему? и, кстати на странице код "mers1.jpg" подчеркнут. Скопировать с подчеркиванием не удалось. Пробовала и так вставлять. Все равно картинки нет. В чем дело?

Сами спрашиваем, сами и отвечаем. Долго мучилась картинка не вставлялась. Оказалось: 1, вместо тега src у меня было srk 2. запуталась,когда составляла путь к картинке. Переименовала папку в IMG и все получилось. На это потратила почти два дня.Но это того стоило.

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

Здраствуйте а подскажите как разместить одно изображение сверху второе ниже слева, а третье снизу справа))))

...........в чем моя ошибка отсутствия изображения?

В коде все правильно, если ничего не напутали все должно работать. Но название файла (картинки) пишите английскими буквами. Многие сервера не воспринимают латиницу.

Но вот что странно... пока называла папку разными именами, никак картинка не хотела появляться, хоть и путь был прописан правильно. Как только назвала IMG,сразу появилась. В чем подвох?

Марина, никакого подвоха и провокаций нет:). В код Листинга 8.1. указано, что данное избражение лежит в папке: img. Если Вы меняете у себя на хосте название папки для изображениий, то поменяйте и в листинге, вот и вся хитрость.

Я пытаюсь вставить изображение!!! прописываю все через блокнот я все верно делаю может через блокнот не стоит??

И открываю все в мозиле файр фокс последний))

Путь моей картинкаи C:Documents and SettingsденисРабочий столkoffevinogradwwwImg и сама картинка названа gif тоже в название входит 1.gif...Я в блокноте делаю так делал и полный путь не выходит мозила не видит фото еxpoler красным крестом выделяет

Денис, переименуйте папку Img в img , т.е. все прописными буквами, и путь до нее тоже переименуйте. Многие сервера некорректно отображают заглавные регистры.

у меня все тот же вопрос: почему не изображения, а только надпись. я создала отдельную папку для сайта: в ней Web-страница и рисунок. Вставила: ПОМОГТЬЕ, В ЧЕМ ОШИБКА МОЯ ПОЧТА: [email protected]

А как сделать картинку, чтобы её можно было увеличивать или уменьшать?

У меня тоже почему-то не центрирует картинку. В чем подвох?.. Код такой:

26.06.2015

Всем привет!
Продолжаем усердно изучать основы HTML.
В этом уроке я расскажу, как вставить картинку в HTML -документ, как сделать картинку фоном , размер картинки, обтекание картинки текстом, как выровнять картинку. Все перечисленные возможности буду закреплять примерами и результатами.
Итак, изображения на веб-страницах могут быть как фоновые, так и обычные. Какая разница между фоновым и обычным изображением?

Фоновое изображение размещается в качестве фона, наверх которого можно вставить другие картинки, текстовку, таблицу и т.д.

Обычное изображение будет отталкивать от себя другие элементы страницы (другие картинки, текстовку, таблицу и т.д.). На примере вы потом все увидите и поймете.
Для веб-страниц рекомендуется использовать форматы картинок JPEG (JPG) , GIF и PNG .

○ Как сделать картинку фоном в HTML

Чтобы сделать картинку фоном, для тега нужно прописать атрибут «background» :

Теперь смотрим полный пример. Вставьте файл картинки «fon.jpg» рядышком с HTML файлом.

и в HTML файл вставьте вот этот код:

Jpg">

Результат будет таким:

Внимание

Не правильное название:

Правильное название:

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

Чтобы вставить картинку в HTML-документ, используют тег с параметром «src» , которое определяет путь или адрес к картинке.

Теперь смотрим полный пример. Вставьте файл картинки «kartinka.jpg» рядышком с HTML файлом и в HTML файле пропишите вот этот код:

Здравствуйте, это моя первая страница на сайт.

Результат будет таким:

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

Не правильное название:

Правильное название:

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

Jpg">

○ Как вставить картинку, если она находится в папке « img » или « images»?

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

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

Предыдущая запись
Следующая запись