Как сделать фотографию справа в html
Добавил пользователь Morpheus Обновлено: 04.10.2024
Изображения в HTML давно завоевали заслуженную популярность среди создателей сайтов. Они активно используются в дизайне сайтов, для наглядного дополнения текстовой информации, для оформления ссылок и Бог знает для чего еще.
Важным составляющим любого изображения является его размер (объем, вес) в килобайтах, ведь чем он больше, тем дольше будет загружаться HTML-страница. Поэтому в интернете существует три самых распространенных формата, которые содержат оптимальное соотношение размер—качество изображения — это GIF, JPG (JPEG) и PNG.
В следующих уроках вы научитесь вставлять изображения в HTML-страницы и использовать их по своему усмотрению. Чтобы не искать нужные для обучения картинки — вы можете скачать их по этой ссылке.
Тег или как вставить изображение в HTML?
Для вставки изображения в HTML страницу используется тег . Это самый обычный встроенный (inline, уровня строки) элемент, то есть он не создает впереди и после себя переводы строк в начало. Но вот содержимого у него не может быть, так как не имеет закрывающего тега и является пустым.
У тега есть два обязательных атрибута — это src , который указывает путь (URL) к изображению и alt , выводящий альтернативный текст, когда в браузере отключен показ изображений. Если src вы вряд ли забудете указать, ведь без него изображение просто-напросто не загрузится, то про alt очень часто забывают даже опытные вебмастеры. А все потому, что все браузеры спокойно воспринимают отсутствие alt , не считая это ошибкой. Ну что же, я постараюсь сделать так, чтобы вы не забыли о нем, даже разбуди вас ночью.
Атрибут src использует абсолютно такие же значения адресов, что и атрибут href тега , которые мы рассматривали в уроке Ссылки и их разновидности, только ведут они к изображениям. Ну и, естественно, можно указывать как абсолютные, так и относительные адреса.
Пример вставки изображений в HTML-страницу
Результат в браузере
Если отключите в своем браузере показ изображений, то увидите альтернативный текст атрибута alt .
Изменение размеров изображений в HTML
По умолчанию все браузеры показывают изображения в их натуральные размеры. Но при помощи атрибутов width и height тега можно изменить их высоту и ширину. Значения указываются в числах, которые означают размеры в пикселях (ставить в конце чисел буквы px не нужно) или процентах, в этом случае в конце надо поставить знак %.
Пример изменения размеров изображений
Результат в браузере
Не следует злоупотреблять изменением размеров, так как при визуальном уменьшении изображений, их объем в килобайтах не уменьшается, соответственно они загружаются столько же времени. А при увеличении изображений могут появиться размытости и другие искажения.
Тем не менее, лучше всегда указывать размеры изображений, даже если вы их не меняете. В этом случае браузеры не будут ожидать их полной загрузки, а выделят под них место и пойдут загружать страницу дальше, а изображения загрузят в конце. Это позволяет пользователям не сидеть в томительном ожидании и быстрее начать пользоваться сайтом. Кроме этого, если браузеры сразу будут знать размеры, то при загрузке страницы им не придется по ходу дела подстраиваться под появляющиеся картинки, что поможет избежать ненужных скачков и дерганий окружающих их HTML-элементов.
Ребята, еще раз хочу обратить ваше внимание на то, что только в размерах атрибута style указываются единицы измерения пиксели и пункты (px, pt), а все потому, что он относится к CSS. У всех (абсолютно всех) остальных атрибутов HTML, которые мы с вами изучили и еще изучим, пиксельный размер пишется просто цифрами, без указания единиц измерения. И только процентные размеры и там и там указываются со знаком %. Кстати, ошибки связанные с этой путаницей занимают одно из первых мест у новичков, так что перечитайте это примечание еще раз и будьте внимательны.
Выравнивание изображений
В старых версиях HTML для выравнивания изображений у тега имелся уже известный вам атрибут align , но в современном HTML его нет, поэтому будем использовать тоже уже знакомый вам, и, надеюсь, ставший родным style .
Вы уже сталкивались с выравниванием в уроке о Выравнивании содержимого тегов, но как вы знаете, его нельзя применять к встроенным тегам, таким, как , да и никакого эффекта это не даст. Поэтому и значения атрибута style будут совершенно другие, предназначенные для выравнивания не содержимого, а HTML-элемента целиком:
style= "float:left" — прижимает изображение к левой стороне блока, в котором находится изображение, а весь текст обтекает его справа.
Пример выравнивания изображения по левому краю.
Результат в браузере
Текст перед картинкой. После картинки.
Как видите, первый параграф-блок выравнивание не затронуло, зато весь текст второго параграфа и третьего параграфа обтекли картинку справа.
Хорошо, а если нам не надо, чтобы нижестоящие блоки обтекали изображение? В этом случае вам поможет еще одно значение атрибута style , которое вы можете применить внутри любого блочного тега.
style= "clear:left" — прерывает обтекание изображений выровненных по левой стороне.
style= "clear:right" — прерывает обтекание изображений выровненных по правой стороне.
style= "clear:both" — прерывает обтекание изображений выровненных по обеим сторонам.
Пример прерывания обтекания изображения
Результат в браузере
Текст перед картинкой. После картинки.
Создание внешних отступов у изображений
Я думаю, вы обратили внимание, что изображения всегда вплотную прижимаются к окружающим элементам. Будь в предыдущем примере не тег параграфа а, например, блок
, то рисунок вообще со всех сторон было бы прижат. Так вот, в старом HTML у тега были два атрибута, hspace и vspace , которые изменяли размер внешних полей (отступов) между изображением и окружающими элементами, но теперь их нет и неизвестно, сколько еще времени браузеры будут их поддерживать. Поэтому вновь применяем атрибут style , общий синтаксис такой:
style= "margin:размер" — Устанавливает одинаковый размер полей для всех сторон изображения.
style= "margin:сверху справа снизу слева" — Размеры полей для каждой стороны, пишутся через пробел по часовой стрелке.
В качестве значений можете указывать известные вам единицы измерения: пункты (pt), пиксели (px), проценты (%), чаще всего применяют пиксели. Кстати, если каким-то из значений у вас является ноль (0), то единицы измерения можно не ставить, а можно и ставить — в данном случае без разницы.
Пример изменения полей вокруг изображений
Результат в браузере
Текст перед картинкой. После картинки.
Всплывающий текст-подсказка у изображений в HTML
Как и у многих других HTML-тегов, у тега есть атрибут title , выводящий текстовую подсказку при наведении курсора мыши на изображение.
Примера не будет, так как тут все элементарно. Главное не путайте title и alt . Содержимое alt отображается, если в браузере отключен показ картинок и, в отличие от title , он является обязательным атрибутом.
Иногда у меня возникает чувство, что я пишу учебник по CSS, а не по HTML — так часто мы используем style . Но что делать, если столько тегов или их атрибутов стали устаревшими в современном HTML. Ну вам-то это только на пользу — не будете, как я, переучиваться.
Графика является важной составляющей Интернет. Без графических изображений не обходится ни один сайт. Различные фотографии, иконки, значки, кнопки, рекламные баннеры и т.д. и т.п. являются неотъемлемыми элементами современных веб-страниц.
Как вставить изображение?
В основном на страницах размещают изображения в одном из трех графических форматов: gif , jpg/jpeg или png (подробнее здесь. ).
Для вставки изображения на веб-страницу предназначен тег и его обязательный атрибут src , который указывает адрес файла с изображением - абсолютный или относительный путь к файлу (подробнее здесь. ).
Атрибут align тега позволяет разместить изображение справа или слева относительно текста и других элементов страницы, либо расположить его определенным образом относительно базовой линии текущей строки.
"img/peng.jpg" align= "middle" > Выравниваем изображение по базовой линии текущей строки.
Выравниваем изображение по базовой линии текущей строки.
Рамка вокруг изображения
Атрибут border тега позволяет заключить изображение в рамку, цвет которой совпадает с цветом текста на странице, а толщина задается в пикселях. По умолчанию рамка отсутствует.
"img/peng.jpg" align= "middle" border= "2px" > Изображение заключено в рамку, толщиной 2 пикселя.
Изображение заключено в рамку, толщиной 2 пикселя.
Размер изображения
Размеры графического изображения желательно всегда указывать явно с помощью атрибутов height и width , задающих соответственно высоту и ширину изображения.
В противном случае браузеру требуется дополнительное время для самостоятельного вычисления размеров изображения, что влияет на скорость загрузки страницы.
Размер изображения задается в пикселях и на скорость его загрузки не влияет.
"img/peng.jpg" height= "32" width= "32" >
"img/peng.jpg" height= "64" width= "64" >
"img/peng.jpg" height= "128" width= "128" >
Отступы от изображения
Отступы от изображения (или поля вокруг изображения) до других элементов страницы задаются с помощью атрибутов hspace и vspace - отступы по горизонтали и вертикали соответственно.
Отступы задаются в пикселях.
"img/peng.jpg" align= "left" border= "2px" hspace= "50px" > В данном случае отступы от изображения по горизонтали, с одной стороны до текста, а с другой - до края родительского элемента, составляют 50 пикселей.
В данном случае отступы от изображения по горизонтали, с одной стороны до текста, а с другой - до края родительского элемента, составляют 50 пикселей.
Альтернативный текст и всплывающая подсказка
При помощи атрибута alt тега к изображению добавляют альтернативный текст.
Альтернативный текст используют для краткого описания содержимого картинки, когда само изображение по какой-либо причине недоступно (например, если в Вашем браузере отключена автоматическая загрузка изображений).
Таким образом альтернативный текст Вы увидите, если браузер не загрузил или еще не загрузил изображение.
Всплывающая подсказка к картинке добавляется при помощи атрибута title . Она появляется при наведении на изображение курсора.
"img/peng.jpg" align= "left" border= "1px" alt= "Альтернативный текст" title= "Пингвин думает!" hspace= "50px" > Попробуйте отключить автоматическую загрузку изображений в Вашем браузере, и вместо пингвина в рамке Вы увидите "Альтернативный текст".
Попробуйте отключить автоматическую загрузку изображений в Вашем браузере, и вместо пингвина в рамке Вы увидите "Альтернативный текст".
Длинный абзац с несколькими предложениями. Он содержит текст, характеризующий помеченное флажком свойство, и изображение, которое нужно прижать к краю правой стороны.
Свойство text-align наследуется, применяется к блочным элементам.
Выравнивает все содержащиеся в них строчные элементы и текст по горизонтали. Оно не перемещает сам элемент и не передвигает блоки, не работает, если задано строчному элементу. У него есть несколько значений, в том числе right , позволяющих сдвигать содержимое вправо.
Свойство margin-left не наследуется, применяется ко всем элементам. У него есть значение auto , которое выравнивает блочный элемент по горизонтали. А именно margin-left: auto; прижимает элемент к правому краю родителя. Это положение может изменяться свойством margin-right . При margin-left: auto; и margin-right: auto; элемент размещается по центру ширины предка.
Свойство float не наследуется, применяется ко всем элементам. Оно вынимает элемент из потока и прижимает к краю левой или правой стороны родителя. Элементы и текст, расположенные в коде после float-элемента, обтекают его с противоположной стороны.
Свойство position не наследуется, применяется ко всем элементам. position: absolute; вынимает элемент из потока и располагает поверх остального содержимого. Его можно перемещать относительно границ родителя, у которого значение position отлично от static , с помощью свойств top , right , bottom , left . При direction: ltr; свойство left имеет приоритет над свойством right , кроме случаев, когда свойство left имеет значение auto .
Свойство display не наследуется, применяется ко всем элементам. Элемент со значением table подобен тегу table , а table-cell — td . Также стоит обратить внимание на значение flex .
Совет: на данном примере занятно поглядеть как ведёт себя картинка, когда уменьшается размер окна браузера.
Изображения на web-страницах могут использоваться двумя способами: в качестве фона и в качестве самостоятельного изображения. Рекомендуется использование трех форматов графики: JPEG, GIF и PNG. Именно их поддерживают все браузеры, для остальных форматов могут потребоваться специальные средства.
Как правило, все изображения для сайта хранятся в отдельной папке, например, images. А пути к изображениям прописываются также, как в ссылках. Если забыли посмотрите здесь.
Во всех последующих примерах пути к изображениям будут прописаны, исходя из того, что картинки находятся в папке images, а страницы в папке site, находящейся на том же уровне.
Читайте также: