Обучение языку HTML

Автор работы: Пользователь скрыл имя, 26 Февраля 2012 в 15:48, научная работа

Описание

Язык HTML в своем развитии прошел несколько версий. Заметим, что после версий 1.0 и 2.0 в марте 1995 года был подготовлен черновой вариант версии 3.0, в которой по сравнению с версией 2.0 было много добавлений. Не углубляясь пока в детали, отметим, что основные производители навигаторов (фирмы Netscape и Microsoft) разработали свои расширения языка HTML, которые оказались несовместимыми между собой. В настоящее время ситуация осталась прежней, хотя совместимость навигаторов Netscape Navigator версии 3.0 и Microsoft Internet Explorer версии 3.0 несколько улучшилась.

Скачать (533.41 Кб) Сколько стоит заказать работу?
Работа состоит из  1 файл

введение.docx

— 552.75 Кб (Скачать документ)

                         

                       Рис. 5. Физическое форматирование текста

 

Логическое форматирование символов

Как мы уже говорили, операторы  логического форматирования предназначены  для указания семантического (смыслового) назначения оформляемого текста. Они  определяют не конкретный способ оформления, а указывают навигатору тип информации, подлежащей выделению. Способ выделения  выбирается навигатором.

Ниже мы привели список операторов логического форматирования символов с кратким описанием.

 

Оператор Описание

<CITE>,

Цитата

<EM>, </EM>

Текст, имеющий особое значение

<STRONG>, </STRONG>

Сильное выделение текста

<KBD>, </KBD>

Текст, введенный пользователем

<CODE>, </CODE>

Листинг программы

<SAMP>, </SAMP>

Последовательность литералов

<VAR>, </VAR>

Имя переменной

<!-- ... --> Комментарий

По возможности следует  использовать вместо физического логическое форматирование символов, так как  такое форматирование потенциально позволяет пользователю самостоятельно выбирать способ оформления указанных  логических составляющих текста в соответствии со своим вкусом. К сожалению, на настоящий момент в навигаторах  пользователь может только выбрать  два шрифта (фиксированный и пропорциональный), а также выполнить цветовую настройку  для основных компонентов отображаемого  документа HTML.

Оператор <CITE>

С помощью оператора <CITE> вы можете оформит в тексте цитату. Обычно цитата выделяется наклонным  шрифтом. Оператор <CITE> должен использоваться в паре с оператором </CITE>.

Оператор <EM>

С помощью оператора <EM> вы можете оформить текст, имеющий особое значение. Название этого оператора  произошло от слова emphasis, которое  можно перевести как ударение, подчеркивание или особое значение. Такой текст обычно выделяется с  использованием наклонного шрифта.

Оператор <STRONG>

Текст, выделенный оператором <STRONG>, отображается с использованием жирного шрифта. Вы можете выделять в тексте таким шрифтом отдельные  слова или символы.

Оператор <KBD>

Оператор <KBD> предназначен для выделения текста шрифтом  с фиксированной шириной символов. Это может быть, например, образец  команд, введенных пользователем. Навигатор Microsoft Internet Explorer версии 3.0 отображает такой  текст жирным шрифтом с фиксированной  шириной символов, а навигатор Netscape Navigator использует фиксированный нежирный шрифт.

Оператор <CODE>

Специально для публикации листингов программ в документах HTML предназначен оператор <CODE>. Этот оператор предполагает использование  нежирного шрифта с фиксированной  шириной символов.

Оператор <SAMP>

С помощью оператора <SAMP> обычно выделяют отдельные слова  или последовательность литеральных  символов. Такой текст отображается  нежирным шрифтом с фиксированной  шириной символов.

Оператор <VAR>

Оператор <VAR> предназначен для выделения имен переменных или  функций и используется обычно при  описании листингов программ.

Операторы <!-- ... --> и <COMMENT>

Еще два оператора логического  форматирования, которые мы рассмотрим в этом разделе, это операторы <!-- ... --> и <COMMENT>. Они предназначены  для вставки в документ HTML строк  комментария, которые не  отображаются навигатором.

Заметим, что с помощью  оператора <!-- ... --> можно вставлять  не только однострочный, но и многострочный  комментарий, например:

<!-- Это однострочный  комментарий *

<!--

А это

  многострочный 

    комментарий

-->

Навигатор Microsoft Internet Explorer допускает  определение комментария с помощью  оператора <COMMENT>, например, так:

<COMMENT>Однострочный комментарий</COMMENT>

Однако, навигатор Netscape Navigator версии 3.01 игнорирует оператор <COMMENT>, поэтому мы не рекомендуем им пользоваться.

Пример использования  операторов логического форматирования

В листинге 7. мы привели пример использования команд логического форматирования.

Листинг 7. Файл chap2\logical.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

  <HEAD>

     <TITLE>Команды  логического форматирования</TITLE>

  </HEAD>

  <BODY BGCOLOR=#FFFFFF>

    <CITE>Цитата</CITE>

    <P><EM>Текст, имеющий особое значение</EM>

    <P><STRONG>Сильно  выделенный текст</STRONG>

    <P><KBD>Текст,  введенный пользователем</KBD>

    <P><CODE>Листинг  программы</CODE>

    <P><SAMP>Последовательность  литералов</SAMP>

    <P><VAR>Имя  переменной</VAR>

    <P><!-- Комментарий  -->

  </BODY>

</HTML>

На рис. 6. показано, как этот документ выглядит в окне навигатора Microsoft Internet Explorer версии 3.0.

                             

                 Рис. 6. Использование команд логического форматирования

 

Для того чтобы показать, что команды логического форматирования не предназначены для явного определения  внешнего вида символов, приведем внешний  вид этой же страницы при ее просмотре  в навигаторе Netscape Navigator (рис. 7).

                       

              Рис.7. Просмотр документа с логическим форматированием в окне навигатора Netscape Navigator

 

Как нетрудно заметить, Netscape Navigator не выделяет жирным шрифтом цитату и текст, имеющий особое значение, для оформления которых мы использовали, соответственно, операторы <CITE> и <EM>. Кроме того, не был выделен жирным шрифтом текст, оформленный командой <KBD>.

Вставка предварительно отформатированного текста

Еще одна возможность оформления символов, удобная, например, для размещения в документе листингов программ, связана с использованием команд <PRE> и </PRE>. Эти команды называются командами включения предварительно отформатированного текста.

Команда <PRE> имеет параметр WIDTH, который указывает максимальное количество символов в одной строке. По умолчанию значение этого параметра  равно 80.

Под форматированием в  данном случае понимается подготовка текста простым текстовым редактором с использованием шрифта с фиксированной  шириной букв. В этом смысле листинги программ являются отформатированными.

На включаемый отформатированный  текст накладываются некоторые  ограничения.

Во-первых, в таком тексте нельзя использовать оператор <P>. Переход  к новой строке выполняется по символу новой строки, который  обычно вставляется текстовыми редакторами  после каждой строки.

Во-вторых, в предварительно отформатированном тексте нельзя использовать команды, определяющие формат параграфа. Тем не менее, можно использовать операторы форматирования символов, такие как <U>.

В-третьих, и это относится  не только к предварительно отформатированному тексту, не все символы можно вставлять  в текст, так как некоторые  из них являются специальными. Об этом вы узнаете подробнее из раздела  этой главы с названием “Вставка символов”.

В листинге 8. мы привели исходный текст документа HTML, в который включен листинг программы.

Листинг 8. Файл chap2\preform.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

  <HEAD>

    <TITLE>Включение  предварительно отформатированного  текста</TITLE>

  </HEAD>

  <BODY BGCOLOR=#FFFFFF>

    А вот несложная  программа, составленная на языке  Си:

    <PRE WIDTH="60">

      int main(int argc, char *argv[])

      {

        printf(&quot;Hello, world!&quot;);

      }

    </PRE>

  </BODY>

</HTML>

Заметьте, что символ кавычки  в операторе printf здесь заменен  на строку &quot;, так как этот символ является специальным.

Внешний вид страницы показан на рис.8.

                          

Рис.8. Страница, содержащая предварительно отформатированный текст

 

Более просто, однако, можно  выполнить форматирование листинга программ с помощью специально предназначенного для этого оператора <LISTING>, который  используется в паре с оператором </LISTING>:

<LISTING>

int main(int argc, char *argv[])

{

  printf("Hello, world!");

}

</LISTING>

Обратите внимание, что  при использовании оператора <LISTING> нет необходимости заменять символы  кавычек на строку &quot;.

Хотя оператор <LISTING> не определен в спецификации языка HTML версии 3.2, он работает в навигаторах Microsoft Internet Explorer версии 3.0 и Netscape Navigator версии 3.01.

Отключение интерпретатора HTML

Если вы собираетесь разместить на страницах вашего сервера, например, учебник по языку HTML или большое  количество листингов, содержащих специальные  символы, вы можете воспользоваться  оператором <PLAINTEXT>. Этот оператор, который, кстати, работает только с навигатором Microsoft Internet Explorer, отключает интерпретатор  языка HTML, в результате чего текст  документа будет отображаться без  соответствующей обработки.

В листинге 9. мы привели исходный текст документа HTML, в котором используется оператор <PLAINTEXT>:

Листинг 9. Файл chap2\plain.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

  <HEAD>

    <TITLE>Отключение интерпретатора HTML</TITLE>

  </HEAD>

  <BODY BGCOLOR=#FFFFFF>

    <PLAINTEXT>Для выделения  строки символов красным цветом

вы можете использовать следующую  конструкцию

языка HTML:

      <P><FONT COLOR=RED>Строка красного цвета

    </PLAINTEXT>

  </BODY>

</HTML>

Внешний вид этого документа  при его просмотре в окне навигатора Microsoft Internet Explorer показан на рис.9.

                  

           Рис.9. Демонстрация использования оператора <PLAINTEXT>

 

К сожалению, навигатор Netscape Navigator покажет этот же документ неправильно, так как он “не понимает” оператор <PLAINNTEXT>. Для того чтобы документ выглядел нормально в навигаторах Netscape Navigator и Microsoft Internet Explorer, вам придется отказаться от удобного оператора <PLAINNTEXT>, заменив специальные символы < и >, соответственно, на строки &lt; и &gt;, как это показано в листинге 10.

Листинг 10. Файл chap2\plain1.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

  <HEAD>

    <TITLE>Отключение интерпретатора HTML</TITLE>

  </HEAD>

  <BODY BGCOLOR=#FFFFFF>

    Для выделения  строки символов красным цветом

    вы можете использовать  следующую конструкцию

    языка HTML:

    <P>&lt;FONT COLOR=RED&gt;Строка  красного цвета

  </BODY>

</HTML>

1.9  Указание шрифта по его названию

Как мы уже говорили, трудно делать какие-либо предположения относительно шрифтов, установленных в системе  удаленного пользователя. Тем не менее, с помощью параметра FACE оператора <FONT…> вы можете указать конкретные названия шрифтов, с использованием которых должен отображаться текст.

В одном параметре FACE можно  указать несколько названий шрифтов, разделив эти названия запятыми:

<FONT FACE="Arial Cyr, Arial, Helv DL">Шрифт гельветика

Если в системе пользователя установлен шрифт Arial Cyr, то строка “Шрифт гельветика” будет отображаться с использованием именно этого шрифта. В противном случае будет сделана  попытка отобразить строку шрифтом Arial, а затем Helv DL. Если окажется, что  в системе нет ни одного из перечисленных  шрифтов, строка будет отображена тем  шрифтом, что установлен в навигаторе для использования по умолчанию.

В документе HTML, исходный текст которого приведен в листинге 11., мы используем явное указание названия шрифта.

Листинг 11. Файл chap2\font.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>

  <HEAD>

    <TITLE>Образцы шрифтов</TITLE>

  </HEAD>

  <BODY BGCOLOR=WHITE>

    <P><FONT FACE="Arial Cyr, Arial, Helv DL">Шрифт гельветика

    <P><FONT FACE="Courier New Cyr, Courier New">Шрифт курьер

    <P><FONT FACE="Times New Roman Cyr, Times New Roman">Шрифт таймс

  </BODY>

</HTML>

На рис.10. показано, как этот документ выглядит при его просмотре в окне навигатора Microsoft Internet Explorer.

                               

                               Рис.10. Выбор шрифта по его названию

 

1.10  Вставка специальных символов и символьных объектов

В языке HTML определены четыре специальных символа, предназначенных  для служебных целей. Это символы <, >, & и “. Вы не можете вставлять  специальные символы в обычный  текст, вместо этого необходимо использовать следующую замену:

 

Символ Замена

< &lt;

> &gt;

& &amp;

" &quot;

Будьте внимательны, вставляя в документ HTML листинги программ, изобилующие  только что перечисленными символами. Перед вставкой таких листингов  их надо обработать, заменив специальные  символы, например, в автоматическом режиме при помощи текстового редактора.

При необходимости вы можете вставить в документ HTML байт с произвольным шестнадцатеричным кодом. Для этого  вы должны включить в текст последовательность символов вида &#XX, где XX - шестнадцатеричное  число в диапазоне от 0 до FF.

Символы, которые не входят в таблицу ASCII, могут быть представлены в специальном виде - как символьные объекты (character entities). К сожалению, некоторые  редакторы документов HTML, например, редактор Microsoft Internet Assistant for Microsoft Word и Microsoft FrontPage представляет символы кириллицы  именно таким образом, что существенно  увеличивает объем документов HTML.

Ниже мы привели список символьных объектов. Пользуясь этим списком, вы можете, например, составить  программу, которая послужит дополнением  для редактора Microsoft Internet Assistant for Microsoft Word и будет выполнять обратную замену символьных объектов на символы  кириллицы.

Имя объекта Символы кириллицы Латинские символы Описание соответствующего латинского символа

&Agrave; А А Прописная A, тупое ударение

&Aacute; Б Б Прописная A, сильное ударение

&Acirc; В В Прописная A, диактрическое ударение

&Atilde; Г Г Прописная A, тильда

&Auml; Д Д Прописная A, умляут

&Аring; Е Е Прописная A, звонкое произношение

&Aelig; Ж Ж Прописная AE, дифтонг

&Ccedil; З З Прописная C, седиль

&Egrave; И И Прописная E, тупое ударение

&Eacute; Й Й Прописная E, сильное ударение

Информация о работе Обучение языку HTML