Язык разметки гипертекста Терминология HTML. Методика использования. Основные конструкции.

План занятия 1.История НТМL 2.Терминология 3. Основы форматирования HTML-документа. 4. Изображения в HTML-документах. 5. Организация гиперссылки. 6. Создание списков.

HTML HyperText Markup Language - язык разметки гипертекста

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

История Чарльз Гольдфарб создает прототип языка для разметки технической документации GML о-определен стандарт SGML (Standard Generalized Markup Language) Тим Бернерс-Ли разработал систему разметки гипертекстовых документов HTML разработан стандарт HTML создан консорциум W разработаны стандарты HTML 3.2 и HTML разработан стандарт HTML 2.0

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

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

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

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

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

Терминология - это конструкция языка HTML, предписывающая способ интерпретации помещенных внутри нее данных Элементы могут вкладываться один в другой подобно матрешкам Элемент

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

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

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

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

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

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

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

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

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

Тег - единица разметки, стартовый или конечный маркер элемента. Запись стартового тега в общем виде: Запись конечного тега в общем виде: Теги определяют границы действия элементов.

Атрибут - параметр или свойство элемента. Запись стартового тега с атрибутом в общем виде: Все атрибуты записываются внутри стартового тега. Запись атрибута в общем виде: имяАтрибута="значение" Атрибуты внутри стартового тега разделяются пробелами.

Наиболее распространенные атрибуты 1.align-выравнивание; 2.width - ширина в пикселах или процентах от ширины окна браузера; 3.height - высота в пикселах или процентах от ширины окна браузера; 4.color - указывает цвет в формате RGB или стандартный цвет.

Вложенность элементов

CER (Character Entity Reference <BODY> """ >">

СимволЗаменаОписание ""Кавычка &&Амперсанд >Больше Неразрывный пробел

СимволЗаменаОписание ©©Копирайт ««Левая угловая кавычка »»Правая угловая кавычка ®®Зарегистрирован ная торговая марка ±±Плюс - минус

Основные элементы HTML 1.определяющие структуру документа; 2.оформление блоков гипертекста (параграфы, списки, таблицы, изображения); 3. гипертекстовые ссылки и закладки; 4. формы для организации диалога; 5. вызов программ. Основные элементы HTML можно разделить по их назначению на следующие группы:

HTML - документ Структура гипертекстового документа Заголовок Первый абзац документа ……… Последний абзац документа заголовок

Основные контейнеры : TITLE (заглавие документа); META (метаинформация); STYLE (описатели стилей); SCRIPT (скрипты).

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

Элемент разметки описание поискового образа документа

Элемент разметки описание стиля для размещения описателей стилей

Элемент разметки описание стиля для размещения описателей стилей

Элемент разметки

Заголовки ТегРезультат Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Пример записи для форматирования:

Глава 1. Сайт как средство позиционирования организации в Интернет 1.1. Сайты: общая характеристика, средства реализации Понятие сайта

Теги форматирования текста ТегПояснение … Увеличение шрифта на один размер … Уменьшение шрифта на один размер … Верхний индекс … Нижний индекс … Жирный … Курсив … Подчеркнутый … Перечеркнутый

Теги форматирования текста, где «Шрифт» - название шрифта Windows, а размер указывается цифрой от 1 до 7. Размер шрифта в пунктах

Организация гиперссылки Текст ссылки Запись элемента в общем виде: Пример: Внешний вид документа с ссылкой: Поисковая система Аппорт

Работа с изображениями Для обозначения изображения используется тег : Пример: Тег изображения имеет один обязательный атрибут SRC (SouRCe, источник) и необязательные атрибуты: ALIGN; ALT; HSPACE; VSPACE; WIDTH; HEIGHT; BORDER; USEMAP. Запись элемента в общем виде: Закрывать этот тег не нужно.

Атрибуты тега изображения Использование атрибута ALIGN: align=left Текст располагается справа align=rightТекст располагается слева align=bottom align=top по нижней границе строки по верхней границе строки

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

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

Атрибуты тега изображения Использование атрибутов WIDTH, HEIGHT : Оба атрибута задают целочисленные значения размеров изображения по горизонтали и по вертикали соответственно (в пикселах). Это позволяет уменьшить время загрузки страницы с графикой. Браузер сразу отводит рамку для изображения и продолжает загружать текст на страницу.

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

Представление цвета в HTML Название цвета Шестнадцатиричное значение BlackЧерный# WhiteБелый#FFFFFF GreyСерый# SilverСеребристый#C0C0C0 GreenТемно-зеленый# LimeЯрко-зеленый#00FF00 OliveОливковый# YellowЖелтый#FFFF00

Представление цвета в HTML Название цвета Шестнадцатиричное значение AquaСветлый сине- зеленый #00FFFF TealТемный сине- зеленый # BlueСиний#0000FF NavyТемно-синий# FuchsiaЯрко-розовый#FF00FF PurpleФиолетовый#800080

Представление цвета в HTML Название цвета Шестнадцатиричное значение RedКрасный#FF0000 MaroonКрасно- коричневый # Синий.

Создание списков в HTML ненумерованные список (неупорядоченные) (Unordered Lists ); нумерованные список (упорядоченные) (Ordered Lists ). В НТМL имеются следующие виды списков:

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

Создание списков в HTML Пример неупорядоченного списка: К устройствам ввода информации относятся: клавиатура манипулятор типа мышь сканер световое перо К устройствам ввода информации относятся: клавиатура; манипулятор типа мышь; сканер; световое перо.

Атрибут TYPE неупорядоченного списка: - Тег создает сплошные маркеры; - Тег создает маркеры в виде окружностей; - Тег создает сплошные квадратные маркеры. Можно смешивать разные типы маркеров в одном списке.

Создание списков в HTML Упорядоченные списки – список, в котором порядок элементов имеет существенное значение. Пример: инструкция, оглавление книги. Записывается данный список с помощью тега, закрывать этот тег обязательно. Внутри неупорядоченного списка каждый элемент отмечается тегом.

Создание списков в HTML Пример упорядоченного списка: Оглавление: Глава 1 Глава 2 Глава 3 Глава 4 Оглавление: 1.Глава 1 2.Глава 2 3.Глава 3 4.Глава 4

Атрибут START: Атрибут START=число нумерованного списка, позволяет начать нумерацию с цифры, отличной от 1. Пример: Это пункт 5 Это пункт 6

Типы нумерации упорядоченных списков в HTML: ТипСтильОбразец последовательности Азаглавные буквыA, B, C астрочные буквыa, b, c Iзаглавные римские цифры I, II, III iстрочные римские цифры i, ii, iii 1арабские цифры1, 2, 3

Изменение стиля отдельного элемента списка : Заглавные буквы Заглавные римские цифры строчные римские цифры арабские цифры строчные буквы

Использование атрибутов START и TYPE: Атрибут START устанавливает начальное значение счетчика, а атрибут TYPE назначает стиль нумерации. Пример: Это римское восемь viii

Атрибут VALUE упорядоченного списка: Это пункт 1 Это пункт 2 Это пункт 9 Это пункт Это пункт 1 2. Это пункт 2 9. Это пункт Это пункт 10 Используется только для упорядоченных списков. Изменяет номер отдельного элемента списка и тех, что за ним следуют.

Вложенные неупорядоченные списки: Животные Африки Антилопа Лев Животные Австралии Кенгуру Коала oЖивотные Африки Антилопа Лев oЖивотные Австралии Кенгуру Коала

Вложенные упорядоченные списки: История нашей группы Знакомство Первый курс Второй курс Дружба Надежды на будущее A. История нашей группы 1.Знакомство a. Первый курс b. Второй курс 2. Дружба B. Надежды на будущее