Рисунки. Тэг для вставки рисунка (в примере он имеет название my.jpg) выглядит следующим образом:
Тэг для вставки рисунка (в примере он имеет название my.jpg) выглядит следующим образом: < img src=" my.jpg" >
Необходимо отметить, что все расположенное между кавычками - ссылка (путь к рисунку). Данный пример (< img src=" my.jpg" >) говорит о том, что рисунок находится в том же каталоге (директории, папке), в которой находится и файл html. Если рисунок находится в поддиректории (например, my), то ссылка на него будет выглядеть так: < img src=" / my /my.jpg" >
Если рисунок находится на уровень выше, а документ находится в поддиректории, то ссылка на него будет такой: < img src="../my.jpg" >
Если рисунок лежит на другом сайте, то путь к нему прописывается полностью: < img src=" http: //www.homepage.ru/my/my.jpg" >
Для удобства лучше помещать рисунок в ту же директорию, что и файл html. Для того чтобы рядом с рисунком располагался весь текст, следует знать, что у некоторых тэгов есть параметры (атрибуты). Параметр может задаваться один, а может быть их несколько. Например, у тэга < p > есть < p align=" center" >;. Параметр align есть и у рисунков: < img src=" my.jpg " align=" left" >
Это означает, что рисунок будет прижат к левому краю экрана, а текст будет обтекать его справа. Чтобы сделать наоборот (рисунок справа, а текст - слева), надо прописать right:
< img src=" my.jpg " align=" right" >
Текст может располагаться внизу рисунка (по умолчанию) - (1), справа и лева от рисунка - (2), и вверху - (3):
(1) - < img src=" my.jpg " align=" bottom" > (2) - < img src=" my.jpg " align=" middle" > (3) - < img src=" my.jpg " align=" top" >
Кроме параметра align существует еще несколько параметров:
(1) - < img src=" my.jpg " vspace=" 10" > (2) - < img src=" my.jpg " hspace=" 30" > (3) - < img src=" my.jpg " alt=" моя фотография" > (4) - < img src=" my.jpg " width=" 100" > (5) - < img src=" my.jpg " height=" 200" > (6) - < img src=" my.jpg " border=" 5" >
Это означает: (1) - параметр vspace - задает расстояние между текстом и рисунком по вертикали. Расстояние задается в пикселях (pixel - минимальная единица изображения, точка. Например, разрешение экрана 800х600 - 800 на 600 точек). В примере расстояние равно 10 пикселям.
(2) - параметр hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В примере оно равно 30 пикселям.
(3) - параметр alt - краткое описание рисунка. Если навести курсор на рисунок и задержать его несколько секунд, то появится его описание. В нашем случае это будет фраза - " моя фотография". Если параметр alt не задавать, описания не будет. (4) - параметр width - ширина самого рисунка (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине.
(5) - параметр height - высота самого рисунка (в пикселях). Так же как в случае с width высоту (height) можно не задавать.
(6) - параметр border - рамка вокруг рисунка (толщина линии рамки - в пикселях). Можно не задавать. Все параметры могут использоваться одновременно друг с другом.
Рисунок также можно сделать фоном документа. Фон прописывается в открывающем тэге body:
< body text=" 336699" bgcolor=" 000000" background=" ваш_фон.jpg" >
Параметр Background указывает на то, где находится фоновый рисунок. В примере он указывает, что рисунок лежит в той же директории, что и файл html. Ссылки
Интернет - страница может состоять из нескольких документов. Один из них - главный index.html (или main.html). Он открывается первым и должен обязательно находиться на Вашем сайте в Интернете. Остальные документы можно называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории, а могут находиться в разных директориях. Ссылкой на эти другие документы (части страницы) может быть текст (фраза, слово), а может быть и картинка (рисунок). Рассмотрим текстовую ссылку. Для начала необходимо создать новый документ (допустим, prf.html) в той же директории, где находится главный документ index.html. Пусть prf.html - документ с вашими фотографиями. Тогда можно фразу " посмотреть мои фотографии" сделать ссылкой на prf.html:
< a href=" prf.html" > посмотреть мои фотографии< /a>
Тэг < a> < /a > делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути здесь такие же, как в случае с картинками:
(1) - < a href=" prf.html" > мои фотографии< /a> (2) - < a href=" /photos/prf.html" > мои фотографии< /a> (3) - < a href=" http: //www.homepage.ru/prf.html" > мои фотографии< /a>
В случае (1) документ находится в той же директории, что и документ, в котором находится ссылка на prf.html, в случае (2) - документ находится в поддиректории /photos, в случае (3) ссылаются на сайт http: //www.homepage.ru, где находится необходимый документ. Цвет ссылки прописывается следующим образом:
< body text=" #336699" bgcolor=" #000000" link=" #339999" alink=" #339999" vlink=" #339999" >
Link - цвет ссылки, alink - цвет активной (нажатой) ссылки, vlink - цвет уже посещенной ссылки. В примере цвета одинаковые, но они могут быть разными.
Ссылка на почтовый ящик прописывается так:
< a href=" mailto: pochta@mail.ru" > pochta@mail.ru - пишите письма < /a>
Как уже упоминалось ранее, ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только между тэгами вставляется не текст, а картинка: < a href=" prf.html" > < img src=" primtocodephoto.gif" align=" left" HSPACE=30 VSPACE=5 alt=" моя фотография" > < /a>
Ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д.). Делается это по такому же принципу:
< a href=" http: //www.melody.ru/music.mp3" > скачать песню < /a>
Если адрес указан таким способом, то это означает, что в указанном каталоге есть файл вроде index.html, который загрузится по умолчанию: < a href=" http: //www.melody.ru/" > музыкальный сайт < /a>
Для того чтобы при нажатии на маленькую картинку загружалась картинка большего размера, делают ссылкой картинку (допустим, small.jpg) и ссылаются на другую картинку (допустим, big.jpg):
< a href=”big.jpg”> < img src=”small.jpg”> < /a>
В этом случае большая картинка откроется в том же окне.
Для того чтобы картинка (или любой другой файл-документ) открылась в новом окне, следует воспользоваться параметром тэга < a> < /a > target:
< a href=”big.jpg” target=”_blank”> < img src=”small.jpg”> < /a>
Итак, target=”_blank” указывает на то, что документ (в нашем случае картинка), на который ведет ссылка, откроется в новом окне браузера.
|
