Технологии разработки статических веб-страниц. Язык гипертекстовой разметки HTML презентация

Содержание

Слайд 2

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

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

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

HTML: В чем прелесть? Разработчики HTML смогли решить две задачи: предоставить дизайнерам гипертекстовых

Слайд 3

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

Язык НТМL :
позволяет размечать электронный документ, который отображается на экране с

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

HTML: возможности Язык НТМL : позволяет размечать электронный документ, который отображается на экране

Слайд 4

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

Вид HTML-файла:
Обычный текстовый файл. Такой файл можно создать в любом текстовом

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

HTML: простое решение Вид HTML-файла: Обычный текстовый файл. Такой файл можно создать в

Слайд 5

HTML: Версии

HTML 1.0 - Первая версия языка была направлена на представление языка

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

HTML: Версии HTML 1.0 - Первая версия языка была направлена на представление языка

Слайд 6

HTML: Версии

HTML 4.0 - кроме возможностей разметки текста, включения мультимедиа и формирования

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

HTML: Версии HTML 4.0 - кроме возможностей разметки текста, включения мультимедиа и формирования

Слайд 7

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

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

указатели разметки (теги).
Тег – это конструкция вида:
“<“ нечто “>”
Весь HTML-документ представляет из себя вложенный набор элементов разметки.
Элемент разметки (контейнер) – это:
полный элемент разметки;
неполный элемент разметки;
Символьный примитив (Character Entity Reference)

HTML: Принцип теговой разметки HTML является описательным языком разметки документов, в нем используются

Слайд 8

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

Полный элемент разметки:
< «имя элемента» [«атрибуты элемента»] >
«содержание элемента»

элемента>
Примеры:


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


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




HTML: Элементы разметки Полный элемент разметки: «содержание элемента» Примеры: Это заголовок документа Это заголовок

Слайд 9

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

Неполный элемент разметки:
< «имя элемента» [«атрибуты элемента»] >
Примеры:



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

Слайд 10

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

Символьные примитивы:

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

Слайд 11

Структура HTML-документа

Условно все HTML документы можно разбить на:
Простые документы(классические, плоские);
Документы, состоящие из

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

Структура HTML-документа Условно все HTML документы можно разбить на: Простые документы(классические, плоские); Документы,

Слайд 12

Структура HTML-документа

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


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


Пример простого

документа

Формы HTML-документов

  • Классическая
  • Фреймовая





Структура HTML-документа Простой документ: Простейший документ Пример простого документа Формы HTML-документов Классическая Фреймовая

Слайд 13

Структура HTML-документа

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


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


SRC=frame1.htm NAME=LEFT>



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

Слайд 14

Структура HTML-документа

Документ со слоями:


Untitled



class=first id=first>KUKU


KUKU




Структура HTML-документа Документ со слоями: Untitled #first {position: absolute; top:100; left:100;} #second {position:

Слайд 15

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

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


LINK(общие ссылки)
STYLE(описатели стилей)
SCRIPT(скрипты)

HTML: Элеметы заголовка документа HEAD(элемент разметки HEAD) TITLE(заглавие документа) BASE(база URL) ISINDEX(поисковый шаблон)

Слайд 16

HTML: HEAD

  контейнеры заголовка
Необязательный атрибут profile указывает на внешний файл мета-тагов. В

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

HTML: HEAD контейнеры заголовка Необязательный атрибут profile указывает на внешний файл мета-тагов. В

Слайд 17

HTML: HEAD: TITLE

название документа
Заголовок не является обязательным контейнером документа. Его можно

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

HTML: HEAD: TITLE название документа Заголовок не является обязательным контейнером документа. Его можно

Слайд 18

HTML: HEAD: BASE

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

URL задается относительно текущего местоположения документа.
...
       ...          ...  

HTML: HEAD: BASE Общепринятым стилем разметки гипертекстовых ссылок является разметка в частичнозаданных(относительных) адресах,

Слайд 19

HTML: HEAD: ISINDEX

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

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

Слайд 20

HTML: HEAD: META

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


content="text/html; charset=windows-1251">


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

Слайд 21

HTML: HEAD: META

Управление документом и его индексирование поисковыми машинами:
WEB-инжиниринг. Тема: Заголовок HTML-Документа. Элемент разметки META. Дается краткое описание основных способов применения контейнера META в заголовке HTML-докумета. Рассматривается управление HTTP-обменом и индексирование документов.">

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

Слайд 22

HTML: HEAD: LINK и STYLE

Общие связи:

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

файла:

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

HTML: HEAD: LINK и STYLE Общие связи: Загрузка стилей из внешнего файла: Описание

Имя файла: Технологии-разработки-статических-веб-страниц.-Язык-гипертекстовой-разметки-HTML.pptx
Количество просмотров: 29
Количество скачиваний: 0