На главную
 
Таги (теги, тэги)
 
С сайта http://www.botik.ru/ICCC/Archives/source/leto99/smena1/htmlbook/content.html
Ты знаешь, в чем главный прикол языка HTML? Прикол в том, что если ты хочешь сделать из скучного текста нечто такое, чем потом не стыдно похвастать маме и папе, то ты должен использовать так называемые таги или метки - это такие команды, заключенные между < и >. Они то и отвечают за то, чтобы обычный текст, так сказать, "запел и заплясал". Кроме того, у некоторых тагов (почти у всех ) есть атрибуты - это дополнительные параметры, которые расширяют возможности данного тага. Атрибут состоит из конструкции вида
имя атрибута = "значение атрибута"

Не вздумай ставить пробелы между именем атрибута, равенством и значением атрибута (это приведет к ошибке)! Между прочим, приличные люди пишут значение атрибута в кавычках. Хотя в большинстве случаев это необязательно, я все-таки рекомендую это делать.
Вот пример самого настоящего атрибута:
COLOR="#FF0000"
Многие метки используются парами - открывающая и закрывающая. Сделано это для того, чтобы метка действовала только в определенном месте документа. Помни, если ты вдруг забыл (ну совсем нечаянно) поставить закрывающую метку, то действие ее будет распространяться до конца документа.
Например, вот такая штука:
<TABLE> . . . </TABLE>.

Закрывающий таг отличается от открывающего тем, что в нем ставится знак "/". Кстати, атрибуты могут ставиться только в открывающих тагах! Знавал я эдаких мощноруких молодчиков, проставляющих атрибуты, где попало - естественно, у них ничего не работало .
Любой HTML-документ, даже самый простой, должен содержать таги: <HTML>, <HEAD>, <BODY> и, соответственно, выглядеть он будет так:
<HTML>
<HEAD>
<TITLE> Здесь доложен располагаться заголовок документа</TITLE>
</HEAD>
<BODY>
А вот здесь-то и пишется все, что ты хотел бы увидеть на экране
</BODY>
</HTML>
Посмотри в заголовок браузера, увидишь текст, прописанный между метками <HEAD></HEAD> в блоке <TITLE></TITLE>. А весь текст ,который ты сейчас читаешь, прописан между метками <BODY></BODY>.
Между тагами <HEAD> и </HEAD> располагается всякого рода служебная информация, о которой будет написано чуть позже. А вот все шедевры, которые ты хочешь вывести на экран, должны находиться в блоке <BODY> ... </BODY> и только там!
Первое, что мы с тобой научимся делать, это формировать заголовки и абзацы. Всего в HTML существует 6 уровней заголовков. А отличаются они друг от друга всего лишь размерами:
<H1> Заголовок 1 уровня (самый крупный) </H1>
<H2> Заголовок 2 уровня </H2>
. . .
<H6> Заголовок 6 уровня - самый маленький </H6>

Кроме того, у тагов <H1>...<H6> есть один необязательный атрибут ALIGN, который принимает три значения: LEFT, CENTER, RIGHT. Этот атрибут позволяет тебе выровнять твой заголовок соответственно по левому краю, по центру и даже по правому краю !!!
Пример:
Строчка <H2 ALIGN="CENTER"> Hellcome To Well </H2> создаст заголовок 2 уровня
"Hellcome To Well" и выровняет этот заголовок по центру.

Hellcome To Well

Hellcome To Well

Hellcome To Well

Hellcome To Well

Hellcome To Well
<H1 ALIGN="LEFT">Hellcome to Well</H1>
<H2 ALIGN="RIGHT">Hellcome to Well</H2>
<H3 ALIGN="CENTER">Hellcome to Well</H3>
<H4 ALIGN="LEFT">Hellcome to Well</H4>
<H5 ALIGN="RIGHT">Hellcome to Well</H5>
<H6 ALIGN="CENTER">Hellcome to Well</H6>

Один из основных приколов в HTML - это сколько бы ты пробелов ни ставил между словами в исходном файле, в просмотре все эти пробелы сократятся в один. Та же ситуация и с переводами строк. Все они превращаются в один пробел. Не забывай об этом - это важная фишка. Поэтому здесь необходимы таги, разрывающие строку и формирующие абзац. Разрыв строки осуществляется с помощью команды <BR>. Все, что напишешь после этого тага, будет выведено на экран с новой строки.
Абзац в HTML несколько отличается от обычного абзаца в книге. В отличие от своего печатного собрата, это просто блок текста, выровненный одним из четырех способов. Сверху и снизу пропускаются пустые строчки. Ни о каком абзацном отступе нет и речи! Ну и забавные же дядьки придумали HTML! Ну так вот, абзац формируется с помощью тага <P>. В конце абзаца можно поставить закрывающий таг </P>, а можно и не ставить - все зависит от ситуации. Например, если дальше у тебя идет еще один абзац, то броузеру плевать, есть у тебя в конце </P> или нет - он просто начнет новый абзац и все. У тага <P> есть атрибут ALIGN (совсем как у заголовков). Вот только принимает он уже четыре значения LEFT, CENTER, RIGHT и JUSTIFY. Последнее позволяет выровнять текст по обоим краям (ну чем не круто???). Вот пример создания абзаца, выровненного по обоим краям:
<P ALIGN="JUSTIFY">
Здесь я собираюсь показать как используют такие стили как полужирный (bold), курсивный (italic), подчеркнутый (underline) и перечеркнутый (strike-through). А еще обычный текст можно преобразовать в верхний или нижний индексы.
Я постарался изобразить эти стили так, чтобы было понятно, что каждый из стилей обозначает. А физическими их называют только потому, что в любом браузере текст с применением этих стилей будет выглядеть абсолютно одинаково: если bold - так значит везде bold. Ну что ж, давай посмотрим, как же они задаются эти стили:

<B>. . .</B> - все, что будет написано между этими тагами - будет полужирным.
<I> . . .</I> - а здесь уже получится курсивчик.
<U>. . .</U> - догадливые, наверное, уже сообразили, что это подчеркивание.
<STRIKE>...</STRIKE> - это ну просто перечеркнутый текст
<SUB>...</SUB> - а этот блок формирует нижний индекс
<SUP>...</SUP> - ну это, естественно, верхний индекс
В браузере
полужирный
курсивчик
подчеркнутый
перечеркнутый
нижний индекс
верхний индекс Исходный код
<B>полужирный</B>
<I>курсивчик</I>
<U>подчеркнутый</U>
<STRIKE>перечеркнутый</STRIKE>
нижний <SUB>индекс</SUB>
верхний <SUP>индекс</SUP>

Хотя подчеркнутый стиль использовать настоятельно не рекомендую, поскольку точно также помечается текст другого рода, а именно - ссылки (ну об этом чуть попозже).
Замечательным фактом по-моему является то, что эти стили можно еще и смешивать! То есть твой текст может быть, например, одновременно и жирным, и курсивным. А делается это по принципу контейнера, то есть таги как бы вкладываются один в другой.
Пример:
<B> Вот такая штука </B> <I>Вот такая штука</I>
В браузере
Вот такая штука
Вот такая штука Исходный код
<B>Вот такая штука</B>
<I>Вот такая штука</I>
А теперь рассмотрим так называемые логические стили. Главное их отличие от физических- так это то, что текст, оформленный с помощью одного из этих стилей, может выглядеть совершенно по-разному в разных броузерах. Все здесь зависит от того, как тот или иной стиль определен в конкретном браузере. Сейчас я перечислю наиболее часто употребляемые стили:
<EM> . . . </EM> выделенный текст (англ. emphasis) - в NS похож на курсив
<STRONG> . . . </STRONG> сильно выделенный текст - в NS сильно смахивает на просто полужирный текст)
<CODE> . . . </CODE> по всей видимости хорош для ввода всякого рода кодов в документ (например, текстов программ)
<SAMP> . . . </SAMP> судя по названию этот таг используют для выделения примеров (по-английски samples)
<KBD> . . . </KBD> ну а этот таг наверняка должен просто фантастически красиво выводить на экран различные комбинации клавиш типа Ctrl-Alt-Del (не нужно пробовать, что будет, ок?)
<VAR> . . . </VAR> и последний стиль служит для обозначения переменных.
В браузере
текст
текст
текст
текст
текст
текст Исходный код
<EM>текст</EM>
<STRONG>текст</STRONG>
<CODE>текст</CODE>
<SAMP>текст</SAMP>
<KBD>текст</KBD>
<VAR>текст</VAR>

Честно говоря, не знаю, для чего придумали эти стили, поскольку в NS4, например, 3ий,4ый и 6ой стили практически ничем не отличаются друг от друга.
Я совсем забыл еще об одной возможности, связанной с управлением текстом. Ведь можно изменять его размер! Правда, я долго думал, в какой из разделов об этом написать - о физических или логических стилях... Наконец, забил на все и сделал еще одну часть. Так вот: размер букв в текстовых блоках можно делать больше или меньше, причем практически неограниченно. За это отвечают метки:

<BIG>...</BIG> - текст между этими метками становится больше
<SMALL> ...</SMALL> - а между этими - меньше.

Hellcome to Well <BIG>Hellcome to Well</BIG>
Hellcome to Well <BIG><BIG>Hellcome to Well</BIG></BIG>
Hellcome to Well <SMALL>Hellcome to Well</SMALL>
Hellcome to Well <SMALL><SMALL>Hellcome to Well</SMALL></SMALL>

Кстати, если, например, <BIG>...</BIG> вложить друг в друга несколько раз, то размер шрифта раздуется до неимоверных размеров.
Начнем с очень простого вопроса: если "<" и ">" используются для разметки документа, как же эти символы вывести на экран??? Вот для этой цели и используются & -последовательности (по-русски они называются ескейп-последовательности). Например, чтобы "<" появилась где-то в документе, необходимо в соответствующее место исходного текста вставить вот такую штуку - <. Вот еще несколько символьных объектов:
&gt; = > &quot; = " &amp; = &
&copy; = © &reg; = R &sect; = 
&laquo; = ' &raquo; = ' &nbsp; = Пробел
Здесь очень важно правильное написание - все символы должны быть маленькими (еще это называется "в нижнем регистре"), и в конце обязательно должна стоять точка с запятой, а иначе ничего у тебя не получится!
Если тебе ну просто позарез нужно вывести на экран какой-то текст с сохранением всех пробелов и переводов строки как и в исходном файле, то это можно легко сделать с помощью конструкции

<PRE> . . . </PRE>

Все, что ты напишешь между этими тагами, будет выведено в окне браузера точно в том виде, в котором ты это ввел в исходном файле (даже неприличные слова). Причем, большинство остальных тагов, форматирующих текст, будет работать. Так что, этот текст можно будет сделать курсивным, например.
Часто возникает необходимость вывести на экран блок текста с левым отступом. Например, при написании стихов (чтобы отделять одно четверостишие от другого). Если ты уже почувствовал всю необходимость существования этого тага, то вот он:
<BLOCKQUOTE> . . . </BLOCKQUOTE>

Все те перлы, что ты напишешь между этими тагами, будут показаны с увеличенным левым полем (говорят, что из разговора запоминается последняя фраза. Так вот, фразу про перлы надо запомнить ).
В HTML существует такая приятная возможность как рисование линий. Правда, только горизонтальных, зато любой длины! А еще их можно даже выравнивать! Так что, для отделения чего-нибудь друг от друга этот объект вполне сойдет. Многим он даже нравится, поскольку загружается быстро (в отличие от картинок).
Например, получается красиво, когда между заголовком и основным текстом или в конце документа ставится линия. Вообще, этот элемент я считаю незаменимым при создании гипертекстовых документов.
Линия создается так:
<HR> - вот так просто
и имеет три необязательных атрибута:
ALIGN - принимает три значения: LEFT, RIGHT и CENTER
WIDTH - ширина линии. Задаваться может двумя способами: либо в процентах от ширины экрана, либо жестко в пикселях.
SIZE - высота линии. Задается в пикселях.
NOSHADE - значения здесь никакого нет. Надо просто написать это. Создастся плоская линия без тени.


А вот сразу и пара примеров на всякий случай: <HR ALIGN="CENTER" WIDTH="80%" SIZE="2"> создастся линия, выровненная по центру, ширина ее - 80% от общей
ширины экрана (при любой ширине), толщина линии - 2 пикселя. <HR ALIGN="RIGHT" WIDTH="40" NOSHADE> линия, выровненная по правому краю шириной в 40 пикселей без тени.
В браузере Исходный код
________________________________________ <HR ALIGN=CENTER WIDTH="40%" SIZE=2>
Вообще, по-моему, списки бывают трех видов: нумерованные, маркированные и списки определений. На самом деле это придумал не я, а разработчики HTML. Просто сколько я ни тужился, больше никаких списков придумать не смог.
В чем же их разница? Нумерованные списки - у которых каждый элемент имеет свой номер (отсюда и название), маркированные - каждый элемент списка просто отмечается значком (маркером); ну, и наконец, списки определений позволяют красиво сформировать набор терминов и объяснений к ним.
<OL>
<LI> Элемент1
<LI> Элемент2
. . .
Пример нумерованного списка </OL>

В браузуре Исходный код
1. Элемент1
2. Элемент2
<OL>
<LI>Элемент1
<LI>"ktvtyn2
</OL>
Элементов <LI> может быть сколько угодно. Реально каждый из них заменяется браузером на число. Нумерованный список имеет два атрибута:
TYPE - вид нумерации, принимает 4 значения:
"1" - нумерация арабскими цифрами
"a" - нумерация с помощью латинских букв a, b, c, d, ...
"A"- нумерация с помощью заглавных латинских букв A, B, C, D, ...
"I" - нумерация с помощью римских цифр I, II, III, IV, V, ...
START - с какого числа начнется нумерация списка. Значение - любое число. Пример:
<OL TYPE="I" START="3">
<LI> Дуня Петина
<LI> Люба Пузина
Пример нумированного списка </OL>
В браузере Исходный код


III. Дуня Петина
IV. Люба Пузина
<OL TYPE="I" START="3">
<LI> Дуня Петина
<LI> Люба Пузина
</OL>

<UL>
<LI> Элемент 1
<LI> Элемент 2
. . .
Пример ненумированного списка </UL>
В браузере Исходный код


 Элемент 1
 Элемент 2
<UL>
<Элемент1>
<Элемент2>
</UL>

Все практически то же самое. Только числа заменяются на маркер (по умолчанию кружок). Если ты любишь NS больше, чем MSIE3-4, то можешь использовать атрибут
STYLE - который принимает три значения
"DISC" - список метится маркером " "
"CIRCLE" - а здесь " "
"SQUARE" - просто " "
Как я уже намекнул, этот атрибут будет действовать только в браузерах фирмы Netscape.
Пример:
<UL TYPE="SQUARE">
<LI> Netscape Communicator 4.04
<LI> Microsoft Internet Explorer 4
</UL>
 Netscape Communicator 4.04
 Microsoft Internet Explorer 4 <UL TYPE="SQUARE">
<LI> Netscape Communicator 4.04
<LI> Microsoft Internet Explorer 4
</UL>
<DL>
<DT>Термин 1
<DD>Расшифровка термина 1
<DT>Термин 2
<DD>Расшифровка термина 2
. . .
списки определений</DL>

В браузере Исходный код

Термин 1
Расшифровка термина 1
Термин 2
Расшифровка термина 2
<DL>
<DT>Термин 1
<DD>Расшифровка термина 1
<DT>Термин 2
<DD>Расшифровка термина 2
</DL>
По общему виду вроде бы все понятно, но если нет, то вот еще примерчик на использование списков определений:

<DL>
<DT><B>HTML</B>
<DD>(HyperText Markup Language) язык гипертекстовой разметки. Используется для создания документов с применением гипертекста.
<DT><B>JavaScript</B>
<DD>Язык программирования. Используется как включение в HTML для оживления Web-страниц, придания им элементов интерактивности.
</DL> HTML
(HyperText Markup Language) язык гипертекстовой разметки. Используется для создания документов с применением гипертекста.
JavaScript Язык программирования. Используется как включение в HTML для оживления Web-страниц, придания им элементов интерактивности.

До настоящего момента мы рассматривали только простые списки. Но однажды ты вдруг начинаешь подумывать о том, что простые списки - это не так уж и весело. Вот тогда я тебе скажу, что в HTML можно создавать и многоуровневые списки, то есть в один список вкладывать другой. Возможно, это звучит странно, но надеюсь, что последующий пример все прояснит:
Пример:
<OL TYPE="I">
<LI>
<LI> Монитор
<LI>Системный блок:
<UL>
<LI> Материнская плата
<LI> Жесткий диск
<LI> Устройство чтения с гибких дисков
<LI> CD-ROM
</UL>
<LI>Клавиатура
<LI>Мышь
</OL>
I. Монитор
II. Системный блок:
o Материнская плата
o Жесткий диск
o Устройство чтения с гибких дисков
o CD-ROM
III. Клавиатура
IV. Мышь
<OL TYPE="I">
<LI> Монитор
<LI>Системный блок:
<UL>
<LI> Материнская плата
<LI> Жесткий диск
<LI> Устройство чтения с гибких дисков <LI> CD-ROM
</UL>
<LI>Клавиатура
<LI>Мышь
</OL>

Как видно из примера, мы попросту вставили ненумерованный список как элемент нумерованного. Вот и все!
Конечно, все это круто и форматированный текст, и списки, и заголовки, и даже ссылки. Но, как ни крути, без картинок любой документ будет выглядеть сухим и скучным. Поэтому те самые бородатые дядьки почесались и сказали - "э, а давайте графику в документ вставлять?". За что им все сказали спасибо.
Первое, что надо сделать, чтобы использовать картинку, ее надо найти и по возможности переместить поближе к твоему документу.
Затем в исходном файле нужно вставить следующую конструкцию:
<IMG SRC="путь до картинки">

Тогда в соответствующем месте документа будет вставлена картинка, путь до которой указан как значение атрибута SRC. Легко догадаться, что чем ближе картинка к документу, тем короче до нее относительный путь. Как говорится, "своя картинка ближе к документу". Атрибут SRC является обязательным для тага <IMG>, но кроме него есть еще необязательные атрибуты:
HEIGHT - высота картинки (значение задается в пикселях)
WIDTH - ширина картинки (значение задается в пикселях)
Хитрость этих двух атрибутов в том, что если будешь использовать их по одному, то размеры картинки будут изменяться пропорционально. Если же вставишь их оба, то приготовься посмеяться - твоя картинка может оказаться непомерно сплющенной
ALT - альтернативный текст (он будет появляться во время загрузки картинки, и даже после загрузки, если мышью навести на картинку - очень удобная штука)
ALIGN - выравнивание с обтеканием (принимает значения LEFT и RIGHT). Если этот атрибут задан, то текст начинает обтекать нашу картинку. Попробуй вставить картинку, поставить ALIGN, добавь текста после картинки - и увидишь, что получится.
BORDER - толщина границы вокруг картинки (задается в пикселях) Ну а теперь по традиции небольшой пример:
<IMG SRC="pics/title.jpg" ALIGN="LEFT" HEIGHT="100" ALT="Картинка">
В браузере Исходный код

<IMG SRC="../pics/title.jpg" ALIGN="LEFT" ALT="Картинка">
Итак, что же такое гипертекст. Пусть у нас есть два документа: "Документ1" и "Документ2". Причем нам хотелось бы, листая Документ1, как-нибудь открыть Документ2, не вводя его имя в командной строке браузера. Для этого и служит гипертекст. Он позволяет связать два документа следующим образом:
<A HREF="Документ2"> Перейти к Документу2 </A>

Теперь посмотрим как же это работает. Любой текст, написанный между тагами <A> и </A>, воспринимается браузером как ссылка и выделяется особым образом. Текст, являющийся ссылкой, по умолчанию синего цвета и подчеркнутый. Если мышью встать на ссылку, то указатель мыши автоматически сменится на эдакий пальчик (не средний , а указательный), а в окне статуса появится значение атрибута HREF. Нажатие левой кнопки мыши на ссылке приведет к загрузке документа, путь до которого указан в HREF. Если ты ссылаешься на локальный файл (находящийся на жестком диске твоего компьютера), то ты должен указать полный, а лучше относительный путь до этого файла.
Например:
<A HREF="/examples/666.htm">Про Iron Maiden. </A>
В браузере Исходный код
Посмотрите,не пожалеете
<A HREF="examples/666.htm"> Посмотрите,не пожалеете?</A>

Здесь написано, что из текущей директории браузер должен подняться на уровень вверх (../), потом спуститься в директорию "works" и оттуда загрузить документ под именем "kids.html".
Действие тага <A> не ограничено твоим компьютером. Ссылку можно делать и к ресурсу, находящемуся в сети. Только здесь уже важно указывать несколько важных вещей, а именно:
1. Протокол ( например, http:// или ftp://)
2. Имя компьютера в сети (например, www.botik.ru)
3. Путь до файла на этом компьютере (например, /~technol/pics/backG.gif)
Вот пример ссылки до сетевого ресурса:
<A HREF="http://www.botik.ru"></A>

В браузере Исходный код
www.botik.ru
<A HREF="http://www.botik.ru">www.botik.ru</A>
Кстати, вот такая забавная штука. В качестве ссылок можно использовать картинки. Для этого достаточно поместить таг <IMG> между <A> и </A>.
Пример:
< HREF="www.botik.ru"> <IMG SRC="../pics/botik.gif"> </A>

В браузере Исходный код

<A HREF="http://www.botik.ru"><IMG SRC="../pics/botik.gif"></A>
 
Со времён людоедства нравы очень огрубели... 
Подставь правую ягодицу,когда тебя бьют по левой... 
Психически больная совесть... 
И многое другое в новой книге Михаила Маковецкого