Скачать исходники к 9 видеоуроку по HTML Размер: 29.29 kB, скачали: 510 раз.
- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Как вставить изображение в HTML?
Перейдем в папку нашего сайта. Я для вас подготовил изображение info-line.png. Сначала создадим папку с именем img. Открываем ее, и переносим туда наше изображение. Картинка имеет формат png. Это можно увидеть либо внизу, либо при наведении курсора, либо в свойствах.
Перейдем в код. Давайте вставим изображение в текст. Делается это с помощью тега <img>. В кавычках указывается путь до изображения. В нашем случае: img/info-line.png. Хочу отметить, что вводить путь нужно в соответствии с регистром, то есть, если у вас изображение прописано с большой буквы «I», то так его нужно и вводить, иначе могут возникнуть неполадки.
<img src="img/info-line.png">
Если изображение находится на каком-либо другом сервере, то вводится оно следующим образом: http://доменное_имя_сайта/ папка_с_изображением/изображение. Например, можно прописать:
<img src="http://info-line.net/img/info-line.png">
Вернем все, как было. Давайте сохраним и посмотрим нашу страницу в браузере. Обновляем. Наше изображение вставлено.
Атрибуты тега <img>
Давайте теперь разберем атрибуты, которые относятся к тегу <img>. Начнем с атрибута align. Знакомый нам атрибут. Поставим значение left. Здесь align может принимать также значения top (вверху), bottom (внизу) и middle (по центру). Но мы оставим left. Атрибут align означает здесь не только то, что наше изображение будет прибито гвоздями к левой части экрана, но и то, что текст, который обтекает данное изображение, будет обтекать его с правой стороны.
<img src="img/info-line.png" align="left">
Далее идет атрибут alt, который задает альтернативный текст для изображения. То есть, если наше изображение не будет загружено, или у пользователя в браузере будет отключен показ изображений, то вместо изображения будет появляться указанный в этом атрибуте текст. Введем, например “info-line”.
<img src="img/info-line.png" align="left" alt="Info-line">
Наше изображение было слишком большое. Давайте сделаем его меньше с помощью атрибутов width и height (ширина и высота). Например, по 150 пикселей.
<img src="img/info-line.png" align="left" alt="Info-line" width="150" height="150" >
Зададим рамку с помощью атрибута border, например 2 пикселя.
<img src="img/info-line.png" align="left" alt="Info-line" width="150" height="150" border="2" >
Сохраняем страничку и проверяем. На нашей странице с левого края появилась картинка размерами 150×150 пикселей с рамкой в 2 пикселя. Единственное, что нам здесь не нравится (во всяком случае, мне) – это то, что наше изображение так плохо обтекает текст, что нам это заметно.
Давайте сделаем отступ от изображения по горизонтали. Перейдем в код и добавим еще несколько атрибутов: hspase (горизонтальный отступ изображения от другого контента) и vspace (вертикальный отступ). Укажем, например, hspace – 2 пикселя, а vspace – 5 пикселей.
<img src="img/info-line.png" align="left" alt="Info-line" width="150" height="150" border="2" hspace="2" vspace="5">
Сохраним, проверим в браузере. Обновляем страницу – отступ удался.
Давайте теперь сделаем так, чтобы после слова «нужно» обтекание текстом нашего изображения завершалось. Переходим в код, находим слово «нужно» с помощью комбинации клавиш «Ctrl+F». Видим тег переноса. Этот тег имеет атрибут clear, который непосредственно относится к тексту. Атрибут имеет три значения: all, left и right. Что они означают? Они завершают обтекание текста. Но значения left и right применяются тогда, когда в атрибуте align заданы значения left или right. Таким образом, у нас задано значение атрибута align – left, и мы применяем left к атрибуту clear. Наш текст будет отображен слева.
<br clear="left">Это был именно тот момент в жизни, когда что-то внутри перещелкнуло и я стал идти по пути успеха.
Давайте сохраним и обновим нашу страничку в браузере. Мы видим, что наш текст, который ранее отображался справа от изображения, теперь отображается снизу. Это выглядит красивее.
Как сделать изображение фоном?
Перейдем в код и поговорим о том, как задать фон странички с помощью изображений (ведь вы уже знаете, как задать фон обычными цветами?).
Ищем тег. Прописываем атрибут background. В кавычках указываем путь до изображения. Давайте перейдем на рабочий стол. Я подготовил еще одно изображение для этого видеоурока. Называется оно bg.png. Его также нужно перенести в папку img. Оно имеет такое же расширение – png.
<body text="#660000" bgcolor="#FFFCC" background="img/bg.png">
Давайте сохраним и проверим в браузере. Обновляем страницу. Как видим, фон у нас задан.
Что ж, на этом мы заканчиваем этот видеоурок. Попрактикуйтесь с изображениями. До встречи в следующем видеоуроке, в котором вы узнаете, что такое ссылки в HTML.
Неполучается вставить разные изображения, первое появляется, а второе просто как картинка «изображение», bottom, middle и top тоже не работают.
Значения
bottom
,middle
иtop
не работают, потому что для них используется атрибутvalign
, а неalign
. И если мне не изменяет память, то они работают только в таблицах. Но возможна память мне изменяет 🙂На счет изображений — скорее всего проблема в том, что 2-ое изображение у вас не находится в той папке, которую вы указали или называется по другому, или имеет другое расширение. Проверьте это!
P.S. Чтобы вставлять в комментариях код правильно, не забывайте в атрибут
lang=""
значение языка, напримерhtml
илиcss
.Спасибо, помогло =)
Олег, у меня почему-то не вставляется изображение. эксплоуер и опера пишут изображение, но саму картинку не отображают, почему?
Проверь путь к изображению и сверь указанный формат изображения с настоящим.
Олег, если я тебе сайт с HTML кодом скину, сможешь показать где там меняется фон: в голове и теле (как ты говорил:) )?
Все просмотрел не могу найти. Спасибо
Вот твой HTML-код:
Твой тег body:
Твоя обложка (обертка, wrapper):
Твоя шапка:
Твой левый сайдбар:
Твой контент:
Как видишь, все твои области имеют свой класс. Значит все задается в CSS. В этом уроке, я показывал как с помощью html задать все это. Если хочешь — задавай с помощью HTML, но смотри, чтобы не было нестыковок с CSS.
Или, лучше всего, на мой взгляд, просто подредактируй файл CSS.
Как видишь, в обертке и в шапке, фон не задается. Он задан у тебя в теге body. Сайдбар и контент тоже имеют свой фон 🙂
Мой совет: редактируй CSS.
Кидай, только в тегах
code
, чтобы он отобразился 🙂Я в этом уроке это говорил?)) Или в каком-то другом?)
Итак, чтобы ты не скидывал лишний раз, попытаюсь ответить на твой вопрос сразу 🙂
Как прописать фоновое изображение ячейке таблицы?
Способ 1: с помощью свойства background (рекомендуется не использовать)
Способ 2: с помощью таблиц стилей (CSS)
После того как вставил изображение, при его открытии выходит , «проверьте правильность введённого имени файла, соответствие регистра и отсутствие других ошибок в имени файла.Проверьте, не был ли файл переименован, удалён или перемещён.» Т.е я вставил имеющиеся в данный мом.изображение в формате JPEG , а изображеие в формате «png» при скачивании не сохраняется, сохраняется только в word
В смысле «при скачивании не сохраняются, сохраняется только в word»?
Это как? 🙂 И в чем, собственно вопрос, если он тут есть?)
На счет вставки изображений: должно вставляться и jpeg и png. Главное, чтобы расширение изображения совпадало с указанным в коде. Т.е. если изображение имеет расширение jpg, то и в коде должно быть jpg, а не jpeg.
На счет непонятных скачиваний и т.п. — обычно дело в браузере.
Ребята, проверяйте сайт в разных браузерах, при возникновении каких-либо неполадок.
Спасибо!!!!!!! наконец то нашла то что заработало!