Рисунки

В этой главе я расскажу о том как добавить на нашу страничку графические изображения фотографию например, или рисунок, а также о том, что можно с ними вытворять используя предложенный набор тегов html языка.

Путь к файлу

Итак, допустим Вы пишете сайт о себе любимом и хотите вставить в него свою фотографию, чтобы люди зашедшие на страничку смогли не только читать Ваши рукописи, но и вдоволь полюбоваться Вашим портретом.

Есть у Вас значит фотография, которая где-то лежит на Вашем жёстком диске.. копируем ёе и вставляем в ту папку (директорию) где уже лежит заготовка будущей страницы, ну то есть туда же, куда сохраняете блокнотом html документ. Так, вот для того чтобы теперь вставить её в нашу страничку к ней нужно указать путь.

делается это так:

<img src=”foto.jpg”>

Где foto.jpg это название Вашей фотографии в данном случае, так как фото лежит рядом с html документом, путь к ней мы не указываем.

Да, помните, тег <img> не требует закрывающего тега!

Теперь приведу ряд примеров где путь указывается:

<img src=”myfoto/foto.jpg”> – Такая запись подразумевает, что в директории где расположен наш html документ есть папка myfoto в которой расположен файл foto.jpg
<img src=”myfoto/graphics/foto.jpg”> – Значит рядом с документом расположена папка myfoto, в ней еще одна папка с названием graphics, и уже в ней нужная нам фотография foto.jpg которую нужно выложить для всеобщего обозрения.
<img src=”../foto.jpg”> – А это значит, что фото размещено на уровень выше от документа
<img src=”../../foto.jpg”> – Так соответственно на два уровня выше, сколько поставите../ настолько и поднимитесь.

Так же можно указывая место фотографии, ссылаться на тот или иной интернет ресурс
<img src=”http://www.site.ru/foto/foto.jpg”>

Ну что, давайте попробуем выложить фото.

Вот мой пример:

<html>
<head>
<title>Моя первая страничка с фото</title>
</head>
<body text=”#484800″ bgcolor=”#e8e8e8″>
<center>
<h2> <font color=”#008000″> Привет мир!!!</font> </h2>
</center>
<p align=”justify”>
<font size=”+1″>
<img src=”graphics/foto.jpg”>
Меня зовут Карлсон! Я в меру упитанный мужчина – это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size=”+2″ color=”#ff0000″>вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!
</font>
</p>
</body>
</html>

Как видно из этого примера фотография появилась, но вместе со своим появлением сдвинула текст, а не хотелось бы..

Атрибуты тега <img>

Поговорим о расположении изображений относительно текста.

Как и другие теги <img> тоже имеет свои атрибуты.. уже знакомый нам атрибут align “выравнивание” применим и к данному тегу

<img src=”foto.jpg” align=”left”> – фото слева от текста
<img src=”foto.jpg” align=”right”> – фото справа от текста
<img src=”foto.jpg” align=”top”> – текст выше фото
<img src=”foto.jpg” align=”bottom”> – текст ниже фото
<img src=”foto.jpg” align=”middle”> – ну и соответственно текст посередине

Помимо align тег <img> имеет еще ряд атрибутов, но сначала расскажу немного о пикселях. Пиксель (точка), наверное Вы не раз слышали это слово и думаю основная масса народа которая держала мышку в руках знает что это такое, но всё же.. Пиксель -это элементарная неделимая единица изображения. Каждый пиксель имеет свои координаты, например, самый верхний левый пиксель на мониторе имеет координаты x=1, y=1, а самый нижний правый в зависимости от разрешения монитора.. x=800, y=600 – будет соответственно при разрешении 800 на 600 точек. Впрочем, эта информация пригодится нам потом, а сейчас нужно усвоить, что все расстояния в графических изображениях меряются пикселями.. так картинка длинной 800 пикселей и шириной в 600 пикселей при указанном разрешении заполнит весь экран.

Теперь продолжим..

<img src=”foto.jpg” vspace=”15″> – Атрибут vspace задаёт расстояние по вертикали от рисунка до текста, в данном случае мы задали расстояние в 15 пикселей
<img src=”foto.jpg” hspace=”25″> – Расстояние по горизонтали соответственно
<img src=”foto.jpg” width=”180″> – Ширина непосредственно самого изображения
<img src=”foto.jpg” height=”240″> – Высота изображения. Если атрибуты width и height не использовать, то ширина и высота изображения по умолчанию будет равна реальным её размерам, без каких либо искажений.
<img src=”foto.jpg” border=”5″>– Бордюр, рамка вокруг изображения и её толщина в пикселях.
<img src=”foto.jpg” border=”5″ bordercolor=”#008000 “> – bordercolor – это цвет рамки.
<img src=”foto.jpg” alt=”Это моя фотка!!!”> -Атрибут alt – это описание изображения. Если навести курсор на наше фото и подержать его там несколько секунд, выскочит надпись -Это моя фотка!!!
<img src=”foto.jpg” title=”Это моя фотка!!!”> – альтернатива alt в данном случае.

А еще изображение можно сделать фоном страницы.. для этого используем атрибут background “фон” открывающего тега <body>

Вот так:

<body background=”foto.jpg”>

Выравнивание рисунка.

Теперь расскажу о том как разместить нашу фотографию в нужном месте страницы. На самом деле об этом я уже рассказывал.. вспомните вторую главу, где говорилось о том как можно выровнять текст.. эти же теги применимы и к выравниванию изображения… так что, пожалуй, повторятся не буду, просто приведу пример, а Вы уж самими подумайте почему одно и тоже фото очутилось в том или ином месте..

Пример:

<html> 
<head> 
<title>Расположение изображения</title>
</head>
<body>
<img src=”foto.jpg “> 
<center><img src=”foto.jpg “></center>
<div align=”left”><img src=”foto.jpg”></div>
<br>
<div align=”right”><img src=”foto.jpg”></div>
<br> 
<div align=”center“><img src=”foto.jpg”></div>
</body>
</html>

Советую Вам самостоятельно поупражняется с размещением фотографии на своей странице. Меняйте размеры, положения, используйте различные сочетания с текстом, отступы, рамки.. Тренируйтесь!

Итог главы:

<html>
<head>
<title>Моя первая страничка с фото</title>
</head>
<body text=”#484800″ bgcolor=”#ffffff” background=”graphics/fon.jpg”>
<center>
<img src=”graphics/privet.jpg” width=”400″ height=”80″ alt=”Привет мир!!!”>
</center>
<p align=”justify”>
<img src=”graphics/foto.jpg” align=”left” hspace=”15″ width=”140″height=”120″ alt=”Это моя фотка!!!”>
<font size=”+1″>
&nbsp;&nbsp;Меня зовут Карлсон! Я в меру упитанный мужчина – это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size=”+2″ color=”#ff0000″>вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!
</font>
</p>
</body>
</html>

Полезные советы:

  • Используя графику, будьте осторожны.. не стоит размещать на своей странице большие весом мегабайтные изображения, пожалейте время и деньги посетителей страницы. Большой объём графики при низкой скорости интернета может привести к тому, что посетитель закроет Вашу страницу ещё до того момента как она загрузится.
  • Помните, что есть пользователи, которые умышленно в своём браузере отключают загрузку рисунков, дабы сэкономить на трафике, а по сему рекомендую соблюдать следующие советы:
  • Если рисунки выполняют роль кнопок, обязательно подписывайте их (атрибут alt) к примеру: “Перейти на главную страницу” или “Скачать” дабы человек с отключенной графикой мог хоть как-то ориентироваться на Вашей странице.
  • Используя картинку в качестве фона документа дублируйте ёё заливкой фона каким либо подходящим для фона страницы цветом (атрибут bgcolor тега <body>)вот так например:<body bgcolor=”#008000″ background=”fon.jpg”>Это будет значить, что если к примеру не загрузится Ваша изысканная зелёная текстура, фон будет просто зелёным – что лучше, нежели чем белый цвет в общем дизайнерском решении сайта.

Залишити відповідь