Разделы презентаций

1 Язык HTML HTML (от англ. HyperText Markup Language — язык разметки

Содержание

Тема 8. Создание сайтов в Интернет. Язык HTML1. Общие сведения о принципах построения гипертекстовых информационных систем, место и роль языка гипертекстовой разметки HTML в построении сайтов глобальной компьютерной сети Интернет, формат

Слайды и текст этой презентации

Слайд 1Язык HTML
HTML (от англ. HyperText Markup Language — «язык разметки

гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство

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

HTML является приложением («частным случаем») SGML (стандартного обобщённого языка разметки) и соответствует международному стандарту ISO 8879.

Справочник по HTML: http://htmlbook.ru/html
Верстка сайтов: http://htmlcssjs.ru/

Тема 8. Создание сайтов в Интернет. Язык HTML

Язык HTMLHTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во

Слайд 2Тема 8. Создание сайтов в Интернет. Язык HTML
1. Общие сведения

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

гипертекстовой разметки HTML в построении сайтов глобальной компьютерной сети Интернет, формат и структура HTML-документов.
Структура HTML-документа и элементы разметки заголовка документа. Типовая структура HTML-документа и содержание его заголовка.
Контейнеры тела документа. Элементы разметки тела HTML-документа, их типизация, назначение и применение.
4. Графика. Принципы применения графических образов при HTML-разметке.
5. Таблицы в HTML. Принципы применения таблиц в HTML-разметке. Табличная организация текста и табличная координатная сетка.
6. HTML-формы. Взаимодействие читателя HTML-страниц с сервером Web-узла. НTML-формы.
Фреймы. Фрагментация содержания Web-узла при помощи механизма HTML-фреймов.

Темы, подлежащие изучению

Тема 8. Создание сайтов в Интернет. Язык HTML1. Общие сведения о принципах построения гипертекстовых информационных систем, место

Слайд 3Тема 8. Создание сайтов в Интернет. Язык HTML
История развития HTML
В

1989 году Тим Бернерс-Ли предложил руководству Европейского Центра ядерных исследований

(CERN) проект распределенной гипертекстовой системы, которую он назвал World Wide Web (WWW), Всемирная паутина.

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

Успех технологии World Wide Web определен двумя основными факторами:
простотой
использованием протоколов межсетевого обмена TCP/IP
Тема 8. Создание сайтов в Интернет. Язык HTMLИстория развития HTMLВ 1989 году Тим Бернерс-Ли предложил руководству Европейского

Слайд 4Тема 8. Создание сайтов в Интернет. Язык HTML
Одним из компонентов

технологии создания распределенной гипертекстовой системы World Wide Web стал язык

гипертекстовой разметки HTML, разработанный Тимом Бернерсом-Ли на основе стандарта языка разметки печатных документов — SGML (Standard Generalised Markup Language, стандартный обобщенный язык разметки ). Дэниел В. Конноли написал для него Document Type Definition — формальное описание синтаксиса HTML в терминах SGML.

HTML (HyperText Markup Language — «язык разметки гипертекста»)

Разработчики HTML смогли решить две задачи:

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

История развития HTML

Тема 8. Создание сайтов в Интернет. Язык HTMLОдним из компонентов технологии создания распределенной гипертекстовой системы World Wide

Слайд 5Тема 8. Создание сайтов в Интернет. Язык HTML
Гипертекстовая база данных

в концепции WWW - это набор текстовых файлов, размеченных на

языке HTML, который определяет форму представления информации (разметка) и структуру связей между этими файлами и другими информационными ресурсами (гипертекстовые ссылки).

Форма представления --- Разметка
Структура связей --- Ссылки

Гипертекстовые ссылки, устанавливающие связи между текстовыми документами, постепенно стали объединять самые различные информационные ресурсы, в том числе звук и видео; в результате возникло новое понятие — гипермедиа.

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

Тема 8. Создание сайтов в Интернет. Язык HTMLГипертекстовая база данных в концепции WWW - это набор текстовых

Слайд 6Тема 8. Создание сайтов в Интернет. Язык HTML
Первая версия языка

( HTML 1.0 ) была направлена на представление языка как

такового, где описание его возможностей носило скорее рекомендательный характер. Вторая версия языка ( HTML 2.0 ) фиксировала практику использования его конструкций. Версия ++ ( HTML++ ) представляла новые возможности, расширяя набор тегов HTML в сторону отображения научной информации и таблиц, а также улучшения стиля компоновки изображений и текста. Версия 3.2 смогла упорядочить все нововведения и согласовать их с существующей практикой. HTML 3.2 позволила реализовать использование таблиц, выполнение кодов языка Java, обтекание графики текстом, а также отображение верхних и нижних индексов. Версия 4.01 обеспечила дополнительные средства работы с мультимедиа, языками программирования (JavaScript, Java и VBScript), таблицами стилей, упрощенные средства печати изображений и документов.

Версии HTML

Последняя версия - HTML5 - пятая версия HTML-стандарта (изначально созданного в 1990 году и последней версией которого являлся HTML4, стандартизированный в 1997 году) .
Основной её целью является - улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями.

Тема 8. Создание сайтов в Интернет. Язык HTMLПервая версия языка ( HTML 1.0 ) была направлена на

Слайд 7Тема 8. Создание сайтов в Интернет. Язык HTML
Версии HTML
Версии хронология.

RFC 1866 — HTML 2.0, одобренный как стандарт 22

сентября 1995 года;
HTML 3.2 — 14 января 1997 года;
HTML 4.0 — 18 декабря 1997 года;
HTML 4.01 (изменения, причём более значительные, чем кажется на первый взгляд) — 24 декабря 1999 года;
ISO/IEC 15445:2000 (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года.
HTML 5] — в разработке. Конец разработки запланирован на 2014 год.

Официальной спецификации HTML 1.0 не существует. До 1995 года существовало множество неофициальных описаний HTML. Чтобы стандартная версия отличалась от них, ей сразу присвоили второй номер.
Тема 8. Создание сайтов в Интернет. Язык HTMLВерсии HTMLВерсии хронология. RFC 1866 — HTML 2.0, одобренный

Слайд 8Тема 8. Создание сайтов в Интернет. Язык HTML
Версии HTML
Браузерные войны
В

середине 1990-х годов основные производители браузеров — компании Netscape и

Microsoft — начали внедрять собственные наборы элементов в HTML-разметку. Создалась путаница из различных конструкций для работы во Всемирной паутине, доступных для просмотра то в одном, то в другом браузере. Особенно большие трудности были при создании кросс-браузерных программ на языке JavaScript. Веб-мастерам приходилось создавать несколько вариантов страниц или прибегать к другим ухищрениям.
На какое-то время проблема потеряла актуальность по двум причинам:
Из-за вытеснения браузером Internet Explorer всех остальных браузеров.
Существовало два пути - которые либо следовать стандартам W3C (как Mozilla и Opera), либо пытались создать максимальную совместимость с Internet Explorer.

На современном этапе можно констатировать рост популярности браузеров, следующих рекомендациям W3C (это Mozilla Firefox и другие браузеры на движке Gecko; Safari, Google Chrome, Opera).
Тема 8. Создание сайтов в Интернет. Язык HTMLВерсии HTMLБраузерные войныВ середине 1990-х годов основные производители браузеров —

Слайд 9Тема 8. Создание сайтов в Интернет. Язык HTML
Принципы гипертекстовой разметки
HTML

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

(теги).
Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами, то есть документ НТМL представляет собой не что иное, как обычный АSСII-файл, с добавленными в него управляющими НТМL -кодами (тегами ).

Тег - элемент языка разметки гипертекста. Более правильное название — дескриптор.

НТМL- тег состоит из имени, за которым может следовать необязательный список атрибутов тега.
Обозначение тега заключается в угловые скобки ("<" и ">"). Простейший вариант тега — имя, заключенное в угловые скобки, например, .
Для ряда тегов характерно наличие атрибутов, которые могут иметь конкретные значения, устанавливаемые для изменения функции тега.
Например, при описании таблицы открывающий тег с атрибутами может выглядеть так:

CELLSPACING=2 BORDER=16>
Эта запись означает следующее: таблица шириной 570 пикселов, выровнена по центру, поле между рамкой и содержимым ячеек 10 пикселов, поле рамки 2 пиксела, ширина бордюра 16 пикселов.
Тема 8. Создание сайтов в Интернет. Язык HTMLПринципы гипертекстовой разметкиHTML является описательным языком разметки документов, в нем

Слайд 10Тема 8. Создание сайтов в Интернет. Язык HTML
Группы тегов
Теги

могут быть двух видов:
парные
не парные
Все теги НТМL по их назначению

и области действия можно разделить на следующие основные группы:
• определяющие структуру документа;
• оформление блоков гипертекста (параграфы, списки, таблицы, картинки);
• гипертекстовые ссылки и закладки;
• формы для организации диалога;
• вызов программ.

Кроме тегов, элементами HTML являются CER (Character Entity Reference), они предназначены для представления специальных символов, которые могут быть неверно обработаны браузером. Предположим, создается документ HTML, речь в котором идет об элементах данного языка. Если указать имя тега просто в документе, браузер может воспринять его как обычный тег. Для вывода таких символов и используется CER.
ПРИМЕР. Для того, чтобы представить символ "<" в документе HTML, нужно заменить его на <, а символ ">" — на >. То есть, если указать в тексте HTML строку <BODY>, она будет выглядеть на экране как текст .

Тема 8. Создание сайтов в Интернет. Язык HTMLГруппы тегов Теги могут быть двух видов:парныене парныеВсе теги НТМL

Слайд 11Тема 8. Создание сайтов в Интернет. Язык HTML
CER начинается с

амперсанда "&". В отличие от наименований тегов HTML, наименования

CER чувствительны к регистру символов. Также наименования CER могут задаваться не в виде имени, а с помощью трехзначных кодов символов в виде &#nnn;.
В таблице приведены наиболее часто используемые CER и соответствующие им числовые коды.

CER

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

Тема 8. Создание сайтов в Интернет. Язык HTMLCER начинается с амперсанда

Слайд 12Тема 8. Создание сайтов в Интернет. Язык HTML
Атрибуты тега следуют

за именем и отделяются друг от друга одним или несколькими

знаками табуляции, пробелами или символами возврата к началу строки.
Порядок записи атрибутов в теге значения не имеет.
Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов.
<тег параметр1=«значение» параметр2=«значение» параметр3=«значение»>
Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов.
Если при написании тега не добавить параметр, то его значение будет задано по умолчанию.
ПРИМЕР. Абзац по умолчанию выравнивается по левому краю. Для выравнивания по центру, нужно прописать значение параметра align:

Текст страницы с выравниванием по центру


Атрибуты тега

Тема 8. Создание сайтов в Интернет. Язык HTMLАтрибуты тега следуют за именем и отделяются друг от друга

Слайд 13Тема 8. Создание сайтов в Интернет. Язык HTML
Элементы разметки HTML

или HTML -контейнеры состоят из начального и конечного компонентов (парных

тегов), между которыми размещаются текст и другие элементы документа.
Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта ( / )
Общая схема построения контейнера в формате HTML:
"контейнер"=
<"имя тега" "список атрибутов">
содержание контейнера

ПРИМЕР - контейнеры
для тега стиля шрифта — курсив закрывающая пара представляет собой ,
для тега заголовка <ТIТLЕ> закрывающей парой будет .
Конечные теги никогда не содержат атрибутов. По своему значению теги близки к понятию скобок "begin/end" в универсальных языках программирования, которые задают области действия имен локальных переменных и т.п.

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

HTML -контейнеры

Тема 8. Создание сайтов в Интернет. Язык HTMLЭлементы разметки HTML или HTML -контейнеры состоят из начального и

Слайд 14Тема 8. Создание сайтов в Интернет. Язык HTML
В некоторых случаях

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

что при обработке текста документа начальный тег воспринимается как конечный тег предыдущего.
Самый распространенный тег такого типа — тег абзаца <Р>.
Поскольку он используется в документе очень часто, его обычно ставят только в начале каждого абзаца. Когда один абзац заканчивается, следующий тег <Р> сигнализирует браузеру о том, что нужно завершить данный абзац и начать следующий.

Тем не менее, рекомендуется включать по возможности больше конечных тегов, чтобы избежать путаницы и ошибок при воспроизведении документа.
Тема 8. Создание сайтов в Интернет. Язык HTMLВ некоторых случаях конечные теги в документе можно опускать. Большинство

Слайд 15Тема 8. Создание сайтов в Интернет. Язык HTML
Структура HTML-документа
HTML-документ -

это один большой контейнер, который начинается с тега и

заканчивается тегом :
Содержание документа

Контейнер HTML или гипертекстовый документ состоит из двух других вложенных контейнеров:
заголовка документа ( HEAD )
тела документа ( BODY ).



Документ HTML


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


Добро пожаловать в WWW
Я, Иванов Иван Иванович, новый автор HTML-документов


Пример простого документа на языке HTML

Пример

Тема 8. Создание сайтов в Интернет. Язык HTMLСтруктура HTML-документаHTML-документ - это один большой контейнер, который начинается с

Слайд 16Тема 8. Создание сайтов в Интернет. Язык HTML
Компания Netscape Communication

расширила классическую форму документа HTML возможностью организации фреймов (кадров), позволяющих

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

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

Фрейм (англ. Frame) — элемент (виджет) графического интерфейса пользователя, который является контейнером для других объектов. Очень схож с окном по своим свойствам, но отличается от него тем, что не может находиться внутри аналогичного контейнера..

В HTML этот вид для удобной группировки окна разделяет экран на несколько частей, в каждом контейнере отображается необходимая информация из разных источников информации. Это и есть главное достоинство фреймов, группирование — на одной странице может находиться объединённая информация с разных источников в сети.

Тема 8. Создание сайтов в Интернет. Язык HTMLКомпания Netscape Communication расширила классическую форму документа HTML возможностью организации

Слайд 17Тема 8. Создание сайтов в Интернет. Язык HTML


Документ с фреймами

COLS="30%,*">




Пример простого документа
в левом фрейме
Дополнительный

документ
в правом фрейме

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

ПРИМЕР использования фреймов

Тема 8. Создание сайтов в Интернет. Язык HTMLДокумент с фреймамиПример простого документа в левом фреймеДополнительный документ в

Слайд 18Тема 8. Создание сайтов в Интернет. Язык HTML
Заголовок HTML-документа не

является обязательным элементом. В HTML 2.0 даже предлагалось отказаться от

элементов HEAD и BODY. На практике почти в каждом документе есть HTML- заголовок. Для этого есть две основных причины:

Назначение заголовка

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

Важная роль заголовка при использовании JavaScript. Существует принципиальная разница между заголовком и телом документа при использовании элемента разметки SCRIPT. Она заключается в определении зоны видимости функций и переменных. Переменные и функции, определенные в заголовке документа, относятся ко всему окну браузера. Это значит, что к ним можно обратиться из любого места документа и изменить их значения. Кроме того, к ним можно обратиться из другого окна или фрейма. Фактически, это глобальные переменные. Это свойство полезно при программировании на JavaScript.

Тема 8. Создание сайтов в Интернет. Язык HTMLЗаголовок HTML-документа не является обязательным элементом. В HTML 2.0 даже

Слайд 19Тема 8. Создание сайтов в Интернет. Язык HTML
Структура HTML-документа

Тема 8. Создание сайтов в Интернет. Язык HTMLСтруктура HTML-документа

Слайд 20Тема 8. Создание сайтов в Интернет. Язык HTML
Назначение заголовка
Задумывался заголовок

для несколько иных целей. Исходя из общих соображений, связанных с

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

Контекстные гипертекстовые связи соответствуют определенному месту документа — контексту. В HTML такие связи реализованы в виде гипертекстовых ссылок (элемент A (anchor)). Фактически до реализации таблиц описателей стилей в современных браузерах это был единственный вид связей, которыми мог управлять автор HTML-документа.

Общие гипертекстовые связи определяются не частью документа (контекстом), а всем документом целиком. Например, быть предыдущим по отношению к другому документу или следующим — это общая гипертекстовая связь, которая позволяет организовать так называемый "линейный" просмотр информационных узлов гипертекстовой сети.
Реализация такого сорта ссылок уже давно является частью проектов W3C - Консорциума Всемирной паутны (англ. World Wide Web Consortium, W3C), разрабатывающего технологические стандарты для Всемирной паутины.

Тема 8. Создание сайтов в Интернет. Язык HTMLНазначение заголовкаЗадумывался заголовок для несколько иных целей. Исходя из общих

Слайд 21Тема 8. Создание сайтов в Интернет. Язык HTML
Теги тела документа
Теги

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

Они описывают гипертекстовую структуру данных при помощи встроенных в текст контекстных гипертекстовых ссылок.
Тело документа ограничивается тегами - и

Тело документа может в себя включать:

• иерархические контейнеры;
• заголовки разделов (от Н1 до Н6 );
• блоки (параграфы, списки, формы, таблицы, картинки и т.п.);
• горизонтальных подчеркивания и адреса;
• текст, разбитый на области действия стилей (подчеркивание, выделение, курсив);
• математические описания;
графику;
гипертекстовые ссылки.
Тема 8. Создание сайтов в Интернет. Язык HTMLТеги тела документаТеги тела документа предназначены для управления отображением информации

Слайд 22Тема 8. Создание сайтов в Интернет. Язык HTML
Тело документа –

контейнер BODY
Описание документа следует заключать в парные теги и


В отличие от тега НEАD, тег BODY имеет атрибуты.

Атрибут BАСКGROUND определяет фон, на котором отображается текст документа.
Источником для фона HTML- документа может являться графический файл, например image.gif. В этом случае в теге тела BODY появляется соответствующий атрибут:
<ВОDY ВАСКGROUND="image.gif">
Кроме этого, возможны различные дополнительные атрибуты для тега ВОDY

В данной таблице строка #ХХХХХХ определяет цвет в шестнадцатеричном коде. Также имеется возможность задавать цвета по названию – таблица 2 (стандарт HTML4).

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

Тема 8. Создание сайтов в Интернет. Язык HTMLТело документа – контейнер BODYОписание документа следует заключать в парные

Слайд 23Тема 8. Создание сайтов в Интернет. Язык HTML
Тело документа –

контейнер BODY
Заголовок раздела обозначает начало раздела документа. В стандарте определено

6 уровней заголовков: от Н1 до Н6.
Текст, окруженный тегами <Н1>, получается большим — это основной заголовок. Если текст окружен тегами <Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ> еще меньше и так далее до <Н6>. Некоторые программы позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 — крайне редко.



Документ HTML


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


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


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


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


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

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



Тема 8. Создание сайтов в Интернет. Язык HTMLТело документа – контейнер BODYЗаголовок раздела обозначает начало раздела документа.

Слайд 24Тема 8. Создание сайтов в Интернет. Язык HTML
Веб-браузеры не принимают

во внимание те символы перевода строки, которые вносятся в текст

пользователем на этапе его формирования текстовом редакторе.
Для начала обозначения нового абзаца в HTML служит тэг (тег)

.
После открытия страницы в окне Веб-браузера все абзацы текста, помеченные тегом

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

Примеры значений атрибута АLIGN

Тег


Тема 8. Создание сайтов в Интернет. Язык HTMLВеб-браузеры не принимают во внимание те символы перевода строки, которые

Слайд 25Тема 8. Создание сайтов в Интернет. Язык HTML
Теги и


Тег - принудительный перевод строки (обрыв строки)
Тег (Nо

Вrеаk, без обрыва) дает браузеру команду отображать весь текст в одной строке, не обрывая ее.

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

Атрибут СLЕАR в теге <ВR> используется для того, чтобы остановить в указанной точке обтекание объекта текстом и продолжить текст в пустой области за объектом. Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT, RIGHT или АLL атрибута СLЕАR:

Текст будет продолжен, начиная с ближайшего пустого левого поля.

Текст будет продолжен, начиная с ближайшего пустого правого поля.

Текст будет продолжен, как только оба поля окажутся пустыми.

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

Тема 8. Создание сайтов в Интернет. Язык HTMLТеги и Тег - принудительный перевод строки (обрыв строки)Тег

Слайд 26Тема 8. Создание сайтов в Интернет. Язык HTML
Теги управления отображением

символов
Все управления отображением символов можно разбить на два класса:
теги,

управляющие формой отображения (font style),
теги, характеризующие тип информации (information type).
Часто внешне разные теги при отображении дают одинаковый результат.

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

Атрибут SIZЕ тега позволяет задавать размер текста

Атрибут COLOR тега позволяет указывать цвета текста.

Тема 8. Создание сайтов в Интернет. Язык HTMLТеги управления отображением символовВсе управления отображением символов можно разбить на

Слайд 27Тема 8. Создание сайтов в Интернет. Язык HTML
Теги управления отображением

символов
Теги и — изменение размеров шрифта

Текст, расположенный между

тегами <ВIG> или , будет, соответственно, больше или меньше стандартного.

Теги и позволяют задавать верхние и нижние индексы, необходимые для записи торговых знаков, символов копирайта, ссылок и сносок. Рассматриваемые теги позволяют создать внутри текстовой области верхние или нижние индексы любого размера. Чтобы они казались меньше окружающего текста, можно использовать теги и с атрибутом FONT SIZE=-1, уменьшающим размер шрифта.

Теги, управляющие формой отображения, приведены в таблице

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

Тема 8. Создание сайтов в Интернет. Язык HTMLТеги управления отображением символовТеги и — изменение размеров шрифтаТекст, расположенный

Слайд 28Тема 8. Создание сайтов в Интернет. Язык HTML
Теги управления отображением

символов
Примеры некоторых шрифтов

Тема 8. Создание сайтов в Интернет. Язык HTMLТеги управления отображением символовПримеры некоторых шрифтов

Слайд 29Тема 8. Создание сайтов в Интернет…. Язык HTML
Браузеры игнорируют пустые

строки и избыточные пробелы внутри текста страницы. Тег позволяет

сохранять в неприкосновенности пустые области текста страницы. Браузер отображает подобный предварительно отформатированный текст с помощью моноширинных шрифтов. Это шрифт, в котором под каждую букву отводится область одинакового размера. Поэтому, используя предварительное форматирование, удобно сразу пользоваться одним из моноширинных шрифтов, например Courier. Тогда сразу будет видно, как текст будет располагаться на экране в окне браузера.
При обработке тэга 
, браузер отображает текст, заключенный в этот тэг, точно так, как он набран - не удаляя избыточных пробелов и переносов. Следует помнить, что слишком длинные строки могут не уместиться в пределах окна.
Удобно пользоваться предварительным форматированием для создания простых таблиц.
Теги управления отображением символов
Тема 8. Создание сайтов в Интернет…. Язык HTMLБраузеры игнорируют пустые строки и избыточные пробелы внутри текста страницы.

Слайд 30Тема 8. Создание сайтов в Интернет…. Язык HTML
Теги управления отображением

символов
Пример использования предварительного форматирования

Тема 8. Создание сайтов в Интернет…. Язык HTMLТеги управления отображением символовПример использования предварительного форматирования

Слайд 31Тема 8. Создание сайтов в Интернет Язык HTML
Создание списков в

HTML
Списки являются важным средством структурирования текста и применяются во всех

языках разметки. В НТМL имеются следующие виды списков:
ненумерованный список (неупорядоченный) (
    и
  • ). По умолчанию элементы списка маркируются черным кружочком. При помощи атрибута TYPE можно изменить стиль маркирования.
    нумерованный список (упорядоченный) (
      и
    1. ). По умолчанию элементы нумеруются по порядку. При помощи атрибута TYPE можно изменить стиль нумерации.
      список определений (
      ). Тэги
      и
      не обязательно чередовать. Можно "привязать" к одному определению несколько терминов, и, наоборот.
      Где:
        - отмечается начало/окончание ненумерованного списка
          - отмечается начало/окончание нумерованного списка.
        1. - обозначает начало/конец отдельного элемента списка
          - начало/конец списка определений
          - начало/конец конкретного термина
          - начало/конец поясняющей статьи термина
Тема 8. Создание сайтов в Интернет Язык HTMLСоздание списков в HTMLСписки являются важным средством структурирования текста и

Слайд 32Тема 8. Создание сайтов в Интернет. Язык HTML

Примеры использования атрибута TYPE

для
нумерованного списка ненумерованного списка

Создание списков в HTML

Тема 8. Создание сайтов в Интернет. Язык HTML Примеры

Слайд 33Тема 8. Создание сайтов в Интернет. Язык HTML
Создание списков в

HTML
Пример создания списка определений

Тема 8. Создание сайтов в Интернет. Язык HTMLСоздание списков в HTMLПример создания списка определений

Слайд 34Тема 8. Создание сайтов в Интернет. Язык HTML
Горизонтальные линейки —

тег
Горизонтальное отчеркивание (Horizontal Rule) применяется для разделения документа на

части. С помощью одного лишь тега <НR> можно придать странице оригинальный вид.

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

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

Тема 8. Создание сайтов в Интернет. Язык HTMLГоризонтальные линейки — тег Горизонтальное отчеркивание (Horizontal Rule) применяется для

Слайд 35Тема 8. Создание сайтов в Интернет. Язык HTML
Горизонтальные линейки
Комментарии
Пример

Тема 8. Создание сайтов в Интернет. Язык HTMLГоризонтальные линейки КомментарииПример

Слайд 36Тема 8. Создание сайтов в Интернет. Язык HTML
Гипертекстовые ссылки
Основной элемент

HTML-документа — гипертекстовая ссылка.
Для задания гипертекстовой ссылки используется тег

<А>, который называют "якорь" (аnchor). Якорь имеет несколько атрибутов, главным из которых является НREF. Простая ссылка имеет следующий вид:

<А НREF="http://do.ui-miit.ru/index.html">Гипертекстовая ссылка



где значение атрибута HREF — адрес документа "index.htm" на машине “do.ui-miit.ru", доступ к которой осуществляется по протоколу НТТР. Такая форма записи адреса HTML-документа называется универсальным локатором ресурсов URL и является составной частью технологии WWW.

Строго говоря, представленный адрес является не полным и согласно HTTP, полный адрес информационного ресурса должен содержать еще ряд элементов: идентификатор пользователя; пароль; номер TCP-порта, на котором ведет обслуживание сервер; путь в корневом каталоге сервера к файлу ресурса и ряд других.
На практике вполне достаточно представленного выше формата задания адреса.

Тема 8. Создание сайтов в Интернет. Язык HTMLГипертекстовые ссылкиОсновной элемент HTML-документа — гипертекстовая ссылка. Для задания гипертекстовой

Слайд 37Тема 8. Создание сайтов в Интернет. Язык HTML
Гипертекстовые ссылки
Содержание контейнера

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

в тексте цветом, определенным для контекстных гипертекстовых ссылок. В атрибутах тега <ВОDY>:

Гиперссылка может связывать страницы как одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться адресом страницы рассмотренного вида (http://www.site.com/page.html). Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html).

Тема 8. Создание сайтов в Интернет. Язык HTMLГипертекстовые ссылкиСодержание контейнера гипертекстовой ссылки, заключенное между тегом начала и

Слайд 38Тема 8. Создание сайтов в Интернет. Язык HTML
Гипертекстовые ссылки
Когда необходимо

сделать гиперссылку в пределах одной страницы, надо дать этой области

название при помощи атрибута NAME тэга . Имя должно содержать только буквы и цифры. В место, куда надо сделать переход (например начало параграфа 1) надо вставить метку:


Тогда для перехода на эту точку (метку) достаточно сделать следующую ссылку

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

При помощи атрибута TARGET можно загрузить страницу (на которую делается ссылка) в новом окне браузера. Этот атрибут предназначен для задания наименования окна. Имя окна используется в служебных целях. Чтобы открыть страницу в новом окне надо использовать константу _blank. Такая ссылка имеет следующий вид:

Ссылка на главную страницу сайта

Тема 8. Создание сайтов в Интернет. Язык HTMLГипертекстовые ссылкиКогда необходимо сделать гиперссылку в пределах одной страницы, надо

Слайд 39Тема 8. Создание сайтов в Интернет. Язык HTML
Гипертекстовые ссылки
Пример простой

ссылки:
Глава вторая
В данном примере фраза «Глава вторая»

является ссылкой на HTML –документ, содержащийся в файле GLAVA2.HTM, в том же каталоге (папке), что и текущий документ.

Если же документ находится в другом каталоге, то
необходимо указать имя этого каталога, например:
Глава вторая

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

Здесь http:/www.cpress.ru – URL – Uniform Resource Locator (унифицированный адрес ресурсов).

Тема 8. Создание сайтов в Интернет. Язык HTMLГипертекстовые ссылкиПример простой ссылки: Глава вторая В данном примере фраза

Слайд 40Тема 8. Создание сайтов в Интернет. Язык HTML (ч. 2)
Использование

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

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

Самыми распространенными графическими форматами в Web являются GIF и JPEG. GIF — наиболее подходящий формат для обмена изображениями между системами. Архивы с изображениями в формате GIF можно найти на многих серверах Internet. Данный формат поддерживают многие графические приложения, в том числе все программы просмотра графики World Wide Web. Однако для больших изображений фотографического качества больше подходит формат JPEG.

Тема 8. Создание сайтов в Интернет. Язык HTML (ч. 2)Использование графики в HTMLГрафические изображения придают Web-странице привлекательный

Слайд 41Тема 8. Создание сайтов в Интернет. Язык HTML
Использование графики в

HTML
Большинство изображений, существующих в Web, представлены в трёх растровых форматах:

GIF, JPEG и PNG.
Формат GIF (Grafic Interchange Format) был первым форматом файлов, который поддерживался Web-браузерами. GIF представляет собой файлы индексированных 8-разрядных цветов, что определяет максимум 256 цветов. Поскольку этот формат сжимает информацию о цветах по строкам пикселов, GIF-файлы лучше всего подходят для графики, которая содержит области равномерного цвета. Другим достоинством этого формата является возможность анимации графических изображений, состоящих из нескольких сменяющих друг друга кадров.
Формат JPEG. Вторым наиболее популярным графическим форматом в Web является JPEG (Joint Photographic Experts Group). Он содержит 24-разрядную информацию о цвете. В JPEG используется так называемое сжатие с потерями. Это означает, что часть информации об изображении в процессе сжатия теряется, но в большинстве случаев ухудшение качества не заметно. В этом формате лучше всего сохранять фотографии или любые изображения с плавными градациями цветов, так как он предлагает более высокое качество изображения в файле меньшего объема.
Формат PNG. Третий графический формат – это PNG (Portable Network Graphic), постепенно становится очень популярным в Web. PNG может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или 24-разрядные полноцветные изображения, используя схему сжатия без потерь. Это обеспечивает более высокое качество изображений, а иногда и меньший объем файлов по сравнению с форматом GIF за счёт использования специальных алгоритмов сжатия.
Тема 8. Создание сайтов в Интернет. Язык HTMLИспользование графики в HTMLБольшинство изображений, существующих в Web, представлены в

Слайд 42Тема 8. Создание сайтов в Интернет. Язык HTML
GIF

JPEG

PNG ПРИМЕРЫ
Тема 8. Создание сайтов в Интернет. Язык HTMLGIF

Слайд 43Тема 8. Создание сайтов в Интернет. Язык HTML
Компьютеры работают с

графикой в векторном или растровом формате.

Векторная графика описывает

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

Векторная и растровая графика

Тема 8. Создание сайтов в Интернет. Язык HTMLКомпьютеры работают с графикой в векторном или растровом формате. Векторная

Слайд 44Тема 8. Создание сайтов в Интернет. Язык HTML
Векторная и растровая

графика

Тема 8. Создание сайтов в Интернет. Язык HTMLВекторная и растровая графика

Слайд 45Тема 8. Создание сайтов в Интернет. Язык HTML
Векторная и растровая

графика

Тема 8. Создание сайтов в Интернет. Язык HTMLВекторная и растровая графика

Слайд 46Тема 8. Создание сайтов в Интернет. Язык HTML
Векторная и растровая

графика

Тема 8. Создание сайтов в Интернет. Язык HTMLВекторная и растровая графика

Слайд 47Тема 8. Создание сайтов в Интернет. Язык HTML
Использование графики в

HTML
Тегом HTML, который заставляет браузер выводить изображение, является < IMG

> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется. Часть пользователей отключают в своих браузерах поддержку графики для увеличения скорости работы в Интернете. Атрибут Alt позволяет создать текст, который при необходимости должен быть отображен вместо графики. Пример вставки изображения:

ИЗОБРАЖЕНИЯ

Изображения на Web-странице могут использоваться в качестве гипертекстовых ссылок. Посетитель страницы щелкает на изображении и переходит на другую страницу или к другому изображению. Для создания изображения как гипертекстовой ссылки используется тот же тег , что и для текста, но между и вставляется тег изображения < IMG > :



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

Тема 8. Создание сайтов в Интернет. Язык HTMLИспользование графики в HTMLТегом HTML, который заставляет браузер выводить изображение,

Слайд 48Тема 8. Создание сайтов в Интернет. Язык HTML
Использование графики в

HTML
Пример вставки изображений в Web-страницу

Тема 8. Создание сайтов в Интернет. Язык HTMLИспользование графики в HTMLПример вставки изображений в Web-страницу

Слайд 49Тема 8. Создание сайтов в Интернет. Язык HTML
Атрибуты и их

аргументы
Использование графики в HTML
Тег изображения имеет один обязательный атрибут SRC

и необязательные:
ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.

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

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

АLIGN-определяет положение изображения относительно окружающего его текста. Возможные значения аргумента - "top" | "middle" | "bottom" (соответственно, "вверху", "посередине", "внизу"). Существует еще ряд значений, которые расширяют возможности размещения графики и текста.

BORDER-целочисленное значение аргумента определяет толщину рамки вокруг изображения. Если значение равно нулю, рамка отсутствует (BORDER=n)

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

VSPACE-целочисленное значение этого атрибута задает вертикальное расстояние между строками текста и изображением. (в пикселях)

WIDTH и HEIGHT - задают целочисленные значения размеров изображения по горизонтали и по вертикали соответственно (в пикселях или %).

Тема 8. Создание сайтов в Интернет. Язык HTMLАтрибуты и их аргументыИспользование графики в HTMLТег изображения имеет один

Слайд 50Тема 8. Создание сайтов в Интернет. Язык HTML
Использование графики в

HTML
Основные операции с графикой при создании документа HTML

Вставка изображения
Добавление

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

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

Тема 8. Создание сайтов в Интернет. Язык HTMLИспользование графики в HTMLОсновные операции с графикой при создании документа

Слайд 51Тема 8. Создание сайтов в Интернет. Язык HTML
Использование графики в

HTML
Добавление фона. Если белый фон страницы не устраивает, то с

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

Основные операции с графикой при создании документа HTML

Тема 8. Создание сайтов в Интернет. Язык HTMLИспользование графики в HTMLДобавление фона. Если белый фон страницы не

Слайд 52Тема 8. Создание сайтов в Интернет. Язык HTML
Использование графики в

HTML
Обтекание графики текстом
Для того, чтобы графический рисунок органически вписывался в

дизайн страницы, следует использовать атрибут ALIGN тэга .Этот атрибут допускает два значения – left и right.
Значение left заставляет браузер помещать изображение слева от текста, а right - справа от него. Значения left, right, all атрибута CLEAR позволяют определить, с какой стороны - левой, правой, обеих - текст далее будет свободен от графики. Значения: all - отменяет обтекание элемента одновременно с правого и левого края; left - отменяет обтекание с левой стороны; right - отменяет обтекание с правой стороны; none - отменяет действие атрибута.
Атрибут ALIGN дает возможность разместить текст между двумя графическими изображениями. В этом случае тэги, описывающие изображения, должны быть расположены над текстом, который будет заключен между ними.
Тема 8. Создание сайтов в Интернет. Язык HTMLИспользование графики в HTMLОбтекание графики текстомДля того, чтобы графический рисунок

Слайд 53Тема 8. Создание сайтов в Интернет. Язык HTML
Таблицы в HTML
По

мере развития WWW стало ясно, что средств, которые заложены в

НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц.

Для этой цели обычно использовался тег 
 , в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. 
После введения таблиц в HTML появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.
На примере использование таблицы служит лишь целям форматирования документа, задания взаимного расположения элементов страницы.
Тема 8. Создание сайтов в Интернет. Язык HTMLТаблицы в HTMLПо мере развития WWW стало ясно, что средств,

Слайд 54Тема 8. Создание сайтов в Интернет. Язык HTML
Таблицы в HTML
Описание

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

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

Каждая строка начинается тэгом (Table Row) и завершается тэгом . Отдельная ячейка в строке обрамляется парой тегов и (Table Data) или и (Table Header). Тег используется обычно для ячеек-заголовков таблицы, а — для ячеек-данных.
Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа отображается полужирным (Bold) шрифтом и располагается по центру (ALIGN=CENTER, VALIGN=MIDDLE). Ячейки, определенные тэгом по умолчанию отображают данные, выровненные влево (ALIGN=LEFT) и посередине (VALIGN=MIDDLE) в вертикальном направлении.

Тема 8. Создание сайтов в Интернет. Язык HTMLТаблицы в HTMLОписание таблиц должно располагаться внутри раздела документа .

Слайд 55Тема 8. Создание сайтов в Интернет. Язык HTML
Тэги и

не могут появляться вне описания строки таблицы . Завершающие

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

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

Таблицы в HTML

Тема 8. Создание сайтов в Интернет. Язык HTMLТэги и не могут появляться вне описания строки таблицы .

Слайд 56Тема 8. Создание сайтов в Интернет. Язык HTML
Таблицы в HTML
Использование

заголовков таблицы - тег
Теги и позволяют создавать

заголовки таблицы.
Описание заголовка таблицы должно располагаться внутри тегов и
в любом месте, однако вне области описания любого из тегов , или .
По умолчанию заголовки центрируются и размещаются либо над ( <САРТION АLIGN=top> ), либо под таблицей (<САРТION ALIGN=bottom> ). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы.

Пример задания заголовка таблицы:

Заголовок,
располагаемый внизу тaблицы

Тема 8. Создание сайтов в Интернет. Язык HTMLТаблицы в HTMLИспользование заголовков таблицы - тег Теги и

Слайд 57Тема 8. Создание сайтов в Интернет. Язык HTML
Таблицы в HTML
Атрибут

NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы,

переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если необходимо сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.
Тема 8. Создание сайтов в Интернет. Язык HTMLТаблицы в HTMLАтрибут NOWRAPОбычно любой текст, не помещающийся в одну

Слайд 58Тема 8. Создание сайтов в Интернет. Язык HTML
Таблицы в HTML
Атрибут

ROWSPAN
Атрибут ROWSPAN, используемый в тегах и , подобен атрибуту

СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если указать в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк будет находиться в растягиваемой ячейке.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если задать в теге <ТАВLЕ> WIDTH=250, то получится таблица шириной 250 пикселей независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, надо иметь в виду, что если у пользователя узкая область просмотра, страница может выглядеть несколько странно. Если таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.
Тема 8. Создание сайтов в Интернет. Язык HTMLТаблицы в HTMLАтрибут ROWSPANАтрибут ROWSPAN, используемый в тегах и ,

Слайд 59Тема 8. Создание сайтов в Интернет. Язык HTML
Применение пустых ячеек
Если

ячейка не содержит данных, она не будет иметь границ. Если

требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.

Таблицы в HTML

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

Тема 8. Создание сайтов в Интернет. Язык HTMLПрименение пустых ячеекЕсли ячейка не содержит данных, она не будет

Слайд 60Тема 8. Создание сайтов в Интернет. Язык HTML
Атрибуты АLIGN и

VALIGN
Теги , и можно модифицировать с помощью атрибутов

ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали.
Горизонтальное выравнивание может быть задано несколькими способами:

Таблицы в HTML

ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.
ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
АLIGN=сеnter располагает содержимое ячейки по центру.
АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

VALIGN=top выравнивает содержимое ячейки по ее верхней границе.

VALIGN=middle центрирует содержимое ячейки по вертикали.

VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.

Тема 8. Создание сайтов в Интернет. Язык HTMLАтрибуты АLIGN и VALIGNТеги , и можно модифицировать с помощью

Слайд 61Тема 8. Создание сайтов в Интернет. Язык HTML
Таблицы в HTML
Атрибуты

тега
Атрибут BORDER
В теге часто определяют, как будут выглядеть

рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если не зададть рамку, то получится таблица без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Однако, часто необходимо сделать границу потолще, чтобы она лучше выделялась.

Атрибут CELLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам.

Атрибут BGCOLOR позволяет установить цвет фона. В зависимости от того, с каким тегом ( TABLE, TR, TD ) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.

Атрибут BACKGROUND задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением.

Тема 8. Создание сайтов в Интернет. Язык HTMLТаблицы в HTMLАтрибуты тега Атрибут BORDERВ теге часто определяют, как

Слайд 62Тема 8. Создание сайтов в Интернет. Язык HTML
Таблицы в HTML
Пример

таблиц с различными границами

Тема 8. Создание сайтов в Интернет. Язык HTMLТаблицы в HTMLПример таблиц с различными границами

Слайд 63Тема 8. Создание сайтов в Интернет... Язык HTML
Таблицы позволяют сделать

их границы невидимыми. Это дает возможность с помощью тега

красиво размещать на странице текст и графику.
Тег <ТАВLЕ> является единственным мощным средством форматирования в HTML.

Использование таблиц в дизайне страницы

Тема 8. Создание сайтов в Интернет... Язык HTMLТаблицы позволяют сделать их границы невидимыми. Это дает возможность с

Слайд 64Тема 8. Создание сайтов в Интернет. Язык HTML
Таблицы в HTML

Тема 8. Создание сайтов в Интернет. Язык HTMLТаблицы в HTML

Слайд 65Тема 8. Создание сайтов в Интернет. Язык HTML
HTML позволяет легко

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

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

HTML-формы

Чтобы избежать подобных ситуаций, фирмой Netscape был разработан специальный язык сценариев JavaScript. Программы, написанные на этом языке, встраиваются в документ HTML и интерпретируются браузером, используемым для его просмотра. Подобная технология снимает нагрузку на сеть, избавляя пользователя от ненужных пересылок недостоверной информации, ибо теперь можно написать выполняемый на стороне клиента код для проверки введенных данных. Фирма Microsoft разработала собственный язык сценариев — VBScript, являющийся подмножеством широко используемого для разработки Windows-приложений языка Visual Basic.

ПРИМЕЧАНИЕ. CGI также может означать «Computer‐generated imagery» — компьютерные спецэффекты или CGI (от англ. Common Gateway Interface — «общий интерфейс шлюза») — стандарт интерфейса, используемого для связи внешней программы с веб-сервером. Программу, которая работает по такому интерфейсу совместно с веб-сервером, принято называть шлюзом, хотя многие предпочитают названия «скрипт» (сценарий) или «CGI-программа».

Тема 8. Создание сайтов в Интернет. Язык HTMLHTML позволяет легко и быстро создавать Web-страницы, передаваемые по Интернет.Однако

Слайд 66Тема 8. Создание сайтов в Интернет. Язык HTML
HTML-формы
Формы используются в

WWW для получения отклика посетителей сайта на предоставленную информацию и

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

ПРИМЕР. Форма

Тема 8. Создание сайтов в Интернет. Язык HTMLHTML-формыФормы используются в WWW для получения отклика посетителей сайта на

Слайд 67Тема 8. Создание сайтов в Интернет. Язык HTML
Простота использования тега

в формах позволяет даже владельцам небольших страниц получать отклик

от своих читателей.
Для обработки большого количества откликов используются программы, поддерживающие Common Gateway Interface (CGI) и расположенные на сервере, в адрес которого поступают отклики. Таким образом пользователь может интерактивно взаимодействовать с Web-сервером через Internet.

HTML-формы

Common Gateway Interface (CGI) - протокол, определяющий стандартный способ, которым внешние программы взаимодействуют с веб-сервером или другими информационными серверами. Программы, соответствующие этому протоколу, называются CGI-программами. (CGI-программы, созданные на любом языке, называются CGI-скриптами). Применять можно любой язык программирования или написания сценариев, но при условии, что конечным результатом будет исполняемый файл, который может читать и записывать информацию в формате, определенном в протоколе CGI (C, Visual Basic, AppleScript и Java).

Для организации обратной связи можно использовать – форму связи или html ссылку, после клика по которой открывается почтовая программа. – тег .

Тема 8. Создание сайтов в Интернет. Язык HTMLПростота использования тега в формах позволяет даже владельцам небольших страниц

Слайд 68Тема 8. Создание сайтов в Интернет. Язык HTML
Элемент FORM обозначает

форму и определяет границы использования других тегов, размещаемых в форме.


Тег определяется последовательностью тегов , размещенных внутри пары и . В форме используется как метод ( method ), так и действие ( action ) для описания обработки данных, вводимых пользователем в форму. Метод ( GET или POST ) определяет, как должны обрабатываться входные данные из формы,
Действие указывает на URI (Uniform Resource Identifier) – адрес программы, ответственной за обработку этих данных.

ACTION=mailto:yourname@your.email.address>

HTML-формы

Тема 8. Создание сайтов в Интернет. Язык HTMLЭлемент FORM обозначает форму и определяет границы использования других тегов,

Слайд 69Тема 8. Создание сайтов в Интернет. Язык HTML
Определение элементов управления

формы — тег
Данный тег используют для определения области внутри

формы, куда вводятся данные. Он формирует поле для ввода информации пользователем. Это может быть текстовое поле, опция, изображение или кнопка. Вид поля ввода определяется значением атрибута TYPE.

Атрибут TYPE=text
Когда пользователю необходимо ввести небольшое количество текста (одну или несколько строк), используется тег , и атрибут TYPE устанавливается в значение text. Это значение принято по умолчанию и указывать его необязательно. Кроме того, задается атрибут NAME для определения наименования переменной поля.

Имя

HTML-формы

Имеется еще три дополнительных атрибута, которые можно использовать. Первый называется MAXLENGTH, он ограничивает число символов, вводимых пользователем в поле. По умолчанию данное число не ограничено. Вторым атрибутом является SIZE - размер видимой на экране области, занимаемой текущим полем. Значение по умолчанию определяется типом браузера. Если значение MAXLENGTH больше, чем SIZE, браузер будет прокручивать данные в окне. Третий - атрибут VALUE, обеспечивающий начальное значение поля ввода.

Тема 8. Создание сайтов в Интернет. Язык HTMLОпределение элементов управления формы — тег Данный тег используют для

Слайд 70Тема 8. Создание сайтов в Интернет. Язык HTML
Атрибут TYPE=checkbox
Для создания

независимых флагов в формах HTML используется тег со значением

атрибута TYPE=checkbox. В зависимости от содержания формы пользователь может отметить несколько флагов. Когда форма использует тег со значением атрибута CHECKBOX, в нем должны присутствовать и атрибуты NAME, и VALUE. Атрибут NAME указывает на наименование данного поля (флага) ввода. В атрибуте VALUE будет содержаться значение поля.
В некоторых случаях необходимо инициализировать данный флаг, как уже отмеченный. В таких случаях тег должен содержать атрибут CHECKED.

HTML-формы

Атрибут TYPE=radio для выбора одного из нескольких возможных значений. Для этого используется тег с атрибутом TYPE=radio. Когда в форме применяется данный атрибут, в теге должны быть указаны атрибуты NAME и VALUE. Атрибут NAME указывает наименование соответствующего поля (кнопки). Атрибут VALUE содержит значение поля.

Тема 8. Создание сайтов в Интернет. Язык HTMLАтрибут TYPE=checkboxДля создания независимых флагов в формах HTML используется тег

Слайд 71Тема 8. Создание сайтов в Интернет. Язык HTML
HTML-формы
Значения атрибута type

и получаемый вид поля формы

Тема 8. Создание сайтов в Интернет. Язык HTMLHTML-формыЗначения атрибута type и получаемый вид поля формы

Слайд 72Тема 8. Создание сайтов в Интернет. Язык HTML
HTML-формы
Новые значения type

в HTML5
Поддержка браузерами значений HTML5

Тема 8. Создание сайтов в Интернет. Язык HTMLHTML-формыНовые значения type в HTML5 Поддержка браузерами значений HTML5

Слайд 73Тема 8. Создание сайтов в Интернет. Язык HTML
Фреймы
Фрейм означает: рамка,

окошко или страница. Вводя тег < FRAME>, дизайнер НТМL-страницы разделяет

экран браузера на части. В результате человек, просматривающий страницу, может изучать только одну ее часть, независимо от остального содержимого.
Фреймы разделяют окно браузера на отдельные области. В каждую из таких областей загружается самостоятельная веб-страница.
ПРИМЕР. Фрейм может использоваться для того чтобы фирменный знак был зафиксирован в верхней части экрана, в то время как остальную часть страницы пользователь пролистывает обычным способом. Можно расположить сбоку кнопки навигации, которые не перемещаются, когда читатель щелкает по ним мышкой, так что изменяется только часть экрана, а сама полоска навигации остается неподвижной.
Тема 8. Создание сайтов в Интернет. Язык HTMLФреймыФрейм означает: рамка, окошко или страница. Вводя тег < FRAME>,

Слайд 74Тема 8. Создание сайтов в Интернет. Язык HTML
Содержимое фрейма —

это отдельная HTML-страница, которая может находиться где угодно: в другом

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

Фреймы

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

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

Тема 8. Создание сайтов в Интернет. Язык HTMLСодержимое фрейма — это отдельная HTML-страница, которая может находиться где

Слайд 75Тема 8. Создание сайтов в Интернет. Язык HTML
Фреймы
ПРИМЕР. Построим страницу

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

а справа поместим страницу с самими статьями. Сделаем так, что когда пользователь щелкает мышкой на ссылке в той части экрана, где находится оглавление, сама статья появляется в правом фрейме. Это основной, наиболее распространенный способ использования фреймов.
Для начала необходимо представить себе общий вид страницы – где расположить фреймы и какого они будут размера. Затем - подумать об их содержании. Ниже приводится код простой фреймовой структуры с использованием тега . Еще раз: страница с фреймовой структурой не содержит тега <ВОDY>.



Пример фреймов






Тема 8. Создание сайтов в Интернет. Язык HTMLФреймыПРИМЕР. Построим страницу с двумя фреймами. Зададим слева фрейм оглавления

Слайд 76Тема 8. Создание сайтов в Интернет. Язык HTML
Фреймы
В обычном HTML-документе

при переходе по ссылке, в окне браузера текущий документ заменяется

новым. При использовании фреймов схема загрузки документов отличается от стандартной. Основное отличие — возможность загружать документ в выбранный фрейм из другого. Для этой цели используется атрибут TARGET тега . В качестве значения используется имя фрейма, в который будет загружаться документ, указанный атрибутом NAME. (NAME="main для ПРИМЕРА)

Загрузим фреймы с содержимым в ПРИМЕРЕ. Зададим страницу menu.html в левом фрейме, где будет оглавление. menu.html — это обычная НТМL-страница. Можно взять готовую страницу с оглавлением и использовать ее. Однако, этот фрейм узкий и высокий, так что страница, которая будет в него загружаться, должна быть спроектирована соответствующим образом.
Определяем, где будут появляться страницы при щелчке мышкой на ссылке. Поскольку они должны отображаться в правом фрейме, добавим атрибут ТАRGET (TARGЕТ="main" ) в тег ссылки. Это означает, что, когда пользователь щелкает на ссылке, вызываемая страница появляется в фрейме main. Поскольку все страницы должны отображаться в фрейме main, поэтому необходимо добавить атрибут ТАRGЕТ="main" во все теги ссылок в оглавлении. Если не определить атрибут ТАRGЕТ, то страница появится там, где щелкнули мышкой, — в левом фрейме.

Тема 8. Создание сайтов в Интернет. Язык HTMLФреймыВ обычном HTML-документе при переходе по ссылке, в окне браузера

Слайд 77Тема 8. Создание сайтов в Интернет. Язык HTML
Фреймы
Макетирование фреймов —

тег

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

размещается информация о числе фреймов, их размерах и ориентации (горизонтальной или вертикальной).
Тег имеет только два атрибута:

ROWS, задающий число строк,
СОLS, задающий число столбцов.

Между тегами не требуется указывать тег <ВОDY>.
Между тегами не должно быть никаких тегов или атрибутов, которые обычно используются между тегами <ВОDY>.
Единственными тегами, которые могут находиться между тегами и , являются теги < FRAME > и .
Допускается создать вложенные друг в друга теги аналогично тегам <ТАВLЕ>.
Тема 8. Создание сайтов в Интернет. Язык HTMLФреймыМакетирование фреймов — тег Теги обрамляют текст, описывающий компоновку

Слайд 78Тема 8. Создание сайтов в Интернет. Язык HTML
Основные атрибуты фреймов


Фреймы
Атрибут МАRGINWIDTH задает горизонтальный отступ между содержимым фрейма и его

границами. Наименьшее значение этого атрибута равно 1, по умолчанию = 6.

Атрибут МАRGINHEIGHT задает поля в верхней и нижней частях фрейма.

Атрибут SCROLLING дает возможность пользоваться прокруткой во фрейме. Возможные варианты: SCROLLING=yes, SCROLLING=nо, SCROLLING=аutо. Если документ слишком большой, а задан режим без прокрутки, документ просто будет обрезан. Если атрибут SCROLLING отсутствует, результат будет таким же, как при использовании SCROLLING=аutо.

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

Атрибут SRС применяется в теге FRАМЕ при разработке фреймовой структуры для того, чтобы определить, какая страница появится в том или ином кадре.

Атрибут ТАRGЕТ определяет целевой фрейм, в котором будет отображаться страница для каждого пункта оглавления.

Тема 8. Создание сайтов в Интернет. Язык HTMLОсновные атрибуты фреймов ФреймыАтрибут МАRGINWIDTH задает горизонтальный отступ между содержимым

Слайд 79Тема 8. Создание сайтов в Интернет. Язык HTML
Фреймы
Граница между фреймами

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

Чтобы ее скрыть используется атрибут frameborder тега со значением 0.

Атрибуты bordercolor и border тега , задающие цвет и толщину границ не являются валидными и не признаются спецификацией HTML, поэтому браузеры отражают их по разному.

Тема 8. Создание сайтов в Интернет. Язык HTMLФреймыГраница между фреймами отображается по умолчанию и, как правило, в

Слайд 80Тема 8. Создание сайтов в Интернет. Язык HTML
Особый вид фреймов

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

любое место веб-страницы. Еще одно его название — встроенный фрейм, он называется так из-за своей особенности встраиваться прямо в тело веб-страницы.

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

Создание плавающего фрейма происходит с помощью тега