Разделы презентаций


Учебный курс Введение в HTML и CSS Лекция 3 Основы HTML

Содержание

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

Слайды и текст этой презентации

Слайд 1Учебный курс Введение в HTML и CSS Лекция 3 Основы

HTML
кандидат технических наук Павел Брониславович Храмцов
paul@kiae.su

Учебный курс  Введение в HTML и CSS   Лекция 3 Основы HTML кандидат технических наук

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



предоставить дизайнерам гипертекстовых баз данных простое средство создания документов;

сделать

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

Слайд 3HTML: возможности
Язык НТМL :

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

на экране с полиграфическим уровнем оформления;

результирующий документ может содержать

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

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

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

Слайд 4HTML: простое решение
Вид HTML-файла:

Обычный текстовый файл. Такой файл можно создать

в любом текстовом редакторе на любой аппаратной платформе в среде

какой угодно операционной системы;

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

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

на представление языка как такового, где описание его возможностей носило

скорее рекомендательный характер.

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

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

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

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

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

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

HTML 5.0 – сведение вместе разметки, стилей отображения, программирования и объектной модели документов.

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

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

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

в нем используются указатели разметки (теги).

Тег – это конструкция

вида:

“<“ нечто “>”
Весь HTML-документ представляет из себя вложенный набор элементов разметки.

Элемент разметки (контейнер) – это:
полный элемент разметки;
неполный элемент разметки;
Символьный примитив (Character Entity Reference)

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

Слайд 8HTML: Элементы разметки
Полный элемент разметки:

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

>
«содержание элемента»


Примеры:


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


Это

заголовок


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

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

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

Примеры:

src=./001.jpg width=100 height=100>









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

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

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

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

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

плоские);

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

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

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

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



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

BGCOLOR=#f0f0f0>
Пример простого документа
Формы HTML-документов

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







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

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



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







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

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



Untitled

#first {position: absolute; top:100; left:100;}
#second {position:

absolute; top:110; left:110;}



KUKU
KUKU


Структура 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(скрипты)

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

Слайд 16HTML: HEAD
  контейнеры заголовка

Необязательный атрибут profile указывает на внешний

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

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

Слайд 17HTML: HEAD: TITLE
название документа

Заголовок не является обязательным контейнером

документа. Его можно опустить. Роботы многих поисковых систем используют содержание

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

Слайд 18HTML: HEAD: BASE
Общепринятым стилем разметки гипертекстовых ссылок является разметка в

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

href=../next_level/document.html>...

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

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


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

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



content="1; url=refresh.htm">




content="no-store">


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

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

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

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

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



Загрузка

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



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

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

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

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

JavaScript/VBScript-код

Пример:




HTML: HEAD: SCRIPTОпределение внешних объектов, свойств и объектов страницы до момента разбора тела документа: JavaScript/VBScript-код  Пример:

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

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

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

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

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


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

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