Делаем сайт на html: как вставить картинки.
Делаем сайт — как вставить картинки. Урок HTML – 3
Делаем сайт — как вставить картинки. Урок HTML – 3 |
В прошлой статье мы разобрались, как можно создать таблицу и вставить рисунки фоном таблицы или отдельных ячеек, но часто рисунки это не только фон, а еще, и само содержание сайта – фотографии, скриншоты, обои для рабочего стола компьютера. Нам по кайфу научиться вставлять рисунки в страницы сайта и мы научимся, всего за один урок.
Первое, что нужно вспомнить из прошлого урока, это пути к файлам.
Мы не знаем, как будет называться наш сайт (вдруг то доменное имя, которое мы хотим, уже занято) и поэтому будем использовать только относительные ссылки – они укорочены т.е. отсутствует имя нашего сайта с указанием протокола.
Пример абсолютной ссылки: http://www.vash-sait.xosting.ru/images/kartinka.jpg
Пример относительной ссылки: images/kartinka.jpg
Легко видеть, что от адреса в втором случае просто отрезана часть, где было имя сайта – использовать относительные ссылки нужно всегда, абсолютные ссылки только для обмена баннерами т.е. если ваша ссылка будет вставляться на чужом сайте она должна быть полной – абсолютной, а для своего сайта делаете укороченные – относительные ссылки.
Если файл в корневом каталоге, то путь к файлу будет выглядеть так — kartinka.jpg
А если в папке images есть папка diz то путь к файлу лежащему в папке diz будет выглядеть так: images/diz/kartinka.jpg
Тег вставки изображений:
<img src=”” > — это не парный тег, закрывать ничего не нужно, а путь к картинке пишется внутри кавычек.
Например: <img src=”images/diz/kartinka.jpg”
> (Постарайтесь без лишних пробелов до тегов и в кавычках).
Вот только если вы на этом остановитесь, то будете удивлены – почему картинка такая большая? Как уменьшить размер картинки? Как сделать чтобы не было рамки вокруг картинки?
Все очень просто – нужно прописать еще и параметры рисунка.
1. Ширина: Width – означает то же, что и для таблицы – длина объекта, в нашем случае изображения. Единицы измерения советую выбирать пиксели.
Пример: <img src=”images/diz/kartinka.jpg” Width=300px Height=25px>
3. Align – выравнивание, в основном используется выравнивание по центру align=center и top
4. border – рамка вокруг рисунка, в некоторых браузерах показывается по умолчанию, поэтому всегда ставим нулевую ширину рамки border=0
5. ALT – текст который будет виден если в браузере отключены рисунки.
Пример: <img src=”images/diz/kartinka.jpg” Width=300px Height=25px Alt=”прикольная картинка” border=0>
Другие теги осваивайте в случае, если собираетесь осваивать HTML профессионально.
Итак мы получили строку для вставки в документ HTML – вашу страничку с таблицей – возможно ваш логотип. Включаем просмотр HTML – кода (1 урок) и вставляем свой логотип в первую ячейку таблицы.
Не показывается картинка?
Нажмите обновить страницу (Ctrl+R).
Так и не показывается картинка?
А расширение точно jpg? Дело в том, что расширений
изображений очень много, возможно, если вы рисовали в Paint вставляете свой чудо-рисунок сохраненный в формате jpg он тоже не вставится – его расширения записано большими буквами – JPG а для компьютера это уже разные имена файлов kartinka.jpg и kartinka.JPG
Как проверить расширение файла – если у вас не компьютере на включена функция показа расширений их можно посмотреть вторым способом.
1. Нажимаем правой кнопкой мыши на рисунке и выбираем «свойства»
Делаем сайт: выбираем «свойства»
2. В появившемся окне нажимаем «изменить»
Делаем сайт: нажимаем «изменить»
3. В появившемся окне смотрим информацию о файле.
Делаем сайт — смотрим информацию о файле
Вот и все – смотрим расширение и записываем правильное в адрес рисунка.
Пример: <img src=”images/diz/kartinka.gif” Width=300px Height=25px Alt=”прикольная картинка” border=0>
Прошу не отмалчиваться, если есть вопросы, задавайте, если есть умные мысли присоединяйтесь.
Вставка рисунка,фото на страницу
Фото,рисунки и другая графика-важная деталь в оформлении страницы.Без них сайт выглядит менее проработанным,но и слишком награмождать сайт графикой не стоит.Для того,что бы поместить фото на страницу применяется тег <img src=»имя»>. Eсли ваше изображение называется к примеру foto.jpg, то запись будет такая: <img src=»foto.jpg»>
Файл который вы хотите вставить в страницу должен находиться в папке, где находятся все документы связанные с сайтом,вставить его туда можно простым копированием, если файл находится в другой папке,то надо указать путь к нему вот так: <img src=»../папка/имя»>
Фото или рисунок должны быть с расширением «jpg»(jpeg) , «gif» , «png».Обратите внимание на соответствие расширения рисунка в исходной папке и в теге для вставки.
К примеру,если файл в папке называется =»foto.jpg» а в теге=»foto.JPG», то браузер посчитает их за разные рисунки и вставка не получится.
Если изображение находится на другом сайте в интернете,то для вставки на ваш сайт необходимо указать полный адрес этого изображения.Адрес можно узнать из адресной строки браузера.
Желательно указать ширину width=»?» и высоту рисунка в пикселях,к примеру <img src=»?.jpg»>. Если ваш сайт состоит из достаточного количества ячеек таблицы, то вам не составит большого труда разместить изображение там где вам надо.Если вам не удается разместить там где бы вы хотели,тогда надо воспользововаться дополнительными средствами.Для этого служит тег
Бывает ситуация когда вставляемое изображение меньше чем ячейка таблицы и в этом месте образуется пустое место.Можно решить зту пустоту заполнением текста ,следующего за картинкой.Ниже показан пример обтекания картинки :
| Там ,где вы хотите чтобы текст обтекал рисунок справа ,надо вставить следующий атрибут CSS :
|
Некоторые браузеры помещают картинку в рамку.Что бы ее не было поместите в тег <img src=»?.jpg» значение border=»0″> вот так
<img src=»?.jpg»border=»0″>
Также в этом теге можно использовать параметр alt или title=»текст»,при наведении мышкой на картинку будет всплывать текст который вы напишите.
Что бы вставить рисунок на страницу в качестве фона применяется параметр background,который надо поместить в
тег body <body background=»имя рисунка»>
И в заключении напишем пример вставки картинки в HTML-страницу.
<html>
<head>
<title>Вставка фото</title>
</head>
<body>
<center><img src=»23.gif» border=»0″>
</center>
</body>
</html>
А это результат
sitesaid.ru
Как в HTML вставить изображение графическое, фоновое. Как вставить изображение в HTML с компьютера, по центру, в таблицу
Визуальная часть является одной из самых важных при работе с сайтами. Конечно, функционалу она уступает, но и скидывать со счетов её не следует. Давайте поговорим о том, как с компьютера на свой сайт установить изображение HTML. Одна возможность для этого предусмотрена или несколько? Как в HTML вставить изображение, чтобы другие люди его видели? Что лучше использовать – компьютер или сервер?
Что такое HTML?
Язык разметки гипертекстовых документов – вот как расшифровывается эта аббревиатура. С его помощью формируется костяк будущего сайта, здесь прорабатывается размещение основных элементов. Потом уже настраиваются каскадные таблицы стилей и php-файлы, отвечающие за передачу данных. Но в основе любой страницы лежит именно HTML. С его помощью, кстати, настраиваются изображения. Можно и другими способами, но если необходимо обеспечить первоначальную загрузку чего-то несложного, к примеру, рисунка, то используйте именно его. А сейчас перейдём к выяснению вопроса, как в HTML вставить изображение.
Использование тега img
Приступаем к использованию графики. Как вставить фоновое изображение в HTML-документ? И в самую первую очередь под этим подразумевают вставку файла в качестве объекта страницы. Для вот такого добавления и используется img. Данный тег является строчным элементом, в котором есть замещаемый контент. К нему относят всего четыре части языка гипертекстовой разметки. Одна – это src, height и width, они будут рассмотрены далее. Три другие – это object, embed (чтобы вставлять медиаконтент) и iframe (использование флеймов). Работает тег так, словно в нем присутствует строчный элемент. Единственная разница – используется посторонний внешний контент, который и отображается. При этом обязательно должен быть сторонний файл, который, собственно, и будет подгружаться. Если у вас есть вопрос, как вставить фоновое изображение в HTML, то лучше отбросить его. Потому что оно будет отображаться только тогда, когда работает сам компьютер, на котором изображение находится.
Использование атрибутов src
Итак, прорабатываем вопрос, как вставить в документ HTML графическое изображение. Чтобы указать путь к рисунку, который должен подгружаться, используют src. Общая схема выглядит следующим образом: необходимо использовать этот атрибут, знак равно и указать адрес.
Как только при разборе HTML браузер дойдёт до тега, он сразу же создаст область, в которой будет отображаться строчный элемент. Именно в него и будет грузиться внешний файл. Путь не должен содержать ошибок, поскольку именно по нему будет идти программа. И если она не найдёт файл, то будет отображаться значок ошибки, что не очень-то и эстетично выглядит. Как вставить изображение в таблицу HTML-документа? Необходимо прописать весь необходимый код в нужной ячейке.
Настройка изображения на сервере: height и width в теге img
Вот мы и знаем, как в HTML вставить изображение. Разберемся теперь, как его настроить. Как только файл начнёт загружаться на компьютер пользователя, сразу же будет определён размер картинки. А что если её начальные параметры не соответствуют желаемым? В таком случае помочь смогут параметры height и width (указываются в пикселях). В таком случае код будет прописываться следующим образом: сначала src и адрес файла. Потом по похожей конструкции указывается width, и какая должна быть ширина. И последним — height и высота. Вебмастеры часто делают такую ошибку: на сервер загружают большой файл, размер которого составляет несколько мегабайт. Прописывается путь и корректируется изображение до требуемого размера. В результате пользователь может лицезреть, как довольно медленно подгружается небольшое изображение. Это не очень привлекательно смотрится со стороны.Рекомендации по работе
Чтобы избежать негатива, заблаговременно уменьшайте размер изображения. Если нет уверенности, какие параметры нужны для привлекательного внешнего вида, создайте копию и экспериментируйте с нею. Также тщательно следует подходить к оптимизации веса. Необходимо без потери качества осуществлять уменьшение веса графических файлов путём переведения в другие расширения или используя специальные онлайн-сервисы и программы. Это оценят не только пользователи сайта, но и вебмастер – ведь такие файлы будут быстрее загружаться и меньше места занимать на хостинге.Пример возможностей записи
Давайте рассмотрим, как можно прописать путь к изображению:
1. Одно имя файла.
2. Указание адреса изображения, находящегося на одном локальном компьютере (сервере).
3. Детальный путь к местоположению файла, находящегося на другом хосте.
При использовании примера из первого пункта изображение должно находиться в той же директории, что и изображение. Во втором местонахождением является вложенная папка относительно текущей страницы. В третьем примере указывается абсолютный путь, где можно найти требуемое изображение. В последнем случае обратите внимание, что картинка может быть на любом сервере (если такое использование не запрещено в файле .htaccess). Правда, если её удалят, то и изображение на вашем сайте исчезнет. Особенность HTML такова, что требуется наличие только самого документа разметки, а всё остальное можно подгружать со сторонних серверов. Эти способы часто используют, чтобы увеличить скорость загрузки (но тут необходимо знать, как использовать этот инструмент).
Назначение alt и title в img?
Что делать, когда графический файл по какой-то причине не грузится вместе с документом HTML? Если будет неправильно прописан путь или что-то ещё, необходимо использовать атрибут alt. Он выполняет задачу альтернативного представления картинки. Вот допустим, что графика не грузится. Но браузер всё равно сформирует область под изображение. Также это необходимо в случаях, когда пользователь ожидает подгрузки, и необходимо показать ему, что программа готовится принять графику.Для демонстрации сопровождающего текста используется специальный атрибут title. По сути, это всплывающая подсказка, и использовать его можно почти для любого видимого элемента HTML-кода. Это хорошо, поскольку позволяет пояснять отдельные аспекты. Использование двоих приведенных в этом подзаголовке атрибутов выглядит таким образом: к рассмотренному ранее примеру после height добавляется сначала alt, а потом title.
Причем данные атрибуты могут не только послужить для того, чтобы создать удобства для посетителя. Они могут позитивно сказаться на продвижении сайта. Так, для этого следует постоянно употреблять в них ключевые слова. Это будет улучшать ранжирование ресурса в рейтинге сайтов и сервисах картинок поисковых систем. Но во всём следует соблюдать осторожность и рациональность.
Выравниваем картинки
Для изображений, да и вообще всех 4 элементов языка разметки, которые раньше упоминались, был введён атрибут align. С его помощью можно изменить местоположение картинки. По умолчанию она выравнивается по нижнему краю. За это отвечает bottom. А как сделать по верхнему? Для этого необходим top. На практике это будет выглядеть таким образом: после src, где указывается адрес изображения, добавляем атрибут align и его значение.И в строке, где расположена картинка, она будет выровнена по верхнему краю. Как в HTML вставить изображение по центру? Существует ещё одна возможность записи – middle. При её использовании ничего кардинально не меняется. При использовании такого кода рисунок будет выравниваться посередине. Также можно сделать, чтобы текст обтекал картинку. Для этого применяются атрибуты right и left. В таких случаях изображение становится «плавающим». Смещение влево выглядит так же, как и другие варианты написания. Использование right даст подобный результат с тем отличием, что картинка будет размещена справа. Применение этих инструкций имеет свои нюансы. Так, значительной проблемой является слишком близкое расположение текста к изображению. Из-за этого создаётся эффект прилипания, который довольно неприятен для глаза. Но это можно исправить с помощью каскадной таблицы стилей или HTML-кода. Используйте для таких изменений атрибуты vspace и hspace. Первый задаёт отступы снизу и сверху, а второй – справа и слева.
Делаем фон
Как вставить изображение в HTML-страницу сайта? Очень полезным для достижения этой цели является атрибут background. Он является составляющей элемента body. Его предназначение – показывать путь к графическому файлу, который должен заливать страницу, таблицу или отдельную ячейку. На практике использование выглядит следующим образом: адрес изображения прописывается уже как значение параметра bodybackground. Фоновое изображение, установленное таким образом, повторяется по осям ординат и абсцисс, начиная с верхнего левого угла. Предыдущие здесь состыковываются с последующими. Если есть желание залить что-то просто одним цветом, а не использовать картинку, то можно воспользоваться таким кратким описанием: номер гаммы указывается как характеристика для параметра body bgcolor. Здесь произошли небольшие изменения. Как видите, уже используется атрибут bgcolor. Для него требуется только указать, каким именно цветом будет залита страница или её часть. Вот как вставить изображение в HTML с компьютера, чтобы сделать его фоном и изменить цвет. В целом, чтобы полноценно освоить HTML, достаточно уделить ему неделю времени, и этого хватит с лихвой.Заключение
fb.ru