• World Wide Web и HTML • Назначение языка HTML • Теги и атрибуты тегов HTML. Комментарии • Структура документа HTML • Определение функциональных разделов документа • Гипертекстовые ссылки и якоря • Управление стилем шрифта • Определение элементов фразы • Создание списков • Создание таблиц • Размещение нескольких документов на одной Web-странице • Рисунки на Web-страницах • Мультимедийные объекты в документе HTML
• • Современный этап развития Интернета начался в начале 90 х годов с появлением нового протокола обмена информацией. Этот про токол называется. HTTP (Hyper. Text Transfer Protocol — протокол передачи гипертекста). Вместе с этим протоколом появилась и служба World Wide Web (часто также называемая WWW или просто Web), которая представляет собой обширную сеть серверов HTTP, передающих файлы через Интернет. Основную часть этих файлов представляют собой Web-страницы — специальные файлы; написанные на языке HTML (Hyper. Text Markup Language — язык разметки гипертекста). Web страницы публикуются в Интернете путем размещения таких файлов на серверах HTTP (Web-узлах). Содержание Web страниц может быть разным и посвященным совершенно произвольным темам, но все они используют одну и ту же основу — язык HTML. Документы HTML обычно имеют расширение. НТМ или. HTML. Язык HTML появился одновременно со службой World Wide Web и развивался вместе с ней, постепенно вбирая в себя новые черты, которые позволяли создавать все более и более впечатляющие Web страницы. Он является основой World Wide Web и одновременно причиной ее широчайшей популярности. Смысл и назначение языка HTML можно понять, исходя из его названия. Гипертекст — это текст, в который встроены специальные коды, управляющие дополнительными элементами, такими как формати рование, иллюстрации, мультимедийные вставки и гиперссылки на другие документы. Под разметкой понимается вставка в текст этих кодов, определяющих то, как итоговый гипертекстовый документ должен отображаться специальной программой броузером. Разметка может быть простой или сложной, но в любом случае исход ный текст сохраняется в документе в неизменном виде. Но самое важное слово в этом описании — язык. HTML представляет собой компьютерный язык, в некотором смысле родственный языкам программирования. Он включает достаточно строгие правила, которые необходимо соблюдать, чтобы получить правильные результаты.
Несмотря на то, что Web страницы появляются на экране компьютера в отформатированном виде, язык HTML не предназначен для форматирования документов, поскольку жесткое задание оформ ления и точное позиционирование элементов текста на странице приводит к ограничениям, недопустимым в Интернете. Так, например, когда мы форматируем текст с помощью текстового процессора Word, мы однозначно определяем, как должен выглядеть этот текст при печати на совершенно определенном принтере и на бумаге заданного формата. Когда документ размещен в Интернете, невозможно предсказать, какой компьютер будет использован для его просмотра, да и будет ли вообще у этого компьютера монитор. Может быть, текст появится на экране компьютера, работающего в системе Windows в окне одного из современных броузеров. Может быть, это будет текстовый броузер (неспособный отображать графику), работающий в системе MS DOS. Возможно, текст доку мента вообще не будет отображаться на экране, а будетвоспроизводиться вслух с помощью синтезатора речи. Для слепого пользо вателя документ может выводиться на специальное устройство шрифтом Брайля. В связи с необходимостью подготавлийать документы для столь разно образных устройств язык. HTML не предназначен для описания фор мата документа. Он служит дляфункциональной разметки документа, то есть позволяет определить назначение фрагментов текста. Например, если в тексте встречается заголовок, то код HTML просто указывает, что соответствующий фрагмент является заголовком. Получив такой код, программа просмотра (броузер) сама «решает» , что ей делать с заголовком. Возможно, она отобразит его более крупным шрифте» , или выровняет по центру экрана. Возможно, что синтезатор речи, воспроизводящий текст документа, исполь зует код заголовка для того, чтобы повысить громкость и сделать необходимую интонационную паузу.
Коды языка HTML, с помощью которых выполняется разметка исходного текста, называются тегами. Тег — это набор символов. Все теги начинаются с символа «меньше» '(<) и заканчиваются симво лом «больше» (>). Пару этих символов иногда называют угловыми скобками. После открывающей угловой скобки идет ключевое слово, определяющее тег. Каждый тег в языке HTML имеет специальное назначение. Регистр букв в названиях тегов не имеет значения — можно использовать как строчные, так и прописные буквы, хотя общепринято исполь зовать прописные буквы, чтобы теги отличались от обычного тек ста документа. Как правило, один тег HTML воздействует только на часть доку мента, например на абзац. В таких случаях используют парные теги: открывающий и закрывающий. Открывающий тег создает эффект, а закрывающий — прекращает его действие. Закрывающие теги начи наются с символа косой черты(/). Некоторые теги дают разовый эффект в месте своего появления. В этом случае необходимости в закрывающем теге нет, и он не употребляется. Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тег игнорируется целиком. При отображении документа в броузере сами теги не отображаются, но влияют на способ отображения документа. • Атрибуты тегов Открывающие теги часто могут содержать атрибуты, влияющие на эффект, создаваемый тегом. Атрибуты — это дополнительные ключевые слова, отделенные от ключевого слова тега и друг от друга пробелами. Некоторые атрибуты требуют указания значения атрибута. Это значение отделяется от ключевого слова знаком равенства (=). Значение атрибута должно заключаться в кавычки, но во многих случаях эти кавычки могут опускаться без какого либо вреда. Закрывающие теги никогда не содержат атрибутов. • Комментарии В языках программирования общепринята возможность исполь зования комментариев — текстовых строк, не являющихся частью программы, а служащих для пояснения. Язык HTML тоже имеет такую возможность. Комментарии в языке HTML начинаются со специального тега <! . Следует обратить внимание на отсутствие закрывающей угловой скобки. Любой текст, идущий за этим тегом, рассматривается как комментарий и не отображается при отображении документа. Закан чивают комментарий символами —>. Комментарий может содер жать любые символы, кроме символа «больше» (>), и, таким образом, не может включать в себя теги.
Документ HTML состоит из основного текста документа и тетей разметки, которые, как мы уже знаем, являются наборами обычных символов. Таким образом, документ HTML — это, по существу, обычный текстовый файл. Для его создания можно использовать любой текстовый редактор, хотя бы и тот простейший редактор Блокнот, который входит в состав Windows 9 x. Все документы HTML имеют строго заданную структуру. Доку мент должен начинаться с тега <HTML> И заканчиваться соответствующим закрывающим тегом </HTML>. Эта пара тегов сообщает броузеру, что перед ним действительно документ HTML. Документ HTML состоит из раздела заголовков и тела документа, идущих именно в таком порядке. Раздел заголовков заключен между тегами <HEAD> и </HEAD> И содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги <TITLE> И </TITLE>, между которыми разме щают «официальный» заголовок документа. Большинствоброузеров, работающих в системе Windows, используют этот заголо вок, чтобы заполнить строку заголовка окна броузера. Сам текст документа располагается в теле документа. Тело доку мента располагается между тегами <BODY> И </BODY>. Четыре перечисленных парных тега определяют основную струк туру документа. HTML. Они встречаются (или их наличие подразумевается) во всех документах HTML. На практике определить местоположение этих основных структурных тегов можно и при их отсутствии. Поэтому, если теги <HTML>, <HEAD> и <BODY>, а также соответствующие им закрывающие теги опущены, то программа броузер может сама определить то место, где они должны были находиться. Тег <TITLE>, определяющий заголовок документа, считается, обязательным, но и его пропуск не вызовет катастрофических последствий в современных броузерах. Но все таки при создании Web страниц опускать все эти теги не рекомендуется, ведь заранее не известно, как поведет себя конкретный броузер, установленный на компьютере читателя.
Язык HTML предназначен для описания функциональных разде лов документа, В большинстве обычных документов основными функциональными разделами являются заголовки и абзацы. Язык HTML поддерживает шесть уровней внутренних заголов ков документа. Они помечаются тегами от <Н 1> и </Н 1> до <H 6>и </H 6>. Реально на экране компьютера все эти заголовки изоб ражаются шрифтами разного размера (обычно полужирным начертанием). В соответствии с идеологией HTML текст, который действительно является заголовком, следует пометить с помощью одного из этих тегов. В составе языка имеются теги форматирования, изменяю щие размер и начертание шрифта, но пользоваться ими в этом случае не рекомендуется. Для обозначения обычных абзацев в языке HTML используют тег <р> (и соответствующий закрывающий тег </Р>). Теги, описы вающие обычные абзацы, являются необязательными. Однако при наличии этих тегов броузеры четко отслеживают границы между абзацами. В языке HTML нет никаких средств для. создания абзацного отступа ( «красной строки» ), поэтому для удобочитаемости тек ста между абзацами броузер обычно вводит пустую строку. Важ ным средством создания разделителей в тексте являются гори зонтальные полоски линейки, визуально отделяющие разные части документа друг от друга. Горизонтальная линейка созда ется тегом<HR>. Это одиночный тег, не имеющий соответству ющего закрывающеготега. При применении этих тегов важно принять во внимание, что все кратные ( «лишние» ) пробелы между словами и переходы на новую строку при воспроизведении документа HTML игнорируются. Если же надо осуществить переход на новую строку без созда ния абзаца, можно использовать тег < BR>.
Способность Web страниц содержать ссылки на другие Web страницы — одна из наиболее привлекательных особенностей World Wide Web. Создать гипертекстовую ссылку в документе HTML очень просто. Для этого используются теги <А> (и </А>). • При создании гиперссылки обязателен атрибут HREF=. Его зна чением является адрес. URL, на который указывает ссылка. Текст ссылки размещают между тегами <А> и </А>. При отображении документа в броузере текст ссылки обычно подчеркивается и изображается синим цветом. Щелчок на ссылке приводит к пере ходу по заданному адресу. URL. • Гипертекстовые ссылки могут указывать на другую Web стра ницу или на любой файл, имеющийся на Web узле. При щелчке на такой ссылке предоставляется возможность его загрузки или открытия. • Если Web страница, на которую указывает ссылка, располага ется на другом. Web узле, то в качестве значения атрибута HREF= должен использоваться полный адрес URL документа, включая название протокола и адрес Web узла. Такие ссылки называют внешними. • Если ссылка указывает на другую страницу того же самого Web узла, то достаточно указать только относительный путь поиска документа. В этом случае создается внутренняя ссылка. Исполь зовать внутренние ссылки удобнее, так как в этом случае при переносе Web узла целиком на другой сервер не требуется вно сить изменения в отдельные документы. • Гипертекстовые ссылки могут указывать на определенное место внутри страницы, если в нужное место предварительно встроить якорь. Якорь также использует теги <А> и </А>, но вместо атри бута HREF= для него обязательным является атрибут NAME=. Зна чением этого атрибута являетсяимя якоря. Оно может состоять только из латинских букв и цифр и не должно содержать пробелов. • Дли ссылки на установленный якорь надо указать имя якоря в конце адреса URL после имени документа, отделив его симво лом «#» . •
• • • Только начиная с версии HTML 4, 0 появилась возможность полностью отделить оформление документа от его содержания, но эта концепция пока носит пробный характер и поддерживается не всеми броузерами. По этой причине язык HTML продолжает содержать теги, которые служат исключительно для оформления документа. Возможно, в будущих версиях HTML эти теги будут уже не нужны, но пока пользоваться ими можно. Для задания размера, цвета и начертания шрифта служит тег <FONT>. Этот парный тег влияет на весь текст, заключенный между открывающим и закрывающим тегами. Тег <FONT> должен иметь хотя бы один из трех возможных атрибутов: SIZE=; COLOR=; FACE=. Атрибут SIZE= задает размер шрифта. Предполагается, что воз можны семь заранее заданных размеров шрифта (от 1 до 7). Эти значения не соответствуют каким либо единицам измерения, но чем больше значение, тем крупнее шрифт. По умолчанию исполь зуется значение 3. • Атрибут C 0 L 0 R= задает цвет шрифта, который может быть задан либо ключевым словом (например, RED — красный), либо шестнадцатеричным значением в системе RGB (например, #FF 0000 — это тоже красный). Атрибут FACE= задает вид шрифта. Значением этого атрибута должно быть название одного из шрифтов, установленных на компьютере. Но для документа, размещенного в Интернете, нельзя предсказать, какие шрифты доступны на компьютере пользователя, поэтому этот атрибут лучше не использовать. Чтобы задать значения этих параметров для всего документа в целом, используют одиночный тег <BASEFONT>. Он содержит аналогичные атрибуты и задает значение вида, цвета и размера шрифта, используемое по умолчанию. Специальная группа тегов служит для изменения начертания шрифта. Теги <B> и < / B> делают текст, заключенный между ними, полужирным. Теги <I>и</I> задают курсивное начертание, <U> и </U> — подчеркивание, a <S> и </S> — вычеркивание текста.
• Рассматриваемые здесь теги по своему эффекту напоминают теги, задающие оформление текста. Однако принципиальное различие заключается в том, что эти теги действительно описывают реальные свойства текста. Это означает, что текст может отображаться по разному в разных броузерах, но какой то эффект гарантирован даже в том случае, когда по какой либо причине нет возможности при менить шрифтовые эффекты. • Все эти теги парные и воздействуют на текст, который заключен между открывающим и закрывающим тегами. Закрывающий тег обязателен для каждого из открывающих тегов этой группы. • Тег <CITE> указывает, что соответствующий текст является цита той из другого источника. Такой текст обычно изображается кур сивом. • Так как язык HTML был создан людьми, связанными с компью терами, целая группа тегов предназначена для представления текстов компьютерных программ и результатов взаимодействия пользователя с ними. Так, тег <CODE> указывает на исходный текст компьютерной программы. Тег <KBD> оформляет текст, который должен быть (или был) введен с помощью клавиатуры. Этими тегам и принято размечать команды пользователя и назва ния клавиш. Тег <SAMP> заключает в себе текст, который явля ется примером вывода компьютерной программы. Тег <VAR> слу жит для оформления названий программных переменных или выбранных пользователем параметров компьютерной команды. • Текст, ограниченный любым из этих тегов, обычно изображается при выводе на экран моноширинным шрифтом. Кроме того, некоторые броузеры выводят текст, содержащийся между тегами <KBD> и </KBD>, полужирным шрифтом. • Тег <ЕМ> предназначен для выделения текста. Выделенный текст обычно изображается курсивом. Более сильное выделение обозначается тегом <STRONG>. Такой текст изображается полужирным шрифтом. Так как здесь используется смысловое выделение вместо чисто оформительского, рекомендуется использовать теги <ЕМ> и <STRONG> вместо тегов <I> и <B> соответственно.
• При работе с текстовыми процессорами обычно используют два типа списков — упорядоченные (нумерованные) и неупорядоченные (маркированные). Язык HTML позволяет создавать целых пять разных видов списков. Правда, из этих пяти видов два (списки меню и списки каталога) считаются устаревшими и практически не упо требляются. Таким образом, в настоящее время используют три вида списков: упорядоченные, неупорядоченные и списки определений. • Упорядоченные и неупорядоченные списки создают примерно одинаковым образом. Список всегда располагается между откры вающим и закрывающим тегами списка: < OL> и </OL> в случае упорядоченного списка; ; <UL> и </UL> — в случае неупорядочен ного. • Внутри списка располагаются элементы списка. Их заключают между тегами <LI> и </LI>, хотя в данном случае закрывающий тег может опускаться, так как в этом случае ясно, где он должен располагаться. • Теги <OL>, <UL> и <LI> могут содержать атрибут TYPE=, значение которого указывает на способ пометки элементов списка. Упоря доченные списки можно нумеровать арабскими цифрами, рим скими цифрами, латинскими буквами ( как в верхнем, так и в нижнем регистре). Неупорядоченные списки помечаются маркерами в виде черного кружка (по умолчанию), белого кружка или квад ратика. • Списки могут быть вложенными. Кроме того, элементы списков могут содержать гиперссылки, а также теги, используемые для форматирования и для выделения элементов фразы. • Списки определений начинаются с тега <DL> и заканчиваются тегом </DL>. Маркеры или нумерацию в этих списках не исполь зуют. Список состоит изопределяемых терминов и соответству ющихопределений. Определяемые термины помечаются тегом <DT>, а определения — тегом <DD>. Закрывающие теги можно опускать. Предполагается, что определяемые. Термины и опреде ления чередуются, хотя это и не требуется строго. Определения изображаются на экране с отступом от левого края.
Таблица — это один из наиболее удобных способов представления больших объемов данных. Язык HTML имеет богатейшие возмож ности по созданию разных видов таблиц. • Таблица в языке HTML начинается с тега <TABLE> И заканчива ется закрывающим тегом < / ABLE>. T Текст внутри таблицы дол жен быть заключен в специальные теги, определяющие элементы таблицы (заголовки, строки и ячейки). • Между тегами <TABLE> И < /TABLE> может один раз встретиться пара тегов <CAPTION> и </CAPTl. ON>, определяющая заголовок таблицы. Заголовок таблицы размещается непосредственно над таблицей (по умолчанию) или непосредственно под таблицей. • Далее следуют теги <TR> и < /TR>, определяющие строки таблицы. Закрывающий тег можно опускать, так как строка таблицы закан чивается перед началом следующей строки или вместе с табли цей. • Каждая строка таблицы состоит из ячеек. Ячейки помечаются либо тегами <ТН>, содержащими заголовки столбцов и строк, либо тегами <TD>, содержащими обычные данные. Эти теги также являются парными, но закрывающие теги и здесь могут опус каться, так как это не вызывает разночтений. • Внутри ячеек могут содержаться любые данные и любые теги HTML, допустимые в разделе тела документа. Например, ячейка таблицы может содержать вложенную таблицу. Броузеры авто матически вычисляют размеры ячеек и всей таблицы, хотя эти свойства частично можно задать и при помощи атрибутов. • Из специфических атрибутов таблиц можно, например, указать атрибут BORDER=, который позволяет создавать рамку вокруг таб лицы и вокруг отдельных ячеек. Значением этого атрибута явля ется толщина внешней рамки в пикселах. • В примере, приведенном на соседней странице, использованы и другие атрибуты, с помощью которых увеличены промежутки между ячейками и созданы ячейки увеличенной высоты. •
• • • Язык HTML позволяет разбить окно программы броузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются фреймами. Для создания фреймов используют особый документ HTML, структура которого отличается от обычной. Такой документ не содержит раздела «тела» документа и, на самом деле, не содержит какого либо текста вообще. Вместо этого он содержит описание фреймов, заключенное'между тегами <FRAMESET> И < /FRAMESET>. В этом описании указывают размеры и порядок размещения областей в окне броузера, а также задают документы, которые должны загружаться в каждую из этих областей. Тег <FRAMESET> должен содержать обязательный атрибут COLS= или ROWS=, определяющий способ разбиения окна. При исполь зовании атрибута. COLS= окно делится на области вертикальными линиями, а при использовании атрибута ROWS= — горизонталь ными. Если заданы оба эти атрибута, в окне создается сетка из подобластей. Значения этих атрибутов определяют высоту (или ширину) облас тей окна. Параметры для каждого столбца (строки) задают через запятую в пикселах или в процентах (символ «%» ). В качестве последнего параметра можно использовать символ «звездочка» (*). Под такой фрейм выделяется все остающееся свободное пространство. Между тегами <FRAMESET> И </FRAMESET> располагают допол нительные теги, указывающие назначение созданных областей. Для этой цели можно использовать вложенные теги <FRAMESET>, задающие дополнительное разбиение окна, или одиночные теги <FRAME>, определяющие документы, загружаемые в отдельные области. Число элементов, вложенных между тегами <FRAMESET> и </FRAMESET>, должно соответствовать числу созданных областей. Тег <FRAME> должен содержать обязательный атрибут SRC=, опре деляющий документ, который будет загружен в данную область. Дополнительные атрибуты позволяют управлять рамками между отдельными фреймами и некоторыми другими свойствами.
Иллюстрации играют важнейшую роль в оформлении Wеb страниц. Сами рисунки хранятся в отдельных файлах вне документа HTML, но отображаются броузером внутри Web страницы. • Для размещения рисунков в документе служит одиночный тег <IMG>. • Этот тег всегда должен содержать обязательный атрибут SRC=, значение которого составляет адрес URL файла изображения, записанный в абсолютной или относительной форме. При загрузке документа рисунок также загружается и отображается в том месте документа, где расположен тег <IMG>. • Изображение переносится на Web страницу с сохранением раз мера. Если при компоновке изображения необходимо его перемасштабировать, нужные размеры рисунка можно задать с помо щью атрибутов. WIDTH= (ширина) и HEIGHT= (высота). Значения этих атрибутов определяют ширину и высоту изображения на Web странице в пикселах. • Используя иллюстрации в документах, мы ступаем на зыбкую почву. Во первых, Web страница может отображаться броузером, не име ющим средств для показа изображений. Во вторых, пользователи часто отключают показ рисунков, чтобы ускорить прием документа. И в том и в другом случае желательно дать возможность узнать, что же изображено на картинке, если ее нельзя увидеть. Для этой цели используют альтернативный текст. • Альтернативный текст — это, по сути, более или менее подробное описание изображения. Если броузер не может по той или иной причине показать рисунок, он вместо него выводит этот альтер нативный текст. Альтернативный текст задается в теге<IMG> зна чением специального атрибута ALT=. • Изображение, как и текст, можно использовать в качестве ссылки. Для этого тег < IMG> должен быть помещен между тегами <А> и < / А>, определяющими ссылку. Изображение ссылка отображается в синей рамке. При наведении на такой рисунок указатель принимает ту же форму, что и при наведении на текстовую ссылку. Этим при емом на. Web страницах создают графические кнопки перехода. •
Широкое распространение мультимедиа пришлось на период, когда служба World Wide Web уже существовала, так что язык HTML не сразу приспособился к появлению на Web страницах мультимедийных объектов. Файлы аудио и видео до сих пор рассматрива ются как «внешние» объекты, воспроизводимые через встроенные и вспомогательные приложения. • Мультимедийные файлы видео и звука могут использовать различ ные форматы. Обычные форматы требуют полной загрузки файла, прежде чем станет возможным его воспроизведение. Современные потоковые форматы позволяют воспроизводить звук и видеоизоб ражение в реальном времени по ходу загрузки данных. • В потоковом формате в Интернете передаются радиотрансляции. Например, в России в таком формате вещает радиостанция «Серебряный дождь» (www. silver. ru). • Самый простой способ вставить мультимедийный объект на Web страницу — это использовать тег гиперссылки <А>. Создать такую ссылку проще всего, и в этом случае мультимедийный файл не от влекает читателя от остального содержимого документа. HTML. • В некоторых случаях требуется внедрить звуковой или мультиме дийный файл непосредственно в Web страницу, например для того, чтобы иметь возможность воспроизводить этот файл автоматиче ски. В настоящее время для этой цели удобнее всего применять тег < EMBED>, хотя он, строго говоря, не входит в стандарт HTML. Этот тег распознается двумя наиболее распространенными броузерами — Internet Explorer и Netscape Navigator, хотя возможность воспроизве дения мультимедийного файла определяется исключительно нали чием соответствующего встроенного приложения. • Тег <EMBED> является одиночным, так что закрывающий тег не тре буется. Его обязательным атрибутом является SRC=, значение кото рого представляет абсолютный или относительный путь поиска соответствующего файла. Возможно также использование атрибу тов. WIDTH= и HEIGHT=, задающих размеры (ширину и высоту) пря моугольной области на экране, «отведенной» под воспроизведение мультимедийного объекта. •
