является описательным языком разметки документов, в нем используются указатели разметки
(теги).
Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами, то есть документ НТМL представляет собой не что иное, как обычный АSСII-файл, с добавленными в него управляющими НТМL -кодами (тегами ).
Тег - элемент языка разметки гипертекста. Более правильное название — дескриптор.
НТМL- тег состоит из имени, за которым может следовать необязательный список атрибутов тега.
Обозначение тега заключается в угловые скобки ("<" и ">"). Простейший вариант тега — имя, заключенное в угловые скобки, например, .
Для ряда тегов характерно наличие атрибутов, которые могут иметь конкретные значения, устанавливаемые для изменения функции тега.
Например, при описании таблицы открывающий тег с атрибутами может выглядеть так:
CELLSPACING=2 BORDER=16>
Эта запись означает следующее: таблица шириной 570 пикселов, выровнена по центру, поле между рамкой и содержимым ячеек 10 пикселов, поле рамки 2 пиксела, ширина бордюра 16 пикселов.
Слайд 10Тема 8. Создание сайтов в Интернет. Язык HTML
Группы тегов
Теги
могут быть двух видов:
парные
не парные
Все теги НТМL по их назначению
и области действия можно разделить на следующие основные группы:
• определяющие структуру документа;
• оформление блоков гипертекста (параграфы, списки, таблицы, картинки);
• гипертекстовые ссылки и закладки;
• формы для организации диалога;
• вызов программ.
Кроме тегов, элементами HTML являются CER (Character Entity Reference), они предназначены для представления специальных символов, которые могут быть неверно обработаны браузером. Предположим, создается документ HTML, речь в котором идет об элементах данного языка. Если указать имя тега просто в документе, браузер может воспринять его как обычный тег. Для вывода таких символов и используется CER.
ПРИМЕР. Для того, чтобы представить символ "<" в документе HTML, нужно заменить его на <, а символ ">" — на >. То есть, если указать в тексте HTML строку <BODY>, она будет выглядеть на экране как текст .
Слайд 11Тема 8. Создание сайтов в Интернет. Язык HTML
CER начинается с
амперсанда "&". В отличие от наименований тегов HTML, наименования
CER чувствительны к регистру символов. Также наименования CER могут задаваться не в виде имени, а с помощью трехзначных кодов символов в виде &#nnn;.
В таблице приведены наиболее часто используемые CER и соответствующие им числовые коды.
CER
Чтобы вставить в текст спецсимвол, нужно указать соответствующий ему числовой код, который состоит из знака амперсенда (&), решетки (#), номера кода и точки с запятой или мнемонический код. Он состоит амперсенда (&), буквенного сокращения и точки с запятой.
Слайд 12Тема 8. Создание сайтов в Интернет. Язык HTML
Атрибуты тега следуют
за именем и отделяются друг от друга одним или несколькими
знаками табуляции, пробелами или символами возврата к началу строки.
Порядок записи атрибутов в теге значения не имеет.
Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов.
<тег параметр1=«значение» параметр2=«значение» параметр3=«значение»>
Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов.
Если при написании тега не добавить параметр, то его значение будет задано по умолчанию.
ПРИМЕР. Абзац по умолчанию выравнивается по левому краю. Для выравнивания по центру, нужно прописать значение параметра align:
Текст страницы с выравниванием по центру
Атрибуты тега
Слайд 13Тема 8. Создание сайтов в Интернет. Язык HTML
Элементы разметки HTML
или HTML -контейнеры состоят из начального и конечного компонентов (парных
тегов), между которыми размещаются текст и другие элементы документа.
Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта ( / )
Общая схема построения контейнера в формате HTML:
"контейнер"=
<"имя тега" "список атрибутов">
содержание контейнера
ПРИМЕР - контейнеры
для тега стиля шрифта — курсив
закрывающая пара представляет собой ,
для тега заголовка <ТIТLЕ> закрывающей парой будет .
Конечные теги никогда не содержат атрибутов. По своему значению теги близки к понятию скобок "begin/end" в универсальных языках программирования, которые задают области действия имен локальных переменных и т.п.
Теги определяют область действия правил интерпретации текстовых документов.
HTML -контейнеры
Слайд 14Тема 8. Создание сайтов в Интернет. Язык HTML
В некоторых случаях
конечные теги в документе можно опускать.
Большинство браузеров устроено так,
что при обработке текста документа начальный тег воспринимается как конечный тег предыдущего.
Самый распространенный тег такого типа — тег абзаца <Р>.
Поскольку он используется в документе очень часто, его обычно ставят только в начале каждого абзаца. Когда один абзац заканчивается, следующий тег <Р> сигнализирует браузеру о том, что нужно завершить данный абзац и начать следующий.
Тем не менее, рекомендуется включать по возможности больше конечных тегов, чтобы избежать путаницы и ошибок при воспроизведении документа.
Слайд 15Тема 8. Создание сайтов в Интернет. Язык HTML
Структура HTML-документа
HTML-документ -
это один большой контейнер, который начинается с тега и
заканчивается тегом :
Содержание документа
Контейнер HTML или гипертекстовый документ состоит из двух других вложенных контейнеров:
заголовка документа ( HEAD )
тела документа ( BODY ).
Документ HTML Это заголовок
Добро пожаловать в WWW
Я, Иванов Иван Иванович, новый автор HTML-документов
Пример простого документа на языке HTML
Пример
Слайд 16Тема 8. Создание сайтов в Интернет. Язык HTML
Компания Netscape Communication
расширила классическую форму документа HTML возможностью организации фреймов (кадров), позволяющих
разделить рабочее окно программы просмотра на несколько независимых фреймов. В каждый фрейм можно загрузить свою страницу HTML.
Структура HTML-документа
Фрейм (англ. Frame) — элемент (виджет) графического интерфейса пользователя, который является контейнером для других объектов. Очень схож с окном по своим свойствам, но отличается от него тем, что не может находиться внутри аналогичного контейнера..
В HTML этот вид для удобной группировки окна разделяет экран на несколько частей, в каждом контейнере отображается необходимая информация из разных источников информации. Это и есть главное достоинство фреймов, группирование — на одной странице может находиться объединённая информация с разных источников в сети.
Слайд 17Тема 8. Создание сайтов в Интернет. Язык HTML
Документ с фреймами
COLS="30%,*">
Пример простого документа
в левом фрейме
Дополнительный
документ
в правом фрейме
Структура HTML-документа
ПРИМЕР использования фреймов
Слайд 18Тема 8. Создание сайтов в Интернет. Язык HTML
Заголовок HTML-документа не
является обязательным элементом. В HTML 2.0 даже предлагалось отказаться от
элементов HEAD и BODY. На практике почти в каждом документе есть HTML- заголовок. Для этого есть две основных причины:
Назначение заголовка
Участие в индексирования сайта роботами поисковых систем. Специальный тег META позволяет хранить списки ключевых слов и описания документа, которые будут использоваться для составления индекса поисковой системы и появляться в качестве описания документа в случае выдачи ссылки на него при поиске по ключевым словам. Этим с успехом пользуются для продвижения сайта.
Важная роль заголовка при использовании JavaScript. Существует принципиальная разница между заголовком и телом документа при использовании элемента разметки SCRIPT. Она заключается в определении зоны видимости функций и переменных. Переменные и функции, определенные в заголовке документа, относятся ко всему окну браузера. Это значит, что к ним можно обратиться из любого места документа и изменить их значения. Кроме того, к ним можно обратиться из другого окна или фрейма. Фактически, это глобальные переменные. Это свойство полезно при программировании на JavaScript.
Слайд 19Тема 8. Создание сайтов в Интернет. Язык HTML
Структура HTML-документа
Слайд 20Тема 8. Создание сайтов в Интернет. Язык HTML
Назначение заголовка
Задумывался заголовок
для несколько иных целей. Исходя из общих соображений, связанных с
теорией и практикой разработки и эксплуатации гипертекстовых систем, все гипертекстовые связи информационных узлов принято разделять на контекстные и общие.
Контекстные гипертекстовые связи соответствуют определенному месту документа — контексту. В HTML такие связи реализованы в виде гипертекстовых ссылок (элемент A (anchor)). Фактически до реализации таблиц описателей стилей в современных браузерах это был единственный вид связей, которыми мог управлять автор HTML-документа.
Общие гипертекстовые связи определяются не частью документа (контекстом), а всем документом целиком. Например, быть предыдущим по отношению к другому документу или следующим — это общая гипертекстовая связь, которая позволяет организовать так называемый "линейный" просмотр информационных узлов гипертекстовой сети.
Реализация такого сорта ссылок уже давно является частью проектов W3C - Консорциума Всемирной паутны (англ. World Wide Web Consortium, W3C), разрабатывающего технологические стандарты для Всемирной паутины.
Слайд 21Тема 8. Создание сайтов в Интернет. Язык HTML
Теги тела документа
Теги
тела документа предназначены для управления отображением информации в интерфейсе пользователя.
Они описывают гипертекстовую структуру данных при помощи встроенных в текст контекстных гипертекстовых ссылок.
Тело документа ограничивается тегами - и
Тело документа может в себя включать:
• иерархические контейнеры;
• заголовки разделов (от Н1 до Н6 );
• блоки (параграфы, списки, формы, таблицы, картинки и т.п.);
• горизонтальных подчеркивания и адреса;
• текст, разбитый на области действия стилей (подчеркивание, выделение, курсив);
• математические описания;
графику;
гипертекстовые ссылки.
Слайд 22Тема 8. Создание сайтов в Интернет. Язык HTML
Тело документа –
контейнер BODY
Описание документа следует заключать в парные теги и
В отличие от тега НEАD, тег BODY имеет атрибуты.
Атрибут BАСКGROUND определяет фон, на котором отображается текст документа.
Источником для фона HTML- документа может являться графический файл, например image.gif. В этом случае в теге тела BODY появляется соответствующий атрибут:
<ВОDY ВАСКGROUND="image.gif">
Кроме этого, возможны различные дополнительные атрибуты для тега ВОDY
В данной таблице строка #ХХХХХХ определяет цвет в шестнадцатеричном коде. Также имеется возможность задавать цвета по названию – таблица 2 (стандарт HTML4).
Многие современные браузеры выходят за рамки стандартов и поддерживают гораздо больше названий цветов.
Слайд 23Тема 8. Создание сайтов в Интернет. Язык HTML
Тело документа –
контейнер BODY
Заголовок раздела обозначает начало раздела документа. В стандарте определено
6 уровней заголовков: от Н1 до Н6.
Текст, окруженный тегами <Н1>, получается большим — это основной заголовок. Если текст окружен тегами <Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ> еще меньше и так далее до <Н6>. Некоторые программы позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 — крайне редко.
Документ HTML Это заголовок 1
Это заголовок 2
Это заголовок 3
Это заголовок 4
Это заголовок 5
Это заголовок 6
Слайд 24Тема 8. Создание сайтов в Интернет. Язык HTML
Веб-браузеры не принимают
во внимание те символы перевода строки, которые вносятся в текст
пользователем на этапе его формирования текстовом редакторе.
Для начала обозначения нового абзаца в HTML служит тэг (тег)
.
После открытия страницы в окне Веб-браузера все абзацы текста, помеченные тегом
, разделяются пустыми строками, что улучшает его компоновку и внешний вид.
По умолчанию браузер обычно форматирует абзац с выравниванием по левому полю. Для принудительного выравнивания служит атрибут align. С его помощью абзацы могут быть выровнены влево, вправо, по центру и по ширине.
Примеры значений атрибута АLIGN
Тег
Слайд 25Тема 8. Создание сайтов в Интернет. Язык HTML
Теги и
Тег - принудительный перевод строки (обрыв строки)
Тег (Nо
Вrеаk, без обрыва) дает браузеру команду отображать весь текст в одной строке, не обрывая ее.
При обычном режиме интерпретации браузер отображает текст в рабочем окне, автоматически разбивая его на строки. В этом режиме концы строк текста игнорируются. Иногда для большей выразительности требуется начать с новой строки. Для этого используется тег ВR.
Атрибут СLЕАR в теге <ВR> используется для того, чтобы остановить в указанной точке обтекание объекта текстом и продолжить текст в пустой области за объектом. Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT, RIGHT или АLL атрибута СLЕАR:
Текст будет продолжен, начиная с ближайшего пустого левого поля.
Текст будет продолжен, начиная с ближайшего пустого правого поля.
Текст будет продолжен, как только оба поля окажутся пустыми.
Тег дает браузеру команду отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в , не поместится на экране, браузер добавит в нижней части окна документа горизонтальную полосу прокрутки. Если необходимо оборвать строку в определенном месте, ставится тег <ВR>.
Слайд 26Тема 8. Создание сайтов в Интернет. Язык HTML
Теги управления отображением
символов
Все управления отображением символов можно разбить на два класса:
теги,
управляющие формой отображения (font style),
теги, характеризующие тип информации (information type).
Часто внешне разные теги при отображении дают одинаковый результат.
Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации — все это делает страницы более интересными. Браузеры позволяют определить шрифт с помощью тега FONT, что дает возможность объединять на одной странице несколько видов шрифтов.
Атрибут SIZЕ тега позволяет задавать размер текста
Атрибут COLOR тега позволяет указывать цвета текста.
Слайд 27Тема 8. Создание сайтов в Интернет. Язык HTML
Теги управления отображением
символов
Теги и — изменение размеров шрифта
Текст, расположенный между
тегами <ВIG> или
, будет, соответственно, больше или меньше стандартного.
Теги и позволяют задавать верхние и нижние индексы, необходимые для записи торговых знаков, символов копирайта, ссылок и сносок. Рассматриваемые теги позволяют создать внутри текстовой области верхние или нижние индексы любого размера. Чтобы они казались меньше окружающего текста, можно использовать теги и с атрибутом FONT SIZE=-1, уменьшающим размер шрифта.
Теги, управляющие формой отображения, приведены в таблице
Эти теги допускают вложенность, поэтому являются парными и имеют теги начала и конца. При использовании таких тегов следует помнить, что их отображение зависит от настроек программы-браузера пользователя, которые могут и не совпадать с настройками программы-разработчика гипертекста.
Слайд 28Тема 8. Создание сайтов в Интернет. Язык HTML
Теги управления отображением
символов
Примеры некоторых шрифтов
Слайд 29Тема 8. Создание сайтов в Интернет…. Язык HTML
Браузеры игнорируют пустые
строки и избыточные пробелы внутри текста страницы. Тег позволяет
сохранять в неприкосновенности пустые области текста страницы. Браузер отображает подобный предварительно отформатированный текст с помощью моноширинных шрифтов. Это шрифт, в котором под каждую букву отводится область одинакового размера. Поэтому, используя предварительное форматирование, удобно сразу пользоваться одним из моноширинных шрифтов, например Courier. Тогда сразу будет видно, как текст будет располагаться на экране в окне браузера.
При обработке тэга
, браузер отображает текст, заключенный в этот тэг, точно так, как он набран - не удаляя избыточных пробелов и переносов. Следует помнить, что слишком длинные строки могут не уместиться в пределах окна.
Удобно пользоваться предварительным форматированием для создания простых таблиц.
Теги управления отображением символов
Слайд 30Тема 8. Создание сайтов в Интернет…. Язык HTML
Теги управления отображением
символов
Пример использования предварительного форматирования
Слайд 31Тема 8. Создание сайтов в Интернет Язык HTML
Создание списков в
HTML
Списки являются важным средством структурирования текста и применяются во всех
языках разметки. В НТМL имеются следующие виды списков:
ненумерованный список (неупорядоченный) (
и - ). По умолчанию элементы списка маркируются черным кружочком. При помощи атрибута TYPE можно изменить стиль маркирования.
нумерованный список (упорядоченный) ( и - ). По умолчанию элементы нумеруются по порядку. При помощи атрибута TYPE можно изменить стиль нумерации.
список определений (- ). Тэги
- и
- не обязательно чередовать. Можно "привязать" к одному определению несколько терминов, и, наоборот.
Где:
- отмечается начало/окончание ненумерованного списка
- отмечается начало/окончание нумерованного списка.
- - обозначает начало/конец отдельного элемента списка
- начало/конец списка определений
- - начало/конец конкретного термина
- - начало/конец поясняющей статьи термина
Слайд 32Тема 8. Создание сайтов в Интернет. Язык HTML
Примеры использования атрибута TYPE
для
нумерованного списка ненумерованного списка
Создание списков в HTML
Слайд 33Тема 8. Создание сайтов в Интернет. Язык HTML
Создание списков в
HTML
Пример создания списка определений
Слайд 34Тема 8. Создание сайтов в Интернет. Язык HTML
Горизонтальные линейки —
тег
Горизонтальное отчеркивание (Horizontal Rule) применяется для разделения документа на
части. С помощью одного лишь тега <НR> можно придать странице оригинальный вид.
Комментарии в языке HTML
При разметке документов HTML возникает необходимость в использовании комментариев, которые браузер не выводит на экран, но другой специалист, редактирующий данный документ, может прочитать. В таких примечаниях можно найти информацию о том, кто является автором документа, где и почему используется конкретный элемент HTML и т.п. Комментарии HTML начинаются с символа "".
Можно вставлять текст с любыми символами. Комментарии могут состоять из нескольких строк текста. В общем и целом они ничем не отличаются от аналогичных комментариев в других языках программирования, так как видимы только тогда, когда это необходимо. Браузер игнорирует их. При создании файла HTML можно разместить в нем комментарии о его структуре и любую иную информацию.
Слайд 35Тема 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-порта, на котором ведет обслуживание сервер; путь в корневом каталоге сервера к файлу ресурса и ряд других.
На практике вполне достаточно представленного выше формата задания адреса.
Слайд 37Тема 8. Создание сайтов в Интернет. Язык HTML
Гипертекстовые ссылки
Содержание контейнера
гипертекстовой ссылки, заключенное между тегом начала и тегом конца, выделяется
в тексте цветом, определенным для контекстных гипертекстовых ссылок. В атрибутах тега <ВОDY>:
Гиперссылка может связывать страницы как одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться адресом страницы рассмотренного вида (http://www.site.com/page.html). Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html).
Слайд 39Тема 8. Создание сайтов в Интернет. Язык HTML
Гипертекстовые ссылки
Пример простой
ссылки:
Глава вторая
В данном примере фраза «Глава вторая»
является ссылкой на HTML –документ, содержащийся в файле GLAVA2.HTM, в том же каталоге (папке), что и текущий документ.
Если же документ находится в другом каталоге, то
необходимо указать имя этого каталога, например:
Глава вторая
Такие ссылки называются относительными.
При необходимости можно задать и абсолютные имена файлов. Последние обычно используются для ссылок на несвязанные между собой документы, например:
Глава вторая
Здесь http:/www.cpress.ru – URL – Uniform Resource Locator (унифицированный адрес ресурсов).
Слайд 40Тема 8. Создание сайтов в Интернет. Язык HTML (ч. 2)
Использование
графики в HTML
Графические изображения придают Web-странице привлекательный вид и могут
нести полезную информацию. Наиболее распространенные случаи применения изображений:
• логотип компании;
• графика для рекламного объявления;
• различные рисунки;
• диаграммы и графики;
• фотографии с различных событий;
• фотографии сотрудников или автора страницы;
• применение графической строки как горизонтальной разделительной линии;
• применение графических маркеров для создания красивых маркированных списков.
Самыми распространенными графическими форматами в Web являются GIF и JPEG. GIF — наиболее подходящий формат для обмена изображениями между системами. Архивы с изображениями в формате GIF можно найти на многих серверах Internet. Данный формат поддерживают многие графические приложения, в том числе все программы просмотра графики World Wide Web. Однако для больших изображений фотографического качества больше подходит формат JPEG.
Слайд 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 за счёт использования специальных алгоритмов сжатия.
Слайд 42Тема 8. Создание сайтов в Интернет. Язык HTML
GIF
JPEG
PNG ПРИМЕРЫ
Слайд 43Тема 8. Создание сайтов в Интернет. Язык HTML
Компьютеры работают с
графикой в векторном или растровом формате.
Векторная графика описывает
изображения с использованием векторов, задаваемых координатами, а также параметров, описывающих цвета и расположение.
Например, изображение древесного листа описывается точками, через которые проходит линия, создавая контур листа. Цвет листа задается цветом контура и области внутри этого контура.
При редактировании элементов векторной графики изменяются параметры прямых и изогнутых линий, описывающих форму этих элементов. Векторная графика не зависит от разрешения, т.е. может быть показана на устройствах с различным разрешением без потери качества.
Растровая графика описывает изображения с использованием цветных точек, называемых пикселами, расположенных на сетке. Например, изображение древесного листа описывается конкретным расположением и цветом каждой точки сетки, что создает изображение примерно также, как в мозаике.
При редактировании растровой графики - редактируются пикселы, а не линии. Растровая графика зависит от разрешения, поскольку информация, описывающая изображение, прикреплена к сетке определенного размера. При редактировании растровой графики, качество ее представления может измениться. В частности, изменение размеров растровой графики может привести к "разлохмачиванию" краев изображения, поскольку пикселы будут перераспределяться на сетке. Вывод растровой графики на устройства с более низким разрешением, чем разрешение самого изображения, понизит его качество.
Векторная и растровая графика
Слайд 44Тема 8. Создание сайтов в Интернет. Язык HTML
Векторная и растровая
графика
Слайд 45Тема 8. Создание сайтов в Интернет. Язык HTML
Векторная и растровая
графика
Слайд 46Тема 8. Создание сайтов в Интернет. Язык HTML
Векторная и растровая
графика
Слайд 47Тема 8. Создание сайтов в Интернет. Язык HTML
Использование графики в
HTML
Тегом HTML, который заставляет браузер выводить изображение, является < IMG
> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется. Часть пользователей отключают в своих браузерах поддержку графики для увеличения скорости работы в Интернете. Атрибут Alt позволяет создать текст, который при необходимости должен быть отображен вместо графики. Пример вставки изображения:
Изображения на Web-странице могут использоваться в качестве гипертекстовых ссылок. Посетитель страницы щелкает на изображении и переходит на другую страницу или к другому изображению. Для создания изображения как гипертекстовой ссылки используется тот же тег , что и для текста, но между и вставляется тег изображения < IMG > :
Изображение, являющееся гиперссылкой, обводится дополнительной рамкой.
Слайд 48Тема 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 - задают целочисленные значения размеров изображения по горизонтали и по вертикали соответственно (в пикселях или %).
Слайд 50Тема 8. Создание сайтов в Интернет. Язык HTML
Использование графики в
HTML
Основные операции с графикой при создании документа HTML
Вставка изображения
Добавление
фона
Обтекание графики текстом
При вставке изображений следует использовать графические файлы небольших размеров, чтобы уменьшить время загрузки. Не рекомендуется использовать на одной странице изображения размером, превышающим в сумме 100 kB. Чтобы вставить графику в текст html-страницы надо указать имя и место хранения соответствующего файла. Если файл находится в той же папке, что и страница, то достаточно указать имя файла с расширением. Если графический файл находится в другой папке, то, помимо имени файла с расширением необходимо указывать путь к этому файлу.
Слайд 51Тема 8. Создание сайтов в Интернет. Язык HTML
Использование графики в
HTML
Добавление фона. Если белый фон страницы не устраивает, то с
помощью атрибута BACKGROUND тэга , можно снабдить страницу любым графическим фоном. Браузер автоматически размещает копии изображения таким образом, чтобы заполнить всю страницу, то изображение, применяемое для формирования фона можно делать небольшим по размеру.
Формируя графический фон страницы, следует использовать такие изображения, которые не мешали бы восприятию текстовой информации. Рамка придает изображению четкость. Для создания рамки служит атрибут BORDER тэга
![]()
. Используя этот атрибут можно указать толщину линии рамки в пикселях. Если указать нулевое значение, то рамка отображаться не будет.
Основные операции с графикой при создании документа HTML
Слайд 52Тема 8. Создание сайтов в Интернет. Язык HTML
Использование графики в
HTML
Обтекание графики текстом
Для того, чтобы графический рисунок органически вписывался в
дизайн страницы, следует использовать атрибут ALIGN тэга
![]()
.Этот атрибут допускает два значения – left и right.
Значение left заставляет браузер помещать изображение слева от текста, а right - справа от него. Значения left, right, all атрибута CLEAR позволяют определить, с какой стороны - левой, правой, обеих - текст далее будет свободен от графики. Значения: all - отменяет обтекание элемента одновременно с правого и левого края; left - отменяет обтекание с левой стороны; right - отменяет обтекание с правой стороны; none - отменяет действие атрибута.
Атрибут ALIGN дает возможность разместить текст между двумя графическими изображениями. В этом случае тэги, описывающие изображения, должны быть расположены над текстом, который будет заключен между ними.
Слайд 53Тема 8. Создание сайтов в Интернет. Язык HTML
Таблицы в HTML
По
мере развития WWW стало ясно, что средств, которые заложены в
НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц.
Для этой цели обычно использовался тег
, в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа.
После введения таблиц в HTML появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.
На примере использование таблицы служит лишь целям форматирования документа, задания взаимного расположения элементов страницы.
Слайд 54Тема 8. Создание сайтов в Интернет. Язык HTML
Таблицы в HTML
Описание
таблиц должно располагаться внутри раздела документа . Документ может содержать
произвольное число таблиц, причем допускается вложенность таблиц друг в друга.
Каждая таблица должна начинаться тэгом и завершаться тэгом
. Внутри этой пары тегов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек.
Каждая строка начинается тэгом (Table Row) и завершается тэгом . Отдельная ячейка в строке обрамляется парой тегов и (Table Data) или и (Table Header). Тег используется обычно для ячеек-заголовков таблицы, а — для ячеек-данных.
Различие в использовании заключается лишь в типе шрифта, используемого по умолчанию для отображения содержимого ячеек, а также расположению данных внутри ячейки. Содержимое ячеек типа отображается полужирным (Bold) шрифтом и располагается по центру (ALIGN=CENTER, VALIGN=MIDDLE). Ячейки, определенные тэгом по умолчанию отображают данные, выровненные влево (ALIGN=LEFT) и посередине (VALIGN=MIDDLE) в вертикальном направлении.
