Рисунки.
В этой главе я расскажу о том как добавить на
нашу страничку графические изображения фотографию например, или рисунок, а
также о том, что можно с ними вытворять используя предложенный набор тегов 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.png"
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">
Меня зовут Карлсон! Я в меру
упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых
друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю
<font size="+2"
color="#ff0000">вареньё!!!</font> С нетерпеньем буду
ждать Вашего приглашения на чай. Прилечу!!
</font>
</p>
</body>
</html>
Единственное, что Вам в этом примере не знакомо так
это надпись -
- это есть так называемый спецсимвол в данном случае - пробел.. о спецсимволах
и их назначении я расскажу более подробно в 6 главе.
Честно говоря, мне мой пример не сильно по вкусу,
неряшливо как-то.. Но цель показать, что можно делать с изображениями думаю
достигнута..
Полезные советы:
·
Используя графику, будьте осторожны.. не стоит
размещать на своей странице большие весом мегабайтные изображения, пожалейте
время и деньги посетителей страницы. Большой объём графики при низкой скорости
интернета может привести к тому, что посетитель закроет Вашу страницу ещё до
того момента как она загрузится.
·
Помните, что есть пользователи, которые
умышленно в своём браузере отключают загрузку рисунков, дабы сэкономить на
трафике, а по сему рекомендую соблюдать следующие советы:
·
Если рисунки выполняют роль кнопок (см. Глава 5),
обязательно подписывайте их (атрибут alt)
к примеру: "Перейти на главную страницу" или "Скачать" дабы
человек с отключенной графикой мог хоть как-то ориентироваться на Вашей странице.
·
Используя картинку в качестве фона документа
дублируйте ёё заливкой фона каким либо подходящим для фона страницы цветом
(атрибут bgcolor тега
<body>)
вот так например:
<body
bgcolor="#008000" background="fon.jpg">
Это будет значить, что если к примеру не загрузится
Ваша изысканная зелёная текстура, фон будет просто зелёным - что лучше, нежели
чем белый цвет в общем дизайнерском решении сайта.