В дипломном проекте в качестве программного инструментария для заполнения статического контента был использован язык гипертекстовой разметки HTML.
HTML (Hyper Text Markup Language - язык гипертекстовой разметки) представляет собой компьютерный язык программирования, предназначенный для разработки Web-страниц, или, другими словами, документов HTML. Язык HTML – это коллекция управляющих символов – дескрипторов, с помощью которых можно добавлять и форматировать элементы документа. Для настройки внешнего вида и функционирования элемента страницы устанавливаются его атрибуты.
Обозреватели распознают дескрипторы языка HTML и преобразуют код документа в Web-страницу, отображаемую в окне обозревателя. Приложения обозревателей разрабатываются с учетом мировых стандартов языка HTML, благодаря чему Web-страницы выглядят одинаково, независимо от того, в окне какого обозревателя они отображаются.
Вопросами стандартизации языка HTML занимается организация World Wide Web Consortium (W3C). Несмотря на необходимость обеспечить полную программную и аппаратную независимость Web-страниц, в полной мере реализовать эти принципы довольно сложно. Одна из проблем состоит в том, что работа над языком продолжается. Появляются новые версии HTML, предоставляющие дополнительные возможности для разработчиков Web-страниц.
Существует множество специализированных HTML-редакторов, которые можно условно разделить на два типа:
визуальные редакторы HTML, то есть редакторы типа WYSIWIG (например, Microsoft FrontPage, Macromedia Dreamveawer, Netscape Navigator Gold и др.). При работе в этих программах пользователь имеет дело с графическими образами элементов HTML, а не с кодом документа. Кстати, существуют конверторы текстовых документов, подготовленных в Word и Word Perfect, в формат HTML-файлов;
редакторы собственно HTML-текстов, позволяющие автоматизировать набор и редактирование кода (например, HomeSite, HotDog, Ken Nesbitt Web Editor и многие другие). Эти программы дают возможность пользователю быстро и легко вставлять в документы элементы HTML, проверять синтаксис команд, выполнять запуск и отладку страницы, не покидая окна редактора. Вообще работа в таких редакторах напоминает работу в интерактивной среде программирования типа Delphi или Visual Basic.
Кроме перечисленных двух категории, существуют программы, объединяющие в себе черты текстовых и визуальных HTML-редакторов к таким программам относится HotMetal разработки компании SoftQuad Sofware.
Функции современных HTML-редакторов очень разнообразны: некоторые из них, например, обеспечивают формирование только отдельных страничек, другие, наоборот, применяются для проектирования целых Web-узлов с последующей загрузкой их на удаленные серверы в Internet. Сегодня трудно провести границу между профессиональными HTML-редакторами и теми, что предназначены для любительского Web-творчества.
При использовании каждого элемента важно знать, какие элементы могут располагаться внутри него, и внутри каких элементов может находиться он сам. Так, взаимное расположение элементов HTML, HEAD, TITLE и BODY должно быть стандартным на любой странице, правда, в тех случаях, когда не используются фреймы. Если же страница представляет собой документ планировки фреймов (подробнее об этом в разделе «Фрей мы» главы 3), то вместо элемента BODY используется элемент FRAMESET.
Существуют группы элементов, которые используются совместно. К ним относятся элементы для создания таблиц, списков, фреймов. В этом случае порядок вложения элементов определяется логикой создания того или иного объекта на странице: тут надо помнить несложные правила конструирования. Таблицы и фреймы часто используются для того, чтобы поместить детали страницы (рисунки, текст и т. д.) в определенном порядке. Например, располагая рисунок внутри ячейки таблицы, можно добиться определенного его положения. В таких случаях вложенность элементов определяется разработчиком Web-страницы, и многое зависит от его фантазии и умения.
Большое количество элементов, которые используются для форматирования текста, допускают самые разнообразные варианты вложения. И сами они обязательно должны располагаться внутри определенных элементов. Здесь надо руководствоваться здравым смыслом: каждый элемент выполняет заданную функцию и имеет определенную область действия.
В приведенном ниже примере есть два абзаца (первый в зеленой рамке) и таблица:
Текст абзаца 1
Текст абзаца 2
Таблица в данном случае - независимый элемент. Ее можно, например, выравнивать независимо от остального текста.
Можно использовать другой код:
Текст абзаца 1
Текст абзаца 2
Исчез конечный тег первого абзаца. Теперь таблица является частью первого абзаца, и зеленая рамка будет охватывать таблицу и текст.
И наоборот, элемент Р может находиться внутри таблицы: например, один элемент ячейки TD может содержать несколько абзацев Р.
Нарушение правил вложения - одна из наиболее распространенных ошибок при создании Web-страниц. Чтобы избежать таких ошибок, надо пользоваться редакторами гипертекста, которые автоматически контролируют выполнение правил синтаксиса. Ниже приведена строка, содержащая типичную ошибку вложенных элементов:
Заголовок 1 Заголовок 2 Заголовок 3
Если страница может быть отображена, то она выводится на экран без каких-либо предупреждающих сообщений. Программа интерпретирует ошибочно расставленные теги определенным образом и формирует изображение, следуя логике, заложенной в нее разработчиками. При этом вид страницы может и не соответствовать замыслу автора. И только в случае очень серьезных ошибок или явных противоречий браузер выводит сообщение с невозможности отобразить страницу. Косвенным признаком ошибки разметки может служить появление на странице фрагментов кода HTML. Пользователи, много работающие с Интернетом, по всей видимости, сталкивались с такой ситуацией. Правила синтаксиса распространяются и на использование стартового и конечного тегов, атрибутов и содержимого элемента. Не путайте понятия «элемент» и «тег». Элемент - это контейнер, содержащий атрибуты внутри стартового тега к полезную информацию между стартовым и конечным тегами. Тег - это конструкция, заключенная в угловые скобки и используемая для обозначения области действия элемента.
Некоторые элементы не имеют конечного теги. Очевидно, что элементу BR, обозначающему конец строки, не нужен конечный тег. Некоторые элементы могут использоваться с конечным тегом или без него. Самым ярким примером служит элемент абзаца Р. Он может иметь конечный тег, но если этот тег не задан, то при знаком окончания действия элемента служит следующий элемент, который может логически определить конец текущего абзаца: другой элемент Р, элемент рисунка IMG, элемент списка UL, элемент таблицы TABLE и т. д. Таким образом, полезная информация одного элемента должна находиться либо между начальным и конечным тегами данного элемента, либо между начальным тегом данного и начальным тегом следующего элемента. Любой произвольный текст, введенный на страницу, воспринимается браузером как подлежащий выводу на экран и, следовательно, форматированию в соответствии с окружающими этот текст элементами. При этом не учитывается разбиение текста на строки, полученное в текстовом редакторе. Теоретически, всю Web-страницу можно уместить в одной длинной строке. Символы конца строки, введенные, например, в Блокноте, могут помочь чтению кода HTML, но не отображаются браузером. Последний, при выводе страницы на экран, может оборвать строку в соответствии с расстановкой элементов Hn, P или BR, а в остальных случаях он форматирует абзацы произвольно, в зависимости от объема текста, размера шрифта и текущего размера окна. Поэтому Web-страницы надо компоновать таким способом, чтобы их вид кардинально не изменялся для разных режимов разрешения монитора, размера экрана, размера окна браузера, а также для полноэкранного или оконного режимов. Очень важным правилом, которое не имеет исключений, является размещение атрибутов элемента внутри начального тега .
Символы, заключенные в угловые скобки являются HTML командами, по которым «браузер» распознает, как следует преобразовать части текста, заключенные между этими командами.
Документ в целом должен быть отмечен как документ в формате HTML. Для этого он должен начинаться командой и заканчиваться командой.
Документ состоит из 2 частей:
заголовка (Head).
документа (Body).
При написании команд HTML не имеет значение, какими буквами – строчными или прописными Вы пишете команды.
Заголовок содержит такие сведения о документе, как его название и методическая информация, описывающая содержимое. В теле находится само содержимое документа (то, что выводится в окне браузера).
Каждый тег состоит из имени, за которым может следовать список необязательных атрибутов, все они находятся внутри угловых скобок < >.
Содержимое скобок никогда не выводится в окне браузера. Имя тега, как правило, представляет собой аббревиатуру его функции, что облегчает его запоминание. Атрибуты являются свойствами, которые расширяют или уточняют функцию тега. Как правило, имя и атрибуты внутри тега не чувствительны к регистру. Тег будет работать так же, как . Однако значения определенных атрибутов могут быть чувствительны к регистру. Это относится, в частности, к именам файлов и URL. Общую схема документа показана на рисунке 1.1.
Рисунок 1.1. Общая схема документа в формате HTML
У тегов имеется начальный (открывающий или стартовый) и конечный (закрывающий) теги. Текст, находящийся между тегами, будет выполнять содержащиеся в них инструкции. Например:
Моя первая Web-страница
Результат: Моя первая Web-страница.
Конечный тег имеет то же имя, что и начальный, но перед ним стоит слэш (/). Его можно рассматривать как "выключатель" тега. Конечный тег никогда не содержит атрибутов.
текст начинается с тега . Для него требуется закрывающий тег , обозначающий конец документа. Следующими по уровню вложенности являются теги заголовка документа и его содержания. Внутри тега заголовка записывается информация о документе (его название, описание, таблица кодировки и т. д.). Сам тег заголовка записывается как . Для него требуется закрывающий тег . Тег содержания документа определяет информационную часть описания страницы. В ней располагается текст, рисунки и другие элементы. Тег описания (тела страницы) выглядит следующим образом: ....
Запишем пример простейшего документа:
Пример HTML-страницы
Это простая страница, иллюстрирующая структуру описания на языке HTML.
Тег , расположенный в заголовке страницы, указывает название страницы, которое большинство браузеров отображают в заголовке окна. Определив название страницы, вы упростите работу с сайтом (пользователь поймет, куда он попал, еще до окончания загрузки документа). На рисунке 1.2 изображена описанная выше страница, открытая в браузере Internet Explorer.
Рисунок 1.2. Пример HTML-страницы
Элемент BODY должен встречаться в документе не более одного раза.
Атрибуты:
MARGINHEIGHT – определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape;
TOPMARGIN – определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer;
MARGINWIDTH – определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape;
LEFTMARGIN – определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer;
BACKGROUND – определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG;
BGCOLOR – определяет цвет фона документа;
TEXT – определяет цвет текста в документе;
LINK – определяет цвет гиперссылок в документе;
ALINK – определяет цвет подсветки гиперссылок в момент нажатия;
VLINK – определяет цвет гиперссылок на документы, которые вы уже просмотрели.
Текст документа.
Результат примера показан на рисунке 1.3.
Рисунок 1.3. Пример изменения цвета фона и цвета текста
Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
Основные области WEB-страниц заняты, как правило, текстом. Текстовые блоки состоят из отдельных строк, объединенных в абзацы. Абзацы начинаются с новой строки, а группы абзацев отделяются друг от друга заголовками.
При оформлении обычных текстовых документов законченные мысли представляются в виде абзацев. Этого правила придерживаются и в процессе создания документов для WEB. Более того, в случае WEB-страниц четкое деление текста на абзацы является обязательным, поскольку тексты должны быть лаконичными и допускать возможность беглого чтения.
Для создания абзаца в языке HTML предусмотрены несколько возможностей. Простейшая из них – это использование тегов
И
Между которыми помещается текст абзаца.
Код страницы содержащей абзацы, может иметь вид:
Разбиение на абзацы
Ричард Бах
Единственная
Мы прошли долгий путь, правда?
Впервые мы встретились двадцать пять лет тому назад. Тогда я был летчиком, очарованным полетом, и пытался найти смысл жизни в показаниях приборов. Двадцать лет назад наше путешествие привело нас в новый необычный мир, распахнутый для нас крыльями Чайки.
В окне браузера будет выводиться как показано на рисунке 1.4.
Рисунок 1.4. Разбиение на абзацы.
Транскрипт2 TYPE ALIGH BGCOLOR CHAR SPAN V AUTOSTART HEIGHT WIDTH HIDDEN LOOP SRC COLOR FACE SIZE ACCEPT- CHARSET ACTION ENCTYPE METHOD TARGET и Создает кнопку тип кнопки Создает заголовок таблицы выравнивание заголовка Выравнивание элементов Web-страницы по центру Выделяет текст программного кода Создает неструктурную или структурную группу столбцов таблицы выравнивание текста в ячейках по горизонтали цвет фона ячеек выбор символов для выравнивания число столбцов в группе выравнивание текста в ячейках по вертикали Выделение текста перечеркиванием Раздел текста Список определений Пункт заголовка термина Пункт описания термина Выделяет текст курсивом Добавляет аудио- или видеофайл обтекание текста вокруг рамки проигрывателя автоматическое воспроизведение высота рамки проигрывателя ширина рамки проигрывателя сокрытие проигрывателя воспроизведение по циклу путь к файлу мультимедиа Группирование элементов формы Изменение параметров текста цвет текста шрифт размер Создает форму набор символов, поддерживаемый формой адрес сервера, на который передаются данные формы формат передачи данных метод передачи данных имя формы целевое окно показа диалога подтверждения
3 Создает рамку в структуре рамок BORDERCOLOR цвет границы рамки FRAMEBORDER скрывает границы рамки MARGINHEIGHT нижнее и верхнее поля рамки MARGINWIDTH левое и правое поля рамки имя рамки NORESIZE запрет на изменение пользователем размера рамки SCROLLING отображение полос прокрутки SRC путь к документу, отображаемому в рамке по умолчанию TARGET устанавливает целевую рамку по умолчанию Создает структуру рамок BORDER толщина границ рамок BORDERCOLOR цвет границ рамок COLS набор вертикальных рамок FRAMEBORDER показ границ рамок ROWS набор горизонтальных рамок - Создают заголовки текста ALIGH выравнивание заголовка по горизонтали Раздел заголовка Web-страницы Создает горизонтальную линию выравнивание линии по горизонтали NOSHADE сокрытие эффекта объемности SIZE толщина линии WIDTH ширина линии Тело Web-страницы Курсив Создает плавающую рамку обтекание текста вокруг рамки HEIGHT высота рамки WIDTH ширина рамки MARGINHEIGHT верхнее и нижнее поля рамки MARGINWIDTH левое и правое поля рамки имя рамки SCROLLING отображение полос прокрутки SRC путь к документу, отображаемому в рамке по умолчанию Добавляет рисунок в Web-страницу ALIGH выравнивание рисунка в тексте или обтекание текста вокруг рисунка
4 ALT BORDER DYNSRC HEIGHT WIDTH HSPACE VSPACE ISMAP LOWSRC SRC TABINDEX USEMAP ACCERT ACCESSKEY CHECKED DISABLED MAXLENGTH READONLY SIZE SRC TABINDEX TYPE VALUE
5 DIRECTION направление перемещения текста HEIGHT высота бегущей строки HSPACE отступ текста бегущей строки от левого и правого полей Web-страницы LOOP число показов текста в строке SCROLLAMOUNT смещение текста за один шаг SCROLLDELAY временной промежуток между смещениями VSPACE отступ по вертикали от текста до рамки бегущей строки TRUESPEED минимальный временной промежуток между смещениями WIDTH ширина бегущей строки Устанавливает глобальные параметры Web-страницы CONTENT описание Web-страницы HTTP-BQUIV заголовок НТТР метаописатель URL путь к файлу Web-страницы Запрещает разрыв строки Альтернативный текст для обозревателей, не поддерживающих внедренные объекты мультимедиа Альтернативный текст для обозревателей, не поддерживающих рамки Альтернативный текст для обозревателей, не поддерживающих сценарии Альтернативный текст для обозревателей Добавляет объект CLASSID регистрационный класс программного объекта DATA путь к файлу объекта HEIGHT высота рамки объекта WIDTH ширина рамки объекта Создает нумерованный список START номер первого элемента списка TYPE вид нумерации списка Создает подсписок в списке формы LABEL заголовок подсписка Создает элемент списка формы SELECTED элемент списка, выбранный по умолчанию VALUE значение элемента списка
Создает абзац выравнивание текста в абзаце Сохраняет отступы в исходном тексте
6 Выделяет текст как цитату Выделяет образец текста Указывает код сценария DEFER запрещает использование сценария для генерирования содержимого Web-страницы LANGUAGE язык сценария SRC путь к файлу сценария TYPE тип сценария Создает список формы MULTIPLE разрешает одновременный выбор нескольких элементов списка имя списка SIZE число элементов списка, отображаемых в окне обозревателя TABINDEX порядок перехода при нажатии клавиши Уменьшает размер шрифта на один номер Фрагмент текста Перечеркивает текст Выделяет текст полужирным шрифтом Подстрочный текст Надстрочный текст
- Создают ячейку данных или ячейку заголовка таблицы выравнивание текста ячейки по горизонтали 7 BACKGROUND BGCOLOR CHAR COLSPAN HEIGHT NOWRAP ROWSPAN V WIDTH ACCESSKEY COLS DISABLED READONLY ROWS TABINDEX WRAP BGCOLOR CHAR V BGCOLOR CHAR V |