ПоделитьсяTweetПоделитьсяGoogle
Всем привет! Доброго времени суток.
В этом посте мы добавляем изображение в текст и с помощью html тегов можем расположить нашу картинку как угодно и где задумается.
Прежде всего надо понять что все файлы нашего документа, в данном случае страницы должны лежать в одной папке. Значит нашу картинку которая лежит на жёстком диске компьютера копируем в папку где находится заготовка нашей страницы, теперь чтобы вставить её в нашу страничку нужно указать путь к ней. Допустим это фото:
Тег не требует закрывающего тега!
Где foto.jpg это и есть название фотографии в данном случае. Так мы прописываем если фото лежит в той же папке что и index файл
Но обычно изображений больше чем одно и для них создаётся отдельная папка ( images-например), тогда прописать нужно путь к ней и затем к картинке, в данном случае фото:
— Такая запись означает, что в директории где расположен html документ лежит папка images в которой расположен файл foto.jpg
— Такая запись говорит браузеру о том, что фото расположено в папке images2 , эта папка в свою очередь находится в папке images. Как вариант если это сайт и на нём много изображений, которых вебмастер разделил на 2 категории и разместил в 2 папки.
ЧИТАТЬ: Иконочные шрифты или как подключить font awesome
если перед файлом стоит две точки и слеш ( косая черта) ../ это означает что файл находится на уровень выше от документа
— Изображение размещено на уровень выше
— Соответственно на два уровня выше.
Так же можно указывая расположение изображения, указать тот или иной интернет ресурс, где оно находится.
Рассмотрим атрибуты тега
Мы помним атрибут (надеюсь 🙂 ) align «выравнивание» применим и к данному тегу
— фото слева от текста
— фото справа от текста
— текст выше фото
— текст ниже фото
— текст посередине
Уясним для себя понятие пиксель. Пиксель (точка) — это элементарная неделимая единица изображения (почти как атом когда-то тоже был не делим, прийдёт время окажется, что его тоже можно поделить 🙂 ) . Каждый пиксель имеет свои координаты, например, самый верхний левый пиксель на мониторе имеет координаты x=1, y=1, а самый нижний правый в зависимости от разрешения монитора.. x=800, y=600 — будет соответственно при разрешении 800 на 600 точек. Расстояния в графических изображениях измеряются пикселями. Картинка длинной 800 пикселей и шириной в 600 пикселей при указанном разрешении заполнит весь экран.
ЧИТАТЬ: Шаблон Lending Page — Soulyoga
— Атрибут vspace задаёт расстояние по вертикали от рисунка до текста, то есть 15 пикселей
— Расстояние по горизонтали соответственно 25 px
— Ширина самого изображения
— Высота нашего изображения. Если атрибуты width и height не прописывать, то ширина и высота изображения по умолчанию будет равна её реальным размерам.
— Рамка вокруг изображения и её толщина в пикселях.
— bordercolor — цвет рамки.
-Атрибут alt — это описание изображения. Если навести курсор на наше фото и подержать его там несколько секунд, выскочит надпись -Дядя Вася
— альтернатива alt в данном случае.
Так же изображение можно сделать фоном страницы. Атрибут background «фон» открывающего тега указывает браузеру на это
Вот так:
Выровнять изображение
Для выравнивания используются те же теги что и для текста
ЧИТАТЬ: Комментарии Вконтакте на сайте
— в центре
— слева
— справа
Поупражняйтесь самостоятельно. Помните чем больше вы в ручную прописываете теги, тем быстрее идёт запоминание. Что непосредственно скажется в будущем при собирании сайта , как самому так и редакции шаблона скачанного в интернете.
На этом заканчиваю урок » вставить изображение в HTML » и до следующих…
Всем пока и всем всего! :bye:
ПоделитьсяTweetПоделитьсяGoogle