Вернуться   Компьютерный форум > Интернет > Веб-строительство
 
 
Опции темы
Старый 04.06.2012, 15:50   #1 (ссылка)
Новичок
 
Регистрация: 24.03.2012
Сообщений: 8
Репутация: 0
По умолчанию тег "span"

Привет! Знатоки, подскажите, почему тег "span" работает с тегом "<a>", а с тегом "<area> - нет?
Dreamweaver выдаёт, что "span" не относится к тегу в котором находится. Спасибо.
Kvakin вне форума  
Старый 07.06.2012, 15:22   #2 (ссылка)
Новичок
 
Регистрация: 21.11.2009
Сообщений: 486
Репутация: 47
По умолчанию

Уважаемый Kvakin, не очень хоршо разбираюсь в HTML, но теги <SPAN> и <AREA> применяются для разных целей.
Тег <SPAN> предназначен для определения встроенных элементов документа. В отличие от блочных элементов, таких как <TABLE>, <P> или <DIV>, с помощью тега <SPAN> можно выделить часть информации внутри других тегов и установить для нее свой собственный стиль. Например, внутри абзаца (тега <P>) можно изменить цвет и размер первой, заглавной буквы, если добавить начальный и конечный тег <SPAN> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр classили id с именем селектора. Закрывающий тег использовать обязательно:
Код:
<span>...</span>
Вот как можно использовать тег <SPAN>:
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег SPAN</title>
<style type="text/css">
BODY { 
 font-family: Arial, sans-serif; /* Рубленый шрифт */ 
}
.letter { 
 color: red; /* Красный цвет символов */ 
 font-size: 200%; /* Размер шрифта в процентах */ 
 font-family: serif; /* Шрифт с засечками */ 
 position: relative; /* Относительное позиционирование */ 
 top: 5px; /* Сдвиг сверху */ 
}
</style> 
</head>
<body>

<p><span class="letter">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>

<p><span class="letter">U</span>t wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> 

</body>
</html>
Комментарии в коде все объясняют, дополнительные пояснения, думаю, излишни.


Теперь о теге <AREA>.
Каждый элемент <AREA> определяет активные области изображения (картинки), которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые для пользователя зоны разной формы и размеров, где каждая из областей служит ссылкой. Тег <AREA> задает форму области, ее координаты, устанавливает адрес документа, на который следует сделать ссылку, а также имя окна или фрейма, куда браузер будет загружать документ. Этот тег всегда располагается в контейнере <MAP>, который связывает координаты областей с изображением. Закрывающий тег не нужен.
Вот как оформить тег <AREA>:
Код:
 <map>
 <area href="URL">
</map>
Есть несколько параметров, которые употребляются вместе с тегом<AREA>:
Alt - альтернативный текст для области изображения. Если пользователь отключил в браузере отображение картинок, то можно хотя бы прочитать, что было на этом месте.

Coords - координаты активной области.

Href – ну это понятно, задает адрес документа, на который следует перейти.

Nohref - область без ссылки на другой документ.

Shape - форма области, выделенной на картинке.

Target - имя окна или фрейма, куда браузер будет загружать документ.

Вот пример применения тега <AREA>:

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Тег AREA</title>
</head>
<body> 

<p><map name="Navigation">
<area shape="poly" coords="113,24,211,24,233,0,137,0" href="/inform/" alt="Информация">
<area shape="poly" coords="210,24,233,0,329,0,307,24" href="/activity/" alt="Деятельность">
<area shape="poly" coords="304,24,385,24,407,0,329,0" href="/depart/" alt="Отделения">
<area shape="poly" coords="384,24,449,24,473,0,406,0" href="/techinfo/" alt="Техническая информация">
<area shape="poly" coords="449,24,501,24,525,0,473,0" href="/study/" alt="Обучение">
<area shape="poly" coords="501,24,560,24,583,0,525,0" href="/work/" alt="Работа">
<area shape="poly" coords="560,24,615,24,639,0,585,0" href="/misk/" alt="Разное">
</map></p>

<p><img height="30" width="640" alt="Навигация по сайту" src="/images/menu.gif" usemap="#Navigation"></p>

</body>
</html>
Если что-то не так, то Вы могли бы выложить код.
sheff-09 вне форума  
Ads
 


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ссылки утилитна тему-Забанили на сайтах "ВКОНТАКТЕ","Mail.ru","Google" и т.д Flatik Безопасность 2 22.06.2011 19:38
Забанили на сайтах "ВКОНТАКТЕ","Mail.ru","Google" и т.д Flatik Безопасность 10 22.06.2011 02:33
Помогите ".exe","vyre32.exe","exsys.exe"...!!!(логи avz и hijackthis внутри ) Ernesto Безопасность 19 17.04.2011 02:29
НЕ работает кнопка "Перезагрузка", остальные "Ждущий режим"\"Выкл." в норме. Мириам Windows XP 0 24.03.2010 13:11
Не работает оция """Эскизы Страниц""" Stasok94 Неисправности, настройка 2 06.11.2009 18:40


Текущее время: 22:44. Часовой пояс GMT +4. Powered by vBulletin® Version 5.8.9
Copyright ©2000 - 2016, Jelsoft Enterprises Ltd.