Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Рисунки. Тэг для вставки рисунка (в примере он имеет название 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” указывает на то, что документ (в нашем случае картинка), на который ведет ссылка, откроется в новом окне браузера.







Дата добавления: 2014-11-10; просмотров: 445. Нарушение авторских прав; Мы поможем в написании вашей работы!

Studopedia.info - Студопедия - 2014-2022 год . (0.028 сек.) русская версия | украинская версия