№ | Слайд | Текст |
1 |
 |
Занятие 5Иллюстрации и гиперссылки |
2 |
 |
Как вставлять картинкиquot;" <Img> - одиночный тег для размещения картинки src=“url" – обязательный атрибут тега <img> URL – ссылка (путь к картинке), желательно, чтобы картинка находилась в той же папке, что и ваш документ |
3 |
 |
<HTML> <HEAD> <title>Мой первый шаг </title> </HEAD> <BODYtext="#336699" bgcolor="#000000"> <p align=“center”> <H2>Здравствуйте, это моя первая страница. </H2> </p> <BR> <font color=“red"> <H3> Добро пожаловать! :) </H3> </font> <p align="justify"> <img src="primtocodephoto.gif"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <font size=+3 color=“olive”>еще один виртуальный друг? :) </font > </p> </BODY> </HTML> |
4 |
 |
<HTML> <HEAD> <title>Мой первый шаг </title> </HEAD> <BODYtext="#336699" bgcolor="#000000"> <p align=“center”> <H2>Здравствуйте, это моя первая страница. </H2> </p> <BR> <font color=“red"> <H3> Добро пожаловать! :) </H3> </font> <p align="justify"> <img src="SP_A0268.jpg"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <font size=+3 color=“olive”>еще один виртуальный друг? :) </font > </p> </BODY> </HTML> |
5 |
 |
Что можно сделать с картинкойquot;" Дополнительные атрибуты тега <img> Атрибуты выравнивания Значение атрибута <img align="left"> Картинка слева, текст справа <img align=“right"> Картинка справа, текст слева <img align="bottom"> Текст располагается внизу картинки <img align="middle"> Текст располагается посередине <img align="top"> Текст располагается вверху |
6 |
 |
Что можно сделать с картинкойquot;" Краткое описание картинки Дополнительные атрибуты тега <img> Атрибут Значение атрибута <img Vspace="10"> <img Hspace="30"> <Img alt="моя фотография"> <img width="100"> <img height="200"> <img border="5"> Расстояние в пикселях между текстом и рисунком (по вертикали) Расстояние между текстом и рисунком (по горизонтали) Ширина самой картинки (в пикселях) Высота самой картинки (в пикселях) Рамка вокруг картинки (в пикселях) |
7 |
 |
<HTML> <HEAD> <title>Мой первый шаг </title> </HEAD> <BODYtext="#336699" bgcolor="#000000"> <p align=“center”> <H2>Здравствуйте, это моя первая страница. </H2> </p> <BR> <font color=“red"> <H3> Добро пожаловать! :) </H3> </font> <p align="justify"> <img src="SP_A0268.jpg" Vspace="20" Hspace="30" alt="моя фотография" width="200" height="150" border="5"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <font size=+3 color=“olive”>еще один виртуальный друг? :) </font > </p> </BODY> </HTML> |
8 |
 |
Ссылка и как с нею боротьсяquot;" Тэг <a>текст</a> делает ссылкой заключенную в него картинку или фразу (текст). Обязательный атрибут HREF=“URL” Пример Значение <A href="prf.Html">мои фотографии</a> <A href="photos/prf.Html">мои фотографии</a> <A href="http://www.Homepage.Ru/prf.Html">мои фотографии</a> Документ лежит в той же папке, что и документ, в котором мы ссылаемся на prf.html, Документ лежит в подпапке /photos Ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ |
9 |
 |
<HTML> <HEAD> <title>Мой первый шаг </title> </HEAD> <BODYtext="#336699" bgcolor="#000000"> <p align=“center”> <H2>Здравствуйте, это моя первая страница. </H2> </p> <BR> <font color=“red"> <H3> Добро пожаловать! :) </H3> </font> <p align="justify"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href=“MYFOTOS/1.html”> посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <font size=+3 color=“olive”>еще один виртуальный друг? :) </font > </p> </BODY> </HTML> |
10 |
 |
Может ли картинка быть ссылкойquot;" Принцип ссылки тот же, что и в случае с текстом, только между тегами вставляется не текст, а картинка: <a href="MYFOTOS/1.html "> <img src="SP_A0268.jpg " align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> </a> |
11 |
 |
<HTML> <HEAD> <title>Мой первый шаг </title> </HEAD> <BODYtext="#336699" bgcolor="#000000"> <p align=“center”> <H2>Здравствуйте, это моя первая страница. </H2> </p> <BR> <font color=“red"> <H3> Добро пожаловать! :) </H3> </font> <p align="justify"> <a href="MYFOTOS/1.html"><img src="MYFOTOS/SP_A0268.jpg" Vspace="20" Hspace="30" alt="моя фотография" width="200" height="150" border="3">Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли <a href=“MYFOTOS/1.html”> посмотреть мои фотографии</a>, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <font size=+3 color=“olive”>еще один виртуальный друг? :) </font > </p> </BODY> </HTML> |
«Занятие 5» |