Описание HTML. Теги языка, их свойства
advertisement
Описание HTML. Теги языка, их свойства HTML HTML - это язык структурной разметки, используемый для создания Web-страниц. Он представляет собой простой набор кодов, называемых элементами, который используется для определения структуры и формата документов. Web-браузер • Web-браузер - пользовательская программа, которая выводит данный документ на экран, интерпретируя значения этих кодов. Элементы языка HTML • Элементы в языке HTML состоят из буквенно-цифровых кодов, помещенных в угловые скобки, например: • <В>, <HTML >, <IMG>, <HR>. Элементы языка HTML • Большинство элементов состоят из пары тегов открывающего и закрывающего. • Открывающий тег - это просто мнемонический символ элемента, заключенный в угловые скобки. Например, символ, обозначающий жирный шрифт, В (от слова Bold - жирный), а его открывающий тег <В>. Закрывающий тег идентичен открывающему за тем исключением, что перед символом ставится прямая наклонная черта. Действие элемента распространяется на всё, что находится между открывающим и закрывающим тегами: • <В>Этот текст набран жирным шрифтом </В> Элементы языка HTML • Хотя большинство тегов используются парами, существует несколько исключений. • <BR>, <NOBR> Синтаксис элемента HTML • Имя Имя Значение • тега атрибута атрибута • <H1 ALIGN = “LEFT”> Заголовок </H1> • __атрибут__ содержимое закрывающий _элемента_ ____тег____ • _____открывающий тег________ • _______________________Элемент HTML_____________________ Правила языка HTML • 1. Названия элементов можно писать в любом регистре. • Элемент <hTml> обозначает то же самое, что и <html> или <HTML>. Броузер не обращает внимания на то, буквами в каком регистре написаны имена элементов. Тем не менее, следует придерживаться определенного стиля: писать все элементы строчными или заглавными буквами. Правила языка HTML • 2. Значения атрибутов не всегда можно писать в любом регистре. • Значение атрибута часто чувствительно к регистру букв, в особенности когда дело касается имён файлов. Имя файла в элементе <IMG SRC=”FILENAME.GIF”> не всегда можно заменить на <IMG SRC=”FILENAME.GIF”>. Всё зависит от операционной системы: играет ли для неё какое-либо значение разница в регистре букв. Во избежание недоразумений всегда указывайте в точности то имя, которое было присвоено файлу при сохранении. Правила языка HTML • 3. Названия элементов не должны содержать пробелов. • Броузеры рассматривают первый пробел, встречающийся в элементе, как конец названия элемента и начало его атрибутов. • Например, <I M G> не означает <IMG> - тег вставки рисунка. Он будет обозначать <I> элемент курсива, - с двумя неопределенными атрибутами М и G. Правила языка HTML • 4. Значения атрибутов могут содержать пробелы, если они помещены в кавычки. • Некоторые атрибуты имеют известные значения, как правило, это строки типа LEFT, RIGHT или CENTER. Данные значения не требуется заключать в кавычки. • Если же значением атрибута надписи к рисунку ALT будет фраза My dog, она должна быть заключена в кавычки. <1MG SRC=dog.gif ALT=”My dog”> Если кавычки не поставить, то атрибуту ALT будет присвоено значение My, a dog и Rover будут приняты за два неопределенных атрибута. Правила языка HTML • 5. Браузеры игнорируют несколько пробелов подряд и сжимают их в один. Браузеры сжимают последовательность из нескольких символов пробела, табуляции или перевода строки в один единственный символ. Эти символы не могут быть использованы для форматирования, если только текст с ними не помещен в специальный элемент <PRE>. Он сохраняет значение каждого символа. Правила языка HTML • 6. HTML-документы могут содержать комментарии. • Язык HTML поддерживает использование комментариев, которые не выводятся браузером на экран. • Комментарии начинаются с символов <!- - и заканчиваются символами - -> и могут содержать любое количество строк. Между дефисами и восклицательным знаком не должно быть пробелов. Правила языка HTML • 7. Элемент, включающий в себя открывающий тег другого элемента, должен также включать в себя и закрывающий тег этого элемента. • Пары тегов разных элементов должны вкладываться друг в друга, а их закрывающие теги не должны пересекаться. Должна соблюдаться четкая последовательность открытия и закрытия тэгов. • <В><I>Правильно</I><В> Структура HTML - документа • • • • • • • • • • <!DOCTYPE HTML PUBLIC "html version"> <HTML> <HEAD> <TITLE> Название документа </ TITLE> . . . Здесь указывается прочая дополнительная информация . . . </HEAD> <BODY> . . . Здесь находится размеченный текст . . . </BODY> </HTML> Три группы элементов HTML: • Элементы уровня блока • Элементы уровня текста • Символьные примитивы Элементы уровня блока • Заголовки • Существует 6 различных уровней заголовков: <Н1>…</Н1> • <Н2>…</Н2> • <НЗ>…</Н3> • <Н4>…</Н4> • <Н5>…</Н5> • <Н6>…</Н6> • Уровни располагаются в порядке важности, начиная с <Н1> - самого важного - до <Н6> - наименее важного. Большинство браузеров выводят заголовки буквами большего размера и/или используют жирный шрифт. Элементы уровня блока • Абзацы и переводы строки • Текст, окруженный тегами <Р> и </Р>, означает, что он является логическим абзацем. • Текст внутри элемента <Р> выводится с выравниванием по левому краю. С помощью атрибута ALIGN текст абзаца можно выровнять по ширине, правому краю или по центру. Так как по умолчанию ALIGN принимает значение LEFT, это значение никогда не ставят явно. • <p align=“left”> … </p> right center justify Элементы уровня блока • Для создания нескольких пустых строк нужно пользоваться элементом <BR>. • <BR> - перенос строк. Элементы уровня блока • Center как элемент уровня блока • Для того, чтобы выровнять текст или внедренные объекты, например изображения, достаточно окружить его тегами <CENTER> и </CENTER>. • Согласно описанию языка HTML 3.2 элемент <CENTER> - это просто укороченная запись элемента <DIV ALIGN = CENTER>, который оказывает на текст тоже действие. Элементы уровня блока • Разделы • Элемент <DIV> используется для структуризации HTML-документов в виде разделов. С помощью атрибута ALIGN любую часть раздела можно выровнять по правой, левой стороне или по центру. По умолчанию текст в элементе выравнивается по левой стороне. Разделы также используются совместно со стилями. Элементы уровня блока • Блоки цитат • Иногда при цитировании текста большого объёма нужно сделать так, чтобы он выделялся из остального текста. Для этой цели может служить элемент <BLOCKQUOTE>. В него можно включать в документ большие цитаты из других источников. • Текст, помещаемый между тегами • <BLOCKQUOTE> </BLOCKQUOTE>, • как правило, выводится с отступом. Как и в случае с абзацами, все пробелы, символы табуляции и перевода строки внутри данного элемента игнорируются, а для изменения перехода текста на следующую строку и добавления нескольких пустых строк используется элемент <BR> или другие элементы. Элементы уровня блока • Переформатированный текст • Представьте себе, что в Web-страницу надо вставить строки стихотворения. Для этого потребуется директива, которая прикажет браузеру сохранить формат текста. Текст следует поместить между тегами <PRE> и </PRE>, и тогда он не будет отформатирован браузером. При изменении размера окна браузера текст не изменяется. Если строки выходят за пределы окна браузера, в окне появляются горизонтальная и вертикальная линейки прокрутки. Как правило, браузер выводит переформатированный текст с использованием моноширинного шрифта. Обычно это Courier. Внутри элемента можно пользоваться некоторыми элементами форматирования, например <В>,<I>, помещать ссылки. Элементы уровня блока • Списки • В языке HTML используются три основных формы списков: • упорядоченные списки (<OL>), • неупорядоченные списки(<UL>) , • списки определений(<DL>). Элементы уровня блока • • • • • • • • • • • • • УПОРЯДОЧЕННЫЕ СПИСКИ Упорядоченный список, определяемый с помощью <OL> и </OL>, создаёт список с нумерацией. Для нумерации могут использоваться арабские цифры, буквы и римские цифры. Упорядоченные списки используются для создания простых перечислений или поэтапных указаний, так как каждый из пунктов списка нумеруется браузером автоматически. Пункты обозначаются с помощью элемента <LI>. Элемент <LI> не требует закрывающего тега. Пункты списка, как правило, выводятся браузером с отступом. Нумерация начинается с 1. Сам элемент <OL> имеет 2 основных атрибута - START и TYPE. Все они могут употребляться по желанию. Атрибут TYPE элемента <OL> может принимать следующие значения: • а - для нумерации строчными буквами • А - для нумерации заглавными буквами • I - для нумерации заглавными римскими цифрами • i- для нумерации строчными римскими цифрами • 1 - для обычной нумерации. В элементе <OL> может использоваться атрибут START, обозначающий с какого значения начинать нумерацию списка. Значение атрибута START всегда должно быть числом. Для того, чтобы начать нумерацию с буквы «j», необходимо набрать код <OL TYPE="a" START="10">, так как буква «j» является десятой в алфавите. <OL TYPE="a" START="10" > <LI> Здесь должна быть буква «j» <LI> Здесь должна быть буква «к» </OL> Элементы уровня блока • НЕУПОРЯДОЧЕННЫЕ СПИСКИ • <UL> и </UL> используется в тех случаях, когда при перечислении нумерация не важна. Браузер обычно добавляет к пункту списка какой-нибудь маркер (сплошной круглый маркер, квадрат или пустой круглый маркер) и выводит список с отступом. • Неупорядоченные списки могут вкладываться друг в друга. Каждый из вложенных • списков выводится с увеличенным отступом, соответственно меняется маркер. Обычно на • первом уровне используются заполненный круглый маркер. На втором - пустой круглый • маркер. На третьем уровне вложенных списков - квадрат. С помощью атрибута TYPE • можно менять тип маркера. Он может ставиться в элементе <UL> и определять тип • маркера для всего списка. Атрибут TYPE может • принимать следующие значения: disc, circle или square. • <UL TYPE="square"> • <LI >Тип можно задать для • <LI >всего списка или • </UL> Элементы уровня блока • СПИСКИ ОПРЕДЕЛЕНИЙ • Список определений представляет собой список терминов вместе с их определениями - нечто вроде словаря. Списки определений помещаются между тегами <DL> и </DL>. • Каждый из терминов помещается в элемент <DТ>(от слов definition term определяемый термин). Каждое определение помещается в элемент <DD>. • <DL> • <DТ>Интернет</DТ> • <DD>Tак называется всемирная сеть сетей, которая использует набор сетевых • протоколов TCP/IP.</DD> • <DТ>Доменное имя</DТ> • <DD>Буквенно-цифровое название для обозначения сети или узла в сети (например, • apple.com, nic.serf.net).</DD> • </DL> • Выводится данный список с отступом в тексте. уровня блока •Элементы Горизонтальные линейки • Элемент <HR> - пустой и не требует закрывающего тега, т.к. не окружает никаких данных. • Атрибут SIZE устанавливает толщину (высоту) линейки, WIDTH - ширину, ALIGN управляет выравниванием по горизонтали. Атрибут NOSHADE создает линейку без тени. • <HR WIDTH="50%" SIZE="3" NOSHADE ALIGN="CENTER" > Элементы уровня текста • Текстовые элементы делятся на два основных вида - физические и логические. • Физические элементы, такие как <В> жирный шрифт или <I> - курсив, используются для указания того, как текст должен выводиться на экран. • Логические элементы, как, например <STRONG> и <ЕМ>, обозначают, чем текст является, но не сообщают о том, как он будет выглядеть. Элементы уровня форматирования текста Элементы физического текста • • • • • • • • Это<В>жирный</В> Это<I>курсив</I> Это<ТТ>моноширинный</ТТ> Это<U>подчеркнутый</U> Это<STRIКЕ>перечеркнутый</STRIКЕ> Это тоже <S>перечеркнутый</S> Это<ВIG>увеличенный шрифт (на один пункт больше)</BIG> • Это<SMALL>уменьшенный шрифт (на один пункт меньше)</SMALL> • Это текст <SUB>B нижнем индексе</SUВ> • Это текст <SUP>B верхнем индексе</SUР> Элементы уровня текста • Элементы логического форматирования текста • Это<ЕМ>ЕМ - выделение</ЕМ> • Это<STRONG>STRONG - сильное выделение</STRONG> • Это<СIТЕ>СIТЕ - цитата</СIТЕ> • Это<DFN>DFN - определение</DFN> • Это<CODE>CODE - исходный код</СОDЕ> • Это тоже <KBD>KBD - набор на клавиатуре</KBD> • Это<SАМР>SАМР - пример</SАМР> • Это<VAR>VAR - переменная в Программе</VAR> Символьные примитивы • Иногда необходимо вставить в документ определенные символы - например, символы с ударением, символы авторских прав и даже угловые скобки, используемые для обрамления HTML элементов. Чтобы их можно было использовать в HTML-документах, их необходимо создать с помощью специального кода. • Все коды символов имеют следующую модель: • &код; • где «код» - это слово или числовое значение, указывающее на конкретный символ, который необходимо вывести на экран.
