logo
321 / Разработка электронного портала

Лекция 2–Основы html

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

Развитие при этом шло по двум направлениям: клиентские и серверные технологии.

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

Достоинства клиентских технологий:

- переносимость за счет независимости от сервера

- простота использования

- обеспечивают некоторую безопасность сервера.

Недостатки:

- ограниченные возможности представления данных

- угроза безопасности клиенту

- определенные требования к броузеру

- сложность создания больших сайтов.

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

Достоинства серверных технологий:

- отсутствие требований к клиенту

- возможность организовать взаимодействие с файловой системой сервера и с базами данных

Недостатки:

- угроза безопасности сервера

- зависимость от серверного программного обеспечения и его настроек

- затраты аппаратных ресурсов сервера

Далее будут рассмотрены описанные интернет-технологии.

Каскадные таблицы стилей CSS

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

Сама таблица стилей может быть помещена в документ с помощью тэга <style>, либо размещена в отдельном файле, ссылка на который делается с помощью тэга <link>. В последнем случае одну таблицу стилей можно использовать для нескольких web-страниц.

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

Пример таблицы стилей:

Н1, Н2 {text-align: center; color: green;} - здесь определен стиль, т.е. центрирование текста по горизонтали и зеленый цвет букв, для тэгов Н1 и Н2.

Подключается таблица стилей следующим образом:

<LINK href= "main.css" rel= "stylesheet">

Достоинства использования каскадных таблиц стилей CSS:

- экономия рабочего времени в связи с возможностью подключить несколько таблиц и определить для каждой группу объектов и приоритеты

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

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

Основные понятия HTML.

Набор символов.

Формально, набор символов, используемых в html документе должен · включать ISO Latin 1, известную также как ISO 8859-1 кодировку, так как она принадлежит к набору стандартов ISO 8859  · быть совместимым с ISO 10646 и Unicode.

В практической работе Вы должны использовать только ISO Latin 1 набор символов. Сейчас и в ближайшем будущем Вы можете твердо рассчитывать на его обширную поддержку приложениями. Поддержка ISO Latin 1 должна существовать во всех броузерах, однако иногда с этим существуют проблемы. Также Вы можете придерживаться ASCII набора символов, которые являются подмножест-вом ISO Latin 1, в особенности, если у Вас нет необходимости в написании символов с диакритическим знаком или символов, не входящих в английский алфавит (a - z).  Некоторые предупреждения:  · Набор символов windows наиболее согласован с ISO Latin 1, однако есть некоторые кодовые позиции, которые зарезервированы в качестве управляющих символов в ISO Latin 1 и, тем не менее используются для изображения видимых символов в наборе символов windows. Наиболее известные из них - два раз-личных тире "en тире" и "em тире", которые не надо смешивать с дефисом (-) или подчеркиванием (_), принадлежащими к ISO Latin 1 (и даже к ASCII). Если Вы используете такие символы, пользователи windows систем вероятно увидят их как положено, однако на всех других системах символы скорее всего будет выглядеть, как помарки. (Обычно, такие символы даже не выводятся совсем).

Теги html

Тег html состоит из следующих друг за другом в определенном порядке элементов:  · левой угловой скобки < (такого же, как "меньше чем" символа)  · необязательного слэша /, который означает, что тег является конечным тегом, закрывающим некото-рую структуру. Таким образом в этом контексте Вы можете читать символ /, как конец...  · имени тега, например TITLE или PrE  · необязательных, если даже тег может иметь их, атрибутов. Тег может быть без атрибутов или сопрово-ждаться одним или несколькими атрибутами, например: ALIGN=CENTEr  · правой угловой скобки > (такой же, как символа "больше чем").

Элементы html

Большинство, но не все теги html спарены так, что за открывающим тегом следует соответствующий закрывающий тег, а между ними содержится текст или другие теги, например:  <H1>Foreword</H1> В таких случаях два тега и часть документа, отделенная ими, образуют блок, называемый html элементом или контейнером. Некоторые теги, например <Hr>, являются элементами html сами по се-бе, и для них соответствующий конечный тег неверен. Далее мы будем называть теги по их именам, опуская обязательные угловые скобки.

Aтрибуты

Для каждого тега определяется множество возможных атрибутов. Большинство тегов допускает один или несколько атрибутов, однако атрибутов может и совсем не быть. Спецификация атрибута состоит из расположенных в следующем порядке:  · имени атрибута, например wIDTH  · знак равенства (=)  · значения атрибута, которое задается строкой символов, например, "80".  Всегда полезно заключить значение атрибута в кавычки, используя либо одинарные ('80'), либо двойные кавычки ("80"). Строка в кавычках не должна содержать такие же кавычки внутри себя. Так, если дата заключена в двойные кавычки, используйте одинарные кавычки для последующего заключения в кавычки, и наоборот. Предпочтительно использование двойных кавычек, так как для глаза человека бы-вает трудно отличить одинарные кавычки от символов, подобных символам акцентирования.  Вы можете также опустить кавычки для значений атрибутов, которые состоят только из следующих символов (обратитесь к технической концепции имени):  · символов английского алфавита (A - Z, a - z)  · цифр (0 - 9)  · промежутков времени  · дефисов (-)

Чувствительность к регистру

Что касается имен тегов, атрибутов и большинства значений атрибутов, html является case нечувст-вительным языком. Вы можете, например, написать TITLE, или Title, или title, или даже tItLE, если Вам нравится. (В этом документе используется написание на верхнем регистре. Это должно помочь чи-тателю отличить html код от нормального текста.) Но существуют и case чувствительные конструк-ции языка, а именно:  · escape последовательности (более официально называемые символьными объектами), которые начи-наются знаком & (например, <)  · UrL, так как он может содержать наименования файлов, которые являются case чувствительными во многих операционных системах (например, в Unix).

Разделение на строки и использование пробелов и символов табуляции

Когда документ выводится на экран, пробелы и пустые линии не сохраняются, за исключением текста, заключенного в теги PrE (предварительно отформатированный текст). То есть любая последо-вательность пробелов, символов табуляции и пустых линий эквивалентна единственному пробелу в файле html. С другой стороны, пробел в файле html может быть представлен с использованием лю-бого количества пробелов или новыми (пустыми) строками.  Таким образом, не имеет значения, как Вы разделите текст на строки, так как перевод строки эквивалентен пробелу. Заметим, однако, что Вы не должны в html разделять слово на две строки.

Классификация элементов

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

Замечание: часто блоковые элементы могут содержать как текстовые, так и другие блоковые элементы, например, блоки могут быть вложенными. Текстовые элементы также могут быть вложенными. Но текстовые элементы не могут включать блоковые элементы.

Цвета

В элементах FONT и BODY некоторые конструкции html могут быть использованы, чтобы специфи-цировать цвета: например, цвет фона, цвет текста по умолчанию или цвет текста связи.  Так как все мониторы и программы могут отображать цвет, действительное отображение может быть черно-белым или с различными оттенками серого.  Для спецификации цвета, как значения атрибута, существуют два варианта:  · Символьная нотация rED. Определено шестнадцать таких имен (см. ниже), которые можно записывать в любом регистре с кавычками или без.  · Цифровое обозначение в шестнадцатиричной записи, например, "#FF0000", которая контролирует, каким образом цвет формируется из основных цветов - красного, зеленого и голубого - в так называе-мое srGB цветовое пространство, при этом обозначение должно быть взято в кавычки.  Конечно, символические нотации много легче и более понятны. С другой стороны численные обозначе-ния дают больше возможностей

Структура html-документа

<! docTYPE html PUBLIC "-//ieTF//DTD html 3.2 // EN "> <html> <HEAD> {Заголовок документа}  </HEAD> <BODY> {Тело документа}  </BODY> </html>

Объявление <!docTYPE>

Элемент <!docTYPE> должен первым указываться в документе html (теоретически). Он сообщает серверу wEB способ обработки документа и то, какие дескрипторы могут находиться на странице, хотя чаще всего он игнорируется браузерами. Поэтому его применение строго не обязательно.

Синтаксис: <!docTYPE html "текст""UrL" >

Здесь текст определяет версию html , а UrL позволяет браузерам пользователей загрузить DTD на-пример: <! docTYPE html PUBLIC "-//w3C//DTD html 4.0 // EN"  "http://www.w3.org/Tr/rEC-html40/strict.dtd">

Ниже описаны некоторые версии html

· <! docTYPE html PUBLIC "-//w3C//DTD html 4.0 // EN"  · "http://www.w3.org/Tr/rEC-html40/strict.dtd"> Строгое DTD. Документы, использующие такое объяв-ление типа документа, включают в себя все элементы и атрибуты, не являющиеся нежелательными и не использующие кадры.  · <! docTYPE html PUBLIC "-//w3C//DTD html 4.0 Transitional // EN"  · "http://www.w3.org/Tr/rEC-html40/loose.dtd"> Документы, использующие такое объявление типа документа, включает все, что включено в строгое DTD, а также нежелательные элементы и атрибуты, относящиеся к визуальному оформлению.  · <! docTYPE html PUBLIC "-//w3C//DTD html 4.0 Frameset // EN"  · "http://www.w3.org/Tr/rEC-html40/frameset.dtd"> Документы, использующие такое объявление типа документа, включает все, что включено в предыдущее DTD, а также кадры.

Тэг <html>

Тэг <html> определяет границы документа html, ему соответствует конечный тэг </html>. Между этими двумя тэгами располагается собственно весь документ. Как и <!docTYPE> тэги <html> и </html> - не являются строго обязательными. Но, все-таки, их использование является правилами хорошего тона т.к. браузеры у пользователей могут быть всякие и не известно - насколько корректно они визуализируют такой код.

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

Каждый html документ должен содержать основную информацию о его происхождении.

Если Вы стремитесь к тому, чтобы люди отыскали Ваш документ по соответствующим связям, важ-ность предоставления информации о его происхождении становится очевидной. Когда пользователь найдет Ваш документ с помощью, например, поискового ресурса AltaVista, он, вероятнее всего, захочет узнать, к какому виду относится документ. Поэтому каждый файл html должен предоставлять самую основную информацию (или связи к информации) о его происхождении и природе. Например, в собрании книгоподобных документов, разделенных на малые файлы, каждый файл должен содержать, по крайней мере, связь к "первой странице" "книги" (home page).

О происхождении документа должна быть представлена, по крайней мере, следующая информация:

Элемент <BODY>

Элемент <BODY> предназначается для выделения той части документа, которая будет визуализирована для пользователя. Он имеет как начальный, так и конечный теги. Начальный тег <BODY> может иметь несколько атрибутов .

Вложенные атрибуты элемента <BODY> BACKGrOUND · Атрибут задает графическое изображение, которое как черепица заполнит фон документа. Файл с изображением должен быть сохранен в формате gifилиJPEG .  · Синтаксис: <BODY BACKGrOUND="(UrL)(путь) имя файла"> BGCOLOr · Этот атрибут задает цвет фона документа при помощи шестнадцатеричных значений интенсивности цветов rGB , или при помощи строчного литерала, соответствующего названию цвета. · Синтаксис: <BODY BGCOLOr="#ff0000"> или <BODY BGCOLOr="rED"> TEXT · Этот атрибут задает используемый по умолчанию цвет текста, который не является гиперссыл-кой. По умолчанию такой текст будет черным. · Синтаксис: <BODY TEXT=" цвет "> LINK · Этот атрибут задает цвет гиперссылки, в большинстве браузеров он задан по умолчанию темно синим. · Синтаксис: <BODY LINK="цвет" >  ALINK · Этот атрибут задает цвет активной гиперссылки, он меняет цвет гиперссылки в момент щелчка по ней мышью, не желательно задавать ему цвет фона по понятным причинам. · Синтаксис: <BODY ALINK="цвет" >  VLINK · Этот атрибут задает цвет посещенной гиперссылки, не желательно задавать ему цвет фона и цвет атрибута LINK по понятным причинам. · Синтаксис: <BODY VLINK="цвет" >  BGPrOPErTieS · Этот атрибут задает свойства фонового изображения. В данный момент браузерами поддержива-ется единственное его значение fixed, запрещающее скроллинг изображения. · Синтаксис: <BODY BGPrOPErTieS="fixed" >  TOPMArGIN · Этот атрибут задает верхнюю границу страницы в пикселях. · Синтаксис: <BODY TOPMArGIN=число >  BOTTOMMArGIN · Этот атрибут задает нижнюю границу страницы в пикселах. · Синтаксис: <BODY BOTTOMMArGIN=число >  LEFTMArGIN · Этот атрибут задает границу страницы в пикселях слева. · Синтаксис: <BODY LEFTMArGIN=число >  rIGHTMArGIN · Этот атрибут задает границу страницы в пикселях справа. · Синтаксис: <BODY rIGHTMArGIN=число >

Заголовочные тэги

Элемент <HEAD> </HEAD> определяет заголовок документа.

BASE - базовый, основной UrL  Цель  Задание базового UrL для относительных UrL в документе (например, в атрибутах HrEF элемента A). Этот элемент часто используется для отображения документов.  Например: <BASE href="http://foo.com/index.html"> Элемент BASE непосредственно не отображается в документе.  Основной синтаксис  <BASE HrEF="UrL">  Допустимый контекст  Элемент заголовка (HEAD), в котором может быть только один элемент BASE.  Примечания  Так как в документе допускается только один элемент BASE, Вы не можете иметь различные базовые UrL в различных частях файла html.  При отсутствии элемента BASE в документе UrL самого документа становится базовым в пределах до-кумента. (Это не является необходимым, так как базовый UrL может быть перекрыт HTTP заголовком соответствующего документа.)

META - метаинформация

Цели  Для задания метаинформации (информации о документе), т.е. пар имя/значение, описывающих свойства документа, например, авторство, истечение даты, список ключевых слов и т.д.  Типичное отображение  Элементы META не влияют на отображение самого документа. Они могут давать некоторый эффект при представлении информации о документе, например, в верхнем окне броузера или в ответе на запрос от поискового средства.  Cинтаксис  <META NAME=имя элемента метаинформации CONTENT=содержимое информации>  или <META HTTP-EQUIV=имя элемента метаинформации CONTENT=содержимое информации>  Возможные атрибуты  NAME имя имя отдельного элемента мета-информации альтернатива атрибуту HTTP-EQUIV  HTTP-EQUIV имя имя отдельного элемента мета-информации альтернатива атрибуту NAME  CONTENT строка содержимое метаинформации обязательный атрибут эле-мента META  Допустимый контекст  Элемент заголовка, в котором может появиться любое количество элементов META.  Примеры  <META NAME=DESCrIPTION CONTENT= "An extensive guide to writing html 3.2 documents, with ../../examples and practical advice.">  <META NAME=KEYwOrDS CONTENT= "structural html, logical markup">  Тег META влияет на индексирование документа, когда он включается в базу данных поискового сервера.

TITLE - "внешний" заголовок (титул) 

Цель  Для задания обязательного "внешнего" заголовка документа.  Типичное отображение  Титул не отображается непосредственно, как часть самого документа, но может прилагаться к докумен-ту в нескольких контекстах. Титул может выводиться в окне заголовка программы просмотра; в списке результатов поиска, возвращаемых поисковым сервером; в горячем списке, определяемом пользовате-лем; списке истории и т.д.  Основной синтаксис  <TITLE>последовательность символов</TITLE>  Допустимый контекст  Заголовочный элемент, в котором есть хотя бы один элемент TITLE.  Содержимое  Последовательность символов. В TITLE можно использовать escape последовательности, например, < (для <) и ä (для д), но никакие теги html не разрешены, поэтому Вы не можете задавать в заголовке размеры шрифтов или выделения.  Примеры  <TITLE>A study of population dynamics</TITLE>  Примечания  Написать хорошее заглавие - очень важно, так как списки результатов поиска, возвращаемые поиско-вым сервером, могут использовать его.

Комментарии

Файл html может содержать комментарии, дающие пояснения для человека, читающего html код. Комментарии не влияют каким-либо образом на представление документа, т.е. они игнорируются бро-узером.  Вы можете начать комментарии с четырехсимвольной последовательности <!-- (знак "меньше чем", восклицательный знак, два дефиса) и завершить его трехсимвольной последовательностью --> (два де-фиса, знак "больше чем"). Например: <!-- Написано Иваном Ивановым -->. 

Этапы создания html-документа

· Набор содержимого в любом из текстовых редакторов (например Notepad) и сохранение обычного текстового файла.  · Логическое и физическое форматирование текста (разбивка на абзацы, блоки, заголовки и пр., внешнее их оформление) при помощи тэгов и сохранение текстового файла с расширением .htm или .html (дела-ется это все в том же Notepad).  · Организация переходов по гиперссылкам документа при помощи элемента < А > - основного связующе-го элемента языка html.  · Внедрение в документ необходимых объектов: рисунков, таблиц, видео клипов, аудио файлов, апплетов Java, скриптов и т.д. и т.п. опять же при помощи тэгов языка html.

Ссылки

Элемент <A> Элемент <A> используется с целью создания ссылок на другие элементы документа, или даже на дру-гие документы, такие ссылки являют собой основную причину ошеломляющей популярности простран-ства world wide web , где пользователь может легко перескочить с одного фрагмента текста на другой или со страницы на страницу, не задавая явным образом UrL последних. Элемент выполняет два дей-ствия: задает имя ссылки и задает ссылку на имя. Имя ссылки браузер автоматически выделяет другим цветом и подчеркивает.

Для задания имени используется атрибут name, который задает привязку ссылки в тексте, на которую и будет производиться ссылка.  Синтаксис: <A name=имя> необязательный текст </A >

Для организации ссылки используется атрибут href, который задает адрес ссылки. Он может указывать или на имя ссылки в тексте, или на UrL и имя файла.  Синтаксис: <A href="UrL"> текст, для щелчка </A >  или же в тексте: <A href="#имя"> текст для щелчка </a>

Для визуализации подсказки ссылки используется атрибут title, который задает название ссылки  · Синтаксис: <A title=" имя ссылки"> Ссылка</A > 

Оформление текста

Элемент <EM> Элемент <EM> используется с целью выделения особым шрифтом слова или текста. Синтаксис: <EM> Текст </EM> Элемент <CODE> Элемент <CODE> используется с целью дополнительного выделения фрагментов программного кода. По умолчанию он отображается телетайпным шрифтом. Данный элемент предпочтительнее, чем элемент <TT> (телетайпный шрифт). Поскольку расположение пробелов существенно для чтения программного кода, элемент <CODE> целесообразно употреблять в сочетании с элементом <PrE>.  Синтаксис: <CODE> листинг кода </CODE>

Элемент <DFN> Элемент <DFN> используется с целью обозначения терминов и определений по типу словарей или глоссариев. Синтаксис: <DFN> Текст </DFN> Элемент <CITE> Элемент <CITE> используется с целью обозначения источника информации ,из которого взята цитата. Синтаксис: <CITE> Текст </CITE> Элемент <STrONG> Элемент <STrONG> используется с целью выделения особым шрифтом слова или текста. Синтаксис: <STrONG> Текст </STrONG> Элемент <I> Элемент <I> используется с целью выделения курсивным шрифтом слова или текста. Синтаксис: <I> Текст </I> Элемент <B> Элемент <B> используется с целью выделения полужирным шрифтом слова или текста. Синтаксис: <B> Текст </B> Элемент <U> Элемент <U> используется с целью выделения подчеркиванием слова или текста. Синтаксис: <U> Текст </U> Элемент <SUP> Элемент <SUP> используется с целью выделения надстрочных слова или текста. Синтаксис: <SUP> Текст </SUP> Элемент <SUB> Элемент <SUB> используется с целью выделения подстрочных слова или текста. Синтаксис: <SUB> Текст </SUB> Элемент <BIG> Элемент <BIG> используется с целью выделения крупным шрифтом слова или текста относительно ос-новного текста. Синтаксис: <BIG> Текст </BIG> Элемент <SMALL> Элемент <SMALL> используется с целью выделения мелким шрифтом слова или текста относительно основного текста. Синтаксис: <SMALL> Текст </SMALL>

Элемент <FONT> Элемент <FONT> используется с целью изменения выделения шрифтом слова или текста. С ним приме-няются два атрибута size и color. Некоторые браузеры поддерживают атрибут face, позволяющий задать любой из перечня шрифтов, если браузер не находит заданный шрифт - то используется шрифт, заданный по умолчанию. Синтаксис: <FONT size=n color="цвет"> Текст </FONT> или <FONT face="имя" color="цвет"> Текст </FONT> 

Элемент <BASEFONT> Элемент <BASEFONT> используется как альтернатива атрибуту size элемента <FONT>, он позволяет задать базовый размер шрифта во всем документе и не имеет конечного тега. По умолчанию значение его задается равным 3 ,значение size может выражаться так же и относительным размером, например, размер -1 означает размер на один меньший, чем по умолчанию. Синтаксис: <BASEFONT size=n>

Шесть уровней заголовков <Hn> Соответствующие каждому уровню гарнитура и размер шрифта зависят от браузера, стилю <H1> на-значается самый большой и самый жирный шрифт, а стилю <H6> назначается самый маленький и са-мый невзрачный шрифт. Элемент может иметь атрибут align, который указывает отступ left, center или right.  Синтаксис: <Hn align=отступ> Текст заголовка </Hn>

Разделительные линии <Hr> Элемент <Hr> используется для проведения горизонтальной черты в документе, он может иметь атри-буты : color, задающий цвет линии, size высота в пикселах width ширина в пикселях или процентах от ширины экрана, align режим выравнивания, и не имеет конечного тега.  Синтаксис: <Hr align="center" size=n width=n color="цвет">

Элемент <P> Этот элемент задает один из способов разбиения текста на абзацы. Он может иметь вложенный атрибут align, который указывает отступ left, center или right. Каждый следующий абзац игнорирует, заданное для предыдущего абзаца значение align.  Синтаксис: <P align=отступ> Текст абзаца </P>

Элемент <Br> Этот элемент задает разрыв текста с переходом на новую строку. Он может иметь вложенный атрибут clear, который может принимать значения left, all или right тем самым указывать обтекание текста во-круг плавающих изображений вставленных в текст нестандартным способом. Каждый следующий аб-зац игнорирует, заданное для предыдущего абзаца значение clear.  Синтаксис: <Br clear=обтекание> Текст  Может быть отменен тэгами <NOBr> и </NOBr>

Элемент <PrE> Весь текст, заключенный в тэги <PrE> и </PrE> будет визуализирован браузером точно так, как он визуализирован в исходном коде документа, кроме того текст выводится моноширинным шрифтом, что значительно упрощает задачу форматирования текста в колонки. Элемент поддерживается не всеми браузерами, он может иметь атрибут width, который задает ширину отводимого пространства под текст в символах. Элемент сменил собой устаревшие элементы <XMP>, <LISTING> и <PLAINTEXT>  Синтаксис: <PrE width=число символов >...текст.. .</PrE>

Элемент <DIV> Элемент <DIV> позволяет выделить в структуре документа несколько разделов. Он является блочным элементом, функционирующим во многом подобно элементу <P>. Если закрывающий тэг </P> опущен, то <DIV> эффективно заменяет его и начинает новый абзац. Он может иметь атрибут align, который указывает отступ left, center или right. Каждый следующий раздел игнорирует, заданное для предыду-щего раздела, значение align.  Синтаксис: <DIV align=отступ> Текст раздела </DIV>

Элемент <ADDrESS> Элемент <ADDrESS> используется для оформления контактной информации текущего документа, будь то адрес электронной почты или полный почтовый адрес с номером телефона.  Синтаксис: < ADDrESS>контактная информация </ADDrESS>

Элемент <BLOCKQUOTE> Элемент <BLOCKQUOTE> позволяет выделить обьемный текст-цитату из общего текста.  Синтаксис: <BLOCKQUOTE> Текст </BLOCKQUOTE>

Элемент <SPAN> Элемент <SPAN> позволяет выделить некоторое количество текста для последующего его форматиро-вания, но в отличие от <DIV> не начинает новый абзац.  Синтаксис: <SPAN> Текст </SPAN>

Списки

Элемент <OL>

Элемент <OL> используется с целью задания нумерованных списков, имеет атрибуты type=1, или A, или a, или I, или i для задания вида нумерации и start для указания, с какого индекса начинается нумерация списка. Элемент <OL> включает в себя дополнительный элемент <LI>, который задает элементы списка.  Синтаксис: <OL type=1 start=1 > <LI> элемент списка <LI> элемент списка </OL> Пример:  1. элемент списка  2. элемент списка

Элемент <UL>

Элемент <UL>, по сути, является аналогом <OL> без дополнительных элементов <LI>, он используется с целью задания ненумерованых списков, имеет атрибут type=circle,square, или disc для задания вида маркера. Элемент <UL> включает в себя дополнительный элемент <LI>, который задает элементы списка.  Синтаксис: <UL type=circle > <LI> элемент списка <LI> элемент списка </UL> Пример:  o элемент списка  o элемент списка

Элемент <DL>

Элемент <DL>используется с целью задания словарей, глоссариев и прочих перечней. Элемент <DL> включает в себя дополнительные элементы <DT> и <DD>, которые обозначают соответственно термин и определение.  Синтаксис: <DL > <DT> термин 1 <DD>определение 1 <DT> термин 2 <DD>определение 2 </DL> Пример:

термин 1

определение 1 

термин 2

определение 2

Таблицы

Структура таблиц в html включает строки и столбцы, которые могут иметь заголовки (headers - имена, титулы, объяснения). Таблица в обычном варианте представляется в естественном виде, с согласованно расположенными столбцами. Таблицы - важнейшее улучшение в html 3.2 по сравнению с html 2.0.

В html табличные элементы обычно называют ячейками, чтобы избежать смешивания с табличным элементом (TABLE element), который в описании html соответствует всей таблице. 

Теги, используемые для представления таблиц

Для представления таблиц используются нескольких видов тегов html:  · теги TABLE, которые обрамляют всю табличную спецификацию  · необязательный элемент CAPTION, специфицирующий заголовок (имя) таблицы  · теги Tr, специфицирующие строки таблицы  · теги TH, специфицирующие заголовки строк и столбцов  · теги TD, специфицирующие данные в таблице, т.е. содержимое табличных ячеек 

Теги TABLE заключают в себе табличные строки, каждая из которых обрамляется те-гами Tr, и табличные ячейки, обрамляемые тегами TD. Это согласуется с логической структурой таб-лицы, как множеством строк, состоящих из ячеек. Вы можете сократить табличную структуру, опустив конечные теги TD и Tr, однако утратите до некоторой степени ясность представления:  Более того, хотя удаление конечных тегов допустимо в html 3.2, отдельные броузеры (включая Netscape) не смогут без них правильно представить таблицу.  Использование пробелов и переводов строк в коде html для таблицы не всегда хорошо, однако это иногда необходимо для позиционирования элементов таблицы в коде html так, чтобы образы в одних и тех же столбцах располагались бы понятно для Вас (или для кого-то, работающего с документом html). 

Дополнительные свойства

Есть несколько элементов, которые Вы можете добавить к вышерассмотренной простой табличной мо-дели:  · Заголовок (caption) для таблицы, связанный с самой таблицей (в дополнение к строкам текста о таблице в документе).  · Подзаголовки (headers) (объяснения) как для табличных строк, так и для колонок.  · Рамки (borders) вокруг таблицы и каждой табличной ячейки. 

Использование таблиц для представления меню

Часто требуется представить большой набор относительно малых образов. Например, у нас есть документ о различных странах и мы хотим создать меню из имен стран, чтобы использовать его, как индекс. И индекс должен использовать обычные связи, например <A HrEF="af.html">Afghanistan</A>.  Можно либо использовать элемент PrE, либо затратить усилия на конструирование подходящего элемента TABLE. Например: 

Табличные элементы, занимающие несколько строк или столбцов

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

Вложенные таблицы 

Таблицы могут быть вложенными, так как элементы TD и TH могут содержать и блоковый элемент и табличный. Во вложенных таблицах легко сделать ошибки, однако их использование все же оправдан-но.  Вам необходимо быть очень внимательным в написании кода html для вложенных таблиц. Никаких новых элементов или особенностей для этого не требуется, только сочетание того, что уже было описа-но. Однако из-за сложности (вложенности), легко сделать ошибки, результатом которых является "грязный" вывод, а на обнаружение ошибок требуется много времени. 

Графика

img - линейные изображения  Цель  Включает изображения в документ.  Типичное отображение  Изображения представляются, как часть документа. Неграфические броузеры представляют взамен изо-бражения значение атрибута ALT.  Позиционирование изображения обеспечивается атрибутами элемента img.  Основной синтаксис  <img SrC="UrL" ALT="текст">  Возможные атрибуты  SrC - UrL адрес изображения обязателен ALT строка текстовое описание изображения  ALIGN TOP, MIDDLE, BOTTOM, LEFT, rIGHT позиционирование изобра-жения относительно текущей текстовой строки по умолчанию BOTTOM  HEIGHT целое высота в пикселях единственное предложение  wIDTH целое ширина в пикселях единственное предложение  BOrDEr целое ширина бордюра (рамки) в пикселях используется, когда элемент img появляется, как текст якоря; используйте BOrDEr=0 для подавления рамки HSPACE целое ширина незаполненного пространства непосредственно слева и справа от изображения в пикселях значение по умолчанию - малое ненулевое число  VSPACE целое высота незаполненного пространства выше и ниже изо-бражения в пикселях значение по умолчанию - малое не-нулевое число  Атрибуты wIDTH и HEIGHT при совместном использовании позволяют программам просмотра заре-зервировать место на экране для изображения еще до того, как они будут переданы по сети. Это позво-ляет пользователю начать чтение, пока передача данных еще продолжается. Эти атрибуты не предна-значены для автоматического изменения размера изображения броузерами. Хотя некоторые броузеры могут масштабировать изображение в соответствии с атрибутами wIDTH и HEIGHT, не полагайтесь на это. Таким образом, они должны задавать реальный размер изображения. (Используйте подходящую программу для определения размеров в пикселях и масштабирования изображения, если это потребует-ся.) 

Значения ALIGN имеют следующий смысл:  ALIGN=TOP  Позиционирует верх изображения с верхом текущей текстовой строки. Броузеры по разному интерпре-тируют это. Некоторые принимают во внимание то, что было на текстовой строке до изображения и иг-норируют, что идет на строке после него.  ALIGN=MIDDLE  Выравнивает середину изображения по основной текстовой строке.  ALIGN=BOTTOM (по умолчанию)  Выравнивает низ изображения по основной строке.  ALIGN=LEFT  Перемещает изображение к текущему левому краю, временно изменяя этот край так, чтобы последую-щий текст переместился вдоль правой стороны изображения. Отображение зависит от того, были ли выровненные по левому краю какой-нибудь текст или ранее появившееся изображение до того, как в разметке появилось текущее изображение. Такой текст (но не изображения) обычно заставляет выров-ненные по левому краю изображения смещаться на новую строку, с последующим продолжением тек-ста на прежней строке.  ALIGN=rIGHT  Перемещает изображение к текущему правому краю, временно изменяя этот край так, чтобы после-дующий текст переместился вдоль левой стороны изображения. Отображение зависит от того, были ли выровненные по правому краю какой-нибудь текст или ранее появившиеся изображения до того, как в разметке появилось текущее изображение. Такой текст (но не изображения) обычно заставляет выровненные по правому краю изображения смещаться на новую строку с последующим продолжением текста на прежней строке.  Допустимый контекст  Текстовый контейнер, т.е. любой элемент, который может содержать текстовые элементы. Это включает большинство элементов html. 

Лекция 3 Работа с Java

Скриптовые языки или языки сценариев JavaScript и VBScript позволяют вносить в web-страницу определенную программную логику. Скрипты позволяют создавать динамические и интерактивные страницы.

Скрипт передается броузеру либо в самом тексте web-страницы с помощью тэга <script>, либо в отдельном файле. Сам скрипт выполняется броузером.

Скрипты позволяют реализовать следующие возможности:

- создание анимации

- обработка форм

- создание динамических элементов страницы, например меню, календарей, анимированных кнопок и т.п.

- проведение различных расчетов, например реализация корзины в интернет-магазине

Скрипты работают с объектной моделью документа (DOM - Document Object Model). Таким образом, скрипт может обращаться к окнам, фреймам, формам, рисункам и т.д. Вместе с тем, возможности скриптовых языков ограничены, т.к. они не позволяют организовать взаимодействие с базой данных, не позволяют создавать сложные интернет-приложения.

Пример использования скрипта как сценария загрузки страницы:

<SCRIPT language="javascript">

alert ("Приветствуем вас на этой странице!")

</script>

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

Апплеты Java и объекты ActiveX

Эти технологии представляют собой полноценные программы, выполняемые на стороне клиента.

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

Апплет внедряется в страницу тегом <applet>.

Объекты ActiveX - это фрагменты выполняемого кода, снабженные определенным интерфейсом. ActiveX является приложением технологии COM (Component Object Model).

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

Объекты ActiveX вставляются в web-страницу с помощью тэга <object>, где указывается идентификатор объекта, URL, с которого может быть загружена соответствующая библиотека и передаваемые объекту параметры. Идентификатор каждого объекта уникален. Броузер проверяет, установлен ли на машине клиента такой объект ActiveX. Если нужный объект ActiveX на машине не обнаружен, то он загружается с указанного URL, сохраняется в системной папке и прописывается в реестре Windows.

    1. Методические указания (рекомендации)

2.4.1. Методические указания по изучению дисциплины

  1. Рабочая программа: