Язык гипертекстовой разметки. Технологии web

Internet Engineering Task Force ) опубликовал черновик предложения по стандарту HTML

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

Документ HTML 4 состоит из трех частей:

строка, содержащая информацию о версии HTML ,
объявляющий раздел header/"шапка" (ограниченный элементом HEAD ),
тело, содержащее собственно сам документ.

Тело может содержаться в элементах BODY или FRAMESET . Пробельные символы (пробелы, символы новой строки , символы табуляции и комментарии) могут появляться до или после этого раздела.

Simple page

Hello world!

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

После этого можно видеть открывающий тег элемента html . Это оболочка вокруг всего документа. Закрывающий тег html является последним объектом в любом документе HTML .

Внутри элемента html имеется элемент head . Он содержит информацию о документе ( метаданные ). Внутри head находится элемент title , который определяет заголовок "Simple page" в панели меню .

После элемента head следует элемент body , который является оболочкой, содержащей реальное содержимое страницы - в данном случае только элемент заголовка первого уровня (h1 ), который содержит текст "Hello world!" .

Элементы часто содержат другие элементы. Тело документа всегда будет содержать множество вложенных друг в друга элементов.

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

Синтаксис элементов HTML

Базовый элемент в HTML состоит из двух тэгов вокруг блока текста. Существуют элементы, которые не являются оболочкой для текста, и почти в каждом случае элементы могут содержать подэлементы (как html содержит head и body в примере выше).

Элементы могут также иметь атрибуты , которые могут модифицировать поведение элемента и вводить дополнительное значение .

В этом примере элемент div (раздел страницы, способ разбиения документов на логические блоки) имеет добавленный атрибут id , для которого задано значение masthead . Элемент div содержит элемент h1 (заголовок первого, или самого важного уровня), который в свою очередь содержит некоторый текст. Часть этого текста упакована в элемент abbr (который используется для определения расширения сокращений), который имеет атрибут title , значение которого задано как Hypertext Markup Language .

Многие атрибуты в HTML являются общими для всех элементов, но некоторые являются специфическими для данного элемента или элементов. Все они имеют форму:

ключевое_слово="значение"

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

Атрибуты и их возможные значения определяются в основном спецификациями HTML (http://www.w3.org/TR/html401/index/attributes.html), поэтому - нельзя создавать свои собственные атрибуты. Единственными реальными исключениями являются атрибуты id и class , значения полностью которых предназначены для добавления в документы вашего собственного значения и семантики.

Элемент внутри другого элемента называют "потомком" этого элемента. В примере выше abbr является потомком h1 , который в свою очередь является потомком div . И наоборот, div является "предком" элемента h1 .

Элементы блочного уровня и строковые элементы

Имеется две основные категории элементов в HTML , которые соответствуют типам контента и структуре, которую представляют эти элементы - элементы блочного уровня и строковые элементы .

Блочный уровень означает более высокий уровень элемента, обычно информирующий о структуре документа. Элементы блочного уровня можно представлять как элементы, которые начинаются с новой строки, отрываясь от того, что было перед этим. Распространенными блочными элементами являются параграфы, пункты списка, заголовки и таблицы .

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

Заголовок

Заголовок HTML -документа является необязательным элементом разметки. Первоначально существование заголовка определялось необходимостью именования окна браузер . Это достигалось за счет элемента разметки TITLE :

Это заголовок ... ...

Еще одной функцией заголовка HTML -документа является управление HTTP -обменом через элемент разметки META . При современной практике размещения Веб-узлов компаний на серверах провайдеров администраторы этих узлов могут не иметь возможности управлять программой-сервером. В этом случае для управления обменом остается только одна возможность - через заголовок HTML -документа.

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

Основные теги заголовка - это элементы HTML -разметки, которые наиболее часто встречаются в заголовке HTML -документа, т.е. внутри элемента разметки HEAD :

TITLE (заглавие документа);
BASE (база URL );
ISINDEX (поисковый шаблон);
META (метаинформация);
LINK (общие ссылки);
STYLE (описатели стилей);
SCRIPT (сценарии).

Чаще всего применяются элементы TITLE, SCRIPT, STYLE . Использование элемента META говорит об осведомленности автора о правилах индексирования документов в поисковых системах и возможности управления HTTP -обменом данными. BASE и ISINDEX в последнее время практически не применяются. LINK указывают только при использовании внешних относительно данного документа описателей таблиц стилей.

Элемент разметки HEAD содержит заголовок HTML -документа. Данный элемент разметки не является обязательным. При наличии тега начала элемента разметки желательно использовать и тег конца элемента разметки . По умолчанию элемент HEAD закрывается, если встречается либо тег начала контейнера BODY , либо тег начала контейнера FRAMESET .

Контейнер заголовка служит для размещения информации, относящейся ко всему документу в целом.

Элемент разметки TITLE служит для именования документа в World Wide Web . При выборе текста для содержания контейнера TITLE следует учитывать, что отображается он системным шрифтом , так как является заголовком окна браузера.

Синтаксис контейнера TITLE в общем виде выглядит следующим образом:

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

Заголовок не является обязательным контейнером документа. Его можно опустить. Роботы многих поисковых систем используют содержание элемента TITLE для создания поискового образа документа. Слова из TITLE попадают в индекс поисковой системы. Из этих соображений элемент TITLE всегда рекомендуется использовать на страницах Веб-узла.

Элемент разметки BASE служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной (частичной) форме. Кроме того, BASE позволяет определить целевое окно загрузки документа по умолчанию при выборе гипертекстовой ссылки текущего документа. Наиболее часто BASE встречается на страницах узлов, которые имеют "зеркала". Часть документов основного сервера по разным причинам на "зеркальный" сервер не переносится. В этом случае документ с принудительно заданным базовым URL всегда будет ссылаться на основной сервер .

Тег начала контейнера содержит один обязательный атрибут HREF , и может содержать один необязательный атрибут TARGET . Синтаксис контейнера BASE в общем виде выглядит следующим образом:

Элемент разметки ISINDEX используется для указания поискового шаблона и унаследован от ранних версий HTML . В HTML 4.0 этот контейнер не определен.

Элемент разметки META

META содержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания тела документа , например с помощью атрибута Content-type можно задать перекодировку документа на стороне клиента.

С помощью META также можно задать и другие операторы . Например, запретить кэширование документа. Для запрета кэширования достаточно вставить в заголовок META - тег вида:

В новой версии протокола HTTP (HTTP 1.1) управление кэшированием осуществляется через оператор Cache-Control . Для получения такого же результата, как в случае с Pragma , в заголовке HTML -документа достаточно указать:

Можно запретить хранение документа после пересылки.

Введение

§ 1. Общие сведения о языке разметки гипертекста (HTML)

§ 2. Структура HTML-документа

§ 3. Элементы дизайна Web-страниц

§ 4. Практическое применение языка разметки гипертекста HTLM

Заключение

Литература

Введение

В работе рассматривается язык разметки гипертекста HTML (Hypertext Markup Language); первая спецификация этого универсального и общедоступного языка разметки - HTML была утверждена в 1991 году. HTML стал стандартом и одновременно «корнем» для всех разрабатываемых Web страничек.

Актуальность темы работы определена тем, что на сегодняшний день HTML остается самым универсальным, даже незаменимым средством разметки гипертекста, а, следовательно, и публикации в Интернет. Написание Web страничек на HTML не требует интерпретации исходного кода в двоичный код.

Современные Web-страницы уже не обходятся одним только HTML. Его гармонично дополняют средства динамического HTML: скрипт языки JavaScript и/или VBScript, каскадные таблицы стилей(CSS), иногда присутствуют Java-апплеты. По сути дела, можно вывести для современной Web-страницы: Web-страница=HTML+DHTML(JavaScript/VBScript, CSS, Java-апплеты)+CGI То есть на любой странице должна присутствовать HTML-верстка - расположение элементов дизайна текста и необходимые скрипты - как расширение HTML в области расположения и описания свойств различных объектов. CGI-скрипты могут играть первостепенную роль, формируя всю страницу, наполняя ее необходимыми, обновленными данными или второстепенную роль, - включаясь в нее.

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

1.обзор основных возможностей HTML

2.анализ практического применения HTML (на примере обучающих программ).

§ 1. Общие сведения о языке разметки гипертекста (HTML)

Гипертекст - текст со вставленными в него словами (командами) разметки, ссылающимися на другие места этого текста, другие документы, картинки и т.д. Во время чтения такого текста (в соответствующей программе, его обрабатывающей и выполняющей соответствующие ссылки или действия) вы видите подсвеченные (выделенные) в тексте слова. Если наехать на них курсором и нажать клавишу или на кнопку (глаз) мышки, то высветится то, на что ссылалось это слово, например, другой параграф той же главы этого же текста. В WWW по ключевым словам можно попасть в совершенно другой текст из другого документа, войти в какую-нибудь программу, произвести какое-либо действие и т.д. В Internet в контексте WWW можно получать доступ к чему угодно, к telnet, e-mail, ftp, Gopher, WAIS, Archie, USENET News и т.п. В WWW можно ссылаться на данные на других машинах в любом месте сети, тогда при активации этой ссылки эти данные автоматически передадутся на исходную машину и вы увидите на экране текст, данные, картинку, а если провести в жизнь идею мультимедиа, то и звук услышите, музыку, речь. Это слегка напоминает Gopher, но фактически это принципиально другое и новое. В Gopher имеется жесткая структура меню, по который вы двигаетесь, как вам угодно. Эта структура не зависит от того, что вы делаете, какой документ пользуете и т.д. В WWW вы двигаетесь по документу, который может иметь какую угодно гипертекстовую структуру. Можно свободно организовать структуры меню в гипертексте. Имея редактор гипертекстов, можно создать любую структуру рабочей среды, включая документацию, файлы, данные, картины, программное обеспечение и т.д., и это не будет новое программное обеспечение, а просто гипертекст.

Современные программы разработки Web-серверов, такие как MS FrontPage или Web Pen для Windows, дают возможность даже новичку без всякого штудирования учебников легко создавать готовые странички. При этом cпециалист по созданию Web-сайтов, называемый Web-мастером, берет готовые файлы (тексты, таблицы, графику, базы данных, звук, анимацию, видеофильмы, программы) и с помощью кнопок и команд меню оформляет страницы сайта. Подобные программы, выполняя команды инструментальных и операционного меню, формируют гипертекст WWW-сервера.

Исходные текстовые, табличные и графические и другие объекты включаются в Web-site посредством тегов (tag = ярлык, этикетка). Тег - это последовательность символов, задающая

). положение объекта на странице сайта,

). внешний вид объекта или

). связь данной страницы с другими страницами этого сайта, а также с любым другим сервером.

Тег называют также управляющим маркером, флагом. Программы типа Web Pen сами расставляют теги, поэтому пользователь таких программ может не знать языка разметки гипертекста (HTML = HyperText Markup Language).

Знание HTML необходимо по пяти причинам.
Во-первых, Web-мастер анализирует сайты фирм-конкурентов и просто удачные экземпляры WWW-серверов. Такой анализ, необходимый для совершенствования своего сайта, невозможен без знания языка разметки гипертекста.
Во-вторых, совершенствование своего Web-сервера без полной его переделки (что долго и дорого) удобно производить путем ручной вставки и удаления объектов и тегов.

В-третьих, HTML непрерывно развивается, поэтому программы типа MS FrontPage все время отстают от новейших возможностей языка.

В-четвертых, не следует забывать о достаточно высокой стоимости таких программ.

Наконец, в-пятых, потратив деньги на приобретение программы, нужно еще потратить время на ее освоение.

Используя HTML, Web-мастер определяет структуру гипертекстового документа и вид каждой его страницы. HTML задает синтаксис тегов, в соответствии с которыми программа просмотра отображает содержимое документа: текст, изображения, таблицы и данные других типов. Cами теги программой просмотра не отображаются.

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

) на данном сайте, то есть в папке, содержащей все htm-файлы, графику, звук, анимацию, видеофильмы, программы;

) вне сайта в других в папках на данном компьютере;

) в системе World Wide Web, то есть на других Web-серверах;

) в Internet на серверах других типов(FTP, Gopher).

Применение механизма гипертекстовых ссылок создает всемирное единое информационное пространство, из которого сотрудники торговой фирмы получают нужные им сведения. Стандарт HTML, как и все другие стандарты, имеющие отношение к Web, разрабатывается под эгидой консорциума World Wide Web Consortium (W3C). Спецификации стандартов и проекты новых предложений можно найти по адресу #"justify">Записанные в методичке HTML-тексты содержат сведения, необходимые для создания Web-сайтов. Это позволяет увеличить количество информации, полезной для студентов. Принятая форма изложения имеет еще одно достоинство: обучающийся привыкает читать htm-файлы. Это необходимо для анализа и совершенствования готовых сайтов.

гипертекст hypertext markup language

§ 2. Структура HTML-документа

документ состоит из текстов, графики, таблиц и других объектов, которые представляют собой содержимое документа. Программа просмотра использует при этом теги, которые записаны в HTML-документе для задания структуры расположения объектов и их внешнего вида. Чаще всего HTML-теги записываются парами (начальный и конечный теги), между которыми размещаются текст и другие объекты документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/), так называемый слэш. Оформление HTML-документа просто: он начинается тегом и заканчивается тегом. Имя тега может быть записано как строчными, так и прописными буквами.

Запустить приложение Блокнот, используя кнопку Пуск на панели задач

ПУСК => ПРОГРАММЫ => СТАНДАРТНЫЕ => БЛОКНОТ

Разместить на рабочем столе одновременно два окна: окно MS Word с данной методичкой и окно Блокнота.

Набрать в поле редактирования Блокнота следующий текст:

Данную программу, как и все последующие, можно не набирать на клавиатуре,а скопировать в поле редактирования Блокнота из этой программы используя команду операционного меню ВИД => ИСТОЧНИК. Неиспользуемые в программаж сноски набраны черным шрифтом.

Здесь записан текст, появляющийся на экране при открытии этого документа.

А этот текст будет записан курсивом.

Если времени не хватает для набора текста, то прочтите Блокнотом файл ris1.htm, находящийся в том же каталоге, из которого Вы прочли данную методичку.

В окне рабочего каталога выполнить двойной щелчок левой кнопкой мыши по значку только что созданного документа ris1a.htm и с помощью MS Internet Explorer просмотреть получившийся документ.

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

§ 3. Элементы дизайна Web-страниц

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

Заголовок страницы. Заголовок Web-страницы представляет собой информацию. заключенную внутри "цемента (секции) HEAD.

это элемент TITLE определяет текст, который появляется в заголовке окна броузера во время просмотра страницы. Этот текст не только служит подсказкой, но может использоваться и поисковыми машинами для анализа страниц. Су шествует три способа для поиска страниц в Интернете па основе текстовых данных: по ключевым словам элемента МЕТА, по тексту, разметенном) на странице. и по строке заголовка внутри элемента TITLE.STYLE -и - LINK -. Тег STYLE тоже должен располагаться внутри элемента HEAD, Если вы хотите разобраться, какие нестандартные форматы используются на странице, надо просмотреть содержимое этого элемента. В нем будут указаны необходимые форматы. Если таких форматов нет, значит стили страницы записаны в отдельном файле. Ссылка на такой файл должна находиться в элементе LINK.Секция заголовка может содержать несколько цементов МЕТА, каждый из которых отвечает за определенный набор параметров. Использование элементов МЕТА не является обязательным, но некоторые настройки могут быть весьма важны. Так, например, известно, что броузер в некоторых случаях способен автоматически определить вид кодировки страницы. Пользователь, работая с броузером, может выбрать в меню определенную кодировку. Чтобы исключить неопределенность при просмотре конкретной страницы, на ней целесообразно разместить указание на кодовую страницу.Информация, сосредоточенная в элементах МЕТА, определяет общие настройки Web-страницы и называется профилем. Профили можно хранить в отдельных файлах и присоединять к определенной странице при помощи специального атрибута элемента HEAD: <HEAD prorIle=«lJRL»> Стандартные атрибуты. Существует ряд атрибутов, которые moist использоваться во многих элементах. Часть этих атрибутов очень важна для конструирования Web-страниц, а часть подходит только для решения определенных задач.Атрибут id выполняет функции уникального имени элемента. В зависимости от типа элемента, этот атрибут выполняет различные функцииАтрибут classid задает программу или объект, которые могут использоваться в определенных элементах.Атрибут style может использоваться со многими элементами. Он предназначен ятя определения формата конкретного элемента и может принимать самые разные значения.Похожие функции выполняет атрибут class. Его можно указывать, если в секции HEAD расположен элемент STYLE или использована ссылка на каскадную таблицу стилей (см. ниже раздел «Таблицы стилей»).Атрибут align используется для выравнивания текста, объектов или элементов целиком. Выравнивание может выполняться относительно границ окна, рамки таблицы и т. д. Каждый элемент позволяет указывать определенные значения для этого атрибута. В общем случае значения могут быть такие:left - выравнивание по левому краю;right - выравнивание по правому краю;justify - выравнивание по ширине (для текста);center - выравнивание по центру (по горизонтали):middle - выравнивание по центру (по вертикали):top - выравнивание по верхней границе;bottom - выравнивание по нижней границе.Атрибут lang определяет, на каком языке набран текст внутри текущего элемента: lang - «код языка» Форматирование текста. Текст - единственный объект Web-страницы, который не требует специального определения. Иными словами, произвольные символы интерпретируются по умолчанию как текстовые данные. Но для форматирования текста существует большое количество элементов. Большинство из них, кроме специальных, поддерживает стандартные атрибуты: id, class, lang. dir, title, sty le и атрибуты событий.Изначально в HTML было введено меньше возможностей для форматирования текста, чем в обычные текстовые редакторы. В результате авторам гипертекстовых документов приходилось прибегать к различным ухищрениям, чтобы придать тексту заданный вид. Сейчас положение изменилось, но все дополнительные возможности осуществляются за счет применения таблиц стилей. Например, только с помощью свойства text-indent можно задать величину отступа первой строки абзаца.Форматировать текст можно и с помощью традиционных элементов: выделять фрагменты курсивом, полужирным, выбирать шрифт и т.д. Рассмотрим эти элементы. Для них могут быть использованы стандартные атрибуты id. class, lang, dir. title, style, атрибуты событий, а также атрибуты, определяющие уникальные свойства определенных элементов.Элемент абзаца paragraph - один из самых полезных. Он позваляег использовать только начальный тег, так как следующий элемент Р обозначает не только начато следующего абзаца, но и конец предыдущего. В тех случаях, когда по смыслу необходимо обозначить завершение абзаца можно использовать и конечный тег. В некоторых случаях начальный тег удобно ставить в конце строки: он не только обозначит конец абзаца но и выполнит функцию тега (разрыв строки). Вместе с элементом абзаца можно<ЕМ> </ет> и <DFN> </dfn> элементы, обозначающие выразительность (emphasis) данного фрагмента текста и определение чего-либо (definition). Оба элемента аналогичны но своему действию элементу 1, то есть в большинстве случаев позволяют выделить текст курсивом.С точки зрения дизайна документа эти элементы ничем особенным не отличаются. Они могут пригодиться только для того, чтобы единообразно выделить одинаковые по назначению (или смыслу) фрагменты текста. находящиеся в разных частях документа или даже на разных страницах. Разработчик, в этом случае, не может точно знать, какой именно шрифт будет использован: это определяется каждым броузером по-своему. Но он может быть уверен, что все фрагменты текста будут отформатированы одинаково. В языке можно найти еще несколько элементов, которым можно дать такую же характеристику.Эти и другие элементы содержания могут иметь стандартные атрибуты: id. class, lang, dir, title, style, атрибуты событий.BLOCKQUOTED blockquote- -обозначение цитаты. Этот элемент требует наличия конечного тега Текст не претерпевает никаких изменений, но абзац располагается с отступом. К кавычкам этот элемент тоже не имеет никакого отношения: если в цитате имеются кавычки, они должны быть проставлены явным образом. Визуально форматирование этим элементом заключается только в отступе слева, поэтому элемент может быть использован в самых разных случаях. Этот элемент имеет собственный нестандартный атрибут, который позволяет указать источник цитирования:=« Л0ресоокулшта->крва1кттн11ка""11ре;1!ю.гаж!ся, что адрес задается в виде URL. Таблицы стилей (style sheets) являются одним из самых эффективных нововведений HTML 4. Они позволяют изменять свойства элементов в соответствии с желаниями разработчика страницы. К обычным таблицам таблицы стилей не имеют никакого отношения. В общем случае шаблон таблицы стилей выглядит так:Элемент. имя стиля (Свойство 1: значение; свойство 2: значение:... j) В результате для определенного элемента задается набор свойств (ассортимент которых весьма значителен). Тем самым снимаются ограничения HTML, а для дизайнера (автора страницы) открывается широкое поле деятельности. Одна из важнейших особенностей стилевого оформления заключается в том. что преобразованию подвергаются все элементы, заключенные внутри цемента с заданным стилем. Так. определив некоторый стиль для элемента BODY, вы присваиваете его всему содержимому Web-страницы. По аналогии с объектно-ориентированными языками программирования это качество называется наследованием.<МЕТА http-equi\=«Content-Style-Type» content-»text/css»> Броузер получит информацию, какой язык определения стилей использован. «CSS» в данном случае означает «каскадная таблица стилей» (Cascading Style Sheets). Это одновременно стандарт и язык, расширяющий традиционный HTML. В настоящее время существует две спецификации (CSS1 и CSS2), в которых перечислены свойства элементов. «Эти свойства очень похожи на атрибуты, но есть два различия: свойств намного больше и правила синтаксиса несколько иные.В этом случае для всей страницы создаются новые стили для заголовков первого и второго уровня. Для элементов CODE выбирается шрифт и цвет фона.Списки (list) были введены в HTML, несомненно, под влиянием успеха текстовых редакторов. Список отличается от обычного текста прежде всего тем, что пользователю не надо думать о нумерации его пунктов: эту задачу программа берёт на себя. Гели список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения, В результате список принимает удобочитаемый, «фирменный» вид. Теги для создания списков можно условно разделить на две группы: одни определяю! общий вид списка (и позволяют указывать атрибуты), а другие задают его внутреннюю структуру. В списках можно использовать стандартные атрибуты. Существует несколько разновидностей списков.Самым простым является ненумерованный список (unordered list). Его шаблон имеет вид <L1>ПУНКТ<L!> ПУНКТ!<L1> ПУНКТ 1<1.1> ПУНКТ1 <ДЛ.> Элемент UL является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Элемент LI обозначает каждый из пунктов.Тго структура нумерованного списка (ordered list) похожа на предыдущую: <OL><LI>ПУHKTl<LI> ПУНКТ1<[Л>ПУНКТ1<1Л> ПУНКТ 1</OL> Один из самых важных элементов языка, обеспечивающий создание гиперссылок. Чаще всего используется такой шаблон: Или такой: <А hre>f=«Aдpec ссылки» <IMCi «гс= «Ссылка на рисунок» </а> Первый шаблон используется в том случае, когда гиперссылка встречается в тексте. Атрибут href может указывать на ресурс Интернета, файл на локальном диске или на метку внутри текущей страницы. Текст, расположенный внутри элемента А, представляет собой видимую часть гиперссылки. На нем должен щелкнуть пользователь, чтобы осуществить переход. Броузер выделяет этот фрагмент цветом, а после использования гиперссылки меняет цвет, чтобы обеспечить подсказку.Второй шаблон задается в том случае, когда видимая часть гиперссылки представляет собой рисунок. Если для последнего определена рамка, то она тоже меняет цвет после использования гиперссылки. Если ссылка указывает на рисунок, который находится на локальном диске, она обязательно должна начинаться со слова file. то есть содержать указание на протокол.Кодовое слово, стоящее в начале URL, обозначает так называемую схему доступа. Она определяет тип сервера, доступный при помощи данной ссылки. Для пользователя это представляется как доступ к одной из разновидностей Интернета, В этом смысле можно сказать, что Интернет - это как бы несколько сетей в одной. У каждой из этих частных сетей существуют свои правила доступа достоинства, недостатки, свои приверженцы и противники. Но все пользователи используют одни и те же каналы связи. Похожая ситуация наблюдается и в обычных телефонных сетях. Они могут служить для связи голосом, передачи факсов, межкомпыотерной связи и т.д.как самая современная система, должна обеспечивать совместимость с более старыми системами, поэтому от старых протоколов не отказываются, а стараются приспособить их к современным нуждам (например ftp). Существуют следующие схемы доступа:е -доступ к файлу на локальном диске;-доступ к архивам файлов но прогокол> передачи файлов (tile transfer protocol):- доступ к WWW;- отправка сообщения по электронной почте;- доступ к новостям USENET:- доспи к новостям USENET по протоколу NNTP:- подключение но протоколу telnet:. - подключение к системе поиска WAIS. Когда гиперссылка используется для указания адреса электронной почты, её выбор обеспечивает не переход к новому документу, а запуск диалога для отправки сообщения указанному адресату. Обычно такую ссылку размешают в конце страницы для обеспечения связи с Web-мастером или автором страницы.В том случае, когда используются переходы внутри текущей страницы, на ней должны быть расставлены метки.В больших сайтах часто используются метки для перехода к определенной части некоторой страницы: <А name-» http: Адрес Файл. 1пт1#мегка»> </а> Текст подсказки <А Ьге1=«£метка»> Текст для щелчка </а> Для элемента А предусмотрены различные атрибуты. Атрибут hreflang, по аналогии с атрибутом lang. позволяет указать язык, который используется на адресу мой странице.В структуру гиперссылок заложена возможность создания сложных текстовых документов, доступных через Интернет. Предполагается, что такие документы будут состоять из многих HTML-страниц с перекрестными ссылками. Чтобы пользователь мог эффективно управлять документом, броузер должен оптимизировать работу с отдельными страницами, например, загружать страницы, которые могут понадобиться пользователю, в фоновом режиме. Для этого необходимо снабдить страницы информацией о назначении ссылок.Для решения этой задачи гиперссылки подразделяются на прямые (forward) и обратные (reverse). Ссылка, вызывающая переход с текущей страницы, называется прямой. Соответственно, при помощи броузера или другой ссылки может быть выполнен и обратный переход. Для определения более точного типа ссылки используются два атрибута (один для прямых. другой - для обратных ссылок). Определены следующие стандартные типы ссылок: alternate - другая версия документа; sty lesheet - таблица стилей в виде отдельного файла;Фрейм - это определенная область, в которую грузится страничка. Таким образом то, что вы видите, собирается из нескольких HTML. Собственно, примерно то же осуществляет и SSI, и PHP и много других языков программирования, скриптов и т.п.Фреймы придуманы еще на заре становления HTML для облегчения создания страничек большого размера. Фреймы позволяли хранить, например, меню в отдельном файле, и разом - не перелопачивая десятки, сотни и у некоторых даже тысячи html-страничек ради того, чтобы добавить или убрать пункт меню. Очень удобно, казалось бы..., но - система фреймирования почему-то не всегда (я бы даже сказал, - почти никогда!) правильно воспринимается большинством поисковиков. Рейтинг фреймовых страничек в большинстве поисковиков меньше, чем точно тех же страничек, с совершенно тем же содержимым, но со встроенным меню без фреймовЭксперимент со страничками показал, что в самом низу списка оказалась страничка на фреймах, выше всех была страничка на SSI технологии и PHP инклюдах. По сути, эти две технологии, с успехом заменившие устаревшие фреймы, показали равную находимость и удобство. Не говоря уж о куда большей простоте использования. Но большинство разбирающихся в этих вопросах программеров дружно указали на превосходство PHP перед SSI в плане удобства их использования для сервера.Графика делает сайт привлекательным и понятным. В файле grafika.htm записан следующий текст.Тег <img src='/download-soft/yazyk-gipertekstovoi-razmetki-tehnologii-web/' loading=lazy>записывают в том месте, которое предназначено для размещения диаграммы, графика, рисунка или фотографии. В данном примере рисунок появится в левом верхнем углу экрана, так как он - единственный элемент тела HTML-документа.Справа от знака равенства записывают имя gif-файла, хранящего графический объект. В данном примере это имя horse.gif записано без указания пути, так как файлы horse.gif и grafika.htm находятся в одном каталоге (в одной папке). Если бы файл horse.gif находился в папке dir1, вложенной в папку, содержащую файл grafika.htm, то справа от знака равенства следовало бы записать dir1/horse.gif.Для размещения графики на сайте необходимы gif- или jpg-файлы. Но графический редактор Paint, поставляемый фирмой Microsoft, не позволяет создавать файлы с расширением.gif или.jpg. Поэтому можно использовать, например, графический редактор LView Pro, работающий под операционными системами Microsoft Windows 95 и Windows NT. Редактором LView Pro следует прочесть bmp-файл, созданный посредством Paint, и сохранить его как gif- или jpg-файл.Создадим сначала bmp-файл. Для этого нужно предварительно уяснить, а затем выполнить следующие действия.Запустить приложение Paint, используя кнопку Пуск на панели задач: ПУСК => ПРОГРАММЫ => СТАНДАРТНЫЕ => Paint Вернуться в окно текстового процессора MS Word, щелкнув мышью по кнопке на панели задач.Создать новое окно текстового процессора MS Word, используя команду операционного меню {Окно, Новое окно} или щелкнув мышкой по кнопке инструментального меню Стандартное.Командой операционного меню {Окно, Упорядочить все} разместить на дисплее сразу два окна: с методичкой и новое. Курсор должен находиться в новом окне. Командой операционного меню MS Word {Вставка, Рисунок...} открыть диалоговую панель Вставить рисунок.Из списка wmf-файлов в левой части диалоговой панели выбрать щелчком мыши файл 1stplace.wmf. Рассмотреть рисунок, появившийся в правой части диалоговой панели.Повторяя действия, указанные в пункте 6, просмотреть несколько рисунков. Выбрать понравившийся многоцветный рисунок, щелкнув по кнопке OK в левой нижней части диалоговой панели. Этот рисунок появится в новом окне MS Word.Расположить указатель мыши на рисунке и щелкнуть левой клавишей мыши. Скопировать рисунок в буфер обмена, используя команду операционного меню {Правка, Копировать} или щелкнув мышкой по кнопке инструментального меню Стандартное.Закрыть окно с рисунком, используя клавишную команду . Сделать максимальными размеры окна с методичкой, щелкнув мышью по кнопке максимизации размеров этого окна.Перейти в окно графического редактора Paint, щелкнув мышью по кнопке на панели задач.Вставить рисунок из буфера обмена, используя команду операционного меню Paint {Edit, Paste}.Редактором LView Pro прочтем bmp-файл, созданный посредством Paint, и сохраним его как gif-файл, уяснив и выполнив для этого следующие действия.Запустить проводник, используя кнопку Пуск на панели задач:ПУСК => ПРОГРАММЫ => ПРОВОДНИК На диске D: открыть папку LWPRO и запустить редактор LView Pro двойным щелчком на имени файла Lviewpro.exe.Прочесть bmp-файл, созданный посредством Paint, используя команду операционного меню LView Pro {File, Open}.Цвета в документах HTML могут задаваться двумя способами - указанием кода цвета или указанием названия цвета на английском языке. При первом способе код цвета записывается в виде шестнадцатеричного числа, содержащего шесть цифр: первые две цифры задают интенсивность красного цвета, вторые - зеленого, третьи - синего. При втором способе используются следующие названия цветов: black (черный), maroon (темно-красный), green (зеленый), olive (оливковый), navy (синий), purple (фиолетовый), teal (зеленовато-синий), gray (серый), silver (серебристый), red (красный), lime (известковый), yellow (желтый), blue (голубой), fuchsia (ярко-малиновый), aqua (морской волны) и white (белый).Создадим документ, содержащий таблицу, ячейки которой окрашены в разные цвета. Фон документа установим черным. Документ наберем (или отредактируем) Блокнотом и запишем в рабочую папку в файл colortab1.htm. <TH> - это так называемый тег заголовка таблицы. Фактически он объявляет строку, в которой должен быть записан заголовок таблицы. В данном случае он имеет атрибут COLSPAN, определяющий, сколько ячеек из следующей строки должен перекрыть этот заголовок. Тег определяет установки свойств шрифта. В данном случае устанавливается цвет текста в строке заголовка. Вообще говоря, в тегах можно использовать несколько атрибутов, но тег является исключением - для каждого изменения свойств текста используется отдельный тег , например:Создайте в рабочей папке документ font1.htm, в тело которого включите текст приведенного выше примера и просмотрите результат. Ускорить выполнение задания можно путем копирования этого примера в текст, создаваемый Блокнотом. Для этого следует выделить пример в методичке, протащив указатель мыши (при нажатой ее левой клавише) по полосе выделения слева от трех строк примера. Используя как образец документ colortab1.htm, создайте в рабочей папке документ table3.htm, содержащий таблицу с заголовком "Координаты ячеек" и с 16-ю клетками (4 строки по 4 ячейки), в которых записаны координаты этих клеток по принципу С1К1 (где С - строка, К - колонка с соответствую-щими номерами). Фон документа должен быть сине-зеленым, фон строки заголовка - белым, текст строки заголовка - желтым. Текст в ячейках таблицы должен быть черным на сером фоне. Ячейки таблицы должны иметь границы. § 4. Практическое применение языка разметки гипертекста HTLM Основным принципом формирования интерактивной обучающей среды при всех концепциях обучения, как показывает практический опыт, является гипертекстовый принцип структурирования и представления информации. Разрабатываемая в литературе теория гипертекста, а также имеющийся опыт по созданию гипертекстовых структур позволяют наметить ряд его сущностных, структурно значимых понятийных признаков. Вспомним историю формирования этого явления. Первоначально гипертекстовые технологии привлекли внимание преподавателей как средство интеграции текстовой информации и информации, представляемой в других модальностях - мультимедиа (звук, видео, анимация и т.д.). Затем авторы - разработчики компьютерных обучающих программ открыли для себя гипертекст как средство моделирования когнитивных процессов и тем самым как новое средство управления этими процессами. Симптоматично, что сама идея гипертекста (хотя и без введения именно этого термина) была впервые, как утверждается во всех западных учебниках по истории этого понятия и как принято сейчас считать в интернетовском информационном сообществе, изложена в статье Ванневара Буша, озаглавленной следующим образом: «As we may think»; именно от этой работы начинается отсчет эпохи гипертекста как некоторого особого явления в теории информации, лингвистике и когнитивной психологии, а также в сфере художественного слова нового типа (hypertext fiction).В настоящее время термин «гипертекст» применяют к разным объектам: 1) так называют особый метод построения информационных систем, обеспечивающий прямой доступ к данным с сохранением логических связей между ними; 2) это определенная система представления текстовой и мультимедийной информации в виде сети связанных между собой текстовых и иных файлов; 3) это особый универсальный интерфейс, отличительными чертами которого является его интерактивность и необычайная дружелюбность по отношению к пользователю. Разработка гипертекстовых систем для целей обучения была начата за рубежом в 80-е годы, аналогичные работы в России до последнего времени находились в пилотной стадии. В 2004 г. у нас наблюдается экспоненциальный рост числа гипертекстовых систем, предлагаемых для дистанционного обучения, что соответствует мировым тенденциям в этой области.Учебные материалы, подготовленные на основе мультимедийных гипертекстовых технологий, обладают рядом очевидных преимуществ как для учителя, обеспечивающего, направляющего и контролирующего процесс обучения, так и для обучаемого: прежде всего, это принципиально новые возможности презентации учебного материала, связанные с использованием зрительной и аудитивной наглядности. Необходимо также отметить, что сама гипертекстовая структурированность учебного материала обладает собственным дидактическим значением, так как является значительно более гибкой формой подачи информации, позволяющей в максимальной степени учитывать индивидуальные потребности обучающегося. По сути дела каждое обращение к автоматизированному обучающему курсу, основой которого является база данных, выполненная в гипертекстовом формате, является процессом создания своего собственного учебного текста, наиболее адекватно соответствующего данной актуальной задаче, вследствие чего процесс обучения приобретает творческий аспект. Устанавливая логические связи информационных блоков, выстраивая информацию, следуя собственной логике ее осмысления, обучающийся по сути дела становится соавтором, и, может быть, это и становится наиболее привлекательной стороной использования подобных курсов в процессе обучения. Однако необходимо подчеркнуть, что ключевой проблемой в такой системе становится проблема организации «навигации», свободная или навязываемая автором-разработчиком стратегия исследования данного информационного поля, которая к тому же должна решать и собственно дидактические задачи. В исследованиях по теории гипертекста вопросы организации «чтения» гипертекстовой информации рассматриваются в совокупности с формальным анализом структуры гипертекстового поля, возможностями технических средств управления «навигацией», а также особенностями когнитивных стратегических предпочтений человека (вновь подчеркнем, что последнее остается до сих пор наименее изученной областью). В качестве достаточно хорошо проработанных формализованных стратегических моделей часто выступают модели, лежащие в основе систем автоматизированного поиска и систем автоматической обработки запросов.а) на первом, самом высоком уровне, используется жанр максимально коротких аннотаций для всех базовых терминологических понятий,б) на следующем уровне дается предметное истолкование тех или иных понятий,В теории гипертекста для формализации этих параметров была разработана специальная гипертекстовая метрика, которая включает два базовых параметра: степень информационной компактности и индекс стратификации. Высокий уровень компактности характеризует такие гипертекстовые структуры, в которых на любой из информационных блоков можно с легкостью попасть из любого другого блока (обычно это обеспечивается многочисленными перекрестными ссылками). Чрезмерно высокая компактность может привести к полной дезориентации обратившего к гипертексту читателя, а также чрезвычайно затрудняет процесс отслеживания преемственности понятий. Низкая информационная компактность чревата выпадением из поля зрения читателя гипертекста отдельных узлов, которые могут нести важную для формирования каких-то понятий информацию или же вообще делать отдельные узлы во многих случаях недоступными. Индекс стратификации позволяет оценить допустимую степень свободы выбора последовательности чтения гипертекстового документа. Именно этот последний параметр представляется нам особенно значимым параметром для такой функционально-стилистической разновидности гипертекста, как обучающий гипертекст.В подготовленных учебных компьютерных материалах было экспериментально получено оптимальное количество допустимых ссылок в расчете на один абзац текста (не более 1 - 2 ссылок), а также рекомендуемый объем текстовой информации: при выводе на экран компьютера он должен занимать не более 1,5 или 2-х экранов. Допустимая и рекомендуемая иерархическая глубина связей устанавливалась в соответствии с данными теории восприятия информации и когнитивной лингвистики. Предполагалось, что в зависимости от индивидуальных когнитивных стилей усвоения информации она может колебаться от 2 до 5 шагов. В ряде психологических и психолингвистических работ, посвященных теории гипертекста, были предприняты попытки выявления базовых стратегий, которые оказывались предпочтительными для разных групп людей; полученные данные позволяют наметить три основных типа поведения в гипертекстовом пространстве, их принято в англоязычной традиции называть depth-first navigation, breadth-first navigation и два варианта промежуточной стратегии (random navigation), совмещающей в определенных долях два первых подхода). Однако нельзя не отметить, что все без исключения исследователи подчеркивают необходимость дополнительных экспериментов в этом направлении для установления степени достоверности полученных данных. Несомненно, этот вопрос нуждается в дальнейшем, более глубоком изучении, поэтому в данной работе руководствовались преимущественно интуитивными представлениями об оптимальной структуре связей, которые были продиктованы спецификой лежащего в основе гипертекста материала.Контрольное тестирование и устный опрос являются одними из наиболее широко используемых и хорошо разработанных средств проверки знаний в высшем образовании. Классический тест представляет собой последовательность достаточно простых вопросов. На каждый вопрос имеется простой ответ, который может быть формально проверен и оценен как правильный, неправильный или частично правильный (например, неполный). Вопросы обычно классифицируются по типам соответственно типу ожидаемого ответа. Классические типы вопросов делятся на вопросы типа [да/нет], вопросы типа [много вариантов/один ответ] (МВ/ОО), вопросы типа [много вариантов/много ответов] (МВ/МО) и вопросы открытого типа с текстовым или числовым ответом. Более продвинутые типы вопросов включают вопросы на соответствие, вопросы на правильную последовательность, вопросы на указывание (ответ - одна или несколько областей на рисунке), а также графические вопросы (ответ - простой граф). Кроме этого, каждая предметная область может иметь некоторые специфические типы вопросов.Варианты поддержки на стадии создания обычно зависят от технологии, используемой для хранения отдельного вопроса в системе. В настоящее время, нам известно два различных способа хранения вопроса: в формате представления и во внутреннем формате. В контексте Web-основанного обучения, хранение вопроса в формате представления означает его хранение как части HTML-кода (обычно в виде HTML-формы). Такие вопросы могут также называться статическими вопросами. Они являются «черными ящиками» для WBE-системы. Система может представлять статические вопросы только «как есть» (в том виде, в котором они были созданы). Создание вопросов этого типа часто не поддерживается WBE-системой, так как это может быть сделано в любом HTML-редакторе.Тип интерактивной технологии, используемой для получения ответов обучаемого, является одной из наиболее важных характеристик WBE-систем. Он определяет всю функциональность на стадии выдачи вопросов, а также влияет на стадии создания и оценки вопросов. В настоящее время, различают пять технологий: HTML-ссылки, HTML/CGI-формы, скриптовые языки, внедрение (plag-in) и Java.ссылки - самая простая технология взаимодействия, реализующая набор возможных ответов как список HTLM-ссылок. Каждая ссылка связана с определенной страницей обратной связи. При использовании этого подхода возникает две проблемы: сложность создания вопросов (логика вопроса должна быть жестко встроена в гипертекст курса) и поддержка всего двух типов вопросов: [да/нет] и [МВ/ОО]. Эта технология использовалась в основном на заре Web-основанного обучения, когда более продвинутые технологии взаимодействия, такие как CGI, JavaScript или Java еще не были разработаны.Наиболее популярной технологией Web-тестирования, используемой в настоящий момент многочисленными коммерческими и университетскими системами является комбинация HTML-форм и CGI-скриптов. HTML-формы чрезвычайно удобны для представления основных типов вопросов. Вопросы типа [да/нет] и [МВ/ОО] представляются наборами иконок, списками выбора, всплывающими меню. Вопросы [МВ/МО] представляются списками множественного выбора или наборами переключателей. Вопросы открытого типа реализуются в виде полей редактирования. Более продвинутые вопросы, такие как вопросы на соответствие или на правильную последовательность, также могут быть реализованы, при помощи форм. Кроме того, скрытые поля могут использоваться для хранения дополнительной информации о тесте, в которой может нуждаться CGI-скрипт. Значительные преимущества от использования технологии «стороны сервера» (к которой относится и технология «форма/CGI») и схожей с ней технологии «карты стороны серверной» возникают при реализации графических вопросов на указывание. Заключение По итогам решения задач работы получены следующие результаты:HTML - это обычный, текстового вида файл, в котором то, что мы обычно видим на страничках, перемежается невидимым для просмотра из броузера кодом. Вот этот-то невидимый код и есть язык разметки HTML.HTML - это не язык программирования, - он служит лишь для разметки странички, придания определенного вида тому или иному элементу, будь то таблица, текст или картинки.Осуществляется это путем присвоения каждому элементу своих параметров, которые распознает броузер. Параметры эти могут быть заданы как для одного, так и для группы или типа элементов. Тип элементов может быть таким: таблицы, ячейки, ссылки, текст и т.п. То есть что-то, что можно назвать одним термином. Отдельные свойства можно присваивать и выбранным элементам персонально. Основная причина появления в последнее время большого количества Web-серверов заключается в том, что они сравнительно просты в установке и становятся все большим инструментом, который можно использовать в бизнесе. Вторая причина - появление большего количества улучшенных HTML-редакторов и конвертеров текста, позволяющие создавать новые Web-страницыВ отношении сферы применения можно сказать следующее. Будущее Web также связанно с увеличением скорости передачи данных в Интернет, так как Web неразрывно связан с Интернет.Вероятно, останется проблема несовместимости между броузерами и Web-серверами, так как компания Netscape Communications несколько расширила HTML, из-за чего не все броузеры отображают документы, написанные в новом формате HTML. Литература 1.Бройдо В.Л. Вычислительные системы, сети и телекоммуникации СПб, Питер 2002- 464 с. 2.Информатика /под редакцией С.В.Симоновича. СПб, Питер 2001- 400 с. .Кирмайер М. Информационные технологии. СПб.: Питер, 2003 - 443 с. .Мэтьюз Дж. Web - сервер. СПб.: Символ, 1998 - 356 с. .Олифер В. Г., Олифер Н.А. Компьютерные сети. СПб.: Питер, 2005 - 864 с .Олифер В. Г., Олифер Н.А. Сетевые операционные системы. СПб.: Питер, 2003 - 539 с. МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ СХІДНОУКРАЇНСЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ імені Володимира Даля Кафедра компьютерных наук По дисциплине Компьютерній дизайн и мультимедия СтудентБолдакова И.В. 1. Вступление 3.1 HTML-редакторы Литература <h1>1. Вступление</h1> World Wide Web - глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы - Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW.Вся информация в Web-браузере отображается в виде Web-страниц. Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети. Пользователю приятно посещать те Web-страницы, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне Web-браузера. Создать Web-страницу непросто, но наверно каждый человек хотел бы попробовать себя в роли дизайнера. И я, в данном случае, не являюсь исключением, потому и выбрала такую тему для своей курсовой работы. В своем реферате я сделала попытку разобраться в том, что необходимо знать и уметь для создания Web-страницы, какое программное обеспечение является инструментарием создания Web-страниц и как его эффективно использовать. Также в данной работе мною рассмотрены основы языка программирования Web-страниц - HTML, который является общепринятым стандартом WWW. Это даст нам возможность ознакомиться со структура Web-страницы и приемами ее правильного оформления. А так же при помощи CMS Joomla мы рассмотрим создание сайта. <h1>2. Рассмотрим язык гипертекстовой разметки HTML</h1> Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы. Можно работать на Web без знания языка HTML, поскольку тексты HTML могут создаваться разными специальными редакторами и конвертерами. Но писать непосредственно на HTML нетрудно. Возможно, это даже легче, чем изучать HTML-редактор или конвертер, которые часто ограничены в своих возможностях, содержат ошибки или проводят плохой HTML код, который не работает на разных платформах. Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Opera, Google Chrome, Internet Explorer или другими браузерами. Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо. HTML был ратифицирован World Wide Web Consortium. Он поддерживается всеми браузерами. Поскольку HTML-документы записываются в ASCI I-формате, то для ее создания может использован любой текстовый редактор. Обычно HTML-документ - это файл с расширением.html или. htm, в котором текст размечен HTML-тегами (англ. tag - специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Веб-документа. Текст самих тегов Веб-браузером не отображается. Все теги начинаются символом "<" и заканчиваются символом ">". Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация: Информация Здесь стартовым тегом является тег А завершающим - . Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках <> стоит символ "/ " (слэш). Браузер, читающий HTML-документ, отображает его в окне, используя структуру HTML-тегов. В каждом HTML-документе должны присутствовать три главных части: A) Объявление HTML; B) Заголовачная часть; C) Тело документа. A) Объявление HTML <HTML> и </HTML>. Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег <HTML> (в самом начале документа), а последним - </HTML> (в самом конце документа). <HTML> </HTML> B) Заголовочная часть. <HEAD> и </HEAD>. Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках "Избранное (BookMark)". Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами <TITLE> и .

Моя первая страница

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

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

Моя первая страница ..........

Теперь мы можем написать HTML-код нашей странички:

Моя первая страница Здесь будут мои страницы!

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

Для начала новой строки используется тег
(сокр. от англ. break - прервать). Этот тег приводит к отображению браузером дальнейшего текста с начала следующей строки. Закрывающий для него тег не используется. Он удобен, если требуется с какого-то места писать с новой строки без начала нового абзаца, например, в стихотворении. Повторное его использование позволяет вставить одну или несколько пустых строк, отодвинув следующий фрагмент страницы вниз.

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

(англ. paragraph - абзац). Этот тег, кроме начала новой строки, вставляет одну пустую строку. Но многократное повторение

В отличие от
, не приведет к появлению нескольких пустых строк, останется все та же одна пустая строка.

Внутри скобок тега кроме его названия могут размещаться также атрибуты (англ. atributes - атрибуты). Они отделяются от названия и между собой пробелами (одним или несколькими), а пишутся в виде имя_атрибута ="значение ". Если значение не содержит пробелов, то кавычки могут быть опущены, но так делать не рекомендуется. Тег

Может содержать атрибут ALIGN, определяющий выравнивание абзаца. По умолчанию абзац выравнен влево ALIGN="left". Возможны также выравнивания вправо ALIGN="right" и по центру ALIGN="center". При использовании атрибутов, после форматируемого текста следует использовать закрывающий тег

. Если его нет, то новый тег

Означает закрытие предыдущего, соответственно вложенные

Невозможны. Выравнить текст по центру возможно также тегом

Теперь мы можем поместить на нашу Web-страницу некоторый текст с различным выравниванием:

Моя первая страница

Здесь будут мои личные страницы!

На них Вы сможете найти: - рассказ обо мне и о моих увлечениях; - мои фотографии.

С одной из моих страниц можно будет
отправить мне электронное письмо.

3. Инструментарий для создания Web-страниц

3.1 HTML-редакторы

Каждый выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad).

Текстовые редакторы возможно использовать только для создания небольших страниц, так как у них есть много минусов: не поддерживаются проекты, отсутствует "подсветка" текста., в общем, работать крайне неудобно.

Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web-страниц в этом редакторе видишь одно, а в окне браузера - совсем другое. Странички получаются какими-то кривыми, поэтому для создания качественных Web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже.

Начнем мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производству программ для создания веб-сайтов, а также законодателем моды в этой области.

DreamWeaver 3.0

Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд" ( вы записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности.

HomeSite 4.0

Следующий редактор - HomeSite 4 - для создания страниц вручную, т.е. для знатоков HTML. Вы получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, Google Phrome, Opera).

HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы загрузите чужой HTML-код, то HomeSite все перепишет по-своему.

Еще одна отличительная особенность HomeSite - это его "склейка" с Dreamweaver. HomeSite обладает кнопкой "Dreamweaver", а также входит в его стандартный пакет поставки. Впрочем, и DreamWeaver имеет возможность подключения HomeSite, как редактора для коректировки HTML-кода.

Одним из последних HTML-редакторов является EVR Soft 1st Page v2.

Его лозунг - "Create 1st class websites!" ("Создавайте первоклассные веб-сайты!"). Редактор содержит несколько режимов - Normal, Easy, Advanced/Expert и Hardcore, то есть вы можете выбрать свой уровень, а со временем перейти на более высокий. Еще одна особенность - довольно большая коллекция скриптов на JavaScript и DHTML. Все это довольно удобно разбито по категориям.

3.2 Графические редакторы

Создание и оптимизация графики - сложная и капризная задача. Безусловно, возможно создание Web-страницы и без использования графики - при помощи шрифтов, скриптов и таблиц стилей (CSS) - и это будет красиво и стильно. Но ведь окончательный вид документа зависит от большого числа различных факторов, таких как: ширина окна браузера, предварительные настройки браузера, принятые по умолчанию размер шрифта, его имя и цвет. К тому же не все скрипты и стили поддерживаются всеми браузерами. Если же будет использована графика, то посетитель вашей страницы увидит ее точно такой, какой сделали и видите ее вы.

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

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

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

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

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

Для изображения растровой графики всегда используется фиксированное количество пикселов, т.е. качество растрового изображения напрямую зависит от разрешающей способности оборудования. Это значит, что любое изменение изображения (поворот, увеличение и т.д.) приводит к неизменному искажению картинки и границы объектов получаются неровными.

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

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

Графические пакеты (редакторы) тоже делятся на два типа: растровые и векторные. Давайте теперь рассмотрим наиболее популярные из них.

А) Редакторы растровой графики

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

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

Пакет предлагает, например, средства для восстановления поврежденных изображений, ретуширования фотографий или создания самых фантастических коллажей, которые только может позволить себе наше воображение. В общем, потенциал этого пакета поистине огромен. Начиная с версии 5.5 в пакет включена программа Adobe ImageReady , предоставляющие огромные возможности по обработке графики под WEB (оптимизация изображений, создание анимированных gif, "разрезание" картинок на более мелкие и т.д.). Девиз разработчиков Adobe Photoshop - "Camera of your mind" - предполагает не только техническое совершенство, но и полную свободу творчества, на которую человек, работающий с этой программой, просто обречен.

PhotoPaint - еще один не менее известный графический редактор (из пакета Corel Draw) для обработки растровой графики, конкурирующий с Adobe Photoshop. Здесь также имеются все необходимые инструменты для обработки графики, разнообразные фильтры, текстуры. Разница лишь в удобстве работы, интерфейсе и скорости наложения фильтров - наложение происходит немного медленнее.

Painter - редактор предоставляет великолепные возможности для эмуляции реальных инструментов рисования: графит, мел, масло и т.д. Также позволяет имитировать фактуру поверхности материалов, живопись, создавать анимацию. Очень удобен для разработки фоновых рисунков или Web-страниц в стиле живописи. Пользуясь это программой чувствуешь себя настоящим художником.

Существует еще ряд редакторов (Microsoft Photo Editor, Microsoft Photo DRAW ), также позволяющих реализовать простейшие задачи, но не удовлетворяющих запросам профессионалов.

B) Редакторы векторной графики

Adobe Illustrator - пакет позволяет создавать, обрабатывать и редактировать векторную графику. По своей мощности он эквивалентен

растровому редактору Adobe Photoshop: имеет аналогичный интерфейс, позволяет подключать различные фильтры и эффекты, понимает многие графические форматы, даже такие как. cdr (Corel Draw) и. swf (Flash).

CorelDraw - безусловно, такой известный графический пакет не мог обойтись без средств для обработки векторной графики. Пакет по своей мощности практически не уступает графическим редакторам Adobe Photoshop и Adobe Illustrator. Помимо обработки векторной графики, в этом пакете существует обработчик растровой графики (Photo Paint), трассировщик изображений, редактор шрифтов, подготовки текстур и создания штрихкодов, а также огромные коллекции с изображениями (CorelGallery).

Adobe Streamline - еще один продукт фирмы Adobe, предназначенный для трассировки (перевода) растровой графики в векторную. Это небольшой, но очень полезный и мощный продукт. Особенно полезен, если вы создаете Web-страницы с использованием векторной графики, например, технологии Flash.

4. Создание сайта при помощи CMS Joomla 1.5.7

Плавно, по принципу от простого к сложному, переходим от статических страниц WWW к динамическим. Что бы это осуществить, нам понадобиться знание Web - языков PHP, Jscript, Perl, jQuery и хотя бы язык структурных запросов MySQL. Ничего страшного, всего лишь какие то пару лет и вы профи, способные делать такие многофункциональные сайты, у которых страницы генерируются на лету, в которых присутствует базы данных клиетов форумов, логины, пароли, идентификация, аутентификация, подключение анимации и много другое.

Но не обязательно обладать знаниями всех языков, что бы сделать динамический многофункциональный сайт. Мне хватило знания HTML, SCC, PHP, 3Ds Max, Photoshop и SMC Joomla.

Joomla - система управления содержимым, написанная на языках PHP и JavaScript, использующая в качестве хранилища базу данных MySQL. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL.

Основные возможности:

1. Функциональность можно расширять с помощью дополнительных модулей (расширений, плагинов).

2. Модуль безопасности для многоуровневой аутентификации пользователей и администраторов.

3. Система шаблонов позволяет легко изменять внешний вид сайта.

4. Настраиваемые схемы расположения модулей, включая левый, правый и центральный блоки меню.

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

Можно работать с Joomla на сервере хостера в интернете (дополнительные расходы, а так же зависит многое от скорости интернета). Я предпочитаю работать на локальном сервере. Для этого выбрала Apache/2.2.4 (Win32) mod_ssl/2.2.4 OpenSSL/0.9.8d PHP/5.2.4 Server at 127.0.0.1 Port 80.

Итак, установили локальный сервер. В директории localhost/home/www/ создаем папку, в которую помещаем саму Joomla. Хочу заметить, что под PHP5.3.1 Joomla работает не корректно. Постоянно компоненты форумов FireBoard и Kunena выдает ошибки на сайте, приходится править файл php. ini и отключать вывод об ошибках, что само действие сулит непредвиденных обстоятельств для сайта. По этому, рекомендую выбирать версию PHP 5.2.4, работа стабильная для всех плагинов, модулей и компонентов. После установки Joomla через браузер создаем в MySQL пользователя-админа и под его логином и паролем заходим на в админ панель. Далее надо выбрать шаблон для сайта. С первого взгляда покажется, что это очень легко, но капнув глубже убеждаешься, что 80% времени уходит для модернизации этого шаблона. Поэтому рекомендую выбирать максимально подходящий шаблон под нужды, не забывая о выводимых модулях. Далее подключаем весь функционал сайта: регистрацию, форум, слайд-шоу, баннеры, файлы для скачек, видео on line, аудио, редактируем, все выводимые страницы. Работаем в основном с файлом Index. php и template. css и конечно конфигурируем под себя все подключенные расширения, которых около 6000 для Joomla. Далее остается самое приятное - это дизайн сайта. При помощи растрового программы Photoshop и 3Ds Max (полнофункциональная профессиональная программная система для создания и редактирования трёхмерной графики и анимации, разработанная компанией Autodesk, содержит самые современные средства для художников и специалистов в области мультимедиа) создаем дизайн шаблона. Редактируем header, делаем нужный вид.

Вывод

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

Литература

1. Которев Д. В, Костарев А.Ф. "PHP 5 или наиболее полное руководство в подлиннике." Петербугр 2005

2. А. Гончаров "Самоучитель HTML".

3. А. Матросов, А. Сергеев, М. Чаунин "HTML 4.0 в подлиннике"

4. Айзекс С. "Dynamic HTML"

5. Байенс Дж. "Примочки программирования в WEB"

6. Бурсов М.В. и др. "Основы работы с HTML-редактором Dreamweaver. Учебно-методическое пособие"

7. Велихов В. "Справочник по HTML 4.0"

3. Язык гиппертекстов HTML

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

Парные тэги выделяют некоторый фрагмент гипертекста - «заглавие», «тело» и т. д. Первый тэг начинает фрагмент, а второй - завершает его. В закрывающих дескрипторах перед именем ставится знак дроби / .

Общая структура гипертекстов, записанных в языке HTML:

гипертекст::= заглавие тело

заглавие::= титул

титул::= название

тело::= текст

В соответствии с правилами HTML гипертексты обязаны иметь «заглавие» и «тело». Как публикации гипертексты могут и должны содержать сведения об авторах и владельцах авторских прав (сайтов).

В заглавии гипертекста должно содержаться «название», которое браузерами отображается на самой верхней строке экрана ЭВМ. Название должно выражать главную идею публикации (страницы). Гипертекст без названия - это как статья без названия.

«Тело» гипертекста должно содержать тексты, таблицы, фотографии и иллюстрации. Отличие электронных гипертекстов от обычных бумажных текстов - включение гиперссылок, нажатие на которые вызывает загрузку новых гипертекстом.

Пример гипертекста и результат его отображения браузером на экране ЭВМ:

Гипертекст: Результат:

Результат работы браузера - загрузка и вывод на экран ЭВМ гипертекста, хранящегося на сайте по адресу, указанному в окне браузера. Если гипертекст слишком велик, то браузер выводит кнопки протяжки гипертекста справа или внизу экрана.

Размеры экранов ЭВМ имеют следующий спектр. Минимальный размер экрана - 640 х 480 пикселей. Далее стандартные размеры экранов - 800 х 600, 1024 х 768 и 1280 х 1024 пикселей. Поэтому на разных экранах гипертексты могут вы глядеть по-разному.

Общая структура гипертекстов и их отображения на экране ЭВМ:

Гипертекст: Результат:

Текстовая часть может состоять из строк и абзацев с заголовками и без заголовок, со списками, таблицами и меню.

тело::- текст

текст::= заголовок { текст } |

список { текст } |

таблица { текст } |

Заголовки в гипертекстах оформляются в следующем виде:

заголовок::=

название

заголовок::=

название

заголовок::=

название

где тэги H2, ... , h6 задают размер заголовков по отношению к основному тексту.

Абзацы в гипертекстах начинаются с дескриптора

гипертекст |

Переход на новую строку и абзацах указывается дескриптором . Конец абзаца р> не обязателен, но необходим при использовании параметров в дескрипторе абзаца.

Основной параметр абзацев - align - выравнивание текстов на экране ЭВМ. Выравнивание текстов производится браузерами автоматически в соответствии с размерами экрана ЭВМ:

align=center- по центру экрана:

align=left- к левому краю;

align=right - к правому краю;

align=justify - на весь экран.

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

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

Для выделения слов в гипертекстах можно использовать жирный шрифт или подчеркивание с помощью следующих тэгов:

Большие символы

жирный шрифт

курсив i>

подчеркивание

перечеркивание

маленькие символы

Шрифтовое выделение в гипертекстах задается тэгом : шрифты:: = текст font>

Параметры шрифтов - их размер и тип. Размеры шрифта задаются параметром size = размер.

Размер указывается явно от 1 до 6, либо в форме увеличения +1, +2 или уменьшении - 1, - 2.

Тип шрифта задается параметром

face = шрифт

Здесь шрифт - один из стандартных шрифтов: «Times», «Courier» и т. д.

Цвет шрифта задается параметром со1ог = цвет, где цвет - цвет выделенного фрагмента гипертекста. Например - выделение текста красным цветом:

текст font >

Стандартные названия цветов в языке НТМL:

red - красный, green - зеленый, blue – синий, black-черный,

white - белый, gold - золотой, yellow-желтый и т. д.

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

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

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

Общая форма внешних гиперссылок:

где «адрес» - это адрес гипертекста внутри сайта или на другом сервере сети Интернет.

Примеры внешних гиперссылок:

а)адрес сайта в Интернет:

http: // bак2.naгоd.гu

б)адрес страницы на сайте:

http: // bак2.naгоd.гu / inrogl.html.

в)адрес страницы в папке сайта;

http: // bак2.naгоd.гu / tests / test2.html.

тесты 2 а>

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

Графические файлы обычно размешаются на сайтах и отдельной папке с именем image. Загрузка иллюстраций на экраны пользовательских ЭВМ проводится браузерами с помощью операторов :

Общая форма операторов загрузки графических иллюстраций:

Расположение иллюстраций на экране ЭВМ задается параметрами выравнивания: align=left- по левому краю, align=right - по правому краю экрана. Текст при этом обтекает иллюстрации соответственно справа пли слепа.

Иллюстрации могут быть прижаты к верхнему или нижнему краю экрана, что задается параметрами: align =top - к верхнему краю, align=bottom - к нижнему краю экрана, либо выровнены по середине экрана - align = middle.

Для расположения иллюстрации па экране ЭВМ в операторе загрузки могут быть указаны их ширина и высота:

высота:= height= «высота»

ширина:= width= «длина»

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

Размеры иллюстраций обычно выбирают так, чтобы они были видны целиком даже на экранах ЭВМ с минимальным размером. Если кран ЭВМ больше, то иллюстрации будут занимать только его часть.

Гипертекстовые списки - это перечни с нумерацией или выделением элементов списков. Все элементы начинаются тэгами

. Нумерованные списки начинаются тэгом

и заканчиваются тэгом . Ненумерованные списки ограничиваются тэгами .

Гипертекстовые списки – удобное средство для организации оглавлений в сложных сайтах и больших гипертекстов. Элементами в таких списках являются адреса соответствующих разделов сайтов (глав, параграфов разделов электронных книг и библиотек).

Заключение

HTML - это язык разметки гипертекстов (hypertext markup language).

Все размещаемые файлы должны быть гипертекстами, записанными в формате HTML и имеющими идентификаторы вида.html.

Язык HTML - это язык разметки гипертекстов, хранящихся на Web-серверах и отображаемых браузерами на экранах ЭВМ. Язык HTML определяет правила описания гипертекстов и отображения их браузерами на экранах компьютеров.

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

Основные правила вложения элементов:

Элементы не должны пересекаться;

Блочные элементы могут содержать вложенные блочные и текстовые элементы;

Текстовые элементы могут содержать вложенные текстовые элементы;

Текстовые элементы не могут содержать вложенные блочные элементы.

Строго говоря, все правила языка HTML. можно рассматривать исключительно как «пожелания». Средство, используемое для отображения Web-документа, сделает все возможное, чтобы истолковать разметку наиболее разумным образом. Тем не менее, гарантию правильного воспроизведения документа дает только неукоснительное следование требованиям спецификации языка.

Список литературы

«Экономическая информатика» /Под. ред. П.В. Конюховского и Д.Н. Колесова, СПб: Питер, 2000, 560с.

Каймин В.А., «Информатика», учеб.4-е изд. М.:,2003-285с.

«Информатика», базовый курс, 2-е издание /Под. ред. С.В. Симоновича, СПб.: 2003, 640с.

Технология WWW

Служба World Wide Web (WWW) – самая популярная служба Internet. WWW – это единое информационное пространство, состоящее из сотен миллионов взаимосвязанных электронных документов, хранящихся на Web-серверах. Отдельные документы, составляющие пространство Web, называют Web-страницами. Группы тематически объединенных Web-страниц называют Web-узлами (Web-сайт).Один физический Web-сервер может содержать достаточно много Web-узлов, каждому из которых отводится отдельный каталог на жестком диске сервера.

От обычных текстовых документов Web-страницы отличаются тем, что они оформлены без привязки к конкретному носителю. Например, оформление Word-документа, напечатанного на бумаге привязано к параметрам печатного листа, который имеет определенную высоту, ширину и размер полей. Электронные Web-документы предназначены для просмотра на экране ПК, причем заранее не известно на каком. Поэтому Web-документы не могут иметь жесткое форматирование. Оформление выполняется во время их воспроизведения на ПК клиента и производится оно в соответствии с настройками программы, выполняющей просмотр (браузера). Браузер выполняет отображение документа в соответствии с теми командами, которые записаны в тексте Web-документа. Команды могут записываться либо непосредственно автором документа, либо внедряться автоматическими средствами подготовки Web-документов.

Такие команды называются тегами. Теги заключаются в скобки <>. Большинство тегов используются парами: открывающий тег и закрывающий.

текст

Сложные теги кроме ключевого слова имеют дополнительные атрибуты и параметры. Правила записи тегов содержатся в спецификации специального языка разметки гипертекста – HTML (Hyper Text Markup Language). Т. е. Web-документ представляет собой обычный текстовый документ, размеченный тегами HTML.

Наиболее важной чертой Web-документов являются гипертекстовые ссылки. Гиперссылку можно установить на любой фрагмент текста. Для создания гиперссылки используется парный тег . Этот тег содержит обязательный атрибут HREF, который задает адрес URL документа, на который указывает ссылка.

Адрес может быть задан в абсолютной и в относительной форме. Адрес в абсолютной форме начинается с указания протокола и адреса Web-узла. Такая запись используется, когда необходимо направить посетителя на другой Web-узел, и рассматривается как внешняя ссылка. При использовании относительного адреса в ссылке задается только относительный путь поиска для документа. При этом предполагается использование того же протокола и того же Web-узла, а ссылка рассматривается как внутренняя. Внутренняя ссылка сохраняет свою работоспособность в случае изменения адреса Web-узла как целого (например, на другой сервер). Полный формат гиперссылки включает возможность ссылки на определенное место внутри страницы. Но это можно сделать только для страниц собственной разработки. Для этого место, на которое ставится ссылка помечается с помощью специального элемента- якоря. Якорь задается с помощью парного тега c обязательным атрибутом NAME. Значением этого атрибута является произвольная последовательность латинских букв и цифр – имя якоря. Для ссылки на якорь его имя указывается в конце адреса URL после символа #.

Глоссарий

Браузер будет искать документ на данном сервере в текущей папке

Midi-музыка

Браузер выполнит переход на сайт http://www.midi.ru.

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

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

Рассмотрим аппаратные и программные средства, которые в совокупности образуют Веб.

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

· URL и протоколы передачи данных. Если фрагменты документа разбросаны по всему миру, а вы хотите предоставить его пользователю в виде цельного, выдержанного в едином стиле документа» понадобится очень хорошая адресная система. Каждый файл в Интернете имеет адрес, называемый URL (Uniform Resource Locator - унифицированный указатель информационного ресурса). Например, URL сайта Европейской федерации футбола - http://ru.uefa.com.

Первая часть URL определяет метод, посредством которого компьютер получает доступ к файлу, то есть коммуникационный протокол. К большинству веб-страниц доступ осуществляется с помощью протокола HTTP (Hypertext Transfer Protocol - протокол передачи гипертекстовых документов). Вот почему веб-адрес обычно указывают с использованием букв «http», а браузеры автоматически вставляют эти буквы перед вводимым пользователем веб-адресом. Нередко часть адреса http:// в начале URL опускается.

Следующая часть адреса - это хост-имя веб-сервера. Система доменных имен направит ваш запрос веб-серверу где бы он ни находился.

Некоторые URL содержат информацию, указываемую вслед за хост-именем веб-сервера. Эти данные точно определяют файл, который вы хотите просмотреть и каталог, где он хранится. Если имена каталога и файла не указаны, на экран выводится веб-страница этого веб-сервера, заданная по умолчанию.

· HTML (Hypertext Markup Language - язык разметки гипертекстовых до-нтов) является универсальным языком Веб. Он используется для компоновки страниц, на которых может быть воспроизведена информация, размещенная в Веб: текстовая, графическая, а также аудио- и видеоинформация.

· Java и JavaScript. ЯзыкJava предназначен для пересылки через Веб небольших приложений (называемых апплетами или Java-приложениями). А язык JavaScript расширяет возможности НTML с целью встраивания небольших программ (или сценариев) в веб-страницы. Основное назначение апплетов и сценариев состоит в повышении интерактивности веб-страниц - вместо взаимодействия с удаленным веб-сервером вы работаете с апплетом и сценарием, которые выполняются на вашем компьютере.

Существуют также Java-апплеты и сценарии JavaScript для построения анимации, они пересылаются веб-сервером по сети, чтобы быть выполненными на компьютере пользователя; они позволяют избежать передачи кадров анимации по Интернету. Описанные процессы обычно происходят незаметно для пользователя.

· VBScript и элементы управления ActiveX. Язык VBScript и элементы управления ActiveX - это стандартные средства, поддерживаемые браузером Internet Explorer.

VBScript представляет собой упрощенную версию языка Visual Basic, разработанного компанией Microsoft. С его помощью можно создавать сценарии, которые придают веб-страницам динамичность. Таким образом, по своим возможностям VBScript аналогичен языку JavaScript.

Элементы управления ActiveX, подобно Java-апплетам, применяются для встраивания выполняемых программ в веб-страницы. Когда Internet Explorer встречает веб-страницу, где используются элементы управления ActiveX, он проверяет, установлен ли конкретный элемент управления на вашем компьютере, и если нет -инсталлирует его.

· XML и другие расширенные языки Веб. XML (Extensible Markup Language - расширенный язык описания документов) представляет собой очень мощный язык, который должен заменить HTML в качестве языка разработки приложений для Веб. В отличие от HTML, XML не содержит никаких инструкций о том, как должны отображаться описанные в XML-документе данные. Способ их отображения задается языком описания стилей, который играет для XML примерно ту же роль, что каскадные таблицы стилей для HTML. Консорциум W3C работает с двумя спецификациями таблиц стилей: XSL (Extensible Style Language - расширенный язык стилей) и CSS (Cascading Style Sheets - каскадные таблицы стилей). Другое принципиальное отличие XML от HTML состоит в том, что он может содержать любые теги, которые сочтут нужным использовать создатели XML-словаря.

Более совершенной версией HTML является язык DHTML (Dynamic HTML -динамический HTML), включающий три компонента - HTML, JavaScript и CSS.

· Графические объекты. Рисунки, чертежи, карты, диаграммы и другие графические изображения, представленные в Веб, могут иметь множество форматов. Наиболее распространенными форматами отображения графической информации являются JPEG и GIF.

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

HyperText Markup Language (HTML) – язык разметки гипертекста – предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.

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

Существует два способа создания гипертекстовых документов. Можно воспользоваться одним из WYSIWYG HTML-редакторов (например, Microsoft FrontPage, или др.), для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML. HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика. Но, безусловно, этот способ незаменим для новичков в деле подготовки гипертекстовых документов.

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

Как уже отмечалось, HTML-документ содержит символьную информацию. Одна ее часть - собственно текст, т. е. данные, составляющие содержимое документа. Другая – теги (markup tags), называемые также флагами разметки , – специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, приняты расширения.htm или.html.

Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:

<имя_тега [атрибуты]>

Прямые скобки, используемые в описании синтаксиса, означают, что данный элемент может отсутствовать. Имя закрывающего тега отличается от имени открывающего лишь тем, что перед ним ставится наклонная черта:

Атрибуты тега записываются в следующем формате:

имя[="значение"]

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

Действие любого парного тега начинается с того места, где встретился открывающий тег и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером , а часть текста, окаймленную открывающим и закрывающим тегом, – элементом .

Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсенд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.