Приукрасить и нарядить нашу страничку можно с помощью вставки изображений в страничку, которых можно туда установить любое количество, если конечно ваш объем места на сервере под сайт не является мизерным. Только сильно не увлекайтесь вставкой изображений, излишнее количество графических изображений увеличивает вес страниц и время их загрузки браузером. Можно использовать как готовые графические изображения так и создавать их самому, если у Вас есть такие навыки, если нет вы можете научиться этому из сети , набери в поиске «Уроки Фотошопа», тут для фантазии границ нет. А для того чтобы нам научиться вставлять изображение в страничку, мы будем использовать для этого уже готовый материал, выбрав любой рисунок расположенный на Вашем жёстком диске С.
Графические изображения которые Вы будете вставлять в страничку сайта обязательно должны быть формата, который может обрабатывается браузерами – это JPEG, GIF и PNG. Данные форматы являются наиболее приемлемыми, так как имеют наименьший размер файла, что в свою очередь сокращает время загрузки страницы браузером из сети. И мой совет используйте лучше формат GIF – он имеет наименьший размер.
Для того, чтобы вставить изображение в страничку сайта, нужно для начала скопировать его в общую папку «Мой сайт», которую мы уже создали. Путем перетаскивания файла или правой кнопкой мышки щелкаем на графическом файле – копировать, делаем его копию и вставляем в папку «Мой сайт».
Для вставки изображения в страничку сайта используется одиночный тег <img>, который не имеет закрывающего тега. Применяется данный тег с атрибутом src, значение которого соответствует имени вставляемого графического файла или его адресу в сети. Для визуального выделения графического рисунка можно применить атрибут <border>, который не является обязательным атрибутом и лишь заключит изображение в обводящую рамку. Толщина рамки будет соответствовать цифровому значению атрибута <border>. Указав значение border=1 получим рамку толщиной в 1 пиксель. Но можно оставить графическое изображение и без рамки, присвоив атрибуту border значение "0". Наглядно на примере HTML-код для вставки изображения будет иметь следующий вид:
<img src="имя графического файла.gif">
и обведенный в рамку толщиной в 1 пиксель:
<img src="имя графического файла.gif" border=1>
Попробуем вставить какое-нибудь изображение в нашу страничку и посмотреть, что получиться. Для этого копируем любой рисунок с форматом файла gif, jpeg или png как говорилось ранее в папку «Мой сайт», открываем в той же папке файл site.html в браузере – затем жмем правой кнопкой мышки на чистом поле – просмотр HTML-кода и далее прописываем следующее изменение между тегами <body></body>:
<H1 align=center>Мой сайт!</Н1>
<h4>Сегодня был создан мой первый сайт, в котором я рассказу о себе и о своих увлечениях.</h4>
<img src="имя графического файла.gif" border=1>
сохраняем сделанные изменения и смотрим получившийся результат после вставки изображения в страничку, нажав кнопку обновления на панели меню браузера или закрыв его и открыв файл site.html заново.
Далее в следующих уроках, мы научимся не только делать вставку изображения на страничку сайта, но и использовать это графическое изображение в качестве ссылки перенаправления на другой сайт или другую страницу.
