Как вставить изображение на сайт?

Все, что видит посетитель на страницах сайта, отображается браузером на основании подробных инструкций, присланных ему сервером. Эти инструкции называются html-кодом страницы и состоят из отдельных «тегов», в которых описаны тип, внешний вид и расположение каждого элемента в отдельности. Чтобы поместить в страницу какой либо новый элемент (например - изображение), надо в ее исходный код добавить соответствующую инструкцию - тег. Рассмотрим - как это сделать проще всего.

Инструкция

Из-за того, что единого стандарта на системы управления не существует, процедура вставки изображения в визуальном режиме вашей системы может немного отличаться, но принцип будет таким же. По этой же причине WYSIWYG-режима может не оказаться в системе управления вашим сайтом. Тогда все же придется редактировать исходный код страницы на языке HTML (HyperText Markup Language - «язык разметки гипертекста»). Вам нужно будет вставить в нужное место кода тег, командующий браузеру показать здесь изображение. В самом простом варианте он должен выглядеть так:Здесь указан «относительный адрес» изображения – по этому адресу браузеру следует обратиться к серверу, чтобы получить от него файл картинки. Если адрес относительный, то браузер будет считать, что файл лежит в той же папке сервера, где и сама страница (или во вложенной папке). Но, чтобы не ошибиться, лучше указывать «абсолютный адрес» - например, так:Естественно, чтобы сервер мог найти и отдать браузеру изображение, его следует закачать в указанное место. Проще всего это сделать через файл-менеджер, который есть в каждой системе управления сайтом, а так же в панели управления вашей хостинговой компании. Можно сделать это и по ФТП-протоколу (File Transfer Protocol – «протокол передачи файлов»), воспользовавшись специальной программой - ФТП-клиентом. Их много, как платных, так и бесплатных - например, Cute FTP, FlashFXP, WS FTP и др. Но, естественно, установка, освоение и настройка программы потребуют времени, поэтому файл-менеджер для загрузки всего необходимого через браузер – более простой вариант.

Кроме адреса в html-теге изображения можно указывать и дополнительную информацию – «атрибуты» тега. Например, атрибут alt содержит текст для всплывающей при наведении курсора мыши на изображение подсказки:Его можно заменить атрибутом - title:--Размер прямоугольника, в котором браузер должен отобразить картинку, задают атрибуты width и height :--Атрибут border указывает ширину рамки вокруг картинки (в пикселах):Если изображение сделать ссылкой, то браузер нарисует вокруг нее синюю рамку. Чтобы от нее избавиться надо значению border присвоить ноль:--Два других атрибута содержат информацию о величине отступов картинки от соседних элементов (от строк текста, других картинок, и т.д.) - hspace задает размер отступа по горизонтали (слева и справа), vspace - по вертикали (снизу и сверху):

Оцените статью!