Слайд 1Учебный курс
Введение в HTML и CSS
Лекция 3
Основы
HTML
кандидат технических наук
Павел Брониславович Храмцов
paul@kiae.su
Слайд 2HTML: В чем прелесть?
Разработчики HTML смогли решить две задачи:
предоставить дизайнерам гипертекстовых баз данных простое средство создания документов;
сделать
это средство достаточно мощным, чтобы отразить имевшиеся на тот момент представления об интерфейсе пользователя гипертекстовых баз данных.
Слайд 3HTML: возможности
Язык НТМL :
позволяет размечать электронный документ, который отображается
на экране с полиграфическим уровнем оформления;
результирующий документ может содержать
самые разнообразные метки, иллюстрации, аудио- и видеофрагменты и так далее.
В состав языка вошли развитые средства для создания различных уровней заголовков, шрифтовых выделений, различные списки, таблицы и многое другое.
Слайд 4HTML: простое решение
Вид HTML-файла:
Обычный текстовый файл. Такой файл можно создать
в любом текстовом редакторе на любой аппаратной платформе в среде
какой угодно операционной системы;
Посети можно передавать в соответствии с RFC 822 текстовые файлы LATIN1. К моменту разработки HTML существовал американский стандарт для разработки сетевых информационных систем — Z39.50, в котором в качестве единицы хранения указывался простой текстовый файл в кодировке LATIN1, что соответствует US ASCII.
Слайд 5HTML: Версии
HTML 1.0 - Первая версия языка была направлена
на представление языка как такового, где описание его возможностей носило
скорее рекомендательный характер.
HTML 2.0 - Вторая версия языка фиксировала практику использования его конструкций.
HTML++ - представляла новые возможности, расширяя набор тегов HTML в сторону отображения научной информации и таблиц, а также улучшения стиля компоновки изображений и текста.
HTML 3.2 - смогла упорядочить все нововведения и согласовать их с существующей практикой. Она позволяет реализовать использование таблиц, выполнение кодов языка Java, обтекание графики текстом, а также отображение верхних и нижних индексов.
Слайд 6HTML: Версии
HTML 4.0 - кроме возможностей разметки текста, включения
мультимедиа и формирования гипертекстовых связей, уже существовавших в предыдущих версиях
HTML, в версию 4.01 включены дополнительные средства работы с мультимедиа, языки программирования, таблицы стилей, упрощенные средства печати изображений и документов.
HTML 5.0 – сведение вместе разметки, стилей отображения, программирования и объектной модели документов.
XHTML 1.0 - миграция с HTML 4.0 в формат XML.
Слайд 7HTML: Принцип теговой разметки
HTML является описательным языком разметки документов,
в нем используются указатели разметки (теги).
Тег – это конструкция
вида:
“<“ нечто “>”
Весь HTML-документ представляет из себя вложенный набор элементов разметки.
Элемент разметки (контейнер) – это:
полный элемент разметки;
неполный элемент разметки;
Символьный примитив (Character Entity Reference)
Слайд 8HTML: Элементы разметки
Полный элемент разметки:
< «имя элемента» [«атрибуты элемента»]
>
«содержание элемента»
Примеры:
Это заголовок документа
Это
заголовок
Слайд 9HTML: элементы разметки
Неполный элемент разметки:
< «имя элемента» [«атрибуты элемента»] >
Примеры:
src=./001.jpg width=100 height=100>
Слайд 10HTML: элементы разметки
Символьные примитивы:
Слайд 11Структура HTML-документа
Условно все HTML документы можно разбить на:
Простые документы(классические,
плоские);
Документы, состоящие из фреймов;
Документы, состоящие из слоев.
Слайд 12Структура HTML-документа
Простой документ:
Простейший документ
BGCOLOR=#f0f0f0>
Пример простого документа
Формы HTML-документов
Классическая
Фреймовая
Слайд 13Структура HTML-документа
Документ с фреймами:
Документ с фреймами
Слайд 14Структура HTML-документа
Документ со слоями:
Untitled
#first {position: absolute; top:100; left:100;}
#second {position:
absolute; top:110; left:110;}
KUKU
KUKU
Слайд 15HTML: Элеметы заголовка документа
HEAD(элемент разметки HEAD)
TITLE(заглавие документа)
BASE(база URL)
ISINDEX(поисковый шаблон)
META(метаинформация)
LINK(общие ссылки)
STYLE(описатели стилей)
SCRIPT(скрипты)
Слайд 16HTML: HEAD
контейнеры заголовка
Необязательный атрибут profile указывает на внешний
файл мета-тагов. В качестве значения этого атрибута указывается URL этого
файла.
Слайд 17HTML: HEAD: TITLE
название документа
Заголовок не является обязательным контейнером
документа. Его можно опустить. Роботы многих поисковых систем используют содержание
элемента TITLE для создания поискового образа документа. Слова из TITLE попадают в индекс поисковой системы. Из этих соображений элемент TITLE всегда рекомендуется использовать на страницах Web-узла.
Слайд 18HTML: HEAD: BASE
Общепринятым стилем разметки гипертекстовых ссылок является разметка в
частичнозаданных(относительных) адресах, когда URL задается относительно текущего местоположения документа.
href=../next_level/document.html>...
...
...
Слайд 19HTML: HEAD: ISINDEX
Задание шаблона поиска. Формат:
Слайд 20HTML: HEAD: META
Управление документом:
content="1; url=refresh.htm">
content="no-store">
Слайд 21HTML: HEAD: META
Управление документом и его индексирование поисковыми машинами:
name="description" http-equiv="description"
content="Учебный цикл WEB-инжиниринг. Тема: Заголовок HTML-Документа. Элемент разметки META.
Дается краткое описание основных способов применения контейнера META в заголовке HTML-докумета. Рассматривается управление HTTP-обменом и индексирование документов.">
Слайд 22HTML: HEAD: LINK и STYLE
Общие связи:
Загрузка
стилей из внешнего файла:
Описание стилей документа:
type=тип_описания_стилей>
описание стиля/стилей
Слайд 23HTML: HEAD: SCRIPT
Определение внешних объектов, свойств и объектов страницы до
момента разбора тела документа:
JavaScript/VBScript-код
Пример: