Скачать презентацию Язык разметки гипертекста 1 2 3 4 5 Скачать презентацию Язык разметки гипертекста 1 2 3 4 5

Лекция_3_4.ppt

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

Язык разметки гипертекста 1. 2. 3. 4. 5. Структура Web-страницы История появления языка Структура Язык разметки гипертекста 1. 2. 3. 4. 5. Структура Web-страницы История появления языка Структура Web-страницы. Терминология HTML. Основные конструкции языка.

Название компании Структура Web-страницы Название документа Кафедра АОЭИ Главная Следующая Предыдущая История Подразделения Новости Название компании Структура Web-страницы Название документа Кафедра АОЭИ Главная Следующая Предыдущая История Подразделения Новости Навигационная Кафедра автоматизированной обработки экономической панель информации создана в сентябре 2003 года. Являясь одним из основных учебно-научных структурных подразделений филиала Академии, кафедра осуществляет учебносодержание методическую и научно-исследовательскую работу по методике преподавания информатики, по созданию автоматизированных информационных систем для обработки экономической информации. В на стоящее время работа кафедры осуществляется по следующим дисциплинам: Контактная Информатика; информация Автоматизированные информационные технологии; Информационные системы в экономике. Телефон: (3812) 23 -14 -90, email: admin@ocfe. okno. ru 2004 АКАДЕМИЯ БЮДЖЕТА И КАЗНАЧЕЙСТВА (ОМСКИЙ ФИЛИАЛ

… …

Признаки первоклассных узлов • • • Богатое информационное содержание Художественный дизайн мирового уровня. Часто Признаки первоклассных узлов • • • Богатое информационное содержание Художественный дизайн мирового уровня. Часто обновляемое содержание. Интерактивность. Помощь и поддержка. Необходимые услуги при выборе провайдера • Пропускная способность каналов. • Поддержка сервером провайдера SSI (Server Side Includes) • Поддержка сервером провайдера CGI-сценариев ( Common Gateway Interface ) • Поддержка моментальной перекодировки.

История создания HTML (Hyper Text Markup Language – язык разметки гипертекста) Некоторые даты: 1945 История создания HTML (Hyper Text Markup Language – язык разметки гипертекста) Некоторые даты: 1945 год: американский ученый, научный консультант президента Ванневар Буш (Vannevar Bush) высказывает идею гипертекста. 1968 год: Дуглас Энджельбарт (создатель манипулятора - мыши) демонстрирует работу гипертекстовых связей в созданном им текстовом процессоре.

Некоторые даты: 1960 -е годы: сотрудники компании IBM создали язык GML годы: (General Markup Некоторые даты: 1960 -е годы: сотрудники компании IBM создали язык GML годы: (General Markup Language - общий язык разметки печатных документов), в дальнейшем был расширен, в 80 -х годах прошёл стандартизацию ISO, получил название SGML (Standart General Markup Langugage). SGML широкого распространения не получил ввиду своей сложности и дороговизны реализации. 1969 Тед Нельсон ввел термин "гипертекст" 1980 -е годы: учёный-физик Тим Бернерс-Ли (Швейцария) в годы: конце 80 -х годов разработал язык, в основу которого положил язык SGML и приёмы работы с гипертекстом – HTML.

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

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

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

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

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

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

Структура гипертекстового документа HTML - документ <HTML> <HEAD> <TITLE>Заголовок</TITLE> </HEAD> <BODY> Первый абзац документа Структура гипертекстового документа 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- ДОКУМЕНТА СТРОК ДЛЯ ИНТЕРПРЕТАЦИИ БОЛЬШЕ НЕТ

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

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

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

Теги заголовка документа • SCRIPT служит для размещения кода программы на Java. Script, VBScript Теги заголовка документа • SCRIPT служит для размещения кода программы на Java. Script, VBScript или JScript. Синтаксис в общем виде: ] Пример: