|
||||
| Таги (теги, тэги) | ||||
| С сайта 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> вложить друг в друга несколько раз, то размер шрифта раздуется до неимоверных размеров. Начнем с очень простого вопроса: если "<" и ">" используются для разметки документа, как же эти символы вывести на экран??? Вот для этой цели и используются & -последовательности (по-русски они называются ескейп-последовательности). Например, чтобы "<" появилась где-то в документе, необходимо в соответствующее место исходного текста вставить вот такую штуку - <. Вот еще несколько символьных объектов: > = > " = " & = & © = © ® = ® § = § « = « » = » = Пробел Здесь очень важно правильное написание - все символы должны быть маленькими (еще это называется "в нижнем регистре"), и в конце обязательно должна стоять точка с запятой, а иначе ничего у тебя не получится! Если тебе ну просто позарез нужно вывести на экран какой-то текст с сохранением всех пробелов и переводов строки как и в исходном файле, то это можно легко сделать с помощью конструкции <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> |
