Структура текста Web документа - Составление анимации в web-сайте с применением Macromedia Flash-технологии
Если сравнить исходные тексты различных Web-страниц, можно легко увидеть сходство их структур. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 "Information processing. Text and office systems. Standard Generalized Markup Language (SGML)". Правда, существует большое различие между стандартом официальным и стандартом фактическим.
Ниже приведен шаблон типичного Web-документа. На его примере мы рассмотрим общие принципы построения HTML-страниц.
Для того чтобы понять структуру Web-страницы, нам необходимо подробно рассмотреть все элементы, входящие в приведенный листинг.
<COMMENT> Комментарий к документу </comment>
<HTML>
<HEAD>
<TITLE> Структура Web-страницы</title>
<STYLE> H2 {font-family: Arbat;}
CODE {font-family: Arbat;} </style>
<META
Name=''Author''
Content=''Irina''>
<META
Name=''Keywords''
Content=''WWW, HTML, document, element''>
</head>
<BODY bgcolor=#FFFFFF>
<A name=''top''>вверх</a>
Переход в <A href=''#bottom''> конец </a> документа <P>
Переход к <A href=''#S001''><B> ссылке 1 </b></a><P>
<P>
<HR>
<H1>Заголовок1<h1>
<H2>Заголовок2<h2>
<H3>Заголовок3<h3>
<H4>Заголовок4<h4>
<H5>Заголовок5<h5>
<H6>Заголовок6<h6>
<HR>
Здесь расположена <B>ссылка 1</b><A name=''S001''></a>
<HR>
<P>Здесь должен располагаться оригинальный текст Web-страницы
<HR>
<A name=''bottom''></a><P>
Переход в <A href=''top''> начало </a> документа
</body>
</html>
<COMMENT></comment>
Текст комментария. В любом языке программирования есть конструкции, позволяющие создавать произвольные ремарки. HTML в этом смысле - не исключение. Текст, помещенный внутри COMMENT, игнорируется броузером Броузер (browser) - программа для просмотра Web-страницы. COMMENT может располагаться в любом месте кода Web-страницы. Без конечного тега Тег (tag) - стартовый или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой., здесь по-видимому не обойтись: комментарий должен быть отделен от основного текста.
Существует, правда, одно ограничение: внутри комментария не должны располагаться другие элементы Элемент (element) - конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любой Web-документ представляет собой набор элементов. Одна из основных идей гипертекста - возможность вложения элементов.. Так должно быть, разумеется, только в том случае когда необходимо, чтобы все содержимое элемента COMMENT не отображалось на экране монитора. Если в комментарии будет присутствовать другой элемент, то его содержимое будет выведено на экран, отформатированное соответствующим образом. С этой проблемой связана другая, похожая: обычный текст не может содержать фрагменты, имеющие вид тегов. Для того чтобы включать в текст подобные конструкции, существует элемент PLAINTEXT, о котором речь пойдет ниже.
Существует и другой способ обозначения комментария. Он заключается в использовании восклицательного знака и обрамлении текста комментария двойным тире. Например:
<!--Строка комментария-->
<!--Комментарий - - Не комментарий - - Снова комментарий-->
Внутри подобной конструкции можно помещать и теги: они не будут восприниматься броузером.
<HTML></html>
Отличительный признак HTML-документа. Одним из принципов языка является многоуровневое вложение элементов. HTML является самым внешним, так как между его стартовым и конечным тегами должна находиться вся Web-страница. В принципе, этот элемент можно рассматривать как формальность. Он имеет атрибуты Атрибут (attribute) - параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой присваивается определенный набор значений: стандартных или произвольных. Атрибуты располагаются внутри стартового тега и отделяются друг от друга пробелами. version, lang и dir, которыми в данном случае мало кто пользуется и допускает вложение элементов HEAD, BODY и PLAINTEXT, определяющих общую структуру Web-страницы. Естественно, что конечным тегом </html> заканчиваются все гипертекстовые документы.
<HEAD></head>
Область заголовка Web-страницы. Иными словами, ее первая часть. Так же как и HTML, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir и допускается вложение элементов TITLE, ISINDEX, BASE, META, LINK, NEXTID.
<TITLE></title>
Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри, отображается не в документе, а в заголовке окна броузера. Эта особенность часто используется для организации поиска в WWW WWW, World Wide Web - Всемирная Паутина, распределенная система доступа к гипертекстовым документам, существующая в Internet. . Поэтому авторы, создающие Web-страницы, должны позаботиться о том, чтобы строка внутри TITLE, не будучи слишком длинной, достаточно отображала назначение документа.
<STYLE></style>
Описание стиля некоторых элементов Web-страницы. В выше приведенном примере назначены шрифты для элементов Н2 и CODE. Естественно, что для каждого элемента существует стилевое оформление по умолчанию, поэтому употребление STYLE не обязательно.
<META>
Этот элемент содержит служебную информацию, которая не отображается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент META содержит два основных атрибута, первый из которых определяет тип данных, а второй - содержание. Далее приведены несколько примеров meta-данных.
Дата, обозначающая "срок годности"документа:
Name=''Expires'' content=''Дата''
Адрес электронной почты:
Name=''Reply-to'' content=''Имя@Адрес''
Указание приложения, в котором был создан Web-документ:
Name=''Generator'' content=''Название HTML-редактора''
Атрибут name используется приложением-клиентом для получения дополнительной информации о Web-страницах и их упорядочения. Этот атрибут часто заменяют атрибутом http-equiv. Он используется сервером для создания дополнительных полей при выполнении запроса.
Кроме этого, элемент МЕТА может содержать URL. Шаблон соответствующего атрибута таков:
URL=''http://адрес''
<BODY></body>
Этот элемент заключает в себе гипертекст, который определяет собственно Web-страницу. Эта та часть документа, которую разрабатывает автор страницы и которая отображается броузером. Соответственно, конечный тег этого элемента надо искать в конце HTML-файла. Внутри BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри стартового тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком. Рассмотрим их по порядку.
Один из самых полезных для дизайна - атрибут, определяющий фон страницы. Его появление можно уподобить маленькой революции в WWW, так как одинаковые серые Web-страницы благодаря ему расцвели яркими цветными узорами:
Background=''Путь к файлу фона''
Более простое оформление фона сводиться к заданию его цвета:
Bgcolor=''#RRGGBB''
Цвет фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего цветов соответственно.
Оба вышеперечисленных атрибута не являются альтернативными и часто используются совместно.
Поскольку фон страницы может изменяться, необходимо иметь возможность подбирать соответствующий цвет текста. Для этого имеется следующий атрибут:
Text=''#RRGGBB''
Для задания цвета гиперссылок Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому. используется атрибут:
Link=''RRGGBB''
Также можно задать цвет для использованных гиперссылок:
Vlink=''RRGGBB''
Гипертекст, расположенный внутри элемента BODY, может иметь произвольную структуру. Ее определяют в первую очередь назначение Web-страницы и фантазия разработчика.
<A></a>
HTML-документ может быть очень большим, и в этом случае пользователю должна быть предоставлена возможность быстро перемещаться к нужному разделу страницы. Для этого можно использовать механизм гиперссылок. Необходимо также в нужных местах текста расставить соответствующие метки, a здесь мы рассмотрим только шаблон для создания меток:
<A name=''Метка''></a>
В этом случае для перехода внутри документа можно использовать следующую конструкцию:
<P>Переход к <A href=''#Метка''>метке</a></p>
Несколько подобных строк могут образовать своеобразное оглавление Web-страницы, которое можно разместить в начале и в конце документа.
<BASE>
Элемент для установки базового адреса (URL) для ссылок. Это позволяет опускать их начальную часть. Для использования элемента необходима следующая конструкция:
<BASE href=''http://компьютер/путь1''>
Фрагмент путь1 не является обязательным. При форматировании полного адреса он будет отброшен.
В том случае, когда надо задать базовый адрес для локального диска (например D:), должна быть использована такая конструкция:
<BASE href=''file://D:путь>
Тогда при указании относительной ссылки можно задать не только имя файла, но и имена папок, в которых он находиться. Иными словами, путь к файлам может быть разбит на две части: абсолютную и относительную. Это полезно в том случае, когда для файлов указанных в документе, есть общий начальный фрагмент пути.
Похожие статьи
-
Для того, чтобы понять структуру и сценарий Web-документа, мы должны рассмотреть несколько Web-страниц и выявить общие элементы. Любой Web-документ...
-
У Flash задействуется все еще преимущественно в интернет-бизнесе: для привлечения посетителей владельцы развлекательных сайтов вывешивают серию за серией...
-
Гипертекстовые ссылки - Составление анимации в web-сайте с применением Macromedia Flash-технологии
Одним из самых важных элементов языка, обеспечивающий создание гиперссылок является: <A></a> Чаще всего используется такой шаблон: Произвольный...
-
HoTMetal PRO 3.0 - Составление анимации в web-сайте с применением Macromedia Flash-технологии
Редактор гипертекста HoTMetaL был одним из первых программных продуктов подобного рода. Основная цель редактора заключалась в том, чтобы красиво...
-
Что такое Flash? Flash (от англ. Flash - "вспышка", произносится "флэш") Flash - это технология веб-мультипликации и создания интерактивного контента от...
-
Анимация - Составление анимации в web-сайте с применением Macromedia Flash-технологии
Покадровая анимация Это анимация, полностью составленная из ключевых кадров, т. е. пользователь самостоятельно определяет, как содержимое кадра, так и...
-
HotDog Professional 3 - Составление анимации в web-сайте с применением Macromedia Flash-технологии
Редактор гипертекста HotDog Professional 3 создан фирмой Sausage Software. От других его выгодно отличает обилие инструментов, подпрограмм и сервисных...
-
ВВЕДЕНИЕ - Составление анимации в web-сайте с применением Macromedia Flash-технологии
В последние годы мультимедиа стало образом жизни для многих пользователей, программы и игры сделаны более интересными и впечатляющими. В настоящее время...
-
Глобальная Сеть не только соединила пользователей всего мира, но и утвердилась в виде новых технологий на наших персональных компьютерах. Действительно,...
-
Adobe Dreamweaver - Составление анимации в web-сайте с применением Macromedia Flash-технологии
Adobe Dreamweaver - идеальная программа для веб-дизайнеров, html-кодеров и разработчиков веб-приложений. Новые функции программы дают возможности удобной...
-
Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и...
-
В данной дипломной работе рассмотрены актуальные вопросы разработки и создания современного Web-сайта. При этом мною были решены следующие задачи: -...
-
Приложения - Составление анимации в web-сайте с применением Macromedia Flash-технологии
Исходный код сайта. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">...
-
Практическое решение примеров в программе Macromedia Flash (скриншоты примеров) Пример анимационная баннер сайта. Пример баннер сайта состоит 227 кадров...
-
Способы связывания с документом - Компьютерные сети
Внешние таблицы стилей - в отдельном css-файле. Связывается с HTML-документом командой <link rel="stylesheet" href="/templates/template. css"...
-
Что такое HTML. Hyper Text Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB....
-
За структуру HTML-документа отвечают следующие теги: <HTML> - в данном контейнере находится все содержимое HTML-документа. <HEAD> - содержит...
-
Для вызова ЛЕКСИКОНа следует набрать LEXICON или LEXICON имя редактируемого - файла Если в команде вызова ЛЕКСИКОНа указано имя файла, которого нет на...
-
Один из наиболее простых и, в то же время, наиболее выразительных способов изменения внешнего вида текста состоит в изменении шрифта, которым он написан....
-
Принцип работы языка. Синтаксис Как и было сказано ранее основой для HTML-были приняты текстовые документы, содержащие в себе HTML5. Рассмотрим следующий...
-
Редакторы HTML - Компьютерные сети
- Adobe Dream Weaver; - Microsoft Expression Web; - SharePoint Designer (бесплатный); - Web Development Studio (бесплатная); - Word; - Microsoft Front...
-
Кодирование и формат отправляемых данных - Компьютерные сети
По умолчанию - application/x-www-form-urlencoded Все символы не из первой половины ASCII заменяются их кодами, например, "a" на "%E0". Пробелы - на "+",...
-
Цель работы: Освоение основ языка разметки гипертекста HTML, дескрипторов форматирования текста и технологии создания гиперссылок. Теоретические...
-
В данном реферате рассматриваются основные принципы создания и форматирования документов с помощью одного из самых распространенных текстовых редакторов...
-
Составление проектной документации на разработку информационной системы Общие вопросы охраны труда. 1. Общие требования охраны труда 1.1. К работе на...
-
Правила ввода текста - Основы работы с системой MathCAD 2000 PRO
1. Введите знак двойной кавычки " на английском регистре - появится прямоугольник с курсором ввода. 2. С помощью раскрывающегося списка выбора шрифта на...
-
Подпрограммы - Язык программирования PERL. Сфера применения
Как и все структурированные языки программирования, Perl поддерживает подпрограммы. Подпрограмма может быть определена с помощью ключевого слова sub, как...
-
Выделение текста и рисунков - Текстовый редактор Word, электронная таблица Excel
Для выделения текста и рисунков, включая элементы, не расположенные в непосредственной близости друг от друга, можно использовать как мышь, так и...
-
Основные понятия - Основы HyperText Markup Language
HTML (HyperText Markup Language) - язык разметки гипертекста - предназначен для создания Web-страниц. Под гипертекстом в этом случае понимается текст,...
-
Проектирование и разработка сайта Средства разработки Язык гипертекстовой разметки HTML В Интернете сосредотачивается и передается достаточно большое...
-
Инструментарий разработки - Современные средства создания электронного обучающего материала
Для разработки электронного учебного пособия был выбран язык HTML. Общие сведения о языке HTML. Для подготовки информации и сохранения ее в виде...
-
Разработка сайта, Среда разработки web-сайта - Разработка сайта для компании
Среда разработки web-сайта При разработке web-сайта используются: - HTML - язык разметки web-страниц; - CSS - формальный язык описания внешнего...
-
Слайдеры в презентации, Текст в презентации - Построение модели сердца
В AnyLogic существует элемент управления, позволяющий пользователю графически выбирать число из заданного диапазона значений путем перетаскивания...
-
Структура SQL - Банки и базы данных. Системы управления базами данных
Широкое развитие информационных систем и связанная с этим унифицированность информационного пространства привело к необходимости создания стандартного...
-
Области применения экспертных систем - Экспертные системы
Области применения систем, основанных на знаниях, могут быть сгруппированы в несколько основных классов: медицинская диагностика, контроль и управление,...
-
Домашнее использование чаще всего представляет из себя набор сенсоров, собирающих информацию об индивидах, которые напрямую владеют этой сетью. Это могут...
-
Структура ПК - Устройство персонального компьютера
А) Основные устройства Из каких же основных элементов состоит современный ПК? Наиболее "весомой" частью любого компьютера является системный блок. Внутри...
-
"ВВОД И ОФОРМЛЕНИЕ ТЕКСТА" - Презентация "Принтеры"
Создавая презентацию с помощью Мастера автоформы, мы уже вводили текст непосредственно в слайд. Однако во многих случаях работать с текстом гораздо...
-
Резюме - Язык программирования PERL. Сфера применения
В этой главе рассмотрено введение в программирование на языке Perl. Используя рассмотренные здесь концепции, можно писать сложные скрипты CGI на языке...
-
В связи с увеличением числа сотрудников, работающих в компании, а также с расширением рабочего проекта, возникла проблема, связанная с версионностью...
Структура текста Web документа - Составление анимации в web-сайте с применением Macromedia Flash-технологии