Лекция 1 Введение в HTML
advertisement
1 Лекция 1 Введение в HTML Основные понятия Для создания Web-страницы можно воспользоваться специальными программами редактирования документов Всемирной паутины. Другой способ подготовки Web-страниц заключается в «ручном» создании кода документов на языке HTML – HyperText Markup Language – Язык разметки гипертекста. Данный язык представляет собой довольно простой набор команд, описывающий структуру документа. Язык HTML позволяет выделить в документе отдельные элементы – заголовки, абзацы, таблицы и т.д. Файлы с текстом кода на языке HTML имеют расширение .html или .htm. HTML является описательным языком разметки документов, в нем используются указатели разметки (теги). Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами, то есть документ НТМL представляет собой не что иное, как обычный файл, с добавленными в него управляющими НТМL-кодами (тегами). В нем разрешено использовать только три управляющих символа: горизонтальную табуляцию, перевод каретки и перевод строки. Это облегчает взаимодействие с различными операционными системами. Теги НТМL-документов в большинстве своем просты и понятны, ибо они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений. НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки ("<" и ">"). Простейший вариант тега — имя, заключенное в угловые скобки, например <HEAD> или <I>. Для ряда тегов характерно наличие атрибутов (т.е. параметров тега), которые могут иметь конкретные значения, устанавливаемые автором для изменения функции тега. Например, при описании таблицы открывающий тег с атрибутами может выглядеть так: <TABLE width=570 border=16> align=center cellpadding=10 cellspacing=2 Эта запись означает следующее: таблица шириной 570 пикселов, выровнена по центру, поле между рамкой и содержимым ячеек 10 пикселов, поле рамки 2 пиксела, ширина бордюра 16 пикселов. Атрибуты тега следуют за именем и отделяются друг от друга пробелами. Порядок записи атрибутов в теге значения не имеет. Атрибут тега состоит из имени, знака равенства и значения – language=“JavaScript”. В тегах могут использоваться только символы латинского алфавита, а в значениях атрибутов – любые символы. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Теги принято писать заглавными буквами, а атрибуты и их значения – прописными (например: <BODY text=black>), это не учитывается программой , но облегчает прочтение кода. Чаще всего элементы разметки HTML или HTML-контейнеры состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/) (например, для тега стиля шрифта — курсив <I> закрывающая пара представляет собой </I>, для тега заголовка <ТIТLЕ> закрывающей парой будет </ТIТLЕ>). Атрибуты прописываются в начальных тегах. Конечные теги никогда не содержат атрибутов. Теги интерпретации текстовых документов. определяют область действия 2 правил Некоторые элементы разметки не имеют конечного компонента, поскольку являются автономными элементами. Например, тег изображения <IMG>, который служит для вставки в документ графического изображения, конечного компонента не требует. К автономным элементам разметки также относятся разрыв строки (<BR>), горизонтальная линейка (<HR>) и теги, содержащие такую информацию о документе, которая не влияет на его отображаемое содержимое, например тег <META> В некоторых случаях конечные теги в документе можно опускать. Большинство браузеров устроено так, что при обработке текста документа начальный тег воспринимается как конечный тег предыдущего. Самый распространенный тег такого типа — тег абзаца <Р>. Поскольку он используется в документе очень часто, его обычно ставят только в начале каждого абзаца. Когда один абзац заканчивается, следующий тег <Р> сигнализирует браузеру о том, что нужно завершить данный абзац и начать следующий. Большинство авторов тегом конца абзаца не пользуются. Для краткости и образности мы будем в ряде случаев вместо словосочетания "элемент разметки" применять термин "контейнер". Общая схема построения контейнера в формате HTML может быть записана в следующем виде: "контейнер"= <"имя тега" контейнера </"имя тега"> "список атрибутов"> содержание Следует отметить, что в литературе кроме термина "контейнер" еще используется и термин "элемент". Следует быть внимательным, чтобы не путать контейнер (например, BODY) и тег (BODY), используемый при формировании контейнера. Кроме тегов, элементами HTML являются CER (Character Entity Reference), они предназначены для представления специальных символов в документе HTML, которые могут быть неверно обработаны браузером. Предположим, создается документ HTML, речь в котором идет об элементах данного языка. Если указать имя тега <BODY> просто в документе, браузер может воспринять его как непосредственно старт-тег. Для вывода таких символов и используется CER. Например, чтобы представить символ "<" в документе HTML, нужно заменить его на &lt;, а символ ">" — на &gt;. То есть, если указать в тексте HTML строку &lt;BODY&gt;, она будет выглядеть на экране как текст <BODY>. Может возникнуть вопрос: как быть с символами "</>", "&" и со специальными символами, типа знака ударения? Можно выводить их, используя соответствующие CER, например для "&" это будет &amp;, и т. д. CER легко обнаружить, если посмотреть на структуру любого документа HTML, поскольку каждый из них начинается с амперсанта "&". В отличие от наименований тегов HTML, наименования CER чувствительны к регистру символов. Также наименования CER могут задаваться не в виде имени, а с помощью трехзначных кодов символов в виде &#nnn;. Далее в таблице приведены наиболее часто используемые CER и соответствующие им числовые коды. Числовой код Именная замена Символ Описание &#034; &quot; " Кавычка &#038; &amp; & Амперсант 3 &#060; &lt; < Меньше &#062; &gt; > Больше &#160; &nbsp; &#161; &iexcl; ¡ Перевернутый восклицательный знак &#162; &cent; ¢ Цент &#163; &pound; £ Фунт &#164; &curren; ¤ Валюта &#165; &yen; ¥ Йена &#168; &uml; ¨ Умляут &#169; &copy; © Копирайт &#171; &laquo; « Левая угловая кавычка &#174; &reg; ® Зарегистрированная торговая марка &#177; &plusmn; ± Плюс или минус &#187; &raquo; » Правая угловая кавычка Неразрывный пробел Гипертекст породил много специальных терминов: Элемент – конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста – возможность вложения элементов. Тег – начальный или конечным маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой. Атрибут – параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые браузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами. Гиперссылка – фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от данного документа к другому. 4 Структура Web-страницы Структура HTML-документа позволяет задействовать вложенные друг в друга контейнеры. Собственно, сам документ — это один большой контейнер, который начинается с тега <HTML> и заканчивается тегом </HTML>. Он указывает браузеру, что данный текст представляет собой HTML-документ и, содержит в себе теги, которые браузер должен выявить, распознать и правильно интерпретировать. Типичная Интернет-страница состоит из двух частей: головная часть (HEAD) и тела (BODY). Эту базовую структуру в простейшем виде можно представить следующим образом: <HTML> <HEAD> <TITLE> … Начало HTML-документа Начало головной части Начало строки названия страницы Строка названия страницы </TITLE> </HEAD> <BODY> … </BODY> </HTML> Конец строки названия страницы Конец головной части Начало тела документа Конец тела документа Конец HTML-документа <HTML> </HTML> Элемент является самым внешним, так как между его начальным и конечным тегами должна находится вся страница. Этот элемент можно рассматривать как формальность. <HEAD> </HEAD> Область заголовка Wеb-страницы. Служит для формирования общей структуры документа. Должен включать элемент TITLE и допускает вложение элемента META. <TITLE></TITLE> Элемент разметки TITLE служит для именования документа в World Wide Web. Более прозаическое его назначение — именование окна браузера, в котором просматривается документ. Наличие конечного тега обязательно. Синтаксис контейнера TITLE в общем виде выглядит следующим образом: <TITLE>название документа</TITLE> Заголовок не является обязательным контейнером документа. Его можно опустить. Роботы многих поисковых систем используют содержание элемента TITLE для создания поискового образа документа. Слова из TITLE попадают в индекс поисковой системы. Из этих соображений элемент TITLE всегда рекомендуется использовать на страницах Webузла. Содержимое головной части не выводится в окне браузера, а содержит данные о документе. 5 Нужно позаботиться о том, чтобы это строка, не будучи слишком длинной, достаточно точно отражала назначение документа. Если тег <TITLE></TITLE> отсутствует, в заголовке браузера выводится реальный адрес и имя просматриваемого html-файла. <META></META> Содержит служебную информацию, которая не отражается при просмотре. Внутри нет текста, поэтому он не имеет конечного тега. Этот тег специально рассчитан на программу поискового сервера, индексирующую web-страницы. Секция заголовка может содержать несколько элементов <META>, каждый из которых отвечает за определенный набор параметров. Может содержать: срок годности документа; адрес электронной почты; имя автора страницы; набор ключевых слов для поиска; краткое описание содержания Web-страницы; Описание типа и характеристик Web-страницы; Указание приложения, в котором была создана Web-страница; URL Наличие этого тега значительно увеличивает шансы попасть в первую десятку адресов, найденных поисковым сервером. <BODY></BODY> Это собственно тело документа. Это та произвольная часть документа, которую разрабатывает автор страницы и которая отображается браузером. Конечный тег этого элемента располагается в конце html-кода. В этом элементе могут использоваться все элементы, предназначенные для дизайна web-страницы. Внутри начального тега <BODY> можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком, такие как, цвет фона, фоновую картинку, цвет текста и гиперссылок и т.д. Создание Web-страницы Так как все html-документы имеют одинаковую структуру, рекомендуется создать общий шаблон, в котором будут меняться только название (содержимое тега <TITLE>…</TITLE>) и содержательная часть документа (содержимое контейнера <BODY>…</BODY>. Создавать html-код лучше в простом текстовом редакторе, например, в программе Блокнот. Для создания документа необходимо запустить программу Блокнот и ввести общий для всех страниц код, который определяет структуру html-документа: 6 Этот документ можно сохранить под именем «шаблон» (Файл/ Сохранить как/ шаблон.txt) и использовать в дальнейшем в качестве заготовки для создания других документов. Теперь, чтобы создать web-страницу достаточно открыть файл шаблон.txt, прописать название документа и его содержательную часть: далее сохранить документ в свою папку под другим именем и дать ему расширение .htm (предпочтительно) или .html (Файл/Сохранить как в строке имя файла ввести: имя_документа.htm и нажимает на кнопку Сохранить): Теперь, чтобы просмотреть страницу, нам достаточно открыть полученный файл начало.htm. Однако, в браузере мы можем только просматривать страничку, а чтобы вносить изменения можем только html-коде. Есть несколько способов открыть html-код страницы: 1. Выбрать в меню команду Вид/Просмотр HTML-кода. 2. Выбрать на Панели инструментов клавишу Править в Блокнот 7 3. Кликнуть по экрану правок кнопкой мыши и выбрать в контекстном меню команду Просмотр HTML-кода. Далее нужно внести изменения в код документа и сохранить Закрыть Блокнот и в окне браузера нажать на кнопку Обновить инструментов. После этого внесенные изменения отобразятся на экране. в Блокноте. на панели 8 Параметры страницы Описание тегов тела документа следует начать с тега <ВОDY>. В отличие от тега <НEАD>, тег <BОDY> имеет атрибуты. Они задают параметры, распространяющиеся на весь документ, такие, как цвет фона, шрифта, гиперссылок и размеры полей страницы. Цвета зависят от настроек браузера. Когда в HTML-программе цвета явно не заданы, браузер использует свои установки по умолчанию. Стандартные цвета Windows – черные буквы на белом фоне. Изменить эти настройки можно установив свои цвета для работы по умолчанию в меню Сервис/Свойства обозревателя/Общие/Цвета. В теге <BОDY> можно задать свои цветовые параметры документа, используя атрибуты: bgcolor=цвет фона tехt=цвет текста vlink =цвет пройденных гипертекстовых ссылок link =цвет гипертекстовой ссылки alink=цвет активной гипертекстовой ссылки Цвет можно задать просто написав его название на английском языке, или используя RGB-код, который состоит из # и шестизначного кода цвета. Название Код Описание aqua #00FFFF Голубой black #000000 Черный blue #0000FF Синий fuchsia #FF00FF Сиреневый gray #808080 Серый green #008000 Зеленый lime #00FF00 Светло-зеленый maroon #800000 Коричневый navy #000080 Темно-синий olive #808000 Оливковый purple #800080 Темно-сиреневый red #FF0000 Красный silver #C0C0C0 Серебряный teal #008080 Сизый white #FFFFFF Белый yellow #FFFF00 Желный gold #FFD700 Золотой indigo #4B0080 Индиго purple #800080 Пурпурный orange #FFA500 Оранжевый violet #EE80EE Фиолетовый Если в качестве атрибутов тега <ВОDY> указать: 9 <ВОDY bgcolor=#FFFFFF техт=#0000FF vlink=#FF0000 link=#00FF00>, то цвет фона будет белым, текст будет синим, ссылки — зелеными, а пройденные ссылки станут красными. Однако пользоваться этими атрибутами следует крайне осторожно, так как у пользователя может оказаться другой интерфейс, который эти параметры не интерпретирует. В теге <BODY> можно задать также поля страницы. При выводе Web-страницы на экран браузер автоматически оставляет небольшие поля (примерно 10 пикселе) вдоль левого и вдоль верхнего краев рабочего окна. Эти поля автоматически же заполняются указанным для данной страницы фоновым цветом и/или фоновым изображением, но никакие элементы страницы не могут заходить на эти поля. Если же требуется изменить размеры полей или убрать их совсем, нужно включить в тег <BODY> атрибуты leftmargin (размер полей слева) и topmargin (размер полей сверху). В качестве значений для них после знака равенства указывается количество пикселей или нуль, чтобы отменить поля. Например, тег <ВОDY leftmargin=40> создаст на всей странице левое поле шириной 40 пикселей. При n, равном 0, левое поле отсутствует. 10 Размещение и форматирование текста Текст – единственный объект Web-страницы, который не требует специального определения. Иными словами, произвольные символы интерпретируются по молчанию как текстовые данные. Но для форматирования текста существует большое количество элементов: выделение фрагментов курсивом, полужирным, выбирать шрифт и т.д. Заголовки <Нn>…</Нn>, Чтобы объявить выбранный абзац заголовком (тем самым задав для него более крупный и жирный шрифт, чем для остального текста), достаточно заключить его в контейнер <Нn>…</Нn>, где n – размер шрифта. В стандарте определено 6 уровней заголовков: от 1 до 6. Текст, окруженный тегами <Н1></Н1>, получается большим — это основной заголовок. Если текст окружен тегами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></Н6>. Некоторые программы позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 — крайне редко. Пример: <H1>Заголовок 1</H1> <H2>Заголовок 2</H2> На экране браузера будет выглядеть: Выравнивание заголовков, если не указано, дается по левому краю. Если же нужно задать выравнивание заголовка, необходимо использовать атрибут align (горизонтальное выравнивание, который имеет следующие значения: align=left – выравнивание по левому краю; align=right – выравнивание по правому краю; align=center – выравнивание по центру; align=justify – выравнивание по ширине. Предположим, что нам нужно задать подзаголовок и выровнять его по центру: <H2 align=center>Подзаголовок (H2) по центру</H2> Абзац <P>…</P> Элемент абзаца (paragraph) – один из самых полезных, применяется для разделения текста на параграфы. Он позволяет использовать только начальный тег, так как следующий элемент Р обозначает не только начало следующего абзаца, но и конец предыдущего. Браузер использует для отделения одного абзаца от другого пустую строку. В тех случаях, когда по смыслу необходимо обозначить завершение абзаца, можно использовать и конечный тег. В некоторых случаях начальных тег удобно ставить в конце строки: он не только обозначит конец абзаца, но и выполнит функцию разрыва строки. 11 Например: <P>Текст первого абзаца. <P>Текст второго абзаца</P> Текст третьего абзаца. <P> Браузер выполняет команду <P> следующим образом: ! перед абзацем выводится пустая строка, ! абзац выравнивается по левому краю, ! между словами помещается ровно по одному пробелу, независимо от того, сколько пробелов проставлено в HTML-коде, ! перенос текста на новую строку происходит тогда, когда очередное слово не помещается в экранной строке, а не тогда, когда новая строка начинается в HTMLпрограмме. Вместе с элементом абзаца можно использовать атрибут выравнивания align: align=left – выравнивание по левому краю. По умолчанию текст HTML выравнивается по левому краю и не выравнивается по правому, то есть начало строк находится на одном уровне по вертикали, а концы — на разных. Чаще всего, получающийся при этом текст с равными промежутками между словами выглядит лучше. Поскольку выравнивание по левому краю задается автоматически, атрибут аlign=left можно опустить. align=right – выравнивание по правому краю; align=center – выравнивание по центру; align=justify – выравнивание по ширине. Например, для форматирования абзаца по ширине следует использовать такую конструкцию: <P align=right>Текст абзаца выровнен по правому краю Абзацы форматируются браузером, и их вид зависит, в частности, от размера окна программы. Три следующих элемента позволяют внести некоторую определенность в формат абзаца. Обрыв строки <BR> Элемент обеспечивает принудительный переход на новую строку. Он имеет только начальный тег. Отличие тега <BR> от тега <P> состоит в том, что браузер не создает пустой строки между строками. Элемент разметки <NOВR> Тег <NОВR>(Nо Вrеаk, без обрыва) дает браузеру команду отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в теги <NОВR>, не поместится на экране, браузер добавит в нижней части окна документа горизонтальную полосу прокрутки. Если вы хотите оборвать строку в определенном месте, поставьте там тег <ВR>. Авторское форматирование <PRE>…</PRE> Элемент для обозначения текста, отформатированного заранее (preformatted). Подразумевается, что текст будет выведен в том виде, в котором он записан в HTML-коде – со всеми пробелами и концами строк. Этот удобно при показе сложных страниц. 12 <CENTER></CENTER> Элемент для центрирования текста, а точнее – любого содержимого. Этот элемент не является общеупотребительным. В тех случаях, когда это возможно, вместо него в элементах текста используют атрибут align=center. Управления отображением символов Все эти теги можно разбить на два класса: теги, управляющие формой отображения (font style), и теги, характеризующие тип информации (information type). Часто внешне разные теги при отображении дают одинаковый результат. Это зависит главным образом от настроек интерпретирующей программы и вкусов пользователя. Теги, управляющие формой отображения Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации — все это делает страницы более интересными. Теги <ВIG> и <SMALL> — изменение размеров шрифта Текст, расположенный между тегами <ВIG>…</ВIG> или <SMALL>… </SMALL>, будет, соответственно, больше или меньше стандартного. Верхние и нижние индексы С помощью тегов <SUР> и <SUВ> можно задавать верхние и нижние индексы, необходимые для записи торговых знаков, символов копирайта, ссылок и сносок. Рассматриваемые теги позволяют создать внутри текстовой области верхние или нижние индексы любого размера. Изменение параметров шрифта <FONT>…</FONT> Для того чтобы изменить параметры шрифта произвольного объекта текста (части абзаца, целого абзаца или нескольких абзацев) нужно использовать контейнер <FONT>…</FONT>, который имеет ряд атрибутов: 1. Атрибут sizе тега <FОNТ> позволяет задавать размер текста в данной области. Уменьшение или увеличение размера шрифта на несколько условных единиц задается значением параметра size=n, где n – размер шрифта в неких абсолютных единицах. Этот атрибут может принимать значения от 1 до 7 (7-самый крупный, 1самый мелкий). Пример: <FONT size=7>Шрифт 7</FONT> <FONT size=1>Шрифт 1</FONT> Размер шрифта может также задаваться относительно базового: Size=-2 Size=-1 13 Size=0 (база) Size=+1 Size=+2 Size=+3 Size=+4 Все размеры относятся к шкале от 1 до 7. 2. Цвета фона и шрифта на всем протяжении документа можно задать при помощи атрибутов bgcolor и text в теге BODY. Цвет фона может задаваться только один раз, а цвет шрифта можно менять внутри документа многократно при помощи команды <FONT>…</FONT>. Установка цвета в этой команде выполняется при помощи атрибута color. Пример: <FONT color=blue>Этот отрывок будет выведен на экран синим шрифтом </FONT>. 3. Для управления гарнитурой шрифта используется атрибут <FONT>. face в команде Пример: <FONT face=School Book>Этот текст будет показан шрифтом School Book. </FONT> Значением атрибута face может быть не один, а целый список шрифтов (разделитель – запятая). Если хочется вывести надпись рубленым шрифтом, можно написать: <FONT face=Arial, Gazeta SansSerif, Geneva, Jornal SansSerif>Этот текст будет показан рубленым шрифтом. </FONT> Сначала браузер попытается найти первый из указанных шрифтов, потом, в случае неудачи, второй, и далее по списку. Если не один шрифт не найден, берется шрифт по умолчанию. Атрибут face нужно использовать очень осторожно, т.к. шрифт с одним и тем же названием может содержать или не содержать в своем наборе русские буквы и выведется на экран пользователя в виде абракадабры. Здесь не помогут никакие переустановки кодировок в браузере. Академический стиль HTML активно не поощряет приемы управления гарнитурой шрифта. Курсив (Italic). <I>…</I> Текст находящийся между этими тегами выводится курсивом. Усиление (Вold)<B>…</B> Выделение полужирным шрифтом. <U>…</U> Подчеркнутое начертание текста. <S>...</S> Зачеркнутое начертание текста. 14 <ТТ>...</TТ> Элемент, обозначающий текст телетайпа (teletype). Его особенность заключается в том, что он обеспечивает использование моноширинного шрифта (все буквы имеют одинаковую ширину). Теги, характеризующие тип информации <ЕМ>...</ЕМ>, <DFN>...</DFN> Элементы, обозначающие выразительность (emphasis) данного фрагмента текста и определение чего-либо (definition). Оба элемента аналогичны по своему действию элементу <I>, то есть в большинстве случаев позволяют выделить текст курсивом. С точки зрения дизайна документа эти элементы ничем не отличаются. Они могут пригодится только для того, чтобы единообразно выделить одинаковые по значению (или смыслу) фрагменты текста, находящиеся в разных частях документа или даже на разных страницах. Разработчик, в этом случае не может точно знать, какой именно шрифт будет использован: это определяется каждым браузером по-своему. Но он может быть уверен, что все фрагменты текста будут оформлены одинаково. Блоки цитат <ВLОСKQUOTE>…</ВLОСKQUOTE> Обозначение цитаты. Тег добавляет поля слева и справа от текста. Сам текст не претерпевает никаких изменений. Это полезный тег, поскольку он позволяет компактно расположить текст в центре страницы. При неоднократном использовании <ВLОСKQUOTE> текст все больше сжимается к центру. Цитирование <СIТЕ>...</СIТЕ> При помощи этого тега можно выделить название книги, газетной статьи, фильма или песни. Текст внутри этого элемента печатается по умолчанию курсивом. Эту же команду можно использовать для оформления небольших внутритекстовых цитат. Усиление <STRONG>...</STRONG> Элемент, отвечающий за выделение текста. Обычно его применение равносильно использованию элемента <B> для выделения текста полужирным начертанием. <СODE>...</СОDE> Используется для форматирования текста программы. <SАМР>...</SАМР> Используется при иллюстрации примеров (sample) вывода данных на экран. <VAR>...</VAR> Используется для выделения переменных (variable). Как правило, выводится моноширинным шрифтом. <ABBR>…</ABBR> Элемент для обозначения аббревиатур, например: HTML, WWW. <ACRONYM>…</ACRONYM> Этот элемент можно использовать для выделения акронимов (сокращений, образованных несколькими словами), например: и т.д.; и т.п. 15 Эти теги допускают вложенность и пересечение друг с другом, поэтому все они имеют тег начала и конца. При использовании таких тегов следует помнить, что их отображение зависит от настроек программы-интерфейса пользователя, которые могут и не совпадать с настройками программы-разработчика гипертекста. Горизонтальная линия <HR> Горизонтальная линия (horizontal rule) – очень часто используемый элемент. Во-первых, потому, что с его помощью очень удобно делить страницу на части. Во-вторых, потому, что выбор подобных элементов оформления у автора страницы очень небольшой. Элемент не имеет конечного тега, но допускает ряд атрибутов: 1. атрибут align для выравнивания текста. Имеет следующие значения: align=left – выравнивание по левому краю; align=right – выравнивание по правому краю; align=center – выравнивание по центру; align=justify – выравнивание по ширине. 2. атрибут size – задает толщину линии в пикселях: size=толщина в пикселях 3. атрибут width – задает длину линии в пикселях или в процентах? width=длина в пикселях width= для в процентах% 4. атрибут color – задает цвет линии: color=цвет 5. атрибут noshade – запрет тени. Рисует линию одним цветом. отсутствует: <HR noshade> Конечный тег 16 Пример странички: HTML код страницы: <HTML> <HEAD> <TITLE>Программирование ввода текста </TITLE> </HEAD> <BODY bgcolor=white text=navy> <H1>Сборник газетных вырезок</H1> <HR size=2 color=yellow> <P> Заметка из газеты <I> «Станок» </I> <BLOCKQUOTE> <P>Действительно, в отделе <I>«Что случилось за день»</I> нонпарелью было напечатано: <BLOCKQUOTE> <H3 align=center> <FONT color=red>Попал под лошадь</FONT></H3> <SMALL> <P> Вчера на площади Свердлова попал под лошадь извозчика № 8974 гр. О. Бендер. Пострадавший отделался легким испугом. </SMALL> </BLOCKQUOTE> <P> - Это извозчик отделался легким испугом, а не я, - ворчливо заметил О. Бендер. <P align=right> <I>«Двенадцать стульев»</I><BR> Илья Ильф, Евгений Петров </BLOCKQUOTE> </BODY> </HTML> 17 Структура, стиль и внешний вид программы Записывать программу нужно так, чтобы смысл ее конструкций был максимально понятен. Для такой рекомендации есть ряд причин: 1. Ясно написанную программу легче отлаживать. В понятно написанных командах легче найти соответствие экранного изображения командам, которые это изображение строят. 2. Понятную программу легче сопровождать, т.е. вносить в нее изменения. 3. Хорошо работают только понятно написанные программы, внешний вид которых вызывает чувство эстетического удовольствия. Программу можно записать и так: <html> <head><title>Программирование ввода текста </title> </head><body bgcolor=white text=navy> <h1>Сборник газетных вырезок</h1><hr size=2 color=yellow><p> Заметка из газеты <i> «Станок» </i> <blockquote><p>Действительно, в отделе <i>«Что случилось за день»</i> нонпарелью было напечатано: <blockquote> <h3 align=center> <font color=red>Попал под лошадь</font></h3><small><p> Вчера на площади Свердлова попал под лошадь извозчика № 8974 гр. О. Бендер. Пострадавший отделался легким испугом. </small></blockquote><p> - Это извозчик отделался легким испугом, а не я, - ворчливо заметил О. Бендер. <p align=right> <i>«Двенадцать стульев»</i><br> Илья Ильф, Евгений Петров</blockquote></body></html> Браузер покажет документ правильно, ему абсолютно все равно. Но работать с таким кодом (искать ошибки, вносить правки) очень трудно. Необходимо помнить о том, что программы пишутся не для компьютера, не для браузера, а для человека. Поэтому и оформлять их надо человеческим образом. Правила оформления программы 1. Записывайте имена тегов прописными (заглавными) буквами, а имена атрибутов и их значения – строчными (малыми). Синтаксис языка HTML допускает запись команд в любом регистре, однако лучше следовать этой рекомендации. Как правило, текст, предназначенный для вывода на экран браузера, состоит в основном из строчных символов, поэтому «большие» HTML-команды будут на этом фоне выделяться. 2. Не записывайте HTML-программы со слишком длинными строками. Для их просмотра приходится применять горизонтальную прокрутку, а это очень неудобно. Любая строка должна целиком помещаться на экране текстового редактора. Работая в редакторе Блокнот, не пользуйтесь режимом Перенос по словам: Блокнот показывает на экране короткие строки, а в файл записывает длинные. 3. Старайтесь записывать теги на отдельных строках так, чтобы по записи можно было определить вложение команд друг в друга. Рекомендация достигается использованием строчного смещения записи тега вправо на 2 позиции по отношения к внешнему блоку. Теги самой первой команды программы - <HTML>…</HTML> записываются с 1-й позиции строки. Все остальные команды находятся внутри этого блока. Поэтому их запись должна быть смещена на две позиции вправо: 18 <HTML> <HEAD> … </HEAD> <BODY> … </BODY> </HTML> Теги внутри блоков <HEAD>…</HEAD> и <BODY>…</BODY> смещаются на две позиции вправо по отношению к началу блока. Смещения продолжается и дальше с соблюдением правила вложенности. Пример: <HTML> <HEAD> <TITLE>… </TITLE> </HEAD> <BODY> <H1>… </H1> <HR > <P> … <BLOCKQUOTE> <P> … <BLOCKQUOTE> <H3>…</H3> <SMALL> <P> … </SMALL> </BLOCKQUOTE> <P> … <P> … </BLOCKQUOTE> </BODY> </HTML> Если команда (от начального до конечного тега) небольшая, то ее можно записывать в одной строке вместе с тегами.
