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

HTML_VIEW.ppt

  • Количество слайдов: 47

Язык разметки гипертекста Терминология HTML. Основные конструкции языка. Структура Webстраницы. Необходимые услуги при выборе Язык разметки гипертекста Терминология HTML. Основные конструкции языка. Структура Webстраницы. Необходимые услуги при выборе провайдера.

HTML (Hyper. Text Markup Language) - язык разметки гипертекста История 1969 1986 1989 1993 HTML (Hyper. Text Markup Language) - язык разметки гипертекста История 1969 1986 1989 1993 1994 1995 1997 - Чарльз Гольдфарб создает прототип языка для разметки технической документации GML -определен стандарт SGML для разметки печатных документов (Standard Generalized Markup Language) - Тим Бернерс-Ли разработал систему разметки гипертекстовых документов HTML - разработан стандарт HTML 1. 2 - создан консорциум W 3 - разработан стандарт HTML 2. 0 - разработаны стандарты HTML 3. 2 и HTML 4. 0

Терминология HTML-документ - текстовый документ, содержимое которого размечено при помощи элементов языка HTML. Такие Терминология HTML-документ - текстовый документ, содержимое которого размечено при помощи элементов языка HTML. Такие документы обычно имеют расширение HTM, HTML Гипертекст - специальным образом организованный текст, позволяющий пользователю по указателям (гиперссылкам) осуществлять мгновенный переход к связанным ресурсам. Гиперссылка - объект интерпретируемого документа, служащий указателем на другой элемент, документ или файл.

Терминология - это часть HTML - документа, которая Элемент (контейнер) специальным способом размечена при Терминология - это часть HTML - документа, которая Элемент (контейнер) специальным способом размечена при помощи конструкций языка HTML, предписывающих способ интерпретации данных контейнер : : = <имя_тега [список_атрибутов]> содержание контейнера Элементы могут вкладываться один в другой подобно матрешкам

Терминология Тег - единица (маркер) разметки, конструкция языка HTML. Различают начальный и конечный маркер Терминология Тег - единица (маркер) разметки, конструкция языка HTML. Различают начальный и конечный маркер элемента. Запись начального тега в общем виде: <тег [атрибуты]> Запись конечного тега в общем виде: Теги определяют границы действия элементов. Атрибут - параметр или свойство элемента. Запись атрибута в общем виде: имя. Атрибута="значение" Все атрибуты записываются внутри начального тега. В общем виде список атрибутов можно определить : список_атрибутов : : = имя. Атрибута 1 ="значение" [имя. Атрибута 2 ="значение". . . ] Атрибуты внутри начального тега разделяются пробелами.

Структура гипертекстового документа Гипертекстовый документ (контейнер) состоит из двух других вложенных контейнеров: • заголовка Структура гипертекстового документа Гипертекстовый документ (контейнер) состоит из двух других вложенных контейнеров: • заголовка документа (тег HEAD) • тела документа (тег BODY).

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

СТРУКТУРНЫЕ ТЭГИ Эту базовую структуру в простейшем виде можно наглядно показать следующим образом: <HTML> СТРУКТУРНЫЕ ТЭГИ Эту базовую структуру в простейшем виде можно наглядно показать следующим образом: начало контейнера HTML-документа начало контейнера заголовка начало контейнера строки – названия страницы … строка названия страницы конец контейнера строки – названия страницы конец контейнера заголовка начало контейнера тела страницы … тело (всё содержимое) страницы конец контейнера тела страницы конец контейнера HTML-документа

Взаимодействие документа и браузера HTML - документ <HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD> <BODY> Первый абзац Взаимодействие документа и браузера HTML - документ Заголовок Первый абзац документа Последний абзац документа Программа-браузер Заголовок окна Управляющая часть Строка адреса ресурса (URL) Окно просмотра интерпретированного HTML-документа

HTML - документ URL: http: //mu-mu. ru/gerasim. htm <HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD> <BODY> Первый HTML - документ URL: http: //mu-mu. ru/gerasim. htm Заголовок Первый абзац документа ……… Последний абзац документа Программа-браузер

HTML - документ Программа-браузер <HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD> http: //mu-mu. ru/gerasim. htm <BODY> Первый HTML - документ Программа-браузер Заголовок http: //mu-mu. ru/gerasim. htm Первый абзац документа ……… Последний абзац документа ДОКУМЕНТ НАЙДЕН… ЖДИТЕ.

HTML - документ Программа-браузер <HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD> http: //mu-mu. ru/gerasim. htm <BODY> Первый HTML - документ Программа-браузер Заголовок http: //mu-mu. ru/gerasim. htm Первый абзац документа ……… Последний абзац документа НАЙДЕНО НАЧАЛО HTML-КОДА

HTML - документ Программа-браузер <HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD> http: //mu-mu. ru/gerasim. htm <BODY> Первый HTML - документ Программа-браузер Заголовок http: //mu-mu. ru/gerasim. htm Первый абзац документа ……… Последний абзац документа НАЧАТО ИНТЕРПРЕТИРОВАНИЕ ЗАГОЛОВКА ДОКУМЕНТА

HTML - документ Программа-браузер <HTML> Заголовок <HEAD> <TITLE>Заголовок</TITLE> </HEAD> http: //mu-mu. ru/gerasim. htm <BODY> HTML - документ Программа-браузер Заголовок Заголовок http: //mu-mu. ru/gerasim. htm Первый абзац документа ……… Последний абзац документа ИНТЕРПРЕТАЦИЯ ЗАГЛАВИЯ

HTML - документ Программа-браузер <HTML> Заголовок <HEAD> <TITLE>Заголовок</TITLE> </HEAD> http: //mu-mu. ru/gerasim. htm <BODY> HTML - документ Программа-браузер Заголовок Заголовок http: //mu-mu. ru/gerasim. htm Первый абзац документа ……… Последний абзац документа ЗАГОЛОВОК ДОКУМЕНТА ПРОИНТЕРПРЕТИРОВАН

HTML - документ Программа-браузер <HTML> <HEAD> Заголовок <TITLE>Заголовок</TITLE> </HEAD> http: //mu-mu. ru/gerasim. htm <BODY> HTML - документ Программа-браузер Заголовок Заголовок http: //mu-mu. ru/gerasim. htm Первый абзац документа ……… Последний абзац документа НАЧАТО ИНТЕРПРЕТИРОВАНИЕ ТЕЛА ДОКУМЕНТА, ОТОБРАЖАЕМОГО В ОКНЕ БРАУЗЕРА

HTML - документ Программа-браузер <HTML> Заголовок <HEAD> <TITLE>Заголовок</TITLE> </HEAD> http: //mu-mu. ru/gerasim. htm <BODY> HTML - документ Программа-браузер Заголовок Заголовок http: //mu-mu. ru/gerasim. htm Первый абзац документа Первый абзац документа ……… Последний абзац документа ИНТЕРПРЕТИРУЕТСЯ ТЕКСТ

HTML - документ Программа-браузер <HTML> Заголовок <HEAD> <TITLE>Заголовок</TITLE> </HEAD> http: //mu-mu. ru/gerasim. htm <BODY> HTML - документ Программа-браузер Заголовок Заголовок http: //mu-mu. ru/gerasim. htm Первый абзац документа Первый абзац документа ……… Последний абзац документа ИНТЕРПРЕТИРУЕТСЯ ИЗОБРАЖЕНИЕ

HTML - документ Программа-браузер <HTML> Заголовок <HEAD> <TITLE>Заголовок</TITLE> </HEAD> http: //mu-mu. ru/gerasim. htm <BODY> HTML - документ Программа-браузер Заголовок Заголовок http: //mu-mu. ru/gerasim. htm Первый абзац документа Первый абзац документа ……… Последний абзац документа ……… Последний абзац документа ИНТЕРПРЕТИРУЕТСЯ …ТЕКСТ

HTML - документ Программа-браузер <HTML> <HEAD> Заголовок <TITLE>Заголовок</TITLE> </HEAD> <BODY> Первый абзац документа <IMG HTML - документ Программа-браузер Заголовок Заголовок Первый абзац документа http: //mu-mu. ru/gerasim. htm Первый абзац документа ……… Последний абзац документа ……… Последний абзац документа ЗАКОНЧЕНО ИНТЕРПРЕТИРОВАНИЕ ТЕЛА ДОКУМЕНТА, ОТОБРАЖАЕМОГО В ОКНЕ БРАУЗЕРА

HTML - документ Программа-браузер <HTML> <HEAD> Заголовок <TITLE>Заголовок</TITLE> </HEAD> <BODY> Первый абзац документа <IMG HTML - документ Программа-браузер Заголовок Заголовок Первый абзац документа http: //mu-mu. ru/gerasim. htm Первый абзац документа ……… Последний абзац документа ……… Последний абзац документа ДОСТИГНУТА ГРАНИЦА HTML- ДОКУМЕНТА СТРОК ДЛЯ ИНТЕРПРЕТАЦИИ БОЛЬШЕ НЕТ

Группы тегов НТМL Основные теги HTML можно разделить по их назначению на следующие группы: Группы тегов НТМL Основные теги HTML можно разделить по их назначению на следующие группы: • • • Структура документа Разметка текста Создание списков Создание таблиц Графика Гиперссылки Специальные теги (CER) Формы для организации диалога Использование программ

Теги тела документа Тело документа – контейнер ВОDY Атрибуты тега <BODY>: ВACKGROUND=“IMAGE 1. GIF” Теги тела документа Тело документа – контейнер ВОDY Атрибуты тега : ВACKGROUND=“IMAGE 1. GIF” Текстура фона ВGCOLOR=#FFFFFF Цвет фона ТЕХТ=#000000 Цвет текста LINK =#0000 FF Цвет гипертекстовой ссылки VLINK =#EE 80 EE Цвет пройденной гиперссылки ALINK =#FF 0000 Цвет активной гиперссылки

Цвета Цвет Название Код аквамарин aqua #00 FFFF ультрамарин navy #000080 черный black #000000 Цвета Цвет Название Код аквамарин aqua #00 FFFF ультрамарин navy #000080 черный black #000000 оливковый olive #808000 синий blue #0000 FF оранжевый orange #FFA 500 фуксиновый fuchsia #FF 00 FF пурпурный purple #800080 золотой gold #FFD 700 красный red #FF 0000 серый gray #808080 серебристый silver зеленый green #008000 сизый teal #008080 индиго indigo #4 B 0080 фиолетовый violet #EE 80 EE светло-зеленый lime #00 FF 00 белый white #FFFFFF каштановый maroon #800000 желтый yellow #FFFF 00 #C 0 C 0 C 0

Теги тела документа Теги управления разметкой текста Заголовки Тег <h 1> <h 2> <h Теги тела документа Теги управления разметкой текста Заголовки Тег Результат Заголовок Конечный тег – обязательный. Пример записи форматирования: Заголовок Атрибут АLIGN – способ выравнивания. Возможные значения: justify left right center Заголовок Пример: Заголовок

Теги тела документа Теги управления разметкой текста Тег <P> применяется для разделения текста на Теги тела документа Теги управления разметкой текста Тег

применяется для разделения текста на параграфы Атрибуты, что и в заголовках Тег <ВR> принудительный перевод строки Атрибут СLЕАR. Значения : lеft right аll Тег отображает весь текст в одной строке Тег задает шрифт текста Атрибуты: SIZЕ =n СОLОR=#008080 FACE=“Times New Roman”

Теги тела документа Теги управления разметкой текста Теги, управляющие формой отображения <I>. . . Теги тела документа Теги управления разметкой текста Теги, управляющие формой отображения . . . . . . <ТТ>. . . Курсив (Italic) Усиление (Вold) Телетайп . . . . . . . . . . . . . . . . . . Подчеркивание Перечеркнутый текст Увеличенный размер шрифта Уменьшенный размер шрифта Подстрочные символы Надстрочные символы

Теги тела документа Теги управления разметкой текста Теги логической разметки <CENTER>. . . </CENTER> Теги тела документа Теги управления разметкой текста Теги логической разметки

. . .
. . . <СIТЕ>. . . . . . Последовательность литералов <СODE>. . . Отображает примеры кода (программ) <КВD>. . . . . . . . . <ЕМ>. . . Пример ввода символов с клавиатуры Текст, заключенный в скобки Цитирование Усиление Переменная Определение Типографское усиление

Теги тела документа Создание списков в HTML Тег <UL [TYPE=Значение]> — Неупорядоченные списки <UL> Теги тела документа Создание списков в HTML Тег

    — Неупорядоченные списки
    • первый элемент списка
    • второй элемент списка
      • . . . .
    • n-ый элемент списка
    Атрибут TYPE определяет тип маркера. Значения DISK - маркеры такого типа, как в списках первого уровня по умолчанию СIRCLE - маркеры в виде окружностей SQUARE - сплошные квадратные маркеры

Теги тела документа Создание списков в HTML Тег <OL [TYPE=Значение] > — Упорядоченные списки Теги тела документа Создание списков в HTML Тег

    — Упорядоченные списки Атрибут TYPE определяет тип нумерации элементов списка. Значения 1 - Список с нумерацией в формате 1. , 2. , 3. , 4. и т. д. А- Список с нумерацией в формате А. , В. , С. , D. и т. д. a- Список с нумерацией в формате а. , b. , с. , d. и т. д. I- список с нумерацией в формате I. , III. , IV. и т. д.

Теги тела документа Создание списков в HTML Пример списка в HTML -документе <P> В Теги тела документа Создание списков в HTML Пример списка в HTML -документе

В языке HTML применяется два вида списка:

  • неупорядоченные списки;
  • упорядоченные списки.

Данный пример списка в окне браузера В языке HTML применяется два вида списка: неупорядоченные списки; упорядоченные списки. Тег <НR> — Горизонтальная линия Комментарии в HTML начинаются с символа

Теги тела документа Вставка изображения Тег IMG. Запись элемента в общем виде: <IMG SRC=“Имя. Теги тела документа Вставка изображения Тег IMG. Запись элемента в общем виде: «текст» Атрибут SRC - обязательный. Конечного тега нет. ALT - текст, который будет выводиться вместо изображения Пример: «Бабочка» Атрибут ALIGN определяет положение изображения относительно окружаюшего текста align=left align=right align=bottom align=top Текст располагается справа Текст располагается слева по нижней границе строки по верхней границе строки

Теги тела документа Вставка изображения Тег < IMG > Другие необязательные атрибуты: HSPACE =n Теги тела документа Вставка изображения Тег < IMG > Другие необязательные атрибуты: HSPACE =n - горизонтальное расстояние между вертикальной границей страницы и изображением VSPACE =n - вертикальное расстояние между строками текста и изображением BORDER =n - толщина рамки вокруг изображения WIDTH =n - размер изображения HEIGHT =n

Теги тела документа Организация гиперссылки Запись элемента в общем виде: <А HREF=“Адрес”>Текст ссылки</A> Пример: Теги тела документа Организация гиперссылки Запись элемента в общем виде: <А HREF=“Адрес”>Текст ссылки Пример: Одной из поисковых систем является система <А HREF=“http: //www. aport. ru”> Аппорт Внешний вид документа со ссылкой: Одной из поисковых систем является система Аппорт Пример использования в качестве гиперссылки рисунка: <А НREF="http: //www. animals. ru/fly 1. htm">

Теги тела документа Средства описания таблиц Тег <ТABLE> — создание таблицы Тег <ТR> — Теги тела документа Средства описания таблиц Тег <ТABLE> — создание таблицы Тег <ТR> — создание строки таблицы Тег <ТD> — определение ячеек таблицы, задается внутри строки Тег <ТН> — заголовки столбцов таблицы Тег <САРТIОN [ALIGN=значение]> — создание заголовков, ALIGN – определяет размещение (bottom , top)

Теги тела документа Средства описания таблиц Атрибуты: BACKGROUND=URL - задает фоновое изображение BGCOLOR =цвет Теги тела документа Средства описания таблиц Атрибуты: BACKGROUND=URL - задает фоновое изображение BGCOLOR =цвет – цвет фона NOWRAP – текст размещается в одну строку СОLSPAN=n – объединение n смежных ячеек ROWSPAN=n – объединение n смежных строк WIDТH =n - задает ширину объекта ALIGN =значение – выравнивание текста по горизонтали (left, сеnter, right) VALIGN =значение – выравнивание текста по вертикали (top, middle, bottom) BORDER =n – определение рамок таблицы или ячеек СЕLLРАDDING =n – задание полей внутри ячейки СЕLLSPACING =n – задание полей между ячейками

Теги тела документа Пример описания таблицы В таблице приведены значения атрибута ALIGN тега IMG Теги тела документа Пример описания таблицы В таблице приведены значения атрибута ALIGN тега IMG left Текст располагается справа right Текст располагается слева bottom Нижняя граница рисунка располагается по нижней границе строки Верхняя граница рисунка располагается top по верхней границе строки

Теги тела документа Пример описания таблицы <HTML><BODY> <TABLE CELLPADDING= Теги тела документа Пример описания таблицы

<САРТIОN ALIGN=“top”> В таблице приведены значения атрибута ALIGN тега IMG
left Текст располагается справа
right Текст располагается слева
bottom Нижняя граница рисунка располагается по нижней границе строки
top Верхняя граница рисунка располагается по верхней границе строки

CER - элементы (Character Entity Reference) Код CER Имя CER Символ Описание " " CER - элементы (Character Entity Reference) Код CER Имя CER Символ Описание " " " Кавычка & & & Амперсант < < < Меньше > > > Больше     ¡ ¡ ¡ Перевернутый восклицательный знак ¢ ¢ ¢ Цент £ £ £ Фунт ¤ ¤ ¤ Валюта ¥ ¥ ¥ Йена ¨ ¨ ¨ Умляут © © © Копирайт « « « Левая угловая кавычка ® ® ® Зарегистрированная торговая марка ± ± ± Плюс или минус » » » Правая угловая кавычка Неразрывный пробел

Основные теги заголовка • • HEAD (элемент разметки HEAD); TITLE (заглавие документа); BASE (база Основные теги заголовка • • HEAD (элемент разметки HEAD); TITLE (заглавие документа); BASE (база URL); META (метаинформация); LINK (общие ссылки); STYLE (описатели стилей); SCRIPT (скрипты).

Теги заголовка документа TITLE -служит для именования документа в WWW. Синтаксис : <TITLE>название документа</TITLE> Теги заголовка документа TITLE -служит для именования документа в WWW. Синтаксис : название документа BASE - служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной (частичной) форме. Синтаксис: Пример: . . .

Теги заголовка документа • LINK - позволяет загружать внешние описатели стилей. Синтаксис: <LINK [REL=тип_отношения] Теги заголовка документа • LINK - позволяет загружать внешние описатели стилей. Синтаксис: Пример: • STYLE - предназначен для размещения описателей стилей внутри документа. Синтаксис: • SCRIPT служит для размещения кода программы на Java. Script, VBScript или JScript. Синтаксис в общем виде: ] Пример: