Обучение языку 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 несколько улучшилась.

Работа состоит из  1 файл

введение.docx

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

Введение

В этой исследовательской  работе происходит знакомство с  изготовлением простейших статических документов на языке HTML. Научившись создавать такие документы, вы сможете разместить их на сервере WWW поставщика услуг Internet или даже создать свой виртуальный сервер WWW на сервере этого поставщика.

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

На смену неудачному, так  и не реализованному стандарту языка HTML версии 3.0, был разработан стандарт версии 3.2. В разработке этого стандарта  участвовали такие фирмы как Netscape Communications Corporation, Microsoft, IBM, Novell, SoftQuad, Sun Microsystems и Spyglass. Возможно, что такой представительный состав разработчиков стандарта  положительно повлияет на совместимость  навигаторов.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1.  СОЗДАНИЕ ДОКУМЕНТОВ HTML

1.1  Первая страница HTML

Итак, начнем. Запустите в  среде операционной системы Microsoft Windows 95 или Microsoft Windows NT программу Notepad и наберите текст, приведенный в листинге 1. Сохраните этот текст в файле с именем first.htm.

Листинг 1. Файл chap2\first.htm

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

<HTML>

  <HEAD>

    <TITLE>XYZ Incorporation</TITLE>

  </HEAD>

  <BODY>

    Добро пожаловать  в мир серверов WWW!

  </BODY>

</HTML>

 

Откройте папку, в которую  вы сохранили файл first.htm и сделайте двойной щелчок левой клавишей мыши по пиктограмме файла. Сразу после  этого будет автоматически запущен  навигатор, в окне которого появится содержимое вашего документа. Другой способ просмотра документа HTML, записанного  в файле, заключается в том  что вы вначале запускаете навигатор, а затем открываете нужный файл с  помощью меню. При использовании  навигатора Microsoft Internet Explorer для открытия файла вы должны вначале выбрать  из меню File строку Open, а затем в  появившейся диалоговой панели Open Internet Address нажать кнопку Open File. После этого  вы окажитесь в диалоговой панели с названием Open File, с помощью которой  можно выбрать файл документа HTML, расположенный на локальном диске  вашего компьютера.

На рис.1 мы видим внешний вид документа first.htm при его просмотре с помощью навигатора Microsoft Internet Explorer.

 

Рис.1. Внешний вид документа first.htm в окне навигатора Microsoft Internet Explorer

Рассмотрим на этом простейшем примере структуру документа HTML.

1.2  Структура документа HTML

Документ HTML содержит операторы, которые могут занимать одну или  несколько строк. Например, оператор пролога <!DOCTYPE…> занимает одну строку и описывает тип документа  как HTML версии 3.2 (здесь и далее  многоточие после имени оператора  означает, что оператор может иметь  дополнительные параметры). Оператор <HTML> на самом деле состоит из открывающего оператора <HTML> и закрывающего оператора </HTML>, между которыми расположены другие операторы.

Рассмотрим операторы, использованные в нашем простейшем примере, более  подробно.

Документ HTML версии 3.2 начинается с оператора <!DOCTYPE…> следующего вида:

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

Здесь W3C - название организации, разработавшей стандарт. Слово  DTD (Document Type Definition) означает определение  типа документа. Мы привели параметры  оператора <!DOCTYPE…> для языка HTML версии 3.2. Параметры этого оператора  для более ранних версий определены в соответствующих стандартах, доступных  через Internet.

Заметим, что оператор пролога <!DOCTYPE…> может отсутствовать  в документах HTML. Такие документы  будут нормально отображаться в  окне навигатора. Однако оператор <!DOCTYPE…> может оказать помощь навигатору при отображении страницы, так  как он позволяет определить версию языка HTML, использованную при подготовке страницы.

Вслед за оператором пролога  следует тело документа HTML, ограниченное операторами <HTML> и </HTML>, как это  показано ниже:

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

<HTML>

  . . . (документ HTML)

</HTML>

Документ HTML состоит из двух основных частей - заголовка документа  и тела документа.

1.3  Заголовок документа

Заголовок документа выделяется операторами <HEAD> и </HEAD>. Он может  содержать другие операторы и  занимать несколько строк. Тело документа  занимает одну или несколько (возможно, достаточно много) строк. Оно выделяется операторами <BODY> и </BODY>.

Уточненная структура  документа HTML представлена ниже:

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

<HTML>

  <HEAD>

    . . . (заголовок  документа)

  </HEAD>

  <BODY>

    . . . (тело документа)

  </BODY>

</HTML>

Как видите, эта структура  несложна.

В нашем первом документе HTML заголовок состоит всего из одной строки:

<TITLE>XYZ Incorporation</TITLE>

С помощью операторов <TITLE> и </TITLE> здесь задается строка заголовка  страницы, которая отображается в  заголовке главного окна навигатора (рис. 2.3). Каждый документ HTML должен иметь  строку заголовка, определенную указанным  выше способом. Эта строка идентифицирует документ и отображается навигатором не только в заголовке главного окна, но и в других местах, например, в списке посещенных страниц.

Есть ли ограничения на размер строки заголовка документа?

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

Заголовок документа может  содержать помимо оператора <TITLE> и другие операторы, которые мы рассмотрим позже. Однако оператор <TITLE> является обязательным для любого документа.

1.4  Тело документа

В отличие от заголовка, тело документа HTML, ограниченное операторами <BODY> и </BODY>, отображается во внутренней области окна навигатора.

В нашем простейшем примере  тело состоит всего из одной приветственной строки:

<BODY>

  Добро пожаловать  в мир серверов WWW!

</BODY>

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

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

1.5  Выравнивание параграфов текста

Тело нашего первого документа HTML состояло из одной текстовой строки. Реальные страницы HTML состоят из нескольких параграфов текста, которые выделяются операторами <P…> и </P>. Например:

<BODY>

  <P>Это первый параграф</P>

  <P>А это второй  параграф</P>

</BODY>

Заметим, что оператор </P> является необязательным. Приведенные  выше два параграфа можно было оформить и так:

<BODY>

  <P>Это первый параграф<P>А  это второй параграф

</BODY>

Оператор <P> может иметь  параметры, определяющие различные  характеристики параграфа.

В стандарте языка HTML версии 3.2 определен параметр ALIGN, с помощью  которого можно задать выравнивание параграфа по горизонтали. Этот параметр может иметь следующие значения:

Значение Тип выравнивания

LEFT По левой границе

CENTER Центрирование

RIGHT По правой границе

 

Для выравнивания строк параграфа, например, по левой границе, вы должны задать параметры оператора <P> следующим  образом:

<P ALIGN=LEFT>Выравнивание  по левой границе

Заметим, что выравнивание с помощью параметров оператора <P> работает не для всех навигаторов. В частности, навигатор Microsoft Internet Explorer версии 2.0 и даже 3.0 не выполняет центрирование  параграфа указанным выше способом.

Тем не менее, существует универсальный  способ центрирования параграфа, описанный  в спецификации на язык HTML версии 3.2. Он заключается в использовании  операторов <CENTER> и </CENTER>:

<P><CENTER>Центрирование  параграфа</CENTER>

В листинге 2. мы привели исходный текст документа HTML, в котором демонстрируются различные способы выравнивания строк параграфа, в том числе и с использованием операторов <CENTER> и </CENTER>.

Листинг 2. Файл chap2\alighn.htm

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

<HTML>

  <HEAD>

    <TITLE>XYZ Incorporation</TITLE>

  </HEAD>

  <BODY>

    <P ALIGN=RIGHT>Выравнивание  по правой границе

    <P ALIGN=LEFT>Это  пример параграфа, выровненного 

по левой границе

    <P ALIGH=CENTER>Центрирование  параграфа первым способом

    <P><CENTER>Центрирование  параграфа вторым способом</CENTER>

  </BODY>

</HTML>

Загрузив этот документ в  навигатор Microsoft Internet Explorer, вы сможете  убедиться, что первый способ выравнивания, основанный на использовании параметра ALIGH=CENTER, здесь не работает (рис. 2.). Аналогично ведет себя навигатор Netscape Explorer.

                     

Рис. 2.. Просмотр документа HTML, демонстрирующего различные способы выравнивания параграфов.

 

В спецификации языка HTML версии 3.2 определен еще один способ выравнивания параграфов, основанный на использовании  операторов <DIV…> и </DIV>. Параметры  этого оператора указываются  аналогично параметрам выравнивания оператора <P>. Например, выравнивание по левой  границе выполняется следующим  образом:

<DIV ALIGN=LEFT><P>Это пример  параграфа, выровненного 

по левой границе</DIV>

Дополнительно можно указывать  параметр JUSTIFY, предназначенный для  выравнивания текста и по левой, и  по правой границе окна навигатора.

С оператором <DIV…>, однако, тоже существует проблема. Она заключается  в том, что этот оператор… не работает с навигаторами Netscape Explorer версии 3.0 и Microsoft Internet Explorer версии 3.0. Чтобы убедиться  в этом, достаточно подготовить документ HTML, исходный текст которого приведен в листинге 2.3.

Листинг 3. Файл chap2\alighn2.htm

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

<HTML>

  <HEAD>

    <TITLE>XYZ Incorporation</TITLE>

  </HEAD>

  <BODY>

    <DIV ALIGN=RIGHT><P>Выравнивание  по правой границе</DIV>

    <DIV ALIGN=LEFT><P>Это  пример параграфа, выровненного 

по левой границе</DIV>

    <DIV ALIGH=CENTER>

      <P>Центрирование  параграфа</P>

    </DIV>

    <DIV ALIGH=JUSTIFY>

      <P>Этот  параграф выравнивается и по  левой, 

и по правой границе окна навигатора

    </DIV>

  </BODY>

</HTML>

 

Результат просмотра этого документа показан на рис.3.

                     

Рис.3. Центрирование, а также одновременное выравнивание по левому и правому краю с помощью оператора <DIV…> не работает в навигаторе Microsoft Internet Explorer версии 3.0

 

Какой способ центрирования  параграфов лучше использовать в  ваших документах?

Очевидно, лучше использовать тот способ, который будет работать с наиболее популярными навигаторами. В мире наибольшей популярностью  пользуется навигатор Netscape Navigator. На втором месте стоит Microsoft Internet Explorer. Поэтому  вам желательно обеспечить совместимость  своих документов с этими навигаторами. Сказанное, относится, разумеется, не только к способам центрирования параграфов, но и к другим возможностям языка HTML.

Что же касается центрирования, вероятно, лучше всего пользоваться оператором <CENTER>:

<P><CENTER>Центрирование  параграфа</CENTER>

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

Дело  том, что первое время  навигаторы, созданные фирмами Netscape и Microsoft, развивались независимо друг от друга. Каждая из этих фирм создала  собственное программное обеспечение  для серверов WWW и навигаторов, а  также различные расширения языка HTML. При этом расширения фирмы-конкурента, разумеется, полностью игнорировались. С появлением версий 3.0 навигаторов Netscape Navigator и Microsoft Internet Explorer ситуация с  совместимостью несколько улучшилась, однако маловероятно, что такая совместимость  будет когда-либо полной. Поэтому  создавая документы HTML, всегда проверяйте, как они выглядят при просмотре  основными навигаторами.

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

1.6  Изменение размера шрифта

Шрифтовое выделение

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

Шрифт увеличенного размера  применяется, как правило, для выделения  заголовков или важных слов в тексте. Второстепенная информация для экономии места часто оформляется шрифтом  уменьшенного размера.

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

Документы HTML обычно не содержат ссылок на название конкретного шрифта, такое, например, как Arial или Times New Roman. К  тому же, в документах HTML не указывается  точный размер шрифта в пунктах. Причина  этого заключается в том, что  разработчик документа HTML не может  знать, какие шрифты используются для  просмотра документа.

Пользователи могут работать в операционной системе Microsoft Windows, IBM OS/2 Warp или на компьютере Macintosh, они  могут иметь различные наборы шрифтов. Поэтому нет смысла указывать  название шрифта - скорее всего у  пользователя шрифт с таким названием  просто не установлен. В результате страница будет оформлена другим шрифтом, что может очень сильно изменить ее внешний вид.

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