1 Бурибаев Бахыт Бурибаевич
2 СОЗДАНИЕ WEB ДОКУМЕНТА; СТРУКТУРА HTML-ДОКУМЕНТА; ФОРМАТИРОВАНИЕ ТЕКСТА ЭЛЕМЕНТЫ HTML; ФУНКЦИОНАЛЬНЫЕ БЛОЧНЫЕ ЭЛЕМЕНТЫ; ГИПЕРТЕКСТОВЫЕ ССЫЛКИ; ГРАФИКА В HTML-ДОКУМЕНТАХ СПИСКИ ТАБЛИЦЫ
3 СОЗДАНИЕ WEB ДОКУМЕНТА HyperText Markup Language (HTML) - язык разметки гипертекста - предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.
4 Гипертекстовый документ (HTML-документ) - содержит символьную информацию. Одна ее часть - собственно текст, т. е. данные, составляющие содержимое документа. Другая - теги (markup tags), называемые также флагами разметки, - специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Для файлов, содержащие HTML-документы, приняты расширения.htm или.html. Броузер опознает теги и использует их для отображения содержимого файла на экране компьютера.
5 С помощью тегов можно: выделять заголовки документа, изменять цвет, размер и начертание букв, вставлять графические изображения и таблицы.
6 Основным преимуществом гипертекста перед обычным текстом является возможность добавления к содержимому документа гиперссылок - специальных конструкций языка HTML, которые позволяют щелчком мыши перейти к просмотру другого документа.
7 Существует два способа создания гипертекстовых документов: 1. Можно воспользоваться одним из WYSIWYG HTML- редакторов (Netscape Composer, Microsoft FrontPage и др.), HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика. 2. Альтернативой служит создание и разметка документа при помощи обычного редактора (NotePad (Блокнот)). При этом способе в текст вручную вставляются команды языка HTML. Этот способ позволяет получить желаемый результат и файл, созданный таким способом имеет небольшой размер.
8 Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Все тэги HTML начинаются с символа " ".
9 Синтаксис открывающего тега: Прямые скобки, используемые в описании синтаксиса, означают, что данный элемент может отсутствовать. Имя закрывающего тега отличается от имени открывающего лишь тем, что перед ним ставится наклонная черта:
10 Атрибуты тега записываются в следующем формате: имя[="значение"] Кавычки при задании значения аргумента не обязательны и могут быть опущены. Для некоторых атрибутов значение может не указываться. У закрывающего тега атрибутов не бывает.
11 ЭЛЕМЕНТЫ HTML Пару, состоящую из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом - элементом. Элементы делятся на: блочные и текстовые. Блочные элементы относятся к частям текста уровня абзаца, а текстовые элементы описывают свойства отдельных фраз и еще более мелких частей текста.
12 Текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, за исключением следующих символов, имеющих в HTML специальный смысл: (больше), & (амперсанд) и " (двойная кавычка), а также неразрывный пробел. Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.
13 Каждая из таких зарезервированных последовательностей начинается символом амперсанда (&) и заканчивается точкой с запятой (;). Последовательность Символ <символ < >символ > &символ & " символ " (кавычка) неразрывный пробел
14 СТРУКТУРА HTML-ДОКУМЕНТА Самым главным из тегов HTML является одноименный тег -, который всегда открывает документ, а тег должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов броузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.
15 HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке:......
16 В HTML-документ можно включать комментарии, позволяющие скрыть часть текста от браузера. Все, что заключено между последовательностями символов, при просмотре страницы остается невидимым. Комментарии не могут быть вложенными друг в друга
17 Заголовок документа Включение в документ заголовочной части не является обязательным. Задачей заголовка является представление необходимой информации для броузера и сервера HTTP. Информация, размещенная внутри заголовка документа, обычно не выводится на экран (кроме названия документа). Заголовок документа открывается тегом, который обычно следует сразу же за тегом. Закрывающий тег показывает конец этого раздела, между ними располагаются остальные теги заголовка документа.
18 Часто в заголовок документа включают парный тег..., определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Название документа вписывается между открывающим и закрывающим тегами.
19 Тело документа В отличии от заголовка, тело документа является обязательным элементом, так как в нем располагается весь материал вашего документа (есть только одно исключение, с которым мы познакомимся далее, - когда документ содержит вместо тела группу фреймов). Тело документа размещается между тегами и. Все, что размещено между этими тегами, интерпретируется броузером в соответствии с правилами языка HTML, позволяющими корректно отображать страницу на экране монитора.
20 Тег не только обозначает начало содержимого документа, но и задает его основные свойства: цвет фона, текста и многое другое. Эти свойства определяются с помощью атрибутов, которые приведены в таблице.
21 Атрибут Назначение ALINK Определяет цвет активной ссылки BACKGR OUND Указывает на URL-адрес изображения, которое используется в качестве фонового BGCOLOR Определяет цвет фона документа LINK Определяет цвет не посещенной ссылки ТЕХТ Определяет цвет текста VLINK Определяет цвет посещенной ссылки
22 Пример Моя страничка Тело документа
23 Цветовое оформление документа Определение цвета составных частей документа - один из первых шагов в его создании. Если этого не сделать, то будут использоваться цвета по умолчанию, определяемые установками броузера. При выборе цветовой палитры надо стараться поддерживать высокую контрастность текста и фона и избегайть соседства областей с близкими цветами. ФОРМАТИРОВАНИЕ ТЕКСТА
24 Цвет может быть задан названием (например, green) или шестнадцатеричным числом, определяющим цвет в модели RGB. Эта цветовая модель базируется на определении цвета как композиции трех основных оттенков цвета: красного (Red), зеленого (Green) и синего (Blue). Каждая компонента задается двузначным шестнадцатеричным числом (т. е. изменяется от 00 до FF). Затем эти значения объединяются в одно число, перед которым ставится символ # (большинство современных броузеров может распознать цвет и без указания символа #).
25 Следует также отметить, что в записи шестнадцатеричного значения цвета можно использовать как большие, так и маленькие латинские буквы, например, запись #00FF00 равнозначна записи #00ff00.
26 Ниже представлена таблица 16 стандартных цветов вместе с их шестнадцатеричными кодами. Современные броузеры понимают 140 наименований цветов
27 Цвет КодЦвет Код black (черный)# silver (серебряный) #C0C0C0 maroon (темно- бордовый) #800000red (красный)#FF0000 green (зеленый)#008000Lime (Известь)#00FF00 olive (оливковый)#808000yellow (желтый)#FFFF00 navy (темно-синий)#000080blue (синий)#0000FF purple (фиолетовый)# fuchsia (фуксия) #FF00FF teal (сине-зеленый)#008080aqua (аква)#00FFFF gray (серый)#808080white (белый)#FFFFFF
28 Пример Чтобы установить синий цвет фона документа нужно для синей составляющей цвета указать максимальное значение, а остальные сделать равными нулю:. На некоторых мониторах невозможно отобразить все разнообразие оттенков. Броузеры в этом случае сокращают используемое количество цветов, переназначая их под собственные палитры. Использование разработчиками гипердокументов Web-палитры является в некотором роде гарантией того, что документ будет выглядеть одинаково на различных дисплеях.
29 Web-палитра распознает по шесть оттенков красного, синего и зеленого цвета, что в результате дает 216 возможных значений цветов (6x6x6=216). Поэтому ее иногда называют "куб 6x6x6". В таблице приведены численные значения цветов из Web- палитры. Шестнадцатеричные ДесятичныеПроцентные 00 (самый темный)00 % % % % CC20480 % FF(самый светлый) %
30 Цвета, RGB-компоненты которых входят в Web-палитру, называют Web-надежными цветами. Среди всех цветов, имеющих имена, только 10 цветов входят в Web-палитру: aqua, black, blue, cyan, fuchsia, lime, magenta, red, white и yellow.
31 Разделение текста на абзацы Текст разделяется на абзацы при помощи тега. При размещении его в начало каждого абзаца, программа просмотра отделит абзацы друг от друга пустой строкой. Использование закрывающего тега необязательно. Несколько стоящих подряд тегов не дают дополнительного пространства между абзацами.
32 Тег абзаца имеет один атрибут, поддерживаемый большинством броузеров. Это атрибут ALIGN, задающий выравнивание текста в абзаце. Если этот атрибут не задан, то текст выравнивается по левому краю окна броузера. В таблице представлены возможные значения этого атрибута: Значение Функция LEFTВыравнивание текста по левой границе окна броузера CENTERВыравнивание по центру окна броузера RIGHTВыравнивание по правой границе окна броузера JUSTIFYВыравнивание текста по ширине окна броузера Пример Если необходимо, чтобы текст абзаца был выровнен по центру, нужно написать следующее: Текст
33 Разрыв строки Иногда требуется "разорвать" текст, перенеся его остаток на новую строку, при этом не выделяя нового абзаца. Для этого используется тег разрыва строки. Он заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тега абзаца, тег не добавляет пустую строку. У этого тега нет парного закрывающего тега.
34 Пример Иосиф Бродский Откуда к нам пришла зима, не знаешь ты, никто не знает. Умолкло все. Она сама холодных губ не разжимает.
35 Некоторые броузеры интерпретируют несколько стоящих рядом тегов как один тег, поэтому не стоит использовать его для вставки пустых строк. Запрет перевода строки: текст, заключенный между тегами и, будет гарантированно располагаться в одной строке без переноса на другую.
36 Горизонтальные линии Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Тег позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тег не требует закрывающего тега. До и после линии автоматически вставляется пустая строка. Атрибуты тега представлены в таблице.
37 Атрибут Назначение ALIGN Выравнивает по краю или центру; имеет значения LEFT, CENTER, RIGHT WIDTH Устанавливает длину линии в пикселах или процентах от ширины окна браузера; в последнем случае добавляется символ % SIZE Устанавливает ширину линии в пикселах NOSHADE Отменяет рельефность линии COLOR Указывает цвет линии; используется наименование цвета или шестнадцатеричный
38 <HR COLOR=RED ALIGN=RIGHT SIZE=10 WIDTH=50%> Этот тег горизонтальную линейку красного цвета шириной в 10 пикселов, занимающую половину ширины окна и расположенную справа.
39 Форматирование гипертекста Язык HTML поддерживает как логический (logical), так и физический (physical) стили форматирования содержимого документа.
40 Логическое форматирование Использование логического форматирования текста приведет к выделению программой просмотра различных частей текста и выявит структуру документа. Говоря о логической разметке текста, можно выделить две основные части: 1. выделение заголовков в документе; 2. логическое выделение элементов текста.
41 Язык HTML позволяет задать шесть уровней заголовков: H1 (заголовок первого уровня), Н2, Н3, H4, Н5 и H6. Пример Заголовки Заголовок 1 уровня Заголовок 2 уровня Заголовок 3 уровня Заголовок 4 уровня Заголовок 5 уровня Заголовок 6 уровня
42 Если не поставить закрывающий тег заголовка, вид страницы будет искажен: любой из тегов заголовка автоматически вставляет пустую строку до и после себя. Теги заголовков поддерживают атрибут ALIGN, действие которого аналогично действию такого же атрибута тега выделения абзаца.
43 Элементы логического выделения фрагментов текста, а также возможное оформление каждого из них приведены в таблице Теги ПрименениеРезультат Используется для выделения цитат или названий книг и статей Применяется для вывода небольшого куска программного кода Используется для выделения важных фрагментов текста Выделяет текст, вводимый пользователем с клавиатуры Используется для выделения текста примера Используется для выделения очень важных фрагментов текста Используется для отметки имен переменных Используется для отметки удаленного текста
44 Физическое форматирование Теги ПрименениеРезультат Полужирный Курсив Подчеркнутый Пишущая машинка Пишушая машинка Зачеркнутый Большой Маленький Верхний -- x индекс Нижний -- x индекс
45 Элементы физического форматирования могут быть вложенными друг в друга, хотя конечный результат зависит от броузера. При этом нужно внимательно следить, чтобы один контейнер находился целиком в другом контейнере, например, жирный и подчеркнутый текст
46 В документе может использоваться тег, позволяющий непосредственно задать размер и цвет шрифта. Элемент FONT представляет собой контейнер, т. е. требует как открывающего, так и закрывающего тегов, и сам может использоваться внутри любого другого текстового контейнера.
47 После стартового тега обязательно указание атрибутов, без которых элемент не оказывает никакого влияния на текст, помещенный в контейнер. Атрибут FACE позволяет указать тип шрифта, которым программа просмотра выведет ваш текст (если таковым располагает пользователь). Если нужного шрифта нет, программа проигнорирует запрос и будет использовать шрифт, установленный по умолчанию. Этот атрибут позволяет указать как один, так и несколько шрифтов (через запятую). Весь список будет просмотрен слева направо и первый из имеющихся на машине пользователя будет использован для вывода документа.
48 Атрибут SIZE служит для указания размера шрифта в условных единицах от 1 до 7. Считается, что размер "нормального" шрифта соответствует числу 3. Размер может быть как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2). Во втором примере текущий размер шрифта увеличивается на 2. Атрибут COLOR устанавливает цвет шрифта, который может быть задан как в формате RGB, так и указанием имени.
49 Пример Текст красного цвета и большого размера
50 Предварительно отформатированный текст Любой фрагмент текста, расположенный между тегами и, разбивается на строки и абзацы в точном соответствии с тем, как вы его вводили.
51 Использование графики в HTML- документах Для правильного использования графики в HTML- документе необходимо учитывать следующие факторы: многие броузеры поддерживают только графические форматы GIF и JPEG «джей-пег»; файлы, содержащие графику, передаются медленно; некоторые пользователи не имеют графических броузеров или намерено отключают загрузку изображений; цветная графика, которая хорошо смотрится на вашем компьютере, может плохо выглядеть на другом
52 Тег вставляет изображение в документ, как если бы оно было просто одним большим символом. Синтаксис тега:
53 Атрибуты тега и их значения приведены в таблице. Атрибут Назначение SRC="файл" Задает URL-адрес изображения (можно указывать как абсолютный, так и относительный URL-адрес; если файл с изображением находится в той же директории, что и HTML-документ, то достаточно просто указать имя файла); этот атрибут является обязательным ALT="текст" Задает альтернативный текст для браузеров, не поддерживающих работу с изображениями ALIGN="тип" Задает расположение картинки относительно текста, тип может принимать следующие значения: ТОР, MIDDLE, BOTTON, LEFT, RIGHT BORDER=n Устанавливает толщину обрамления вокруг изображения в пикселах HEIGHT=n(%) Устанавливает высоту изображения в пикселах или в процентах от высоты окна браузера WIDTH=n(%)Устанавливает ширину изображения в пикселах или в процентах HSPACE=n Задает свободное пространство слева и справа от изображения (в пикселах) VSPACE=n Задается свободное пространство над и под изображением (в пикселах)
54 Ширина и высота изображения могут быть заданы не только в пикселах, но и в процентах от размеров окна броузера. Рекомендуется задавать только один из атрибутов пары "ширина-высота" изображения, иначе рисунок может быть непропорционально деформирован и изменит свой вид.
55 Язык HTML позволяет задать расположение изображения относительно окружающего его текста. Атрибут ALIGN может принимать следующие значения. Значение Функция ТОР Выравнивает одну строку по верху изображения, остальные помещает после рисунка MIDDLE Выравнивает одну строку по середине изображения, остальные помещает после рисунка BOTTOM Выравнивает одну строку по низу изображения, остальные помещает после рисунка LEFT Прижимает обтекаемое текстом изображение к левой стороне окна броузера RIGHT Прижимает обтекаемое текстом изображение к правой стороне окна броузера
56 Пример Рассмотрим возможные варианты выравнивания изображения относительно текста. Первая строка текста находится сверху изображения и обычно используется для описания рисунка.
57 Первая строка текста находится по середине изображения и используется для того же. Первая строка текста находится внизу изображения и используется также как и в двух первых случаях.
58 Гиперссылки Для создания гипертекстовой ссылки используется пара тегов.... Фрагмент текста, изображение или любой другой объект, расположенный между этими тегами, отображается в окне броузера как гипертекстовая ссылка. Активация такого объекта приводит к загрузке в окно броузера нового документа или к отображению другой части текущей Web- страницы.
59 Гипертекстовая ссылка формируется с помощью выражения фрагмент документа HREF здесь является обязательным атрибутом, значение которого и есть URL-адрес (универсальный адрес) запрашиваемого ресурса. Кавычки в задании значения атрибута HREF не обязательны.
60 Текстовые указатели, т. е. фрагменты текста, являющиеся ссылками, не отличаются разнообразием внешнего вида. Обычно такой указатель представляет собой слово или слова, подчеркнутые прямой линией. Цвет указателя может регулироваться автором и установками программы просмотра. Пример Ссылка
61 Графические указатели, т. е. изображения- ссылки, выделяются рамкой того же цвета, что и текстовые указатели. Пример
62 Списки Нумерованные списки Весь нумерованный список заключается между парой тегов и, а каждый элемент списка расположен между тегами и (закрывающий тег может отсутствовать). Пример Программирование Алгоритмизация Проектирование
63 Тег может имеет атрибуты TYPE и START: Атрибут TYPE задает вид счетчика, возможные значения которого приведены в таблице, a START -- начальное значение. Значение Функция Aбольшие латинские буквы (A,B,C...) aмаленькие латинские буквы (a,b,c...) Iбольшие римские цифры (I,II,III...) iмаленькие римские цифры (i,ii,iii...) 1 арабские цифры (1,2,3...); используется по умолчанию
64 Пример Программирование Алгоритмизация Проектирование
65 Пример Программирование Алгоритмизация Проектирование Маркированный список начинается стартовым тегом и завершается тегом. Каждый элемент списка начинается с тега и завершается (необязательным) тегом. Маркированные списки
66 Список описаний (список определений) начинается с тега и завершается тегом. Данный список служит для создания списков типа "термин" "описание". Термин автоматически размещается у левой границы страницы, а их определения смещены относительно них вправо. Каждый термин обозначается тегом, а его описание тегом. Список определений
67 Пример Отдел маркетинга Данный отдел занимается продвижением товаров и услуг Финансовый отдел Данный отдел занимается финансовыми операциями В результате броузер покажет следующее:
68 Вложенные списки Любой список может быть частью другого списка, вложен в другой список Дирекция Иванов И.И. Петров К.В. Отдел маркетинга Варшавская Е.Л. Самсонов Д.М.
69 Использование таблиц в HTML Таблицы в языке HTML всегда имеют прямоугольный вид и состоят из строк, которые в свою очередь состоят из ячеек. Все языковые конструкции, описывающие компоненты создаваемой таблицы, заключаются между тегами и.
70 Заполнение таблицы происходит построчно; для обозначения строки используется пара тегов.... Строка состоит из ячеек, для задания которых используют либо теги..., если эти ячейки содержат заголовки столбцов, либо теги.... Заголовки выводятся полужирным шрифтом и располагаются по центру ячейки. Данные имеют обычный шрифт и выравниваются по левой стороне ячейки. Для задания заголовка всей таблицы используются теги и.
71 Пример Заголовок таблицы Заголовок 1 Заголовок 2 Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
72 Основные атрибуты тега Атрибут Назначение BORDER=n Определяет ширину рамки таблицы (в пикселах), например, BORDER=1; значение, равное нулю, означает отсутствие рамки WIDTH=n Определяет ширину всей таблицы в пикселах, либо в процентах от ширины окна браузера HEIGHT=n Определяет высоту всей таблицы в пикселах, либо в процентах от высоты окна браузера ALIGN Задает горизонтальное выравнивание таблицы в окне браузера; имеет значения left, center и right (по умолчанию -- left) CELLPADDING=n Добавляет свободное пространство между данными внутри ячейки и ее границами; по умолчанию значение равно 2 CELLSPACING=n Добавляет свободное пространство между ячейками внутри всей таблицы; по умолчанию значение равно 2 HSPACE=n Задает области свободного пространства указанной ширины (в пикселах) слева и справа от таблицы VSPACE=n Задает области свободного пространства заданной высоты (в пикселах) сверху и снизу от таблицы BGCOLOR=цвет Устанавливает цвет фона всей таблицы BACKGROUND=URL Указывает фоновое изображение для таблицы, где URL -- адрес источника (имя файла с изображением)
73 Пример Изменим содержимое документа, созданного в предыдущем примере, добавив атрибуты BORDER и ALIGN в тег : Теперь ячейки таблицы будут обрамлены рамкой, a таблица выровнена по центру окна браузера
74 Выравнивание данных в ячейках При помощи атрибутов ALIGN и VALIGN можно по-разному размещать данные относительно границ ячейки. Эти атрибуты используются совместно с тегами,, и в самых различных комбинациях. Ниже приведены значения атрибутов для перечисленных элементов.
75 Тег Назначение атрибута Атрибут ALIGN может принимать значения left, center и right (по умолчанию -- left для данных и center для заголовков); он определяет горизонтальное выравнивание данных в ячейках и действует на всю строку, если не отменяется тем же атрибутом в отдельной ячейке Атрибут VALIGN может иметь значения top, bottom, middle и baseline (по умолчанию -- middle); он регулирует положение данных относительно верхней и нижней границ ячейки и влияет на всю строку, если не отменяется таким же атрибутом в отдельной ячейке. baseline применяется ко всем элементам строки и выравнивает их по базовой линии Атрибут ALIGN может принимать значения left, center и right (по умолчанию -- center) Атрибут VALIGN может иметь значения top, bottom и middle (по умолчанию -- middle) Атрибут ALIGN может принимать значения left, center и right (по умолчанию -- left) Атрибут VALIGN может иметь значения top, bottom и middle (по умолчанию -- middle) Атрибут ALIGN может иметь значения top и bottom (по умолчанию -- top); размещает заголовок таблицы сверху или снизу
76 Объединение ячеек Смежные ячейки таблицы могут объединяться. Например, в таблице из нескольких столбцов все ячейки первой строки можно объединить и поместить в этой строке красивый заголовок таблицы. Возможно также объединение нескольких строк или создание пустой прямоугольной области. Для соединения двух смежных ячеек в одном столбце нужно использовать атрибут ROWSPAN тега или, например, Для объединения двух смежных ячеек в одной строке нужно использовать атрибут COLSPAN тех же тегов, например,
77 Пример В следующей таблице используется объединение столбцов и строк. Заголовок на 3 столбца Заголовок на 1 строку Ячейка 1 Ячейка 2 Заголовок на 3 строки Ячейка 3 Ячейка 4 Ячейка 5 Ячейка 6 Ячейка 7 Ячейка 8 Таблица будет иметь следующий вид.
78 Таблица будет иметь следующий вид.
79