Понятия слова «Теги». Основные теги в HTML.

* 22-11-2013, 10:59 * A_Protasov * Комментариев: 0

Рейтинг:

Понятия слова «Теги». Основные теги в HTML.

Каким браузером вы пользуетесь, Google Chrome, Internet Explorer, Mozilla Firefox, или Opera? В прочем это не важно. Все они программы для чтения и отображения веб документа, а точнее то, что вы видите на экранах своих мониторов. Открывая любое печатное издания книгу, или газету мы чётко видим своим глазом абзацы, колонки, фото, цвет текста, в общем, всё визуальное оформление таким, какое оно есть.  Но браузер это робот, которому необходимо понять, как отображать, показывать нам то, что мы видим и если мы обычным языком попробуем ему сказать что фразу «Привет Мир», надо отобразить жирным курсивом, или красным цветом, то он нас не поймёт. Именно для этого и были придуман язык гипертекстовой разметки HTML, с его набором различных тегов и атрибутов к ним.

Теги.

Слово «Тег» происходит от английского «tag» (дескриптор). Дескриптор, это элемент языка, в разметки гипертекста HTML. Что бы легче понять, как это работает, давайте проведём не большой эксперимент и напишем несколько раз фразу «Я учу HTML».

Рисунок 1.

На рисунке №1, мы видим четыре варианта нашей фразы. Сначала она выделена полужирным текстом, затем красным цветом, далее наклонным курсивом и наконец, наш текст стал просто кнопкой. Но как это браузер смог понять? Для этого давайте посмотрим и разберём его исходный код.

Рисунок 2.

На рисунке №2 мы видим, что в первом случае между фразой присутствует парный тег 

<b></b>

(от английского bold, полужирный).  В который, заключив нашу фразу «Я учу HTML»  мы получили полужирный текст.
Далее мы видим что фраза «Я учу HTML» стала красного текста, это потому что мы использовали тег 

<font>

(от английского шрифт) и указали цвет (color) код которого #F34C0C (в данном случае имеет красный оттенок).
Затем наш текст покосило вправо, то есть курсив стал наклонным, это произошло, потому что мы использовали парный тег <em></em> (от английского emphasis-акцент).
И наконец, при помощи тега 

<button></button>

(от английского button-кнопка), мы сделали его просто кнопкой.
Как вы заметили, между строками мы использовали тег 

<br>

(от английского break-ломать, разрыв), это дало нам возможность написать каждую фразу с новой строки. То есть тег позволяет начать новый абзац, строку при этом не требуется парный закрывающий тег

</br>

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

  1. Основные теги документа HTML.
  2. Теги документа и мета-теги.
  3. Атрибуты тела документа (для тега <BODY>).
  4. Теги формата и стиля текста.
  5. Теги форматирования и управления текстом.
  6. Гиперссылки и их атрибуты.
  7. Теги графики, графические элементы.
  8. Таблицы и их атрибуты.
  9. Фреймы и их атрибуты.
  10. Ифрейм и и атрибуты.
  11. Формы.

 

Основные теги документа HTML.

Теги Краткое описание и назначение Закрывающий, или парный тег
 <html> Указывает программе просмотра страниц что это HTML документ.  </html>
 <head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь  </head> 
<body> Определяет видимую часть документа </body> 

 

 

Теги документа мета-теги.

Теги Краткое описание и назначение Закрывающий, или парный тег
 <base href="www.?">  Указание браузеру от какого базового адреса все ссылки (кроме ссылок явно прописанных полностью)  -//-
 <base target="?">  Указание браузеру от какого базового окна в котором открываются все ссылки (кроме ссылок с отдельным указанием данного параметра)  -//-
 <meta name="allow-search" content="?">  Указание для поисковых роботов как следует сканировать данную страницу  -//-
 <meta http-equiv="distribution" content="?"  Указание для поисковых роботов относится ли данная страница к мировым  -//-
 <meta name="robots" content="?">  Указание для поисковых роботов как следует сканировать данную страницу  -//-
 <meta name="author" content="?">  Указание автора странички  -//-
 <meta name="keywords" content="?">  Описание содержащийся информации (для поисковых машин)  -//-
 <meta http-eguiv="content-type" content="text/plain;churset="?">  Указание браузеру в какой кодировке следует подгружать страницу (Window-1251, KOI8-R, KOI8-U, ISO-8859-5, UTF-8, UTF-16 и д.р.)  -//-
 <meta name="description" content="?">  Ключевые слова странички (для поисковых машин) -//-
 <title></title>  Помещает название документа в оглавление программы просмотра страниц  -//-

 

 Атрибуты тела документа (для тега <BODY>).

Теги Краткое описание и назначение Закрывающий, или парный тег
 <body bgcolor="?">  Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.  </body>
 <body text="?">  Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет. </body>
 <body link="?">  Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет. </body>
 <body vlink="?">  Устанавливает цвет гиперссылок, на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет. </body>
 <body alink="?">  Устанавливает цвет гиперссылок при нажати </body>

 

 

Теги формата и стиля текста.

Теги Краткое описание и назначение Закрывающий, или парный тег
 <pre>  Обрамляет предварительно отформатированный текст.  </pre>
 <h1>  Создает самый большой заголовок  </h1>

 <h2>, <h3>,

<h4>, <h5>,

 Создает заголовоки промежуточных размеров </h2>, </h3>,</h4>,</h5>
 <h6>  Создает самый маленький заголовок </h6>
 <b>  Создает жирый текст (нерекомендованный) </b>
 <i>  Создает наклонный текст (нерекомендованный) </i>
 <kbd>  Создает текст - имитирующий стиль печатной машинки. (рекомендованный) </kbd>
 <var></var>  Название переменных отображается курсивом </var>
 <address>  Отображается курсивом в виде отдельного абзаца </address>
 <em>  Наклонный текст (воспринимается посковыми роботами как выделение) </em>
 <strong>  Жирный текст (воспринимается посковыми роботами, как особо сильное выделение) </strong>
 <font size="?">  Устанавливает размер текста в пределах от 1 до 7. </font>
 <font color="?">  Устанавливает цвет текста, используя значение цвета в виде RRGGBB. </font>
     

 

 

Теги форматирования и управления текстом.

Теги Краткое описание и назначение Закрывающий, или парный тег
 <p>  Создает новый параграф </p>
 <p align="?">  Выравнивает параграф относительно одной из сторон документа, значения: left, right, justify или center </p>
 <nobr>  Запрещает перевод строки. -//-
 <wbr>  Указывает где разбивать строку для переноса при необходимости. -//-
 <br>  Вставляет перевод строки. -//-
 <blockquote> Создает отступы с обеих сторон текста. </blockquote>
 <dl>  Создает список определений. </dl>
 <dt>  Определяет каждый из терминов списка -//-
 <dd>  Описывает каждое определение -//-
 <ol>  Создает нумерованный список </ol>
 <li>  Определяет каждый элемент списка и присваивает номер </ul>
 <ul>  Создает ненумерованный список  
 <div align="?">  Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей </div>
     

 

 

Гиперссылки и их атрибуты.

Теги Краткое описание и назначение Закрывающий, или парный тег
 <a href="URL">  Создает гиперссылку на другие сайты.  </a>
 <atarget="?">

 Указывает в каком окне открывать гиперссылку.
Параметры.     Значение.
_Blank    |Загрузка содержимого страницы, заданной ссылкой, в новое пустое окно
_Parent   |Загрузка содержимого страницы, заданной ссылкой, в окно, которое содержит ссылку
_Self      |Загрузка содержимого страницы, заданной ссылкой, в окно, игнорируя используемые фреймы
_Top       |Загрузка содержимого страницы, заданной ссылкой, в окно, игнорируя использованные фреймы

--------------------

При использовании фреймов и вложенных фреймов значением может выступать имя фрейма или вложенной сетки фреймов, приэтом страница откроется в указаной части окна.

</a>
 <a href="NAME">  Создает гиперссылку на другую страницу. </a>
 <a href="mailto:EMAIL">  Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу. </a>
 <a href="#name">  Создает гиперссылку на метку текущей страници. </a>
 <a name="name">  Отмечает часть текста, как метку для гипперссылок на странице. </a>
 <a href="NAME#name">  Создает гиперссылку на метку другой страници. </a>

 

 

Теги графики, графические элементы.

Теги Краткое описание и назначение Закрывающий, или парный тег
 <img src="name">  Добавляет изображение в HTML документ  
 <img src="name" align="?">  Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle  -//-
 <img src="name" border="?">      Устанавливает толщину рамки вокруг изображения  -//-
 <img src="name" vspase="?">  Устанавливает поля сверху и снизу  -//-
 <img src="name" hspase="?">  Устанавливает поля сбоков   -//-
 <img src="name" alt="?">  Всплывающая подсказка при наведении на имедж  -//-
 <hr size="?">  Устанавливает высоту (толщину) линии  -//-
 <hr width="?">  Устанавливает ширину линии, можно указать ширину в пикселах или процентах.  -//-
 <hr noshade>  Создает линию без тени.  -//-
 <hr color="?">      Задает линии определенный цвет. Значение RRGGBB.   -//-

 

 

Таблицы и их атрибуты.

Теги Краткое описание и назначение Закрывающий, или парный тег
 <table>  Создает таблицу. </table>
 <tr>  Определяет строку в таблице. </tr>
 <td>      Определяет отдельную ячейку в таблице. </td>
 <th>  Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом) </th>
 <caption>  Определяет подпись таблицы </caption>
 <table border="#">  Задает толщину рамки таблицы. </table>
 <table cellspacing="#">  Задает расстояние между ячейками таблицы. </table>
 <table cellpadding="#">  Задает расстояние между содержимым ячейки и ее рамкой. </table>
 <table width="#">  Устанавливает ширину таблицы в пикселах или процентах от ширины документа. </table>
 <table height="#">  Устанавливает высоту таблицы в пикселах или процентах от высоты документа. </table> 
 <tr align="?"> или <td align="?">  Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right. </tr>
 <tr valign="?"> или <td valign="?">  Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom. </tr>
 <td colspan="#">  Указывает кол-во столбцев, которое объединено в одной ячейке. (по умолчанию=1) </td>
 <td rowspan="#">  Указывает кол-во строк, которое объединено в одной ячейке. (по умолчанию=1) </td> 
 <td nowrap>  Не позволяет программе просмотра делать перевод строки в ячейке таблицы. </td>
 <td width="#">  Устанавливает ширину ячейки в пикселах или процентах от ширины таблицы (ячейки одного столбца не могут иметь разную ширину) </td>
 <td height="#">  Устанавливает высоту ячейки в пикселах или процентах от высоты таблици (ячейки одной строки не могут иметь разную высоту). </td>

 

 

Фреймы и их атрибуты.

Теги Краткое описание и назначение Закрывающий, или парный тег
 <frameset> Предваряет тег <body> в документе, содержащем фреймы;  </frameset>
<frameset rows="value,value">  Определяет строки в таблице фреймов, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы фреймов. </frameset> 
 <frameset cols="value,value">  Определяет столбцы в таблице фреймов, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы фреймов. </frameset>
 <frame>  Определяет единичный фрейм или область в таблице фреймов. </frame>
 <noframes>  Определяет, что будет показано в окне браузера, если он не поддерживает фреймы.
Атрибуты фреймов
</noframes>
 <frame src="URL">  Определяет какой из HTML документов будет показан во фрейме.  </frame>
 <frame name="name">  Указывает Имя фрейма или области, что позволяет перенаправлять информацию в этот фрейм или область из других фреймов.  </frame>
 <frame marginwidth="#">  Определяет величину отступов по левому и правому краям в нутрь фрейма; должно быть равно или больше 1. </frame> 
 <frame marginheight="#">  Определяет величину отступов по верхнему и нижнему краям в нутрь фрейма; должно быть равно или больше 1.  </frame>
 <frame scrolling=VALUE>  Указывает будет-ли выводится линейка прокрутки во фрейме; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.  </frame>

 

 

Ифрейм и и атрибуты.

Теги Краткое описание и назначение Закрывающий, или парный тег
 <iframe> Создает контейнер, который может содержать любые элементы. Остальные элементы обтекают этот контейнер.  </iframe>
 <iframe src="URL">  Определяет какой из HTML документов будет показан в ифрейме.  </iframe>
 <iframe name="name">  Указывает Имя ифрейма, что позволяет перенаправлять информацию в этот ифрейм .  </iframe>
 <iframe vspase="?">  Устанавливает поля сверху и снизу с наружи от ифрейма  </iframe>
 <iframe hspase="?">  Устанавливает поля сбоков с наружи от ифрейма </iframe>
 <iframe marginwidth="#">  Определяет величину отступов по левому и правому краям в нутрь ифрейма; должно быть равно или больше 1. </iframe>
 <iframe marginheight="#">  Определяет величину отступов по верхнему и нижнему краям в нутрь ифрейма; должно быть равно или больше 1. </iframe>
 <iframe scrolling=VALUE>  Указывает будет-ли выводится линейка прокрутки в ифрейме; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto. </iframe>
 <iframe width="#">      Определяет ширину ифрейма </iframe>
 <iframe height="#">  Определяет высоту ифрейма; </iframe>
 <iframe title="?">  Текст всплывающей подсказки </iframe>

 

 

Формы.

Теги Краткое описание и назначение Закрывающий, или парный тег
 <form>  Создает формы  </form>
 <select multiple name="NAME" size="?">  Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки. </select>
 <option>  Указывает каждый отдельный элемент меню  </option>
 <select name="NAME">  Создает ниспадающее меню </select>
 <textarea name="NAME" cols=40 rows=8>  Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту. </textarea>
 <input type="checkbox" name="NAME">      Создает checkbox. -//-
 <input type="radio" name="NAME" value="x">  Создает radio кнопку.  -//-
 <input type=text name="foo" size=20>  Создает строку для ввода текста. Параметром Size указывается

 


razdacha.jpg

Просмотров: 14 907
Последние новости блога
Простая вёрстка в HTML. Урок №1
Редактор «Notepad++ . V5.5.1» установка. На данный момент существует большое количество редакторов, для верстки сайтов в «HTML» как обычные, так и визуальные.  Но, к
Простая вёрстка в HTML. Вводный урок.
Прежде чем приступить, к созданию своего веб ресурса (сайта, продающей страницы и так далее), надо чётко определится с тематикой и внешним дизайном площадки. Тут очень важно понимать следующее, ваш
DOCTYPE. Для чего и как он устроен?
<!DOCTYPE>-это элемент предназначенный,  для типа будущего документа ( в частности HTML и XHTML). Абвиотура DTD-что в переводе означает (document type definition) описание е типа
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Статистика

  • Рейтинг@Mail.ru