![[NeVor.ru]](../images/logo.jpg){kind=logo}
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
HTML код. Теги и атрибуты.редакция 12.04.10 Любой код содержит в себе команды управления, посредством которых выполняются определенные задачи. В каждом языке они называются по-разному, но суть у них одна и та же. Чтобы не запутаться в терминах html кода и говорить на одном языке, разберемся как тут называются и как используются команды. HTML код практически полностью состоит из команд, называемых тегами (от английского "tag"). В спецификации (документации по языку HTML) теги именуются "элементами". Поскольку HTML, как я уже упоминал в первой статье - это язык гипертекстовой разметки, встает вопрос - как эта самая разметка работает? HTML код представляет собой соответствующим образом оформленный текст. Чтобы обозреватель при обработке страницы не путал его с простым текстом, элементы кода принято заключать в угловые <html код> скобки. Таким образом оформленный html тег выглядит так: <тег>. У тегов есть свои настройки, которые позволяют влиять на результат их работы. Эти настройки называются АТРИБУТАМИ. Атрибут может иметь одно или несколько значений. Таким образом общий вид команд HTML выглядит так: <ТЕГ атрибут="значение"> для удобства я буду писать ТЕГИ в верхнем регистре, а их атрибуты и значения атрибутов в нижнем, хотя html код за редким исключением (значение атрибута "id") не чувствителен к регистру. Так что можете писать как вам нравится. Обращайте внимание на символы (знак равенства, кавычки и другие) в примерах, их обязательно нужно указывать. Значение атрибуту задается с помощью знака равенства, а само значение заключается в кавычки и вся эта конструкция пишется без пробелов! В языке HTML существует два вида тегов:
Контейнер может быть строгим - например, контейнер ссылки <A>ссылка</A> (закрывающий тег обязателен) и свободным - например, ячейка таблицы <TD>. В случае с ячейками сигнализировать о том, что контейнер закрыт, может закрывающий тег ячейки (</TD>); тег, открывающий следующую ячейку (<TD>); тег, закрывающий ряд ячеек (</TR>); а также закрывающий тег таблицы (</TABLE>), в которой расположены ячейки. Поэтому нет принципиальной разницы в том, какой из вариантов вы используете: <TABLE> <TR> <TD>содержимое ячейки</TD> <TD>содержимое ячейки</TD> </TR> </TABLE> <TABLE> <TR> <TD>содержимое ячейки <TD>содержимое ячейки </TR> </TABLE> <TABLE> <TR> <TD>содержимое ячейки <TD>содержимое ячейки </TABLE> Тег может иметь обязательные атрибуты. <HR> и <LI> обязательных атрибутов не имеют, команды прекрасно выполняются и без них. А вот элемент <IMG> имеет сразу два обязательных атрибута: "src" (source - источник) и "alt" (alternative - альтернативный вариант). Если при обработке тега картинка по указанному адресу не обнаружится, обозреватель разместит на месте предполагаемого изображения ее название, указанное в атрибуте "alt" (альтернативный вариант). Учитывая все вышесказанное, получаем два вида шаблонов, использующихся в html коде: 1. Теги: <ТЕГ атрибут="значение"> 2. Контейнеры: <ТЕГ атрибут="значение"> А далее представлены варианты их применения: 1. Тег <BR>, переносящий строку: первая строка<BR>вторая строкапервая строка вторая строка 2. Тег <IMG>, размещающий изображения: <IMG src="images/img.gif" alt="img.gif"> 
3. "Строгий" контейнер ссылки<A>: <A href="http://www...">текст ссылки</A>текст ссылки 4. "Свободный" контейнер форматирования текста <P>: <P align="right" style="color: gray;"> Серый текст справа <P align="left" style="color: gray;"> Серый текст слева Теперь поговорим о вложениях. Теги и контейнеры могут быть содержимым. <DEL>123 <INS>456</INS> 789</DEL>  Контейнер <INS> (подчеркнутый текст) вложен в контейнер <DEL> (
Заметьте, что контейнер <DEL> влияет и на содержимое контейнера <INS> (456), зачеркивая его. Можно делать и большее количество вложений при надобности, главное соблюдать принцип матрешки - следить за тем, чтобы открывающий и закрывающий тег находились в одном контейнере, иначе будут ошибки и большие. Со свободными контейнерами нужно быть начеку, потому что концом такого контейнера может оказаться не закрывающий необязательный тег, а открывающий тег совершенно другого контейнера. Например, если попробовать вложить в абзац (<P>) список (<OL>), <P>Начало абзаца <OL> то начало контейнера списка будет автоматически означать конец контейнера абзаца, после списка последует неоформленный текст и "хвост" абзаца (</P>), которому уже нечего будет закрывать. <P>Начало абзаца(</P>) <OL> Поэтому "хвост" абзаца (</P>) в этом случае - просто мусор. А вот вложить абзац в список можно без проблем. С другой стороны ячейке таблицы (<TD>) тоже не требуется закрывающего тега, однако в ячейку можно впихнуть много чего. Поэтому, не указывая ее конец, можно получить нежелательное вложение. При html-верстке иногда приходится использовать символы, которые могут трактоваться двояко. Например, употребление символа "<" будет расценено обозревателями как часть тега, то есть как служебный символ, а это не всегда так. Поэтому "проблемные" символы кодируются. Называются такие символы мнемониками. Список мнемоник можно посмотреть в спецификации или тут. Использование спецификацииТеперь о том, как пользоваться спецификацией (вся техническая документация представлена в разделе "Информация" правого меню вверху страницы). Открываем краткое содержание и ищем там то, что нас интересует в данный момент.  рис.1 Допустим, что нас интересуют таблицы. Находим ссылку, переходим по ней и изучаем содержание раздела №11 ("Таблицы", рис.1/2, маркер 1). С помощью верхнего меню можно перейти на раздел выше или ниже при помощи ссылок "предыдущий" и "следующий" или перейти к спискам тегов с настройками по ссылкам "элементы" и "атрибуты" (рис.2, маркер 2).  рис.2 В содержании находим элемент <TABLE> ( рис.2, маркер 3), отвечающий за построение таблиц, переходим по ссылке и изучаем подробную информацию по нему.  рис.3 Маркеры рис.3:
Информацию о командах html кода можно посмотреть в списках, перейдя по соответствующим ссылкам (рис.2, маркер 2). В левой колонке указываются теги или атрибуты в алфавитном порядке сверху вниз, в остальных колонках в строчку их свойства, принадлежность и прочее.  рис.4 Что касается атрибутов, то в таблице можно встретить несколько одинаковых к ряду (рис.4, маркер 1). При этом стоит обратить внимание на вторую колонку, где указано - к какому тегу атрибут относится и на четвертую, в которой указано необходим он или предполагается. На рисунке видно, что атрибут "src" тега <IMG> необходим, то есть является обязательным, а в остальных тегах его можно не указывать. В пятой и шестой колонке указан статус (маркер 2, рис.4). Если стоит "D" и "L", значит атрибут не рекомендован к использованию, а если "F", то запрещен. Эту информацию частично можно изучить в описании тега (рис.3, маркер 5). Последнее, о чем хочется упомянуть - это о значениях. В спецификации указаны возможные значения каждого атрибута.  рис.5 Значения указаны явно (рис.6, маркер 1), либо в виде определенных величин (рис.6, маркер 2). Список этих величин можно посмотреть тут. Чтобы было понятней, поясню на примере величин Pixels, Length и MultiLength. Если указано "Pixels", значит величина указывается целым числом, которое обозначает число пикселей (width="500" - ширина 500 пикселей). Если указано "Length", значит величину можно указать как числом (пикселей), так и в процентах (width="50%" - ширина равна половине доступного пространства). Если же указано "MultiLength", величина может измеряться в пикселях, в процентах или частями (width="2*" - две части доступного пространства). Однако "MultiLength" встречается редко, а указание размера частями - еще реже. Изучайте спецификацию, пользуйтесь ей при изучении и при верстке - это хороший учебник и прекрасный справочник. Обратите внимание на следующие разделы спецификации:
Термины В этом учебнике вам встретится ряд терминов, которые используются в спецификации языков программирования и (или) которые использую лично я:
На этом глава о html-коде заканчивается, можете переходить к знакомству с CSS. |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![[наверх]](../images/row.gif)
