Основы Web-технологий

Download Report

Transcript Основы Web-технологий

Учебный курс

Введение в HTML и CSS

Лекция 3

Основы HTML

кандидат технических наук

Павел Брониславович Храмцов

[email protected]

1

HTML: В чем прелесть?

Разработчики HTML смогли решить две задачи:

• предоставить дизайнерам гипертекстовых баз данных простое средство создания документов; • сделать это средство достаточно мощным, чтобы отразить имевшиеся на тот момент представления об интерфейсе пользователя гипертекстовых баз данных. 2

HTML: возможности

Язык НТМL :

•

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

•

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

•

В состав языка вошли развитые средства для создания различных уровней заголовков, шрифтовых выделений, различные списки, таблицы и многое другое.

3

HTML: простое решение

Вид HTML-файла: Обычный текстовый файл. Такой файл можно создать в любом текстовом редакторе на любой аппаратной платформе в среде какой угодно операционной системы; Посети можно передавать в соответствии с RFC 822 текстовые файлы LATIN1. К моменту разработки HTML существовал американский стандарт для разработки сетевых информационных систем — Z39.50, в котором в качестве единицы хранения указывался простой текстовый файл в кодировке LATIN1, что соответствует US ASCII.

4

HTML: Версии

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

HTML 2.0 Вторая версия языка фиксировала практику использования его конструкций.

HTML++ текста. представляла новые возможности, расширяя набор тегов HTML в сторону отображения научной информации и таблиц, а также улучшения стиля компоновки изображений и HTML 3.2 смогла упорядочить все нововведения и согласовать их с существующей практикой. Она позволяет реализовать использование таблиц, выполнение кодов языка Java, обтекание графики текстом, а также отображение верхних и нижних индексов.

5

HTML: Версии

HTML 4.0 кроме возможностей разметки текста, включения мультимедиа и формирования гипертекстовых связей, уже существовавших в предыдущих версиях HTML, в версию 4.01 включены дополнительные средства работы с мультимедиа, языки программирования, таблицы стилей, упрощенные средства печати изображений и документов. HTML 5.0 – сведение вместе разметки, стилей отображения, программирования и объектной модели документов.

XHTML 1.0 миграция с HTML 4.0 в формат XML.

6

HTML: Принцип теговой разметки

HTML является

описательным

языком разметки документов, в нем используются указатели разметки (теги). Тег – это конструкция вида: элементов разметки.

“<“ нечто “>”

Весь HTML-документ представляет из себя вложенный набор Элемент разметки (контейнер) – это: • полный элемент разметки; • неполный элемент разметки; • Символьный примитив (Character Entity Reference) 7

HTML: Элементы разметки

Полный элемент разметки: <

«имя элемента» [«атрибуты элемента»] «содержание элемента»

>

Примеры: Это заголовок документа

Это заголовок

8

HTML: элементы разметки Неполный элемент разметки: <

«имя элемента» [«атрибуты элемента»]

> Примеры:


9

HTML: элементы разметки Символьные примитивы:

10

Структура HTML-документа Условно все HTML документы можно разбить на:

•

Простые документы(классические, плоские);

•

Документы, состоящие из фреймов;

•

Документы, состоящие из слоев.

11

Структура HTML-документа Простой документ:

Простейший документ

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

Формы HTML-документов
  • Классическая
  • Фреймовая
12

Структура HTML-документа Документ с фреймами:

Документ с фреймами 13

Структура HTML-документа Документ со слоями:

Untitled

KUKU

KUKU

14

HTML: Элеметы заголовка документа

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

HTML: HEAD

контейнеры заголовка

Необязательный атрибут тагов. В качестве значения этого атрибута указывается URL этого файла.

profile

указывает на внешний файл мета 16

HTML: HEAD: TITLE

название документа Заголовок не является обязательным контейнером документа. Его можно опустить. Роботы многих поисковых систем используют содержание элемента TITLE для создания поискового образа документа. Слова из TITLE попадают в индекс поисковой системы. Из этих соображений элемент TITLE всегда рекомендуется использовать на страницах Web узла.

17

HTML: HEAD: BASE

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

... target=window_name> 18

HTML: HEAD: ISINDEX

Задание шаблона поиска. Формат: 19

HTML: HEAD: META

Управление документом: 20

HTML: HEAD: META

Управление документом и его индексирование поисковыми машинами:

21

HTML: HEAD: LINK и STYLE

Общие связи:

Загрузка стилей из внешнего файла:

Описание стилей документа:

22

HTML: HEAD: SCRIPT

Определение внешних объектов, свойств и объектов страницы до момента разбора тела документа:

Пример:

23