Какой тег задает вставку рисунка на страницу. Изображения в HTML
В интернете трудно найти сайт, который бы не содержал картинок, и это не удивительно, ведь они являются основной частью дизайна сайта, которая придает ему запоминающейся вид. А хороший дизайн сайта - залог его успешного развития. Для вывода изображений в html существует единственный тег
.
1. Синтаксис тега ![]()
Описание изображения " src ="URL " [атрибуты ]>
Обратите внимание, что данный тег является одиночным и не требует закрывающего тега .
Атрибут src является обязательным. С помощью него указывается адрес выводимого изображения. Можно указать абсолютный или относительный URL . Если адрес не указать или же написать с ошибкой, то картинка выведена не будет.
Атрибут alt="описание" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.
Остальные атрибуты являются необязательными, их мы рассмотрим чуть ниже. Сначала приведем простенький пример вывода картинки на html.
2. Как вставить в html картинку
Для вставки картинки в html используется тег
. Синтаксис мы рассмотрели чуть выше. Давайте приведем практические примеры.
Пример 2.1. Использование тега ![]()
...
Этот код
В данном примере мы указали прямой адрес изображения из картинок на Яндекс Фото. Чаще всего указывается ссылки на картинки, которые лежат на том же URL. Например, src="/img/kartinka.jpg", т.е. указывается относительный адрес.
Возможно размещение нескольких картинок подряд. Если они не будут умещаться на одной строке, то автоматически произойдет переход на следующую.
Пример 2.2. Вывод нескольких картинок в html друг за другом
...
Преобразуется на странице в следующее:
Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой оно бы уже не уместилось.
Пример 2.3. Использование альтернативного текста (alt) в img
Рекомендуется прописывать альтернативный текст (атрибут alt) в теге
, чтобы застраховать себя от случая, что картинка не доступна. Ниже приведен пример с использованием альтернативного текста. В первом случае мы не задавали размеры картинки, а во втором задаем.
...
Преобразуется на странице в следующее:
Если бы мы разместили ещё одно изображение, то оно бы было с новой строки, поскольку в этой строке оно бы уже не уместилось.
Теперь рассмотрим подробно все атрибуты тега
.
3. Атрибуты и свойства тега ![]()
1. Свойство align="параметр" - определяет выравнивание рисунка. Это значение так же влияет на то, как текст будет обтекать рисунок. Может принимать следующее параметры:
- left - выравнивание по левому краю
- middle - выравнивание середины изображения по базовой линии текущей строки
- bottom - выравнивание нижней границы изображения по окружающему тексту
- top - верхняя граница изображения выравнивается по самому высокому элементу текущей строки
- right - выравнивание по правому краю
Пример 3.1. Выравнивание изображения в html по правому краю
...
Преобразуется на странице в следующее:
2. Свойство alt="текст" - подсказка/описание картинки. Выполняет сразу две важные функции:
- Выдает подсказку при наведении
- Если в браузере отключены изображения, то выводится этот текст
Этот атрибут также очень важен при ранжировании изображений в Яндекс Картинках и Google Картинках. Его следует прописывать к каждому изображению, поскольку это является одним из факторов в алгоритмах поисковых системах.
Пример 3.2. Вывод картинки в html с рамкой (границей)
...
Преобразуется на странице в следующее:
4. Свойство bordercolor="цвет" - задает цвет рамки, которая обтекает изображение. Имеет смысл, только если атрибут border больше 0.
Пример 3.3. Вывод картинки в html с цветной рамкой
...
Результат можно видеть чуть выше.
ПримечаниеАтрибуты border и bordercolor можно задать в стилях CSS к img:
...
5. Свойство height="ЧИСЛО" - задает высоту изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 400х200, а мы укажем высоту 150 пикселей, то оно сжимается до 300х150 (на 25% меньше), т.е. пропорционально.
6. Свойство width="ЧИСЛО" - задает ширину изображения: либо в пикселях, либо в процентах %. Например, если изображение имеет размер 1000х800, а ширина указывается 1200 пикселей, то оно автоматически расширяется на 20% до 1200х960.
7. Свойство hspace="ЧИСЛО" - задает горизонтальный отступ изображения в пикселях от других объектов html.
8. Свойство vspace="ЧИСЛО" - задает вертикальный отступ изображения в пикселях от других объектов html.
ПримечаниеВместо hspace и vspace советую применять старый и проверенный margin (более подробно про него можете прочитать в уроке про описание стилей html). Кратко напомню:
- margin-top: X px; (X - отступ сверху)
- margin-bottom: Y px; (Y - отступ внизу)
- margin-left: L px; (L - отступ слева)
- margin-right: R px; (R - отступ справа)
Задают отступы от объектов в пикселях. Допускаются отрицательные значения. По умолчанию либо наследуется значение предка, либо имеет значение 0.
Например. Отступ слева составляет 50 пикселей, а сверху 10 пикселей.
...
Преобразуется на странице в следующее:
В данном примере - отступ сверху составил 10 пикселей, слева 50 пикселей.
9. Свойство class="имя_класса" - можно присвоить класс изображению, чтобы задать стиль всем изображениям этого класса.
4. Как сделать картинку ссылкой
Такой вопрос возникает у молодых вебмастеров. На самом деле все очень легко. Для этого достаточно обрамить тег
тегом (ссылкой).
Например
...
5. Как скруглить углы у картинки
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге img. Теперь советую перейти к следующему уроку.
Всем привет!!! По этой статье вы научитесь вставлять картинку в HTML документ. Это вовсе не сложно. Но вначале я бы хотел вам дать несколько рекомендаций по поводу картинок на веб-странице.
Совет:
когда будете размещать картинки на веб-страницу, не увлекайтесь анимированными картинками, так как это отвлекает внимание читателя от самого важного - текста. Лучше используйте обычные картинке без анимации.
Старайтесь использовать на веб-страничках уникальные картинки. Как сделать уникальную картинку вы можете почитать , а взять красивые картинки вы можете .
Приступим.
Как вставить картинку в html?
Так, как я говорил - здесь сложного ничего нет, добавьте этот html код.
kartinka
- это название картинки
jpg
- это расширение картинки. Расширение может быть gif, png, bmp.
Если картинка размещена в папке images, тогда путь к картинке будет таким:
images - название папки, где лежит картинка "kartinka.jpg ".
Если картинка лежит на другом сайте, тогда код будет таким:
https://www.сайт - это адрес сайта.
Пример :
Для этого просто заключите картинку между ссылочным элементом:
Атрибуты для картинок
ALIGN
- этот атрибут предназначен для обтекания или выравнивания картинки по горизонтали.
left -
выравнивание по левому краю, текст будет обтекать справа.
right -
выравнивание по правому краю, текст обтекает слева.
Результат :
выравнивание по правому краю
HSPACE
- отступы от картинки по горизонтали (в пикселях).
VSPACE
- отступы от картинки по вертикали (в пикселях).
Результат :
отступы от картинки
HEIGHT
- высота изображения (пикселях).
WIDTH
- ширина изображения (пикселях).
Результат :
TITLE - это заголовок картинки. Заголовок будет отображаться, если навести на картинку курсор мышки.
title="Всем привет - сайт!!!
">
Результат :
заголовок картинки
BORDER - этот атрибут отвечает за размер рамки вокруг картинки. Рамки появляются в таких случаях, когда вы картинку сделаете ссылкой. Если установить нулевое значение атрибута BORDER , рамка отображаться не будет.
Результат :
А если поменять значение border на 5:
Результат :
Любую картинку можно сделать фоном. Для этого в теге body пропишите атрибут background .
background="ваш_фон.jpg" >На картиночном фоне может отображаться текст.
Пример :
Результат :
Картинка как фон
На этой ноте можно было бы и закончить тему "Как вставить картинку в HTML", но знаю, что многих интересует вопрос, а как поставить картинку по центру.
Чтобы поставить картинку по центру, вам достаточно применить такой фокус:
Вот теперь точно все. Переходим к следующему уроку.
Это делает возможным внутри одной страницы отображать содержимое другой страницы. Например:
Большинство изображений, которые человек видит на сайтах, тоже являются содержимым другой страницы. Вот, в частности, адрес смайлика в формате.gif:
А вот способы добавления картинки на сайт, которые можно выделить, если посмотреть код страницы:
| HTML: тег | |
|---|---|
 http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif
" alt="смайлик" height="30" width="30">
|
|
| CSS: свойства и | |
| CSS: псевдоэлементы и | |
| HTML: тег векторной графики | |
| CSS: без URL | |
Как узнать адрес картинки и скопировать его
Скопировать адрес изображения можно несколькими способами:
- Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено скопировать URL, щёлкнуть по необходимому пункту.
Рис.1 Если навести на фото и нажать на правую клавишу мышки, то в Mozilla Firefox откроется контекстное меню с таким пунктами - Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено изучить характеристики фотографии, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Информация об изображении»; в Internet Explorer см. пункт «Свойства»), в открывшемся окне выделить адрес рисунка,
- нажать на правую клавишу мышки, в появившемся контекстном меню щёлкнуть по пункту «Копировать».
Рис.2 Если в Mozilla Firefox навести на фото, нажать на правую клавишу мышки, в появившемся контекстном меню выбрать пункт «Информация об изображении», то откроется окно, где можно посмотреть список картинок, используемых на странице, их адрес, альтернативный текст (содержимое в атрибуте alt), фактический размер и используемый масштаб - Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено перейти на страницу картинки, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Открыть изображение»). Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью или с помощью CSS. Выделить адрес открывшейся страницы в адресной строке браузера,
- нажать комбинацию клавиш клавиатуры Ctrl + C .
Рис.3 Так выглядит страница смайлика.
Её URL: http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif - На сенсорных устройствах (смартфон, планшет) долго без движения держать палец над фото, в появившемся контекстном меню будет предложено перейти на страницу картинки, щёлкнуть по необходимому пункту (он может называться «Просмотр картинки»). Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью или с помощью с помощью CSS. Затем долго жать на адрес в адресной строке браузера. После того, как появятся ползунки и весь URL будет выделен (в случае необходимости, ползунки можно раздвинуть на необходимое расстояние), щёлкнуть в появившейся панели кнопку «Копировать».
- Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено перейти на страницу фонового изображения, щёлкнуть по необходимому пункту. Откроется страница, содержимым которой будет лишь одно изображение. В полный рост, если ранее оно было уменьшено с помощью с помощью CSS. Выделить адрес открывшейся страницы в адресной строке браузера (см. Рис.3),
- нажать на правую клавишу мышки, в появившемся контекстном меню выбрать пункт «Копировать».
- нажать комбинацию клавиш клавиатуры Ctrl + C .
Как сохранить изображение
Навести курсор на фото, нажать на правую клавишу мышки, в появившемся контекстном меню будет предложено сохранить картинку, щёлкнуть по необходимому пункту (на Рис.1 cм. пункт «Сохранить изображение как...»), в открывшемся окне выбрать папку на компьютере, куда будет сохранён рисунок.
Если фотография является фоновой картинкой, то нужно предварительно перейти на страницу картинки (см. Рис.3).
Как добавить картинку на веб-страницу
Сначала изображение нужно загрузить с компьютера на хостинг сайта, в социальную сеть (ВКонтакте, Google+ и т.п.), Яндекс.Диск или Гугл.Диск , чтобы у рисунка появился свой адрес в интернете.
Если есть визуальный редактор, то очерёдность действий обычно следующая:
- установить курсор мышки в то место, где должна будет появиться фотография,
- нажать на иконку, похожую на или на ,
- выбрать файл с компьютера,
- если есть возможность, заполнить альтернативный текст (он же описание изображения).
Итог: картинка будет вставлена на страницу сайта, а самое главное — загружена на сервер веб-проекта. У неё теперь будет свой адрес в интернете. И теперь можно на вкладке «HTML» поправить предоставленный визуальным редактором код, так как часто визуальный редактор добавляет ненужные теги, да и возможности HTML и CSS несравнимо большие.
Если URL уже есть, но другого малоизвестного сайта, то всё же такую фотографию лучше сохранить на компьютер, а потом загрузить на сервер сайта, если данное действие разрешено владельцем фото, дабы не нарушить авторские права, так как
- на некоторых сайтах может быть запрещено использование адреса изображений на других ресурсах (подробнее про запрет хотлинкинга ).
- сайты недолговечны и спустя время с удалением веб-проекта, исчезнет и картинка на вашем сайте, оставив вместо себя в лучшем случае только альтернативный текст.
Если нет визуального редактора, то очерёдность действий обычно следующая:
- создать папку image ,
- создать в папке image файл.htaccess , содержимым которого будет
# закрыть доступ к http://сайт.ru/image/
Options -Indexes
# закрыть доступ к http://сайт.ru/image/.htaccess
order allow,deny deny from all - загрузить в папку image изображение, которое именуется, допустим, plain.gif (в дальнейшим все картинки также загружать в эту папку),
- на HTML-странице использовать URL вида http://сайт.ru/image/plain.gif , например,
Изображения в HTML давно завоевали заслуженную популярность среди создателей сайтов. Они активно используются в дизайне сайтов, для наглядного дополнения текстовой информации, для оформления ссылок и Бог знает для чего еще.
Важным составляющим любого изображения является его размер (объем, вес) в килобайтах, ведь чем он больше, тем дольше будет загружаться HTML-страница. Поэтому в интернете существует три самых распространенных формата, которые содержат оптимальное соотношение размер-качество изображения - это GIF, JPG (JPEG) и PNG.
Тег или
как вставить изображение в HTML?
Для вставки
изображения в HTML страницу используется
тег . Это самый обычный встроенный
(inline, уровня строки)
элемент, то есть он не создает впереди
и после себя переводы строк в начало.
Но вот содержимого у него не может быть,
так как
не имеет закрывающего
тега и является пустым
.
У тега есть
два обязательных
атрибута
-
это src, который указывает путь (URL) к
изображению и alt, выводящий альтернативный
текст, когда в браузере отключен показ
изображений. Если src вы вряд ли забудете
указать, ведь без него изображение
просто-напросто не загрузится, то про
alt очень часто забывают даже опытные
вебмастеры.
Атрибут src использует абсолютно такие же значения адресов, что и атрибут href тега , только ведут они к изображениям. Ну и, естественно, можно указывать как абсолютные, так и относительные адреса.
Пример вставки изображений в HTML-страницу
Такие вот разные птицы.
Результат в браузере
Изменение размеров изображений в HTML
По умолчанию все
браузеры показывают изображения в их
натуральные размеры. Но при помощи
атрибутов width и height тега можно
изменить их высоту и ширину. Значения
указываются в числах, которые означают
размеры в пикселях (ставить в конце
чисел буквы px не нужно) или процентах,
в этом случае в конце надо поставить
знак %.
Пример изменения размеров изображений
Результат в браузере
Не следует злоупотреблять изменением размеров, так как при визуальном уменьшении изображений, их объем в килобайтах не уменьшается, соответственно они загружаются столько же времени. А при увеличении изображений могут появиться размытости и другие искажения.
Тем не менее, лучше всегда указывать размеры изображений, даже если вы их не меняете. В этом случае браузеры не будут ожидать их полной загрузки, а выделят под них место и пойдут загружать страницу дальше, а изображения загрузят в конце. Это позволяет пользователям не сидеть в томительном ожидании и быстрее начать пользоваться сайтом. Кроме этого, если браузеры сразу будут знать размеры, то при загрузке страницы им не придется по ходу дела подстраиваться под появляющиеся картинки, что поможет избежать ненужных скачков и дерганий окружающих их HTML-элементов.
Выравнивание изображений
В старых версиях
HTML для выравнивания изображений у тега
имелся уже известный вам атрибут
align, но в современном HTML его нет, поэтому
будем использовать тоже уже знакомый
вам, и, надеюсь, ставший родным style.
style="float:left" - прижимает изображение к левой стороне блока, в котором находится изображение, а весь текст обтекает его справа.
style="float:right" - прижимает изображение к правой стороне блока, а текст обтекает его слева.
Пример выравнивания изображения по левому краю.
Первый параграф.
Текст перед картинкой.
После картинки.
Последний параграф.
Результат в браузере
style="clear:left" - прерывает обтекание изображений выровненных по левой стороне.
style="clear:right" - прерывает обтекание изображений выровненных по правой стороне.
style="clear:both" - прерывает обтекание изображений выровненных по обеим сторонам.
Пример прерывания обтекания изображения
Первый параграф.
Текст перед картинкой.
После картинки.
Последний параграф.
Результат в браузере
Всплывающий текст-подсказка у изображений в HTML
Как и у многих
других HTML-тегов, у тега есть
атрибут title, выводящий текстовую подсказку
при наведении курсора мыши на изображение.
title="Любой текст."
Изображения для фона
Изображения в качестве фонов используются в HTML не менее часто, чем просто изменения цвета фона, которые мы с вами уже проходили. И это вполне логично, ведь с помощью изображений можно сделать неоднотонный и более красочный фон.
Обычно, в качестве образца для фона применяются небольшие по размеру и объему (в килобайтах) рисунки, а все потому, что фоновые изображения браузеры обрабатывают иначе, чем обычные рисунки. Они берут эту маленькую картинку и замащивают ей, как кирпичиками, весь участок HTML-страницы или всю ее целиком.
В прошлых версиях HTML у некоторых тегов существовал специальный атрибут background, который позволял делать фоновое изображение. Но в том-то и дело, что только у некоторых, причем далеко не у всех, например у блочного тега
<тег style="background:url("адрес картинки")">...
Обязательно заключайте адрес картинки в одинарные кавычки, как показано. И если вы хотите сделать фоновый рисунок для всей страницы, то используйте style внутри тега
.<тег style="background:#цвет url("адрес картинки")">...
Обратите внимание, что точку с запятой посередине ставить не надо, так как оба значения относятся к фону. При такой записи браузер в первую очередь показывает фон-изображение, а не цвет. А теперь представьте, что у вас фоновое изображение - это рисунок в темных тонах, а цвет текста на странице вы сделали белым. И все отлично смотрится... Пока пользователь не отключит в браузере показ изображений. Тогда у него фон станет скорее всего белым, как и ваш цвет текста.
Пример создания фоновых изображений в HTML
Созвездия в
заоблачной дали
Раздумьям тщетным
многих обрекли.
Одумайся, побереги
рассудок -
Мудрейшие и те в тупик
зашли.
Омар Хайам.
Таблицы
Чаще всего таблицы в HTML используются не по их прямому назначению - отображению табличных данных, а для создания глобального каркаса страницы. То есть создается таблица, растягивается во всю ширину страницы, а потом в ее левом столбце делают одно меню, в правом - другое, в среднем располагают основную информацию и так далее.
Существует три вида верстки: табличная, о которой я вам рассказал выше; слоями (блочная), требующая среднего уровня знания стилей (CSS) и комбинированная. По многим параметрам блочная верстка все же предпочтительней, поэтому, если верстальщик может сделать задание, как с помощью таблиц, так и с помощью блоков, то обычно выбирается последнее.
Здравствуйте уважаемые читатели блога! В этой статье вы узнаете все о том как вставить изображение на html страницу
. У вас есть несколько изображений, которые вы хотите поместить на свою страничку или вы хотите поместить на свой сайт логотип? Все это легко. Прочитав эту статью, вы сможете без каких-либо трудностей вставлять картинки на свои html страницы. Для этого мы подробно поговорим о теге
и его атрибутах, кратко рассмотрим форматы графических файлов, таких как gif, jpeg и png, а также посмотрим новые возможности HTML5, которые упрощают вставку видео и аудио на сайт.
Из-за того что графические данные и текст html невозможно объединить в одном файле, для их отображения на сайте применяется другой подход, нежели с другими элементами html-страниц. Прежде всего, графические изображения, да и другие мультимедийные данные хранятся в отдельных файлах. А для их внедрения в web-страницу используют специальные теги, которые содержат ссылки на эти отдельные файлы. В частности таким тегом является тег
. Встретив такой тег с адресом, браузер сначала запрашивает у Web-сервера соответствующий файл с изображением, аудио- или видеороликом, а только затем отображает его на Web-странице.
Все графические изображения и вообще любые данные, которые хранятся в отдельных от web-страницы файлах называются внедренными элементами страницы.
Прежде чем вставлять картинки и подробно рассматривать тег , стоит немного узнать о графических форматах.
Форматы графических изображений.
Существует множество различных графических форматов, но браузеры поддерживают лишь несколько. Рассмотрим три из них.
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 — формат для всего остального (иконки, кнопки и др.).
JPEG лучше всего использовать для хранения фотографий или полутоновых картинок не содержащих текста;
Вставка картинок в html страницы
Итак, как все таки вставить изображение на веб-страницу? Вставить изображение позволяет одинарный тег
. Браузер помещает изображение в том месте веб-страницы, где встретит тег
.
Код вставки картинки в html страницу имеет такой вид:
Данный html-код поместит на веб-страницу изображение, хранящееся в файле image.jpg, который находится в одной и той же папке с веб-страницей. Как вы могли заметить адрес картинки указывается в атрибуте src . Что такое я уже рассказывал. Так вот, атрибут src обязательный атрибут, который служит для указания адреса файла с изображением. Без атрибута src тег img не имеет смысла .
Приведу еще несколько примеров указания адреса файла с изображением:
— этот html-код вставит на страницу картинку с названием image.jpg, которая хранится в папке images, расположенной в корне веб-сайта.
В атрибуте src можно указывать не только относительные ссылки на изображения. Так как изображения хранятся в сети вместе с html-страницами, поэтому у каждого файла с изображением есть свой собственный url-адрес. Поэтому в атрибут src можно вставлять url-адрес изображения. Например:
Данный код вставит на страницу изображение с сайта mysite.ru. URL-aдpec обычно применяется, если вы указываете на изображение, находящееся на другом сайте. Для изображений хранящихся на вашем сайте лучше использовать относительные ссылки.
Тег является строчным элементом, поэтому его лучше помещать внутрь блочного элемента, например внутрь тега
— абзац:
Давайте попрактикуемся и вставим на нашу страницу из предыдущих статей об html изображение. Я создам рядом с html-файлом своей страницы папку «images» и помещу туда файл с картинкой «bmw.jpg», который выглядит так:
Тогда html-код страницы со вставленной картинкой будет таким:
Сайт об автомобилях.
Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.
Научным языком автомобиль это:
Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.
Классификация автомобилей
Автомобили бывают следующих типов:
- Легковой;
- Грузовой;
- Внедорожник;
- Багги;
- Пикап;
- Спортивный;
- Гоночный.
Все права защищены. 2010 год.
Сайт об автомобилях.
И смотрим результат отображения в браузере:
Как мы видим ничего сложного в размещении изображений на веб-страницах нет. Далее рассмотрим несколько других важных атрибутов тега .
Атрибут alt — как запасной вариант
Поскольку файлы с изображениями хранятся отдельно от веб-страниц, то для их получения браузеру приходится делать отдельные запросы. А что если изображений на странице будет очень много и скорость подключения к сети маленькая, тогда на загрузку дополнительных файлов потребуется значительное время. А еще хуже если изображение было удалено с сервера без вашего ведома.
В этих случаях сама веб-страница будет успешно загружена, только вместо изображений будут отображаться белые прямоугольники. Поэтому, чтобы сообщить пользователю информацию, что представляет из себя изображение применяется . С помощью этого атрибута указывается так называемый текст замены, который будет отображаться в пустом прямоугольнике пока изображение не загрузится:
И примерно так это выглядит:
Задаем размеры изображению
Осталось еще пару атрибутов тега img, о которых вам следует знать. Это пара атрибутов width и height . Вы можете использовать их, чтобы указать размеры изображения:
width="300" height="200"
>
В обоих атрибутах указывается размер в пикселях . Атрибут width указывает браузеру какой ширины должно быть изображение, а атрибут height какой высоты. Эти два атрибута можно применять вместе и по отдельности. Например, если вы укажите только атрибут width, то браузер подберет высоту автоматически пропорционально указанной ширине и также в случае использования только атрибута height. В случае если вы не укажите эти атрибуты вовсе, то браузер автоматически определить размер изображения перед выводом его на экран. Стоит только заметить, что указывание размеров изображений немного ускорит работу браузера при отображении страницы.
На этом о вставке изображений на страницы пока все, далее рассмотрим как вставить аудио или видео на сайт...
Вставляем видео и аудио с помощью HTML 5
В новой спецификации html5 появилось несколько новых тегов с помощью которых можно очень легко вставлять файлы мультимедиа. Это прежде всего касается видео и аудио.
Для вставки аудио HTML5 предоставляет парный тег Адрес файла, в котором хранится аудиоролик, указывается с помощью уже знакомого нам атрибута src:
Тег
По умолчанию аудиоролик никак не отображается на web-странице. Но если в теге
Для вставки видеоролика на веб-страницу предназначен парный тег . С этим тегом все тоже самое, что и с тегом
Больше рассказывать о вставке картинок и мультимедиа на html страницы особо нечего. Надеюсь на вопрос «Как вставить изображение в html страницу?» я вам ответил. поэтому просто подведу итоги:
- с помощью атрибута alt
тега
можно задавать текст замены на случай если изображение не загрузится;
- с помощью атрибутов width и height можно задавать размеры изображения на веб-странице;
- для вставки аудио и видео в html5 есть парные теги
для вставки изображений на html
страницу пользуемся одиночным тегом
и указываем адрес файла с картинкой в атрибуте src
:
Если что не понятно, спрашивайте в комментариях и не забудьте подписаться на обновления моего блога . До встречи в следующих постах!
Загрузка...
