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

Содержание

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

Слайд 1ТЕХНОЛОГИИ РАЗРАБОТКИ ИНТЕРНЕТ ПРИЛОЖЕНИЙ 2. Технологии разработки статических Веб-страниц 2.1. Язык

гипертекстовой разметки HTML.

Слайд 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: элементы разметки
Неполный элемент разметки:

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

Примеры:

width=100 height=100>











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


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

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

Документы,

состоящие из фреймов;

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

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



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


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



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

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






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



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

COLS="30%,*">





Слайд 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 задается относительно текущего местоположения документа.

...

       ...          ...  

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



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



url=refresh.htm">








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

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

Слайд 22HTML: HEAD: LINK и STYLE
Общие связи:



Загрузка стилей

из внешнего файла:



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



Слайд 23HTML: HEAD: SCRIPT
Определение внешних объектов, свойств и объектов страницы до момента

разбора тела документа:



Пример:




Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

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


Для правообладателей

Яндекс.Метрика