Слайд 20
Для маркировки переменных используется тег , который обычно
отображается курсивом.
Версии стандарта HTML обычно маркируются следующим
образом
x.
у.
Слайд 21
Этот пример показывает, как изменять направление вывода текста.
Если используемый браузер поддерживает двунаправленное представление (bdo),
то следующая строка будет записана справа налево (rtl):
Здесь какой-то арабский текст
Слайд 22
Этот пример показывает, как использовать длинные и короткие
цитаты.
Здесь представлена длинная цитата: Это длинная
цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата.
Здесь представлена короткая цитата:
Это короткая цитата
Для элемента blockquote браузер вставляет дополнительные переносы строки, пустые строки и поля, но элемент q не изображается каким-то специальным образом.
Слайд 23
Символьные элементы
Некоторые символы, такие как символ
в HTML специальное значение. Поэтому их нельзя использовать в
тексте в явном виде. Для их отображения используются символьные элементы CER (Character Entity Reference).
Слайд 24
Таблица наиболее часто используемых символьных объектов
Слайд 25
4. Создание гиперссылок
Этот пример показывает, как создавать ссылки
в документе HTML.
Этот текст
является ссылкой на страницу на этом Web-сайте.
Этот текст является ссылкой на страницу во Всемирной Паутине.
Слайд 26
Изображение в виде ссылки
Можно также
использовать в качестве ссылки изображение:
src="/logo.gif" width="285" height="52">
Слайд 27
Синтаксис гипертекстовой ссылки
текст ссылки
Слайд 28
С помощью атрибута href можно задавать ссылки не
только по протоколу HTTP, но и по другим:
http://... -
создает ссылку на www-документ;
ftp://... - создает ссылку на ftp-сайт или расположенный на нем файл;
mailto:... - запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";
news:.. - создает ссылку на конференцию сервера новостей;
telnet://... - создает ссылку на telnet-сессию с удаленной машиной;
wais://... - создает ссылку на WAIS - сервер;
gopher://... - создает ссылку на Gopher - сервер;
Слайд 29
С помощью атрибута target можно определить, где будет
открыт документ, на который указывает ссылка. В качестве значения
необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен:
_self - указывает, что определенный в параметре href документ должен отображаться в текущем фрейме;
_parent - указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее frameset, включающий текущий фрейм;
_top- указывает, что документ должен отображаться в окне-родителе всей текущей фрэймовой структуры;
_blank - указывает, что документ должен отображаться в новом окне.
Слайд 30
Добро пожаловать!
target="_parent">Добро пожаловать!
Добро пожаловать!
Добро
пожаловать!
Слайд 31
Для перехода внутри страницы к конкретному разделу используют
атрибут nameтега гипертекстовой ссылки a, при помощи которого создается
именованный якорь.
ссылка на именованный якорь
Слайд 32
В данном примере внутри документа создается своеобразная метка,
при этом именованный якорь никак не отображается в окне
браузера.
Для перехода на место, которое отмечено именованным якорем используется знак # и имя якоря в конце URL следующим образом:
переход на именованный якорь Переход внутри файла "page1.html" на именованный якорь выглядит следующим образом:
переход на именованный якорь Если браузер не сможет найти указанный именованный якорь на вызываемой странице, то переход произойдет на начало документа, при этом сообщения об ошибке доступа не возникает.
Слайд 33
5. Списки
Упорядоченные
Неупорядоченные
Слайд 34
Неупорядоченный список начинается с тега . Каждый элемент
списка начинается с тега .
Неупорядоченный список:
элемент 1
элемент 2
элемент 3
Слайд 35
Упорядоченные списки
Упорядоченный список начинается с тега . Каждый
элемент списка начинается с тега . У тега может
быть два атрибута: start (определяет первое число, с которого начинается нумерация пунктов) и type (определяет стиль нумерации пунктов). Может иметь значения:
"A" - заглавные буквы A, B, C ...
"a" - строчные буквы a, b, c ...
"I" - большие римские числа I, II, III ...
"i" - маленькие римские числа i, ii, iii ...
"1" - арабские числа 1, 2, 3 ...
Слайд 36
Упорядоченный список:
элемент 1
элемент
2
элемент 3
Слайд 37
Вложенные списки
Вложенный список:
элемент 1
элемент 2
элемент 2.1
элемент 2.2
элемент 3
Слайд 38
Списки определений
Список определений не является списком элементов. Это
список терминов и определений терминов.
Список определений начинается с тега
. Каждый термин списка определений начинается с тега - . Каждое определение списка начинается с тега
- .
Слайд 39
элемент 1
описание элемента 1
элемент 2
описание элемента 2
Слайд 40
5. Таблицы
В web-дизайне таблицы являются одним из основных
методов структурирования информации. Они представляют данные в виде удобных
для восприятия колонок и строк, что значительно упрощает анализ информации. С их помощью можно легко отделить одну часть страницы от другой.
Основным тегом для обозначения таблицы является . Элемент TABLE представляет собой тег-контейнер, в котором размещается содержимое таблицы. Построение таблицы осуществляется по строкам, для обозначения которых применяется контейнер TR. Внутри контейнера строк помещаются контейнеры для обозначения ячеек. Стандарт HTML определяет два типа контейнеров для обозначения ячеек
| и | . Первый предназначен для обозначения заголовков, а второй для данных в ячейках. Отличие этих двух элементов заключается лишь в том как их содержимое отображается браузером, заголовки большинство браузеров выделяют полужирным шрифтом и центрируют в своих ячейках. Ячейка данных может содержать текст, изображения, списки, параграфы, формы, горизонтальные линейки, таблицы и т. д.
Слайд 41
Пример таблицы: одна ячейка
Одна строка
и одна ячейка
Слайд 42
Пример таблицы: одна строка и три столбца
столбец 1
столбец 2
столбец
3 |
|---|
Слайд 43
Пример таблицы: две строки и три столбца
1.1
1.2
1.3
2.1
2.2
2.3
Слайд 44
Для тега table определены следующие атрибуты.
align- определяет способ
горизонтального выравнивания таблицы на странице. Возможные значения: left, center,
right. Значение по умолчанию - left.
valign- должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.
border- определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0"или при отсутствии этого параметра рамка отображаться не будет.
cellpadding- определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
cellspacing- определяет расстояние (в пикселах) между границами соседних ячеек.
width- определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
height- определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
bgcolor- определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
background- позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
Слайд 45
Ячейки таблицы без содержимого в большинстве браузеров выводятся
не очень хорошо. Если необходимо сделать ячейку таблицы пустой,
то разместите в ней неразрывный пробел
Такие элементы как , и используются редко в связи с тем, что не все браузеры их поддерживают.
Слайд 46
Для тегов и очень полезными являются
атрибуты colspan и rowspan. Первый показывает сколько ячеек надо
объединить по горизонтали, а второй по вертикали. Следует заметить, что если мы применяем объединение ячеек, то общее число ячеек с учетом объединенных должно быть равным.
Слайд 47
Правильное применение colspan:
100
300
400
500
600
Неправильное применение colspan:
Правильное применение rowspan:
Неправильное применение rowspan:
Слайд 48
Блок
Элемент является блочным элементом и предназначен для
выделения фрагмента документа с целью изменения вида содержимого. Как
правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора (более подробно при изучении CSS)
Слайд 49
Формы HTML
Формы HTML предназначены для организации взаимодействия с
пользователем. Они позволяют вводить текст, осуществлять выбор из предложенных
значений при помощи списков или кнопок. С помощью форм можно организовать интерактивный обмен информацией между Web-страницей и сервером. Можно определить формы как электронные бланки для заполнения различных данных таких как, например, имя, возраст, выбор страны проживания и других. Как правило, форма работает совместно с установленным на сервере сценарным приложением, обрабатывающим введенную информацию.
Слайд 51
Структура формы
Элементы
формы или тело формы
Элементы формы или тело формы
Упрощенная запись
Слайд 56
Переключатель (Radiobutton)
Текст для переключателя
Слайд 59
Список
Отображаемая строка
1
…
Отображаемая строка N
Слайд 60
Поле для ввода многострочного текста (TextArea)
ТЕКСТ ЭЛЕМЕНТА
Слайд 61
Вставка изображений
Изображение:
height="52">
Изображение из другой папки:
src="/img/dvd.jpg" width="160" height="237">
Изображение с сайта cspu.ru: 
Слайд 62
Графические форматы
JPEG – Joint Photographic Experts Group
Формат JPEG
был разработан для передачи фотографий между различными платформами. Благодаря
поддержке 24-битовой цветовой палитры (миллионы цветов) формат JPEG получил широкое распространение для отображения иллюстраций высокого качества. При этом применяемый в JPEG алгоритм сжатия позволяет варьировать размер загружаемого файла в зависимости от требуемого качества отображения иллюстрации.
Кроме того, формат JPEG поддерживает опцию "прогрессивный" JPEG, которая во многом похожа со свойством чередования строк формата GIF, но реализована на совершенно других принципах. В файл JPEG записывается несколько иллюстраций полного размера, но различного уровня качества. Сначала отображается рисунок низкого качества (и, соответственно, малого объема), затем догружаются все более качественные изображения. При этом общий объем загружаемого файла возрастает несущественно по сравнению с оригинальным JPEG.
Слайд 63
Графические форматы
PNG – Portable Network Graphics
В последнее
время все большее распространение получает формат PNG, который был
разработан для сетевых иллюстраций с целью заменить форматы JPEG и GIF и объединивший в себе все их преимущества.
Формат PNG поддерживает 24-, 32- и 48-битовую цветовую палитру, 8- и 16- битовую палитру серого, 8-битовую пользовательскую палитру. Реализованный в PNG алгоритм сжатия позволяет сжимать изображения лучше чем GIF (от 5 до 25%). Для него реализован механизм черезстрочного вывода первого изображения с использованием двумерной чересстрочности, что позволяет обеспечить минимальные затраты времени на вывод первого изображения.
Кроме того, в PNG реализован эффективный механизм контроля целостности файла, позволяющего обнаружить ошибки при передаче по сети. Хотя PNG и поддерживает прозрачность, такие изображения некорректно отображаются в некоторых версиях MS Internet Explorer, поэтому если вы хотите, чтобы во всех браузерах рисунок с прозрачным фоном отображался корректно, лучше использовать формат GIF.
Слайд 65
Выравнивание изображений
Для выравнивания изображений используется атрибут align.
align=top –
изображение выравнивается по верхнему краю текущей текстовой строки, не
меняя позиции по горизонтали. При этом речь идет как о тексте, так и о графике;
align=middle – изображение центрируется по вертикали на базовой линии текущей текстовой строки, не меняя позицию по горизонтали;
align=bottom – нижний край изображения выравнивается по горизонтали на базовой линии текущей текстовой строки;
align=left– изображение смещается к левому краю рабочей зоны, последующий текст сразу же начинает "обтекать" графику;
align=right– то же что и для left, только изображение смещается к правой части рабочей зоны.
Слайд 66
Изображение выравнено по верху
при помощи
align="top"
Значение "middle" атрибута align
центрирует изображение по вертикали
Выравнивание
изображения по нижнему краю
(align="bottom") используется по умолчанию (можно сравнить с предыдущим примером).
В этом примере изображение
смещено влево и начиная со следующей строчки текст как бы обтекает вставленный рисунок.
При таком способе выравнивания желательно помещать изображение в начале параграфа.
Изображение прижато к правому краю рабочей области (align="right").
Текст занимает все свободное пространство слева от изображения обтекая его.
Слайд 67
Кроме того, для форматирования изображений внутри текста используются
атрибуты hspace и vspace, которые определяют интервал между графическим
изображением и обтекающим текстом по горизонтали и вертикали соответственно. Размер отступов задается в пикселях.
Слайд 68
Изображение в HTML может быть обрамлено прямоугольной рамкой.
Для этого используется атрибут border, который задает ширину рамки
вокруг изображения в пикселях.
В данном варианте толщина рамки установлена в 5 пикселей.
Слайд 69
В последнее время атрибут border = 0 при
разработке Web-сайтов в подавляющем большинстве случаев используется именно для
отмены рамки вокруг изображения-гиперссылки.
Слайд 70
Размеры изображений
По умолчанию изображение отображается в браузере
с сохранением своих исходных размеров и пропорций. При этом,
если изображение превышает размер окна браузера, то оно может либо автоматически уменьшится до размера окна, либо предоставить возможность просмотра по частям с использованием полос прокрутки.
При помощи атрибутов height и width (высота и ширина, соответственно) можно задать размеры отображения графического файла на Web-странице.
Слайд 71
Атрибут Alt
В ряде случаев графическое изображение на Web-странице
не может быть отражено. Это может происходить при просмотре
страниц с использованием текстовых браузеров, при запрете на отображение графики в целях увеличения скорости загрузки и снижения расходов на Интернет, а также в ряде других случаев. При этом смысл страницы может быть существенно искажен, а при использовании графических меню и кнопок навигация по сайту будет значительна затруднена. Во избежание этого в HTML используется атрибут alt, который задает цепочку символов (максимальная длина 1024 символа), отображаемую в браузере вместо изображения и в произвольной форме описывающую его (заменяющий текст).
Для демонстрации работы атрибута alt необходимо в свойствах
обозревателя запретить использование графики на странице.
Обратите внимание, что даже при отображенной графике замещающий текст появляется на экране при наведении указателя мыши на изображение. Благодаря этому атрибут alt можно использовать и в качестве своеобразной подписи к рисунку.
Слайд 73
Карты изображений
Наряду с использованием изображений в качестве иллюстраций
к тексту или элементов оформления Web-страницы, в HTML предусмотрена
возможность создания карт изображений (imagemap), отдельные области которого могут являться гиперссылками на другие разделы или страницы Web-сайта. В общем виде это соответствует использованию изображения в качестве гиперссылки с тем отличием, что на одной карте изображений можно создать несколько несовпадающих областей, и соответственно, гиперссылок.
Слайд 74
Применение таких карт изображений удобно для создания географических
справочных систем, путеводителей, карт погоды. Также карты изображений находят
широкое применение при создании сложных графических меню.
В HTML предусмотрены два варианта обработки карт изображений: обработка карты изображения непосредственно браузером и передача на сервер координат указателя мыши для дальнейшей обработки.
Слайд 75
Автономные (обрабатываемые браузером) карты изображений описываются с помощью
атрибута usemap тега :
Где "figure_1.png" - имя
файла, содержащего изображение, "#coordinates" - ссылка на часть HTML-документа, описывающего координатные области.
Координатные области карты изображений определяются при помощи тегов
Слайд 76
Тег описывает координаты отдельной области изображения, параметры
которой и адрес гиперссылки задаются при помощи атрибутов shape,
coords и href.
Атрибут shape определяет форму области-ссылки. По умолчанию ему присваивается значение shape="rect"- прямоугольник. Также область может быть описана в форме окружности ( shape="circle" ) или многоугольника ( shape="poly" ).
Атрибут coords определяет размеры области. В зависимости от типа размечаемой области может меняться значение этого атрибута. Так для shape="rect" указываются две пары координат (левого верхнего и правого нижнего угла прямоугольника) в пикселях. Для shape="circle" указываются координаты центра окружности и ее радиус, а для shape="poly"последовательно указываются координаты вершин многоугольника.
Атрибут href задает URL-адрес ссылки для перехода в случае щелчка мышью на выбранной области.
Слайд 77
Карта изображений, на которой в соответствии с изображением
выделены прямоугольная, круглая и треугольная координатная области.
src="/figure_1.png" width="297" height="210" border="0" alt="Карта изображений" usemap="#coordinates">
