Урок 3
Картинки вставляются с помощью тега <img> с атрибутом src, прописывается это так:
Допустим, Вы создали в папке "Мои документы" новую папку и назвали ее "Уроки" Внутри папки "Уроки" тоже создаете новую папку и даете ей имя, обычно папке с картинками дается имя "images",но можно назвать и по другому, в эту папку помещаете картинки, которые будете применять при создании сайта. Так же, в папку "Уроки" помещаете файлы сайта, как показано на изображении справа.
В этом случае, код для вставки картинки пишется так:<img src="images/имя картинки"> Если у папки с картинками будет другое имя, то вместо images пишете ее имя. Так же для картинок применяются размеры,width и height, в коде будет так:
<img src="images/имя картинки" width=120 height=130> Если не указывать размер картинки, то по умолчанию она будет вставлена на сайт своего реального размера
Если картинка лежит в той же папке, где и файлы сайта, как на картинке слева,то в этом случае, код для вставки картинки пишется так:
<img src="имя картинки" width=120 height=130>
Для выравнивания картинок применяется атрибутALIGN. Этот атрибут применяется со значениями
ALIGN=right - картинка будет прижата к правому краю,а текст будет располагаться слева от картинки.
ALIGN=left - картинка будет располагаться слева, а текст будет справа от картинки.
ALIGN=top - текст будет располагаться сверху
ALIGN=middle - текст будет располагаться посредине
ALIGN=bottom - текс будет располагаться под картинкой
Следующие атрибуты, которые применяются к картинкам это VSPACE и HSPACEVSPACE=5 - вертикальный отступ картинки от края
HSPACE=5 - горизонтальный отступ от края И наконец атрибут ALT - это подсказка,
при наведении курсора к картинке
В коде будет так:
<img src="имя папки/имя картинки" width=120 height=130 align =left vspace=5 hspace=5 alt="изображение компьютера">
Возмем созданную нами в предудущем уроке виртульную страничку сайта и поместим на шапке картинку. Подвидите курсор мыши к картинке и увидите значение атрибута ALT
Строка для шапки
Строка для меню
Левая колонка Строка для содержимого сайта Правая колонка
Низ сайта
Зеленым цветом выделен код вставленной картики. В код не вставлены атрибутыVSPACE и HSPACE,так как размер наглядной таблицы маленький и не даст видимого эффекта, попробуйте их вставить сами, придав им разное значение.
<HTML>
<HEAD>
<TITLE>Построение таблицы - 3</TITLE>
</HEAD>
<BODY >
<TABLE border=0 cellpadding=0 cellspacing=0>
<TR>
<TD width=400 height=80 bgcolor="#FFCCCC" colspan=3>
<img srs=images/az5.jpg" width=100 height=80 align=middle alt="Изображение компьютера">Строка для шапки
</TD>
</TR>
<TR>
<TD width=400 height=25 bgcolor="#CC9999" colspan=3>Строка для меню</TD>
</TR>
<TR>
<TD width=100 height=190 bgcolor="#FFCCCC" >Левая колонка</TD>
<TD width=200 height=190 bgcolor="#FCF2EE">Для содержимого</TD>
<TD width=100 height=190 bgcolor="#FFCCCC">Правая колонка</TD>
</TR>
<TR>
<TD width=400 height=25 bgcolor="#CC9999" colspan=3>Низ сайта</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Любую картинку или изображение можно сделать фоном. В самом начале нашего первого урока, мы уже прописывали в теге BODY атрибут BACKGROUND, когда картинку делали фоном страницы. И сейчас в нашей виртуальной страничке сайта, в ячейке для шапки, картинку сделаем фоном. В отличии от картинки, на которой нельзя писать текст, он может располагаться только по сторонам - справа,слева и т.д. На фоновой картике можно писать текст в любом месте
Здесь будет название сайта
Строка для меню
Левая колонка Строка для содержимого сайта Правая колонка
Низ сайта
Удалите зачеркнутый код синего цвета и вставте код зеленого цвета. Обратите внимание, что код зеленого цвета вставляется внутри тега <TD>, в отличие от кода синего цвета,который написан между тегами <TD></TD>
<HTML>
<HEAD>
<TITLE>Построение таблицы - 3</TITLE>
</HEAD>
<BODY >
<TABLE border=0 cellpadding=0 cellspacing=0>
<TR>
<TD width=400 height=80 bgcolor="#FFCCCC" colspan=3background="images/az6.jpg" align=center>
<img srs=images/az5.jpg" width=100 height=80 align=middle alt="Изображение компьютера"> Здесь будет название сайта
</TD>
</TR>
<TR>
<TD width=400 height=25 bgcolor="#CC9999" colspan=3>Строка для меню</TD>
</TR>
<TR>
<TD width=100 height=190 bgcolor="#FFCCCC" >Левая колонка</TD>
<TD width=200 height=190 bgcolor="#FCF2EE">Для содержимого</TD>
<TD width=100 height=190 bgcolor="#FFCCCC">Правая колонка</TD>
</TR>
<TR>
<TD width=400 height=25 bgcolor="#CC9999" colspan=3>Низ сайта</TD>
</TR>
</TABLE>
</BODY>
</HTML>
На этом работу с изображениями заканчиваем, в следующем уроке научимся делать ссылки на внутренние страницы сайта,сайты в интернете и другие ссылки
Сайт создан в системе
uCoz
