2.3 Атрибуты тегов

Эффект применения тега может видоизменяться путем добавления атрибутов. В парных тегах атрибуты добавляются только к открывающему тегу.

! Атрибуты представляют собой дополнительные ключевые слова, отделяемые от ключевого слова, определяющего тег, и от других атрибутов пробелами и размещаемые до завершающего тег символа «>». Способ применения некоторых атрибутов требует указания значения атрибута. Значение атрибута отделяется от ключевого слова атрибута символом «=» (знак равенства) и заключается в кавычки.

Атрибуты элемента определяют его свойства. 

Примеры тэгов с атрибутами:

<BODY BGCOLOR="LIGHTBLUE"> – задает светло-синий фон для документа,

<FONT SIZE="+2" COLOR="RED"> текст </FONT> – парный тэг, дает указание Браузеру вывести заключенный в "контейнер" текст символами, увеличенными относительно базового размера (SIZE="+2") и красного цвета (COLOR="RED").

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

Определение HTML как языка разметки основывается на том, что при удалении из документа всех тегов получается текстовый документ, совершенно эквивалент­ный по содержанию исходному гипертекстовому документу. Таким образом, при отображении документа HTML сами теги не отображаются, но влияют на способ отображения остальной части документа.

2.4 Комментарии и символьные примитивы

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

Комментарии в языке HTML начинаются со специального тега <!--. Следует обратить внимание на отсутствие закрывающей угловой скобки. Любой текст, идущий за этим тегом, рассматривается как комментарий и не отображается при отображении документа. Закан­чивают комментарий символами -->. Комментарий может содер­жать любые символы, кроме символа «больше» (>), и, таким обра­зом, не может включать в себя теги.

Итак, текст комментария размещается в тэге

<!-- …текст комментария... -->

и не отображается в окне Браузера.

Символьные примитивы заменяют служебные символы языка HTML (обычно начинаются с амперсанта – символа &), например:

пробел –   символ меньше (<) – < больше (>) – >

равно (=) – " амперсант (&) – &amp и другие.

2.5 Создание документов в html

Создать качественную web-страницу непросто, для этого нужны не только навыки дизайнера для красивого и стильного оформления, но и опыт программирования. Сложность и объем программ, требуемых для создания того или иного сайта, зависят от множества факторов, таких как структура, цель, функциональность, обеспечение надежности и система защиты сайта от информационных атак со стороны информации-«прилипалы» (спам, мусор) и вирусов.

Web-технология (технология гипертекста) позволила связать всю совокупность опубликованных в Интернете документов в единую систему — WWW. Гипертекстовый документ содержит гиперссылки. Их обычно выделяют цветом и подчеркиванием. Гиперссылки позво­ляют пользователю немедленно перейти к нужному документу, неза­висимо от места его физического расположения. Это существенно облегчает поиск информации в Интернете.

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

Если говорить о создании документов HTML, то можно представить себе два способа их формирования.

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

Принципы другого подхода можно понять на основе изучения работы текстовых процессоров. Информацию о форматировании документа также можно рассматри­вать как «разметку», добавляемую в форматируемый документ. Однако для исполь­зования текстового процессора не требуется никаких знаний о формате документа и «языке разметки»: изменения, отображаемые на экране, вносятся в документ авто­матически. Такой принцип соответствия экранного изображения реальному получил название WYSIWYG (вайсевег) (от английского What You See Is What You Get (воч ю си ис воч ю гат) — Что видите, то и получаете).

Они позволяют создавать целые web-узлы (порталы) и используют все современные технологии. Такие web-редакторы вполне подходят и профессионалам. Если вы пользуетесь MS Office, то можете исполь­зовать FrontPage из этого комплекта. Есть также Netscape Composer в составе Netscape Communicator. Можно также воспользоваться де­монстрационной версией web-редактора Macromedia HomeSite, получив ее на официальном сайте компании Adobe: www.adobe.com.

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

Итак, для создания web-страниц вам понадобится текстовый или web- редактор. Надо отметить, что все web-редакторы обязательно содержат и текстовый редактор, web-редакторов сейчас существует большое количество, но самыми мощными признаны три:

1. Macromedia Dreamweaver (макромедиа дримвиваф);

2. Allaire HomeSite (аллер хом сайт);

3. Microsoft FrontPage (майкрософт фонт пейдж).

Они позволяют создавать целые web-узлы (порталы) и используют все современные технологии. Такие web-редакторы вполне подходят и профессионалам. Если вы пользуетесь MS Office, то можете исполь­зовать FrontPage из этого комплекта. Есть также Netscape Composer в составе Netscape Communicator. Можно также воспользоваться де­монстрационной версией web-редактора Macromedia HomeSite, получив ее на официальном сайте компании Adobe (эдоби): www.adobe.com. С помощью браузера следует зайти на указанный сайт в раздел Down­loads/Trial Downloads и выбрать Macromedia, HomeSite.

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

Можно воспользоваться русской версией FrontPage Express из локализованного Internet Explorer — это сокращенный вариант FrontPage, но очень удобен для начала. На русском языке также известен web-редактор Visual Workshop (http://www.snkey.net/ download /products /index.html ).

Современные сервисы в Интернете предлагают готовые конструк­торы сайтов. Рассмотрим их на примере конструктора сайтов «Мой сайт» (www.narod.yandex.ru). С его помощью можно получить место под свой сайт (домашнюю страницу) и за 5 мин создать свой web-сайт с картинками, фотографиями и пр.

Процесс конструирования сайта включает в себя три этапа:

1. вход в конструктор сайта;

2. регистрация, назначение имени сайта;

3. конструирование сайта с использованием заготовок.

Для создания рукотворного сайта, единственного в своем роде, требуются иные web-инструменты.

Помимо HTML и конструкторов сайтов можно пользоваться и другими средствами программирования web-страниц. Одним из средств программирования сайтов является CGI (си джи ай) (Common Gateway, комон гейтвай).

Принцип CGI прост и есте­ственен: программа на стороне сервера принимает некие данные, обрабатывает их и выдает ответ в виде web-страницы. Это очень частое явление на сегодняшний день, и порой даже не подозреваешь, что имеешь дело не с обычной страницей, а с результатом работы CGI-скрипта (кода). Область использования CGI широка, а цели разнообразны. Язык программирования, на котором пишется скрипт, должен быть гибким и в то же время мощным, так как предстоит не только постоянная работа с файлами, но и с БД, ОС и web-сервером. Самыми подходящими языками для CGI-программирования явля­ются Си (C++) и Perl. Последний наиболее часто используется для этих целей из-за своей простоты, надежности и широты возмож­ностей.

Язык Си по праву считается универсальным и нашел свое место в среде CGI. Его применение естественно в родной стихии — Unix, на основе которой в большинстве случаев и строится web-узел.

Для CGI-программирования используется также язык C++, который подразумевает создание и уничтожение неких объектов, реализуемых через классы, — по сути пользовательских типов данных. Естественно создать, например, класс Guestbook или DataBaseEntry, который со­держал бы необходимые переменные и функции. Стоит заметить, что почти все новые языки программирования (Java, JavaScript, Perl) со­держат конструкции, схожие с конструкциями Си или же являющие­ся их точными копиями. Поэтому рекомендуется сначала изучить именно этот фундаментальный язык.

Язык Perl уникален. Во-первых, в нем отсутствуют типы данных, что благоприятно воздействует на написание CGI-скриптов. Во- вторых, очень много конструкций взято из Си. Надо отметить, что в Perl часто используются регулярные выражения, похожие на те, что применяются в сценариях Unix Shell. Имеется удобный цикл foreach и красивые, по сути, модификаторы выражений. Perl рас­полагает стандартной библиотекой, в которой есть функции поиска, работы с web-сервером, графикой и т.п. Из этого можно сделать вывод, что для программиста, знакомого с Unix, не составит труда изучить Perl. Для написания такой программы достаточно уметь работать с файлами из Perl и, немного, с переменными окружения web-сервера.

Процесс создания Web-документов сродни программированию и так же подвер­жен ошибкам. Независимо от того, каким способом создается документ, следует регулярно проверять его соответствие замыслу, просматривая его в различных браузерах. Для художественной оценки получающейся страницы следует обратиться к независимому мнению.

Вопросы для самоконтроля:

1. Что означает понятие HTML-документ?

2. Каковы преимущества этого вида документа?

3. Что означает понятие «тэг»?

4. Какие разновидности тэгов существуют?

5. Что входит в состав объектов управления тэгами?

www.univer.omsk.su/omsk/Edu/htmlbook/school/index2.htm