Язык разметки гипертекста

Терминология HTML.

Основные конструкции.

План занятия

1. История НТМL
2. Терминология

3. Основы форматирования HTML-документа.

4. Изображения в HTML-документах.

5. Организация гиперссылки.

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

HTML

HyperText Markup Language

- язык разметки гипертекста

Гипертекст

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

Терминология

История

1969

- Чарльз Гольдфарб создает прототип языка для разметки технической документации GML

1986

• определен стандарт SGML

(Standard Generalized Markup Language)

1989

- Тим Бернерс-Ли разработал систему разметки гипертекстовых документов HTML

1993

- разработан стандарт HTML 1.2

1994

- создан консорциум W3

1997

- разработаны стандарты HTML 3.2 и HTML 4.0

1995

- разработан стандарт HTML 2.0

Терминология

Элемент

- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Элементы могут вкладываться один в другой подобно матрешкам

Терминология

- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Элементы могут вкладываться один в другой подобно матрешкам

Элемент

Терминология

- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Элементы могут вкладываться один в другой подобно матрешкам

Элемент

Терминология

- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Элементы могут вкладываться один в другой подобно матрешкам

Элемент

Терминология

- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Элементы могут вкладываться один в другой подобно матрешкам

Элемент

Терминология

- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Элементы могут вкладываться один в другой подобно матрешкам

Элемент

Терминология

- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Элементы могут вкладываться один в другой подобно матрешкам

Элемент

Терминология

- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Элементы могут вкладываться один в другой подобно матрешкам

Элемент

Терминология

- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Элементы могут вкладываться один в другой подобно матрешкам

Элемент

Терминология

- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Элементы могут вкладываться один в другой подобно матрешкам

Элемент

Терминология

- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Элементы могут вкладываться один в другой подобно матрешкам

Элемент

Терминология

- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Элементы могут вкладываться один в другой подобно матрешкам

Элемент

Терминология

- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Элементы могут вкладываться один в другой подобно матрешкам

Элемент

Терминология

- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Элементы могут вкладываться один в другой подобно матрешкам

Элемент

Терминология

- это конструкция языка HTML предписывающая способ интерпретации помещенных внутри нее данных

Элементы могут вкладываться один в другой подобно матрешкам

Элемент

Тег

- единица разметки, стартовый или конечный маркер элемента.

Запись стартового тега в общем виде:

<тег>

Запись конечного тега в общем виде:

</тег>

Теги определяют границы действия элементов.

Атрибут

- параметр или свойство элемента.

Запись стартового тега с атрибутом в общем виде:

<тег имяАтрибута="значение">

Все атрибуты записываются внутри стартового тега.

Запись атрибута в общем виде:

имяАтрибута="значение"

Атрибуты внутри стартового тега разделяются пробелами.

Наиболее распространенные атрибуты

​

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

​

HTML-документ

- текстовый документ содержимое которого размечено при помощи элементов языка HTML.

Такие документы обычно имеют расширение HTM, HTML.

HTML-код

- совокупность всех элементов языка HTML, использованных для разметки документа.

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

Гиперссылка

- объект интерпретируемого документа, служащий указателем на другой элемент, документ или файл.

Терминология

URL – (Universal Resource Locator) универсальный указатель ресурса

Например: http://mu-mu.ru/gerasim.htm

Здесь:

Запись URL в общем виде:

протокол://имяСервера.имяДомена/путь

Структура гипертекстового документа

HTML - документ

<HTML>

</HTML>

<TITLE>Заголовок</TITLE>

Первый абзац документа

<IMG SRC=“PIC1.GIF”>

………

Последний абзац документа

заголовок

Основные элементы HTML

​

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

3. гипертекстовые ссылки и закладки;

4. формы для организации диалога;

5. вызов программ.

Основные элементы HTML можно разделить по их назначению на следующие группы:

Заголовки

<H1>Заголовок</H1>

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

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

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

<FONT FACE= «Шрифт» SIZE=«Размер»>, где «Шрифт» - название шрифта Windows, а размер указывается цифрой от 1 до 7.

Организация гиперссылки

<А HREF=“Адрес”>Текст ссылки</A>

​

​

​

​

​

​

Запись элемента в общем виде:

Пример:

Внешний вид документа с ссылкой:

​

​

​

​

<А HREF=“http://www.aport.ru”>Поисковая система Аппорт</A>

​

Поисковая система Аппорт

​

Работа с изображениями

​

​

​

​

• ALIGN;
• ALT;
• HSPACE;
• VSPACE;

<IMG SRC=“ИмяФайла”>

​

​

​

​

​

​

Для обозначения изображения используется тег <IMG> :

<IMG SRC=“leo1.gif”>

Пример:

​

​

​

​

Тег изображения имеет один обязательный атрибут SRC (SouRCe, источник) и необязательные атрибуты:

• WIDTH;
• HEIGHT;
• BORDER;
• USEMAP.

Запись элемента в общем виде:

Закрывать этот тег не нужно.

Атрибуты тега изображения <IMG>

​

​

​

​

Использование атрибута ALIGN:

​

​

​

​

Атрибуты тега изображения <IMG>

​

​

​

​

Использование атрибута ALT:

​

​

​

​

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

<IMG SRC=“image.gif” ALT=“изображение”>

Атрибуты тега изображения <IMG>

​

​

Использование атрибутов HSPACE, VSPACE:

​

​

​

​

Атрибут HSPACE

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

Атрибут VSPACE

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

<IMG SRC=“image.gif” HSPACE=“10” VSPACE=“10”>

Атрибуты тега изображения <IMG>

​

​

Использование атрибутов WIDTH, HEIGHT :

​

​

​

​

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

<IMG SRC=“image.gif” WIDTH=“100” HEIGHT=“200”>

Изображение �в качестве гипертекстовых ссылок

​

​

​

​

​

​

​

​

Для обозначения изображения как гипертекстовой метки используется тот же тег <A>, что и для текста, но между <A> и </A> вставляется тег изображения <IMG> :

<A HREF="адрес файла или изображения"> <IMG SRC= "image.gif"></A>

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

Представление цвета в HTML

Представление цвета в HTML

Представление цвета в HTML

<FONT COLOR= “#0000FF”> Синий</FONT>.

<FONT COLOR= “blue”> Синий</FONT>.

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

​

​

​

​

• ненумерованные список (неупорядоченные)

(Unordered Lists <UL>);

• нумерованные список (упорядоченные)

(Ordered Lists <OL>).

​

​

​

​

В НТМL имеются следующие виды списков:

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

Неупорядоченные списки – совокупность однородных элементов, между которыми нет отношения порядка или следования.

Пример: собрание гиперссылок на другие документы.

​

​

​

​

​

​

​

​

​

​

Записывается данный список с помощью тега <UL>,

закрывать этот тег обязательно.

Внутри неупорядоченного списка каждый элемент

отмечается тегом <LI>.

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

К устройствам ввода информации относятся:

<UL>

<LI> клавиатура</LI>

<LI> манипулятор типа мышь </LI>

<LI> сканер </LI>

<LI> световое перо </LI>

</UL>

​

К устройствам ввода информации относятся:

​

• клавиатура;
• манипулятор типа мышь;
• сканер;
• световое перо.

​

​

​

​

​

​

​

​

​

​

​

Пример неупорядоченного списка:

Атрибут TYPE �неупорядоченного списка:

<UL TYPE=DISK> - Тег создает сплошные маркеры;

<UL TYPE=СIRCLE> - Тег создает маркеры в виде окружностей;

<UL TYPE=SQUARE> - Тег создает сплошные квадратные маркеры.

​

​

​

​

​

​

​

​

Можно смешивать разные типы маркеров в одном списке.

​

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

Упорядоченные списки – список, в котором порядок элементов имеет существенное значение.

Пример: инструкция, оглавление книги.

​

​

​

​

​

​

​

​

Записывается данный список с помощью тега <OL>,

закрывать этот тег обязательно.

Внутри неупорядоченного списка каждый элемент

отмечается тегом <LI>.

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

Оглавление:

<OL>

<LI> Глава 1</LI>

<LI> Глава 2</LI>

<LI> Глава 3</LI>

<LI> Глава 4 </LI>

</OL>

Оглавление:

​

1. Глава 1
2. Глава 2
3. Глава 3
4. Глава 4

​

​

​

​

​

​

​

​

Пример упорядоченного списка:

Атрибут START:

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

Пример:

​

<OL START=“5” >

<LI> Это пункт № 5</LI>

<LI> Это пункт № 6</LI>

</OL>

​

​

​

​

​

​

​

​

Типы нумерации упорядоченных списков в HTML:

​

​

​

​

​

​

​

​

Изменение стиля отдельного элемента списка :

<OL >

<LI TYPE=А> Заглавные буквы </LI>

<LI TYPE=I> Заглавные римские цифры </LI>

<LI TYPE=i> строчные римские цифры </LI>

<LI TYPE=1> арабские цифры </LI>

<LI TYPE=a> строчные буквы </LI>

</OL>

​

​

​

​

​

​

Использование атрибутов �START и TYPE:

Атрибут START устанавливает начальное значение счетчика, а атрибут TYPE назначает стиль нумерации.

​

​

​

​

​

​

Пример:

<OL START=“8” TYPE =“i” >

<LI> Это римское восемь viii</LI>

</OL>

​

Атрибут VALUE �неупорядоченного списка:

<OL >

<LI> Это пункт № 1</LI>

<LI> Это пункт № 2</LI>

<LI VALUE=9> Это пункт № 9</LI>

<LI> Это пункт № 10</LI>

<OL >

1. Это пункт № 1

2. Это пункт № 2

9. Это пункт № 9

10. Это пункт № 10

​

​

​

​

​

Используется только для упорядоченных списков.

Изменяет номер отдельного элемента списка и тех,

что за ним следуют.

Вложенные неупорядоченные списки:

<UL>

<LI>Животные Африки</LI>

<UL>

<LI>Антилопа</LI>

<LI>Лев</LI>

</UL>

<LI>Животные Австралии</LI>

<UL>

<LI>Кенгуру</LI>

<LI>Коала</LI>

</UL>

</UL>

​

• Животные Африки
• Антилопа
• Лев
• Животные Австралии
• Кенгуру
• Коала

​

​

​

​

Вложенные упорядоченные списки:

<OL TYPE= “A”>

<LI>История нашей группы</LI>

<OL TYPE= “1”>

<LI>Знакомство</LI>

<OL TYPE= “a”>

<LI>Первый курс</LI>

<LI>Второй курс</LI>

</OL>

<LI>Дружба</LI>

</OL>

<LI>Надежды на будущее</LI>

</OL>

​

A. История нашей группы

• Знакомство

a. Первый курс

b. Второй курс

2. Дружба

B. Надежды на будущее

​

​

​

​