Мобильный LiveInternet теги | lopon

Авторизация

Дневник lopon Лента друзей - Дневник - Полная версия

теги 11-05-2014 18:14 к комментариям - к полной версии - понравилось!

Это цитата сообщения last_Alive Оригинальное сообщение

HTML Теги от "A" до "M"

Тег A

Тег <A> служит для создания гипертекста (ссылок). Гипертекст позволяет осуществлять мгновенный переход от одного фрагмента текста к другому. Сам гипертекст поддается форматированию. Закрывающий тег обязателен. Тег должен содержать либо атрибут name, либо href.

Атрибут

Назначение

name

Задает имя элемента. Определяет закладку.

href

Задает URL ресурса, на который должен перейти пользователь, щелкнув по ссылке. Атрибут может указывать как на внешний документ, так и на элемент внутри данного документа. Подробнее

target

Возможные значения:

name	- Имя ссылки или фрейма
_blank	- Загружает ссылку в новое окно
_parent	- Загружает ссылку в родительском окне
_search	- Загружает ссылку в панель поиска браузера. (Доступно в Internet Explorer 5 и выше)
_self	- Загружает ссылку в это же окно, где был произведен клик по ссылке (По умолчанию)
_top	- Загружает ссылку в topmost окно

title

Всплывающая подсказка. Возникает при наведении мышки

rel

Отношение.

rev

Обратное отношение.

contenteditable

Позволяет пользователю редактировать содержимое объекта

Примеры использования атрибута href:

Значение	Назначение
<A href="exA.htm"> Пример </A>	Ссылка
<A href="exA.htm#aExample"> Пример </A>	Ссылка на закладку (в другом документе)
<A href="#aExample"> Пример </A>	Ссылка на закладку (в этом же документе)
<A href="mailto:somebody@mail.ru?subject= Example%20letter&Body=Пример%20письма%20 созданного%20автоматически&CC= somebody@yandex.ru"> Пример </A> subject - тема письма Body - содержание письма CC - копия на другой адрес BCC - копия на скрытый адрес	Используется для создания гиперссылки вызова почтовой программы для написания письма. Многие почтовые программы позволяют заполнить многие поля (все поля опционны, вы можете заполнять только те что нужны): - параметры соединяются символом & - для пробелов используйте %20 - для перевода на новую строку в сообщении %0d%0a - для символа & используйте %26 somebody@yandex.ru"> Пример

Тег Body

Он определяет видимую часть документа. В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты). Тег имее ряд необязательных атрибутов, представлненных в таблице:

Атрибут	Назначение
alink	определяет цвет ссылки, активной в текущий момент
vlink	определяет цвет уже просмотренной ссылки
link	определяет цвет еще не просмотренной ссылки
text	определяет цвет текста
background	указывает на URL - адрес изображения, которое используется в качестве фонового
bgcolor	определяет цвет фона документа
bgproperties	если установлено значение FIXED, фоновое изображение не прокручивается
leftmargin	устанавливает границу левого поля в пикселах
topmargin	устанавливает границу верхнего поля в пикселах

Теги Fieldset и Legend

Элемент Fieldset используется для группирования элементов форм, аналогично использованию тегов Div для группирования связанного содержания HTML. Элемент Fieldset был разработан преимущественно для обеспечения доступа, что позволяет страницам четко группировать наборы элементов.

Тег Legend выводит надпись для тега Fieldset и должен быть в нем первым элементом. Закрывающий тег требуется.

Пример :

Size Big
Medium
Small

Код примера :

 <TABLE align="center" width="120" border="0">
   <TR>
     <TD>

       <FIELDSET align="center">
         <LEGEND>Size</LEGEND>

         <INPUT type="radio" id="big" name="size" checked>

         <LABEL for="big">Big</LABEL><BR>

         <INPUT type="radio" id="medium" name="size">

         <LABEL for="medium">Medium</LABEL><BR>

         <INPUT type="radio" id="small" name="size">

         <LABEL for="small">Small</LABEL><BR>
       </FIELDSET>

     </TD>
   </TR>
 </TABLE>

Тег Head

Заголовок документа не является обязательным элементом. Задачей заголовка документа является предоставление информации для программы, интерпретирующей документ. Элементы, находящиеся внутри раздела Head (кроме названия документа, записываемого в разделе Title), не видны на экране. Элементы, содержащиеся внутри раздела Head документа, нужны для того, чтобы:

Дать документу название
Определить отношения между несколькими документами
Дать указание браузеру создать форму для поиска
Определить метод посылки специальных сообщений определенному браузеру или другой программе просмотра

Раздел HEAD открывается тэгом <HEAD>. Обычно этот тэг следует сразу же за тэгом <HTML>. Закрывающий тэг </HEAD> показывает конец этого раздела. Между упомянутыми тэгами располагаются остальные тэги раздела заголовка документа.

Пример

      <HTML>
        <HEAD>
          <META http-equiv="Content-Type" content="text/html; charset=windows-1251">
          <META name="keywords" content="META keywords и другие ключевые слова">
          <TITLE>IT-Kursy.ru - Online и DVD Курсы</TITLE>
        </HEAD>
        <BODY>
        </BODY>
      </HTML>

Тег Hr

Тег <HR> добавляет в HTML-документ горизонтальную линию. Перед и после линии помещается пустая строка. Закрывающий тег не требуется.

Атрибут

Назначение

size

Устанавливает толщину линии.

width

Устанавливает ширину линии в пикселах или процентах.

noshade

Создает линию без тени.

color

Задает линии определенный цвет.

align

Задает выравнивание:

left	- по левому краю
right	- по правому краю
center	- по центру

Пример :

Тег Img

Тег <IMG> служит для внедрения графики на страницы. На данный момент поддерживаются форматы файлов: GIF, JPG, JPEG, PNG.

Атрибут	Назначение
src	Указывает URL рисунка. (Обязательный атрибут) Sic! Чтобы указать, что рисунок в директории лежит на уровень выше ../name.gif
lowsrc	Указывает URL рисунка низкого качества. Используется до загрузки основного рисунка.
align	Выравнивает изображение к одной из сторон документа.Подробнее
alt	Выводит текст к картинке (полезен т.к. многие пользователи отключают отображение картинок в браузере).
border	Устанавливает толщину рамки вокруг изображения в пикселах. (По умолчанию рамка не используется. При использовании изображения в качестве гиперссылки рекомендуется установить border="0", чтобы подавить цветовую окантовку, которая появится вокруг изображения.)
galleryimg	Поддержка Панели управления изображениями. Данная панель появляется при наведении указателя мыши на изображении и позволяет быстро сохранить картинку, распечатать, послать на e-mail, открыть папку Мои рисунки. По умолчанию данная панель появляется только при размерах более 130 пикселах. Но можно включить эту панель с помощью этого атрибута. Может принимать значениея yes (или true) и no (или false).
ismap	Сообщает, что изображение является картой-изображением на сервере.
usemap	Сообщает, что изображение является картой-изображением на стороне клиента. Указывает URL карты.
height и width	Высота и ширина картинки в пикселах или процентах.(Желателен)
hspace и vspace	Определяет размер свободного места в пикселах слева/справа и сверху/снизу от изображения, улучшает внешний вид страницы, отделяя изображение от текста.

Значение атрибута align:

Значение	Описание
left	Выравнивание по левому краю
right	Выравнивание по правому краю
bottom или baseline	Выравнивание нижней границы изображения по базовой линии текущей строки
absbottom	Выравнивание нижней границы изображения по нижней границе текущей строки
top	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки
texttop	Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки
middle	Выравнивание середины изображения по базовой линии текущей строки
absmiddle	Выравнивание середины изображения по середине текущей строки

Тег Input

Тег <INPUT> предназначен для сбора информации различными способами, включая текстовые поля, поля для ввода пароля, переключатели, флажки, кнопки для отправки данных (Submit) и очистки формы (Reset, Clear). Закрывающий тег не требуется.

Атрибуты тега Input

Атрибут	Описание
name	определяет имя данных.
size	указывает размер поля в символах.
maxlength	определяет максимально возможное число символов, вводимых в поле.
value	для текстового поля определяет текст, выводимый по умолчанию. Для флажков и переключателей указывает значение, возвращаемое программе обработки. Для кнопок отправки и очистки формы определяет надпись на кнопке.
checked	устанавливает флажок или переключатель во включенное состояние по умолчанию.
disabled	лишает элемент возможности получения фокуса и участия в событиях. Атрибут должен быть использован, когда элемент не применим к текущему контексту.
readonly	используется, когда элемент применим к контексту, но установлен запрет на редактирование содержания элемента управления. В отличие от отключенного элемента управления элемент управления только для чтения (read-only control) может получить фокус, и его содержание может быть выделено. Однако содержание данного элемента нельзя изменять.
title	вывод поясняющей строки, возникает при наведении мышки
tabindex	Позволяет Web-мастеру явно определять последовательность перехода (tabbing order). Т. е. перемещение по нажатию клавиши "TAB"
style	Задает различные стили.
type	устанавливает тип поля. Принимаемые значения: text password checkbox radio reset submit button file hidden image

Значение атрибута type	Пример и код
text - является значением по умолчанию и предполагает создание одной строки для ввода данных. Употребляется с атрибутами: name size maxlength value readonly disabled title tabindex	Поле для ввода: Поле только для чтения: Отключенное поле: <INPUT name="example" type="text" size="30" maxlength="15"> <INPUT type="text" size="30" value="ReadOnly" readonly> <INPUT type="text" size="30" value="Disabled" disabled>
password - позволяет заменять вводимые символы пароля звездочками. Употребляется с атрибутами: name size maxlength value readonly disabled title tabindex	Поле для ввода пароля: Поле пароля только для чтения: Отключенное поле пароля: <INPUT name="example" type="password" size="30" maxlength="15"> <INPUT type="password" size="30" value="пароль" readonly> <INPUT type="password" size="30" value="пароль" disabled>
checkbox - позволяет вывести поле для установки флажка в виде маленького квадратика, в котором может быть произведена отметка опции “галочкой”. Флажки обычно употребляются, когда можно выбрать сразу несколько опций из числа предложенных. Употребляется с атрибутами: name value checked disabled title tabindex	Автомобили, которые Вы предпочитаете: BMW Запорожец Volvo <INPUT type="checkbox" value="Good_Car1">BMW<BR> <INPUT type="checkbox" disabled checked>Запорожец<BR> <INPUT type="checkbox" value="Good_Car2">Volvo<BR>
radio - позволяет выбрать только одну из представленного числа опций. Переключатели можно группировать, задавая одно и то же значение атрибута name. Употребляется с атрибутами: name value checked disabled title tabindex	Желаемый уровень заработной платы: 1000 руб 10000$ 50 теньге 15 шкурок <INPUT type="radio" name="money" checked> 1000 руб<BR> <INPUT type="radio" name="money" disabled> 10000$<BR> <INPUT type="radio" name="money"> 50 теньге<BR> <INPUT type="radio" name="money"> 15 шкурок<BR>
reset - позволяет создать кнопку для очистки формы. Атрибут value может быть использован здесь для наименования этой кнопки (по умолчанию кнопка имеет надпись reset). Употребляется с атрибутами: name value disabled title tabindex	Анкета ФИО: 2 х 2 = 2 4 5 <FORM> <B>Анкета</B><BR> ФИО: <INPUT type="text" size="30"><BR> 2 х 2 =<BR> <INPUT type="radio" name="answer" checked> 2 <INPUT type="radio" name="answer"> 4 <INPUT type="radio" name="answer"> 5 <BR> <INPUT type="reset" value="Очистить"> <INPUT type="reset" style="width:150;" disabled><BR> </FORM>
submit - используется для создания кнопки, по нажатию которой введенные данные отправляются на сервер для обработки программой - скриптом. Атрибут value может быть использован здесь для наименования этой кнопки (по умолчанию кнопка имеет надпись submit). Употребляется с атрибутами: name value disabled title tabindex	<INPUT type="submit" value="Выбрать"> <INPUT type="submit" style="width:150;" disabled>
button - используется для создания стандартной кнопки. Атрибут value может быть использован здесь для наименования этой кнопки (по умолчанию кнопка имеет надпись submit). Употребляется с атрибутами: name value disabled title tabindex	<INPUT type="button" value="Кнопка 1" onClick="alert('Hello world');"> <INPUT type="button" value="Кнопка 2" style="width:150;" disabled>
file - создает элемент для выбора локальных файлов. Например, строку для имени файла и кнопку "Обзор", при нажатии на которую открывается диалог «Выбор файла». Употребляется с атрибутами: name disabled title tabindex	<INPUT type="file" name="inf1"> <INPUT type="file" disabled>
hidden - создает невидимый для пользователя элемент. Может использоваться для отправки дополнительной, служебной информации. Употребляется с атрибутами: name value	<INPUT type="hidden" name="inf1" value="unknown">
image - создает элемент формы в виде кнопки-изображения. Употребляется с атрибутами: src name title width height disabled	<INPUT type="image" src="/img/less/but/but.gif" name="button" title="unknown button :)" width="80" height="30" onClick="alert('Hello world');">

Удобно совместно с тегом Input использовать тег Label, который представляет собой текстовый контейнер, связывающий текстовое содержание с определенным элементом управления.

Для группирования элементов форм, аналогично использованию тегов Div для группирования связанного содержания HTML используется тег Fieldset.

Тег Label

Новый элемент Label представляет собой текстовый контейнер, связывающий текстовое содержание с определенным элементом управления. Надписи для элементов управления представляют собой то же, что и ссылки для закладок: так же как ссылки открывают закладки, так и щелчок кнопкой мыши по надписи отображает связанный элемент управления. Для переключателей и флажков щелчок по надписи также приводит к нажатию связанной кнопки и изменению ее значения.

Так же, как и тег А, который определяет ссылки на закладки, тег LABEL ссылается на связанный элемент управления, используя атрибут for. Атрибут for содержит уникальный идентификатор (ID) элемента управления на странице.

Сравнение :

Send Information:	Send Information:
E-Mail Address:	E-Mail Address:

Код примера :

          <LABEL for="Info1">Send Information: </LABEL>

          <INPUT type="checkbox" id="Info1">

          <LABEL for="Email1">E-Mail Address: </LABEL>

          <INPUT type="text" id="Email1" size="20">

Для упрощения доступа к элементу Label в HTML 4.0 имеется атрибут accesskey. Атрибут accesskey содержит одиночный символ, который может быть использован как ярлык для ссылки на элемент управления: нажатие клавиши в сочетании с клавишей доступа Alt (для IE) позволяет обратиться к ярлыку. (Клавиша доступа не чувствительна к регистру.)

Microsoft Windows традиционно подчеркивает клавиши доступа. Это может быть выполнено в HTML путем добавления глобального стиля и помещения клавиши доступа в текст надписи с тегами SPAN

Пример с клавишей доступа:

Send Information:
E-Mail Address:

Код примера :

	  <LABEL for="acckeys" accesskey="S">
		<SPAN style="text-decoration:underline">S</SPAN>end Information:
	  </LABEL>

	  <INPUT type="checkbox" id="acckeys">
	  <BR>

	  <LABEL for="acckeym" accesskey="M">
	    E-<SPAN style="text-decoration:underline">M</SPAN>ail Address: 
	  </LABEL>

	  <INPUT type="text" id="acckeym" size="20">

Элемент LABEL существенно улучшает возможности использования и доступа, и рекомендован для применения с элементами управления.

Карта

Area

<Map>

Тэг <MAP> определяет коллекцию чувствительных областей в графическом изображении, при этом различные участки изображения могут быть ссылками на различные ресурсы. Закрывающий тег обязателен.

Кстати, карты можно использовать не только для создания гиперссылок, но и просто для подписей различных частей изображения.

Атрибут	Назначение
name	Задает имя карты.

<Area>

Тег <AREA> задает чувствительные области. Закрывающий тег необязателен.

Атрибут

Назначение

shape

Определяет тип фигуры. Может принимать следующие значения:

rect	-прямоугольник
circ	-окружность
poly	-многоугольник

coords

Координаты чувствительных областей. Задание координат зависит от параметра shape:

Для rect	coords="A,B,C,D",	где A,B - координаты верхнего левого угла области. C,D - координаты правого нижнего угла области.
Для circ	coords="A,B,C",	где A,B - координаты центра окружности. C - радиус окружности.
Для poly	coords="A,B,C,D, ... ,A,B"	где каждая пара задает координаты вершин многоугольника. Первая и последняя пары совпадают задавая замкнутую фигуру.

href

Ссылка

nohref

Ссылка для заданной области отсутствует. Удобно использовать для задания сложных областей (например, кольца)

alt

Подсказка (альтернативный текст)

title

Всплывающая подсказка. Возникает при наведении мышки

Пример:

Код примера:

<MAP name="demo">
  <AREA href="#" shape="circ" coords="60,30,10" title="Черное">
  <AREA href="#" shape="circ" coords="60,90,10" title="Белое">
</MAP>
<DIV align="center">
  <IMG src="/img/less/web/in.gif" height="120" width="120" usemap="#demo" border="0">
</DIV>

Тег Marquee

Marquee заставляет прокручиваться, либо перемещаться из стороны в сторону. Элементы Marquee могут содержать элементы и даже таблицы, и все обработчики событий для элементов внутри элемента Marquee работают соответствующим образом. Кроме того, элемент Marquee представляет полноценный объект в объектной модели.

Атрибут

Назначение

behavior

Определяет вид скроллинга. Возможные значения:

alternate	-	Колебательные движения налево и направо
scroll	-	Перемещение текста в направлении, указанном в direction. Достигнув края экрана, надпись появляется снова с противоположной стороны
slide	-	Схоже с scroll, но текст перемещается только один раз и останавливается

direction

Определяет направление скроллинга. Возможные значения:

down	- Движение вниз
left	- Движение справа налево (по умолчанию)
right	- Движение слева направо
up	- Движение вверх

scrollAmount

Определяет скорость скроллинга. С увеличением значения увеличивается скорсть.

Пример :

Здесь ваш текст (картинка)

Код примера :

 <MARQUEE id="marqtest" behavior="alternate" direction="right" 
   style="height:250px;width=400px;">
      Здесь ваш текст (картинка)
 </MARQUEE>

last_Alive ---------------------- Нужно продвижение сайта? Поможет europecorporation.co.uk. 10 лет опыта! Оптимизация в подарок!

вверх^ к полной версии понравилось! в evernote

Вы сейчас не можете прокомментировать это сообщение.

Дневник теги | lopon - Дневник lopon | Лента друзей lopon / Полная версия Добавить в друзья Страницы: раньше»