Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Текст плюс графика
|
|
На предыдущем уроке вы научились добавлять и форматировать текст на Интернет страничке. Но как правило Интернет страничка содержит не только текст, но и графику.
Для урока понадобится интернет страничка с текстом, которую мы создали на втором уроке и графическое изображение (любое, например ваша фотография под именм, но обязательно оптимизированное дня веб). Создайте папку site, перенесите в нее файл text.html и внутри папки еще одну папку img и перенесите в нее foto.jpg.
Для того, чтобы добавить изображение на интеренет страничку используется дескриптор img, у которого есть несколько атрибутов. Вот полная конструкция:
< img src=” источник изображения ” border =” ширина рамки ” align=” выравнивание ” width=” ширина ” height=” высота ” hspace=” отступ горизонтальный ” vspace=” отступ вертикальный ” alt=” всплывающая подсказка ” name=” имя изображения ” lowsrc=” альтернативный рисунок ”>
Давайте по порядку рассмотрим каждый атрибут:
| Атрибут | Пояснения |
| src=”источник изображения” | Источник изображения, в нашем примере будет так < img src=”img/foto.jpg”> |
| width = число | Ширина изображения в пикселах |
| height = число | Высота изображения в пикселах |
| border =число | Рамка вокруг изображения в пикселах. Если изображение - гиперссылка, то появляется автоматически. Можно ее убрать, установив border = 0 |
| align = left / right / top / middle / bottom | Выравнивание изображения слева, справа, по верху, в середине или по низу относительно текста |
| hspace = число | Свободное пространство слева и справа от изображения в пикселах |
| vspace = число | Свободное пространство сверху и снизу от изображения в пикселах |
| lowsrc = “источник альтернативного изображения” | Адрес альтернативного изображения, как правило более низкого качества. Браузер который поддерживает этот параметр, сначала загрузит это изображение, а потом уже изображение указанное атрибутом src |
| alt=”Это я” | Всплывающая подсказка, которая появляется при наведении мышки на изображение. |
| name=”имя изображения” | Имя изображения. Если на изображение ни где не ссылаются, то необязательный параметр. |
Пример типичного дескриптора добавления изображения:
< img src=”img/foto.jpg” border =” 0 ” width=” 200 ” height=” 200 ” alt=” моя фотка ”>
Всегда указывайте ширину и высоту изображения в параметрах width и height, резервируя тем самым место под изображение в браузере еще до его загрузки, что бы не получилась такая ситуация: загружается текст и маленький квадратик под изображение, и в процессе загрузки изображение увеличивается, а текст начинает ездить по всему экрану.
Представим, что у вас изображение имеет параметры 380 на 340, указав параметры вы понимаете, что изображение занимает слишком много места. Автоматически хочется указать параметр ширины и высоты меньше. Но это глупо, все равно браузер загрузит в свою память все изображение, а потом уже будет его уменьшать. Так что размены изображения лучше менять в графическом редакторе, например в Photoshop, воспользовавшись командой меню Image – Image Size. И только затем разместить изображение с новыми параметрами ширины и высоты.
Параметр alt можно не указывать, но если у пользователя изображение по каким-то причинам не загрузилось, он по крайней мере будет знать, что оно из себя представляло.
Следует сказать пару слов по поводу формата изображения. Если на изображении насчитывается до пару сотен цветов или оно имеет фотографическое качество, то пользуйтесь форматом jpg. Если же изображение с крупными монотонными областями или текстом, то пользуйтесь форматом gif. И всегда перед размещением оптимизируйте для веб, для максимальной скорости загрузки изображения и интернет странички в целом.
Практика:
Оформить страничку своей автобиографии: добавить фон, созданный своими руками, добавить фотографию.