Глава четвертая - картинки
Теперь собстна речь пойдет о том как вставлять в html-документ картинки. Тэг для вставляния картинки:
<img src="путь картинки">
Если у вас нету под рукой подходящей небольшой картинки возьмите вот эту:
(Щелкните на ней правой кнопкой мыши и выберите "Сохранить рисунок как...", сохраните в папку с вашим сайтом)
Если вы щелкните правой кнопкой и выберите свойства, там увидите написан URL картинки, или по другому путь к ней (ее адрес).
Путь бывает относительный и абсолютный. Тот что вы увидели в свойствах есть абсолютный. То есть абсолютный это полный путь, он определяет адрес однозначно. Относительный путь это путь относительно той папки, в которой лежит ваш хтмл-документ. Итак вы сохранили картинку в ту же папку где у вас лежит ваш index.html . Тогда ее относительный путь можно не указывать, достаточно указать имя файла. Тогда вставка в документ картинки будет такая:
<img src="ava20.gif">
Т.е. мы просто написали имя файла картинки. Если бы мы в этой папке создали еще папку специально для картинок и назвали бы ее например Images, то ее путь был бы таким:
<img src="Images/ava20.gif">
то есть мы указываем что сначала от исходного документа браузеру надо зайти в папку Images а уже оттуда загрузить картинку с именем ava20.gif
Если же вы хотите загрузить картинку на свой сайт откуда-то из другого места в интернет то в пути нужно написать ее URL (адрес в интернете). Однако же следует заметить что пользоваться чужими картинками на своем сайте нехорошо:)
Попробуем вставить картинку в наш пример:
<html>
<head>
<title>
Моя первая страница!
</title>
</head>
<body>
<img src="ava20.gif">
<p align="center">
<font color="lime" size="+2"> Здравствуйте, это моя первая страница. </font><br>
Я ее сделал сам! Добро пожаловать!<br>
Как здорово что теперь я могу сделать свою страницу в интернете, теперь мои друзья могут зайти на сайт и почитать обо мне. <br>
Пусть все думают что я клевый программер.
</p>
</body>
</html>
Итак мы видим (пример) что прописав тэг для картинки перед текстом, получили сначала картинку потом текст. Логично предположить что разместив этот тег после текста получит обратный результат. Можно и в середине текста, короче в любом месте между <body> и </body>.
Возникает вопрос, а можно ли сделать так чтобы картинка распологалась слева, а текст справа? Как вы наверное сразу догадались, можно. Для этого у этого тэга существуют параметры:
align - выравнивание изображения в документе
Значения которые может принимать этот параметр:
align="left" - картинка слева, текст обтекает ее справа
align="right" - картинка справа, текст обтекает ее слева
Итак, чтобы картинка была слева а текст справа, нужно вместо <img src="ava20.gif"> написать <img src="ava20.gif" align="left">. Сделайте это в нашем примере. Да, и уберите центрирование текста по центру, поставьте например по ширине (значение align="justify"). Если у вас не выходит подсмотрите правой кнопкой мыши код в этом примере: пример.
Другие параметры для картинок:
height="высота"
width="ширина"
Высота и ширина картинки должна быть в пикселях. Таким образом можно сделать так что большая картинка будет уменьшена браузером до размеров указанных вами. Конечно сама картинка не уменьшится, просто она будет отображатся маленькой, но грузиться долго. Не рекомендуется большие картинки уменьшать, обо во-первых не очень красиво получается, во-вторых грузится то реальная большая картинка, а с медленным интернетом это не есть хорошо. Многие рекомендуют всегда указывать размеры картинки, даже если вы не хотите изменять ее размер (указывать реальный), это способствует более быстрой загрузки и еще там чето, но я сам практически никогда не ставлю :) Еще параметры:
border="размер" - задает толщину рамки вокруг картинки, по умолчанию 0(без рамки), так что можно параметр этот не использовать (дело вкуса).
alt="текст" - текст в виде подсказки, если курсор мыши навести на картинку
Чтобы продемонстрировать последний тэг, наведите курсор на картинку:
Что еще сказать о картинках...Картинки бывают формата(расширением) bmp, jpg(jpeg) и gif. Формат bmp практически не используется, так как одинаковая картинка в формате bmp более чем в 10 раз больше "весит" чем в jpeg. Для создания и обработки картинок обычно используют фотошоп. Если у вас установлен фотошоп там даже есть специальный пункт "save for web", и можно сохранять картинки в форматах jpg или gif, причем различного качества и соответственно размера.
Глава пятая
|
