- •Вводная часть в язык html
- •Добавление и редактирование текста.
- •Список основных тегов для форматирования текста в html коде:
- •Дополнительные возможности в языке html для форматированию текста.
- •Списки в тексте, как их создавать и использовать в документе.
- •Учимся вставлять ссылки в документ html.
- •Изображения и картинки в html документах.
- •Так же есть еще парочка необходимых атрибутов.
- •Теперь Будем Делать Изображение Ссылкой.
- •Цвета на странице.
- •Подробнее о таблицах в html.
- •Давайте Попробуем Создать Таблицу Из Двух Рядов и Двух Столбцов:
- •А как объединить ячейки?
- •Разберем последние четыре атрибута:
Изображения и картинки в html документах.
Нельзя представить ни один сайт без изображений. Так как они используются повсюду, нам просто необходимо разобраться, что к чему. Существует три типа файлов с изображениями, которые мы можем разместить на страницах:
GIF (Graphics Interchange Format)
JPG / JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
Немного о форматах:
GIF – использует всего 256 цветов и соответственно лучше всего подходит для рисунков содержащих малое кол-во оттенков. Так же он поддерживает прозрачность изображений. JPEG – данный формат использует до миллиона цветов. Чаще всего используется для качественной графики и фотографий (снимки, содержащие огромное количество оттенков). PNG – относительно новый формат. Во многом даже превосходит JPEG и GIF: миллионы цветов и эффективное сжатие. То же поддерживает прозрачность. Какой выбирать формат – это ваше дело. Но я советую выбирать оптимальное качество при минимальном размере. Если изображение лежит той же папке что и страница, то вставить её очень легко.
1 |
<img src="pchelka.jpg" alt="" /> |
Вот результат:
Нам понадобилось: элемент IMG не имеющий закрывающего тега и атрибут SRC (сокращение от source – положение) указывающий, где находится изображение. Так же можно легко вставлять изображения с других сайтов или папок. Нужно просто указать необходимый путь, такой же, как при создании сылок.
Посмотрим еще пару примеров:
1 2 3 4 5 6 |
<!-- если бы изображение находилось в папке images --> <img src="images/pchelka.jpg" alt="" /> <!-- если б находилось на сайте www.primer.com --> <img src="http://www.primer.com/pchelka.jpg" alt="" /> <!-- если б находилось на сайте www.primer.com в папке images --> <img src="http://www.primer.com/images/pchelka.jpg" alt="" /> |
Вот еще очень необходимые атрибуты: ALIGN – выравнивает картинку по горизонтали. Очень полезное свойство, если картинку будет обтекать текст. Обычно используют LEFT (выравнивание по левому краю, текст будет обтекать справа) и RIGHT (выравнивание по правому краю, текст обтекает слева). Если содержится текст на странице, то это свойство обязательно.
HSPACE и VSPACE – размер отступа в пикселях по горизонтали и по вертикали от картинки до других объектов документа. Названия легко запоминаются, стоит просто перевести с английского. HSPACE – Horizontal Space – горизонтальный отступ и VSPACE – Vertical Space – вертикальный отступ.
HEIGHT и WIDTH – параметр высоты и ширины изображения в пикселях. Важное правило web-мастера – всегда явно задавать размеры картинки в атрибутах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В другом же случае документ при загрузке каждой картинки будет заново перерисовываться. А если же у вас медленный компьютер (или при подключении к сети через модем) то это будет просто ужасно смотреться. Если же не задавать размер, то страница будет просто дольше загружаться. Так же я бы не советовал вам искажать реальных размеров картинки.
Теперь разберем все на примере:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- первый пример с отступами и выравниванием по левому краю-->
<img src="pchelka.jpg" alt="" hspace="25" vspace="25" width="75" height="69" align="left" />
Любой Интернет бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.
<!-- второй пример с отступами и выравниванием по правому краю-->
<img src="pchelka.jpg" alt="" hspace="15" vspace="15" width="65" height="59" align="right" /> Любой Интернет бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты.
<!--третий пример без отступов, с выравниванием по левому краю-->
<img src="pchelka.jpg" alt="" width="65" height="59" align="left" /> Любой Интернет бизнес немыслим без сайта. Так что первым делом не мешало бы научиться создавать сайты. В данном случае фраза "научиться создавать сайты" будет означать - знать на хорошем уровне язык гипертекстовой разметки HTML и каскадные таблицы стилей CSS, которые значительно расширяют возможности HTML и позволяют создавать действительно стильные и качественные сайты. |
Так это будет выглядеть в браузере: